From 0b09c00b50edc437b4011d5c058418a97394eef8 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Fri, 7 Jun 2024 14:47:29 +0100
Subject: [PATCH 01/13] chore: modified handleQuestion to favor "Retry" action
 after a failed response generation

---
 frontend/src/conversation/Conversation.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index cf4949e9..1bddf2e3 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -80,11 +80,11 @@ export default function Conversation() {
     });
   };
 
-  const handleQuestion = (question: string) => {
+  const handleQuestion = (question: string, isRetry = false) => {
     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) => {

From ae846dac4d5682b7334aae0d5212a405126bd3bd Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Fri, 7 Jun 2024 15:33:24 +0100
Subject: [PATCH 02/13] chore: received changes from upstream

---
 frontend/src/conversation/conversationApi.ts |  1 -
 frontend/src/locale/en.json                  | 16 ++++++++--------
 frontend/src/locale/es.json                  | 14 +++++++-------
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/src/conversation/conversationApi.ts b/frontend/src/conversation/conversationApi.ts
index 2fe6eb7f..e107abc8 100644
--- 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
index 94df2e75..7e39420b 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -9,7 +9,7 @@
   "tagline": "DocsGPT uses GenAI, please review critial 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
index 9ab6f8c4..70966e4b 100644
--- 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",

From 8d2ebe97187c42074df4782018af77f968497ba7 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Fri, 7 Jun 2024 15:59:56 +0100
Subject: [PATCH 03/13] 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 | 93 ++++++++++++++--------
 1 file changed, 58 insertions(+), 35 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 1bddf2e3..bda6b5f9 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/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,45 +182,60 @@ 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">
-        <div className="flex h-full w-full items-center rounded-full border border-silver">
-          <div
-            id="inputbox"
-            ref={inputRef}
-            tabIndex={1}
-            placeholder={t('inputPlaceholder')}
-            contentEditable
-            onPaste={handlePaste}
-            className={`max-h-24 min-h-[3.8rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white py-2 pl-4 pr-9 text-base leading-10 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                if (inputRef.current?.textContent && status !== 'loading') {
-                  handleQuestion(inputRef.current.textContent);
-                  inputRef.current.textContent = '';
-                }
-              }
-            }}
-          ></div>
-          {status === 'loading' ? (
-            <img
-              src={isDarkTheme ? SpinnerDark : Spinner}
-              className="relative right-[38px] bottom-[15px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
-            ></img>
-          ) : (
-            <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) {
+        {!lastQueryReturnedErr ? (
+          <div className="flex h-full w-full items-center rounded-full border border-silver">
+            <div
+              id="inputbox"
+              ref={inputRef}
+              tabIndex={1}
+              placeholder={t('inputPlaceholder')}
+              contentEditable
+              onPaste={handlePaste}
+              className={`max-h-24 min-h-[3.8rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white py-2 pl-4 pr-9 text-base leading-10 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  if (inputRef.current?.textContent && status !== 'loading') {
                     handleQuestion(inputRef.current.textContent);
                     inputRef.current.textContent = '';
                   }
-                }}
-                src={isDarkTheme ? SendDark : Send}
+                }
+              }}
+            ></div>
+            {status === 'loading' ? (
+              <img
+                src={isDarkTheme ? SpinnerDark : Spinner}
+                className="relative right-[38px] bottom-[15px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
               ></img>
-            </div>
-          )}
-        </div>
+            ) : (
+              <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 = '';
+                    }
+                  }}
+                  src={isDarkTheme ? SendDark : Send}
+                ></img>
+              </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>

From 414ec08deee416ae166f290eb56e3a988a27904b Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Fri, 7 Jun 2024 17:26:19 +0100
Subject: [PATCH 04/13] refactor: modified prepResponseView to prioritize
 query.response and trigger re-render after a failed generation is retried

---
 frontend/src/conversation/Conversation.tsx | 24 +++++++++++-----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index bda6b5f9..3cd3176d 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -79,7 +79,7 @@ export default function Conversation() {
       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[queries.length - 1]]);
 
   const scrollIntoView = () => {
     endMessageRef?.current?.scrollIntoView({
@@ -105,17 +105,7 @@ export default function Conversation() {
 
   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}
@@ -130,6 +120,16 @@ export default function Conversation() {
           }
         ></ConversationBubble>
       );
+    } else 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>
+      );
     }
     return responseView;
   };

From c26573482e03bd0673e00d988173a5de796308e4 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Fri, 7 Jun 2024 17:28:13 +0100
Subject: [PATCH 05/13] style: retry query generation btn

