🔗 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/SidePanel/Agents/AgentConfig.tsx

@@ -1,32 +1,19 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { Controller, useWatch, useFormContext } from 'react-hook-form';
-import {
-  QueryKeys,
-  SystemRoles,
-  Permissions,
-  EModelEndpoint,
-  PermissionTypes,
-  AgentCapabilities,
-} from 'librechat-data-provider';
+import { QueryKeys, EModelEndpoint, AgentCapabilities } from 'librechat-data-provider';
 import type { TPlugin } from 'librechat-data-provider';
 import type { AgentForm, AgentPanelProps, IconComponentTypes } from '~/common';
 import { cn, defaultTextProps, removeFocusOutlines, getEndpointField, getIconKey } from '~/utils';
-import { useCreateAgentMutation, useUpdateAgentMutation } from '~/data-provider';
-import { useLocalize, useAuthContext, useHasAccess } from '~/hooks';
 import { useToastContext, useFileMapContext } from '~/Providers';
 import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
 import Action from '~/components/SidePanel/Builder/Action';
 import { ToolSelectDialog } from '~/components/Tools';
-import DuplicateAgent from './DuplicateAgent';
 import { processAgentOption } from '~/utils';
-import AdminSettings from './AdminSettings';
-import DeleteButton from './DeleteButton';
 import AgentAvatar from './AgentAvatar';
 import FileContext from './FileContext';
-import { Spinner } from '~/components';
+import { useLocalize } from '~/hooks';
 import FileSearch from './FileSearch';
-import ShareAgent from './ShareAgent';
 import Artifacts from './Artifacts';
 import AgentTool from './AgentTool';
 import CodeForm from './Code/Form';
@@ -43,11 +30,10 @@ export default function AgentConfig({
   setAction,
   actions = [],
   agentsConfig,
-  endpointsConfig,
+  createMutation,
   setActivePanel,
-  setCurrentAgentId,
+  endpointsConfig,
 }: AgentPanelProps) {
-  const { user } = useAuthContext();
   const fileMap = useFileMapContext();
   const queryClient = useQueryClient();
 
@@ -66,11 +52,6 @@ export default function AgentConfig({
   const tools = useWatch({ control, name: 'tools' });
   const agent_id = useWatch({ control, name: 'id' });
 
-  const hasAccessToShareAgents = useHasAccess({
-    permissionType: PermissionTypes.AGENTS,
-    permission: Permissions.SHARED_GLOBAL,
-  });
-
   const toolsEnabled = useMemo(
     () => agentsConfig?.capabilities.includes(AgentCapabilities.tools),
     [agentsConfig],
@@ -156,46 +137,6 @@ export default function AgentConfig({
     return _agent.code_files ?? [];
   }, [agent, agent_id, fileMap]);
 
-  /* Mutations */
-  const update = useUpdateAgentMutation({
-    onSuccess: (data) => {
-      showToast({
-        message: `${localize('com_assistants_update_success')} ${
-          data.name ?? localize('com_ui_agent')
-        }`,
-      });
-    },
-    onError: (err) => {
-      const error = err as Error;
-      showToast({
-        message: `${localize('com_agents_update_error')}${
-          error.message ? ` ${localize('com_ui_error')}: ${error.message}` : ''
-        }`,
-        status: 'error',
-      });
-    },
-  });
-
-  const create = useCreateAgentMutation({
-    onSuccess: (data) => {
-      setCurrentAgentId(data.id);
-      showToast({
-        message: `${localize('com_assistants_create_success')} ${
-          data.name ?? localize('com_ui_agent')
-        }`,
-      });
-    },
-    onError: (err) => {
-      const error = err as Error;
-      showToast({
-        message: `${localize('com_agents_create_error')}${
-          error.message ? ` ${localize('com_ui_error')}: ${error.message}` : ''
-        }`,
-        status: 'error',
-      });
-    },
-  });
-
   const handleAddActions = useCallback(() => {
     if (!agent_id) {
       showToast({
@@ -225,26 +166,14 @@ export default function AgentConfig({
     Icon = icons[iconKey];
   }
 
-  const renderSaveButton = () => {
-    if (create.isLoading || update.isLoading) {
-      return <Spinner className="icon-md" aria-hidden="true" />;
-    }
-
-    if (agent_id) {
-      return localize('com_ui_save');
-    }
-
-    return localize('com_ui_create');
-  };
-
   return (
     <>
-      <div className="h-auto bg-white px-4 pb-8 pt-3 dark:bg-transparent">
+      <div className="h-auto bg-white px-4 pt-3 dark:bg-transparent">
         {/* Avatar & Name */}
         <div className="mb-4">
           <AgentAvatar
-            createMutation={create}
             agent_id={agent_id}
+            createMutation={createMutation}
             avatar={agent?.['avatar'] ?? null}
           />
           <label className={labelClass} htmlFor="name">
@@ -366,12 +295,12 @@ export default function AgentConfig({
             </label>
             {/* Code Execution */}
             {codeEnabled && <CodeForm agent_id={agent_id} files={code_files} />}
-            {/* File Search */}
-            {fileSearchEnabled && <FileSearch agent_id={agent_id} files={knowledge_files} />}
-            {/* Artifacts */}
-            {artifactsEnabled && <Artifacts />}
             {/* File Context (OCR) */}
             {ocrEnabled && <FileContext agent_id={agent_id} files={context_files} />}
+            {/* Artifacts */}
+            {artifactsEnabled && <Artifacts />}
+            {/* File Search */}
+            {fileSearchEnabled && <FileSearch agent_id={agent_id} files={knowledge_files} />}
           </div>
         )}
         {/* Agent Tools & Actions */}
@@ -431,34 +360,6 @@ export default function AgentConfig({
             </div>
           </div>
         </div>
-        {user?.role === SystemRoles.ADMIN && <AdminSettings />}
-        {/* Context Button */}
-        <div className="flex items-center justify-end gap-2">
-          <DeleteButton
-            agent_id={agent_id}
-            setCurrentAgentId={setCurrentAgentId}
-            createMutation={create}
-          />
-          {(agent?.author === user?.id || user?.role === SystemRoles.ADMIN) &&
-            hasAccessToShareAgents && (
-            <ShareAgent
-              agent_id={agent_id}
-              agentName={agent?.name ?? ''}
-              projectIds={agent?.projectIds ?? []}
-              isCollaborative={agent?.isCollaborative}
-            />
-          )}
-          {agent && agent.author === user?.id && <DuplicateAgent agent_id={agent_id} />}
-          {/* Submit Button */}
-          <button
-            className="btn btn-primary focus:shadow-outline flex h-9 w-full items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
-            type="submit"
-            disabled={create.isLoading || update.isLoading}
-            aria-busy={create.isLoading || update.isLoading}
-          >
-            {renderSaveButton()}
-          </button>
-        </div>
       </div>
       <ToolSelectDialog
         isOpen={showToolDialog}