🌿 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/store/families.ts

@@ -1,7 +1,8 @@
 import {
   atom,
-  atomFamily,
   selector,
+  atomFamily,
+  selectorFamily,
   useRecoilState,
   useRecoilValue,
   useSetRecoilState,
@@ -10,9 +11,53 @@ import {
 import { LocalStorageKeys } from 'librechat-data-provider';
 import type { TMessage, TPreset, TConversation, TSubmission } from 'librechat-data-provider';
 import type { TOptionSettings, ExtendedFile } from '~/common';
-import { storeEndpointSettings } from '~/utils';
+import { storeEndpointSettings, logger } from '~/utils';
 import { useEffect } from 'react';
 
+const latestMessageKeysAtom = atom<(string | number)[]>({
+  key: 'latestMessageKeys',
+  default: [],
+});
+
+const submissionKeysAtom = atom<(string | number)[]>({
+  key: 'submissionKeys',
+  default: [],
+});
+
+const latestMessageFamily = atomFamily<TMessage | null, string | number | null>({
+  key: 'latestMessageByIndex',
+  default: null,
+});
+
+const submissionByIndex = atomFamily<TSubmission | null, string | number>({
+  key: 'submissionByIndex',
+  default: null,
+});
+
+const latestMessageKeysSelector = selector<(string | number)[]>({
+  key: 'latestMessageKeysSelector',
+  get: ({ get }) => {
+    const keys = get(conversationKeysAtom);
+    return keys.filter((key) => get(latestMessageFamily(key)) !== null);
+  },
+  set: ({ set }, newKeys) => {
+    logger.log('setting latestMessageKeys', newKeys);
+    set(latestMessageKeysAtom, newKeys);
+  },
+});
+
+const submissionKeysSelector = selector<(string | number)[]>({
+  key: 'submissionKeysSelector',
+  get: ({ get }) => {
+    const keys = get(conversationKeysAtom);
+    return keys.filter((key) => get(submissionByIndex(key)) !== null);
+  },
+  set: ({ set }, newKeys) => {
+    logger.log('setting submissionKeysAtom', newKeys);
+    set(submissionKeysAtom, newKeys);
+  },
+});
+
 const conversationByIndex = atomFamily<TConversation | null, string | number>({
   key: 'conversationByIndex',
   default: null,
@@ -41,7 +86,10 @@ const conversationByIndex = atomFamily<TConversation | null, string | number>({
         }
 
         storeEndpointSettings(newValue);
-        localStorage.setItem(LocalStorageKeys.LAST_CONVO_SETUP, JSON.stringify(newValue));
+        localStorage.setItem(
+          `${LocalStorageKeys.LAST_CONVO_SETUP}_${index}`,
+          JSON.stringify(newValue),
+        );
       });
     },
   ] as const,
@@ -70,11 +118,6 @@ const presetByIndex = atomFamily<TPreset | null, string | number>({
   default: null,
 });
 
-const submissionByIndex = atomFamily<TSubmission | null, string | number>({
-  key: 'submissionByIndex',
-  default: null,
-});
-
 const textByIndex = atomFamily<string, string | number>({
   key: 'textByIndex',
   default: '',
@@ -125,6 +168,11 @@ const showMentionPopoverFamily = atomFamily<boolean, string | number | null>({
   default: false,
 });
 
+const showPlusPopoverFamily = atomFamily<boolean, string | number | null>({
+  key: 'showPlusPopoverByIndex',
+  default: false,
+});
+
 const globalAudioURLFamily = atomFamily<string | null, string | number | null>({
   key: 'globalAudioURLByIndex',
   default: null,
@@ -150,11 +198,6 @@ const audioRunFamily = atomFamily<string | null, string | number | null>({
   default: null,
 });
 
-const latestMessageFamily = atomFamily<TMessage | null, string | number | null>({
-  key: 'latestMessageByIndex',
-  default: null,
-});
-
 function useCreateConversationAtom(key: string | number) {
   const [keys, setKeys] = useRecoilState(conversationKeysAtom);
   const setConversation = useSetRecoilState(conversationByIndex(key));
@@ -170,12 +213,17 @@ function useCreateConversationAtom(key: string | number) {
 }
 
 function useClearConvoState() {
+  /** Clears all active conversations. Pass `true` to skip the first or root conversation */
   const clearAllConversations = useRecoilCallback(
     ({ reset, snapshot }) =>
-      async () => {
+      async (skipFirst?: boolean) => {
         const conversationKeys = await snapshot.getPromise(conversationKeysAtom);
 
         for (const conversationKey of conversationKeys) {
+          if (skipFirst && conversationKey == 0) {
+            continue;
+          }
+
           reset(conversationByIndex(conversationKey));
 
           const conversation = await snapshot.getPromise(conversationByIndex(conversationKey));
@@ -192,6 +240,64 @@ function useClearConvoState() {
   return clearAllConversations;
 }
 
+const conversationByKeySelector = selectorFamily({
+  key: 'conversationByKeySelector',
+  get:
+    (index: string | number) =>
+      ({ get }) => {
+        const conversation = get(conversationByIndex(index));
+        return conversation;
+      },
+});
+
+function useClearSubmissionState() {
+  const clearAllSubmissions = useRecoilCallback(
+    ({ reset, set, snapshot }) =>
+      async (skipFirst?: boolean) => {
+        const submissionKeys = await snapshot.getPromise(submissionKeysSelector);
+        logger.log('submissionKeys', submissionKeys);
+
+        for (const key of submissionKeys) {
+          if (skipFirst && key == 0) {
+            continue;
+          }
+
+          logger.log('resetting submission', key);
+          reset(submissionByIndex(key));
+        }
+
+        set(submissionKeysSelector, []);
+      },
+    [],
+  );
+
+  return clearAllSubmissions;
+}
+
+function useClearLatestMessages() {
+  const clearAllLatestMessages = useRecoilCallback(
+    ({ reset, set, snapshot }) =>
+      async (skipFirst?: boolean) => {
+        const latestMessageKeys = await snapshot.getPromise(latestMessageKeysSelector);
+        logger.log('latestMessageKeys', latestMessageKeys);
+
+        for (const key of latestMessageKeys) {
+          if (skipFirst && key == 0) {
+            continue;
+          }
+
+          logger.log('resetting latest message', key);
+          reset(latestMessageFamily(key));
+        }
+
+        set(latestMessageKeysSelector, []);
+      },
+    [],
+  );
+
+  return clearAllLatestMessages;
+}
+
 export default {
   conversationByIndex,
   filesByIndex,
@@ -207,6 +313,7 @@ export default {
   showPopoverFamily,
   latestMessageFamily,
   allConversationsSelector,
+  conversationByKeySelector,
   useClearConvoState,
   useCreateConversationAtom,
   showMentionPopoverFamily,
@@ -215,5 +322,8 @@ export default {
   audioRunFamily,
   globalAudioPlayingFamily,
   globalAudioFetchingFamily,
+  showPlusPopoverFamily,
   activePromptByIndex,
+  useClearSubmissionState,
+  useClearLatestMessages,
 };