merge from dannya

feat: support unfinished messages.
This commit is contained in:
Wentao Lyu 2023-04-11 03:26:38 +08:00
parent bbf2f8a6ca
commit a5a0eab7f7
15 changed files with 308 additions and 221 deletions

View file

@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import copy from 'copy-to-clipboard';
import SubRow from './Content/SubRow';
@ -22,7 +22,7 @@ export default function Message({
siblingCount,
setSiblingIdx
}) {
const { text, searchResult, isCreatedByUser, error, submitting } = message;
const { text, searchResult, isCreatedByUser, error, submitting, unfinished, cancelled } = message;
const isSubmitting = useRecoilValue(store.isSubmitting);
const setLatestMessage = useSetRecoilState(store.latestMessage);
const [abortScroll, setAbort] = useState(false);
@ -98,7 +98,7 @@ export default function Message({
const clickSearchResult = async () => {
if (!searchResult) return;
getConversationQuery.refetch(message.conversationId).then((response) => {
getConversationQuery.refetch(message.conversationId).then(response => {
switchToConversation(response.data);
});
};
@ -170,23 +170,39 @@ export default function Message({
</div>
</div>
) : (
<div
className={cn(
'flex min-h-[20px] flex-grow flex-col items-start gap-4 ',
isCreatedByUser ? 'whitespace-pre-wrap' : ''
)}
>
{/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
<div className="markdown prose dark:prose-invert light w-full break-words">
{!isCreatedByUser ? (
<>
<Content content={text} />
</>
) : (
<>{text}</>
<>
<div
className={cn(
'flex min-h-[20px] flex-grow flex-col items-start gap-4 ',
isCreatedByUser ? 'whitespace-pre-wrap' : ''
)}
>
{/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
<div className="markdown prose dark:prose-invert light w-full break-words">
{!isCreatedByUser ? (
<>
<Content content={text} />
</>
) : (
<>{text}</>
)}
</div>
</div>
</div>
{!submitting && cancelled ? (
<div className="flex flex min-h-[20px] flex-grow flex-col items-start gap-2 gap-4 text-red-500">
<div className="rounded-md border border-blue-400 bg-blue-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100">
{`This is a cancelled message.`}
</div>
</div>
) : null}
{!submitting && unfinished ? (
<div className="flex flex min-h-[20px] flex-grow flex-col items-start gap-2 gap-4 text-red-500">
<div className="rounded-md border border-blue-400 bg-blue-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100">
{`This is an unfinished message. It might because the AI is still generating or it has been aborted. Refresh later to see more updates.`}
</div>
</div>
) : null}
</>
)}
</div>
<HoverButtons