mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-02-11 12:04:24 +01:00
🌿 feat: Multi-response Streaming (#3191)
* chore: comment back handlePlusCommand * chore: ignore .git dir * refactor: pass newConversation to `useSelectMention` refactor: pass newConversation to Mention component refactor: useChatFunctions for modular use of `ask` and `regenerate` refactor: set latest message only for the first index in useChatFunctions refactor: pass setLatestMessage to useChatFunctions refactor: Pass setSubmission to useChatFunctions for submission handling refactor: consolidate event handlers to separate hook from useSSE WIP: additional response handlers feat: responsive added convo, clears on new chat/navigating to chat, assistants excluded feat: Add conversationByKeySelector to select any conversation by index WIP: handle second submission with messages paired to root * style: surface-primary-contrast * refactor: remove unnecessary console.log statement in useChatFunctions * refactor: Consolidate imports in ChatForm and Input hooks * refactor: compositional usage of useSSE for multiple streams * WIP: set latest 'multi' message * WIP: first pass, added response streaming * pass: performant multi-message stream * fix: styling and message render * second pass: modular, performant multi-stream * fix: align parentMessageId of multiMessage * refactor: move resetting latestMultiMessage * chore: update footer text in Chat component * fix: stop button styling * fix: handle abortMessage request for multi-response * clear messages but bug with latest message reset present * fix: add delay for additional message generation * fix: access LAST_CONVO_SETUP by index * style: add div to prevent layout shift before hover buttons render * chore: Update Message component styling for card messages * chore: move hook use order * fix: abort middleware using unsent field from req.body * feat: support multi-response stream from initial message * refactor: buildTree function to improve readability and remove unused code * feat: add logger for frontend dev * refactor: use depth to track if message is really last in its branch * fix(buildTree): default export * fix: share parent message Id and avoid duplication error for multi-response streams * fix: prevent addedConvo reset to response convo * feat: allow setting multi message as latest message to control which to respond to * chore: wrap setSiblingIdxRev with useCallback * chore: styling and allow editing messages * style: styling fixes * feat: Add "AddMultiConvo" component to Chat Header * feat: prevent clearing added convos on endpoint, preset, mention, or modelSpec switch * fix: message styling fixes, mainly related to code blocks * fix: stop button visibility logic * fix: Handle edge case in abortMiddleware for non-existant `abortControllers` * refactor: optimize/memoize icons * chore(GoogleClient): change info to debug logs * style: active message styling * style: prevent layout shift due to placeholder row * chore: remove unused code * fix: Update BaseClient to handle optional request body properties * fix(ci): `onStart` now accepts 2 args, the 2nd being responseMessageId * chore: bump data-provider
This commit is contained in:
Danny Avila
GitHub
parent
eef894e608
commit
156c52e293
72 changed files with 2697 additions and 1326 deletions
4
client/src/hooks/Chat/index.ts
Normal file
4
client/src/hooks/Chat/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export { default as useChatHelpers } from './useChatHelpers';
|
||||
export { default as useAddedHelpers } from './useAddedHelpers';
|
||||
export { default as useAddedResponse } from './useAddedResponse';
|
||||
export { default as useChatFunctions } from './useChatFunctions';
|
||||
128
client/src/hooks/Chat/useAddedHelpers.ts
Normal file
128
client/src/hooks/Chat/useAddedHelpers.ts
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import { useCallback } from 'react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { QueryKeys } from 'librechat-data-provider';
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import type { TMessage } from 'librechat-data-provider';
|
||||
import useChatFunctions from '~/hooks/Chat/useChatFunctions';
|
||||
import store from '~/store';
|
||||
|
||||
// this to be set somewhere else
|
||||
export default function useAddedHelpers({
|
||||
rootIndex = 0,
|
||||
currentIndex,
|
||||
paramId,
|
||||
}: {
|
||||
rootIndex?: number;
|
||||
currentIndex: number;
|
||||
paramId?: string;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const clearAllSubmissions = store.useClearSubmissionState();
|
||||
const [files, setFiles] = useRecoilState(store.filesByIndex(rootIndex));
|
||||
const latestMessage = useRecoilValue(store.latestMessageFamily(rootIndex));
|
||||
const setLatestMultiMessage = useSetRecoilState(store.latestMessageFamily(currentIndex));
|
||||
|
||||
const { useCreateConversationAtom } = store;
|
||||
const { conversation, setConversation } = useCreateConversationAtom(currentIndex);
|
||||
const [isSubmitting, setIsSubmitting] = useRecoilState(store.isSubmittingFamily(currentIndex));
|
||||
|
||||
const setSiblingIdx = useSetRecoilState(
|
||||
store.messagesSiblingIdxFamily(latestMessage?.parentMessageId ?? null),
|
||||
);
|
||||
|
||||
const queryParam = paramId === 'new' ? paramId : conversation?.conversationId ?? paramId ?? '';
|
||||
|
||||
const setMessages = useCallback(
|
||||
(messages: TMessage[]) => {
|
||||
queryClient.setQueryData<TMessage[]>(
|
||||
[QueryKeys.messages, queryParam, currentIndex],
|
||||
messages,
|
||||
);
|
||||
const latestMultiMessage = messages[messages.length - 1];
|
||||
if (latestMultiMessage) {
|
||||
setLatestMultiMessage({ ...latestMultiMessage, depth: -1 });
|
||||
}
|
||||
},
|
||||
[queryParam, queryClient, currentIndex, setLatestMultiMessage],
|
||||
);
|
||||
|
||||
const getMessages = useCallback(() => {
|
||||
return queryClient.getQueryData<TMessage[]>([QueryKeys.messages, queryParam, currentIndex]);
|
||||
}, [queryParam, queryClient, currentIndex]);
|
||||
|
||||
const setSubmission = useSetRecoilState(store.submissionByIndex(currentIndex));
|
||||
|
||||
const { ask, regenerate } = useChatFunctions({
|
||||
index: currentIndex,
|
||||
files,
|
||||
setFiles,
|
||||
getMessages,
|
||||
setMessages,
|
||||
isSubmitting,
|
||||
conversation,
|
||||
setSubmission,
|
||||
latestMessage,
|
||||
});
|
||||
|
||||
const continueGeneration = () => {
|
||||
if (!latestMessage) {
|
||||
console.error('Failed to regenerate the message: latestMessage not found.');
|
||||
return;
|
||||
}
|
||||
|
||||
const messages = getMessages();
|
||||
|
||||
const parentMessage = messages?.find(
|
||||
(element) => element.messageId == latestMessage.parentMessageId,
|
||||
);
|
||||
|
||||
if (parentMessage && parentMessage.isCreatedByUser) {
|
||||
ask({ ...parentMessage }, { isContinued: true, isRegenerate: true, isEdited: true });
|
||||
} else {
|
||||
console.error(
|
||||
'Failed to regenerate the message: parentMessage not found, or not created by user.',
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const stopGenerating = () => clearAllSubmissions();
|
||||
|
||||
const handleStopGenerating = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
stopGenerating();
|
||||
};
|
||||
|
||||
const handleRegenerate = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
const parentMessageId = latestMessage?.parentMessageId;
|
||||
if (!parentMessageId) {
|
||||
console.error('Failed to regenerate the message: parentMessageId not found.');
|
||||
return;
|
||||
}
|
||||
regenerate({ parentMessageId });
|
||||
};
|
||||
|
||||
const handleContinue = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
continueGeneration();
|
||||
setSiblingIdx(0);
|
||||
};
|
||||
|
||||
return {
|
||||
ask,
|
||||
regenerate,
|
||||
getMessages,
|
||||
setMessages,
|
||||
conversation,
|
||||
isSubmitting,
|
||||
setSiblingIdx,
|
||||
latestMessage,
|
||||
stopGenerating,
|
||||
handleContinue,
|
||||
setConversation,
|
||||
setIsSubmitting,
|
||||
handleRegenerate,
|
||||
handleStopGenerating,
|
||||
};
|
||||
}
|
||||
39
client/src/hooks/Chat/useAddedResponse.ts
Normal file
39
client/src/hooks/Chat/useAddedResponse.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { useMemo } from 'react';
|
||||
import useGenerateConvo from '~/hooks/Conversations/useGenerateConvo';
|
||||
import useAddedHelpers from '~/hooks/Chat/useAddedHelpers';
|
||||
|
||||
export default function useAddedResponse({ rootIndex }: { rootIndex: number }) {
|
||||
const currentIndex = useMemo(() => rootIndex + 1, [rootIndex]);
|
||||
const {
|
||||
ask,
|
||||
regenerate,
|
||||
setMessages,
|
||||
getMessages,
|
||||
conversation,
|
||||
isSubmitting,
|
||||
setConversation,
|
||||
setIsSubmitting,
|
||||
} = useAddedHelpers({
|
||||
rootIndex,
|
||||
currentIndex,
|
||||
});
|
||||
|
||||
const { generateConversation } = useGenerateConvo({
|
||||
index: currentIndex,
|
||||
rootIndex,
|
||||
setConversation,
|
||||
});
|
||||
|
||||
return {
|
||||
ask,
|
||||
regenerate,
|
||||
getMessages,
|
||||
setMessages,
|
||||
conversation,
|
||||
isSubmitting,
|
||||
setConversation,
|
||||
setIsSubmitting,
|
||||
generateConversation,
|
||||
addedIndex: currentIndex,
|
||||
};
|
||||
}
|
||||
264
client/src/hooks/Chat/useChatFunctions.ts
Normal file
264
client/src/hooks/Chat/useChatFunctions.ts
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
import { v4 } from 'uuid';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
Constants,
|
||||
QueryKeys,
|
||||
ContentTypes,
|
||||
parseCompactConvo,
|
||||
isAssistantsEndpoint,
|
||||
} from 'librechat-data-provider';
|
||||
import { useSetRecoilState, useResetRecoilState } from 'recoil';
|
||||
import type {
|
||||
TMessage,
|
||||
TSubmission,
|
||||
TConversation,
|
||||
TEndpointOption,
|
||||
TEndpointsConfig,
|
||||
} from 'librechat-data-provider';
|
||||
import type { SetterOrUpdater } from 'recoil';
|
||||
import type { TAskFunction, ExtendedFile } from '~/common';
|
||||
import useSetFilesToDelete from '~/hooks/Files/useSetFilesToDelete';
|
||||
import useGetSender from '~/hooks/Conversations/useGetSender';
|
||||
import { getEndpointField, logger } from '~/utils';
|
||||
import useUserKey from '~/hooks/Input/useUserKey';
|
||||
import store from '~/store';
|
||||
|
||||
export default function useChatFunctions({
|
||||
index = 0,
|
||||
files,
|
||||
setFiles,
|
||||
getMessages,
|
||||
setMessages,
|
||||
isSubmitting,
|
||||
conversation,
|
||||
latestMessage,
|
||||
setSubmission,
|
||||
setLatestMessage,
|
||||
}: {
|
||||
index?: number;
|
||||
isSubmitting: boolean;
|
||||
paramId?: string | undefined;
|
||||
conversation: TConversation | null;
|
||||
latestMessage: TMessage | null;
|
||||
getMessages: () => TMessage[] | undefined;
|
||||
setMessages: (messages: TMessage[]) => void;
|
||||
files?: Map<string, ExtendedFile>;
|
||||
setFiles?: SetterOrUpdater<Map<string, ExtendedFile>>;
|
||||
setSubmission: SetterOrUpdater<TSubmission | null>;
|
||||
setLatestMessage?: SetterOrUpdater<TMessage | null>;
|
||||
}) {
|
||||
const resetLatestMultiMessage = useResetRecoilState(store.latestMessageFamily(index + 1));
|
||||
const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(index));
|
||||
const setFilesToDelete = useSetFilesToDelete();
|
||||
const getSender = useGetSender();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const { getExpiry } = useUserKey(conversation?.endpoint ?? '');
|
||||
|
||||
const ask: TAskFunction = (
|
||||
{
|
||||
text,
|
||||
overrideConvoId,
|
||||
overrideUserMessageId,
|
||||
parentMessageId = null,
|
||||
conversationId = null,
|
||||
messageId = null,
|
||||
},
|
||||
{
|
||||
editedText = null,
|
||||
editedMessageId = null,
|
||||
resubmitFiles = false,
|
||||
isRegenerate = false,
|
||||
isContinued = false,
|
||||
isEdited = false,
|
||||
overrideMessages,
|
||||
} = {},
|
||||
) => {
|
||||
setShowStopButton(false);
|
||||
resetLatestMultiMessage();
|
||||
if (!!isSubmitting || text === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
const endpoint = conversation?.endpoint;
|
||||
if (endpoint === null) {
|
||||
console.error('No endpoint available');
|
||||
return;
|
||||
}
|
||||
|
||||
conversationId = conversationId ?? conversation?.conversationId ?? null;
|
||||
if (conversationId == 'search') {
|
||||
console.error('cannot send any message under search view!');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isContinued && !latestMessage) {
|
||||
console.error('cannot continue AI message without latestMessage!');
|
||||
return;
|
||||
}
|
||||
|
||||
const isEditOrContinue = isEdited || isContinued;
|
||||
|
||||
let currentMessages: TMessage[] | null = overrideMessages ?? getMessages() ?? [];
|
||||
|
||||
// construct the query message
|
||||
// this is not a real messageId, it is used as placeholder before real messageId returned
|
||||
text = text.trim();
|
||||
const intermediateId = overrideUserMessageId ?? v4();
|
||||
parentMessageId = parentMessageId || latestMessage?.messageId || Constants.NO_PARENT;
|
||||
|
||||
if (conversationId == 'new') {
|
||||
parentMessageId = Constants.NO_PARENT;
|
||||
currentMessages = [];
|
||||
conversationId = null;
|
||||
}
|
||||
|
||||
const parentMessage = currentMessages?.find(
|
||||
(msg) => msg.messageId === latestMessage?.parentMessageId,
|
||||
);
|
||||
|
||||
let thread_id = parentMessage?.thread_id ?? latestMessage?.thread_id;
|
||||
if (!thread_id) {
|
||||
thread_id = currentMessages.find((message) => message.thread_id)?.thread_id;
|
||||
}
|
||||
|
||||
const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);
|
||||
const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
|
||||
|
||||
// set the endpoint option
|
||||
const convo = parseCompactConvo({
|
||||
endpoint,
|
||||
endpointType,
|
||||
conversation: conversation ?? {},
|
||||
});
|
||||
|
||||
const { modelDisplayLabel } = endpointsConfig?.[endpoint ?? ''] ?? {};
|
||||
const endpointOption = {
|
||||
...convo,
|
||||
endpoint,
|
||||
thread_id,
|
||||
endpointType,
|
||||
overrideConvoId,
|
||||
key: getExpiry(),
|
||||
modelDisplayLabel,
|
||||
overrideUserMessageId,
|
||||
} as TEndpointOption;
|
||||
const responseSender = getSender({ model: conversation?.model, ...endpointOption });
|
||||
|
||||
const currentMsg: TMessage = {
|
||||
text,
|
||||
sender: 'User',
|
||||
isCreatedByUser: true,
|
||||
parentMessageId,
|
||||
conversationId,
|
||||
messageId: isContinued && messageId ? messageId : intermediateId,
|
||||
thread_id,
|
||||
error: false,
|
||||
};
|
||||
|
||||
const reuseFiles = (isRegenerate || resubmitFiles) && parentMessage?.files;
|
||||
if (setFiles && reuseFiles && parentMessage.files?.length) {
|
||||
currentMsg.files = parentMessage.files;
|
||||
setFiles(new Map());
|
||||
setFilesToDelete({});
|
||||
} else if (setFiles && files && files.size > 0) {
|
||||
currentMsg.files = Array.from(files.values()).map((file) => ({
|
||||
file_id: file.file_id,
|
||||
filepath: file.filepath,
|
||||
type: file.type || '', // Ensure type is not undefined
|
||||
height: file.height,
|
||||
width: file.width,
|
||||
}));
|
||||
setFiles(new Map());
|
||||
setFilesToDelete({});
|
||||
}
|
||||
|
||||
// construct the placeholder response message
|
||||
const generation = editedText ?? latestMessage?.text ?? '';
|
||||
const responseText = isEditOrContinue ? generation : '';
|
||||
|
||||
const responseMessageId = editedMessageId ?? latestMessage?.messageId ?? null;
|
||||
const initialResponse: TMessage = {
|
||||
sender: responseSender,
|
||||
text: responseText,
|
||||
endpoint: endpoint ?? '',
|
||||
parentMessageId: isRegenerate ? messageId : intermediateId,
|
||||
messageId: responseMessageId ?? `${isRegenerate ? messageId : intermediateId}_`,
|
||||
thread_id,
|
||||
conversationId,
|
||||
unfinished: false,
|
||||
isCreatedByUser: false,
|
||||
isEdited: isEditOrContinue,
|
||||
iconURL: convo.iconURL,
|
||||
error: false,
|
||||
};
|
||||
|
||||
if (isAssistantsEndpoint(endpoint)) {
|
||||
initialResponse.model = conversation?.assistant_id ?? '';
|
||||
initialResponse.text = '';
|
||||
initialResponse.content = [
|
||||
{
|
||||
type: ContentTypes.TEXT,
|
||||
[ContentTypes.TEXT]: {
|
||||
value: responseText,
|
||||
},
|
||||
},
|
||||
];
|
||||
} else {
|
||||
setShowStopButton(true);
|
||||
}
|
||||
|
||||
if (isContinued) {
|
||||
currentMessages = currentMessages.filter((msg) => msg.messageId !== responseMessageId);
|
||||
}
|
||||
|
||||
const submission: TSubmission = {
|
||||
conversation: {
|
||||
...conversation,
|
||||
conversationId,
|
||||
},
|
||||
endpointOption,
|
||||
userMessage: {
|
||||
...currentMsg,
|
||||
generation,
|
||||
responseMessageId,
|
||||
overrideParentMessageId: isRegenerate ? messageId : null,
|
||||
},
|
||||
messages: currentMessages,
|
||||
isEdited: isEditOrContinue,
|
||||
isContinued,
|
||||
isRegenerate,
|
||||
initialResponse,
|
||||
};
|
||||
|
||||
if (isRegenerate) {
|
||||
setMessages([...submission.messages, initialResponse]);
|
||||
} else {
|
||||
setMessages([...submission.messages, currentMsg, initialResponse]);
|
||||
}
|
||||
if (index === 0 && setLatestMessage) {
|
||||
setLatestMessage(initialResponse);
|
||||
}
|
||||
setSubmission(submission);
|
||||
logger.log('Submission:');
|
||||
logger.dir(submission, { depth: null });
|
||||
};
|
||||
|
||||
const regenerate = ({ parentMessageId }) => {
|
||||
const messages = getMessages();
|
||||
const parentMessage = messages?.find((element) => element.messageId == parentMessageId);
|
||||
|
||||
if (parentMessage && parentMessage.isCreatedByUser) {
|
||||
ask({ ...parentMessage }, { isRegenerate: true });
|
||||
} else {
|
||||
console.error(
|
||||
'Failed to regenerate the message: parentMessage not found or not created by user.',
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
ask,
|
||||
regenerate,
|
||||
};
|
||||
}
|
||||
182
client/src/hooks/Chat/useChatHelpers.ts
Normal file
182
client/src/hooks/Chat/useChatHelpers.ts
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
import { useCallback, useState } from 'react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { QueryKeys } from 'librechat-data-provider';
|
||||
import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
|
||||
import { useGetMessagesByConvoId } from 'librechat-data-provider/react-query';
|
||||
import type { TMessage } from 'librechat-data-provider';
|
||||
import useChatFunctions from '~/hooks/Chat/useChatFunctions';
|
||||
import { useAuthContext } from '~/hooks/AuthContext';
|
||||
import useNewConvo from '~/hooks/useNewConvo';
|
||||
import store from '~/store';
|
||||
|
||||
// this to be set somewhere else
|
||||
export default function useChatHelpers(index = 0, paramId?: string) {
|
||||
const clearAllSubmissions = store.useClearSubmissionState();
|
||||
const [files, setFiles] = useRecoilState(store.filesByIndex(index));
|
||||
const [filesLoading, setFilesLoading] = useState(false);
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const { isAuthenticated } = useAuthContext();
|
||||
|
||||
const { newConversation } = useNewConvo(index);
|
||||
const { useCreateConversationAtom } = store;
|
||||
const { conversation, setConversation } = useCreateConversationAtom(index);
|
||||
const { conversationId } = conversation ?? {};
|
||||
|
||||
const queryParam = paramId === 'new' ? paramId : conversationId ?? paramId ?? '';
|
||||
|
||||
/* Messages: here simply to fetch, don't export and use `getMessages()` instead */
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { data: _messages } = useGetMessagesByConvoId(conversationId ?? '', {
|
||||
enabled: isAuthenticated,
|
||||
});
|
||||
|
||||
const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
|
||||
const [isSubmitting, setIsSubmitting] = useRecoilState(store.isSubmittingFamily(index));
|
||||
const [latestMessage, setLatestMessage] = useRecoilState(store.latestMessageFamily(index));
|
||||
const setSiblingIdx = useSetRecoilState(
|
||||
store.messagesSiblingIdxFamily(latestMessage?.parentMessageId ?? null),
|
||||
);
|
||||
|
||||
const setMessages = useCallback(
|
||||
(messages: TMessage[]) => {
|
||||
queryClient.setQueryData<TMessage[]>([QueryKeys.messages, queryParam], messages);
|
||||
if (queryParam === 'new') {
|
||||
queryClient.setQueryData<TMessage[]>([QueryKeys.messages, conversationId], messages);
|
||||
}
|
||||
},
|
||||
[queryParam, queryClient, conversationId],
|
||||
);
|
||||
|
||||
const getMessages = useCallback(() => {
|
||||
return queryClient.getQueryData<TMessage[]>([QueryKeys.messages, queryParam]);
|
||||
}, [queryParam, queryClient]);
|
||||
|
||||
/* Conversation */
|
||||
// const setActiveConvos = useSetRecoilState(store.activeConversations);
|
||||
|
||||
// const setConversation = useCallback(
|
||||
// (convoUpdate: TConversation) => {
|
||||
// _setConversation(prev => {
|
||||
// const { conversationId: convoId } = prev ?? { conversationId: null };
|
||||
// const { conversationId: currentId } = convoUpdate;
|
||||
// if (currentId && convoId && convoId !== 'new' && convoId !== currentId) {
|
||||
// // for now, we delete the prev convoId from activeConversations
|
||||
// const newActiveConvos = { [currentId]: true };
|
||||
// setActiveConvos(newActiveConvos);
|
||||
// }
|
||||
// return convoUpdate;
|
||||
// });
|
||||
// },
|
||||
// [_setConversation, setActiveConvos],
|
||||
// );
|
||||
|
||||
const setSubmission = useSetRecoilState(store.submissionByIndex(index));
|
||||
|
||||
const { ask, regenerate } = useChatFunctions({
|
||||
index,
|
||||
files,
|
||||
setFiles,
|
||||
getMessages,
|
||||
setMessages,
|
||||
isSubmitting,
|
||||
conversation,
|
||||
latestMessage,
|
||||
setSubmission,
|
||||
setLatestMessage,
|
||||
});
|
||||
|
||||
const continueGeneration = () => {
|
||||
if (!latestMessage) {
|
||||
console.error('Failed to regenerate the message: latestMessage not found.');
|
||||
return;
|
||||
}
|
||||
|
||||
const messages = getMessages();
|
||||
|
||||
const parentMessage = messages?.find(
|
||||
(element) => element.messageId == latestMessage.parentMessageId,
|
||||
);
|
||||
|
||||
if (parentMessage && parentMessage.isCreatedByUser) {
|
||||
ask({ ...parentMessage }, { isContinued: true, isRegenerate: true, isEdited: true });
|
||||
} else {
|
||||
console.error(
|
||||
'Failed to regenerate the message: parentMessage not found, or not created by user.',
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const stopGenerating = () => clearAllSubmissions();
|
||||
|
||||
const handleStopGenerating = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
stopGenerating();
|
||||
};
|
||||
|
||||
const handleRegenerate = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
const parentMessageId = latestMessage?.parentMessageId;
|
||||
if (!parentMessageId) {
|
||||
console.error('Failed to regenerate the message: parentMessageId not found.');
|
||||
return;
|
||||
}
|
||||
regenerate({ parentMessageId });
|
||||
};
|
||||
|
||||
const handleContinue = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
continueGeneration();
|
||||
setSiblingIdx(0);
|
||||
};
|
||||
|
||||
const [showBingToneSetting, setShowBingToneSetting] = useRecoilState(
|
||||
store.showBingToneSettingFamily(index),
|
||||
);
|
||||
const [showPopover, setShowPopover] = useRecoilState(store.showPopoverFamily(index));
|
||||
const [abortScroll, setAbortScroll] = useRecoilState(store.abortScrollFamily(index));
|
||||
const [preset, setPreset] = useRecoilState(store.presetByIndex(index));
|
||||
const [optionSettings, setOptionSettings] = useRecoilState(store.optionSettingsFamily(index));
|
||||
const [showAgentSettings, setShowAgentSettings] = useRecoilState(
|
||||
store.showAgentSettingsFamily(index),
|
||||
);
|
||||
|
||||
return {
|
||||
newConversation,
|
||||
conversation,
|
||||
setConversation,
|
||||
// getConvos,
|
||||
// setConvos,
|
||||
isSubmitting,
|
||||
setIsSubmitting,
|
||||
getMessages,
|
||||
setMessages,
|
||||
setSiblingIdx,
|
||||
latestMessage,
|
||||
setLatestMessage,
|
||||
resetLatestMessage,
|
||||
ask,
|
||||
index,
|
||||
regenerate,
|
||||
stopGenerating,
|
||||
handleStopGenerating,
|
||||
handleRegenerate,
|
||||
handleContinue,
|
||||
showPopover,
|
||||
setShowPopover,
|
||||
abortScroll,
|
||||
setAbortScroll,
|
||||
showBingToneSetting,
|
||||
setShowBingToneSetting,
|
||||
preset,
|
||||
setPreset,
|
||||
optionSettings,
|
||||
setOptionSettings,
|
||||
showAgentSettings,
|
||||
setShowAgentSettings,
|
||||
files,
|
||||
setFiles,
|
||||
filesLoading,
|
||||
setFilesLoading,
|
||||
};
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ export { default as usePresets } from './usePresets';
|
|||
export { default as useGetSender } from './useGetSender';
|
||||
export { default as useDefaultConvo } from './useDefaultConvo';
|
||||
export { default as useConversation } from './useConversation';
|
||||
export { default as useGenerateConvo } from './useGenerateConvo';
|
||||
export { default as useConversations } from './useConversations';
|
||||
export { default as useDebouncedInput } from './useDebouncedInput';
|
||||
export { default as useNavigateToConvo } from './useNavigateToConvo';
|
||||
|
|
|
|||
147
client/src/hooks/Conversations/useGenerateConvo.ts
Normal file
147
client/src/hooks/Conversations/useGenerateConvo.ts
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
import { useRecoilValue } from 'recoil';
|
||||
import { useCallback, useRef, useEffect } from 'react';
|
||||
import { LocalStorageKeys, isAssistantsEndpoint } from 'librechat-data-provider';
|
||||
import { useGetModelsQuery, useGetEndpointsQuery } from 'librechat-data-provider/react-query';
|
||||
import type {
|
||||
TPreset,
|
||||
TModelsConfig,
|
||||
TConversation,
|
||||
TEndpointsConfig,
|
||||
} from 'librechat-data-provider';
|
||||
import type { SetterOrUpdater } from 'recoil';
|
||||
import type { AssistantListItem } from '~/common';
|
||||
import { getEndpointField, buildDefaultConvo, getDefaultEndpoint } from '~/utils';
|
||||
import useAssistantListMap from '~/hooks/Assistants/useAssistantListMap';
|
||||
import { mainTextareaId } from '~/common';
|
||||
import store from '~/store';
|
||||
|
||||
const useGenerateConvo = ({
|
||||
index = 0,
|
||||
rootIndex,
|
||||
setConversation,
|
||||
}: {
|
||||
index?: number;
|
||||
rootIndex: number;
|
||||
setConversation?: SetterOrUpdater<TConversation | null>;
|
||||
}) => {
|
||||
const modelsQuery = useGetModelsQuery();
|
||||
const assistantsListMap = useAssistantListMap();
|
||||
const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
|
||||
|
||||
const timeoutIdRef = useRef<NodeJS.Timeout>();
|
||||
const rootConvo = useRecoilValue(store.conversationByKeySelector(rootIndex));
|
||||
|
||||
useEffect(() => {
|
||||
if (rootConvo?.conversationId && setConversation) {
|
||||
setConversation((prevState) => {
|
||||
if (!prevState) {
|
||||
return prevState;
|
||||
}
|
||||
const update = {
|
||||
...prevState,
|
||||
conversationId: rootConvo.conversationId,
|
||||
} as TConversation;
|
||||
|
||||
return update;
|
||||
});
|
||||
}
|
||||
}, [rootConvo?.conversationId, setConversation]);
|
||||
|
||||
const generateConversation = useCallback(
|
||||
({
|
||||
template = {},
|
||||
preset,
|
||||
modelsData,
|
||||
}: {
|
||||
template?: Partial<TConversation>;
|
||||
preset?: Partial<TPreset>;
|
||||
modelsData?: TModelsConfig;
|
||||
} = {}) => {
|
||||
let conversation = {
|
||||
conversationId: 'new',
|
||||
title: 'New Chat',
|
||||
endpoint: null,
|
||||
...template,
|
||||
createdAt: '',
|
||||
updatedAt: '',
|
||||
};
|
||||
|
||||
if (rootConvo?.conversationId) {
|
||||
conversation.conversationId = rootConvo.conversationId;
|
||||
}
|
||||
|
||||
const modelsConfig = modelsData ?? modelsQuery.data;
|
||||
|
||||
const defaultEndpoint = getDefaultEndpoint({
|
||||
convoSetup: preset ?? conversation,
|
||||
endpointsConfig,
|
||||
});
|
||||
|
||||
const endpointType = getEndpointField(endpointsConfig, defaultEndpoint, 'type');
|
||||
if (!conversation.endpointType && endpointType) {
|
||||
conversation.endpointType = endpointType;
|
||||
} else if (conversation.endpointType && !endpointType) {
|
||||
conversation.endpointType = undefined;
|
||||
}
|
||||
|
||||
const isAssistantEndpoint = isAssistantsEndpoint(defaultEndpoint);
|
||||
const assistants: AssistantListItem[] = assistantsListMap[defaultEndpoint] ?? [];
|
||||
|
||||
if (
|
||||
conversation.assistant_id &&
|
||||
!assistantsListMap[defaultEndpoint]?.[conversation.assistant_id]
|
||||
) {
|
||||
conversation.assistant_id = undefined;
|
||||
}
|
||||
|
||||
if (!conversation.assistant_id && isAssistantEndpoint) {
|
||||
conversation.assistant_id =
|
||||
localStorage.getItem(`${LocalStorageKeys.ASST_ID_PREFIX}${index}${defaultEndpoint}`) ??
|
||||
assistants[0]?.id;
|
||||
}
|
||||
|
||||
if (
|
||||
conversation.assistant_id &&
|
||||
isAssistantEndpoint &&
|
||||
conversation.conversationId === 'new'
|
||||
) {
|
||||
const assistant = assistants.find((asst) => asst.id === conversation.assistant_id);
|
||||
conversation.model = assistant?.model;
|
||||
}
|
||||
|
||||
if (conversation.assistant_id && !isAssistantEndpoint) {
|
||||
conversation.assistant_id = undefined;
|
||||
}
|
||||
|
||||
const models = modelsConfig?.[defaultEndpoint] ?? [];
|
||||
conversation = buildDefaultConvo({
|
||||
conversation,
|
||||
lastConversationSetup: preset as TConversation,
|
||||
endpoint: defaultEndpoint,
|
||||
models,
|
||||
});
|
||||
|
||||
if (preset?.title) {
|
||||
conversation.title = preset.title;
|
||||
}
|
||||
|
||||
if (setConversation) {
|
||||
setConversation(conversation);
|
||||
}
|
||||
|
||||
clearTimeout(timeoutIdRef.current);
|
||||
timeoutIdRef.current = setTimeout(() => {
|
||||
const textarea = document.getElementById(mainTextareaId);
|
||||
if (textarea) {
|
||||
textarea.focus();
|
||||
}
|
||||
}, 150);
|
||||
return conversation;
|
||||
},
|
||||
[assistantsListMap, endpointsConfig, index, modelsQuery.data, rootConvo, setConversation],
|
||||
);
|
||||
|
||||
return { generateConversation };
|
||||
};
|
||||
|
||||
export default useGenerateConvo;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { useSetRecoilState } from 'recoil';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useSetRecoilState, useResetRecoilState } from 'recoil';
|
||||
import { QueryKeys, EModelEndpoint, LocalStorageKeys } from 'librechat-data-provider';
|
||||
import type { TConversation, TEndpointsConfig, TModelsConfig } from 'librechat-data-provider';
|
||||
import { buildDefaultConvo, getDefaultEndpoint, getEndpointField } from '~/utils';
|
||||
|
|
@ -9,9 +9,10 @@ import store from '~/store';
|
|||
const useNavigateToConvo = (index = 0) => {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { setConversation } = store.useCreateConversationAtom(index);
|
||||
const clearAllConversations = store.useClearConvoState();
|
||||
const clearAllLatestMessages = store.useClearLatestMessages();
|
||||
const setSubmission = useSetRecoilState(store.submissionByIndex(index));
|
||||
const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
|
||||
const { setConversation } = store.useCreateConversationAtom(index);
|
||||
|
||||
const navigateToConvo = (conversation: TConversation, _resetLatestMessage = true) => {
|
||||
if (!conversation) {
|
||||
|
|
@ -20,7 +21,7 @@ const useNavigateToConvo = (index = 0) => {
|
|||
}
|
||||
setSubmission(null);
|
||||
if (_resetLatestMessage) {
|
||||
resetLatestMessage();
|
||||
clearAllLatestMessages();
|
||||
}
|
||||
|
||||
let convo = { ...conversation };
|
||||
|
|
@ -47,6 +48,7 @@ const useNavigateToConvo = (index = 0) => {
|
|||
models,
|
||||
});
|
||||
}
|
||||
clearAllConversations(true);
|
||||
setConversation(convo);
|
||||
navigate(`/c/${convo.conversationId ?? 'new'}`);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import filenamify from 'filenamify';
|
||||
import exportFromJSON from 'export-from-json';
|
||||
import { QueryKeys } from 'librechat-data-provider';
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil';
|
||||
import { QueryKeys, modularEndpoints, isAssistantsEndpoint } from 'librechat-data-provider';
|
||||
import { useCreatePresetMutation, useGetModelsQuery } from 'librechat-data-provider/react-query';
|
||||
import type { TPreset, TEndpointsConfig } from 'librechat-data-provider';
|
||||
import {
|
||||
|
|
@ -11,7 +11,7 @@ import {
|
|||
useDeletePresetMutation,
|
||||
useGetPresetsQuery,
|
||||
} from '~/data-provider';
|
||||
import { cleanupPreset, getEndpointField, removeUnavailableTools } from '~/utils';
|
||||
import { cleanupPreset, removeUnavailableTools, getConvoSwitchLogic } from '~/utils';
|
||||
import useDefaultConvo from '~/hooks/Conversations/useDefaultConvo';
|
||||
import { useChatContext, useToastContext } from '~/Providers';
|
||||
import { useAuthContext } from '~/hooks/AuthContext';
|
||||
|
|
@ -124,8 +124,6 @@ export default function usePresets() {
|
|||
|
||||
const getDefaultConversation = useDefaultConvo();
|
||||
|
||||
const { endpoint } = conversation ?? {};
|
||||
|
||||
const importPreset = (jsonPreset: TPreset) => {
|
||||
createPresetMutation.mutate(
|
||||
{ ...jsonPreset },
|
||||
|
|
@ -171,34 +169,38 @@ export default function usePresets() {
|
|||
|
||||
const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);
|
||||
|
||||
const currentEndpointType = getEndpointField(endpointsConfig, endpoint, 'type');
|
||||
const endpointType = getEndpointField(endpointsConfig, newPreset.endpoint, 'type');
|
||||
const isAssistantSwitch =
|
||||
isAssistantsEndpoint(newPreset.endpoint) &&
|
||||
isAssistantsEndpoint(conversation?.endpoint) &&
|
||||
conversation?.endpoint === newPreset.endpoint;
|
||||
const {
|
||||
shouldSwitch,
|
||||
isNewModular,
|
||||
newEndpointType,
|
||||
isCurrentModular,
|
||||
isExistingConversation,
|
||||
} = getConvoSwitchLogic({
|
||||
newEndpoint: newPreset.endpoint ?? '',
|
||||
modularChat,
|
||||
conversation,
|
||||
endpointsConfig,
|
||||
});
|
||||
|
||||
if (
|
||||
(modularEndpoints.has(endpoint ?? '') ||
|
||||
modularEndpoints.has(currentEndpointType ?? '') ||
|
||||
isAssistantSwitch) &&
|
||||
(modularEndpoints.has(newPreset?.endpoint ?? '') ||
|
||||
modularEndpoints.has(endpointType ?? '') ||
|
||||
isAssistantSwitch) &&
|
||||
(endpoint === newPreset?.endpoint || modularChat || isAssistantSwitch)
|
||||
) {
|
||||
const isModular = isCurrentModular && isNewModular && shouldSwitch;
|
||||
if (isExistingConversation && isModular) {
|
||||
const currentConvo = getDefaultConversation({
|
||||
/* target endpointType is necessary to avoid endpoint mixing */
|
||||
conversation: { ...(conversation ?? {}), endpointType },
|
||||
preset: { ...newPreset, endpointType },
|
||||
conversation: { ...(conversation ?? {}), endpointType: newEndpointType },
|
||||
preset: { ...newPreset, endpointType: newEndpointType },
|
||||
});
|
||||
|
||||
/* We don't reset the latest message, only when changing settings mid-converstion */
|
||||
newConversation({ template: currentConvo, preset: currentConvo, keepLatestMessage: true });
|
||||
newConversation({
|
||||
template: currentConvo,
|
||||
preset: currentConvo,
|
||||
keepLatestMessage: true,
|
||||
keepAddedConvos: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
newConversation({ preset: newPreset });
|
||||
newConversation({ preset: newPreset, keepAddedConvos: isModular });
|
||||
};
|
||||
|
||||
const onChangePreset = (preset: TPreset) => {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
export * from './useAutoSave';
|
||||
export { default as useUserKey } from './useUserKey';
|
||||
export { default as useDebounce } from './useDebounce';
|
||||
export { default as useTextarea } from './useTextarea';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
import { useCallback, useMemo } from 'react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import store from '~/store';
|
||||
import type { SetterOrUpdater } from 'recoil';
|
||||
|
||||
/** Event Keys that shouldn't trigger a command */
|
||||
const invalidKeys = {
|
||||
Escape: true,
|
||||
Backspace: true,
|
||||
Enter: true,
|
||||
};
|
||||
|
||||
/**
|
||||
* Utility function to determine if a command should trigger.
|
||||
|
|
@ -23,10 +29,6 @@ const shouldTriggerCommand = (
|
|||
const isPrecededBySpace = textAreaRef.current?.value.charAt(startPos - 2) === ' ';
|
||||
|
||||
const shouldTrigger = isAtStart || isPrecededBySpace;
|
||||
if (shouldTrigger) {
|
||||
// Blurring helps prevent the command from firing twice.
|
||||
textAreaRef.current.blur();
|
||||
}
|
||||
return shouldTrigger;
|
||||
};
|
||||
|
||||
|
|
@ -34,33 +36,32 @@ const shouldTriggerCommand = (
|
|||
* Custom hook for handling key up events with command triggers.
|
||||
*/
|
||||
const useHandleKeyUp = ({
|
||||
index,
|
||||
textAreaRef,
|
||||
setShowPlusPopover,
|
||||
setShowMentionPopover,
|
||||
}: {
|
||||
index: number;
|
||||
textAreaRef: React.RefObject<HTMLTextAreaElement>;
|
||||
setShowPlusPopover: SetterOrUpdater<boolean>;
|
||||
setShowMentionPopover: SetterOrUpdater<boolean>;
|
||||
}) => {
|
||||
const setShowMentionPopover = useSetRecoilState(store.showMentionPopoverFamily(index));
|
||||
|
||||
const handleAtCommand = useCallback(() => {
|
||||
if (shouldTriggerCommand(textAreaRef, '@')) {
|
||||
setShowMentionPopover(true);
|
||||
}
|
||||
}, [textAreaRef, setShowMentionPopover]);
|
||||
|
||||
// const handlePlusCommand = useCallback(() => {
|
||||
// if (shouldTriggerCommand(textAreaRef, '+')) {
|
||||
// console.log('+ command triggered');
|
||||
// }
|
||||
// }, [textAreaRef]);
|
||||
const handlePlusCommand = useCallback(() => {
|
||||
if (shouldTriggerCommand(textAreaRef, '+')) {
|
||||
setShowPlusPopover(true);
|
||||
}
|
||||
}, [textAreaRef, setShowPlusPopover]);
|
||||
|
||||
const commandHandlers = useMemo(
|
||||
() => ({
|
||||
'@': handleAtCommand,
|
||||
// '+': handlePlusCommand,
|
||||
'+': handlePlusCommand,
|
||||
}),
|
||||
[handleAtCommand],
|
||||
// [handleAtCommand, handlePlusCommand],
|
||||
[handleAtCommand, handlePlusCommand],
|
||||
);
|
||||
|
||||
/**
|
||||
|
|
@ -73,7 +74,7 @@ const useHandleKeyUp = ({
|
|||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
if (invalidKeys[event.key]) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,12 @@ import {
|
|||
useGetStartupConfig,
|
||||
useGetEndpointsQuery,
|
||||
} from 'librechat-data-provider/react-query';
|
||||
import { getConfigDefaults, EModelEndpoint, alternateName } from 'librechat-data-provider';
|
||||
import {
|
||||
getConfigDefaults,
|
||||
EModelEndpoint,
|
||||
alternateName,
|
||||
isAssistantsEndpoint,
|
||||
} from 'librechat-data-provider';
|
||||
import type { AssistantsEndpoint, TAssistantsMap, TEndpointsConfig } from 'librechat-data-provider';
|
||||
import type { MentionOption } from '~/common';
|
||||
import useAssistantListMap from '~/hooks/Assistants/useAssistantListMap';
|
||||
|
|
@ -39,7 +44,13 @@ const assistantMapFn =
|
|||
}),
|
||||
});
|
||||
|
||||
export default function useMentions({ assistantMap }: { assistantMap: TAssistantsMap }) {
|
||||
export default function useMentions({
|
||||
assistantMap,
|
||||
includeAssistants,
|
||||
}: {
|
||||
assistantMap: TAssistantsMap;
|
||||
includeAssistants: boolean;
|
||||
}) {
|
||||
const { data: presets } = useGetPresetsQuery();
|
||||
const { data: modelsConfig } = useGetModelsQuery();
|
||||
const { data: startupConfig } = useGetStartupConfig();
|
||||
|
|
@ -85,6 +96,10 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
|
|||
);
|
||||
|
||||
const options: MentionOption[] = useMemo(() => {
|
||||
let validEndpoints = endpoints;
|
||||
if (!includeAssistants) {
|
||||
validEndpoints = endpoints.filter((endpoint) => !isAssistantsEndpoint(endpoint));
|
||||
}
|
||||
const mentions = [
|
||||
...(modelSpecs?.length > 0 ? modelSpecs : []).map((modelSpec) => ({
|
||||
value: modelSpec.name,
|
||||
|
|
@ -101,7 +116,7 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
|
|||
}),
|
||||
type: 'modelSpec' as const,
|
||||
})),
|
||||
...(interfaceConfig.endpointsMenu ? endpoints : []).map((endpoint) => ({
|
||||
...(interfaceConfig.endpointsMenu ? validEndpoints : []).map((endpoint) => ({
|
||||
value: endpoint,
|
||||
label: alternateName[endpoint] ?? endpoint ?? '',
|
||||
type: 'endpoint' as const,
|
||||
|
|
@ -112,10 +127,10 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
|
|||
size: 20,
|
||||
}),
|
||||
})),
|
||||
...(endpointsConfig?.[EModelEndpoint.assistants]
|
||||
...(endpointsConfig?.[EModelEndpoint.assistants] && includeAssistants
|
||||
? assistantListMap[EModelEndpoint.assistants] || []
|
||||
: []),
|
||||
...(endpointsConfig?.[EModelEndpoint.azureAssistants]
|
||||
...(endpointsConfig?.[EModelEndpoint.azureAssistants] && includeAssistants
|
||||
? assistantListMap[EModelEndpoint.azureAssistants] || []
|
||||
: []),
|
||||
...((interfaceConfig.presets ? presets : [])?.map((preset, index) => ({
|
||||
|
|
@ -142,6 +157,7 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
|
|||
assistantMap,
|
||||
endpointsConfig,
|
||||
assistantListMap,
|
||||
includeAssistants,
|
||||
interfaceConfig.presets,
|
||||
interfaceConfig.endpointsMenu,
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -8,25 +8,26 @@ import type {
|
|||
TAssistantsMap,
|
||||
TEndpointsConfig,
|
||||
} from 'librechat-data-provider';
|
||||
import type { MentionOption } from '~/common';
|
||||
import type { MentionOption, ConvoGenerator } from '~/common';
|
||||
import { getConvoSwitchLogic, getModelSpecIconURL, removeUnavailableTools } from '~/utils';
|
||||
import { useDefaultConvo, useNewConvo } from '~/hooks';
|
||||
import { useChatContext } from '~/Providers';
|
||||
import { useDefaultConvo } from '~/hooks';
|
||||
import store from '~/store';
|
||||
|
||||
export default function useSelectMention({
|
||||
presets,
|
||||
modelSpecs,
|
||||
endpointsConfig,
|
||||
assistantMap,
|
||||
endpointsConfig,
|
||||
newConversation,
|
||||
}: {
|
||||
presets?: TPreset[];
|
||||
modelSpecs: TModelSpec[];
|
||||
endpointsConfig: TEndpointsConfig;
|
||||
assistantMap: TAssistantsMap;
|
||||
newConversation: ConvoGenerator;
|
||||
endpointsConfig: TEndpointsConfig;
|
||||
}) {
|
||||
const { conversation } = useChatContext();
|
||||
const { newConversation } = useNewConvo();
|
||||
const getDefaultConversation = useDefaultConvo();
|
||||
const modularChat = useRecoilValue(store.modularChat);
|
||||
const availableTools = useRecoilValue(store.availableTools);
|
||||
|
|
@ -45,12 +46,12 @@ export default function useSelectMention({
|
|||
}
|
||||
|
||||
const {
|
||||
template,
|
||||
shouldSwitch,
|
||||
isNewModular,
|
||||
newEndpointType,
|
||||
isCurrentModular,
|
||||
isExistingConversation,
|
||||
newEndpointType,
|
||||
template,
|
||||
} = getConvoSwitchLogic({
|
||||
newEndpoint,
|
||||
modularChat,
|
||||
|
|
@ -58,7 +59,8 @@ export default function useSelectMention({
|
|||
endpointsConfig,
|
||||
});
|
||||
|
||||
if (isExistingConversation && isCurrentModular && isNewModular && shouldSwitch) {
|
||||
const isModular = isCurrentModular && isNewModular && shouldSwitch;
|
||||
if (isExistingConversation && isModular) {
|
||||
template.endpointType = newEndpointType as EModelEndpoint | undefined;
|
||||
|
||||
const currentConvo = getDefaultConversation({
|
||||
|
|
@ -68,11 +70,20 @@ export default function useSelectMention({
|
|||
});
|
||||
|
||||
/* We don't reset the latest message, only when changing settings mid-converstion */
|
||||
newConversation({ template: currentConvo, preset, keepLatestMessage: true });
|
||||
newConversation({
|
||||
template: currentConvo,
|
||||
preset,
|
||||
keepLatestMessage: true,
|
||||
keepAddedConvos: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
newConversation({ template: { ...(template as Partial<TConversation>) }, preset });
|
||||
newConversation({
|
||||
template: { ...(template as Partial<TConversation>) },
|
||||
preset,
|
||||
keepAddedConvos: isModular,
|
||||
});
|
||||
},
|
||||
[conversation, getDefaultConversation, modularChat, newConversation, endpointsConfig],
|
||||
);
|
||||
|
|
@ -142,12 +153,12 @@ export default function useSelectMention({
|
|||
const newEndpoint = newPreset.endpoint ?? '';
|
||||
|
||||
const {
|
||||
template,
|
||||
shouldSwitch,
|
||||
isNewModular,
|
||||
newEndpointType,
|
||||
isCurrentModular,
|
||||
isExistingConversation,
|
||||
newEndpointType,
|
||||
template,
|
||||
} = getConvoSwitchLogic({
|
||||
newEndpoint,
|
||||
modularChat,
|
||||
|
|
@ -155,7 +166,8 @@ export default function useSelectMention({
|
|||
endpointsConfig,
|
||||
});
|
||||
|
||||
if (isExistingConversation && isCurrentModular && isNewModular && shouldSwitch) {
|
||||
const isModular = isCurrentModular && isNewModular && shouldSwitch;
|
||||
if (isExistingConversation && isModular) {
|
||||
template.endpointType = newEndpointType as EModelEndpoint | undefined;
|
||||
|
||||
const currentConvo = getDefaultConversation({
|
||||
|
|
@ -165,19 +177,24 @@ export default function useSelectMention({
|
|||
});
|
||||
|
||||
/* We don't reset the latest message, only when changing settings mid-converstion */
|
||||
newConversation({ template: currentConvo, preset: newPreset, keepLatestMessage: true });
|
||||
newConversation({
|
||||
template: currentConvo,
|
||||
preset: newPreset,
|
||||
keepLatestMessage: true,
|
||||
keepAddedConvos: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
newConversation({ preset: newPreset });
|
||||
newConversation({ preset: newPreset, keepAddedConvos: true });
|
||||
},
|
||||
[
|
||||
availableTools,
|
||||
conversation,
|
||||
getDefaultConversation,
|
||||
modularChat,
|
||||
conversation,
|
||||
availableTools,
|
||||
newConversation,
|
||||
endpointsConfig,
|
||||
getDefaultConversation,
|
||||
],
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
export { default as useAvatar } from './useAvatar';
|
||||
export { default as useProgress } from './useProgress';
|
||||
export { default as useSubmitMessage } from './useSubmitMessage';
|
||||
export { default as useMessageActions } from './useMessageActions';
|
||||
export { default as useMessageProcess } from './useMessageProcess';
|
||||
export { default as useMessageHelpers } from './useMessageHelpers';
|
||||
export { default as useCopyToClipboard } from './useCopyToClipboard';
|
||||
export { default as useMessageScrolling } from './useMessageScrolling';
|
||||
|
|
|
|||
|
|
@ -1,50 +1,45 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import { createAvatar } from '@dicebear/core';
|
||||
import { initials } from '@dicebear/collection';
|
||||
import type { TUser } from 'librechat-data-provider';
|
||||
|
||||
const avatarCache: Record<string, string> = {};
|
||||
|
||||
const useAvatar = (user: TUser | undefined) => {
|
||||
const [avatarSrc, setAvatarSrc] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (avatarSrc.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (user?.avatar) {
|
||||
return;
|
||||
}
|
||||
|
||||
return useMemo(() => {
|
||||
if (!user?.username) {
|
||||
return;
|
||||
return '';
|
||||
}
|
||||
|
||||
const generateAvatar = async () => {
|
||||
if (!user) {
|
||||
return;
|
||||
}
|
||||
if (user.avatar) {
|
||||
return user.avatar;
|
||||
}
|
||||
|
||||
const { username } = user;
|
||||
const { username } = user;
|
||||
|
||||
const avatar = createAvatar(initials, {
|
||||
seed: username,
|
||||
fontFamily: ['Verdana'],
|
||||
fontSize: 36,
|
||||
if (avatarCache[username]) {
|
||||
return avatarCache[username];
|
||||
}
|
||||
|
||||
const avatar = createAvatar(initials, {
|
||||
seed: username,
|
||||
fontFamily: ['Verdana'],
|
||||
fontSize: 36,
|
||||
});
|
||||
|
||||
let avatarDataUri = '';
|
||||
avatar
|
||||
.toDataUri()
|
||||
.then((dataUri) => {
|
||||
avatarDataUri = dataUri;
|
||||
avatarCache[username] = dataUri; // Store in cache
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to generate avatar:', error);
|
||||
});
|
||||
|
||||
try {
|
||||
const avatarDataUri = await avatar.toDataUri();
|
||||
setAvatarSrc(avatarDataUri);
|
||||
} catch (error) {
|
||||
console.error('Failed to generate avatar:', error);
|
||||
setAvatarSrc('');
|
||||
}
|
||||
};
|
||||
|
||||
generateAvatar();
|
||||
}, [user, avatarSrc.length]);
|
||||
|
||||
return avatarSrc;
|
||||
return avatarDataUri;
|
||||
}, [user]);
|
||||
};
|
||||
|
||||
export default useAvatar;
|
||||
|
|
|
|||
95
client/src/hooks/Messages/useMessageActions.tsx
Normal file
95
client/src/hooks/Messages/useMessageActions.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { useRecoilValue } from 'recoil';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { isAssistantsEndpoint } from 'librechat-data-provider';
|
||||
import type { TMessageProps } from '~/common';
|
||||
import { useChatContext, useAddedChatContext, useAssistantsMapContext } from '~/Providers';
|
||||
import useCopyToClipboard from './useCopyToClipboard';
|
||||
import { useAuthContext } from '~/hooks/AuthContext';
|
||||
import useLocalize from '~/hooks/useLocalize';
|
||||
import store from '~/store';
|
||||
|
||||
export type TMessageActions = Pick<
|
||||
TMessageProps,
|
||||
'message' | 'currentEditId' | 'setCurrentEditId'
|
||||
> & {
|
||||
isMultiMessage?: boolean;
|
||||
};
|
||||
export default function useMessageActions(props: TMessageActions) {
|
||||
const localize = useLocalize();
|
||||
const { user } = useAuthContext();
|
||||
const UsernameDisplay = useRecoilValue<boolean>(store.UsernameDisplay);
|
||||
const { message, currentEditId, setCurrentEditId, isMultiMessage } = props;
|
||||
|
||||
const {
|
||||
ask,
|
||||
index,
|
||||
regenerate,
|
||||
latestMessage,
|
||||
handleContinue,
|
||||
setLatestMessage,
|
||||
conversation: rootConvo,
|
||||
isSubmitting: isSubmittingRoot,
|
||||
} = useChatContext();
|
||||
const { conversation: addedConvo, isSubmitting: isSubmittingAdditional } = useAddedChatContext();
|
||||
const conversation = useMemo(
|
||||
() => (isMultiMessage ? addedConvo : rootConvo),
|
||||
[isMultiMessage, addedConvo, rootConvo],
|
||||
);
|
||||
const assistantMap = useAssistantsMapContext();
|
||||
|
||||
const { text, content, messageId = null, isCreatedByUser } = message ?? {};
|
||||
const edit = useMemo(() => messageId === currentEditId, [messageId, currentEditId]);
|
||||
|
||||
const enterEdit = useCallback(
|
||||
(cancel?: boolean) => setCurrentEditId && setCurrentEditId(cancel ? -1 : messageId),
|
||||
[messageId, setCurrentEditId],
|
||||
);
|
||||
|
||||
const assistant = useMemo(
|
||||
() =>
|
||||
isAssistantsEndpoint(conversation?.endpoint) &&
|
||||
assistantMap?.[conversation?.endpoint ?? '']?.[message?.model ?? ''],
|
||||
[assistantMap, conversation?.endpoint, message?.model],
|
||||
);
|
||||
|
||||
const isSubmitting = useMemo(
|
||||
() => (isMultiMessage ? isSubmittingAdditional : isSubmittingRoot),
|
||||
[isMultiMessage, isSubmittingAdditional, isSubmittingRoot],
|
||||
);
|
||||
|
||||
const regenerateMessage = useCallback(() => {
|
||||
if ((isSubmitting && isCreatedByUser) || !message) {
|
||||
return;
|
||||
}
|
||||
|
||||
regenerate(message);
|
||||
}, [isSubmitting, isCreatedByUser, message, regenerate]);
|
||||
|
||||
const copyToClipboard = useCopyToClipboard({ text, content });
|
||||
|
||||
const messageLabel = useMemo(() => {
|
||||
if (message?.isCreatedByUser) {
|
||||
return UsernameDisplay ? user?.name || user?.username : localize('com_user_message');
|
||||
} else if (assistant) {
|
||||
return assistant.name ?? 'Assistant';
|
||||
} else {
|
||||
return message?.sender;
|
||||
}
|
||||
}, [message, assistant, UsernameDisplay, user, localize]);
|
||||
|
||||
return {
|
||||
ask,
|
||||
edit,
|
||||
index,
|
||||
assistant,
|
||||
enterEdit,
|
||||
conversation,
|
||||
messageLabel,
|
||||
isSubmitting,
|
||||
latestMessage,
|
||||
handleContinue,
|
||||
copyToClipboard,
|
||||
setLatestMessage,
|
||||
regenerateMessage,
|
||||
};
|
||||
}
|
||||
88
client/src/hooks/Messages/useMessageProcess.tsx
Normal file
88
client/src/hooks/Messages/useMessageProcess.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import { useRecoilValue } from 'recoil';
|
||||
import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
|
||||
import type { TMessage } from 'librechat-data-provider';
|
||||
import { useChatContext, useAddedChatContext } from '~/Providers';
|
||||
import { getLatestText, getLengthAndFirstFiveChars } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
export default function useMessageProcess({ message }: { message?: TMessage | null }) {
|
||||
const latestText = useRef<string | number>('');
|
||||
const hasNoChildren = useMemo(() => !message?.children?.length, [message]);
|
||||
const [siblingMessage, setSiblingMessage] = useState<TMessage | null>(null);
|
||||
|
||||
const {
|
||||
index,
|
||||
conversation,
|
||||
latestMessage,
|
||||
setAbortScroll,
|
||||
setLatestMessage,
|
||||
isSubmitting: isSubmittingRoot,
|
||||
} = useChatContext();
|
||||
const { isSubmitting: isSubmittingAdditional } = useAddedChatContext();
|
||||
const latestMultiMessage = useRecoilValue(store.latestMessageFamily(index + 1));
|
||||
const isSubmittingFamily = useMemo(
|
||||
() => isSubmittingRoot || isSubmittingAdditional,
|
||||
[isSubmittingRoot, isSubmittingAdditional],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (conversation?.conversationId === 'new') {
|
||||
return;
|
||||
}
|
||||
if (!message) {
|
||||
return;
|
||||
}
|
||||
if (!hasNoChildren) {
|
||||
return;
|
||||
}
|
||||
|
||||
const text = getLatestText(message);
|
||||
const textKey = `${message?.messageId ?? ''}${getLengthAndFirstFiveChars(text)}`;
|
||||
|
||||
if (textKey === latestText.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
latestText.current = textKey;
|
||||
setLatestMessage({ ...message });
|
||||
}, [hasNoChildren, message, setLatestMessage, conversation?.conversationId]);
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
if (isSubmittingFamily) {
|
||||
setAbortScroll(true);
|
||||
} else {
|
||||
setAbortScroll(false);
|
||||
}
|
||||
}, [isSubmittingFamily, setAbortScroll]);
|
||||
|
||||
const showSibling = useMemo(
|
||||
() =>
|
||||
(hasNoChildren && latestMultiMessage && !latestMultiMessage?.children?.length) ||
|
||||
siblingMessage,
|
||||
[hasNoChildren, latestMultiMessage, siblingMessage],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
hasNoChildren &&
|
||||
latestMultiMessage &&
|
||||
latestMultiMessage.conversationId === message?.conversationId
|
||||
) {
|
||||
const newSibling = Object.assign({}, latestMultiMessage, {
|
||||
parentMessageId: message?.parentMessageId,
|
||||
depth: message?.depth,
|
||||
});
|
||||
setSiblingMessage(newSibling);
|
||||
}
|
||||
}, [hasNoChildren, latestMultiMessage, message, setSiblingMessage, latestMessage]);
|
||||
|
||||
return {
|
||||
showSibling,
|
||||
handleScroll,
|
||||
conversation,
|
||||
siblingMessage,
|
||||
setSiblingMessage,
|
||||
isSubmittingFamily,
|
||||
latestMultiMessage,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,15 +1,27 @@
|
|||
import { v4 } from 'uuid';
|
||||
import { useCallback } from 'react';
|
||||
import { Constants } from 'librechat-data-provider';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import { useChatContext, useChatFormContext } from '~/Providers';
|
||||
import { useChatContext, useChatFormContext, useAddedChatContext } from '~/Providers';
|
||||
import { useAuthContext } from '~/hooks/AuthContext';
|
||||
import { replaceSpecialVars } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
const appendIndex = (index: number, value?: string) => {
|
||||
if (!value) {
|
||||
return value;
|
||||
}
|
||||
return `${value}${Constants.COMMON_DIVIDER}${index}`;
|
||||
};
|
||||
|
||||
export default function useSubmitMessage(helpers?: { clearDraft?: () => void }) {
|
||||
const { user } = useAuthContext();
|
||||
const methods = useChatFormContext();
|
||||
const { ask, index } = useChatContext();
|
||||
const { ask, index, getMessages, setMessages, latestMessage } = useChatContext();
|
||||
const { addedIndex, ask: askAdditional, conversation: addedConvo } = useAddedChatContext();
|
||||
|
||||
const autoSendPrompts = useRecoilValue(store.autoSendPrompts);
|
||||
const activeConvos = useRecoilValue(store.allConversationsSelector);
|
||||
const setActivePrompt = useSetRecoilState(store.activePromptByIndex(index));
|
||||
|
||||
const submitMessage = useCallback(
|
||||
|
|
@ -17,11 +29,52 @@ export default function useSubmitMessage(helpers?: { clearDraft?: () => void })
|
|||
if (!data) {
|
||||
return console.warn('No data provided to submitMessage');
|
||||
}
|
||||
ask({ text: data.text });
|
||||
const rootMessages = getMessages();
|
||||
const isLatestInRootMessages = rootMessages?.some(
|
||||
(message) => message?.messageId === latestMessage?.messageId,
|
||||
);
|
||||
if (!isLatestInRootMessages && latestMessage) {
|
||||
setMessages([...(rootMessages || []), latestMessage]);
|
||||
}
|
||||
|
||||
const hasAdded = addedIndex && activeConvos[addedIndex] && addedConvo;
|
||||
const isNewMultiConvo =
|
||||
hasAdded &&
|
||||
activeConvos.every((convoId) => convoId === Constants.NEW_CONVO) &&
|
||||
!rootMessages?.length;
|
||||
const overrideConvoId = isNewMultiConvo ? v4() : undefined;
|
||||
const overrideUserMessageId = hasAdded ? v4() : undefined;
|
||||
const rootIndex = addedIndex - 1;
|
||||
ask({
|
||||
text: data.text,
|
||||
overrideConvoId: appendIndex(rootIndex, overrideConvoId),
|
||||
overrideUserMessageId: appendIndex(rootIndex, overrideUserMessageId),
|
||||
});
|
||||
if (hasAdded) {
|
||||
askAdditional(
|
||||
{
|
||||
text: data.text,
|
||||
overrideConvoId: appendIndex(addedIndex, overrideConvoId),
|
||||
overrideUserMessageId: appendIndex(addedIndex, overrideUserMessageId),
|
||||
},
|
||||
{ overrideMessages: rootMessages },
|
||||
);
|
||||
}
|
||||
methods.reset();
|
||||
helpers?.clearDraft && helpers.clearDraft();
|
||||
},
|
||||
[ask, methods, helpers],
|
||||
[
|
||||
ask,
|
||||
methods,
|
||||
helpers,
|
||||
addedIndex,
|
||||
addedConvo,
|
||||
setMessages,
|
||||
getMessages,
|
||||
activeConvos,
|
||||
askAdditional,
|
||||
latestMessage,
|
||||
],
|
||||
);
|
||||
|
||||
const submitPrompt = useCallback(
|
||||
|
|
|
|||
544
client/src/hooks/SSE/useEventHandlers.ts
Normal file
544
client/src/hooks/SSE/useEventHandlers.ts
Normal file
|
|
@ -0,0 +1,544 @@
|
|||
import { v4 } from 'uuid';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useCallback } from 'react';
|
||||
import {
|
||||
QueryKeys,
|
||||
Constants,
|
||||
EndpointURLs,
|
||||
tPresetSchema,
|
||||
tMessageSchema,
|
||||
tConvoUpdateSchema,
|
||||
} from 'librechat-data-provider';
|
||||
import type {
|
||||
TMessage,
|
||||
TConversation,
|
||||
TSubmission,
|
||||
ConversationData,
|
||||
} from 'librechat-data-provider';
|
||||
import type { SetterOrUpdater, Resetter } from 'recoil';
|
||||
import type { TResData, ConvoGenerator } from '~/common';
|
||||
import {
|
||||
addConversation,
|
||||
deleteConversation,
|
||||
updateConversation,
|
||||
getConversationById,
|
||||
} from '~/utils';
|
||||
import useContentHandler from '~/hooks/SSE/useContentHandler';
|
||||
import type { TGenTitleMutation } from '~/data-provider';
|
||||
import { useAuthContext } from '~/hooks/AuthContext';
|
||||
|
||||
type TSyncData = {
|
||||
sync: boolean;
|
||||
thread_id: string;
|
||||
messages?: TMessage[];
|
||||
requestMessage: TMessage;
|
||||
responseMessage: TMessage;
|
||||
conversationId: string;
|
||||
};
|
||||
|
||||
export type EventHandlerParams = {
|
||||
isAddedRequest?: boolean;
|
||||
genTitle?: TGenTitleMutation;
|
||||
setCompleted: React.Dispatch<React.SetStateAction<Set<unknown>>>;
|
||||
setMessages: (messages: TMessage[]) => void;
|
||||
getMessages: () => TMessage[] | undefined;
|
||||
setIsSubmitting: SetterOrUpdater<boolean>;
|
||||
setConversation?: SetterOrUpdater<TConversation | null>;
|
||||
newConversation?: ConvoGenerator;
|
||||
setShowStopButton: SetterOrUpdater<boolean>;
|
||||
resetLatestMessage?: Resetter;
|
||||
};
|
||||
|
||||
export default function useEventHandlers({
|
||||
genTitle,
|
||||
setMessages,
|
||||
getMessages,
|
||||
setCompleted,
|
||||
isAddedRequest,
|
||||
setConversation,
|
||||
setIsSubmitting,
|
||||
newConversation,
|
||||
setShowStopButton,
|
||||
resetLatestMessage,
|
||||
}: EventHandlerParams) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { conversationId: paramId } = useParams();
|
||||
const { token } = useAuthContext();
|
||||
|
||||
const contentHandler = useContentHandler({ setMessages, getMessages });
|
||||
|
||||
const messageHandler = useCallback(
|
||||
(data: string, submission: TSubmission) => {
|
||||
const {
|
||||
messages,
|
||||
userMessage,
|
||||
plugin,
|
||||
plugins,
|
||||
initialResponse,
|
||||
isRegenerate = false,
|
||||
} = submission;
|
||||
|
||||
if (isRegenerate) {
|
||||
setMessages([
|
||||
...messages,
|
||||
{
|
||||
...initialResponse,
|
||||
text: data,
|
||||
plugin: plugin ?? null,
|
||||
plugins: plugins ?? [],
|
||||
// unfinished: true
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
setMessages([
|
||||
...messages,
|
||||
userMessage,
|
||||
{
|
||||
...initialResponse,
|
||||
text: data,
|
||||
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 (genTitle && isNewConvo && requestMessage?.parentMessageId === Constants.NO_PARENT) {
|
||||
setTimeout(() => {
|
||||
genTitle.mutate({ conversationId: convoUpdate.conversationId as string });
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
if (setConversation && !isAddedRequest) {
|
||||
setConversation((prevState) => {
|
||||
const update = {
|
||||
...prevState,
|
||||
...convoUpdate,
|
||||
};
|
||||
|
||||
return update;
|
||||
});
|
||||
}
|
||||
|
||||
setIsSubmitting(false);
|
||||
},
|
||||
[setMessages, setConversation, genTitle, isAddedRequest, queryClient, setIsSubmitting],
|
||||
);
|
||||
|
||||
const syncHandler = useCallback(
|
||||
(data: TSyncData, submission: TSubmission) => {
|
||||
const { conversationId, thread_id, responseMessage, requestMessage } = data;
|
||||
const { initialResponse, messages: _messages, userMessage } = submission;
|
||||
|
||||
const messages = _messages.filter((msg) => msg.messageId !== userMessage.messageId);
|
||||
|
||||
setMessages([
|
||||
...messages,
|
||||
requestMessage,
|
||||
{
|
||||
...initialResponse,
|
||||
...responseMessage,
|
||||
},
|
||||
]);
|
||||
|
||||
let update = {} as TConversation;
|
||||
if (setConversation && !isAddedRequest) {
|
||||
setConversation((prevState) => {
|
||||
let title = prevState?.title;
|
||||
const parentId = requestMessage.parentMessageId;
|
||||
if (parentId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
|
||||
const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
|
||||
const cachedConvo = getConversationById(convos, conversationId);
|
||||
title = cachedConvo?.title;
|
||||
}
|
||||
|
||||
update = tConvoUpdateSchema.parse({
|
||||
...prevState,
|
||||
conversationId,
|
||||
thread_id,
|
||||
title,
|
||||
messages: [requestMessage.messageId, responseMessage.messageId],
|
||||
}) as TConversation;
|
||||
|
||||
return update;
|
||||
});
|
||||
|
||||
queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
|
||||
if (!convoData) {
|
||||
return convoData;
|
||||
}
|
||||
if (requestMessage.parentMessageId === Constants.NO_PARENT) {
|
||||
return addConversation(convoData, update);
|
||||
} else {
|
||||
return updateConversation(convoData, update);
|
||||
}
|
||||
});
|
||||
} else if (setConversation) {
|
||||
setConversation((prevState) => {
|
||||
update = tConvoUpdateSchema.parse({
|
||||
...prevState,
|
||||
conversationId,
|
||||
thread_id,
|
||||
messages: [requestMessage.messageId, responseMessage.messageId],
|
||||
}) as TConversation;
|
||||
return update;
|
||||
});
|
||||
}
|
||||
|
||||
setShowStopButton(true);
|
||||
if (resetLatestMessage) {
|
||||
resetLatestMessage();
|
||||
}
|
||||
},
|
||||
[
|
||||
setMessages,
|
||||
setConversation,
|
||||
queryClient,
|
||||
isAddedRequest,
|
||||
setShowStopButton,
|
||||
resetLatestMessage,
|
||||
],
|
||||
);
|
||||
|
||||
const createdHandler = useCallback(
|
||||
(data: TResData, submission: TSubmission) => {
|
||||
const { messages, userMessage, isRegenerate = false } = submission;
|
||||
const initialResponse = {
|
||||
...submission.initialResponse,
|
||||
parentMessageId: userMessage?.messageId,
|
||||
messageId: userMessage?.messageId + '_',
|
||||
};
|
||||
if (isRegenerate) {
|
||||
setMessages([...messages, initialResponse]);
|
||||
} else {
|
||||
setMessages([...messages, userMessage, initialResponse]);
|
||||
}
|
||||
|
||||
const { conversationId, parentMessageId } = userMessage;
|
||||
|
||||
let update = {} as TConversation;
|
||||
if (setConversation && !isAddedRequest) {
|
||||
setConversation((prevState) => {
|
||||
let title = prevState?.title;
|
||||
const parentId = isRegenerate ? userMessage?.overrideParentMessageId : parentMessageId;
|
||||
if (parentId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
|
||||
const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
|
||||
const cachedConvo = getConversationById(convos, conversationId);
|
||||
title = cachedConvo?.title;
|
||||
}
|
||||
|
||||
update = tConvoUpdateSchema.parse({
|
||||
...prevState,
|
||||
conversationId,
|
||||
title,
|
||||
}) as TConversation;
|
||||
|
||||
return update;
|
||||
});
|
||||
|
||||
queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
|
||||
if (!convoData) {
|
||||
return convoData;
|
||||
}
|
||||
if (parentMessageId === Constants.NO_PARENT) {
|
||||
return addConversation(convoData, update);
|
||||
} else {
|
||||
return updateConversation(convoData, update);
|
||||
}
|
||||
});
|
||||
} else if (setConversation) {
|
||||
setConversation((prevState) => {
|
||||
update = tConvoUpdateSchema.parse({
|
||||
...prevState,
|
||||
conversationId,
|
||||
}) as TConversation;
|
||||
return update;
|
||||
});
|
||||
}
|
||||
|
||||
if (resetLatestMessage) {
|
||||
resetLatestMessage();
|
||||
}
|
||||
},
|
||||
[setMessages, setConversation, queryClient, isAddedRequest, resetLatestMessage],
|
||||
);
|
||||
|
||||
const finalHandler = useCallback(
|
||||
(data: TResData, submission: TSubmission) => {
|
||||
const { requestMessage, responseMessage, conversation, runMessages } = data;
|
||||
const { messages, conversation: submissionConvo, isRegenerate = false } = submission;
|
||||
|
||||
setShowStopButton(false);
|
||||
setCompleted((prev) => new Set(prev.add(submission?.initialResponse?.messageId)));
|
||||
|
||||
const currentMessages = getMessages();
|
||||
// Early return if messages are empty; i.e., the user navigated away
|
||||
if (!currentMessages?.length) {
|
||||
return setIsSubmitting(false);
|
||||
}
|
||||
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
|
||||
// refresh title
|
||||
if (
|
||||
genTitle &&
|
||||
isNewConvo &&
|
||||
requestMessage &&
|
||||
requestMessage.parentMessageId === Constants.NO_PARENT
|
||||
) {
|
||||
setTimeout(() => {
|
||||
genTitle.mutate({ conversationId: conversation.conversationId as string });
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
if (setConversation && !isAddedRequest) {
|
||||
setConversation((prevState) => {
|
||||
const update = {
|
||||
...prevState,
|
||||
...conversation,
|
||||
};
|
||||
|
||||
if (prevState?.model && prevState.model !== submissionConvo.model) {
|
||||
update.model = prevState.model;
|
||||
}
|
||||
|
||||
return update;
|
||||
});
|
||||
}
|
||||
|
||||
setIsSubmitting(false);
|
||||
},
|
||||
[
|
||||
genTitle,
|
||||
queryClient,
|
||||
getMessages,
|
||||
setMessages,
|
||||
setCompleted,
|
||||
isAddedRequest,
|
||||
setConversation,
|
||||
setIsSubmitting,
|
||||
setShowStopButton,
|
||||
],
|
||||
);
|
||||
|
||||
const errorHandler = useCallback(
|
||||
({ data, submission }: { data?: TResData; submission: TSubmission }) => {
|
||||
const { messages, userMessage, initialResponse } = submission;
|
||||
|
||||
setCompleted((prev) => new Set(prev.add(initialResponse.messageId)));
|
||||
|
||||
const conversationId = userMessage?.conversationId ?? submission?.conversationId;
|
||||
|
||||
const parseErrorResponse = (data: TResData | Partial<TMessage>) => {
|
||||
const metadata = data['responseMessage'] ?? data;
|
||||
const errorMessage = {
|
||||
...initialResponse,
|
||||
...metadata,
|
||||
error: true,
|
||||
parentMessageId: userMessage?.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, try refreshing the page.',
|
||||
...submission,
|
||||
conversationId: convoId,
|
||||
});
|
||||
setMessages([...messages, userMessage, errorResponse]);
|
||||
if (newConversation) {
|
||||
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, userMessage, errorResponse]);
|
||||
if (newConversation) {
|
||||
newConversation({
|
||||
template: { conversationId: convoId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
}
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
} else if (!data.conversationId) {
|
||||
const errorResponse = parseErrorResponse(data);
|
||||
setMessages([...messages, userMessage, errorResponse]);
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Error:', data);
|
||||
const errorResponse = tMessageSchema.parse({
|
||||
...data,
|
||||
error: true,
|
||||
parentMessageId: userMessage?.messageId,
|
||||
});
|
||||
|
||||
setMessages([...messages, userMessage, errorResponse]);
|
||||
if (data.conversationId && paramId === 'new' && newConversation) {
|
||||
newConversation({
|
||||
template: { conversationId: data.conversationId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
}
|
||||
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
},
|
||||
[setMessages, paramId, setIsSubmitting, setCompleted, newConversation],
|
||||
);
|
||||
|
||||
const abortConversation = useCallback(
|
||||
async (conversationId = '', submission: TSubmission, messages?: TMessage[]) => {
|
||||
const runAbortKey = `${conversationId}:${messages?.[messages.length - 1]?.messageId ?? ''}`;
|
||||
console.log({ conversationId, submission, messages, runAbortKey });
|
||||
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: runAbortKey,
|
||||
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] RESPONSE STATUS: ${response.status}`, 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,
|
||||
};
|
||||
|
||||
const data = {
|
||||
requestMessage: submission.userMessage,
|
||||
responseMessage: responseMessage,
|
||||
conversation: submission.conversation,
|
||||
};
|
||||
console.log(`[aborted] RESPONSE STATUS: ${response.status}`, data);
|
||||
setIsSubmitting(false);
|
||||
} else {
|
||||
throw new Error(
|
||||
'Unexpected response from server; Status: ' +
|
||||
response.status +
|
||||
' ' +
|
||||
response.statusText,
|
||||
);
|
||||
}
|
||||
} 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.userMessage, errorResponse]);
|
||||
if (newConversation) {
|
||||
newConversation({
|
||||
template: { conversationId: convoId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
}
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
},
|
||||
[token, setIsSubmitting, finalHandler, cancelHandler, setMessages, newConversation],
|
||||
);
|
||||
|
||||
return {
|
||||
syncHandler,
|
||||
finalHandler,
|
||||
errorHandler,
|
||||
messageHandler,
|
||||
contentHandler,
|
||||
createdHandler,
|
||||
abortConversation,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,72 +1,44 @@
|
|||
import { v4 } from 'uuid';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
/* @ts-ignore */
|
||||
SSE,
|
||||
QueryKeys,
|
||||
Constants,
|
||||
EndpointURLs,
|
||||
createPayload,
|
||||
tPresetSchema,
|
||||
tMessageSchema,
|
||||
LocalStorageKeys,
|
||||
tConvoUpdateSchema,
|
||||
removeNullishValues,
|
||||
isAssistantsEndpoint,
|
||||
} from 'librechat-data-provider';
|
||||
import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider/react-query';
|
||||
import type {
|
||||
TResPlugin,
|
||||
TMessage,
|
||||
TConversation,
|
||||
TSubmission,
|
||||
ConversationData,
|
||||
} from 'librechat-data-provider';
|
||||
import {
|
||||
addConversation,
|
||||
deleteConversation,
|
||||
updateConversation,
|
||||
getConversationById,
|
||||
} from '~/utils';
|
||||
import type { TSubmission } from 'librechat-data-provider';
|
||||
import type { EventHandlerParams } from './useEventHandlers';
|
||||
import type { TResData } from '~/common';
|
||||
import { useGenTitleMutation } from '~/data-provider';
|
||||
import useContentHandler from './useContentHandler';
|
||||
import { useAuthContext } from '../AuthContext';
|
||||
import useChatHelpers from '../useChatHelpers';
|
||||
import { useAuthContext } from '~/hooks/AuthContext';
|
||||
import useEventHandlers from './useEventHandlers';
|
||||
import store from '~/store';
|
||||
|
||||
type TResData = {
|
||||
plugin?: TResPlugin;
|
||||
final?: boolean;
|
||||
initial?: boolean;
|
||||
previousMessages?: TMessage[];
|
||||
requestMessage: TMessage;
|
||||
responseMessage: TMessage;
|
||||
conversation: TConversation;
|
||||
conversationId?: string;
|
||||
runMessages?: TMessage[];
|
||||
};
|
||||
type ChatHelpers = Pick<
|
||||
EventHandlerParams,
|
||||
| 'setMessages'
|
||||
| 'getMessages'
|
||||
| 'setConversation'
|
||||
| 'setIsSubmitting'
|
||||
| 'newConversation'
|
||||
| 'resetLatestMessage'
|
||||
>;
|
||||
|
||||
type TSyncData = {
|
||||
sync: boolean;
|
||||
thread_id: string;
|
||||
messages?: TMessage[];
|
||||
requestMessage: TMessage;
|
||||
responseMessage: TMessage;
|
||||
conversationId: string;
|
||||
};
|
||||
|
||||
export default function useSSE(submission: TSubmission | null, index = 0) {
|
||||
const queryClient = useQueryClient();
|
||||
export default function useSSE(
|
||||
submission: TSubmission | null,
|
||||
chatHelpers: ChatHelpers,
|
||||
isAddedRequest = false,
|
||||
runIndex = 0,
|
||||
) {
|
||||
const genTitle = useGenTitleMutation();
|
||||
const setActiveRunId = useSetRecoilState(store.activeRunFamily(index));
|
||||
const setActiveRunId = useSetRecoilState(store.activeRunFamily(runIndex));
|
||||
|
||||
const { conversationId: paramId } = useParams();
|
||||
const { token, isAuthenticated } = useAuthContext();
|
||||
const [completed, setCompleted] = useState(new Set());
|
||||
const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(index));
|
||||
const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(runIndex));
|
||||
|
||||
const {
|
||||
setMessages,
|
||||
|
|
@ -75,435 +47,34 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
|
|||
setIsSubmitting,
|
||||
newConversation,
|
||||
resetLatestMessage,
|
||||
} = useChatHelpers(index, paramId);
|
||||
const contentHandler = useContentHandler({ setMessages, getMessages });
|
||||
} = chatHelpers;
|
||||
|
||||
const {
|
||||
syncHandler,
|
||||
finalHandler,
|
||||
errorHandler,
|
||||
messageHandler,
|
||||
contentHandler,
|
||||
createdHandler,
|
||||
abortConversation,
|
||||
} = useEventHandlers({
|
||||
genTitle,
|
||||
setMessages,
|
||||
getMessages,
|
||||
setCompleted,
|
||||
isAddedRequest,
|
||||
setConversation,
|
||||
setIsSubmitting,
|
||||
newConversation,
|
||||
setShowStopButton,
|
||||
resetLatestMessage,
|
||||
});
|
||||
|
||||
const { data: startupConfig } = useGetStartupConfig();
|
||||
const balanceQuery = useGetUserBalance({
|
||||
enabled: !!isAuthenticated && startupConfig?.checkBalance,
|
||||
});
|
||||
|
||||
const messageHandler = useCallback(
|
||||
(data: string, submission: TSubmission) => {
|
||||
const {
|
||||
messages,
|
||||
userMessage,
|
||||
plugin,
|
||||
plugins,
|
||||
initialResponse,
|
||||
isRegenerate = false,
|
||||
} = submission;
|
||||
|
||||
if (isRegenerate) {
|
||||
setMessages([
|
||||
...messages,
|
||||
{
|
||||
...initialResponse,
|
||||
text: data,
|
||||
plugin: plugin ?? null,
|
||||
plugins: plugins ?? [],
|
||||
// unfinished: true
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
setMessages([
|
||||
...messages,
|
||||
userMessage,
|
||||
{
|
||||
...initialResponse,
|
||||
text: data,
|
||||
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,
|
||||
};
|
||||
|
||||
return update;
|
||||
});
|
||||
|
||||
setIsSubmitting(false);
|
||||
},
|
||||
[setMessages, setConversation, genTitle, queryClient, setIsSubmitting],
|
||||
);
|
||||
|
||||
const syncHandler = useCallback(
|
||||
(data: TSyncData, submission: TSubmission) => {
|
||||
const { conversationId, thread_id, responseMessage, requestMessage } = data;
|
||||
const { initialResponse, messages: _messages, userMessage } = submission;
|
||||
|
||||
const messages = _messages.filter((msg) => msg.messageId !== userMessage.messageId);
|
||||
|
||||
setMessages([
|
||||
...messages,
|
||||
requestMessage,
|
||||
{
|
||||
...initialResponse,
|
||||
...responseMessage,
|
||||
},
|
||||
]);
|
||||
|
||||
let update = {} as TConversation;
|
||||
setConversation((prevState) => {
|
||||
let title = prevState?.title;
|
||||
const parentId = requestMessage.parentMessageId;
|
||||
if (parentId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
|
||||
const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
|
||||
const cachedConvo = getConversationById(convos, conversationId);
|
||||
title = cachedConvo?.title;
|
||||
}
|
||||
|
||||
update = tConvoUpdateSchema.parse({
|
||||
...prevState,
|
||||
conversationId,
|
||||
thread_id,
|
||||
title,
|
||||
messages: [requestMessage.messageId, responseMessage.messageId],
|
||||
}) as TConversation;
|
||||
|
||||
return update;
|
||||
});
|
||||
|
||||
queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
|
||||
if (!convoData) {
|
||||
return convoData;
|
||||
}
|
||||
if (requestMessage.parentMessageId === Constants.NO_PARENT) {
|
||||
return addConversation(convoData, update);
|
||||
} else {
|
||||
return updateConversation(convoData, update);
|
||||
}
|
||||
});
|
||||
|
||||
setShowStopButton(true);
|
||||
|
||||
resetLatestMessage();
|
||||
},
|
||||
[setMessages, setConversation, queryClient, setShowStopButton, resetLatestMessage],
|
||||
);
|
||||
|
||||
const createdHandler = useCallback(
|
||||
(data: TResData, submission: TSubmission) => {
|
||||
const { messages, userMessage, isRegenerate = false } = submission;
|
||||
const initialResponse = {
|
||||
...submission.initialResponse,
|
||||
parentMessageId: userMessage?.messageId,
|
||||
messageId: userMessage?.messageId + '_',
|
||||
};
|
||||
if (isRegenerate) {
|
||||
setMessages([...messages, initialResponse]);
|
||||
} else {
|
||||
setMessages([...messages, userMessage, initialResponse]);
|
||||
}
|
||||
|
||||
const { conversationId, parentMessageId } = userMessage;
|
||||
|
||||
let update = {} as TConversation;
|
||||
setConversation((prevState) => {
|
||||
let title = prevState?.title;
|
||||
const parentId = isRegenerate ? userMessage?.overrideParentMessageId : parentMessageId;
|
||||
if (parentId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
|
||||
const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
|
||||
const cachedConvo = getConversationById(convos, conversationId);
|
||||
title = cachedConvo?.title;
|
||||
}
|
||||
|
||||
update = tConvoUpdateSchema.parse({
|
||||
...prevState,
|
||||
conversationId,
|
||||
title,
|
||||
}) as TConversation;
|
||||
|
||||
return update;
|
||||
});
|
||||
|
||||
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();
|
||||
},
|
||||
[setMessages, setConversation, queryClient, resetLatestMessage],
|
||||
);
|
||||
|
||||
const finalHandler = useCallback(
|
||||
(data: TResData, submission: TSubmission) => {
|
||||
const { requestMessage, responseMessage, conversation, runMessages } = data;
|
||||
const { messages, conversation: submissionConvo, isRegenerate = false } = submission;
|
||||
|
||||
setShowStopButton(false);
|
||||
setCompleted((prev) => new Set(prev.add(submission?.initialResponse?.messageId)));
|
||||
|
||||
const currentMessages = getMessages();
|
||||
// Early return if messages are empty; i.e., the user navigated away
|
||||
if (!currentMessages?.length) {
|
||||
return setIsSubmitting(false);
|
||||
}
|
||||
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
|
||||
// refresh title
|
||||
if (isNewConvo && requestMessage && requestMessage.parentMessageId === Constants.NO_PARENT) {
|
||||
setTimeout(() => {
|
||||
genTitle.mutate({ conversationId: conversation.conversationId as string });
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
setConversation((prevState) => {
|
||||
const update = {
|
||||
...prevState,
|
||||
...conversation,
|
||||
};
|
||||
|
||||
if (prevState?.model && prevState.model !== submissionConvo.model) {
|
||||
update.model = prevState.model;
|
||||
}
|
||||
|
||||
return update;
|
||||
});
|
||||
|
||||
setIsSubmitting(false);
|
||||
},
|
||||
[
|
||||
genTitle,
|
||||
queryClient,
|
||||
getMessages,
|
||||
setMessages,
|
||||
setConversation,
|
||||
setIsSubmitting,
|
||||
setShowStopButton,
|
||||
],
|
||||
);
|
||||
|
||||
const errorHandler = useCallback(
|
||||
({ data, submission }: { data?: TResData; submission: TSubmission }) => {
|
||||
const { messages, userMessage, initialResponse } = submission;
|
||||
|
||||
setCompleted((prev) => new Set(prev.add(initialResponse.messageId)));
|
||||
|
||||
const conversationId = userMessage?.conversationId ?? submission?.conversationId;
|
||||
|
||||
const parseErrorResponse = (data: TResData | Partial<TMessage>) => {
|
||||
const metadata = data['responseMessage'] ?? data;
|
||||
const errorMessage = {
|
||||
...initialResponse,
|
||||
...metadata,
|
||||
error: true,
|
||||
parentMessageId: userMessage?.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, try refreshing the page.',
|
||||
...submission,
|
||||
conversationId: convoId,
|
||||
});
|
||||
setMessages([...messages, userMessage, 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, userMessage, errorResponse]);
|
||||
newConversation({
|
||||
template: { conversationId: convoId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
} else if (!data.conversationId) {
|
||||
const errorResponse = parseErrorResponse(data);
|
||||
setMessages([...messages, userMessage, errorResponse]);
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Error:', data);
|
||||
const errorResponse = tMessageSchema.parse({
|
||||
...data,
|
||||
error: true,
|
||||
parentMessageId: userMessage?.messageId,
|
||||
});
|
||||
|
||||
setMessages([...messages, userMessage, errorResponse]);
|
||||
if (data.conversationId && paramId === 'new') {
|
||||
newConversation({
|
||||
template: { conversationId: data.conversationId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
}
|
||||
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
},
|
||||
[setMessages, paramId, setIsSubmitting, newConversation],
|
||||
);
|
||||
|
||||
const abortConversation = useCallback(
|
||||
async (conversationId = '', submission: TSubmission) => {
|
||||
let runAbortKey = '';
|
||||
try {
|
||||
const conversation = (JSON.parse(
|
||||
localStorage.getItem(LocalStorageKeys.LAST_CONVO_SETUP) ?? '',
|
||||
) ?? {}) 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: isAssistantsEndpoint(_endpoint) ? 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);
|
||||
} else {
|
||||
cancelHandler(data, submission);
|
||||
}
|
||||
} else if (response.status === 204) {
|
||||
const responseMessage = {
|
||||
...submission.initialResponse,
|
||||
};
|
||||
|
||||
const data = {
|
||||
requestMessage: submission.userMessage,
|
||||
responseMessage: responseMessage,
|
||||
conversation: submission.conversation,
|
||||
};
|
||||
console.log('aborted', data);
|
||||
} else {
|
||||
throw new Error(
|
||||
'Unexpected response from server; Status: ' +
|
||||
response.status +
|
||||
' ' +
|
||||
response.statusText,
|
||||
);
|
||||
}
|
||||
} 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.userMessage, errorResponse]);
|
||||
newConversation({
|
||||
template: { conversationId: convoId },
|
||||
preset: tPresetSchema.parse(submission?.conversation),
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
},
|
||||
[token, setIsSubmitting, finalHandler, cancelHandler, setMessages, newConversation],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (submission === null || Object.keys(submission).length === 0) {
|
||||
return;
|
||||
|
|
@ -571,16 +142,6 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
|
|||
}
|
||||
};
|
||||
|
||||
// events.onaudio = (e: MessageEvent) => {
|
||||
// const data = JSON.parse(e.data);
|
||||
// console.log('audio', data);
|
||||
// if (data.audio) {
|
||||
// audioSource.addBase64Data(data.audio);
|
||||
// }
|
||||
// };
|
||||
|
||||
// events.onend = () => audioSource.close();
|
||||
|
||||
events.onopen = () => console.log('connection is opened');
|
||||
|
||||
events.oncancel = async () => {
|
||||
|
|
@ -595,9 +156,12 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
|
|||
}
|
||||
|
||||
setCompleted((prev) => new Set(prev.add(streamKey)));
|
||||
const latestMessages = getMessages();
|
||||
const conversationId = latestMessages?.[latestMessages?.length - 1]?.conversationId;
|
||||
return await abortConversation(
|
||||
userMessage?.conversationId ?? submission?.conversationId,
|
||||
conversationId ?? userMessage?.conversationId ?? submission?.conversationId,
|
||||
submission,
|
||||
latestMessages,
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export * from './Assistants';
|
||||
export * from './Chat';
|
||||
export * from './Config';
|
||||
export * from './Conversations';
|
||||
export * from './Nav';
|
||||
|
|
@ -19,11 +20,10 @@ export { default as useTimeout } from './useTimeout';
|
|||
export { default as useNewConvo } from './useNewConvo';
|
||||
export { default as useLocalize } from './useLocalize';
|
||||
export { default as useMediaQuery } from './useMediaQuery';
|
||||
export { default as useChatHelpers } from './useChatHelpers';
|
||||
export { default as useScrollToRef } from './useScrollToRef';
|
||||
export { default as useLocalStorage } from './useLocalStorage';
|
||||
export { default as useDelayedRender } from './useDelayedRender';
|
||||
export { default as useOnClickOutside } from './useOnClickOutside';
|
||||
export { default as useGenerationsByLatest } from './useGenerationsByLatest';
|
||||
export { default as useSpeechToText } from './Input/useSpeechToText';
|
||||
export { default as useTextToSpeech } from './Input/useTextToSpeech';
|
||||
export { default as useGenerationsByLatest } from './useGenerationsByLatest';
|
||||
|
|
|
|||
|
|
@ -1,373 +0,0 @@
|
|||
import { v4 } from 'uuid';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
Constants,
|
||||
QueryKeys,
|
||||
ContentTypes,
|
||||
parseCompactConvo,
|
||||
isAssistantsEndpoint,
|
||||
} from 'librechat-data-provider';
|
||||
import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
|
||||
import { useGetMessagesByConvoId } from 'librechat-data-provider/react-query';
|
||||
import type {
|
||||
TMessage,
|
||||
TSubmission,
|
||||
TEndpointOption,
|
||||
TEndpointsConfig,
|
||||
} from 'librechat-data-provider';
|
||||
import type { TAskFunction } from '~/common';
|
||||
import useSetFilesToDelete from './Files/useSetFilesToDelete';
|
||||
import useGetSender from './Conversations/useGetSender';
|
||||
import { useAuthContext } from './AuthContext';
|
||||
import useUserKey from './Input/useUserKey';
|
||||
import { getEndpointField } from '~/utils';
|
||||
import useNewConvo from './useNewConvo';
|
||||
import store from '~/store';
|
||||
|
||||
// this to be set somewhere else
|
||||
export default function useChatHelpers(index = 0, paramId: string | undefined) {
|
||||
const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(index));
|
||||
const [files, setFiles] = useRecoilState(store.filesByIndex(index));
|
||||
const [filesLoading, setFilesLoading] = useState(false);
|
||||
const setFilesToDelete = useSetFilesToDelete();
|
||||
const getSender = useGetSender();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const { isAuthenticated } = useAuthContext();
|
||||
|
||||
const { newConversation } = useNewConvo(index);
|
||||
const { useCreateConversationAtom } = store;
|
||||
const { conversation, setConversation } = useCreateConversationAtom(index);
|
||||
const { conversationId, endpoint } = conversation ?? {};
|
||||
|
||||
const queryParam = paramId === 'new' ? paramId : conversationId ?? paramId ?? '';
|
||||
|
||||
/* Messages: here simply to fetch, don't export and use `getMessages()` instead */
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { data: _messages } = useGetMessagesByConvoId(conversationId ?? '', {
|
||||
enabled: isAuthenticated,
|
||||
});
|
||||
|
||||
const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
|
||||
const [isSubmitting, setIsSubmitting] = useRecoilState(store.isSubmittingFamily(index));
|
||||
const [latestMessage, setLatestMessage] = useRecoilState(store.latestMessageFamily(index));
|
||||
const setSiblingIdx = useSetRecoilState(
|
||||
store.messagesSiblingIdxFamily(latestMessage?.parentMessageId ?? null),
|
||||
);
|
||||
|
||||
const setMessages = useCallback(
|
||||
(messages: TMessage[]) => {
|
||||
queryClient.setQueryData<TMessage[]>([QueryKeys.messages, queryParam], messages);
|
||||
},
|
||||
// [conversationId, queryClient],
|
||||
[queryParam, queryClient],
|
||||
);
|
||||
|
||||
const getMessages = useCallback(() => {
|
||||
return queryClient.getQueryData<TMessage[]>([QueryKeys.messages, queryParam]);
|
||||
}, [queryParam, queryClient]);
|
||||
|
||||
/* Conversation */
|
||||
// const setActiveConvos = useSetRecoilState(store.activeConversations);
|
||||
|
||||
// const setConversation = useCallback(
|
||||
// (convoUpdate: TConversation) => {
|
||||
// _setConversation(prev => {
|
||||
// const { conversationId: convoId } = prev ?? { conversationId: null };
|
||||
// const { conversationId: currentId } = convoUpdate;
|
||||
// if (currentId && convoId && convoId !== 'new' && convoId !== currentId) {
|
||||
// // for now, we delete the prev convoId from activeConversations
|
||||
// const newActiveConvos = { [currentId]: true };
|
||||
// setActiveConvos(newActiveConvos);
|
||||
// }
|
||||
// return convoUpdate;
|
||||
// });
|
||||
// },
|
||||
// [_setConversation, setActiveConvos],
|
||||
// );
|
||||
const { getExpiry } = useUserKey(endpoint ?? '');
|
||||
const setSubmission = useSetRecoilState(store.submissionByIndex(index));
|
||||
|
||||
const ask: TAskFunction = (
|
||||
{ text, parentMessageId = null, conversationId = null, messageId = null },
|
||||
{
|
||||
editedText = null,
|
||||
editedMessageId = null,
|
||||
resubmitFiles = false,
|
||||
isRegenerate = false,
|
||||
isContinued = false,
|
||||
isEdited = false,
|
||||
} = {},
|
||||
) => {
|
||||
setShowStopButton(false);
|
||||
if (!!isSubmitting || text === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (endpoint === null) {
|
||||
console.error('No endpoint available');
|
||||
return;
|
||||
}
|
||||
|
||||
conversationId = conversationId ?? conversation?.conversationId ?? null;
|
||||
if (conversationId == 'search') {
|
||||
console.error('cannot send any message under search view!');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isContinued && !latestMessage) {
|
||||
console.error('cannot continue AI message without latestMessage!');
|
||||
return;
|
||||
}
|
||||
|
||||
const isEditOrContinue = isEdited || isContinued;
|
||||
|
||||
let currentMessages: TMessage[] | null = getMessages() ?? [];
|
||||
|
||||
// construct the query message
|
||||
// this is not a real messageId, it is used as placeholder before real messageId returned
|
||||
text = text.trim();
|
||||
const fakeMessageId = v4();
|
||||
parentMessageId = parentMessageId || latestMessage?.messageId || Constants.NO_PARENT;
|
||||
|
||||
if (conversationId == 'new') {
|
||||
parentMessageId = Constants.NO_PARENT;
|
||||
currentMessages = [];
|
||||
conversationId = null;
|
||||
}
|
||||
|
||||
const parentMessage = currentMessages?.find(
|
||||
(msg) => msg.messageId === latestMessage?.parentMessageId,
|
||||
);
|
||||
|
||||
let thread_id = parentMessage?.thread_id ?? latestMessage?.thread_id;
|
||||
if (!thread_id) {
|
||||
thread_id = currentMessages.find((message) => message.thread_id)?.thread_id;
|
||||
}
|
||||
|
||||
const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);
|
||||
const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
|
||||
|
||||
// set the endpoint option
|
||||
const convo = parseCompactConvo({
|
||||
endpoint,
|
||||
endpointType,
|
||||
conversation: conversation ?? {},
|
||||
});
|
||||
|
||||
const { modelDisplayLabel } = endpointsConfig?.[endpoint ?? ''] ?? {};
|
||||
const endpointOption = {
|
||||
...convo,
|
||||
endpoint,
|
||||
endpointType,
|
||||
modelDisplayLabel,
|
||||
key: getExpiry(),
|
||||
thread_id,
|
||||
} as TEndpointOption;
|
||||
const responseSender = getSender({ model: conversation?.model, ...endpointOption });
|
||||
|
||||
const currentMsg: TMessage = {
|
||||
text,
|
||||
sender: 'User',
|
||||
isCreatedByUser: true,
|
||||
parentMessageId,
|
||||
conversationId,
|
||||
messageId: isContinued && messageId ? messageId : fakeMessageId,
|
||||
thread_id,
|
||||
error: false,
|
||||
};
|
||||
|
||||
const reuseFiles = (isRegenerate || resubmitFiles) && parentMessage?.files;
|
||||
if (reuseFiles && parentMessage.files?.length) {
|
||||
currentMsg.files = parentMessage.files;
|
||||
setFiles(new Map());
|
||||
setFilesToDelete({});
|
||||
} else if (files.size > 0) {
|
||||
currentMsg.files = Array.from(files.values()).map((file) => ({
|
||||
file_id: file.file_id,
|
||||
filepath: file.filepath,
|
||||
type: file.type || '', // Ensure type is not undefined
|
||||
height: file.height,
|
||||
width: file.width,
|
||||
}));
|
||||
setFiles(new Map());
|
||||
setFilesToDelete({});
|
||||
}
|
||||
|
||||
// construct the placeholder response message
|
||||
const generation = editedText ?? latestMessage?.text ?? '';
|
||||
const responseText = isEditOrContinue ? generation : '';
|
||||
|
||||
const responseMessageId = editedMessageId ?? latestMessage?.messageId ?? null;
|
||||
const initialResponse: TMessage = {
|
||||
sender: responseSender,
|
||||
text: responseText,
|
||||
endpoint: endpoint ?? '',
|
||||
parentMessageId: isRegenerate ? messageId : fakeMessageId,
|
||||
messageId: responseMessageId ?? `${isRegenerate ? messageId : fakeMessageId}_`,
|
||||
thread_id,
|
||||
conversationId,
|
||||
unfinished: false,
|
||||
isCreatedByUser: false,
|
||||
isEdited: isEditOrContinue,
|
||||
iconURL: convo.iconURL,
|
||||
error: false,
|
||||
};
|
||||
|
||||
if (isAssistantsEndpoint(endpoint)) {
|
||||
initialResponse.model = conversation?.assistant_id ?? '';
|
||||
initialResponse.text = '';
|
||||
initialResponse.content = [
|
||||
{
|
||||
type: ContentTypes.TEXT,
|
||||
[ContentTypes.TEXT]: {
|
||||
value: responseText,
|
||||
},
|
||||
},
|
||||
];
|
||||
} else {
|
||||
setShowStopButton(true);
|
||||
}
|
||||
|
||||
if (isContinued) {
|
||||
currentMessages = currentMessages.filter((msg) => msg.messageId !== responseMessageId);
|
||||
}
|
||||
|
||||
const submission: TSubmission = {
|
||||
conversation: {
|
||||
...conversation,
|
||||
conversationId,
|
||||
},
|
||||
endpointOption,
|
||||
userMessage: {
|
||||
...currentMsg,
|
||||
generation,
|
||||
responseMessageId,
|
||||
overrideParentMessageId: isRegenerate ? messageId : null,
|
||||
},
|
||||
messages: currentMessages,
|
||||
isEdited: isEditOrContinue,
|
||||
isContinued,
|
||||
isRegenerate,
|
||||
initialResponse,
|
||||
};
|
||||
|
||||
if (isRegenerate) {
|
||||
setMessages([...submission.messages, initialResponse]);
|
||||
} else {
|
||||
setMessages([...submission.messages, currentMsg, initialResponse]);
|
||||
}
|
||||
setLatestMessage(initialResponse);
|
||||
setSubmission(submission);
|
||||
};
|
||||
|
||||
const regenerate = ({ parentMessageId }) => {
|
||||
const messages = getMessages();
|
||||
const parentMessage = messages?.find((element) => element.messageId == parentMessageId);
|
||||
|
||||
if (parentMessage && parentMessage.isCreatedByUser) {
|
||||
ask({ ...parentMessage }, { isRegenerate: true });
|
||||
} else {
|
||||
console.error(
|
||||
'Failed to regenerate the message: parentMessage not found or not created by user.',
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const continueGeneration = () => {
|
||||
if (!latestMessage) {
|
||||
console.error('Failed to regenerate the message: latestMessage not found.');
|
||||
return;
|
||||
}
|
||||
|
||||
const messages = getMessages();
|
||||
|
||||
const parentMessage = messages?.find(
|
||||
(element) => element.messageId == latestMessage.parentMessageId,
|
||||
);
|
||||
|
||||
if (parentMessage && parentMessage.isCreatedByUser) {
|
||||
ask({ ...parentMessage }, { isContinued: true, isRegenerate: true, isEdited: true });
|
||||
} else {
|
||||
console.error(
|
||||
'Failed to regenerate the message: parentMessage not found, or not created by user.',
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const stopGenerating = () => {
|
||||
setSubmission(null);
|
||||
};
|
||||
|
||||
const handleStopGenerating = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
stopGenerating();
|
||||
};
|
||||
|
||||
const handleRegenerate = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
const parentMessageId = latestMessage?.parentMessageId;
|
||||
if (!parentMessageId) {
|
||||
console.error('Failed to regenerate the message: parentMessageId not found.');
|
||||
return;
|
||||
}
|
||||
regenerate({ parentMessageId });
|
||||
};
|
||||
|
||||
const handleContinue = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
continueGeneration();
|
||||
setSiblingIdx(0);
|
||||
};
|
||||
|
||||
const [showBingToneSetting, setShowBingToneSetting] = useRecoilState(
|
||||
store.showBingToneSettingFamily(index),
|
||||
);
|
||||
const [showPopover, setShowPopover] = useRecoilState(store.showPopoverFamily(index));
|
||||
const [abortScroll, setAbortScroll] = useRecoilState(store.abortScrollFamily(index));
|
||||
const [preset, setPreset] = useRecoilState(store.presetByIndex(index));
|
||||
const [optionSettings, setOptionSettings] = useRecoilState(store.optionSettingsFamily(index));
|
||||
const [showAgentSettings, setShowAgentSettings] = useRecoilState(
|
||||
store.showAgentSettingsFamily(index),
|
||||
);
|
||||
|
||||
return {
|
||||
newConversation,
|
||||
conversation,
|
||||
setConversation,
|
||||
// getConvos,
|
||||
// setConvos,
|
||||
isSubmitting,
|
||||
setIsSubmitting,
|
||||
getMessages,
|
||||
setMessages,
|
||||
setSiblingIdx,
|
||||
latestMessage,
|
||||
setLatestMessage,
|
||||
resetLatestMessage,
|
||||
ask,
|
||||
index,
|
||||
regenerate,
|
||||
stopGenerating,
|
||||
handleStopGenerating,
|
||||
handleRegenerate,
|
||||
handleContinue,
|
||||
showPopover,
|
||||
setShowPopover,
|
||||
abortScroll,
|
||||
setAbortScroll,
|
||||
showBingToneSetting,
|
||||
setShowBingToneSetting,
|
||||
preset,
|
||||
setPreset,
|
||||
optionSettings,
|
||||
setOptionSettings,
|
||||
showAgentSettings,
|
||||
setShowAgentSettings,
|
||||
files,
|
||||
setFiles,
|
||||
filesLoading,
|
||||
setFilesLoading,
|
||||
};
|
||||
}
|
||||
|
|
@ -6,13 +6,7 @@ import {
|
|||
} from 'librechat-data-provider/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { FileSources, LocalStorageKeys, isAssistantsEndpoint } from 'librechat-data-provider';
|
||||
import {
|
||||
useRecoilState,
|
||||
useRecoilValue,
|
||||
useSetRecoilState,
|
||||
useRecoilCallback,
|
||||
useResetRecoilState,
|
||||
} from 'recoil';
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState, useRecoilCallback } from 'recoil';
|
||||
import type {
|
||||
TPreset,
|
||||
TSubmission,
|
||||
|
|
@ -38,12 +32,14 @@ import store from '~/store';
|
|||
const useNewConvo = (index = 0) => {
|
||||
const navigate = useNavigate();
|
||||
const { data: startupConfig } = useGetStartupConfig();
|
||||
const clearAllConversations = store.useClearConvoState();
|
||||
const defaultPreset = useRecoilValue(store.defaultPreset);
|
||||
const clearAllLatestMessages = store.useClearLatestMessages();
|
||||
const { setConversation } = store.useCreateConversationAtom(index);
|
||||
const [files, setFiles] = useRecoilState(store.filesByIndex(index));
|
||||
const setSubmission = useSetRecoilState<TSubmission | null>(store.submissionByIndex(index));
|
||||
const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
|
||||
const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
|
||||
|
||||
const modelsQuery = useGetModelsQuery();
|
||||
const timeoutIdRef = useRef<NodeJS.Timeout>();
|
||||
const assistantsListMap = useAssistantListMap();
|
||||
|
|
@ -67,6 +63,7 @@ const useNewConvo = (index = 0) => {
|
|||
modelsData?: TModelsConfig,
|
||||
buildDefault?: boolean,
|
||||
keepLatestMessage?: boolean,
|
||||
keepAddedConvos?: boolean,
|
||||
) => {
|
||||
const modelsConfig = modelsData ?? modelsQuery.data;
|
||||
const { endpoint = null } = conversation;
|
||||
|
|
@ -139,10 +136,13 @@ const useNewConvo = (index = 0) => {
|
|||
});
|
||||
}
|
||||
|
||||
if (!keepAddedConvos) {
|
||||
clearAllConversations(true);
|
||||
}
|
||||
setConversation(conversation);
|
||||
setSubmission({} as TSubmission);
|
||||
if (!keepLatestMessage) {
|
||||
resetLatestMessage();
|
||||
clearAllLatestMessages();
|
||||
}
|
||||
|
||||
if (conversation.conversationId === 'new' && !modelsData) {
|
||||
|
|
@ -171,12 +171,14 @@ const useNewConvo = (index = 0) => {
|
|||
modelsData,
|
||||
buildDefault = true,
|
||||
keepLatestMessage = false,
|
||||
keepAddedConvos = false,
|
||||
}: {
|
||||
template?: Partial<TConversation>;
|
||||
preset?: Partial<TPreset>;
|
||||
modelsData?: TModelsConfig;
|
||||
buildDefault?: boolean;
|
||||
keepLatestMessage?: boolean;
|
||||
keepAddedConvos?: boolean;
|
||||
} = {}) => {
|
||||
pauseGlobalAudio();
|
||||
|
||||
|
|
@ -217,7 +219,14 @@ const useNewConvo = (index = 0) => {
|
|||
}
|
||||
}
|
||||
|
||||
switchToConversation(conversation, preset, modelsData, buildDefault, keepLatestMessage);
|
||||
switchToConversation(
|
||||
conversation,
|
||||
preset,
|
||||
modelsData,
|
||||
buildDefault,
|
||||
keepLatestMessage,
|
||||
keepAddedConvos,
|
||||
);
|
||||
},
|
||||
[
|
||||
pauseGlobalAudio,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue