Merge pull request #988 from utin-francis-peter/fix/retry-btn

Fix/retry-btn
arc53 · Jun 15, 2024 · e6b3984 · e6b3984
2 parents 547fe88 + 544c46c
commit e6b3984
Show file tree

Hide file tree

Showing 8 changed files with 231 additions and 150 deletions.
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
@@ -4,7 +4,13 @@ import { useTranslation } from 'react-i18next';
 export default function Hero({
   handleQuestion,
 }: {
-  handleQuestion: (question: string) => void;
+  handleQuestion: ({
+    question,
+    isRetry,
+  }: {
+    question: string;
+    isRetry?: boolean;
+  }) => void;
 }) {
   const { t } = useTranslation();
   const demos = t('demo', { returnObjects: true }) as Array<{
@@ -30,7 +36,7 @@ export default function Hero({
             demo.query && (
               <Fragment key={key}>
                 <button
-                  onClick={() => handleQuestion(demo.query)}
+                  onClick={() => handleQuestion({ question: demo.query })}
                   className="w-full rounded-full border-2 border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
                 >
                   <p className="mb-1 font-semibold text-black dark:text-silver">

diff --git a/frontend/src/components/RetryIcon.tsx b/frontend/src/components/RetryIcon.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const RetryIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    width={16}
+    height={16}
+    fill={props.fill}
+    stroke={props.stroke}
+    viewBox="0 0 383.748 383.748"
+    {...props}
+  >
+    <path d="M62.772 95.042C90.904 54.899 137.496 30 187.343 30c83.743 0 151.874 68.13 151.874 151.874h30C369.217 81.588 287.629 0 187.343 0c-35.038 0-69.061 9.989-98.391 28.888a182.423 182.423 0 0 0-47.731 44.705L2.081 34.641v113.365h113.91L62.772 95.042zM381.667 235.742h-113.91l53.219 52.965c-28.132 40.142-74.724 65.042-124.571 65.042-83.744 0-151.874-68.13-151.874-151.874h-30c0 100.286 81.588 181.874 181.874 181.874 35.038 0 69.062-9.989 98.391-28.888a182.443 182.443 0 0 0 47.731-44.706l39.139 38.952V235.742z" />
+  </svg>
+);
+export default RetryIcon;
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
@@ -19,6 +19,7 @@ import { FEEDBACK, Query } from './conversationModels';
 import { sendFeedback } from './conversationApi';
 import { useTranslation } from 'react-i18next';
 import ArrowDown from './../assets/arrow-down.svg';
+import RetryIcon from '../components/RetryIcon';
 export default function Conversation() {
   const queries = useSelector(selectQueries);
   const status = useSelector(selectStatus);
@@ -29,6 +30,7 @@ export default function Conversation() {
   const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
   const fetchStream = useRef<any>(null);
   const [eventInterrupt, setEventInterrupt] = useState(false);
+  const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
   const { t } = useTranslation();
 
   const handleUserInterruption = () => {
@@ -73,20 +75,34 @@ export default function Conversation() {
     };
   }, [endMessageRef.current]);
 
+  useEffect(() => {
+    if (queries.length) {
+      queries[queries.length - 1].error && setLastQueryReturnedErr(true);
+      queries[queries.length - 1].response && setLastQueryReturnedErr(false); //considering a query that initially returned error can later include a response property on retry
+    }
+  }, [queries[queries.length - 1]]);
+
   const scrollIntoView = () => {
     endMessageRef?.current?.scrollIntoView({
       behavior: 'smooth',
       block: 'start',
     });
   };
 
-  const handleQuestion = (question: string) => {
+  const handleQuestion = ({
+    question,
+    isRetry = false,
+  }: {
+    question: string;
+    isRetry?: boolean;
+  }) => {
     question = question.trim();
     if (question === '') return;
     setEventInterrupt(false);
-    dispatch(addQuery({ prompt: question }));
+    !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 } }));
@@ -95,19 +111,32 @@ 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.error) {
-      responseView = (
-        <ConversationBubble
-          ref={endMessageRef}
-          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
-          key={`${index}ERROR`}
-          message={query.error}
-          type="ERROR"
-        ></ConversationBubble>
-      );
-    } else if (query.response) {
+    if (query.response) {
       responseView = (
         <ConversationBubble
           ref={endMessageRef}
@@ -122,6 +151,35 @@ export default function Conversation() {
           }
         ></ConversationBubble>
       );
+    } else if (query.error) {
+      const retryBtn = (
+        <button
+          className="flex items-center justify-center gap-3 self-center rounded-full border border-silver py-3 px-5  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={() => {
+            handleQuestion({
+              question: queries[queries.length - 1].prompt,
+              isRetry: true,
+            });
+          }}
+        >
+          <RetryIcon
+            fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
+            stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
+          />
+          Retry
+        </button>
+      );
+      responseView = (
+        <ConversationBubble
+          ref={endMessageRef}
+          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
+          key={`${index}ERROR`}
+          message={query.error}
+          type="ERROR"
+          retryBtn={retryBtn}
+        ></ConversationBubble>
+      );
     }
     return responseView;
   };
