feat: add feedback widget

docs-website/package.json

@@ -31,6 +31,7 @@
     "@octokit/plugin-throttling": "^3.5.1",
     "@octokit/rest": "^18.6.2",
     "@radix-ui/react-visually-hidden": "^1.0.2",
+    "@supabase/supabase-js": "^2.33.1",
     "antd": "^5.0.7",
     "clsx": "^1.1.1",
     "docusaurus-graphql-plugin": "0.5.0",
@@ -39,7 +40,8 @@
     "markprompt": "^0.1.7",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
-    "sass": "^1.43.2"
+    "sass": "^1.43.2",
+    "uuid": "^9.0.0"
   },
   "browserslist": {
     "production": [

docs-website/src/components/Feedback/index.js

@@ -0,0 +1,102 @@
+import React, { useState, useMemo } from "react";
+import clsx from "clsx";
+import { supabase } from "./supabase";
+import styles from "./styles.module.scss";
+import { LikeOutlined, DislikeOutlined, CheckCircleOutlined } from "@ant-design/icons";
+import { v4 as uuidv4 } from "uuid";
+
+const Feedback = () => {
+  const [reaction, setReaction] = useState(null);
+  const [feedback, setFeedback] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const [reactionId, setReactionId] = useState(null);
+
+  const handleReaction = async (selectedReaction) => {
+    if (reaction !== selectedReaction) {
+      const uuid = uuidv4();
+      try {
+        const { error } = await supabase.from("reaction_feedback").insert([
+          {
+            id: uuid,
+            page: window.location.href,
+            reaction: selectedReaction,
+          },
+        ]);
+
+        if (error) {
+          console.error("Error submitting feedback:", error);
+          return;
+        }
+        setReactionId(uuid);
+        setReaction(selectedReaction);
+      } catch (error) {
+        console.error("Error submitting feedback:", error);
+      }
+    } else {
+      setReaction(null);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (feedback !== "" && reactionId !== null) {
+        const { error } = await supabase.from("written_feedback").insert([
+          {
+            feedback: feedback,
+            reaction_feedback_id: reactionId,
+          },
+        ]);
+
+        if (error) {
+          console.error("Error submitting feedback:", error);
+          return;
+        }
+        setSubmitted(true);
+      }
+    } catch (error) {
+      console.error("Error submitting feedback:", error);
+    }
+  };
+
+  return (
+    <div className={styles.feedbackWrapper}>
+      <div className={styles.feedbackWidget}>
+        {!submitted ? (
+          <>
+            <div className={styles.feedbackButtons}>
+              <strong>Is this page helpful?</strong>
+              <div>
+                <button className={clsx(styles.feedbackButton, reaction === "positive" && styles.active)} onClick={() => handleReaction("positive")}>
+                  <LikeOutlined />
+                </button>
+                <button className={clsx(styles.feedbackButton, reaction === "negative" && styles.active)} onClick={() => handleReaction("negative")}>
+                  <DislikeOutlined />
+                </button>
+              </div>
+            </div>
+            {reaction !== null && (
+              <form className={styles.feedbackForm} onSubmit={handleSubmit}>
+                <textarea
+                  className={styles.feedbackText}
+                  value={feedback}
+                  rows="4"
+                  onChange={(e) => setFeedback(e.target.value)}
+                  placeholder="Your feedback (optional)"
+                ></textarea>
+                <button className="button button--secondary">Send</button>
+              </form>
+            )}
+          </>
+        ) : (
+          <div className={styles.feedbackMessage}>
+            <CheckCircleOutlined />
+            <strong>Thanks for your feedback!</strong>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Feedback;

docs-website/src/components/Feedback/styles.module.scss

@@ -0,0 +1,78 @@
+.feedbackWrapper {
+  display: flex;
+}
+
+.feedbackWidget {
+  min-height: 64px;
+  margin: 15px auto;
+  padding: 10px 20px;
+  border: var(--ifm-hr-border-color) 1px solid;
+  border-radius: 32px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.feedbackButtons {
+  strong {
+    margin-right: 4px;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.feedbackForm {
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 0.8rem;
+  button {
+    margin-left: auto;
+  }
+}
+
+.feedbackText {
+  width: 100%;
+  border: var(--ifm-hr-border-color) 1px solid;
+  border-radius: 0.4rem;
+  padding: 0.4rem;
+  font-family: "Manrope", sans-serif;
+}
+
+.feedbackButton {
+  width: 2rem;
+  height: 2rem;
+  text-align: center;
+  font-size: 1.25rem;
+  padding: 0.25rem;
+  border-radius: 1000em;
+  margin-left: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  svg {
+    fill: var(--ifm-link-color);
+  }
+
+  &:hover,
+  &.active {
+    background: var(--ifm-link-color);
+    svg {
+      fill: var(--ifm-background-color);
+    }
+  }
+}
+
+.feedbackMessage {
+  display: flex;
+  align-items: center;
+  svg {
+    font-size: larger;
+    margin-right: 6px;
+    fill: var(--ifm-color-success);
+  }
+}

docs-website/src/components/Feedback/supabase.js

@@ -0,0 +1,9 @@
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = "https://ttydafdojardufehywni.supabase.co";
+const supabaseKey =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR0eWRhZmRvamFyZHVmZWh5d25pIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTMzNDk2NDksImV4cCI6MjAwODkyNTY0OX0.X2KKTPFzouQyXAQH3VTrL-fyhbdUtlPsLHIYtoACQss";
+
+export const supabase = createClient(supabaseUrl, supabaseKey);
+
+export default supabase;

docs-website/src/theme/DocItem/Footer/index.js

@@ -0,0 +1,58 @@
+import React from "react";
+import clsx from "clsx";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import { useDoc } from "@docusaurus/theme-common/internal";
+import LastUpdated from "@theme/LastUpdated";
+import EditThisPage from "@theme/EditThisPage";
+import TagsListInline from "@theme/TagsListInline";
+import styles from "./styles.module.css";
+import Feedback from "../../../components/Feedback";
+
+function TagsRow(props) {
+  return (
+    <div className={clsx(ThemeClassNames.docs.docFooterTagsRow, "row margin-bottom--sm")}>
+      <div className="col">
+        <TagsListInline {...props} />
+      </div>
+    </div>
+  );
+}
+function EditMetaRow({ editUrl, lastUpdatedAt, lastUpdatedBy, formattedLastUpdatedAt }) {
+  return (
+    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, "row")}>
+      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
+
+      <div className={clsx("col", styles.lastUpdated)}>
+        {(lastUpdatedAt || lastUpdatedBy) && (
+          <LastUpdated lastUpdatedAt={lastUpdatedAt} formattedLastUpdatedAt={formattedLastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />
+        )}
+      </div>
+    </div>
+  );
+}
+export default function DocItemFooter() {
+  const { metadata } = useDoc();
+  const { editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags, unversionedId } = metadata;
+  const canDisplayTagsRow = tags.length > 0;
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
+  if (!canDisplayFooter) {
+    return null;
+  }
+  return (
+    <>
+      <footer className={clsx(ThemeClassNames.docs.docFooter, "docusaurus-mt-lg")}>
+        {canDisplayTagsRow && <TagsRow tags={tags} />}
+        {canDisplayEditMetaRow && (
+          <EditMetaRow
+            editUrl={editUrl}
+            lastUpdatedAt={lastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+            formattedLastUpdatedAt={formattedLastUpdatedAt}
+          />
+        )}
+      </footer>
+      <Feedback resource={unversionedId} />
+    </>
+  );
+}

docs-website/src/theme/DocItem/Footer/styles.module.css

@@ -0,0 +1,11 @@
+.lastUpdated {
+  margin-top: 0.2rem;
+  font-style: italic;
+  font-size: smaller;
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}