🌿 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

client/src/utils/buildTree.ts

@@ -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 }));
 }

client/src/utils/endpoints.ts

@@ -85,6 +85,8 @@ export function mapEndpoints(endpointsConfig: TEndpointsConfig) {
   );
 }
 
+const firstLocalConvoKey = LocalStorageKeys.LAST_CONVO_SETUP + '_0';
+
 /**
  * Ensures the last selected model stays up to date, as conversation may
  * update without updating last convo setup when same endpoint */
@@ -98,13 +100,11 @@ export function updateLastSelectedModel({
   if (!model) {
     return;
   }
-  const lastConversationSetup = JSON.parse(
-    localStorage.getItem(LocalStorageKeys.LAST_CONVO_SETUP) || '{}',
-  );
+  const lastConversationSetup = JSON.parse(localStorage.getItem(firstLocalConvoKey) || '{}');
 
   if (lastConversationSetup.endpoint === endpoint) {
     lastConversationSetup.model = model;
-    localStorage.setItem(LocalStorageKeys.LAST_CONVO_SETUP, JSON.stringify(lastConversationSetup));
+    localStorage.setItem(firstLocalConvoKey, JSON.stringify(lastConversationSetup));
   }
 
   const lastSelectedModels = JSON.parse(localStorage.getItem(LocalStorageKeys.LAST_MODEL) || '{}');

client/src/utils/getLocalStorageItems.ts

@@ -5,7 +5,7 @@ export default function getLocalStorageItems() {
     lastSelectedModel: localStorage.getItem(LocalStorageKeys.LAST_MODEL),
     lastSelectedTools: localStorage.getItem(LocalStorageKeys.LAST_TOOLS),
     lastBingSettings: localStorage.getItem(LocalStorageKeys.LAST_BING),
-    lastConversationSetup: localStorage.getItem(LocalStorageKeys.LAST_CONVO_SETUP),
+    lastConversationSetup: localStorage.getItem(LocalStorageKeys.LAST_CONVO_SETUP + '_0'),
   };
 
   const lastSelectedModel = items.lastSelectedModel ? JSON.parse(items.lastSelectedModel) : {};

client/src/utils/index.ts

@@ -12,6 +12,7 @@ export * from './endpoints';
 export * from './sharedLink';
 export * from './promptGroups';
 export { default as cn } from './cn';
+export { default as logger } from './logger';
 export { default as buildTree } from './buildTree';
 export { default as getLoginError } from './getLoginError';
 export { default as cleanupPreset } from './cleanupPreset';

client/src/utils/logger.ts

@@ -0,0 +1,37 @@
+const isDevelopment = import.meta.env.MODE === 'development';
+const isLoggerEnabled = import.meta.env.VITE_ENABLE_LOGGER === 'true';
+
+const logger = {
+  log: (...args: unknown[]) => {
+    if (isDevelopment || isLoggerEnabled) {
+      console.log(...args);
+    }
+  },
+  warn: (...args: unknown[]) => {
+    if (isDevelopment || isLoggerEnabled) {
+      console.warn(...args);
+    }
+  },
+  error: (...args: unknown[]) => {
+    if (isDevelopment || isLoggerEnabled) {
+      console.error(...args);
+    }
+  },
+  info: (...args: unknown[]) => {
+    if (isDevelopment || isLoggerEnabled) {
+      console.info(...args);
+    }
+  },
+  debug: (...args: unknown[]) => {
+    if (isDevelopment || isLoggerEnabled) {
+      console.debug(...args);
+    }
+  },
+  dir: (...args: unknown[]) => {
+    if (isDevelopment || isLoggerEnabled) {
+      console.dir(...args);
+    }
+  },
+};
+
+export default logger;

client/src/utils/textarea.ts

@@ -58,13 +58,14 @@ export const trimUndoneRange = (textAreaRef: React.RefObject<HTMLTextAreaElement
 };
 
 /**
- * Remove the "@" character from the end of the textarea's text if it's present.
- * This function ensures that the "@" is only removed if it's the last character.
+ * Remove the specified character from the end of the textarea's text if it's present.
+ * This function ensures that the specified character is only removed if it's the last character.
  *
  * @param {HTMLTextAreaElement} textarea - The textarea element where text manipulation will occur.
+ * @param {string} charToRemove - The character to remove if it's the last character in the textarea's value.
  */
-export function removeAtSymbolIfLast(textarea: HTMLTextAreaElement) {
-  if (textarea.value.endsWith('@')) {
+export function removeCharIfLast(textarea: HTMLTextAreaElement, charToRemove: string) {
+  if (textarea.value.endsWith(charToRemove)) {
     textarea.value = textarea.value.slice(0, -1);
     textarea.setSelectionRange(textarea.value.length, textarea.value.length);
     textarea.dispatchEvent(new Event('input', { bubbles: true }));