From 2f9cbe2bf112d2b357eaea7779e65d82b61e9234 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Tue, 11 Jun 2024 20:30:12 +0100
Subject: [PATCH] chore: if user types in a new prompt after failed generation
 (instead of hitting retry btn), the failed query is updated with the new
 prompt before response is fetched. Ensuring every query object remains useful
 & relevant

---
 frontend/src/conversation/Conversation.tsx | 46 +++++++++++++++-------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 1695f714..8d221570 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -33,6 +33,8 @@ export default function Conversation() {
   const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
   const { t } = useTranslation();
 
+  console.log('QUERIES: ', queries);
+
   const handleUserInterruption = () => {
     if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
   };
@@ -102,6 +104,7 @@ export default function Conversation() {
     !isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
     fetchStream.current = dispatch(fetchAnswer({ question }));
   };
+
   const handleFeedback = (query: Query, feedback: FEEDBACK, index: number) => {
     const prevFeedback = query.feedback;
     dispatch(updateQuery({ index, query: { feedback } }));
@@ -110,6 +113,29 @@ export default function Conversation() {
     );
   };
 
+  const handleQuestionSubmission = () => {
+    if (inputRef.current?.textContent && status !== 'loading') {
+      if (lastQueryReturnedErr) {
+        // update last failed query with new prompt
+        dispatch(
+          updateQuery({
+            index: queries.length - 1,
+            query: {
+              prompt: inputRef.current.textContent,
+            },
+          }),
+        );
+        handleQuestion({
+          question: queries[queries.length - 1].prompt,
+          isRetry: true,
+        });
+      } else {
+        handleQuestion({ question: inputRef.current.textContent });
+      }
+      inputRef.current.textContent = '';
+    }
+  };
+
   const prepResponseView = (query: Query, index: number) => {
     let responseView;
     if (query.response) {
@@ -196,12 +222,12 @@ export default function Conversation() {
           <button
             className="mb-5 flex items-center justify-center gap-3 self-center rounded-full border border-silver py-3 px-8  text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
             disabled={status === 'loading'}
-            onClick={() =>
+            onClick={() => {
               handleQuestion({
                 question: queries[queries.length - 1].prompt,
                 isRetry: true,
-              })
-            }
+              });
+            }}
           >
             <RetryIcon
               fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
@@ -223,10 +249,7 @@ export default function Conversation() {
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
-                if (inputRef.current?.textContent && status !== 'loading') {
-                  handleQuestion({ question: inputRef.current.textContent });
-                  inputRef.current.textContent = '';
-                }
+                handleQuestionSubmission();
               }
             }}
           ></div>
@@ -239,14 +262,7 @@ export default function Conversation() {
             <div className="mx-1 cursor-pointer rounded-full p-4 text-center hover:bg-gray-3000">
               <img
                 className="w-6 text-white "
-                onClick={() => {
-                  if (inputRef.current?.textContent) {
-                    handleQuestion({
-                      question: inputRef.current.textContent,
-                    });
-                    inputRef.current.textContent = '';
-                  }
-                }}
+                onClick={handleQuestionSubmission}
                 src={isDarkTheme ? SendDark : Send}
               ></img>
             </div>