🔗 feat: Agent Chain (Mixture-of-Agents) (#6374)

* wip: first pass, dropdown for selecting sequential agents

* refactor: Improve agent selection logic and enhance performance in SequentialAgents component

* wip: seq. agents working ideas

* wip: sequential agents style change

* refactor: move agent form options/submission outside of AgentConfig

* refactor: prevent repeating code

* refactor: simplify current agent display in SequentialAgents component

* feat: persist  form value handling in AgentSelect component for agent_ids

* feat: first pass, sequential agnets agent update

* feat: enhance message display with agent updates and empty text handling

* chore: update Icon component to use EModelEndpoint for agent endpoints

* feat: update content type checks in BaseClient to use constants for better readability

* feat: adjust max context tokens calculation to use 90% of the model's max tokens

* feat: first pass, agent run message pruning

* chore: increase max listeners for abort controller to prevent memory leaks

* feat: enhance runAgent function to include current index count map for improved token tracking

* chore: update @librechat/agents dependency to version 2.2.5

* feat: update icons and style of SequentialAgents component for improved UI consistency

* feat: add AdvancedButton and AdvancedPanel components for enhanced agent settings navigation, update styling for agent form

* chore: adjust minimum height of AdvancedPanel component for better layout consistency

* chore: update @librechat/agents dependency to version 2.2.6

* feat: enhance message formatting by incorporating tool set into agent message processing, in order to allow better mix/matching of agents (as tool calls for tools not found in set will be stringified)

* refactor: reorder components in AgentConfig for improved readability and maintainability

* refactor: enhance layout of AgentUpdate component for improved visual structure

* feat: add DeepSeek provider to Bedrock settings and schemas

* feat: enhance link styling in mobile.css for better visibility and accessibility

* fix: update banner model import in update banner script; export Banner model

* refactor: `duplicateAgentHandler` to include tool_resources only for OCR context files

* feat: add 'qwen-vl' to visionModels for enhanced model support

* fix: change image format from JPEG to PNG in DALLE3 response

* feat: reorganize Advanced components and add localizations

* refactor: simplify JSX structure in AgentChain component to defer container styling to parent

* feat: add FormInput component for reusable input handling

* feat: make agent recursion limit configurable from builder

* feat: add support for agent capabilities chain in AdvancedPanel and update data-provider version

* feat: add maxRecursionLimit configuration for agents and update related documentation

* fix: update CONFIG_VERSION to 1.2.3 in data provider configuration

* feat: replace recursion limit input with MaxAgentSteps component and enhance input handling

* feat: enhance AgentChain component with hover card for additional information and update related labels

* fix: pass request and response objects to `createActionTool` when using assistant actions to prevent auth error

* feat: update AgentChain component layout to include agent count display

* feat: increase default max listeners and implement capability check function for agent chain

* fix: update link styles in mobile.css for better visibility in dark mode

* chore: temp. remove agents package while bumping shared packages

* chore: update @langchain/google-genai package to version 0.1.11

* chore: update @langchain/google-vertexai package to version 0.2.2

* chore: add @librechat/agents package at version 2.2.8

* feat: add deepseek.r1 model with token rate and context values for bedrock

client/src/components/Chat/Messages/Content/ContentParts.tsx

@@ -139,6 +139,7 @@ const ContentParts = memo(
                   isSubmitting={isSubmitting}
                   key={`part-${messageId}-${idx}`}
                   isCreatedByUser={isCreatedByUser}
+                  isLast={idx === content.length - 1}
                   showCursor={idx === content.length - 1 && isLast}
                 />
               </MessageContext.Provider>

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -166,15 +166,12 @@ export const p: React.ElementType = memo(({ children }: TParagraphProps) => {
   return <p className="mb-2 whitespace-pre-wrap">{children}</p>;
 });
 
-const cursor = ' ';
-
 type TContentProps = {
   content: string;
-  showCursor?: boolean;
   isLatestMessage: boolean;
 };
 
-const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentProps) => {
+const Markdown = memo(({ content = '', isLatestMessage }: TContentProps) => {
   const LaTeXParsing = useRecoilValue<boolean>(store.LaTeXParsing);
   const isInitializing = content === '';
 
@@ -240,7 +237,7 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
             }
           }
         >
-          {isLatestMessage && (showCursor ?? false) ? currentContent + cursor : currentContent}
+          {currentContent}
         </ReactMarkdown>
       </CodeBlockProvider>
     </ArtifactProvider>

client/src/components/Chat/Messages/Content/MessageContent.tsx

@@ -83,9 +83,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
 
   let content: React.ReactElement;
   if (!isCreatedByUser) {
-    content = (
-      <Markdown content={text} showCursor={showCursorState} isLatestMessage={isLatestMessage} />
-    );
+    content = <Markdown content={text} isLatestMessage={isLatestMessage} />;
   } else if (enableUserMsgMarkdown) {
     content = <MarkdownLite content={text} />;
   } else {

client/src/components/Chat/Messages/Content/Part.tsx

@@ -8,9 +8,11 @@ import {
 import { memo } from 'react';
 import type { TMessageContentParts, TAttachment } from 'librechat-data-provider';
 import { ErrorMessage } from './MessageContent';
+import AgentUpdate from './Parts/AgentUpdate';
 import ExecuteCode from './Parts/ExecuteCode';
 import RetrievalCall from './RetrievalCall';
 import Reasoning from './Parts/Reasoning';
+import EmptyText from './Parts/EmptyText';
 import CodeAnalyze from './CodeAnalyze';
 import Container from './Container';
 import ToolCall from './ToolCall';
@@ -20,145 +22,159 @@ import Image from './Image';
 
 type PartProps = {
   part?: TMessageContentParts;
+  isLast?: boolean;
   isSubmitting: boolean;
   showCursor: boolean;
   isCreatedByUser: boolean;
   attachments?: TAttachment[];
 };
 
-const Part = memo(({ part, isSubmitting, attachments, showCursor, isCreatedByUser }: PartProps) => {
-  if (!part) {
-    return null;
-  }
-
-  if (part.type === ContentTypes.ERROR) {
-    return (
-      <ErrorMessage
-        text={part[ContentTypes.ERROR] ?? part[ContentTypes.TEXT]?.value}
-        className="my-2"
-      />
-    );
-  } else if (part.type === ContentTypes.TEXT) {
-    const text = typeof part.text === 'string' ? part.text : part.text.value;
-
-    if (typeof text !== 'string') {
-      return null;
-    }
-    if (part.tool_call_ids != null && !text) {
-      return null;
-    }
-    return (
-      <Container>
-        <Text text={text} isCreatedByUser={isCreatedByUser} showCursor={showCursor} />
-      </Container>
-    );
-  } else if (part.type === ContentTypes.THINK) {
-    const reasoning = typeof part.think === 'string' ? part.think : part.think.value;
-    if (typeof reasoning !== 'string') {
-      return null;
-    }
-    return <Reasoning reasoning={reasoning} />;
-  } else if (part.type === ContentTypes.TOOL_CALL) {
-    const toolCall = part[ContentTypes.TOOL_CALL];
-
-    if (!toolCall) {
+const Part = memo(
+  ({ part, isSubmitting, attachments, isLast, showCursor, isCreatedByUser }: PartProps) => {
+    if (!part) {
       return null;
     }
 
-    const isToolCall =
-      'args' in toolCall && (!toolCall.type || toolCall.type === ToolCallTypes.TOOL_CALL);
-    if (isToolCall && toolCall.name === Tools.execute_code) {
+    if (part.type === ContentTypes.ERROR) {
       return (
-        <ExecuteCode
-          args={typeof toolCall.args === 'string' ? toolCall.args : ''}
-          output={toolCall.output ?? ''}
-          initialProgress={toolCall.progress ?? 0.1}
-          isSubmitting={isSubmitting}
-          attachments={attachments}
+        <ErrorMessage
+          text={part[ContentTypes.ERROR] ?? part[ContentTypes.TEXT]?.value}
+          className="my-2"
         />
       );
-    } else if (isToolCall) {
+    } else if (part.type === ContentTypes.AGENT_UPDATE) {
       return (
-        <ToolCall
-          args={toolCall.args ?? ''}
-          name={toolCall.name || ''}
-          output={toolCall.output ?? ''}
-          initialProgress={toolCall.progress ?? 0.1}
-          isSubmitting={isSubmitting}
-          attachments={attachments}
-          auth={toolCall.auth}
-          expires_at={toolCall.expires_at}
-        />
-      );
-    } else if (toolCall.type === ToolCallTypes.CODE_INTERPRETER) {
-      const code_interpreter = toolCall[ToolCallTypes.CODE_INTERPRETER];
-      return (
-        <CodeAnalyze
-          initialProgress={toolCall.progress ?? 0.1}
-          code={code_interpreter.input}
-          outputs={code_interpreter.outputs ?? []}
-          isSubmitting={isSubmitting}
-        />
-      );
-    } else if (
-      toolCall.type === ToolCallTypes.RETRIEVAL ||
-      toolCall.type === ToolCallTypes.FILE_SEARCH
-    ) {
-      return (
-        <RetrievalCall initialProgress={toolCall.progress ?? 0.1} isSubmitting={isSubmitting} />
-      );
-    } else if (
-      toolCall.type === ToolCallTypes.FUNCTION &&
-      ToolCallTypes.FUNCTION in toolCall &&
-      imageGenTools.has(toolCall.function.name)
-    ) {
-      return (
-        <ImageGen
-          initialProgress={toolCall.progress ?? 0.1}
-          args={toolCall.function.arguments as string}
-        />
-      );
-    } else if (toolCall.type === ToolCallTypes.FUNCTION && ToolCallTypes.FUNCTION in toolCall) {
-      if (isImageVisionTool(toolCall)) {
-        if (isSubmitting && showCursor) {
-          return (
+        <>
+          <AgentUpdate currentAgentId={part[ContentTypes.AGENT_UPDATE]?.agentId} />
+          {isLast && showCursor && (
             <Container>
-              <Text text={''} isCreatedByUser={isCreatedByUser} showCursor={showCursor} />
+              <EmptyText />
             </Container>
-          );
-        }
+          )}
+        </>
+      );
+    } else if (part.type === ContentTypes.TEXT) {
+      const text = typeof part.text === 'string' ? part.text : part.text.value;
+
+      if (typeof text !== 'string') {
+        return null;
+      }
+      if (part.tool_call_ids != null && !text) {
+        return null;
+      }
+      return (
+        <Container>
+          <Text text={text} isCreatedByUser={isCreatedByUser} showCursor={showCursor} />
+        </Container>
+      );
+    } else if (part.type === ContentTypes.THINK) {
+      const reasoning = typeof part.think === 'string' ? part.think : part.think.value;
+      if (typeof reasoning !== 'string') {
+        return null;
+      }
+      return <Reasoning reasoning={reasoning} />;
+    } else if (part.type === ContentTypes.TOOL_CALL) {
+      const toolCall = part[ContentTypes.TOOL_CALL];
+
+      if (!toolCall) {
         return null;
       }
 
+      const isToolCall =
+        'args' in toolCall && (!toolCall.type || toolCall.type === ToolCallTypes.TOOL_CALL);
+      if (isToolCall && toolCall.name === Tools.execute_code) {
+        return (
+          <ExecuteCode
+            args={typeof toolCall.args === 'string' ? toolCall.args : ''}
+            output={toolCall.output ?? ''}
+            initialProgress={toolCall.progress ?? 0.1}
+            isSubmitting={isSubmitting}
+            attachments={attachments}
+          />
+        );
+      } else if (isToolCall) {
+        return (
+          <ToolCall
+            args={toolCall.args ?? ''}
+            name={toolCall.name || ''}
+            output={toolCall.output ?? ''}
+            initialProgress={toolCall.progress ?? 0.1}
+            isSubmitting={isSubmitting}
+            attachments={attachments}
+            auth={toolCall.auth}
+            expires_at={toolCall.expires_at}
+          />
+        );
+      } else if (toolCall.type === ToolCallTypes.CODE_INTERPRETER) {
+        const code_interpreter = toolCall[ToolCallTypes.CODE_INTERPRETER];
+        return (
+          <CodeAnalyze
+            initialProgress={toolCall.progress ?? 0.1}
+            code={code_interpreter.input}
+            outputs={code_interpreter.outputs ?? []}
+            isSubmitting={isSubmitting}
+          />
+        );
+      } else if (
+        toolCall.type === ToolCallTypes.RETRIEVAL ||
+        toolCall.type === ToolCallTypes.FILE_SEARCH
+      ) {
+        return (
+          <RetrievalCall initialProgress={toolCall.progress ?? 0.1} isSubmitting={isSubmitting} />
+        );
+      } else if (
+        toolCall.type === ToolCallTypes.FUNCTION &&
+        ToolCallTypes.FUNCTION in toolCall &&
+        imageGenTools.has(toolCall.function.name)
+      ) {
+        return (
+          <ImageGen
+            initialProgress={toolCall.progress ?? 0.1}
+            args={toolCall.function.arguments as string}
+          />
+        );
+      } else if (toolCall.type === ToolCallTypes.FUNCTION && ToolCallTypes.FUNCTION in toolCall) {
+        if (isImageVisionTool(toolCall)) {
+          if (isSubmitting && showCursor) {
+            return (
+              <Container>
+                <Text text={''} isCreatedByUser={isCreatedByUser} showCursor={showCursor} />
+              </Container>
+            );
+          }
+          return null;
+        }
+
+        return (
+          <ToolCall
+            initialProgress={toolCall.progress ?? 0.1}
+            isSubmitting={isSubmitting}
+            args={toolCall.function.arguments as string}
+            name={toolCall.function.name}
+            output={toolCall.function.output}
+          />
+        );
+      }
+    } else if (part.type === ContentTypes.IMAGE_FILE) {
+      const imageFile = part[ContentTypes.IMAGE_FILE];
+      const height = imageFile.height ?? 1920;
+      const width = imageFile.width ?? 1080;
       return (
-        <ToolCall
-          initialProgress={toolCall.progress ?? 0.1}
-          isSubmitting={isSubmitting}
-          args={toolCall.function.arguments as string}
-          name={toolCall.function.name}
-          output={toolCall.function.output}
+        <Image
+          imagePath={imageFile.filepath}
+          height={height}
+          width={width}
+          altText={imageFile.filename ?? 'Uploaded Image'}
+          placeholderDimensions={{
+            height: height + 'px',
+            width: width + 'px',
+          }}
         />
       );
     }
-  } else if (part.type === ContentTypes.IMAGE_FILE) {
-    const imageFile = part[ContentTypes.IMAGE_FILE];
-    const height = imageFile.height ?? 1920;
-    const width = imageFile.width ?? 1080;
-    return (
-      <Image
-        imagePath={imageFile.filepath}
-        height={height}
-        width={width}
-        altText={imageFile.filename ?? 'Uploaded Image'}
-        placeholderDimensions={{
-          height: height + 'px',
-          width: width + 'px',
-        }}
-      />
-    );
-  }
 
-  return null;
-});
+    return null;
+  },
+);
 
 export default Part;

client/src/components/Chat/Messages/Content/Parts/AgentUpdate.tsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { EModelEndpoint } from 'librechat-data-provider';
+import { useAgentsMapContext } from '~/Providers';
+import Icon from '~/components/Endpoints/Icon';
+
+interface AgentUpdateProps {
+  currentAgentId: string;
+}
+
+const AgentUpdate: React.FC<AgentUpdateProps> = ({ currentAgentId }) => {
+  const agentsMap = useAgentsMapContext() || {};
+  const currentAgent = useMemo(() => agentsMap[currentAgentId], [agentsMap, currentAgentId]);
+  if (!currentAgentId) {
+    return null;
+  }
+  return (
+    <div className="relative">
+      <div className="absolute -left-6 flex h-full w-4 items-center justify-center">
+        <div className="relative h-full w-4">
+          <div className="absolute left-0 top-0 h-1/2 w-px border border-border-medium"></div>
+          <div className="absolute left-0 top-1/2 h-px w-3 border border-border-medium"></div>
+        </div>
+      </div>
+      <div className="my-4 flex items-center gap-2">
+        <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
+          <Icon
+            endpoint={EModelEndpoint.agents}
+            agentName={currentAgent?.name ?? ''}
+            iconURL={currentAgent?.avatar?.filepath}
+            isCreatedByUser={false}
+          />
+        </div>
+        <div className="font-medium text-text-primary">{currentAgent?.name}</div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentUpdate;

client/src/components/Chat/Messages/Content/Parts/EmptyText.tsx

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+
+const EmptyTextPart = memo(() => {
+  return (
+    <div className="text-message mb-[0.625rem] flex min-h-[20px] flex-col items-start gap-3 overflow-visible">
+      <div className="markdown prose dark:prose-invert light w-full break-words dark:text-gray-100">
+        <div className="absolute">
+          <p className="submitting relative">
+            <span className="result-thinking" />
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default EmptyTextPart;

client/src/components/Chat/Messages/Content/Parts/Text.tsx

@@ -29,9 +29,7 @@ const TextPart = memo(({ text, isCreatedByUser, showCursor }: TextPartProps) =>
 
   const content: ContentType = useMemo(() => {
     if (!isCreatedByUser) {
-      return (
-        <Markdown content={text} showCursor={showCursorState} isLatestMessage={isLatestMessage} />
-      );
+      return <Markdown content={text} isLatestMessage={isLatestMessage} />;
     } else if (enableUserMsgMarkdown) {
       return <MarkdownLite content={text} />;
     } else {