⏸ refactor: Improve UX for Parallel Streams (Multi-Convo) (#11096)

* 🌊 feat: Implement multi-conversation feature with added conversation context and payload adjustments

* refactor: Replace isSubmittingFamily with isSubmitting across message components for consistency

* feat: Add loadAddedAgent and processAddedConvo for multi-conversation agent execution

* refactor: Update ContentRender usage to conditionally render PlaceholderRow based on isLast and isSubmitting

* WIP: first pass, sibling index

* feat: Enhance multi-conversation support with agent tracking and display improvements

* refactor: Introduce isEphemeralAgentId utility and update related logic for agent handling

* refactor: Implement createDualMessageContent utility for sibling message display and enhance useStepHandler for added conversations

* refactor: duplicate tools for added agent if ephemeral and primary agent is also ephemeral

* chore: remove deprecated multimessage rendering

* refactor: enhance dual message content creation and agent handling for parallel rendering

* refactor: streamline message rendering and submission handling by removing unused state and optimizing conditional logic

* refactor: adjust content handling in parallel mode to utilize existing content for improved agent display

* refactor: update @librechat/agents dependency to version 3.0.53

* refactor: update @langchain/core and @librechat/agents dependencies to latest versions

* refactor: remove deprecated @langchain/core dependency from package.json

* chore: remove unused SearchToolConfig and GetSourcesParams types from web.ts

* refactor: remove unused message properties from Message component

* refactor: enhance parallel content handling with groupId support in ContentParts and useStepHandler

* refactor: implement parallel content styling in Message, MessageRender, and ContentRender components. use explicit model name

* refactor: improve agent ID handling in createDualMessageContent for dual message display

* refactor: simplify title generation in AddedConvo by removing unused sender and preset logic

* refactor: replace string interpolation with cn utility for className in HoverButtons component

* refactor: enhance agent ID handling by adding suffix management for parallel agents and updating related components

* refactor: enhance column ordering in ContentParts by sorting agents with suffix management

* refactor: update @librechat/agents dependency to version 3.0.55

* feat: implement parallel content rendering with metadata support

- Added `ParallelContentRenderer` and `ParallelColumns` components for rendering messages in parallel based on groupId and agentId.
- Introduced `contentMetadataMap` to store metadata for each content part, allowing efficient parallel content detection.
- Updated `Message` and `ContentRender` components to utilize the new metadata structure for rendering.
- Modified `useStepHandler` to manage content indices and metadata during message processing.
- Enhanced `IJobStore` interface and its implementations to support storing and retrieving content metadata.
- Updated data schemas to include `contentMetadataMap` for messages, enabling multi-agent and parallel execution scenarios.

* refactor: update @librechat/agents dependency to version 3.0.56

* refactor: remove unused EPHEMERAL_AGENT_ID constant and simplify agent ID check

* refactor: enhance multi-agent message processing and primary agent determination

* refactor: implement branch message functionality for parallel responses

* refactor: integrate added conversation retrieval into message editing and regeneration processes

* refactor: remove unused isCard and isMultiMessage props from MessageRender and ContentRender components

* refactor: update @librechat/agents dependency to version 3.0.60

* refactor: replace usage of EPHEMERAL_AGENT_ID constant with isEphemeralAgentId function for improved clarity and consistency

* refactor: standardize agent ID format in tests for consistency

* chore: move addedConvo property to the correct position in payload construction

* refactor: rename agent_id values in loadAgent tests for clarity

* chore: reorder props in ContentParts component for improved readability

* refactor: rename variable 'content' to 'result' for clarity in RedisJobStore tests

* refactor: streamline useMessageActions by removing duplicate handleFeedback assignment

* chore: revert placeholder rendering logic MessageRender and ContentRender components to original

* refactor: implement useContentMetadata hook for optimized content metadata handling

* refactor: remove contentMetadataMap and related logic from the codebase and revert back to agentId/groupId in content parts

- Eliminated contentMetadataMap from various components and services, simplifying the handling of message content.
- Updated functions to directly access agentId and groupId from content parts instead of relying on a separate metadata map.
- Adjusted related hooks and components to reflect the removal of contentMetadataMap, ensuring consistent handling of message content.
- Updated tests and documentation to align with the new structure of message content handling.

* refactor: remove logging from groupParallelContent function to clean up output

* refactor: remove model parameter from TBranchMessageRequest type for simplification

* refactor: enhance branch message creation by stripping metadata for standalone content

* chore: streamline branch message creation by simplifying content filtering and removing unnecessary metadata checks

* refactor: include attachments in branch message creation for improved content handling

* refactor: streamline agent content processing by consolidating primary agent identification and filtering logic

* refactor: simplify multi-agent message processing by creating a dedicated mapping method and enhancing content filtering

* refactor: remove unused parameter from loadEphemeralAgent function for cleaner code

* refactor: update groupId handling in metadata to only set when provided by the server

client/src/hooks/Chat/index.ts

@@ -1,6 +1,6 @@
 export { default as useChatHelpers } from './useChatHelpers';
-export { default as useAddedHelpers } from './useAddedHelpers';
 export { default as useAddedResponse } from './useAddedResponse';
 export { default as useChatFunctions } from './useChatFunctions';
+export { default as useGetAddedConvo } from './useGetAddedConvo';
 export { default as useIdChangeEffect } from './useIdChangeEffect';
 export { default as useFocusChatEffect } from './useFocusChatEffect';

client/src/hooks/Chat/useAddedHelpers.ts

@@ -1,128 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { QueryKeys } from 'librechat-data-provider';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import type { TMessage } from 'librechat-data-provider';
-import useChatFunctions from '~/hooks/Chat/useChatFunctions';
-import store from '~/store';
-
-// this to be set somewhere else
-export default function useAddedHelpers({
-  rootIndex = 0,
-  currentIndex,
-  paramId,
-}: {
-  rootIndex?: number;
-  currentIndex: number;
-  paramId?: string;
-}) {
-  const queryClient = useQueryClient();
-
-  const clearAllSubmissions = store.useClearSubmissionState();
-  const [files, setFiles] = useRecoilState(store.filesByIndex(rootIndex));
-  const latestMessage = useRecoilValue(store.latestMessageFamily(rootIndex));
-  const setLatestMultiMessage = useSetRecoilState(store.latestMessageFamily(currentIndex));
-
-  const { useCreateConversationAtom } = store;
-  const { conversation, setConversation } = useCreateConversationAtom(currentIndex);
-  const [isSubmitting, setIsSubmitting] = useRecoilState(store.isSubmittingFamily(currentIndex));
-
-  const setSiblingIdx = useSetRecoilState(
-    store.messagesSiblingIdxFamily(latestMessage?.parentMessageId ?? null),
-  );
-
-  const queryParam = paramId === 'new' ? paramId : (conversation?.conversationId ?? paramId ?? '');
-
-  const setMessages = useCallback(
-    (messages: TMessage[]) => {
-      queryClient.setQueryData<TMessage[]>(
-        [QueryKeys.messages, queryParam, currentIndex],
-        messages,
-      );
-      const latestMultiMessage = messages[messages.length - 1];
-      if (latestMultiMessage) {
-        setLatestMultiMessage({ ...latestMultiMessage, depth: -1 });
-      }
-    },
-    [queryParam, queryClient, currentIndex, setLatestMultiMessage],
-  );
-
-  const getMessages = useCallback(() => {
-    return queryClient.getQueryData<TMessage[]>([QueryKeys.messages, queryParam, currentIndex]);
-  }, [queryParam, queryClient, currentIndex]);
-
-  const setSubmission = useSetRecoilState(store.submissionByIndex(currentIndex));
-
-  const { ask, regenerate } = useChatFunctions({
-    index: currentIndex,
-    files,
-    setFiles,
-    getMessages,
-    setMessages,
-    isSubmitting,
-    conversation,
-    setSubmission,
-    latestMessage,
-  });
-
-  const continueGeneration = () => {
-    if (!latestMessage) {
-      console.error('Failed to regenerate the message: latestMessage not found.');
-      return;
-    }
-
-    const messages = getMessages();
-
-    const parentMessage = messages?.find(
-      (element) => element.messageId == latestMessage.parentMessageId,
-    );
-
-    if (parentMessage && parentMessage.isCreatedByUser) {
-      ask({ ...parentMessage }, { isContinued: true, isRegenerate: true, isEdited: true });
-    } else {
-      console.error(
-        'Failed to regenerate the message: parentMessage not found, or not created by user.',
-      );
-    }
-  };
-
-  const stopGenerating = () => clearAllSubmissions();
-
-  const handleStopGenerating = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    stopGenerating();
-  };
-
-  const handleRegenerate = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    const parentMessageId = latestMessage?.parentMessageId;
-    if (!parentMessageId) {
-      console.error('Failed to regenerate the message: parentMessageId not found.');
-      return;
-    }
-    regenerate({ parentMessageId });
-  };
-
-  const handleContinue = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    continueGeneration();
-    setSiblingIdx(0);
-  };
-
-  return {
-    ask,
-    regenerate,
-    getMessages,
-    setMessages,
-    conversation,
-    isSubmitting,
-    setSiblingIdx,
-    latestMessage,
-    stopGenerating,
-    handleContinue,
-    setConversation,
-    setIsSubmitting,
-    handleRegenerate,
-    handleStopGenerating,
-  };
-}

