feat(docs): added feedback mechanism for all pages of docs (#171)

components/feedback.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from "react";
+
+const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
+  const [feedback, setFeedback] = useState("");
+  const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState(false);
+  const [isInputVisible, setInputVisible] = useState(false);
+  const [feedbackType, setFeedbackType] = useState(""); // State to track feedback type
+
+  const resetState = () => {
+    setFeedback("");
+    setIsFeedbackSubmitted(false);
+    setInputVisible(false);
+    setFeedbackType("");
+  };
+
+  useEffect(() => {
+    // When the component mounts, reset its state
+    resetState();
+  }, [pageUrl]); // Reset the state whenever the pageUrl changes
+
+  const handleThumbsClick = (type) => {
+    // Set the feedback type and open the input box when thumbs up or thumbs down is clicked
+    setFeedbackType(type);
+    setInputVisible(true);
+  };
+
+  const handleFeedbackSubmit = async () => {
+    // Now you can associate feedback type, feedback and page
+    try {
+      const response = await fetch(
+        "https://profilio-staging.sandbox-london-b.fetch-ai.com/api/feedback",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            feedbackType,
+            description: feedback,
+            pageUrl,
+          }),
+        },
+      );
+
+      if (response.ok) {
+        setIsFeedbackSubmitted(true);
+      } else {
+        // Handle error
+        console.log("---something went wrong----");
+      }
+    } catch (error) {
+      // Handle errors
+      console.log("---oops, something went wrong----", error);
+    }
+  };
+
+  return (
+    <div>
+      {isFeedbackSubmitted ? (
+        <p>Thank you for your feedback!</p>
+      ) : (
+        <>
+          <h3 className="nx-text-lg nx-flex nx-justify-center ">
+            Was this page helpful?
+          </h3>
+          <div
+            className={`nx-flex nx-items-center nx-space-x-4 nx-mt-4 nx-justify-center`}
+          >
+            <div
+              className={`nx-w-12 nx-h-12 nx-flex nx-items-center nx-justify-center nx-rounded-full nx-bg-green`}
+              onClick={() => handleThumbsClick("positive")}
+            >
+              👍
+            </div>
+            <div
+              className={`nx-w-12 nx-h-12 nx-flex nx-items-center nx-justify-center nx-rounded-full nx-bg-red-500`}
+              onClick={() => handleThumbsClick("negative")}
+            >
+              👎
+            </div>
+          </div>
+          {isInputVisible && (
+            <div className="nx-mt-4 nx-flex nx-flex-col nx-justify-center">
+              <textarea
+                className="nx-rounded-lg nx-border nx-border-gray-300 nx-bg-gray-100 nx-p-4 nx-shadow-inner"
+                placeholder="Enter your feedback..."
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+              />
+              <button
+                className="nx-mt-4 nx-bg-purple nx-hover:nx-bg-purple-600 nx-text-white nx-font-bold nx-py-2 nx-px-4 nx-rounded-xxl"
+                onClick={handleFeedbackSubmit}
+              >
+                Submit Feedback
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default FeedbackComponent;

styles/globals.css

@@ -1672,6 +1672,14 @@ video {
   border-color: rgba(95, 56, 251, 1);
 }
 
+.nx-bg-purple {
+  background-color: rgba(95, 56, 251, 1);
+}
+
+.nx-bg-purple-600 {
+  background-color: rgba(95, 56, 251, 0.6);
+}
+
 .nx-text-current {
   color: currentColor;
 }

theme/fetch-ai-docs/index.tsx

@@ -22,6 +22,7 @@ import { ActiveAnchorProvider, ConfigProvider, useConfig } from "./contexts";
 import { getComponents } from "./mdx-components";
 import { renderComponent } from "./utils";
 import React from "react";
+import FeedbackComponent from "components/feedback";
 
 interface BodyProps {
   themeContext: PageTheme;
@@ -67,10 +68,18 @@ const Body = ({
       <div className="nx-mt-16" />
     );
 
+  const routeOriginal = useFSRoute();
+  const [route] = routeOriginal.split("#");
+
   const content = (
     <>
       {children}
       {gitTimestampEl}
+      {themeContext.timestamp && (
+        <div className="nx-flex nx-justify-center nx-mb-6">
+          <FeedbackComponent pageUrl={route} />
+        </div>
+      )}
       {navigation}
     </>
   );