🌿 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/hooks/Messages/useSubmitMessage.ts

@@ -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(