Merge pull request #17 from DevoteamNL/feat/feedback-api

Feat/feedback api
DevoteamNL · Feb 7, 2024 · 618ce4e · 618ce4e
2 parents 4d960b3 + 329537f
commit 618ce4e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 19 deletions.
diff --git a/src/components/ChatWindow/ChatWindow.tsx b/src/components/ChatWindow/ChatWindow.tsx
@@ -10,11 +10,12 @@ import {
   Paper,
   Skeleton,
   Stack,
-  styled,
   TextField,
   Typography,
+  styled,
 } from "@mui/material";
 import React, { useEffect, useRef, useState } from "react";
+import { useAuthContext } from "../../context/AuthContext";
 import { useSettings } from "../../context/SettingsContext";
 import { Thread, useThreadContext } from "../../context/ThreadContext";
 import PluginSelector from "../PluginSelector/PluginSelector";
@@ -79,10 +80,18 @@ const Message = ({
   );
 };
 
+export enum FeedbackRating {
+  BAD = 2,
+  NEUTRAL = 3,
+  GOOD = 4,
+}
+
 // MainContent component
 const MainContent: React.FC<MainContentProps> = () => {
+  const { credential, checkExpired } = useAuthContext();
+
   const [addingFeedback, setAddingFeedback] = useState<
-    "positive" | "negative" | "neutral" | undefined
+    FeedbackRating | undefined
   >();
   const { postMessage, threads, selectedThreadId } = useThreadContext();
   // State for the chat message and text field rows
@@ -107,12 +116,37 @@ const MainContent: React.FC<MainContentProps> = () => {
     chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, addingFeedback]);
 
+  const sendFeedback = () => {
+    if (checkExpired()) return;
+    const messageId = messages?.[messages.length - 1].id;
+    if (!messageId) return;
+
+    const url = new URL(import.meta.env.VITE_API_BASE_URL || "");
+    url.pathname = `api/message/${messageId}/feedback`;
+
+    fetch(url, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${credential?.credential}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        text: message,
+        rating: addingFeedback,
+      }),
+    }).then((response) => {
+      if (!response.ok) {
+        throw new Error("Failed to fetch");
+      }
+    });
+  };
+
   // Function to handle sending a message
   const handleSendMessage = () => {
     if (!message || !selectedThread || selectedThread.loading) return;
 
     if (addingFeedback) {
-      // TODO: send feedback
+      sendFeedback();
       setAddingFeedback(undefined);
     } else {
       postMessage(
@@ -195,9 +229,9 @@ const MainContent: React.FC<MainContentProps> = () => {
                   caption=""
                   message={`Can you share a bit more info on what you ${
                     {
-                      neutral: "think of",
-                      negative: "dislike about",
-                      positive: "like about",
+                      [FeedbackRating.NEUTRAL]: "think of",
+                      [FeedbackRating.BAD]: "dislike about",
+                      [FeedbackRating.GOOD]: "like about",
                     }[addingFeedback]
                   } the previous response or your general experience with the app?`}
                 ></Message>
@@ -219,14 +253,20 @@ const MainContent: React.FC<MainContentProps> = () => {
                 paddingX={2}
                 justifyContent={"flex-end"}
               >
-                <Button onClick={() => setAddingFeedback("neutral")}>
+                <Button
+                  onClick={() => setAddingFeedback(FeedbackRating.NEUTRAL)}
+                >
                   How was this response?
                 </Button>
 
-                <IconButton onClick={() => setAddingFeedback("negative")}>
+                <IconButton
+                  onClick={() => setAddingFeedback(FeedbackRating.BAD)}
+                >
                   <ThumbDown />
                 </IconButton>
-                <IconButton onClick={() => setAddingFeedback("positive")}>
+                <IconButton
+                  onClick={() => setAddingFeedback(FeedbackRating.GOOD)}
+                >
                   <ThumbUp />
                 </IconButton>
               </Stack>

diff --git a/src/context/ThreadContext.tsx b/src/context/ThreadContext.tsx
@@ -322,15 +322,7 @@ const ThreadProvider = ({
             type: "SET_THREAD",
             payload: {
               id: id,
-              thread: {
-                ...newThread,
-                messages: newThread.messages.map(
-                  (message: Message["data"]) => ({
-                    id: Math.random(),
-                    data: message,
-                  }),
-                ),
-              },
+              thread: newThread,
             },
           });
           setSelectedThread(newThread.id);
@@ -359,7 +351,7 @@ const ThreadProvider = ({
         const reply = await response.json();
         dispatch({
           type: "ADD_MESSAGE",
-          payload: { id, message: { id: Math.random(), data: reply } },
+          payload: { id, message: reply },
         });
       } catch (error) {
         dispatch({