✨ feat: Agent Panel UI Enhancements (danny-avila#7800)

* feat: add MCP Panel to Agent Builder

- Add MCP server panel and configuration UI
- Implement MCP input forms and tool lists
- Add MCP icon and metadata support
- Integrate MCP with agent configuration
- Add localization support for MCP features
- Refactor components for better reusability
- Update types and add MCP-related mutations
- Fix small issues with Actions and AgentSelect
- Refactor AgentPanelSwitch and related components to use new
  AgentPanelContext to reduce prop drilling

* chore: import order

* chore: clean up import statements and unused var in ActionsPanel component

* refactor: AgentPanelContext with actions query, remove unnecessary `actions` state

- Added actions query using `useGetActionsQuery` to fetch actions based on the current agent ID.
- Removed now unused `setActions` state and related logic from `AgentPanelContext` and `AgentPanelSwitch` components.
- Updated `AgentPanelContextType` to reflect the removal of `setActions`.

* chore: re-order import statements in AgentConfig component

* chore: re-order import statements in ModelPanel component

* chore: update ModelPanel props to consolidated props to avoid passing unnecessary props

* chore: update import statements in Providers index file to include ToastProvider and AgentPanelContext exports

* chore: clean up import statements in VersionPanel component

* refactor: streamline AgentConfig and AgentPanel components

- Consolidated props in AgentConfig to only include necessary fields.
- Updated AgentPanel to remove unused state and props, enhancing clarity and maintainability.
- Reorganized import statements for better structure and readability.

* refactor: replace default agent form values with utility function

- Updated AgentsProvider, AgentPanel, AgentSelect, and DeleteButton components to use getDefaultAgentFormValues utility function instead of directly importing defaultAgentFormValues.
- Enhanced the initialization of agent forms by incorporating localStorage values for model and provider in the new utility function.

* chore: comment out rendering MCPSection

---------

Co-authored-by: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>

Author: danny-avila

client/src/Providers/AgentPanelContext.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useContext, useState } from 'react';
+import { Action, MCP, EModelEndpoint } from 'librechat-data-provider';
+import type { AgentPanelContextType } from '~/common';
+import { useGetActionsQuery } from '~/data-provider';
+import { Panel } from '~/common';
+
+const AgentPanelContext = createContext<AgentPanelContextType | undefined>(undefined);
+
+export function useAgentPanelContext() {
+  const context = useContext(AgentPanelContext);
+  if (context === undefined) {
+    throw new Error('useAgentPanelContext must be used within an AgentPanelProvider');
+  }
+  return context;
+}
+
+/** Houses relevant state for the Agent Form Panels (formerly 'commonProps') */
+export function AgentPanelProvider({ children }: { children: React.ReactNode }) {
+  const [mcp, setMcp] = useState<MCP | undefined>(undefined);
+  const [mcps, setMcps] = useState<MCP[] | undefined>(undefined);
+  const [action, setAction] = useState<Action | undefined>(undefined);
+  const [activePanel, setActivePanel] = useState<Panel>(Panel.builder);
+  const [agent_id, setCurrentAgentId] = useState<string | undefined>(undefined);
+
+  const { data: actions } = useGetActionsQuery(EModelEndpoint.agents, {
+    enabled: !!agent_id,
+  });
+
+  const value = {
+    action,
+    setAction,
+    mcp,
+    setMcp,
+    mcps,
+    setMcps,
+    activePanel,
+    setActivePanel,
+    setCurrentAgentId,
+    agent_id,
+    /** Query data for actions */
+    actions,
+  };
+
+  return <AgentPanelContext.Provider value={value}>{children}</AgentPanelContext.Provider>;
+}

client/src/Providers/AgentsContext.tsx

@@ -1,8 +1,8 @@
 import { useForm, FormProvider } from 'react-hook-form';
 import { createContext, useContext } from 'react';
-import { defaultAgentFormValues } from 'librechat-data-provider';
 import type { UseFormReturn } from 'react-hook-form';
 import type { AgentForm } from '~/common';
