🌿 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/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;