✨ 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/Builder/MCP.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import type { MCP } from 'librechat-data-provider';
+import GearIcon from '~/components/svg/GearIcon';
+import MCPIcon from '~/components/svg/MCPIcon';
+import { cn } from '~/utils';
+
+type MCPProps = {
+  mcp: MCP;
+  onClick: () => void;
+};
+
+export default function MCP({ mcp, onClick }: MCPProps) {
+  const [isHovering, setIsHovering] = useState(false);
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onClick();
+        }
+      }}
+      className="group flex w-full rounded-lg border border-border-medium text-sm hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-text-primary"
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      aria-label={`MCP for ${mcp.metadata.name}`}
+    >
+      <div className="flex h-9 items-center gap-2 px-3">
+        {mcp.metadata.icon ? (
+          <img
+            src={mcp.metadata.icon}
+            alt={`${mcp.metadata.name} icon`}
+            className="h-6 w-6 rounded-md object-cover"
+          />
+        ) : (
+          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-surface-secondary">
+            <MCPIcon />
+          </div>
+        )}
+        <div
+          className="grow overflow-hidden text-ellipsis whitespace-nowrap"
+          style={{ wordBreak: 'break-all' }}
+        >
+          {mcp.metadata.name}
+        </div>
+      </div>
+      <div
+        className={cn(
+          'ml-auto h-9 w-9 min-w-9 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-tertiary focus:outline-none focus:ring-2 focus:ring-text-primary group-focus:flex',
+          isHovering ? 'flex' : 'hidden',
+        )}
+        aria-label="Settings"
+      >
+        <GearIcon className="icon-sm" aria-hidden="true" />
+      </div>
+    </div>
+  );
+}

client/src/components/SidePanel/Builder/MCPAuth.tsx

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import ActionsAuth from '~/components/SidePanel/Builder/ActionsAuth';
+import {
+  AuthorizationTypeEnum,
+  TokenExchangeMethodEnum,
+  AuthTypeEnum,
+} from 'librechat-data-provider';
+
+export default function MCPAuth() {
+  // Create a separate form for auth
+  const authMethods = useForm({
+    defaultValues: {
+      /* General */
+      type: AuthTypeEnum.None,
+      saved_auth_fields: false,
+      /* API key */
+      api_key: '',
+      authorization_type: AuthorizationTypeEnum.Basic,
+      custom_auth_header: '',
+      /* OAuth */
+      oauth_client_id: '',
+      oauth_client_secret: '',
+      authorization_url: '',
+      client_url: '',
+      scope: '',
+      token_exchange_method: TokenExchangeMethodEnum.DefaultPost,
+    },
+  });
+
+  const { watch, setValue } = authMethods;
+  const type = watch('type');
+
+  // Sync form state when auth type changes
+  useEffect(() => {
+    if (type === 'none') {
+      // Reset auth fields when type is none
+      setValue('api_key', '');
+      setValue('authorization_type', AuthorizationTypeEnum.Basic);
+      setValue('custom_auth_header', '');
+      setValue('oauth_client_id', '');
+      setValue('oauth_client_secret', '');
+      setValue('authorization_url', '');
+      setValue('client_url', '');
+      setValue('scope', '');
+      setValue('token_exchange_method', TokenExchangeMethodEnum.DefaultPost);
+    }
+  }, [type, setValue]);
+
+  return (
+    <FormProvider {...authMethods}>
+      <ActionsAuth />
+    </FormProvider>
+  );
+}