From 74749c909df460d0270c4618d3f7eba160230cea Mon Sep 17 00:00:00 2001
From: Jacob Lee <jacoblee93@gmail.com>
Date: Tue, 18 Jun 2024 16:08:22 -0700
Subject: [PATCH] docs[patch]: Adds feedback input after thumbs up/down
 (#23141)

CC @baskaryan
---
 docs/package.json          |  1 +
 docs/src/theme/Feedback.js | 74 +++++++++++++++++++++++++++++++-------
 docs/yarn.lock             |  1 +
 3 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 30375b3e1b..e3d7cc9fcc 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -36,6 +36,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "typescript": "^5.1.3",
+    "uuid": "^9.0.0",
     "webpack": "^5.75.0"
   },
   "devDependencies": {
diff --git a/docs/src/theme/Feedback.js b/docs/src/theme/Feedback.js
index b07f1ec34a..c71bff9640 100644
--- a/docs/src/theme/Feedback.js
+++ b/docs/src/theme/Feedback.js
@@ -2,6 +2,7 @@
 import React, { useState, useEffect } from "react";
 import { createClient } from "@supabase/supabase-js";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { v4 as uuidv4 } from "uuid";
 
 const useCookie = () => {
   /**
@@ -110,7 +111,9 @@ const getIpAddress = async () => {
 
 export default function Feedback() {
   const { setCookie, checkCookie } = useCookie();
+  const [feedbackId, setFeedbackId] = useState(null);
   const [feedbackSent, setFeedbackSent] = useState(false);
+  const [feedbackDetailsSent, setFeedbackDetailsSent] = useState(false);
   const { siteConfig } = useDocusaurusContext();
   const [pathname, setPathname] = useState("");
 
@@ -133,32 +136,55 @@ export default function Feedback() {
     );
     try {
       const ipAddress = await getIpAddress();
-
-      /**
-       * "id" and "created_at" are automatically generated by Supabase
-       * @type {Omit<Database["public"]["Tables"]["feedback"]["Row"], "id" | "created_at">}
-       */
-      const data = {
+      const rowId = uuidv4();
+      setFeedbackId(rowId);
+      const params = {
+        id: rowId,
         is_good: feedback === "good",
         url: window.location.pathname,
         user_ip: ipAddress,
         project: LANGCHAIN_PROJECT_NAME,
       };
 
-      const { error } = await supabase.from("feedback").insert(data);
+      const { error } = await supabase.from("feedback").insert(params);
       if (error) {
         throw error;
       }
     } catch (e) {
-      console.error("Failed to send feedback", {
-        e,
-      });
+      console.error("Failed to send feedback", e);
       return;
     }
 
     // Set a cookie to prevent feedback from being sent multiple times
     setCookie(cookieName, window.location.pathname, 1);
     setFeedbackSent(true);
+
+    const handleFeedbackDetails = async (e) => {
+      e.preventDefault();
+      if (!feedbackId) {
+        setFeedbackDetailsSent(true);
+        return;
+      }
+      const details = e.target.elements
+        .namedItem("details")
+        ?.value.slice(0, 1024);
+      if (!details) {
+        return;
+      }
+      const supabase = createClient(
+        siteConfig.customFields.supabaseUrl,
+        siteConfig.customFields.supabasePublicKey
+      );
+      const { error } = await supabase.from("feedback_details").insert({
+        feedback_id: feedbackId,
+        details,
+      });
+      if (error) {
+        console.error("Failed to add feedback details", error);
+        return;
+      }
+      setFeedbackDetailsSent(true);
+    };
   };
 
   useEffect(() => {
@@ -202,7 +228,31 @@ export default function Feedback() {
     <div style={{ display: "flex", flexDirection: "column" }}>
       <hr />
       {feedbackSent ? (
-        <h4>Thanks for your feedback!</h4>
+        <>
+          <h4>Thanks for your feedback!</h4>
+          {!feedbackDetailsSent && feedbackId && (
+            <form
+              style={{ display: "flex", flexDirection: "column" }}
+              onSubmit={handleFeedbackDetails}
+            >
+              <h4>Do you have any specific comments?</h4>
+              <textarea
+                name="details"
+                style={{ width: "480px", height: "120px" }}
+              />
+              <button
+                style={{
+                  width: "72px",
+                  marginLeft: "408px",
+                  marginTop: "12px",
+                }}
+                type="submit"
+              >
+                Submit
+              </button>
+            </form>
+          )}
+        </>
       ) : (
         <>
           <h4>Was this page helpful?</h4>
@@ -248,7 +298,7 @@ export default function Feedback() {
       )}
       <br />
       <h4>
-        You can leave detailed feedback{" "}
+        You can also leave detailed feedback{" "}
         <a target="_blank" href={newGithubIssueURL}>
           on GitHub
         </a>
diff --git a/docs/yarn.lock b/docs/yarn.lock
index ca4a882530..3dc8a2b1e8 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -5990,6 +5990,7 @@ __metadata:
     typedoc: ^0.24.4
     typedoc-plugin-markdown: next
     typescript: ^5.1.3
+    uuid: ^9.0.0
     webpack: ^5.75.0
     yaml-loader: ^0.8.0
   languageName: unknown