+import { getDefaultAgentFormValues } from '~/utils';
 
 type AgentsContextType = UseFormReturn<AgentForm>;
 
@@ -20,7 +20,7 @@ export function useAgentsContext() {
 
 export default function AgentsProvider({ children }) {
   const methods = useForm<AgentForm>({
-    defaultValues: defaultAgentFormValues,
+    defaultValues: getDefaultAgentFormValues(),
   });
 
   return <FormProvider {...methods}>{children}</FormProvider>;

client/src/Providers/index.ts

@@ -1,6 +1,7 @@
-export { default as ToastProvider } from './ToastContext';
 export { default as AssistantsProvider } from './AssistantsContext';
 export { default as AgentsProvider } from './AgentsContext';
+export { default as ToastProvider } from './ToastContext';
+export * from './AgentPanelContext';
 export * from './ChatContext';
 export * from './ShareContext';
 export * from './ToastContext';

client/src/common/mcp.ts

@@ -0,0 +1,26 @@
+import {
+  AuthorizationTypeEnum,
+  AuthTypeEnum,
+  TokenExchangeMethodEnum,
+} from 'librechat-data-provider';
+import { MCPForm } from '~/common/types';
+
+export const defaultMCPFormValues: MCPForm = {
+  type: AuthTypeEnum.None,
+  saved_auth_fields: false,
+  api_key: '',
+  authorization_type: AuthorizationTypeEnum.Basic,
+  custom_auth_header: '',
+  oauth_client_id: '',
+  oauth_client_secret: '',
+  authorization_url: '',
+  client_url: '',
+  scope: '',
+  token_exchange_method: TokenExchangeMethodEnum.DefaultPost,
+  name: '',
+  description: '',
+  url: '',
+  tools: [],
+  icon: '',
+  trust: false,
+};

client/src/common/types.ts

@@ -143,6 +143,7 @@ export enum Panel {
   actions = 'actions',
   model = 'model',
   version = 'version',
+  mcp = 'mcp',
 }
 
 export type FileSetter =
@@ -166,6 +167,15 @@ export type ActionAuthForm = {
   token_exchange_method: t.TokenExchangeMethodEnum;
 };
 
+export type MCPForm = ActionAuthForm & {
+  name?: string;
+  description?: string;
+  url?: string;
+  tools?: string[];
+  icon?: string;
+  trust?: boolean;
+};
+
 export type ActionWithNullableMetadata = Omit<t.Action, 'metadata'> & {
   metadata: t.ActionMetadata | null;
 };
@@ -188,16 +198,33 @@ export type AgentPanelProps = {
   index?: number;
   agent_id?: string;
   activePanel?: string;
+  mcp?: t.MCP;
+  mcps?: t.MCP[];
   action?: t.Action;
   actions?: t.Action[];
   createMutation: UseMutationResult<t.Agent, Error, t.AgentCreateParams>;
   setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
+  setMcp: React.Dispatch<React.SetStateAction<t.MCP | undefined>>;
   setAction: React.Dispatch<React.SetStateAction<t.Action | undefined>>;
   endpointsConfig?: t.TEndpointsConfig;
   setCurrentAgentId: React.Dispatch<React.SetStateAction<string | undefined>>;
   agentsConfig?: t.TAgentsEndpoint | null;
 };
 
+export type AgentPanelContextType = {
+  action?: t.Action;
+  actions?: t.Action[];
+  setAction: React.Dispatch<React.SetStateAction<t.Action | undefined>>;
+  mcp?: t.MCP;
+  mcps?: t.MCP[];
+  setMcp: React.Dispatch<React.SetStateAction<t.MCP | undefined>>;
+  setMcps: React.Dispatch<React.SetStateAction<t.MCP[] | undefined>>;
+  activePanel?: string;
+  setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
+  setCurrentAgentId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  agent_id?: string;
+};
+
 export type AgentModelPanelProps = {
   agent_id?: string;
   providers: Option[];

client/src/components/SidePanel/Agents/ActionsPanel.tsx

@@ -1,31 +1,27 @@
 import { useEffect } from 'react';
+import { ChevronLeft } from 'lucide-react';
 import { useForm, FormProvider } from 'react-hook-form';
 import {
   AuthTypeEnum,
   AuthorizationTypeEnum,
   TokenExchangeMethodEnum,
 } from 'librechat-data-provider';
-import { ChevronLeft } from 'lucide-react';
-import type { AgentPanelProps, ActionAuthForm } from '~/common';
 import ActionsAuth from '~/components/SidePanel/Builder/ActionsAuth';
+import { useAgentPanelContext } from '~/Providers/AgentPanelContext';
 import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
 import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 import { useDeleteAgentAction } from '~/data-provider';
+import type { ActionAuthForm } from '~/common';
 import useLocalize from '~/hooks/useLocalize';
 import { useToastContext } from '~/Providers';
 import { TrashIcon } from '~/components/svg';
 import ActionsInput from './ActionsInput';
 import { Panel } from '~/common';
 
-export default function ActionsPanel({
-  // activePanel,
-  action,
-  setAction,
-  agent_id,
-  setActivePanel,
-}: AgentPanelProps) {
+export default function ActionsPanel() {
   const localize = useLocalize();
   const { showToast } = useToastContext();
+  const { setActivePanel, action, setAction, agent_id } = useAgentPanelContext();
   const deleteAgentAction = useDeleteAgentAction({
     onSuccess: () => {
       showToast({
@@ -62,7 +58,7 @@ export default function ActionsPanel({
     },
   });
 
-  const { reset, watch } = methods;
+  const { reset } = methods;
 
   useEffect(() => {
     if (action?.metadata.auth) {

client/src/components/SidePanel/Agents/AgentConfig.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useMemo, useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import React, { useState, useMemo, useCallback } from 'react';
 import { Controller, useWatch, useFormContext } from 'react-hook-form';
 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 { useToastContext, useFileMapContext } from '~/Providers';
+import { useToastContext, useFileMapContext, useAgentPanelContext } from '~/Providers';
+import type { AgentForm, AgentPanelProps, IconComponentTypes } from '~/common';
 import Action from '~/components/SidePanel/Builder/Action';
 import { ToolSelectDialog } from '~/components/Tools';
 import { icons } from '~/hooks/Endpoint/Icons';
@@ -15,6 +15,7 @@ import AgentAvatar from './AgentAvatar';
 import FileContext from './FileContext';
 import SearchForm from './Search/Form';
 import { useLocalize } from '~/hooks';
+import MCPSection from './MCPSection';
 import FileSearch from './FileSearch';
 import Artifacts from './Artifacts';
 import AgentTool from './AgentTool';
@@ -29,23 +30,19 @@ const inputClass = cn(
 );
 
 export default function AgentConfig({
-  setAction,
-  actions = [],
   agentsConfig,
   createMutation,
-  setActivePanel,
   endpointsConfig,
-}: AgentPanelProps) {
+}: Pick<AgentPanelProps, 'agentsConfig' | 'createMutation' | 'endpointsConfig'>) {
+  const localize = useLocalize();
   const fileMap = useFileMapContext();
   const queryClient = useQueryClient();
-
-  const allTools = queryClient.getQueryData<TPlugin[]>([QueryKeys.tools]) ?? [];
   const { showToast } = useToastContext();
-  const localize = useLocalize();
-
+  const methods = useFormContext<AgentForm>();
   const [showToolDialog, setShowToolDialog] = useState(false);
+  const { actions, setAction, setActivePanel } = useAgentPanelContext();
 
-  const methods = useFormContext<AgentForm>();
+  const allTools = queryClient.getQueryData<TPlugin[]>([QueryKeys.tools]) ?? [];
 
   const { control } = methods;
   const provider = useWatch({ control, name: 'provider' });
@@ -299,7 +296,7 @@ export default function AgentConfig({
                 agent_id={agent_id}
               />
             ))}
-            {actions
+            {(actions ?? [])
               .filter((action) => action.agent_id === agent_id)
               .map((action, i) => (
                 <Action
@@ -340,6 +337,8 @@ export default function AgentConfig({
             </div>
           </div>
         </div>
+        {/* MCP Section */}
+        {/* <MCPSection /> */}
       </div>
       <ToolSelectDialog
         isOpen={showToolDialog}

client/src/components/SidePanel/Agents/AgentPanel.tsx

@@ -7,20 +7,22 @@ import {
   Constants,
   SystemRoles,
   EModelEndpoint,
+  TAgentsEndpoint,
+  TEndpointsConfig,
   isAssistantsEndpoint,
-  defaultAgentFormValues,
 } from 'librechat-data-provider';
-import type { AgentForm, AgentPanelProps, StringOption } from '~/common';
+import type { AgentForm, StringOption } from '~/common';
 import {
   useCreateAgentMutation,
   useUpdateAgentMutation,
   useGetAgentByIdQuery,
 } from '~/data-provider';
+import { createProviderOption, getDefaultAgentFormValues } from '~/utils';
 import { useSelectAgent, useLocalize, useAuthContext } from '~/hooks';
+import { useAgentPanelContext } from '~/Providers/AgentPanelContext';
 import AgentPanelSkeleton from './AgentPanelSkeleton';
-import { createProviderOption } from '~/utils';
-import { useToastContext } from '~/Providers';
 import AdvancedPanel from './Advanced/AdvancedPanel';
+import { useToastContext } from '~/Providers';
 import AgentConfig from './AgentConfig';
 import AgentSelect from './AgentSelect';
 import AgentFooter from './AgentFooter';
@@ -29,18 +31,21 @@ import ModelPanel from './ModelPanel';
 import { Panel } from '~/common';
 
 export default function AgentPanel({
-  setAction,
-  activePanel,
-  actions = [],
-  setActivePanel,
-  agent_id: current_agent_id,
-  setCurrentAgentId,
   agentsConfig,
   endpointsConfig,
-}: AgentPanelProps) {
+}: {
+  agentsConfig: TAgentsEndpoint | null;
+  endpointsConfig: TEndpointsConfig;
+}) {
   const localize = useLocalize();
   const { user } = useAuthContext();
   const { showToast } = useToastContext();
+  const {
+    activePanel,
+    setActivePanel,
+    setCurrentAgentId,
+    agent_id: current_agent_id,
+  } = useAgentPanelContext();
 
   const { onSelect: onSelectAgent } = useSelectAgent();
 
@@ -51,7 +56,7 @@ export default function AgentPanel({
 
   const models = useMemo(() => modelsQuery.data ?? {}, [modelsQuery.data]);
   const methods = useForm<AgentForm>({
-    defaultValues: defaultAgentFormValues,
+    defaultValues: getDefaultAgentFormValues(),
   });
 
   const { control, handleSubmit, reset } = methods;
@@ -277,7 +282,7 @@ export default function AgentPanel({
                 variant="outline"
                 className="w-full justify-center"
                 onClick={() => {
-                  reset(defaultAgentFormValues);
+                  reset(getDefaultAgentFormValues());
                   setCurrentAgentId(undefined);
                 }}
                 disabled={agentQuery.isInitialLoading}
@@ -315,22 +320,13 @@ export default function AgentPanel({
           </div>
         )}
         {canEditAgent && !agentQuery.isInitialLoading && activePanel === Panel.model && (
-          <ModelPanel
-            setActivePanel={setActivePanel}
-            agent_id={agent_id}
-            providers={providers}
-            models={models}
-          />
+          <ModelPanel models={models} providers={providers} setActivePanel={setActivePanel} />
         )}
         {canEditAgent && !agentQuery.isInitialLoading && activePanel === Panel.builder && (
           <AgentConfig
-            actions={actions}
-            setAction={setAction}
             createMutation={create}
             agentsConfig={agentsConfig}
-            setActivePanel={setActivePanel}
             endpointsConfig={endpointsConfig}
-            setCurrentAgentId={setCurrentAgentId}
           />
         )}
         {canEditAgent && !agentQuery.isInitialLoading && activePanel === Panel.advanced && (