✨ feat: Agent Panel UI Enhancements (#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>

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

@@ -1,22 +1,29 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { EModelEndpoint, AgentCapabilities } from 'librechat-data-provider';
-import type { ActionsEndpoint } from '~/common';
-import type { Action, TConfig, TEndpointsConfig, TAgentsEndpoint } from 'librechat-data-provider';
-import { useGetActionsQuery, useGetEndpointsQuery, useCreateAgentMutation } from '~/data-provider';
+import type { TConfig, TEndpointsConfig, TAgentsEndpoint } from 'librechat-data-provider';
+import { AgentPanelProvider, useAgentPanelContext } from '~/Providers/AgentPanelContext';
+import { useGetEndpointsQuery } from '~/data-provider';
+import VersionPanel from './Version/VersionPanel';
 import { useChatContext } from '~/Providers';
 import ActionsPanel from './ActionsPanel';
 import AgentPanel from './AgentPanel';
-import VersionPanel from './Version/VersionPanel';
+import MCPPanel from './MCPPanel';
 import { Panel } from '~/common';
 
 export default function AgentPanelSwitch() {
-  const { conversation, index } = useChatContext();
-  const [activePanel, setActivePanel] = useState(Panel.builder);
-  const [action, setAction] = useState<Action | undefined>(undefined);
-  const [currentAgentId, setCurrentAgentId] = useState<string | undefined>(conversation?.agent_id);
-  const { data: actions = [] } = useGetActionsQuery(conversation?.endpoint as ActionsEndpoint);
+  return (
+    <AgentPanelProvider>
+      <AgentPanelSwitchWithContext />
+    </AgentPanelProvider>
+  );
+}
+
+function AgentPanelSwitchWithContext() {
+  const { conversation } = useChatContext();
+  const { activePanel, setCurrentAgentId } = useAgentPanelContext();
+
+  // TODO: Implement MCP endpoint
   const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
-  const createMutation = useCreateAgentMutation();
 
   const agentsConfig = useMemo<TAgentsEndpoint | null>(() => {
     const config = endpointsConfig?.[EModelEndpoint.agents] ?? null;
@@ -35,39 +42,20 @@ export default function AgentPanelSwitch() {
     if (agent_id) {
       setCurrentAgentId(agent_id);
     }
-  }, [conversation?.agent_id]);
+  }, [setCurrentAgentId, conversation?.agent_id]);
 
   if (!conversation?.endpoint) {
     return null;
   }
 
-  const commonProps = {
-    index,
-    action,
-    actions,
-    setAction,
-    activePanel,
-    setActivePanel,
-    setCurrentAgentId,
-    agent_id: currentAgentId,
-    createMutation,
-  };
-
   if (activePanel === Panel.actions) {
-    return <ActionsPanel {...commonProps} />;
+    return <ActionsPanel />;
   }
-
   if (activePanel === Panel.version) {
-    return (
-      <VersionPanel
-        setActivePanel={setActivePanel}
-        agentsConfig={agentsConfig}
-        selectedAgentId={currentAgentId}
-      />
-    );
+    return <VersionPanel />;
   }
-
-  return (
-    <AgentPanel {...commonProps} agentsConfig={agentsConfig} endpointsConfig={endpointsConfig} />
-  );
+  if (activePanel === Panel.mcp) {
+    return <MCPPanel />;
+  }
+  return <AgentPanel agentsConfig={agentsConfig} endpointsConfig={endpointsConfig} />;
 }