feat: added feedback section for each page

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@docusaurus/core": "3.4.0",
     "@docusaurus/preset-classic": "3.4.0",
+    "@feelback/react": "^0.3.4",
     "@mdx-js/react": "^3.0.0",
     "@sinm/react-file-tree": "^1.1.1",
     "chaingpt-component": "^0.2.0-beta.3",

src/css/custom.css

@@ -70,4 +70,41 @@
   .mobile-only {
     display: none;
   }
+}
+
+/*
+Feedback widget CSS customization
+https://www.feelback.dev/docs/guides/stripe-like-documentation-feedback-for-docusaurus/
+*/
+@import "@feelback/react/styles/feelback.css";
+
+.feedback-component{
+  margin-top: 2rem;
+}
+
+.feedback-component .feelback-container .feelback-buttons{
+  gap: 10px;
+}
+
+.feedback-component .feelback-container .feelback-btn {
+    background-color: var(--ifm-color-primary);
+    color: white;
+    height: 37px;
+    padding-inline: 15px;
+    border-radius: 7px;
+}
+
+.feedback-component .feelback-container .feelback-btn:hover{
+  background-color: var(--ifm-color-primary-dark);
+
+}
+
+.feedback-component .feelback-container textarea {
+    border: 1px solid var(--ifm-color-primary-lightest);
+    border-radius: 10px;
+    padding: 0.7rem;
+}
+
+.feedback-component .feelback-radio-side label{
+  font-weight: 600;
 }

src/theme/DocPaginator/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import Translate, { translate } from "@docusaurus/Translate";
+import PaginatorNavLink from "@theme/PaginatorNavLink";
+import type { Props } from "@theme/DocPaginator";
+import Feedback from "../Feedback";
+
+export default function DocPaginator(props: Props): JSX.Element {
+  const { previous, next } = props;
+  return (
+    <nav>
+      <div
+        className="pagination-nav docusaurus-mt-lg"
+        aria-label={translate({
+          id: "theme.docs.paginator.navAriaLabel",
+          message: "Docs pages",
+          description: "The ARIA label for the docs pagination",
+        })}
+      >
+        {previous && (
+          <PaginatorNavLink
+            {...previous}
+            subLabel={
+              <Translate
+                id="theme.docs.paginator.previous"
+                description="The label used to navigate to the previous doc"
+              >
+                Previous
+              </Translate>
+            }
+          />
+        )}
+        {next && (
+          <PaginatorNavLink
+            {...next}
+            subLabel={
+              <Translate
+                id="theme.docs.paginator.next"
+                description="The label used to navigate to the next doc"
+              >
+                Next
+              </Translate>
+            }
+            isNext
+          />
+        )}
+      </div>
+      <Feedback />
+    </nav>
+  );
+}

src/theme/Feedback/index.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import {
+  FeelbackTaggedMessage,
+  Question,
+  PRESET_YESNO_LIKE_DISLIKE,
+} from "@feelback/react";
+
+const YES_TAGS = [
+  {
+    value: "accurate",
+    title: "Accurate",
+    description: "Accurately describes the product or feature.",
+  },
+  {
+    value: "problem-solved",
+    title: "Solved my problem",
+    description: "Helped me resolve an issue.",
+  },
+  {
+    value: "clear",
+    title: "Easy to understand",
+    description: "Easy to follow and comprehend.",
+  },
+  {
+    value: "product-chosen",
+    title: "Helped me decide to use the product",
+    description: "Convinced me to adopt the product or feature.",
+  },
+  { value: "other-yes", title: "Another reason" },
+];
+
+const NO_TAGS = [
+  {
+    value: "inaccurate",
+    title: "Inaccurate",
+    description: "Doesn't accurately describe the product or feature.",
+  },
+  {
+    value: "missing-info",
+    title: "Couldn't find what I was looking for",
+    description: "Missing important information.",
+  },
+  {
+    value: "unclear",
+    title: "Hard to understand",
+    description: "Too complicated or unclear.",
+  },
+  {
+    value: "bad-examples",
+    title: "Code samples errors",
+    description: "One or more code samples are incorrect.",
+  },
+  { value: "other-no", title: "Another reason" },
+];
+
+const FEEDBACK_CONTENT_SET_ID = "d069bd2e-19d3-405c-9198-a8f005883f6b";
+
+const Feedback = () => {
+  const [choice, setChoice] = useState<"y" | "n">();
+
+  return (
+    <div className="alert alert--info feedback-component">
+      <div className="feelback-container">
+        {!choice ? (
+          <Question
+            text="Was this page helpful?"
+            items={PRESET_YESNO_LIKE_DISLIKE}
+            showLabels
+            onClick={(option: "y" | "n") => setChoice(option)}
+          />
+        ) : (
+          <FeelbackTaggedMessage
+            contentSetId={FEEDBACK_CONTENT_SET_ID}
+            layout="radio-group"
+            tags={choice === "y" ? YES_TAGS : NO_TAGS}
+            title={choice === "y" ? "What did you like?" : "What went wrong?"}
+            placeholder="(optional) Please, further detail the feedback"
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Feedback;