⏸ 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/utils/messages.ts

@@ -1,5 +1,18 @@
-import { ContentTypes, QueryKeys, Constants } from 'librechat-data-provider';
-import type { TMessage, TMessageContentParts } from 'librechat-data-provider';
+import {
+  QueryKeys,
+  Constants,
+  ContentTypes,
+  getResponseSender,
+  isEphemeralAgentId,
+  appendAgentIdSuffix,
+  encodeEphemeralAgentId,
+} from 'librechat-data-provider';
+import type {
+  TMessage,
+  TConversation,
+  TEndpointsConfig,
+  TMessageContentParts,
+} from 'librechat-data-provider';
 import type { QueryClient } from '@tanstack/react-query';
 import type { LocalizeFunction } from '~/common';
 import _ from 'lodash';
@@ -178,3 +191,83 @@ export const getMessageAriaLabel = (message: TMessage, localize: LocalizeFunctio
     ? localize('com_endpoint_message_new', { 0: message.depth + 1 })
     : localize('com_endpoint_message');
 };
+
+/**
+ * Creates initial content parts for dual message display with agent-based grouping.
+ * Sets up primary and added agent content parts with agentId for column rendering.
+ *
+ * @param primaryConvo - The primary conversation configuration
+ * @param addedConvo - The added conversation configuration
+ * @param endpointsConfig - Endpoints configuration for getting model display labels
+ * @returns Array of content parts with agentId for side-by-side rendering
+ */
+export const createDualMessageContent = (
+  primaryConvo: TConversation,
+  addedConvo: TConversation,
+  endpointsConfig?: TEndpointsConfig,
+): TMessageContentParts[] => {
+  // For real agents (agent_id starts with "agent_"), use agent_id directly
+  // Otherwise create ephemeral ID from endpoint/model
+  let primaryAgentId: string;
+  if (primaryConvo.agent_id && !isEphemeralAgentId(primaryConvo.agent_id)) {
+    primaryAgentId = primaryConvo.agent_id;
+  } else {
+    const primaryEndpoint = primaryConvo.endpoint;
+    const primaryModel = primaryConvo.model ?? '';
+    const primarySender = getResponseSender({
+      modelDisplayLabel: primaryEndpoint
+        ? endpointsConfig?.[primaryEndpoint]?.modelDisplayLabel
+        : undefined,
+    });
+    primaryAgentId = encodeEphemeralAgentId({
+      endpoint: primaryEndpoint ?? '',
+      model: primaryModel,
+      sender: primarySender,
+    });
+  }
+
+  // Both agents run in parallel, so they share the same groupId
+  const parallelGroupId = 1;
+
+  // Use empty type - these are just placeholders to establish agentId/groupId
+  // The actual type will be set when real content arrives from the server
+  const primaryContent = {
+    type: '' as const,
+    agentId: primaryAgentId,
+    groupId: parallelGroupId,
+  };
+
+  // For added agent, use agent_id if it's a real agent (starts with "agent_")
+  // Otherwise create ephemeral ID with index suffix
+  // Always append index suffix for added agent to distinguish from primary (even if same agent_id)
+  let addedAgentId: string;
+  if (addedConvo.agent_id && !isEphemeralAgentId(addedConvo.agent_id)) {
+    // Append suffix to distinguish from primary agent (matches ephemeral format)
+    addedAgentId = appendAgentIdSuffix(addedConvo.agent_id, 1);
+  } else {
+    const addedEndpoint = addedConvo.endpoint;
+    const addedModel = addedConvo.model ?? '';
+    const addedSender = addedEndpoint
+      ? getResponseSender({
+          modelDisplayLabel: endpointsConfig?.[addedEndpoint]?.modelDisplayLabel,
+        })
+      : '';
+    addedAgentId = encodeEphemeralAgentId({
+      endpoint: addedEndpoint ?? '',
+      model: addedModel,
+      sender: addedSender,
+      index: 1,
+    });
+  }
+
+  // Use empty type - placeholder to establish agentId/groupId
+  const addedContent = {
+    type: '' as const,
+    agentId: addedAgentId,
+    groupId: parallelGroupId,
+  };
+
+  // Cast through unknown since these are placeholder objects with empty type
+  // that will be replaced by real content with proper types from the server
+  return [primaryContent, addedContent] as unknown as TMessageContentParts[];
+};