mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-22 03:10:15 +01:00
merge from dannya
feat: support unfinished messages.
This commit is contained in:
Wentao Lyu
parent
bbf2f8a6ca
commit
a5a0eab7f7
15 changed files with 308 additions and 221 deletions
|
|
@ -33,7 +33,7 @@ export default function TextChat({ isSearchView = false }) {
|
|||
// const bingStylesRef = useRef(null);
|
||||
const [showBingToneSetting, setShowBingToneSetting] = useState(false);
|
||||
|
||||
const isNotAppendable = latestMessage?.cancelled || latestMessage?.error;
|
||||
const isNotAppendable = latestMessage?.unfinished || latestMessage?.error;
|
||||
|
||||
// auto focus to input, when enter a conversation.
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { useRecoilValue, useRecoilState, useResetRecoilState, useSetRecoilState
|
|||
import { SSE } from '~/data-provider/sse.mjs';
|
||||
import createPayload from '~/data-provider/createPayload';
|
||||
import { useAbortRequestWithMessage } from '~/data-provider';
|
||||
import { v4 } from 'uuid';
|
||||
import store from '~/store';
|
||||
|
||||
export default function MessageHandler() {
|
||||
|
|
@ -12,12 +11,6 @@ export default function MessageHandler() {
|
|||
const setMessages = useSetRecoilState(store.messages);
|
||||
const setConversation = useSetRecoilState(store.conversation);
|
||||
const resetLatestMessage = useResetRecoilState(store.latestMessage);
|
||||
const [lastResponse, setLastResponse] = useRecoilState(store.lastResponse);
|
||||
const setLatestMessage = useSetRecoilState(store.latestMessage);
|
||||
const setSubmission = useSetRecoilState(store.submission);
|
||||
const [source, setSource] = useState(null);
|
||||
// const [abortKey, setAbortKey] = useState(null);
|
||||
const [currentParent, setCurrentParent] = useState(null);
|
||||
|
||||
const { refreshConversations } = store.useConversations();
|
||||
|
||||
|
|
@ -32,7 +25,8 @@ export default function MessageHandler() {
|
|||
text: data,
|
||||
parentMessageId: message?.overrideParentMessageId,
|
||||
messageId: message?.overrideParentMessageId + '_',
|
||||
submitting: true
|
||||
submitting: true,
|
||||
unfinished: true
|
||||
}
|
||||
]);
|
||||
else
|
||||
|
|
@ -44,45 +38,38 @@ export default function MessageHandler() {
|
|||
text: data,
|
||||
parentMessageId: message?.messageId,
|
||||
messageId: message?.messageId + '_',
|
||||
submitting: true
|
||||
submitting: true,
|
||||
unfinished: true
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
const cancelHandler = (data, submission) => {
|
||||
const { messages, message, initialResponse, isRegenerate = false } = submission;
|
||||
const { text, messageId, parentMessageId } = data;
|
||||
const { messages, isRegenerate = false } = submission;
|
||||
|
||||
if (isRegenerate) {
|
||||
setMessages([
|
||||
...messages,
|
||||
{
|
||||
...initialResponse,
|
||||
text: data,
|
||||
parentMessageId: message?.overrideParentMessageId,
|
||||
messageId: message?.overrideParentMessageId + '_',
|
||||
cancelled: true
|
||||
}
|
||||
]);
|
||||
} else {
|
||||
console.log('cancelHandler, isRegenerate = false');
|
||||
setMessages([
|
||||
...messages,
|
||||
message,
|
||||
{
|
||||
...initialResponse,
|
||||
text,
|
||||
parentMessageId: message?.messageId,
|
||||
messageId,
|
||||
// cancelled: true
|
||||
}
|
||||
]);
|
||||
setLastResponse('');
|
||||
setSource(null);
|
||||
setIsSubmitting(false);
|
||||
setSubmission(null);
|
||||
setLatestMessage(data);
|
||||
const { requestMessage, responseMessage, conversation } = data;
|
||||
|
||||
// update the messages
|
||||
if (isRegenerate) setMessages([...messages, responseMessage]);
|
||||
else setMessages([...messages, requestMessage, responseMessage]);
|
||||
setIsSubmitting(false);
|
||||
|
||||
// refresh title
|
||||
if (requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
|
||||
setTimeout(() => {
|
||||
refreshConversations();
|
||||
}, 2000);
|
||||
|
||||
// in case it takes too long.
|
||||
setTimeout(() => {
|
||||
refreshConversations();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
setConversation(prevState => ({
|
||||
...prevState,
|
||||
...conversation
|
||||
}));
|
||||
};
|
||||
|
||||
const createdHandler = (data, submission) => {
|
||||
|
|
@ -160,50 +147,37 @@ export default function MessageHandler() {
|
|||
return;
|
||||
};
|
||||
|
||||
const abortConversation = conversationId => {
|
||||
console.log(submission);
|
||||
const { endpoint } = submission?.conversation || {};
|
||||
|
||||
fetch(`/api/ask/${endpoint}/abort`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
abortKey: conversationId
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('aborted', data);
|
||||
cancelHandler(data, submission);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error aborting request');
|
||||
console.error(error);
|
||||
// errorHandler({ text: 'Error aborting request' }, { ...submission, message });
|
||||
});
|
||||
return;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (submission === null) return;
|
||||
if (Object.keys(submission).length === 0) return;
|
||||
|
||||
let { message, cancel } = submission;
|
||||
|
||||
if (cancel && source) {
|
||||
console.log('message aborted', submission);
|
||||
source.close();
|
||||
const { endpoint } = submission.conversation;
|
||||
|
||||
// splitting twice because the cursor may or may not be wrapped in a span
|
||||
const latestMessageText = lastResponse.split('█')[0].split('<span className="result-streaming">')[0];
|
||||
const latestMessage = {
|
||||
text: latestMessageText,
|
||||
messageId: v4(),
|
||||
parentMessageId: currentParent.messageId,
|
||||
conversationId: currentParent.conversationId
|
||||
};
|
||||
|
||||
fetch(`/api/ask/${endpoint}/abort`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
abortKey: currentParent.conversationId,
|
||||
latestMessage
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
console.log('Request aborted');
|
||||
} else {
|
||||
console.error('Error aborting request');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
console.log('source closed, got this far');
|
||||
cancelHandler(latestMessage, { ...submission, message });
|
||||
return;
|
||||
}
|
||||
let { message } = submission;
|
||||
|
||||
const { server, payload } = createPayload(submission);
|
||||
|
||||
|
|
@ -212,9 +186,6 @@ export default function MessageHandler() {
|
|||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
setSource(events);
|
||||
|
||||
// let latestResponseText = '';
|
||||
events.onmessage = e => {
|
||||
const data = JSON.parse(e.data);
|
||||
|
||||
|
|
@ -229,24 +200,19 @@ export default function MessageHandler() {
|
|||
};
|
||||
createdHandler(data, { ...submission, message });
|
||||
console.log('created', message);
|
||||
// setAbortKey(message?.conversationId);
|
||||
setCurrentParent(message);
|
||||
} else {
|
||||
let text = data.text || data.response;
|
||||
if (data.initial) console.log(data);
|
||||
|
||||
if (data.message) {
|
||||
// latestResponseText = text;
|
||||
setLastResponse(text);
|
||||
messageHandler(text, { ...submission, message });
|
||||
}
|
||||
// console.log('dataStream', data);
|
||||
}
|
||||
};
|
||||
|
||||
events.onopen = () => console.log('connection is opened');
|
||||
|
||||
// events.oncancel = () => cancelHandler(latestResponseText, { ...submission, message });
|
||||
events.oncancel = () => abortConversation(message?.conversationId || submission?.conversationId);
|
||||
|
||||
events.onerror = function (e) {
|
||||
console.log('error in opening conn.');
|
||||
|
|
@ -263,7 +229,7 @@ export default function MessageHandler() {
|
|||
return () => {
|
||||
const isCancelled = events.readyState <= 1;
|
||||
events.close();
|
||||
setSource(null);
|
||||
// setSource(null);
|
||||
if (isCancelled) {
|
||||
const e = new Event('cancel');
|
||||
events.dispatchEvent(e);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -37,16 +37,16 @@ export default function ExportModel({ open, onOpenChange }) {
|
|||
);
|
||||
|
||||
const typeOptions = [
|
||||
{ value: 'screenshot', display: 'screenshot (.png)' },
|
||||
{ value: 'text', display: 'text (.txt)' },
|
||||
{ value: 'markdown', display: 'markdown (.md)' },
|
||||
{ value: 'csv', display: 'csv (.csv)' },
|
||||
{ value: 'json', display: 'json (.json)' },
|
||||
{ value: 'screenshot', display: 'screenshot (.png)' }
|
||||
{ value: 'csv', display: 'csv (.csv)' }
|
||||
]; //,, 'webpage'];
|
||||
|
||||
useEffect(() => {
|
||||
setFileName(filenamify(String(conversation?.title || 'file')));
|
||||
setType('text');
|
||||
setType('screenshot');
|
||||
setIncludeOptions(true);
|
||||
setExportBranches(false);
|
||||
setRecursive(true);
|
||||
|
|
@ -144,6 +144,8 @@ export default function ExportModel({ open, onOpenChange }) {
|
|||
fieldValues: entries.find(e => e.fieldName == 'isCreatedByUser').fieldValues
|
||||
},
|
||||
{ fieldName: 'error', fieldValues: entries.find(e => e.fieldName == 'error').fieldValues },
|
||||
{ fieldName: 'unfinished', fieldValues: entries.find(e => e.fieldName == 'unfinished').fieldValues },
|
||||
{ fieldName: 'cancelled', fieldValues: entries.find(e => e.fieldName == 'cancelled').fieldValues },
|
||||
{ fieldName: 'messageId', fieldValues: entries.find(e => e.fieldName == 'messageId').fieldValues },
|
||||
{
|
||||
fieldName: 'parentMessageId',
|
||||
|
|
@ -181,7 +183,11 @@ export default function ExportModel({ open, onOpenChange }) {
|
|||
|
||||
data += `\n## History\n`;
|
||||
for (const message of messages) {
|
||||
data += `**${message?.sender}:**\n${message?.text}\n\n`;
|
||||
data += `**${message?.sender}:**\n${message?.text}\n`;
|
||||
if (message.error) data += `*(This is an error message)*\n`;
|
||||
if (message.unfinished) data += `*(This is an unfinished message)*\n`;
|
||||
if (message.cancelled) data += `*(This is a cancelled message)*\n`;
|
||||
data += '\n\n';
|
||||
}
|
||||
|
||||
exportFromJSON({
|
||||
|
|
@ -220,7 +226,11 @@ export default function ExportModel({ open, onOpenChange }) {
|
|||
|
||||
data += `\nHistory\n########################\n`;
|
||||
for (const message of messages) {
|
||||
data += `${message?.sender}:\n${message?.text}\n\n`;
|
||||
data += `>> ${message?.sender}:\n${message?.text}\n`;
|
||||
if (message.error) data += `(This is an error message)\n`;
|
||||
if (message.unfinished) data += `(This is an unfinished message)\n`;
|
||||
if (message.cancelled) data += `(This is a cancelled message)\n`;
|
||||
data += '\n\n';
|
||||
}
|
||||
|
||||
exportFromJSON({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue