🌿 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/components/Chat/ChatView.tsx

@@ -4,9 +4,9 @@ import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
 import { useGetMessagesByConvoId } from 'librechat-data-provider/react-query';
 import type { ChatFormValues } from '~/common';
-import { ChatContext, useFileMapContext, ChatFormProvider } from '~/Providers';
+import { ChatContext, AddedChatContext, useFileMapContext, ChatFormProvider } from '~/Providers';
+import { useChatHelpers, useAddedResponse, useSSE } from '~/hooks';
 import MessagesView from './Messages/MessagesView';
-import { useChatHelpers, useSSE } from '~/hooks';
 import { Spinner } from '~/components/svg';
 import Presentation from './Presentation';
 import ChatForm from './Input/ChatForm';
@@ -18,8 +18,8 @@ import store from '~/store';
 
 function ChatView({ index = 0 }: { index?: number }) {
   const { conversationId } = useParams();
-  const submissionAtIndex = useRecoilValue(store.submissionByIndex(0));
-  useSSE(submissionAtIndex);
+  const rootSubmission = useRecoilValue(store.submissionByIndex(index));
+  const addedSubmission = useRecoilValue(store.submissionByIndex(index + 1));
 
   const fileMap = useFileMapContext();
 
@@ -32,35 +32,35 @@ function ChatView({ index = 0 }: { index?: number }) {
   });
 
   const chatHelpers = useChatHelpers(index, conversationId);
+  const addedChatHelpers = useAddedResponse({ rootIndex: index });
+
+  useSSE(rootSubmission, chatHelpers, false);
+  useSSE(addedSubmission, addedChatHelpers, true);
+
   const methods = useForm<ChatFormValues>({
     defaultValues: { text: '' },
   });
 
   return (
-    <ChatFormProvider
-      reset={methods.reset}
-      control={methods.control}
-      setValue={methods.setValue}
-      register={methods.register}
-      getValues={methods.getValues}
-      handleSubmit={methods.handleSubmit}
-    >
+    <ChatFormProvider {...methods}>
       <ChatContext.Provider value={chatHelpers}>
-        <Presentation useSidePanel={true}>
-          {isLoading && conversationId !== 'new' ? (
-            <div className="flex h-screen items-center justify-center">
-              <Spinner className="opacity-0" />
+        <AddedChatContext.Provider value={addedChatHelpers}>
+          <Presentation useSidePanel={true}>
+            {isLoading && conversationId !== 'new' ? (
+              <div className="flex h-screen items-center justify-center">
+                <Spinner className="opacity-0" />
+              </div>
+            ) : messagesTree && messagesTree.length !== 0 ? (
+              <MessagesView messagesTree={messagesTree} Header={<Header />} />
+            ) : (
+              <Landing Header={<Header />} />
+            )}
+            <div className="w-full border-t-0 pl-0 pt-2 dark:border-white/20 md:w-[calc(100%-.5rem)] md:border-t-0 md:border-transparent md:pl-0 md:pt-0 md:dark:border-transparent">
+              <ChatForm index={index} />
+              <Footer />
             </div>
-          ) : messagesTree && messagesTree.length !== 0 ? (
-            <MessagesView messagesTree={messagesTree} Header={<Header />} />
-          ) : (
-            <Landing Header={<Header />} />
-          )}
-          <div className="w-full border-t-0 pl-0 pt-2 dark:border-white/20 md:w-[calc(100%-.5rem)] md:border-t-0 md:border-transparent md:pl-0 md:pt-0 md:dark:border-transparent">
-            <ChatForm index={index} />
-            <Footer />
-          </div>
-        </Presentation>
+          </Presentation>
+        </AddedChatContext.Provider>
       </ChatContext.Provider>
     </ChatFormProvider>
   );