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

Fix/retry-btn
2024-11-17 21:26:26 +00:00 · 2024-06-15 11:36:46 +01:00 · 2024-06-15 11:36:46 +01:00 · e6b3984f78
commit e6b3984f78
parent 547fe888d4 544c46cd44
8 changed files with 231 additions and 150 deletions
--- 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">
--- 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;
--- 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,6 +75,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[queries.length - 1]]);
+
  const scrollIntoView = () => {
    endMessageRef?.current?.scrollIntoView({
      behavior: 'smooth',
@ -80,13 +89,20 @@ export default function Conversation() {
    });
  };

-  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>
--- 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"
--- 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';

--- 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",
--- 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",
--- 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": "削除"
    }
  }
-  
+}