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

Fix/retry-btn
pull/1002/head
Alex 4 months ago committed by GitHub
commit e6b3984f78
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -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">

@ -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;

@ -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>

@ -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"

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

@ -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",

@ -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",

@ -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": "デフォルト"
},
"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": "削除"
"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": "投稿数"
}
},
"createAPIKey": {
"label": "新しいAPIキーを作成",
"apiKeyName": "APIキー名",
"chunks": "クエリごとに処理されるチャンク",
"prompt": "アクティブプロンプトを選択",
"sourceDoc": "ソースドキュメント",
"create": "作成"
},
"saveKey": {
"note": "キーを保存してください",
"disclaimer": "キーが表示されるのはこのときだけです。",
"copy": "コピー",
"copied": "コピーしました",
"confirm": "キーを保存しました"
},
"deleteConv": {
"confirm": "すべての会話を削除してもよろしいですか?",
"delete": "削除"
}
}
}

Loading…
Cancel
Save