🌿 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 2024-06-25 03:02:38 -04:00 committed by GitHub
parent eef894e608
commit 156c52e293
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
72 changed files with 2697 additions and 1326 deletions

View file

@ -1,78 +1,64 @@
import { TFile, TMessage } from 'librechat-data-provider';
type ParentMessage = TMessage & { children: TMessage[]; depth: number };
export default function buildTree({
messages,
fileMap,
}: {
messages: TMessage[] | null;
fileMap?: Record<string, TFile>;
}) {
if (messages === null) {
return null;
}
const messageMap: Record<string, ParentMessage> = {};
const rootMessages: TMessage[] = [];
const childrenCount: Record<string, number> = {};
messages.forEach((message) => {
const parentId = message.parentMessageId ?? '';
childrenCount[parentId] = (childrenCount[parentId] || 0) + 1;
const extendedMessage: ParentMessage = {
...message,
children: [],
depth: 0,
siblingIndex: childrenCount[parentId] - 1,
};
if (message.files && fileMap) {
extendedMessage.files = message.files.map((file) => fileMap[file.file_id ?? ''] ?? file);
}
messageMap[message.messageId] = extendedMessage;
const parentMessage = messageMap[parentId];
if (parentMessage) {
parentMessage.children.push(extendedMessage);
extendedMessage.depth = parentMessage.depth + 1;
} else {
rootMessages.push(extendedMessage);
}
});
return rootMessages;
}
const even =
'w-full border-b border-black/10 dark:border-gray-800/50 text-gray-800 bg-white dark:text-gray-200 group dark:bg-gray-800 hover:bg-gray-200/25 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200';
const odd =
'w-full border-b border-black/10 bg-gray-50 dark:border-gray-800/50 text-gray-800 dark:text-gray-200 group bg-gray-200 dark:bg-gray-700 hover:bg-gray-200/40 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200';
export default function buildTree({
export function groupIntoList({
messages,
fileMap,
groupAll = false,
}: {
}: // fileMap,
{
messages: TMessage[] | null;
fileMap?: Record<string, TFile>;
groupAll?: boolean;
// fileMap?: Record<string, TFile>;
}) {
if (messages === null) {
return null;
}
const messageMap: Record<string, TMessage & { children: TMessage[] }> = {};
const rootMessages: TMessage[] = [];
if (groupAll) {
return messages.map((m, idx) => ({ ...m, bg: idx % 2 === 0 ? even : odd }));
}
if (!groupAll) {
// Traverse the messages array and store each element in messageMap.
messages.forEach((message) => {
messageMap[message.messageId] = { ...message, children: [] };
if (message.files && fileMap) {
messageMap[message.messageId].files = message.files.map(
(file) => fileMap[file.file_id ?? ''] ?? file,
);
}
const parentMessage = messageMap[message.parentMessageId ?? ''];
if (parentMessage) {
parentMessage.children.push(messageMap[message.messageId]);
} else {
rootMessages.push(messageMap[message.messageId]);
}
});
return rootMessages;
}
// // Group all messages into one tree
// let parentId = null;
// messages.forEach((message, i) => {
// messageMap[message.messageId] = { ...message, bg: i % 2 === 0 ? even : odd, children: [] };
// const currentMessage = messageMap[message.messageId];
// const parentMessage = messageMap[parentId];
// if (parentMessage) parentMessage.children.push(currentMessage);
// else rootMessages.push(currentMessage);
// parentId = message.messageId;
// });
// return rootMessages;
// Group all messages by conversation, doesn't look great
// Traverse the messages array and store each element in messageMap.
// rootMessages = {};
// let parents = 0;
// messages.forEach(message => {
// if (message.conversationId in messageMap) {
// messageMap[message.conversationId].children.push(message);
// } else {
// messageMap[message.conversationId] = { ...message, bg: parents % 2 === 0 ? even : odd, children: [] };
// rootMessages.push(messageMap[message.conversationId]);
// parents++;
// }
// });
// // return Object.values(rootMessages);
// return rootMessages;
return messages.map((m, idx) => ({ ...m, bg: idx % 2 === 0 ? even : odd }));
}