---
 frontend/src/conversation/Conversation.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 3cd3176d..03eb240f 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -173,6 +173,7 @@ export default function Conversation() {
                     type="QUESTION"
                     sources={query.sources}
                   ></ConversationBubble>
+
                   {prepResponseView(query, index)}
                 </Fragment>
               );
@@ -223,10 +224,13 @@ export default function Conversation() {
             )}
           </div>
         ) : (
-          <div className="flex flex-col items-center p-4">
-            <p>There was an error during generation</p>
+          <div className="flex w-full flex-col items-center p-4 pt-5 ">
+            <p className="dark:text-bright-gray">
+              There was an error during generation
+            </p>
             <button
-              className="p-4"
+              className="mt-3 rounded-full border-2 border-gray-400 py-3 px-8 text-lg text-gray-500 transition-colors delay-100  hover:border-gray-700 disabled:cursor-not-allowed dark:text-bright-gray"
+              disabled={status === 'loading'}
               onClick={() =>
                 handleQuestion(queries[queries.length - 1].prompt, true)
               }
@@ -236,7 +240,7 @@ export default function Conversation() {
           </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 p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:inline md:w-full">
           {t('tagline')}
         </p>
       </div>

From 2f580f780020cf1cc49d91c7fd1631eaec685b64 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Fri, 7 Jun 2024 17:40:33 +0100
Subject: [PATCH 06/13] feat: japan locale config

---
 frontend/src/locale/jp.json | 207 ++++++++++++++++++------------------
 1 file changed, 103 insertions(+), 104 deletions(-)

diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index bb97554c..a025a17a 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -1,109 +1,108 @@
 {
-    "language": "日本語",
-    "chat": "チャット",
-    "chats": "チャット",
-    "newChat": "新しいチャット",
-    "myPlan": "私のプラン",
-    "about": "について",
-    "inputPlaceholder": "ここにメッセージを入力してください...",
-    "tagline": "DocsGPTはGenAIを使用しています。重要な情報はソースで確認してください。",
-    "sourceDocs": "ソースドキュメント",
-    "none": "なし",
-    "cancel":"キャンセル",
-    "demo": [
-      {
-        "header": "DocsGPTについて学ぶ",
-        "query": "DocsGPTとは何ですか?"
-      },
-      {
-        "header": "ドキュメントを要約する",
-        "query": "現在のコンテキストを要約してください"
-      },
-      {
-        "header": "コードを書く",
-        "query": "APIリクエストのコードを/api/answerに書いてください。"
-      },
-      {
-        "header": "学習支援",
-        "query": "コンテキストに対する潜在的な質問を書いてください"
-      }
-    ],
-    "settings": {
-      "label": "設定",
-      "general": {
-        "label": "一般",
-        "selectTheme": "テーマを選択",
-        "light": "ライト",
-        "dark": "ダーク",
-        "selectLanguage": "言語を選択",
-        "chunks": "クエリごとに処理されるチャンク",
-        "prompt": "アクティブプロンプト",
-        "deleteAllLabel": "すべての会話を削除",
-        "deleteAllBtn": "すべて削除",
-        "addNew": "新規追加",
-        "convHistory":"会話履歴",
-        "none":"なし",
-        "low":"低",
-        "medium":"中",
-        "high":"高",
-        "unlimited":"無制限",
-        "default":"デフォルト"
-      },
-      "documents": {
-        "label": "ドキュメント",
-        "name": "ドキュメント名",
-        "date": "ベクトル日付",
-        "type": "タイプ",
-        "tokenUsage": "トークン使用量"
-      },
-      "apiKeys": {
-        "label": "APIキー",
-        "name": "名前",
-        "key": "APIキー",
-        "sourceDoc": "ソースドキュメント",
-        "createNew": "新規作成"
+  "language": "日本語",
+  "chat": "チャット",
+  "chats": "チャット",
+  "newChat": "新しいチャット",
+  "myPlan": "私のプラン",
+  "about": "について",
+  "inputPlaceholder": "ここにメッセージを入力してください...",
+  "tagline": "DocsGPTはGenAIを使用しています。重要な情報はソースで確認してください。",
+  "sourceDocs": "ソースドキュメント",
+  "none": "なし",
+  "cancel": "キャンセル",
+  "demo": [
+    {
+      "header": "DocsGPTについて学ぶ",
+      "query": "DocsGPTとは何ですか?"
+    },
+    {
+      "header": "ドキュメントを要約する",
+      "query": "現在のコンテキストを要約してください"
+    },
+    {
+      "header": "コードを書く",
+      "query": "APIリクエストのコードを/api/answerに書いてください。"
+    },
+    {
+      "header": "学習支援",
+      "query": "コンテキストに対する潜在的な質問を書いてください"
+    }
+  ],
+  "settings": {
+    "label": "設定",
+    "general": {
+      "label": "一般",
+      "selectTheme": "テーマを選択",
+      "light": "ライト",
+      "dark": "ダーク",
+      "selectLanguage": "言語を選択",
+      "chunks": "クエリごとに処理されるチャンク",
+      "prompt": "アクティブプロンプト",
+      "deleteAllLabel": "すべての会話を削除",
+      "deleteAllBtn": "すべて削除",
+      "addNew": "新規追加",
+      "convHistory": "会話履歴",
+      "none": "なし",
+      "low": "低",
+      "medium": "中",
+      "high": "高",
+      "unlimited": "無制限",
+      "default": "デフォルト"
+    },
+    "documents": {
+      "label": "ドキュメント",
+      "name": "ドキュメント名",
+      "date": "ベクトル日付",
+      "type": "タイプ",
+      "tokenUsage": "トークン使用量"
+    },
+    "apiKeys": {
+      "label": "APIキー",
+      "name": "名前",
+      "key": "APIキー",
+      "sourceDoc": "ソースドキュメント",
+      "createNew": "新規作成"
+    }
+  },
+  "modals": {
+    "uploadDoc": {
+      "label": "新規書類のアップロード",
+      "file": "ファイルから",
+      "remote": "リモート",
+      "name": "名前",
+      "choose": "ファイルを選択",
+      "info": ".pdf, .txt, .rst, .docx, .md, .zipファイルを25MBまでアップロードしてください",
+      "uploadedFiles": "アップロードされたファイル",
+      "cancel": "キャンセル",
+      "train": "トレーニング",
+      "link": "リンク",
+      "urlLink": "URLリンク",
+      "reddit": {
+        "id": "クライアントID",
+        "secret": "クライアントシークレット",
+        "agent": "ユーザーエージェント",
+        "searchQueries": "検索クエリ",
+        "numberOfPosts": "投稿数"
       }
     },
-    "modals": {
-      "uploadDoc": {
-        "label": "新規書類のアップロード",
-        "file": "ファイルから",
-        "remote": "リモート",
-        "name": "名前",
-        "choose": "ファイルを選択",
-        "info": ".pdf, .txt, .rst, .docx, .md, .zipファイルを25MBまでアップロードしてください",
-        "uploadedFiles": "アップロードされたファイル",
-        "cancel": "キャンセル",
-        "train": "トレーニング",
-        "link": "リンク",
-        "urlLink": "URLリンク",
-        "reddit": {
-          "id": "クライアントID",
-          "secret": "クライアントシークレット",
-          "agent": "ユーザーエージェント",
-          "searchQueries": "検索クエリ",
-          "numberOfPosts": "投稿数"
-        }
-      },
-      "createAPIKey": {
-        "label": "新しいAPIキーを作成",
-        "apiKeyName": "APIキー名",
-        "chunks": "クエリごとに処理されるチャンク",
-        "prompt": "アクティブプロンプトを選択",
-        "sourceDoc": "ソースドキュメント",
-        "create": "作成"
-      },
-      "saveKey": {
-        "note": "キーを保存してください",
-        "disclaimer": "キーが表示されるのはこのときだけです。",
-        "copy": "コピー",
-        "copied": "コピーしました",
-        "confirm": "キーを保存しました"
-      },
-      "deleteConv": {
-        "confirm": "すべての会話を削除してもよろしいですか?",
-        "delete": "削除"
-      }
+    "createAPIKey": {
+      "label": "新しいAPIキーを作成",
+      "apiKeyName": "APIキー名",
+      "chunks": "クエリごとに処理されるチャンク",
+      "prompt": "アクティブプロンプトを選択",
+      "sourceDoc": "ソースドキュメント",
+      "create": "作成"
+    },
+    "saveKey": {
+      "note": "キーを保存してください",
+      "disclaimer": "キーが表示されるのはこのときだけです。",
+      "copy": "コピー",
+      "copied": "コピーしました",
+      "confirm": "キーを保存しました"
+    },
+    "deleteConv": {
+      "confirm": "すべての会話を削除してもよろしいですか?",
+      "delete": "削除"
     }
   }
-  
\ No newline at end of file
+}

From 32c06414c530023e9f5d4e58d907dac9d649fbf2 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Sat, 8 Jun 2024 03:29:18 +0100
Subject: [PATCH 07/13] style: added theme adaptable RetryIcon component to
 Retry btn

---
 frontend/src/components/RetryIcon.tsx      | 17 +++++++++++++++++
 frontend/src/conversation/Conversation.tsx | 12 +++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/RetryIcon.tsx

diff --git a/frontend/src/components/RetryIcon.tsx b/frontend/src/components/RetryIcon.tsx
new file mode 100644
index 00000000..27ed6028
--- /dev/null
+++ 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
index 03eb240f..2bb9d101 100644
--- 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);
@@ -229,12 +230,21 @@ export default function Conversation() {
               There was an error during generation
             </p>
             <button
-              className="mt-3 rounded-full border-2 border-gray-400 py-3 px-8 text-lg text-gray-500 transition-colors delay-100  hover:border-gray-700 disabled:cursor-not-allowed dark:text-bright-gray"
+              className="mt-3 flex items-center justify-center gap-3 rounded-full border-2 border-gray-400 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={() =>
                 handleQuestion(queries[queries.length - 1].prompt, true)
               }
             >
+              {/* <img
+                src={Retry}
+                alt="Reload icon"
+                className="w-4 dark:text-red-900"
+              /> */}
+              <RetryIcon
+                fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
+                stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
+              />
               Retry
             </button>
           </div>

From ee762c3c68dab4531b99df66f78af76dbb12b42f Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Sun, 9 Jun 2024 13:47:51 +0100
Subject: [PATCH 08/13] chore: modified handleQuestion params for more clarity

---
 frontend/src/Hero.tsx                      | 10 ++++++++--
 frontend/src/conversation/Conversation.tsx | 19 +++++++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 69bf23ac..f138ec4f 100644
--- 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/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 2bb9d101..96a2d4dc 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -89,7 +89,13 @@ export default function Conversation() {
     });
   };
 
-  const handleQuestion = (question: string, isRetry = false) => {
+  const handleQuestion = ({
+    question,
+    isRetry = false,
+  }: {
+    question: string;
+    isRetry?: boolean;
+  }) => {
     question = question.trim();
     if (question === '') return;
     setEventInterrupt(false);
@@ -198,7 +204,7 @@ export default function Conversation() {
                 if (e.key === 'Enter' && !e.shiftKey) {
                   e.preventDefault();
                   if (inputRef.current?.textContent && status !== 'loading') {
-                    handleQuestion(inputRef.current.textContent);
+                    handleQuestion({ question: inputRef.current.textContent });
                     inputRef.current.textContent = '';
                   }
                 }
@@ -215,7 +221,9 @@ export default function Conversation() {
                   className="w-6 text-white "
                   onClick={() => {
                     if (inputRef.current?.textContent) {
-                      handleQuestion(inputRef.current.textContent);
+                      handleQuestion({
+                        question: inputRef.current.textContent,
+                      });
                       inputRef.current.textContent = '';
                     }
                   }}
@@ -233,7 +241,10 @@ export default function Conversation() {
               className="mt-3 flex items-center justify-center gap-3 rounded-full border-2 border-gray-400 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={() =>
-                handleQuestion(queries[queries.length - 1].prompt, true)
+                handleQuestion({
+                  question: queries[queries.length - 1].prompt,
+                  isRetry: true,
+                })
               }
             >
               {/* <img

From 7e1cf10cb2a062b237bb93f59b462039ddb73781 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Sun, 9 Jun 2024 13:49:26 +0100
Subject: [PATCH 09/13] style: reduced retry container padding

---
 frontend/src/conversation/Conversation.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 96a2d4dc..8083710e 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -233,7 +233,7 @@ export default function Conversation() {
             )}
           </div>
         ) : (
-          <div className="flex w-full flex-col items-center p-4 pt-5 ">
+          <div className="flex w-full flex-col items-center p-1">
             <p className="dark:text-bright-gray">
               There was an error during generation
             </p>
@@ -247,11 +247,6 @@ export default function Conversation() {
                 })
               }
             >
-              {/* <img
-                src={Retry}
-                alt="Reload icon"
-                className="w-4 dark:text-red-900"
-              /> */}
               <RetryIcon
                 fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
                 stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}

From 2cca7d60d5400b22dcb86ba87949b6c8efbb5a1c Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Tue, 11 Jun 2024 18:19:35 +0100
Subject: [PATCH 10/13] chore: modified "retry" generation flow to give users
 the option of retrying with prev failed response or entering a new prompt
 into the provided field

---
 frontend/src/conversation/Conversation.tsx | 121 ++++++++++-----------
 1 file changed, 59 insertions(+), 62 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 8083710e..1695f714 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -187,74 +187,71 @@ export default function Conversation() {
             })}
           </div>
         )}
+
         {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"
-              ref={inputRef}
-              tabIndex={1}
-              placeholder={t('inputPlaceholder')}
-              contentEditable
-              onPaste={handlePaste}
-              className={`max-h-24 min-h-[3.8rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white py-2 pl-4 pr-9 text-base leading-10 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                  e.preventDefault();
-                  if (inputRef.current?.textContent && status !== 'loading') {
-                    handleQuestion({ question: inputRef.current.textContent });
+        {lastQueryReturnedErr && (
+          <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={() =>
+              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>
+        )}
+
+        <div className="flex h-full w-full items-center rounded-full border border-silver">
+          <div
+            id="inputbox"
+            ref={inputRef}
+            tabIndex={1}
+            placeholder={t('inputPlaceholder')}
+            contentEditable
+            onPaste={handlePaste}
+            className={`max-h-24 min-h-[3.8rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white py-2 pl-4 pr-9 text-base leading-10 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                if (inputRef.current?.textContent && status !== 'loading') {
+                  handleQuestion({ question: inputRef.current.textContent });
+                  inputRef.current.textContent = '';
+                }
+              }
+            }}
+          ></div>
+          {status === 'loading' ? (
+            <img
+              src={isDarkTheme ? SpinnerDark : Spinner}
+              className="relative right-[38px] bottom-[15px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
+            ></img>
+          ) : (
+            <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 = '';
                   }
-                }
-              }}
-            ></div>
-            {status === 'loading' ? (
-              <img
-                src={isDarkTheme ? SpinnerDark : Spinner}
-                className="relative right-[38px] bottom-[15px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
+                }}
+                src={isDarkTheme ? SendDark : Send}
               ></img>
