feat(nx-dev): show a toast every time feedback button is pressed

nx-dev/feature-ai/src/lib/Toast.tsx

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+const Toast = ({ message = '', duration = 3000 }) => {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return visible ? (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '20px',
+        right: '20px',
+        padding: '10px',
+        color: '#fff',
+        backgroundColor: '#444',
+      }}
+    >
+      {message}
+    </div>
+  ) : null;
+};
+
+export default Toast;

nx-dev/feature-ai/src/lib/feature-ai.tsx

@@ -4,19 +4,20 @@ import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
 
 import { renderMarkdown } from '@nx/nx-dev/ui-markdoc';
 import { nxDevDataAccessAi } from '@nx/nx-dev/data-access-ai';
+import Toast from './Toast';
 
 export function FeatureAi(): JSX.Element {
   const [finalResult, setFinalResult] = useState<null | ReactNode>(null);
   const [error, setError] = useState(null);
   const [query, setSearchTerm] = useState('');
   const [loading, setLoading] = useState(false);
+  const [toastMessage, setToastMessage] = useState<null | string>(null);
 
   const warning = `
   {% callout type="warning" title="Always double check!" %}
   This feature is still in Alpha.
   The results may not be accurate, so please always double check with our documentation.
 {% /callout %}
-
   `;
 
   const handleSubmit = async () => {
@@ -38,6 +39,20 @@ export function FeatureAi(): JSX.Element {
     );
   };
 
+  const handleFeedback = (type: 'good' | 'bad') => {
+    try {
+      sendCustomEvent('ai_feedback', 'ai', type, undefined, {
+        query,
+        result: finalResult,
+      });
+      setToastMessage(null);
+      setTimeout(() => setToastMessage('Thank you for your feedback!'), 100);
+    } catch (error) {
+      setToastMessage(null);
+      setTimeout(() => setToastMessage('Feedback was not sent.'), 100);
+    }
+  };
+
   return (
     <div
       className="p-2 mx-auto flex h-full w-full flex-col"
@@ -82,12 +97,7 @@ export function FeatureAi(): JSX.Element {
             <Button
               variant="primary"
               size="small"
-              onClick={() =>
-                sendCustomEvent('ai_feedback', 'ai', 'good', undefined, {
-                  query,
-                  result: finalResult,
-                })
-              }
+              onClick={() => handleFeedback('good')}
             >
               Answer was helpful{' '}
               <span role="img" aria-label="thumbs-up">
@@ -97,12 +107,7 @@ export function FeatureAi(): JSX.Element {
             <Button
               variant="primary"
               size="small"
-              onClick={() =>
-                sendCustomEvent('ai_feedback', 'ai', 'bad', undefined, {
-                  query,
-                  result: finalResult,
-                })
-              }
+              onClick={() => handleFeedback('bad')}
             >
               Answer looks wrong{' '}
               <span role="img" aria-label="thumbs-down">
@@ -112,6 +117,7 @@ export function FeatureAi(): JSX.Element {
           </div>
         </>
       ) : null}
+      {toastMessage && <Toast message={toastMessage} />}
       {error ? <div>There was an error: {error['message']}</div> : null}
     </div>
   );