✨ 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/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';