Wired in Feedback buttons

ChrisPatten · Dec 19, 2024 · a2d4f9e · a2d4f9e
1 parent 591a54f
commit a2d4f9e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/app/containers/ConversationBubble/ConversationBubble.js b/app/containers/ConversationBubble/ConversationBubble.js
@@ -8,10 +8,20 @@ import Tooltip from '@/app/components/Tooltip/Tooltip';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import ThumbDownIcon from '@mui/icons-material/ThumbDown';
 import ErrorIcon from '@mui/icons-material/Error';
+import postFeedback from '@/app/services/postFeedback';
 
 const ConversationBubble = ({ entry }) => {
   const theme = useTheme();
 
+  const handleFeedback = async (type) => {
+    const success = await postFeedback(entry.requestId, type);
+    if (success) {
+      console.log('Feedback posted successfully');
+    } else {
+      console.log('Failed to post feedback');
+    }
+  };
+
   return (
     <Box
       sx={{
@@ -45,17 +55,17 @@ const ConversationBubble = ({ entry }) => {
       {(entry.askedBy === 'bot' && entry.requestId) && (
         <Box sx={{ display: 'flex', justifyContent: 'flex-end', marginTop: 1 }}>
           <Tooltip title="Included Spoilers">
-            <IconButton aria-label="Included Spoilers" color={'error'}>
+            <IconButton aria-label="Included Spoilers" color={'error'} onClick={() => handleFeedback('spoiler')}>
               <ErrorIcon />
             </IconButton>
           </Tooltip>
           <Tooltip title="Not Helpful">
-            <IconButton aria-label="Not Helpful" color={'error'}>
+            <IconButton aria-label="Not Helpful" color={'error'} onClick={() => handleFeedback('negative')}>
               <ThumbDownIcon />
             </IconButton>
           </Tooltip>
           <Tooltip title="Helpful">
-            <IconButton aria-label="Helpful" color={'success'}>
+            <IconButton aria-label="Helpful" color={'success'} onClick={() => handleFeedback('positive')}>
               <ThumbUpIcon />
             </IconButton>
           </Tooltip>

diff --git a/app/services/postFeedback.js b/app/services/postFeedback.js
@@ -0,0 +1,22 @@
+const axios = require('axios');
+
+async function postFeedback(requestId, type) {
+  try {
+    const response = await axios.post('https://rapid-terribly-shrew.ngrok-free.app/feedback', {
+      request_id: requestId,
+      type: type,
+      feedback: '',
+    }, {
+      headers: {
+        "ngrok-skip-browser-warning": "skip"
+      },
+      crossDomain: true
+    });
+    return response.status === 200;
+  } catch (error) {
+    console.error('Failed to post feedback:', error);
+    return false;
+  }
+}
+
+module.exports = postFeedback;