@@ -165,15 +223,18 @@ export default function Conversation() {
                     type="QUESTION"
                     sources={query.sources}
                   ></ConversationBubble>
+
                   {prepResponseView(query, index)}
                 </Fragment>
               );
             })}
           </div>
         )}
+
         {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
-      <div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl pb-1 sm:w-6/12 bg-opacity-0">
+
+      <div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
         <div className="flex h-full w-full items-center rounded-full border border-silver bg-white dark:bg-raisin-black">
           <div
             id="inputbox"
@@ -186,10 +247,7 @@ export default function Conversation() {
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
-                if (inputRef.current?.textContent && status !== 'loading') {
-                  handleQuestion(inputRef.current.textContent);
-                  inputRef.current.textContent = '';
-                }
+                handleQuestionSubmission();
               }
             }}
           ></div>
@@ -202,18 +260,14 @@ 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(inputRef.current.textContent);
-                    inputRef.current.textContent = '';
-                  }
-                }}
+                onClick={handleQuestionSubmission}
                 src={isDarkTheme ? SendDark : Send}
               ></img>
             </div>
           )}
         </div>
-        <p className="text-gray-595959 hidden w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:inline md:w-full">
+
+        <p className="text-gray-595959 hidden w-[100vw] self-center  bg-white bg-transparent py-2 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:inline md:w-full">
           {t('tagline')}
         </p>
       </div>

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
@@ -23,9 +23,10 @@ const ConversationBubble = forwardRef<
     feedback?: FEEDBACK;
     handleFeedback?: (feedback: FEEDBACK) => void;
     sources?: { title: string; text: string; source: string }[];
+    retryBtn?: React.ReactElement;
   }
 >(function ConversationBubble(
-  { message, type, className, feedback, handleFeedback, sources },
+  { message, type, className, feedback, handleFeedback, sources, retryBtn },
   ref,
 ) {
   const [openSource, setOpenSource] = useState<number | null>(null);
@@ -69,12 +70,17 @@ const ConversationBubble = forwardRef<
           <div
             className={`ml-2 mr-5 flex max-w-[90vw] rounded-3xl bg-gray-1000 p-3.5 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
               type === 'ERROR'
-                ? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
+                ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
                 : 'flex-col rounded-3xl'
             }`}
           >
             {type === 'ERROR' && (
-              <img src={Alert} alt="alert" className="mr-2 inline" />
+              <>
+                <img src={Alert} alt="alert" className="mr-2 inline" />
+                <div className="absolute -right-32 top-1/2 -translate-y-1/2">
+                  {retryBtn}
+                </div>
+              </>
             )}
             <ReactMarkdown
               className="whitespace-pre-wrap break-normal leading-normal"

diff --git a/frontend/src/conversation/conversationApi.ts b/frontend/src/conversation/conversationApi.ts
@@ -1,6 +1,5 @@
 import { Answer, FEEDBACK } from './conversationModels';
 import { Doc } from '../preferences/preferenceApi';
-import { selectTokenLimit } from '../preferences/preferenceSlice';
 
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 

diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
@@ -9,7 +9,7 @@
   "tagline": "DocsGPT uses GenAI, please review critical information using sources.",
   "sourceDocs": "Source Docs",
   "none": "None",
-  "cancel":"Cancel",
+  "cancel": "Cancel",
   "demo": [
     {
       "header": "Learn about DocsGPT",
@@ -41,13 +41,13 @@
       "deleteAllLabel": "Delete all Conversation",
       "deleteAllBtn": "Delete all",
       "addNew": "Add New",
-      "convHistory":"Conversational history",
-      "none":"None",
-      "low":"Low",
-      "medium":"Medium",
-      "high":"High",
-      "unlimited":"Unlimited",
-      "default":"default"
+      "convHistory": "Conversational history",
+      "none": "None",
+      "low": "Low",
+      "medium": "Medium",
+      "high": "High",
+      "unlimited": "Unlimited",
+      "default": "default"
     },
     "documents": {
       "label": "Documents",

diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
@@ -41,13 +41,13 @@
       "deleteAllLabel": "Eliminar toda la Conversación",
       "deleteAllBtn": "Eliminar todo",
       "addNew": "Agregar Nuevo",
-      "convHistory":"Historia conversacional",
-      "none":"ninguno",
-      "low":"Bajo",
-      "medium":"Medio",
-      "high":"Alto",
-      "unlimited":"Ilimitado",
-      "default":"predeterminada"
+      "convHistory": "Historia conversacional",
+      "none": "ninguno",
+      "low": "Bajo",
+      "medium": "Medio",
+      "high": "Alto",
+      "unlimited": "Ilimitado",
+      "default": "predeterminada"
     },
     "documents": {
       "label": "Documentos",