mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 17:00:15 +01:00
🔧 style: Improve UI and UX with Style Fixes and Code Refactors (#2002)
* refactor(useSSE): add useCallback to all event handlers * chore: remove modelName in defaultAssistantFormValues * fix(SidePanel): fix layout shift on chrome my removing sidenav scrollbar * style(ChatForm): match ChatGPT textarea effect styling * style: fix flickering of old background color on refresh
This commit is contained in:
Danny Avila
GitHub
parent
b2ab6fd19d
commit
ab66747e97
7 changed files with 412 additions and 375 deletions
|
|
@ -1,8 +1,8 @@
|
|||
import { v4 } from 'uuid';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
/* @ts-ignore */
|
||||
SSE,
|
||||
|
|
@ -83,392 +83,424 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
|
|||
enabled: !!isAuthenticated && startupConfig?.checkBalance,
|
||||
});
|
||||
|
||||
const messageHandler = (data: string, submission: TSubmission) => {
|
||||
const {
|
||||
messages,
|
||||
message,
|
||||
plugin,
|
||||
plugins,
|
||||
initialResponse,
|
||||
isRegenerate = false,
|
||||
} = submission;
|
||||
|
||||
if (isRegenerate) {
|
||||
setMessages([
|
||||
...messages,
|
||||
{
|
||||
...initialResponse,
|
||||
text: data,
|
||||
parentMessageId: message?.overrideParentMessageId ?? null,
|
||||
messageId: message?.overrideParentMessageId + '_',
|
||||
plugin: plugin ?? null,
|
||||
plugins: plugins ?? [],
|
||||
// unfinished: true
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
setMessages([
|
||||
...messages,
|
||||
const messageHandler = useCallback(
|
||||
(data: string, submission: TSubmission) => {
|
||||
const {
|
||||
messages,
|
||||
message,
|
||||
plugin,
|
||||
plugins,
|
||||
initialResponse,
|
||||
isRegenerate = false,
|
||||
} = submission;
|
||||
|
||||
if (isRegenerate) {
|
||||
setMessages([
|
||||
...messages,
|
||||
{
|
||||
...initialResponse,
|
||||
text: data,
|
||||
parentMessageId: message?.overrideParentMessageId ?? null,
|
||||
messageId: message?.overrideParentMessageId + '_',
|
||||
plugin: plugin ?? null,
|
||||
plugins: plugins ?? [],
|
||||
// unfinished: true
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
setMessages([
|
||||
...messages,
|
||||
message,
|
||||
{
|
||||
...initialResponse,
|
||||
text: data,
|
||||
parentMessageId: message?.messageId,
|
||||
messageId: message?.messageId + '_',
|
||||
plugin: plugin ?? null,
|
||||
plugins: plugins ?? [],
|
||||
// unfinished: true
|
||||
},
|
||||
]);
|
||||
}
|
||||
},
|
||||
[setMessages],
|
||||
);
|
||||
|
||||
const cancelHandler = useCallback(
|
||||
(data: TResData, submission: TSubmission) => {
|
||||
const { requestMessage, responseMessage, conversation } = data;
|
||||
const { messages, isRegenerate = false } = submission;
|
||||
|
||||
const convoUpdate = conversation ?? submission.conversation;
|
||||
|
||||
// update the messages
|
||||
if (isRegenerate) {
|
||||
const messagesUpdate = [...messages, responseMessage].filter((msg) => msg);
|
||||
setMessages(messagesUpdate);
|
||||
} else {
|
||||
const messagesUpdate = [...messages, requestMessage, responseMessage].filter((msg) => msg);
|
||||
setMessages(messagesUpdate);
|
||||
}
|
||||
|
||||
const isNewConvo = conversation.conversationId !== submission.conversation.conversationId;
|
||||
if (isNewConvo) {
|
||||
queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
|
||||
if (!convoData) {
|
||||
return convoData;
|
||||
}
|
||||
return deleteConversation(convoData, submission.conversation.conversationId as string);
|
||||
});
|
||||
}
|
||||
|
||||
// refresh title
|
||||
if (isNewConvo && requestMessage?.parentMessageId === Constants.NO_PARENT) {
|
||||
setTimeout(() => {
|
||||
genTitle.mutate({ conversationId: convoUpdate.conversationId as string });
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
setConversation((prevState) => {
|
||||
const update = {
|
||||
...prevState,
|
||||
...convoUpdate,
|
||||
};
|
||||
|
||||
setStorage(update);
|
||||
return update;
|
||||
});
|
||||
|
||||
setIsSubmitting(false);
|
||||
},
|
||||
[setMessages, setConversation, setStorage, genTitle, queryClient, setIsSubmitting],
|
||||
);
|
||||
|
||||
const syncHandler = useCallback(
|
||||
(data: TSyncData, submission: TSubmission) => {
|
||||
const { conversationId, thread_id, responseMessage, requestMessage } = data;
|
||||
const { initialResponse, messages: _messages, message } = submission;
|
||||
|
||||
const messages = _messages.filter((msg) => msg.messageId !== message.messageId);
|
||||
|
||||
setMessages([
|
||||
...messages,
|
||||
requestMessage,
|
||||
{
|
||||
...initialResponse,
|
||||
text: data,
|
||||
parentMessageId: message?.messageId,
|
||||
messageId: message?.messageId + '_',
|
||||
plugin: plugin ?? null,
|
||||
plugins: plugins ?? [],
|
||||
// unfinished: true
|
||||
...responseMessage,
|
||||
},
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
const cancelHandler = (data: TResData, submission: TSubmission) => {
|
||||
const { requestMessage, responseMessage, conversation } = data;
|
||||
const { messages, isRegenerate = false } = submission;
|
||||
let update = {} as TConversation;
|
||||
setConversation((prevState) => {
|
||||
update = tConvoUpdateSchema.parse({
|
||||
...prevState,
|
||||
conversationId,
|
||||
thread_id,
|
||||
messages: [requestMessage.messageId, responseMessage.messageId],
|
||||
}) as TConversation;
|
||||
|
||||
const convoUpdate = conversation ?? submission.conversation;
|
||||
setStorage(update);
|
||||
return update;
|
||||
});
|
||||
|
||||
// update the messages
|
||||
if (isRegenerate) {
|
||||
const messagesUpdate = [...messages, responseMessage].filter((msg) => msg);
|
||||
setMessages(messagesUpdate);
|
||||
} else {
|
||||
const messagesUpdate = [...messages, requestMessage, responseMessage].filter((msg) => msg);
|
||||
setMessages(messagesUpdate);
|
||||
}
|
||||
|
||||
const isNewConvo = conversation.conversationId !== submission.conversation.conversationId;
|
||||
if (isNewConvo) {
|
||||
queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
|
||||
if (!convoData) {
|
||||
return convoData;
|
||||
}
|
||||
return deleteConversation(convoData, submission.conversation.conversationId as string);
|
||||
if (requestMessage.parentMessageId === Constants.NO_PARENT) {
|
||||
return addConversation(convoData, update);
|
||||
} else {
|
||||
return updateConversation(convoData, update);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// refresh title
|
||||
if (isNewConvo && requestMessage?.parentMessageId === Constants.NO_PARENT) {
|
||||
setTimeout(() => {
|
||||
genTitle.mutate({ conversationId: convoUpdate.conversationId as string });
|
||||
}, 2500);
|
||||
}
|
||||
setShowStopButton(true);
|
||||
|
||||
setConversation((prevState) => {
|
||||
const update = {
|
||||
...prevState,
|
||||
...convoUpdate,
|
||||
};
|
||||
resetLatestMessage();
|
||||
},
|
||||
[setMessages, setConversation, setStorage, queryClient, setShowStopButton, resetLatestMessage],
|
||||
);
|
||||
|
||||
setStorage(update);
|
||||
return update;
|
||||
});
|
||||
const createdHandler = useCallback(
|
||||
(data: TResData, submission: TSubmission) => {
|
||||
const { messages, message, initialResponse, isRegenerate = false } = submission;
|
||||
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const syncHandler = (data: TSyncData, submission: TSubmission) => {
|
||||
const { conversationId, thread_id, responseMessage, requestMessage } = data;
|
||||
const { initialResponse, messages: _messages, message } = submission;
|
||||
|
||||
const messages = _messages.filter((msg) => msg.messageId !== message.messageId);
|
||||
|
||||
setMessages([
|
||||
...messages,
|
||||
requestMessage,
|
||||
{
|
||||
...initialResponse,
|
||||
...responseMessage,
|
||||
},
|
||||
]);
|
||||
|
||||
let update = {} as TConversation;
|
||||
setConversation((prevState) => {
|
||||
update = tConvoUpdateSchema.parse({
|
||||
...prevState,
|
||||
conversationId,
|
||||
thread_id,
|
||||
messages: [requestMessage.messageId, responseMessage.messageId],
|
||||
}) as TConversation;
|
||||
|
||||
setStorage(update);
|
||||
return update;
|
||||
});
|
||||
|
||||
queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
|
||||
if (!convoData) {
|
||||
return convoData;
|
||||
}
|
||||
if (requestMessage.parentMessageId === Constants.NO_PARENT) {
|
||||
return addConversation(convoData, update);
|
||||
if (isRegenerate) {
|
||||
setMessages([
|
||||
...messages,
|
||||
{
|
||||
...initialResponse,
|
||||
parentMessageId: message?.overrideParentMessageId ?? null,
|
||||
messageId: message?.overrideParentMessageId + '_',
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
return updateConversation(convoData, update);
|
||||
}
|
||||
});
|
||||
|
||||
setShowStopButton(true);
|
||||
|
||||
resetLatestMessage();
|
||||
};
|
||||
|
||||
const createdHandler = (data: TResData, submission: TSubmission) => {
|
||||
const { messages, message, initialResponse, isRegenerate = false } = submission;
|
||||
|
||||
if (isRegenerate) {
|
||||
setMessages([
|
||||
...messages,
|
||||
{
|
||||
...initialResponse,
|
||||
parentMessageId: message?.overrideParentMessageId ?? null,
|
||||
messageId: message?.overrideParentMessageId + '_',
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
setMessages([
|
||||
...messages,
|
||||
message,
|
||||
{
|
||||
...initialResponse,
|
||||
parentMessageId: message?.messageId,
|
||||
messageId: message?.messageId + '_',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
const { conversationId, parentMessageId } = message;
|
||||
|
||||
let update = {} as TConversation;
|
||||
setConversation((prevState) => {
|
||||
let title = prevState?.title;
|
||||
if (parentMessageId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
|
||||
const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
|
||||
const cachedConvo = getConversationById(convos, conversationId);
|
||||
title = cachedConvo?.title;
|
||||
setMessages([
|
||||
...messages,
|
||||
message,
|
||||
{
|
||||
...initialResponse,
|
||||
parentMessageId: message?.messageId,
|
||||
messageId: message?.messageId + '_',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
update = tConvoUpdateSchema.parse({
|
||||
...prevState,
|
||||
conversationId,
|
||||
title,
|
||||
}) as TConversation;
|
||||
const { conversationId, parentMessageId } = message;
|
||||
|
||||
setStorage(update);
|
||||
return update;
|
||||
});
|
||||
let update = {} as TConversation;
|
||||
setConversation((prevState) => {
|
||||
let title = prevState?.title;
|
||||
if (parentMessageId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
|
||||
const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
|
||||
const cachedConvo = getConversationById(convos, conversationId);
|
||||
title = cachedConvo?.title;
|
||||
}
|
||||
|
||||
queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
|
||||
if (!convoData) {
|
||||
return convoData;
|
||||
}
|
||||
if (parentMessageId === Constants.NO_PARENT) {
|
||||
return addConversation(convoData, update);
|
||||
} else {
|
||||
return updateConversation(convoData, update);
|
||||
}
|
||||
});
|
||||
resetLatestMessage();
|
||||
};
|
||||
update = tConvoUpdateSchema.parse({
|
||||
...prevState,
|
||||
conversationId,
|
||||
title,
|
||||
}) as TConversation;
|
||||
|
||||
const finalHandler = (data: TResData, submission: TSubmission) => {
|
||||
const { requestMessage, responseMessage, conversation, runMessages } = data;
|
||||
const { messages, conversation: submissionConvo, isRegenerate = false } = submission;
|
||||
setStorage(update);
|
||||
return update;
|
||||
});
|
||||
|
||||
setShowStopButton(false);
|
||||
setCompleted((prev) => new Set(prev.add(submission?.initialResponse?.messageId)));
|
||||
|
||||
// update the messages; if assistants endpoint, client doesn't receive responseMessage
|
||||
if (runMessages) {
|
||||
setMessages([...runMessages]);
|
||||
} else if (isRegenerate && responseMessage) {
|
||||
setMessages([...messages, responseMessage]);
|
||||
} else if (responseMessage) {
|
||||
setMessages([...messages, requestMessage, responseMessage]);
|
||||
}
|
||||
|
||||
const isNewConvo = conversation.conversationId !== submissionConvo.conversationId;
|
||||
if (isNewConvo) {
|
||||
queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
|
||||
if (!convoData) {
|
||||
return convoData;
|
||||
}
|
||||
return deleteConversation(convoData, submissionConvo.conversationId as string);
|
||||
if (parentMessageId === Constants.NO_PARENT) {
|
||||
return addConversation(convoData, update);
|
||||
} else {
|
||||
return updateConversation(convoData, update);
|
||||
}
|
||||
});
|
||||
}
|
||||
resetLatestMessage();
|
||||
},
|
||||
[setMessages, setConversation, setStorage, queryClient, resetLatestMessage],
|
||||
);
|
||||
|
||||
// refresh title
|
||||
if (isNewConvo && requestMessage && requestMessage.parentMessageId === Constants.NO_PARENT) {
|
||||
setTimeout(() => {
|
||||
genTitle.mutate({ conversationId: conversation.conversationId as string });
|
||||
}, 2500);
|
||||
}
|
||||
const finalHandler = useCallback(
|
||||
(data: TResData, submission: TSubmission) => {
|
||||
const { requestMessage, responseMessage, conversation, runMessages } = data;
|
||||
const { messages, conversation: submissionConvo, isRegenerate = false } = submission;
|
||||
|
||||
setConversation((prevState) => {
|
||||
const update = {
|
||||
...prevState,
|
||||
...conversation,
|
||||
};
|
||||
setShowStopButton(false);
|
||||
setCompleted((prev) => new Set(prev.add(submission?.initialResponse?.messageId)));
|
||||
|
||||
if (prevState?.model && prevState.model !== submissionConvo.model) {
|
||||
update.model = prevState.model;
|
||||
// update the messages; if assistants endpoint, client doesn't receive responseMessage
|
||||
if (runMessages) {
|
||||
setMessages([...runMessages]);
|
||||
} else if (isRegenerate && responseMessage) {
|
||||
setMessages([...messages, responseMessage]);
|
||||
} else if (responseMessage) {
|
||||
setMessages([...messages, requestMessage, responseMessage]);
|
||||
}
|
||||
|
||||
setStorage(update);
|
||||
return update;
|
||||
});
|
||||
const isNewConvo = conversation.conversationId !== submissionConvo.conversationId;
|
||||
if (isNewConvo) {
|
||||
queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
|
||||
if (!convoData) {
|
||||
return convoData;
|
||||
}
|
||||
return deleteConversation(convoData, submissionConvo.conversationId as string);
|
||||
});
|
||||
}
|
||||
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
// refresh title
|
||||
if (isNewConvo && requestMessage && requestMessage.parentMessageId === Constants.NO_PARENT) {
|
||||
setTimeout(() => {
|
||||
genTitle.mutate({ conversationId: conversation.conversationId as string });
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
const errorHandler = ({ data, submission }: { data?: TResData; submission: TSubmission }) => {
|
||||
const { messages, message, initialResponse } = submission;
|
||||
setConversation((prevState) => {
|
||||
const update = {
|
||||
...prevState,
|
||||
...conversation,
|
||||
};
|
||||
|
||||
setCompleted((prev) => new Set(prev.add(initialResponse.messageId)));
|
||||
if (prevState?.model && prevState.model !== submissionConvo.model) {
|
||||
update.model = prevState.model;
|
||||
}
|
||||
|
||||
const conversationId = message?.conversationId ?? submission?.conversationId;
|
||||
setStorage(update);
|
||||
return update;
|
||||
});
|
||||
|
||||
const parseErrorResponse = (data: TResData | Partial<TMessage>) => {
|
||||
const metadata = data['responseMessage'] ?? data;
|
||||
const errorMessage = {
|
||||
...initialResponse,
|
||||
...metadata,
|
||||
setIsSubmitting(false);
|
||||
},
|
||||
[
|
||||
setMessages,
|
||||
setConversation,
|
||||
setStorage,
|
||||
genTitle,
|
||||
queryClient,
|
||||
setIsSubmitting,
|
||||
setShowStopButton,
|
||||
],
|
||||
);
|
||||
|
||||
const errorHandler = useCallback(
|
||||
({ data, submission }: { data?: TResData; submission: TSubmission }) => {
|
||||
const { messages, message, initialResponse } = submission;
|
||||
|
||||
setCompleted((prev) => new Set(prev.add(initialResponse.messageId)));
|
||||
|
||||
const conversationId = message?.conversationId ?? submission?.conversationId;
|
||||
|
||||
const parseErrorResponse = (data: TResData | Partial<TMessage>) => {
|
||||
const metadata = data['responseMessage'] ?? data;
|
||||
const errorMessage = {
|
||||
...initialResponse,
|
||||
...metadata,
|
||||
error: true,
|
||||
parentMessageId: message?.messageId,
|
||||
};
|
||||
|
||||
if (!errorMessage.messageId) {
|
||||
errorMessage.messageId = v4();
|
||||
}
|
||||
|
||||
return tMessageSchema.parse(errorMessage);
|
||||
};
|
||||
|
||||
if (!data) {
|
||||
const convoId = conversationId ?? v4();
|
||||
const errorResponse = parseErrorResponse({
|
||||
text: 'Error connecting to server',
|
||||
...submission,
|
||||
conversationId: convoId,
|
||||
});
|
||||
setMessages([...messages, message, errorResponse]);
|
||||
newConversation({
|
||||
template: { conversationId: convoId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!conversationId && !data.conversationId) {
|
||||
const convoId = v4();
|
||||
const errorResponse = parseErrorResponse(data);
|
||||
setMessages([...messages, message, errorResponse]);
|
||||
newConversation({
|
||||
template: { conversationId: convoId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Error:', data);
|
||||
const errorResponse = tMessageSchema.parse({
|
||||
...data,
|
||||
error: true,
|
||||
parentMessageId: message?.messageId,
|
||||
};
|
||||
});
|
||||
|
||||
if (!errorMessage.messageId) {
|
||||
errorMessage.messageId = v4();
|
||||
setMessages([...messages, message, errorResponse]);
|
||||
if (data.conversationId && paramId === 'new') {
|
||||
newConversation({
|
||||
template: { conversationId: data.conversationId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
}
|
||||
|
||||
return tMessageSchema.parse(errorMessage);
|
||||
};
|
||||
|
||||
if (!data) {
|
||||
const convoId = conversationId ?? v4();
|
||||
const errorResponse = parseErrorResponse({
|
||||
text: 'Error connecting to server',
|
||||
...submission,
|
||||
conversationId: convoId,
|
||||
});
|
||||
setMessages([...messages, message, errorResponse]);
|
||||
newConversation({
|
||||
template: { conversationId: convoId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
},
|
||||
[setMessages, paramId, setIsSubmitting, newConversation],
|
||||
);
|
||||
|
||||
if (!conversationId && !data.conversationId) {
|
||||
const convoId = v4();
|
||||
const errorResponse = parseErrorResponse(data);
|
||||
setMessages([...messages, message, errorResponse]);
|
||||
newConversation({
|
||||
template: { conversationId: convoId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
const abortConversation = useCallback(
|
||||
async (conversationId = '', submission: TSubmission) => {
|
||||
console.log(submission);
|
||||
let runAbortKey = '';
|
||||
try {
|
||||
const conversation = (JSON.parse(localStorage.getItem('lastConversationSetup') ?? '') ??
|
||||
{}) as TConversation;
|
||||
const { conversationId, messages } = conversation;
|
||||
runAbortKey = `${conversationId}:${messages?.[messages.length - 1]}`;
|
||||
} catch (error) {
|
||||
console.error('Error getting last conversation setup');
|
||||
console.error(error);
|
||||
}
|
||||
const { endpoint: _endpoint, endpointType } = submission?.conversation || {};
|
||||
const endpoint = endpointType ?? _endpoint;
|
||||
try {
|
||||
const response = await fetch(`${EndpointURLs[endpoint ?? '']}/abort`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
abortKey: _endpoint === EModelEndpoint.assistants ? runAbortKey : conversationId,
|
||||
endpoint,
|
||||
}),
|
||||
});
|
||||
|
||||
console.log('Error:', data);
|
||||
const errorResponse = tMessageSchema.parse({
|
||||
...data,
|
||||
error: true,
|
||||
parentMessageId: message?.messageId,
|
||||
});
|
||||
// Check if the response is JSON
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (contentType && contentType.includes('application/json')) {
|
||||
const data = await response.json();
|
||||
console.log('aborted', data);
|
||||
if (response.status === 404) {
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
if (data.final) {
|
||||
finalHandler(data, submission);
|
||||
} else {
|
||||
cancelHandler(data, submission);
|
||||
}
|
||||
} else if (response.status === 204) {
|
||||
const responseMessage = {
|
||||
...submission.initialResponse,
|
||||
};
|
||||
|
||||
setMessages([...messages, message, errorResponse]);
|
||||
if (data.conversationId && paramId === 'new') {
|
||||
newConversation({
|
||||
template: { conversationId: data.conversationId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
}
|
||||
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
};
|
||||
|
||||
const abortConversation = async (conversationId = '', submission: TSubmission) => {
|
||||
console.log(submission);
|
||||
let runAbortKey = '';
|
||||
try {
|
||||
const conversation = (JSON.parse(localStorage.getItem('lastConversationSetup') ?? '') ??
|
||||
{}) as TConversation;
|
||||
const { conversationId, messages } = conversation;
|
||||
runAbortKey = `${conversationId}:${messages?.[messages.length - 1]}`;
|
||||
} catch (error) {
|
||||
console.error('Error getting last conversation setup');
|
||||
console.error(error);
|
||||
}
|
||||
const { endpoint: _endpoint, endpointType } = submission?.conversation || {};
|
||||
const endpoint = endpointType ?? _endpoint;
|
||||
try {
|
||||
const response = await fetch(`${EndpointURLs[endpoint ?? '']}/abort`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
abortKey: _endpoint === EModelEndpoint.assistants ? runAbortKey : conversationId,
|
||||
endpoint,
|
||||
}),
|
||||
});
|
||||
|
||||
// Check if the response is JSON
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (contentType && contentType.includes('application/json')) {
|
||||
const data = await response.json();
|
||||
console.log('aborted', data);
|
||||
if (response.status === 404) {
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
if (data.final) {
|
||||
finalHandler(data, submission);
|
||||
const data = {
|
||||
requestMessage: submission.message,
|
||||
responseMessage: responseMessage,
|
||||
conversation: submission.conversation,
|
||||
};
|
||||
console.log('aborted', data);
|
||||
} else {
|
||||
cancelHandler(data, submission);
|
||||
throw new Error(
|
||||
'Unexpected response from server; Status: ' +
|
||||
response.status +
|
||||
' ' +
|
||||
response.statusText,
|
||||
);
|
||||
}
|
||||
} else if (response.status === 204) {
|
||||
const responseMessage = {
|
||||
} catch (error) {
|
||||
console.error('Error cancelling request');
|
||||
console.error(error);
|
||||
const convoId = conversationId ?? v4();
|
||||
const text =
|
||||
submission.initialResponse?.text?.length > 45 ? submission.initialResponse?.text : '';
|
||||
const errorMessage = {
|
||||
...submission,
|
||||
...submission.initialResponse,
|
||||
text: text ?? (error as Error).message ?? 'Error cancelling request',
|
||||
unfinished: !!text.length,
|
||||
error: true,
|
||||
};
|
||||
|
||||
const data = {
|
||||
requestMessage: submission.message,
|
||||
responseMessage: responseMessage,
|
||||
conversation: submission.conversation,
|
||||
};
|
||||
console.log('aborted', data);
|
||||
} else {
|
||||
throw new Error(
|
||||
'Unexpected response from server; Status: ' + response.status + ' ' + response.statusText,
|
||||
);
|
||||
const errorResponse = tMessageSchema.parse(errorMessage);
|
||||
setMessages([...submission.messages, submission.message, errorResponse]);
|
||||
newConversation({
|
||||
template: { conversationId: convoId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error cancelling request');
|
||||
console.error(error);
|
||||
const convoId = conversationId ?? v4();
|
||||
const text =
|
||||
submission.initialResponse?.text?.length > 45 ? submission.initialResponse?.text : '';
|
||||
const errorMessage = {
|
||||
...submission,
|
||||
...submission.initialResponse,
|
||||
text: text ?? (error as Error).message ?? 'Error cancelling request',
|
||||
unfinished: !!text.length,
|
||||
error: true,
|
||||
};
|
||||
const errorResponse = tMessageSchema.parse(errorMessage);
|
||||
setMessages([...submission.messages, submission.message, errorResponse]);
|
||||
newConversation({
|
||||
template: { conversationId: convoId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
},
|
||||
[token, setIsSubmitting, finalHandler, cancelHandler, setMessages, newConversation],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (submission === null) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue