From 99113f093eb62f325f5383498f7a6c46c94f718a Mon Sep 17 00:00:00 2001
From: Jeff Merrick <jeff@wireform.io>
Date: Tue, 5 Sep 2023 14:31:43 -0500
Subject: [PATCH 1/2] docs: style docs feedback widget

---
 docs-website/src/components/Feedback/index.js | 36 +++++++-----
 .../src/components/Feedback/styles.module.css | 36 ------------
 .../components/Feedback/styles.module.scss    | 55 +++++++++++++++++++
 .../src/theme/DocItem/Footer/index.js         | 35 ++----------
 4 files changed, 84 insertions(+), 78 deletions(-)
 delete mode 100644 docs-website/src/components/Feedback/styles.module.css
 create mode 100644 docs-website/src/components/Feedback/styles.module.scss

diff --git a/docs-website/src/components/Feedback/index.js b/docs-website/src/components/Feedback/index.js
index 9a9eb1b3e9a8c..cc8310a1b5f20 100644
--- a/docs-website/src/components/Feedback/index.js
+++ b/docs-website/src/components/Feedback/index.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { supabase } from "./supabase";
-import styles from "./styles.module.css";
+import styles from "./styles.module.scss";
+import { LikeOutlined, DislikeOutlined, CheckCircleOutlined } from "@ant-design/icons";
 
 const Feedback = ({ page }) => {
   const [reaction, setReaction] = useState(null);
@@ -27,18 +28,27 @@ const Feedback = ({ page }) => {
   };
 
   return (
-    <div className={styles.feedbackWidget}>
-      {reaction === null ? (
-        <div className={styles.reactionButtons}>
-          <h3>Is this page helpful?</h3>
-          <button className={styles.reaction} onClick={() => handleReaction("thumbs_up")}>👍</button>
-          <button className={styles.reaction} onClick={() => handleReaction("thumbs_down")}>👎</button>
-        </div>
-      ) : (
-        <div className={styles.feedbackMessage}>
-          Thanks for your feedback!
-        </div>
-      )}
+    <div className={styles.feedbackWrapper}>
+      <div className={styles.feedbackWidget}>
+        {reaction === null ? (
+          <div className={styles.feedbackButtons}>
+            <strong>Is this page helpful?</strong>
+            <div>
+              <button onClick={() => handleReaction("thumbs_up")}>
+                <LikeOutlined />
+              </button>
+              <button onClick={() => handleReaction("thumbs_down")}>
+                <DislikeOutlined />
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className={styles.feedbackMessage}>
+            <CheckCircleOutlined />
+            <strong>Thanks for your feedback!</strong>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/docs-website/src/components/Feedback/styles.module.css b/docs-website/src/components/Feedback/styles.module.css
deleted file mode 100644
index 098780e859889..0000000000000
--- a/docs-website/src/components/Feedback/styles.module.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.feedbackWidget {
-  margin: 15px 15px;
-  padding: 20px 20px;
-  border: var(--ifm-hr-border-color) 1px solid;
-  border-radius: 10px;
-  text-align: center;
-}
-
-.title {
-  text-align: center;
-}
-
-.widget .grid {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  min-height: 50px;
-}
-
-.widget .cell {
-  width: 50px;
-}
-
-.reaction {
-  padding: 10px;
-}
-
-.reaction:hover {
-  background-color: skyblue;
-  cursor: pointer;
-}
-
-.widget .footer {
-  margin-top: 10px;
-  margin-left: 0;
-}
diff --git a/docs-website/src/components/Feedback/styles.module.scss b/docs-website/src/components/Feedback/styles.module.scss
new file mode 100644
index 0000000000000..672cb18d203a1
--- /dev/null
+++ b/docs-website/src/components/Feedback/styles.module.scss
@@ -0,0 +1,55 @@
+.feedbackWrapper {
+  display: flex;
+}
+
+.feedbackWidget {
+  min-height: 64px;
+  margin: 15px auto;
+  padding: 10px 20px;
+  border: var(--ifm-hr-border-color) 1px solid;
+  border-radius: 1000em;
+  text-align: center;
+  display: flex;
+  align-items: center;
+}
+
+.feedbackButtons {
+  strong {
+    margin-right: 4px;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  button {
+    width: 2rem;
+    height: 2rem;
+    text-align: center;
+    font-size: 1.25rem;
+    padding: 0.25rem;
+    border-radius: 1000em;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    svg {
+      fill: var(--ifm-link-color);
+    }
+
+    &:hover {
+      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);
+  }
+}
diff --git a/docs-website/src/theme/DocItem/Footer/index.js b/docs-website/src/theme/DocItem/Footer/index.js
index 754f7bf4167c5..94b6c7734f9ee 100644
--- a/docs-website/src/theme/DocItem/Footer/index.js
+++ b/docs-website/src/theme/DocItem/Footer/index.js
@@ -10,35 +10,21 @@ import Feedback from "../../../components/Feedback";
 
 function TagsRow(props) {
   return (
-    <div
-      className={clsx(
-        ThemeClassNames.docs.docFooterTagsRow,
-        "row margin-bottom--sm",
-      )}
-    >
+    <div className={clsx(ThemeClassNames.docs.docFooterTagsRow, "row margin-bottom--sm")}>
       <div className="col">
         <TagsListInline {...props} />
       </div>
     </div>
   );
 }
-function EditMetaRow({
-  editUrl,
-  lastUpdatedAt,
-  lastUpdatedBy,
-  formattedLastUpdatedAt,
-}) {
+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}
-          />
+          <LastUpdated lastUpdatedAt={lastUpdatedAt} formattedLastUpdatedAt={formattedLastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />
         )}
       </div>
     </div>
@@ -46,14 +32,7 @@ function EditMetaRow({
 }
 export default function DocItemFooter() {
   const { metadata } = useDoc();
-  const {
-    editUrl,
-    lastUpdatedAt,
-    formattedLastUpdatedAt,
-    lastUpdatedBy,
-    tags,
-    unversionedId,
-  } = metadata;
+  const { editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags, unversionedId } = metadata;
   const canDisplayTagsRow = tags.length > 0;
   const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
   const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
@@ -62,10 +41,7 @@ export default function DocItemFooter() {
   }
   return (
     <>
-      <Feedback resource={unversionedId} />
-      <footer
-        className={clsx(ThemeClassNames.docs.docFooter, "docusaurus-mt-lg")}
-      >
+      <footer className={clsx(ThemeClassNames.docs.docFooter, "docusaurus-mt-lg")}>
         {canDisplayTagsRow && <TagsRow tags={tags} />}
         {canDisplayEditMetaRow && (
           <EditMetaRow
@@ -76,6 +52,7 @@ export default function DocItemFooter() {
           />
         )}
       </footer>
+      <Feedback resource={unversionedId} />
     </>
   );
 }

From ac87ce86def5dadd843e73d57899f24b51e84fd8 Mon Sep 17 00:00:00 2001
From: Jeff Merrick <jeff@wireform.io>
Date: Wed, 6 Sep 2023 13:50:00 -0500
Subject: [PATCH 2/2] docs: collect text feedback from users

---
 docs-website/package.json                     |  3 +-
 docs-website/src/components/Feedback/index.js | 94 ++++++++++++++-----
 .../components/Feedback/styles.module.scss    | 59 ++++++++----
 .../src/components/Feedback/supabase.js       |  7 +-
 docs-website/yarn.lock                        |  5 +
 5 files changed, 122 insertions(+), 46 deletions(-)

diff --git a/docs-website/package.json b/docs-website/package.json
index b826881cf0ba8..778b400d9a564 100644
--- a/docs-website/package.json
+++ b/docs-website/package.json
@@ -40,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": [
diff --git a/docs-website/src/components/Feedback/index.js b/docs-website/src/components/Feedback/index.js
index cc8310a1b5f20..ecabca445bd48 100644
--- a/docs-website/src/components/Feedback/index.js
+++ b/docs-website/src/components/Feedback/index.js
@@ -1,27 +1,59 @@
-import React, { useState } from "react";
+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 = ({ page }) => {
+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) => {
-    console.log("Button clicked:", selectedReaction);
-    try {
-      const { data, error } = await supabase.from("feedback").insert([
-        {
-          page: window.location.href,
-          reaction: 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) {
+        if (error) {
+          console.error("Error submitting feedback:", error);
+          return;
+        }
+        setReactionId(uuid);
+        setReaction(selectedReaction);
+      } catch (error) {
         console.error("Error submitting feedback:", error);
-        return;
       }
+    } else {
+      setReaction(null);
+    }
+  };
 
-      setReaction(selectedReaction);
+  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);
     }
@@ -30,18 +62,32 @@ const Feedback = ({ page }) => {
   return (
     <div className={styles.feedbackWrapper}>
       <div className={styles.feedbackWidget}>
-        {reaction === null ? (
-          <div className={styles.feedbackButtons}>
-            <strong>Is this page helpful?</strong>
-            <div>
-              <button onClick={() => handleReaction("thumbs_up")}>
-                <LikeOutlined />
-              </button>
-              <button onClick={() => handleReaction("thumbs_down")}>
-                <DislikeOutlined />
-              </button>
+        {!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>
-          </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 />
diff --git a/docs-website/src/components/Feedback/styles.module.scss b/docs-website/src/components/Feedback/styles.module.scss
index 672cb18d203a1..b0fa3d7d1bd2b 100644
--- a/docs-website/src/components/Feedback/styles.module.scss
+++ b/docs-website/src/components/Feedback/styles.module.scss
@@ -7,10 +7,11 @@
   margin: 15px auto;
   padding: 10px 20px;
   border: var(--ifm-hr-border-color) 1px solid;
-  border-radius: 1000em;
+  border-radius: 32px;
   text-align: center;
   display: flex;
-  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 
 .feedbackButtons {
@@ -22,24 +23,46 @@
   justify-content: center;
   align-items: center;
   gap: 1rem;
+}
+
+.feedbackForm {
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 0.8rem;
   button {
-    width: 2rem;
-    height: 2rem;
-    text-align: center;
-    font-size: 1.25rem;
-    padding: 0.25rem;
-    border-radius: 1000em;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    svg {
-      fill: var(--ifm-link-color);
-    }
+    margin-left: auto;
+  }
+}
 
-    &:hover {
-      background: var(--ifm-link-color);
-      svg {
-        fill: var(--ifm-background-color);
-      }
+.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);
     }
   }
 }
diff --git a/docs-website/src/components/Feedback/supabase.js b/docs-website/src/components/Feedback/supabase.js
index 800261718550e..2f3b8e4306565 100644
--- a/docs-website/src/components/Feedback/supabase.js
+++ b/docs-website/src/components/Feedback/supabase.js
@@ -1,8 +1,9 @@
 import { createClient } from "@supabase/supabase-js";
 
-const supabaseUrl = "";
-const supabaseKey = "";
+const supabaseUrl = "https://ttydafdojardufehywni.supabase.co";
+const supabaseKey =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR0eWRhZmRvamFyZHVmZWh5d25pIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTMzNDk2NDksImV4cCI6MjAwODkyNTY0OX0.X2KKTPFzouQyXAQH3VTrL-fyhbdUtlPsLHIYtoACQss";
 
 export const supabase = createClient(supabaseUrl, supabaseKey);
 
-export default supabase;
\ No newline at end of file
+export default supabase;
diff --git a/docs-website/yarn.lock b/docs-website/yarn.lock
index c506fc25eba8a..801e6d7c733c7 100644
--- a/docs-website/yarn.lock
+++ b/docs-website/yarn.lock
@@ -9919,6 +9919,11 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 uvu@^0.5.0:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"