[AAQ-577] Playground feedback (#285)

* initial attempt at feedback buttons

* use alt buttons

* thinner margine above buttons

* save wip code

* fix feedback buttons

* remove finally

* remove unused import

Author: suzinyou

admin_app/src/app/integrations/components/ChatManagerCard.tsx

@@ -12,6 +12,7 @@ const ChatManagerCard: React.FC<ChatManagerCardInfo> = ({ logo_src, name }) => (
       justifyContent: "center",
       alignItems: "center",
       display: "flex",
+      cursor: "pointer",
     }}
   >
     <CardContent

admin_app/src/app/playground/components/PlaygroundComponents.tsx

@@ -24,9 +24,15 @@ import PersonIcon from "@mui/icons-material/Person";
 import SendIcon from "@mui/icons-material/Send";
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
 import TextField from "@mui/material/TextField";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import ThumbUpOffAltIcon from "@mui/icons-material/ThumbUpOffAlt";
+import ThumbDownAltIcon from "@mui/icons-material/ThumbDownAlt";
+import ThumbDownOffAltIcon from "@mui/icons-material/ThumbDownOffAlt";
 
 type QueryType = "embeddings-search" | "llm-response" | "urgency-detection";
 
+type FeedbackSentimentType = "positive" | "negative";
+
 interface ResponseSummary {
   index: string;
   title: string;
@@ -227,8 +233,19 @@ const MessageSkeleton = () => {
   );
 };
 