client/src/hooks/Chat/useAddedResponse.ts

@@ -1,39 +1,123 @@
-import { useMemo } from 'react';
-import useGenerateConvo from '~/hooks/Conversations/useGenerateConvo';
-import useAddedHelpers from '~/hooks/Chat/useAddedHelpers';
+import { useCallback } from 'react';
+import { useRecoilValue } from 'recoil';
+import { useGetModelsQuery } from 'librechat-data-provider/react-query';
+import { getEndpointField, LocalStorageKeys, isAssistantsEndpoint } from 'librechat-data-provider';
+import type { TEndpointsConfig, EModelEndpoint, TConversation } from 'librechat-data-provider';
+import type { AssistantListItem, NewConversationParams } from '~/common';
+import useAssistantListMap from '~/hooks/Assistants/useAssistantListMap';
+import { buildDefaultConvo, getDefaultEndpoint } from '~/utils';
+import { useGetEndpointsQuery } from '~/data-provider';
+import { mainTextareaId } from '~/common';
+import store from '~/store';
 
-export default function useAddedResponse({ rootIndex }: { rootIndex: number }) {
-  const currentIndex = useMemo(() => rootIndex + 1, [rootIndex]);
-  const {
-    ask,
-    regenerate,
-    setMessages,
-    getMessages,
-    conversation,
-    isSubmitting,
-    setConversation,
-    setIsSubmitting,
-  } = useAddedHelpers({
-    rootIndex,
-    currentIndex,
-  });
+const ADDED_INDEX = 1;
 
-  const { generateConversation } = useGenerateConvo({
-    index: currentIndex,
-    rootIndex,
-    setConversation,
-  });
+/**
+ * Simplified hook for added conversation state.
+ * Provides just the conversation state and a function to generate a new conversation,
+ * mirroring the pattern from useNewConvo.
+ */
+export default function useAddedResponse() {
+  const modelsQuery = useGetModelsQuery();
+  const assistantsListMap = useAssistantListMap();
+  const rootConvo = useRecoilValue(store.conversationByKeySelector(0));
+  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
+  const { conversation, setConversation } = store.useCreateConversationAtom(ADDED_INDEX);
+
+  /**
+   * Generate a new conversation based on template and preset.
+   * Mirrors the logic from useNewConvo's switchToConversation.
+   */
+  const generateConversation = useCallback(
+    ({ template = {}, preset, modelsData }: NewConversationParams = {}) => {
+      let newConversation: TConversation = {
+        conversationId: rootConvo?.conversationId ?? 'new',
+        title: '',
+        endpoint: null,
+        ...template,
+        createdAt: '',
+        updatedAt: '',
+      } as TConversation;
+
+      const modelsConfig = modelsData ?? modelsQuery.data;
+      const activePreset = preset ?? newConversation;
+
+      const defaultEndpoint = getDefaultEndpoint({
+        convoSetup: activePreset,
+        endpointsConfig,
+      });
+
+      const endpointType = getEndpointField(endpointsConfig, defaultEndpoint, 'type');
+      if (!newConversation.endpointType && endpointType) {
+        newConversation.endpointType = endpointType;
+      } else if (newConversation.endpointType && !endpointType) {
+        newConversation.endpointType = undefined;
+      }
+
+      const isAssistantEndpoint = isAssistantsEndpoint(defaultEndpoint);
+      const assistants: AssistantListItem[] = assistantsListMap[defaultEndpoint ?? ''] ?? [];
+
+      if (
+        newConversation.assistant_id &&
+        !assistantsListMap[defaultEndpoint ?? '']?.[newConversation.assistant_id]
+      ) {
+        newConversation.assistant_id = undefined;
+      }
+
+      if (!newConversation.assistant_id && isAssistantEndpoint) {
+        newConversation.assistant_id =
+          localStorage.getItem(`${LocalStorageKeys.ASST_ID_PREFIX}0${defaultEndpoint}`) ??
+          assistants[0]?.id;
+      }
+
+      if (
+        newConversation.assistant_id != null &&
+        isAssistantEndpoint &&
+        newConversation.conversationId === 'new'
+      ) {
+        const assistant = assistants.find((asst) => asst.id === newConversation.assistant_id);
+        newConversation.model = assistant?.model;
+      }
+
+      if (newConversation.assistant_id != null && !isAssistantEndpoint) {
+        newConversation.assistant_id = undefined;
+      }
+
+      const models = modelsConfig?.[defaultEndpoint ?? ''] ?? [];
+      newConversation = buildDefaultConvo({
+        conversation: newConversation,
+        lastConversationSetup: preset as TConversation,
+        endpoint: defaultEndpoint ?? ('' as EModelEndpoint),
+        models,
+      });
+
+      if (preset?.title != null && preset.title !== '') {
+        newConversation.title = preset.title;
+      }
+
+      setConversation(newConversation);
+
+      setTimeout(() => {
+        const textarea = document.getElementById(mainTextareaId);
+        if (textarea) {
+          textarea.focus();
+        }
+      }, 150);
+
+      return newConversation;
+    },
+    [
+      endpointsConfig,
+      setConversation,
+      modelsQuery.data,
+      assistantsListMap,
+      rootConvo?.conversationId,
+    ],
+  );
 
   return {
-    ask,
-    regenerate,
-    getMessages,
-    setMessages,
     conversation,
-    isSubmitting,
     setConversation,
-    setIsSubmitting,
     generateConversation,
-    addedIndex: currentIndex,
   };
 }

client/src/hooks/Chat/useChatFunctions.ts

@@ -1,6 +1,8 @@
 import { v4 } from 'uuid';
 import { cloneDeep } from 'lodash';
+import { useNavigate } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
+import { useSetRecoilState, useResetRecoilState, useRecoilValue } from 'recoil';
 import {
   Constants,
   QueryKeys,
@@ -12,7 +14,6 @@ import {
   replaceSpecialVars,
   isAssistantsEndpoint,
 } from 'librechat-data-provider';
-import { useSetRecoilState, useResetRecoilState, useRecoilValue } from 'recoil';
 import type {
   TMessage,
   TSubmission,
@@ -25,11 +26,10 @@ import type { SetterOrUpdater } from 'recoil';
 import type { TAskFunction, ExtendedFile } from '~/common';
 import useSetFilesToDelete from '~/hooks/Files/useSetFilesToDelete';
 import useGetSender from '~/hooks/Conversations/useGetSender';
+import { logger, createDualMessageContent } from '~/utils';
 import store, { useGetEphemeralAgent } from '~/store';
 import useUserKey from '~/hooks/Input/useUserKey';
-import { useNavigate } from 'react-router-dom';
 import { useAuthContext } from '~/hooks';
-import { logger } from '~/utils';
 
 const logChatRequest = (request: Record<string, unknown>) => {
   logger.log('=====================================\nAsk function called with:');
@@ -69,6 +69,7 @@ export default function useChatFunctions({
   const getEphemeralAgent = useGetEphemeralAgent();
   const isTemporary = useRecoilValue(store.isTemporary);
   const { getExpiry } = useUserKey(immutableConversation?.endpoint ?? '');
+  const setIsSubmitting = useSetRecoilState(store.isSubmittingFamily(index));
   const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(index));
   const resetLatestMultiMessage = useResetRecoilState(store.latestMessageFamily(index + 1));
 
@@ -89,6 +90,7 @@ export default function useChatFunctions({
       isEdited = false,
       overrideMessages,
       overrideFiles,
+      addedConvo,
     } = {},
   ) => {
     setShowStopButton(false);
@@ -282,9 +284,18 @@ export default function useChatFunctions({
             contentPart[ContentTypes.TEXT] = part[ContentTypes.TEXT];
           }
         }
+      } else if (addedConvo && conversation) {
+        // Pre-populate placeholders for smooth UI - these will be overridden/extended
+        // as SSE events arrive with actual content, preserving the agent-based agentId
+        initialResponse.content = createDualMessageContent(
+          conversation,
+          addedConvo,
+          endpointsConfig,
+        );
       } else {
         initialResponse.content = [];
       }
+      setIsSubmitting(true);
       setShowStopButton(true);
     }
 
@@ -312,6 +323,7 @@ export default function useChatFunctions({
       isTemporary,
       ephemeralAgent,
       editedContent,
+      addedConvo,
     };
 
     if (isRegenerate) {
@@ -327,12 +339,15 @@ export default function useChatFunctions({
     logger.dir('message_stream', submission, { depth: null });
   };
 
-  const regenerate = ({ parentMessageId }) => {
+  const regenerate = ({ parentMessageId }, options?: { addedConvo?: TConversation | null }) => {
     const messages = getMessages();
     const parentMessage = messages?.find((element) => element.messageId == parentMessageId);
 
     if (parentMessage && parentMessage.isCreatedByUser) {
-      ask({ ...parentMessage }, { isRegenerate: true });
+      ask(
+        { ...parentMessage },
+        { isRegenerate: true, addedConvo: options?.addedConvo ?? undefined },
+      );
     } else {
       console.error(
         'Failed to regenerate the message: parentMessage not found or not created by user.',

client/src/hooks/Chat/useGetAddedConvo.ts

@@ -0,0 +1,15 @@
+import { useRecoilCallback } from 'recoil';
+import store from '~/store';
+
+/**
+ * Hook that provides lazy access to addedConvo without subscribing to changes.
+ * Use this to avoid unnecessary re-renders when addedConvo changes.
+ */
+export default function useGetAddedConvo() {
+  return useRecoilCallback(
+    ({ snapshot }) =>
+      () =>
+        snapshot.getLoadable(store.conversationByKeySelector(1)).getValue(),
+    [],
+  );
+}