wires up the feedback event handler with redux storie

frontend/src/conversation/Conversation.tsx

@@ -8,10 +8,12 @@ import {
   fetchAnswer,
   selectQueries,
   selectStatus,
+  updateQuery,
 } from './conversationSlice';
 import Send from './../assets/send.svg';
 import Spinner from './../assets/spinner.svg';
-import { Query } from './conversationModels';
+import { FEEDBACK, Query } from './conversationModels';
+import { sendFeedback } from './conversationApi';
 
 export default function Conversation() {
   const queries = useSelector(selectQueries);
@@ -22,7 +24,7 @@ export default function Conversation() {
 
   useEffect(
     () => endMessageRef?.current?.scrollIntoView({ behavior: 'smooth' }),
-    [queries],
+    [queries.length, queries[queries.length - 1]],
   );
 
   const handleQuestion = (question: string) => {
@@ -30,6 +32,14 @@ export default function Conversation() {
     dispatch(fetchAnswer({ question }));
   };
 
+  const handleFeedback = (query: Query, feedback: FEEDBACK, index: number) => {
+    const prevFeedback = query.feedback;
+    dispatch(updateQuery({ index, query: { feedback } }));
+    sendFeedback(query.prompt, query.response!, feedback).catch(() =>
+      dispatch(updateQuery({ index, query: { feedback: prevFeedback } })),
+    );
+  };
+
   const prepResponseView = (query: Query, index: number) => {
     let responseView;
     if (query.error) {
@@ -51,6 +61,9 @@ export default function Conversation() {
           message={query.response}
           type={'ANSWER'}
           feedback={query.feedback}
+          handleFeedback={(feedback: FEEDBACK) =>
+            handleFeedback(query, feedback, index)
+          }
         ></ConversationBubble>
       );
     }

frontend/src/conversation/ConversationBubble.tsx

@@ -12,17 +12,17 @@ const ConversationBubble = forwardRef<
     type: MESSAGE_TYPE;
     className?: string;
     feedback?: FEEDBACK;
-    handleFeedback?: () => Promise<void>;
+    handleFeedback?: (feedback: FEEDBACK) => void;
   }
 >(function ConversationBubble(
   { message, type, className, feedback, handleFeedback },
   ref,
 ) {
   const [showFeedback, setShowFeedback] = useState(false);
-  const [overriddenFeedback, setOverriddenFeedback] = useState<
-    FEEDBACK | undefined
-  >(undefined);
-  const effectiveFeedback = overriddenFeedback ?? feedback;
+  // const [overriddenFeedback, setOverriddenFeedback] = useState<
+  //   FEEDBACK | undefined
+  // >(undefined);
+  // const effectiveFeedback = overriddenFeedback ?? feedback;
   let bubble;
 
   if (type === 'QUESTION') {
@@ -57,7 +57,7 @@ const ConversationBubble = forwardRef<
         </div>
         <div
           className={`mr-2 flex items-center justify-center ${
-            effectiveFeedback === 'LIKE' || (type !== 'ERROR' && showFeedback)
+            feedback === 'LIKE' || (type !== 'ERROR' && showFeedback)
               ? ''
               : 'invisible'
           }`}
@@ -65,17 +65,14 @@ const ConversationBubble = forwardRef<
           <Like
             fill="none"
             className={`cursor-pointer ${
-              effectiveFeedback === 'LIKE'
-                ? 'fill-blue-1000'
-                : 'hover:fill-gray-4000'
+              feedback === 'LIKE' ? 'fill-blue-1000' : 'hover:fill-gray-4000'
             }`}
-            onClick={() => setOverriddenFeedback('LIKE')}
+            onClick={() => handleFeedback?.('LIKE')}
           ></Like>
         </div>
         <div
           className={`mr-10 flex items-center justify-center ${
-            effectiveFeedback === 'DISLIKE' ||
-            (type !== 'ERROR' && showFeedback)
+            feedback === 'DISLIKE' || (type !== 'ERROR' && showFeedback)
               ? ''
               : 'invisible'
           }`}
@@ -83,11 +80,9 @@ const ConversationBubble = forwardRef<
           <Dislike
             fill="none"
             className={`cursor-pointer ${
-              effectiveFeedback === 'DISLIKE'
-                ? 'fill-red-2000'
-                : 'hover:fill-gray-4000'
+              feedback === 'DISLIKE' ? 'fill-red-2000' : 'hover:fill-gray-4000'
             }`}
-            onClick={() => setOverriddenFeedback('DISLIKE')}
+            onClick={() => handleFeedback?.('DISLIKE')}
           ></Dislike>
         </div>
       </div>

frontend/src/conversation/conversationSlice.ts

@@ -30,6 +30,16 @@ export const conversationSlice = createSlice({
     addQuery(state, action: PayloadAction<Query>) {
       state.queries.push(action.payload);
     },
+    updateQuery(
+      state,
+      action: PayloadAction<{ index: number; query: Partial<Query> }>,
+    ) {
+      const index = action.payload.index;
+      state.queries[index] = {
+        ...state.queries[index],
+        ...action.payload.query,
+      };
+    },
   },
   extraReducers(builder) {
     builder
@@ -55,5 +65,5 @@ export const selectQueries = (state: RootState) => state.conversation.queries;
 
 export const selectStatus = (state: RootState) => state.conversation.status;
 
-export const { addQuery } = conversationSlice.actions;
+export const { addQuery, updateQuery } = conversationSlice.actions;
 export default conversationSlice.reducer;