-const MessageBox = (message: Message) => {
+const MessageBox = ({
+  message,
+  onFeedbackSend,
+}: {
+  message: Message;
+  onFeedbackSend: (
+    message: ResponseMessage,
+    feedbackSentiment: FeedbackSentimentType,
+  ) => void;
+}) => {
   const [open, setOpen] = useState(false);
+  const [thumbsUp, setThumbsUp] = useState(false);
+  const [thumbsDown, setThumbsDown] = useState(false);
 
   const renderResults = (content: ResponseSummary[]) => {
     return content.map((c: ResponseSummary) => (
@@ -240,6 +257,38 @@ const MessageBox = (message: Message) => {
       </Box>
     ));
   };
+  const handlePositiveFeedback = (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    if (thumbsUp) {
+      console.log("Already sent positive feedback");
+    } else {
+      setThumbsUp(true);
+      return onFeedbackSend(
+        message as ResponseMessage,
+        "positive" as FeedbackSentimentType,
+      );
+    }
+  };
+  const handleNegativeFeedback = (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    if (thumbsDown) {
+      console.log("Already sent negative feedback");
+    } else {
+      setThumbsDown(true);
+      return onFeedbackSend(
+        message as ResponseMessage,
+        "negative" as FeedbackSentimentType,
+      );
+    }
+  };
+  const feedbackButtonStyle = {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+  };
+
   const toggleJsonModal = () => setOpen(!open);
   const modalStyle = {
     position: "absolute",
@@ -255,6 +304,7 @@ const MessageBox = (message: Message) => {
     overflow: "scroll",
     borderRadius: "10px",
   };
+
   return (
     <Box
       sx={{
@@ -310,16 +360,51 @@ const MessageBox = (message: Message) => {
             ? message.content
             : renderResults(message.content)}
         </Typography>
-        {message.hasOwnProperty("json") && (
-          <Link
-            onClick={toggleJsonModal}
-            variant="caption"
-            align="right"
-            underline="hover"
-            sx={{ cursor: "pointer" }}
+        {message.type == "response" && (
+          <Box
+            style={{
+              marginTop: "5px",
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "center",
+            }}
           >
-            {"<json>"}
-          </Link>
+            {message.json.hasOwnProperty("feedback_secret_key") && (
+              <Box sx={{ marginRight: "8px" }}>
+                <IconButton
+                  aria-label="thumbs up"
+                  onClick={handlePositiveFeedback}
+                  style={feedbackButtonStyle}
+                >
+                  {thumbsUp ? (
+                    <ThumbUpAltIcon fontSize="small" />
+                  ) : (
+                    <ThumbUpOffAltIcon fontSize="small" />
+                  )}
+                </IconButton>
+                <IconButton
+                  aria-label="thumbs down"
+                  onClick={handleNegativeFeedback}
+                  style={feedbackButtonStyle}
+                >
+                  {thumbsDown ? (
+                    <ThumbDownAltIcon fontSize="small" />
+                  ) : (
+                    <ThumbDownOffAltIcon fontSize="small" />
+                  )}
+                </IconButton>
+              </Box>
+            )}
+            <Link
+              onClick={toggleJsonModal}
+              variant="caption"
+              align="right"
+              underline="hover"
+              sx={{ cursor: "pointer" }}
+            >
+              {"<json>"}
+            </Link>
+          </Box>
         )}
       </Box>
 
@@ -393,6 +478,7 @@ export { ErrorSnackBar, MessageBox, MessageSkeleton, PersistentSearchBar };
 export type {
   Message,
   QueryType,
+  FeedbackSentimentType,
   ResponseMessage,
   ResponseSummary,
   UserMessage,

admin_app/src/app/playground/page.tsx

@@ -12,8 +12,10 @@ import {
   MessageSkeleton,
   PersistentSearchBar,
   QueryType,
+  FeedbackSentimentType,
   ResponseSummary,
   UserMessage,
+  ResponseMessage,
 } from "./components/PlaygroundComponents";
 import { Box } from "@mui/material";
 import { useAuth } from "@/utils/auth";
@@ -202,6 +204,42 @@ const Page = () => {
       }
     }
   };
+
+  const sendResponseFeedback = (
+    message: ResponseMessage,
+    feedback_sentiment: FeedbackSentimentType,
+  ) => {
+    if (token) {
+      // Assuming message.json is a JSON string. Parse it if necessary.
+      const jsonResponse =
+        typeof message.json === "string"
+          ? JSON.parse(message.json)
+          : message.json;
+
+      const queryID = jsonResponse.query_id;
+      const feedbackSecretKey = jsonResponse.feedback_secret_key;
+
+      apiCalls
+        .postResponseFeedback(
+          queryID,
+          feedback_sentiment,
+          feedbackSecretKey,
+          token,
+        )
+        .then((response) => {
+          if (response.status === 200) {
+            console.log("Feedback sent successfully");
+          } else {
+            console.error(response);
+          }
+        })
+        .catch((error: Error) => {
+          setError("Failed to send response feedback.");
+          console.error(error);
+        });
+    }
+  };
+
   const handleErrorClose = (
     event?: React.SyntheticEvent | Event,
     reason?: string,
@@ -211,6 +249,7 @@ const Page = () => {
     }
     setError(null);
   };
+
   return (
     <>
       <Global
@@ -237,7 +276,11 @@ const Page = () => {
           }}
         >
           {messages.map((message, index) => (
-            <MessageBox key={index} {...message} />
+            <MessageBox
+              key={index}
+              message={message}
+              onFeedbackSend={sendResponseFeedback}
+            />
           ))}
           {loading && <MessageSkeleton />}
           <div ref={bottomRef} />

admin_app/src/utils/api.ts

@@ -314,6 +314,34 @@ const getLLMResponse = async (search: string, token: string) => {
     });
 };
 
+const postResponseFeedback = async (
+  query_id: number,
+  feedback_sentiment: string,
+  feedback_secret_key: string,
+  token: string,
+) => {
+  const feedbackUrl = `${NEXT_PUBLIC_BACKEND_URL}/response-feedback`;
+  return fetch(feedbackUrl, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({
+      query_id: query_id,
+      feedback_sentiment: feedback_sentiment,
+      feedback_secret_key: feedback_secret_key,
+    }),
+  }).then((response) => {
+    if (response.ok) {
+      let resp = response.json();
+      return resp;
+    } else {
+      throw new Error("Error sending response feedback");
+    }
+  });
+};
+
 const getQuestionStats = async (token: string) => {
   return fetch(`${NEXT_PUBLIC_BACKEND_URL}/dashboard/question_stats`, {
     method: "GET",
@@ -428,6 +456,7 @@ export const apiCalls = {
   getGoogleLoginToken,
   getEmbeddingsSearch,
   getLLMResponse,
+  postResponseFeedback,
   getQuestionStats,
   getUrgencyDetection,
   createTag,