Add feedback widget (#217)

Signed-off-by: Dan Barr <[email protected]>
Co-authored-by: Dan Barr <[email protected]>

Author: danbarr

docusaurus.config.ts

@@ -19,6 +19,16 @@ const config: Config = {
         debug: false,
       },
     ],
+    [
+      'docusaurus-pushfeedback',
+      {
+        project: '8lp399irfx',
+        buttonStyle: 'dark',
+        buttonPosition: 'bottom-right',
+        modalPosition: 'bottom-right',
+        customFont: true,
+      },
+    ],
     [
       './plugins/mcp-metadata-plugin',
       {

package-lock.json

@@ -30,8 +30,10 @@
     "@mdx-js/react": "^3.1.1",
     "clsx": "^2.1.1",
     "docusaurus-json-schema-plugin": "1.15.0",
+    "docusaurus-pushfeedback": "^1.0.9",
     "glob": "^11.0.3",
     "prism-react-renderer": "^2.4.1",
+    "pushfeedback-react": "^0.1.76",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "redocusaurus": "2.5.0"

package.json

@@ -47,6 +47,8 @@
   --ifm-color-primary-lightest: #340cd7;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%);
+
+  --feedback-primary-color: var(--ifm-color-primary) !important;
 }
 
 /* Overrides for dark mode. */
@@ -77,6 +79,8 @@ html[data-theme='dark'] {
   --ifm-color-primary-lighter: #b3d6ff;
   --ifm-color-primary-lightest: #ebf4ff;
   --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 35%);
+
+  --feedback-primary-color: var(--ifm-color-primary-darker) !important;
 }
 
 thead th {

src/css/custom.css

@@ -0,0 +1,132 @@
+import React, { type ReactNode, useState } from 'react';
+import Footer from '@theme-original/DocItem/Footer';
+import type FooterType from '@theme/DocItem/Footer';
+import type { WrapperProps } from '@docusaurus/types';
+
+import { FeedbackButton } from 'pushfeedback-react';
+import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
+
+type Props = WrapperProps<typeof FooterType>;
+
+function FeedbackWidget(): React.JSX.Element {
+  const [selected, setSelected] = useState<string | null>(null); // Track the selected button
+
+  const buttonThumbsUp = (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='20'
+      height='20'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    >
+      <path d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'></path>
+    </svg>
+  );
+
+  const buttonThumbsDown = (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='20'
+      height='20'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    >
+      <path d='M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17'></path>
+    </svg>
+  );
+
+  // Replace with your PROJECT_ID
+  const projectId: string = '8lp399irfx';
+
+  const handleButtonClick = (rating: string): void => {
+    setSelected(rating);
+  };
+
+  return (
+    <div className='feedback-widget margin-top--md margin-bottom--md'>
+      <div className='margin-bottom--sm'>
+        <b>Was this helpful?</b>
+      </div>
+      <span className='feedback-widget-positive'>
+        <FeedbackButton
+          project={projectId}
+          rating={1}
+          custom-font='True'
+          button-style='default'
+          modal-position='center'
+          submit={true}
+        >
+          <button
+            className={`feedback-button ${selected === '1' ? 'selected' : ''}`}
+            title='Yes'
+            onClick={() => handleButtonClick('1')}
+          >
+            {buttonThumbsUp}
+          </button>
+        </FeedbackButton>
+      </span>
+      <span className='feedback-widget-negative margin-left--sm'>
+        <FeedbackButton
+          project={projectId}
+          rating={0}
+          custom-font='True'
+          button-style='default'
+          modal-position='center'
+          submit={true}
+        >
+          <button
+            className={`feedback-button ${selected === '0' ? 'selected' : ''}`}
+            title='No'
+            onClick={() => handleButtonClick('0')}
+          >
+            {buttonThumbsDown}
+          </button>
+        </FeedbackButton>
+      </span>
+
+      {/* Style Block for Button Hover */}
+      <style>
+        {`
+          .feedback-widget button {
+            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+            border: 2px solid var(--feedback-primary-color);
+            color: var(--feedback-primary-color);
+            background-color: transparent;
+            border-radius: 8px;
+            padding: 8px 16px;
+            cursor: pointer;
+          }
+
+          .feedback-widget button.selected {
+            background-color: var(--feedback-primary-color);
+            color: white;
+            border-color: var(--feedback-primary-color);
+          }
+
+          .feedback-widget button:hover {
+            background-color: var(--feedback-primary-color);
+            color: white;
+            border-color: var(--feedback-primary-color);
+          }
+        `}
+      </style>
+    </div>
+  );
+}
+
+export default function FooterWrapper(props: Props): ReactNode {
+  return (
+    <>
+      <FeedbackWidget />
+      <Footer {...props} />
+    </>
+  );
+}