-            ) : (
-              <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 = '';
-                    }
-                  }}
-                  src={isDarkTheme ? SendDark : Send}
-                ></img>
-              </div>
-            )}
-          </div>
-        ) : (
-          <div className="flex w-full flex-col items-center p-1">
-            <p className="dark:text-bright-gray">
-              There was an error during generation
-            </p>
-            <button
-              className="mt-3 flex items-center justify-center gap-3 rounded-full border-2 border-gray-400 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={() =>
-                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>
-          </div>
-        )}
+            </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">
           {t('tagline')}

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 11/13] 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>

From df24cfff4f74da08570bb99aa692f9173d3696e4 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Wed, 12 Jun 2024 22:52:43 +0100
Subject: [PATCH 12/13] style: improve visibility of bottom-most message bubble

---
 frontend/src/conversation/Conversation.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 8d221570..ea1dafbf 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -33,8 +33,6 @@ export default function Conversation() {
   const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
   const { t } = useTranslation();
 
-  console.log('QUERIES: ', queries);
-
   const handleUserInterruption = () => {
     if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
   };
@@ -178,7 +176,7 @@ export default function Conversation() {
       <div
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex h-[85vh] w-full justify-center overflow-y-auto p-4"
+        className="flex h-[85vh] w-full flex-1 justify-center overflow-y-auto p-4"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
@@ -217,10 +215,11 @@ 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">
+      {/* INPUTS VIEW */}
+      <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">
         {lastQueryReturnedErr && (
           <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"
+            className="mb-2 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={() => {
               handleQuestion({
@@ -269,7 +268,7 @@ export default function Conversation() {
           )}
         </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>

From 544c46cd44190aa417a5b0914c8877e8087999dd Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Fri, 14 Jun 2024 00:31:33 +0100
Subject: [PATCH 13/13] chore: retry btn is side-by-side with error mssg

---
 frontend/src/conversation/Conversation.tsx    | 23 ++++++++++++++++++-
 .../src/conversation/ConversationBubble.tsx   | 12 +++++++---
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 42a14ad9..34b28c2f 100644
--- 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);
@@ -151,13 +152,32 @@ 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'}`}
+          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
           key={`${index}ERROR`}
           message={query.error}
           type="ERROR"
+          retryBtn={retryBtn}
         ></ConversationBubble>
       );
     }
@@ -213,6 +233,7 @@ export default function Conversation() {
 
         {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
+
       <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
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index aa9c4e3d..3a3842b2 100644
--- 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"