🌿 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/Conversations/index.ts

@@ -3,6 +3,7 @@ export { default as usePresets } from './usePresets';
 export { default as useGetSender } from './useGetSender';
 export { default as useDefaultConvo } from './useDefaultConvo';
 export { default as useConversation } from './useConversation';
+export { default as useGenerateConvo } from './useGenerateConvo';
 export { default as useConversations } from './useConversations';
 export { default as useDebouncedInput } from './useDebouncedInput';
 export { default as useNavigateToConvo } from './useNavigateToConvo';

client/src/hooks/Conversations/useGenerateConvo.ts

@@ -0,0 +1,147 @@
+import { useRecoilValue } from 'recoil';
+import { useCallback, useRef, useEffect } from 'react';
+import { LocalStorageKeys, isAssistantsEndpoint } from 'librechat-data-provider';
+import { useGetModelsQuery, useGetEndpointsQuery } from 'librechat-data-provider/react-query';
+import type {
+  TPreset,
+  TModelsConfig,
+  TConversation,
+  TEndpointsConfig,
+} from 'librechat-data-provider';
+import type { SetterOrUpdater } from 'recoil';
+import type { AssistantListItem } from '~/common';
+import { getEndpointField, buildDefaultConvo, getDefaultEndpoint } from '~/utils';
+import useAssistantListMap from '~/hooks/Assistants/useAssistantListMap';
+import { mainTextareaId } from '~/common';
+import store from '~/store';
+
+const useGenerateConvo = ({
+  index = 0,
+  rootIndex,
+  setConversation,
+}: {
+  index?: number;
+  rootIndex: number;
+  setConversation?: SetterOrUpdater<TConversation | null>;
+}) => {
+  const modelsQuery = useGetModelsQuery();
+  const assistantsListMap = useAssistantListMap();
+  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
+
+  const timeoutIdRef = useRef<NodeJS.Timeout>();
+  const rootConvo = useRecoilValue(store.conversationByKeySelector(rootIndex));
+
+  useEffect(() => {
+    if (rootConvo?.conversationId && setConversation) {
+      setConversation((prevState) => {
+        if (!prevState) {
+          return prevState;
+        }
+        const update = {
+          ...prevState,
+          conversationId: rootConvo.conversationId,
+        } as TConversation;
+
+        return update;
+      });
+    }
+  }, [rootConvo?.conversationId, setConversation]);
+
+  const generateConversation = useCallback(
+    ({
+      template = {},
+      preset,
+      modelsData,
+    }: {
+      template?: Partial<TConversation>;
+      preset?: Partial<TPreset>;
+      modelsData?: TModelsConfig;
+    } = {}) => {
+      let conversation = {
+        conversationId: 'new',
+        title: 'New Chat',
+        endpoint: null,
+        ...template,
+        createdAt: '',
+        updatedAt: '',
+      };
+
+      if (rootConvo?.conversationId) {
+        conversation.conversationId = rootConvo.conversationId;
+      }
+
+      const modelsConfig = modelsData ?? modelsQuery.data;
+
+      const defaultEndpoint = getDefaultEndpoint({
+        convoSetup: preset ?? conversation,
+        endpointsConfig,
+      });
+
+      const endpointType = getEndpointField(endpointsConfig, defaultEndpoint, 'type');
+      if (!conversation.endpointType && endpointType) {
+        conversation.endpointType = endpointType;
+      } else if (conversation.endpointType && !endpointType) {
+        conversation.endpointType = undefined;
+      }
+
+      const isAssistantEndpoint = isAssistantsEndpoint(defaultEndpoint);
+      const assistants: AssistantListItem[] = assistantsListMap[defaultEndpoint] ?? [];
+
+      if (
+        conversation.assistant_id &&
+        !assistantsListMap[defaultEndpoint]?.[conversation.assistant_id]
+      ) {
+        conversation.assistant_id = undefined;
+      }
+
+      if (!conversation.assistant_id && isAssistantEndpoint) {
+        conversation.assistant_id =
+          localStorage.getItem(`${LocalStorageKeys.ASST_ID_PREFIX}${index}${defaultEndpoint}`) ??
+          assistants[0]?.id;
+      }
+
+      if (
+        conversation.assistant_id &&
+        isAssistantEndpoint &&
+        conversation.conversationId === 'new'
+      ) {
+        const assistant = assistants.find((asst) => asst.id === conversation.assistant_id);
+        conversation.model = assistant?.model;
+      }
+
+      if (conversation.assistant_id && !isAssistantEndpoint) {
+        conversation.assistant_id = undefined;
+      }
+
+      const models = modelsConfig?.[defaultEndpoint] ?? [];
+      conversation = buildDefaultConvo({
+        conversation,
+        lastConversationSetup: preset as TConversation,
+        endpoint: defaultEndpoint,
+        models,
+      });
+
+      if (preset?.title) {
+        conversation.title = preset.title;
+      }
+
+      if (setConversation) {
+        setConversation(conversation);
+      }
+
+      clearTimeout(timeoutIdRef.current);
+      timeoutIdRef.current = setTimeout(() => {
+        const textarea = document.getElementById(mainTextareaId);
+        if (textarea) {
+          textarea.focus();
+        }
+      }, 150);
+      return conversation;
+    },
+    [assistantsListMap, endpointsConfig, index, modelsQuery.data, rootConvo, setConversation],
+  );
+
+  return { generateConversation };
+};
+
+export default useGenerateConvo;

