feat: "Retry" btn conditionally renders in place of query input when a generation fails. Uses prev query to fetch answer when clicked.

frontend/src/conversation/Conversation.tsx

@@ -29,6 +29,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,6 +74,13 @@ 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]);
+
   const scrollIntoView = () => {
     endMessageRef?.current?.scrollIntoView({
       behavior: 'smooth',
@@ -174,6 +182,7 @@ export default function Conversation() {
         {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
       <div className="bottom-0 flex w-11/12 flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black sm:w-6/12 md:fixed">
+        {!lastQueryReturnedErr ? (
           <div className="flex h-full w-full items-center rounded-full border border-silver">
             <div
               id="inputbox"
@@ -213,6 +222,20 @@ export default function Conversation() {
               </div>
             )}
           </div>
+        ) : (
+          <div className="flex flex-col items-center p-4">
+            <p>There was an error during generation</p>
+            <button
+              className="p-4"
+              onClick={() =>
+                handleQuestion(queries[queries.length - 1].prompt, true)
+              }
+            >
+              Retry
+            </button>
+          </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">
           {t('tagline')}
         </p>