client/src/hooks/Conversations/useNavigateToConvo.tsx

@@ -1,6 +1,6 @@
+import { useSetRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
-import { useSetRecoilState, useResetRecoilState } from 'recoil';
 import { QueryKeys, EModelEndpoint, LocalStorageKeys } from 'librechat-data-provider';
 import type { TConversation, TEndpointsConfig, TModelsConfig } from 'librechat-data-provider';
 import { buildDefaultConvo, getDefaultEndpoint, getEndpointField } from '~/utils';
@@ -9,9 +9,10 @@ import store from '~/store';
 const useNavigateToConvo = (index = 0) => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const { setConversation } = store.useCreateConversationAtom(index);
+  const clearAllConversations = store.useClearConvoState();
+  const clearAllLatestMessages = store.useClearLatestMessages();
   const setSubmission = useSetRecoilState(store.submissionByIndex(index));
-  const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
+  const { setConversation } = store.useCreateConversationAtom(index);
 
   const navigateToConvo = (conversation: TConversation, _resetLatestMessage = true) => {
     if (!conversation) {
@@ -20,7 +21,7 @@ const useNavigateToConvo = (index = 0) => {
     }
     setSubmission(null);
     if (_resetLatestMessage) {
-      resetLatestMessage();
+      clearAllLatestMessages();
     }
 
     let convo = { ...conversation };
@@ -47,6 +48,7 @@ const useNavigateToConvo = (index = 0) => {
         models,
       });
     }
+    clearAllConversations(true);
     setConversation(convo);
     navigate(`/c/${convo.conversationId ?? 'new'}`);
   };

client/src/hooks/Conversations/usePresets.ts

@@ -1,9 +1,9 @@
 import filenamify from 'filenamify';
 import exportFromJSON from 'export-from-json';
+import { QueryKeys } from 'librechat-data-provider';
 import { useCallback, useEffect, useRef } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil';
-import { QueryKeys, modularEndpoints, isAssistantsEndpoint } from 'librechat-data-provider';
 import { useCreatePresetMutation, useGetModelsQuery } from 'librechat-data-provider/react-query';
 import type { TPreset, TEndpointsConfig } from 'librechat-data-provider';
 import {
@@ -11,7 +11,7 @@ import {
   useDeletePresetMutation,
   useGetPresetsQuery,
 } from '~/data-provider';
-import { cleanupPreset, getEndpointField, removeUnavailableTools } from '~/utils';
+import { cleanupPreset, removeUnavailableTools, getConvoSwitchLogic } from '~/utils';
 import useDefaultConvo from '~/hooks/Conversations/useDefaultConvo';
 import { useChatContext, useToastContext } from '~/Providers';
 import { useAuthContext } from '~/hooks/AuthContext';
@@ -124,8 +124,6 @@ export default function usePresets() {
 
   const getDefaultConversation = useDefaultConvo();
 
-  const { endpoint } = conversation ?? {};
-
   const importPreset = (jsonPreset: TPreset) => {
     createPresetMutation.mutate(
       { ...jsonPreset },
@@ -171,34 +169,38 @@ export default function usePresets() {
 
     const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);
 
-    const currentEndpointType = getEndpointField(endpointsConfig, endpoint, 'type');
-    const endpointType = getEndpointField(endpointsConfig, newPreset.endpoint, 'type');
-    const isAssistantSwitch =
-      isAssistantsEndpoint(newPreset.endpoint) &&
-      isAssistantsEndpoint(conversation?.endpoint) &&
-      conversation?.endpoint === newPreset.endpoint;
+    const {
+      shouldSwitch,
+      isNewModular,
+      newEndpointType,
+      isCurrentModular,
+      isExistingConversation,
+    } = getConvoSwitchLogic({
+      newEndpoint: newPreset.endpoint ?? '',
+      modularChat,
+      conversation,
+      endpointsConfig,
+    });
 
-    if (
-      (modularEndpoints.has(endpoint ?? '') ||
-        modularEndpoints.has(currentEndpointType ?? '') ||
-        isAssistantSwitch) &&
-      (modularEndpoints.has(newPreset?.endpoint ?? '') ||
-        modularEndpoints.has(endpointType ?? '') ||
-        isAssistantSwitch) &&
-      (endpoint === newPreset?.endpoint || modularChat || isAssistantSwitch)
-    ) {
+    const isModular = isCurrentModular && isNewModular && shouldSwitch;
+    if (isExistingConversation && isModular) {
       const currentConvo = getDefaultConversation({
         /* target endpointType is necessary to avoid endpoint mixing */
-        conversation: { ...(conversation ?? {}), endpointType },
-        preset: { ...newPreset, endpointType },
+        conversation: { ...(conversation ?? {}), endpointType: newEndpointType },
+        preset: { ...newPreset, endpointType: newEndpointType },
       });
 
       /* We don't reset the latest message, only when changing settings mid-converstion */
-      newConversation({ template: currentConvo, preset: currentConvo, keepLatestMessage: true });
+      newConversation({
+        template: currentConvo,
+        preset: currentConvo,
+        keepLatestMessage: true,
+        keepAddedConvos: true,
+      });
       return;
     }
 
-    newConversation({ preset: newPreset });
+    newConversation({ preset: newPreset, keepAddedConvos: isModular });
   };
 
   const onChangePreset = (preset: TPreset) => {