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

@@ -0,0 +1,64 @@
+import { useState, useEffect, useRef } from 'react';
+import SquirclePlusIcon from '~/components/svg/SquirclePlusIcon';
+import { useLocalize } from '~/hooks';
+
+interface MCPIconProps {
+  icon?: string;
+  onIconChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function MCPIcon({ icon, onIconChange }: MCPIconProps) {
+  const [previewUrl, setPreviewUrl] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const localize = useLocalize();
+
+  useEffect(() => {
+    if (icon) {
+      setPreviewUrl(icon);
+    } else {
+      setPreviewUrl('');
+    }
+  }, [icon]);
+
+  const handleClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+      fileInputRef.current.click();
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-4">
+      <div
+        onClick={handleClick}
+        className="bg-token-surface-secondary dark:bg-token-surface-tertiary border-token-border-medium flex h-16 w-16 shrink-0 cursor-pointer items-center justify-center rounded-[1.5rem] border-2 border-dashed"
+      >
+        {previewUrl ? (
+          <img
+            src={previewUrl}
+            className="h-full w-full rounded-[1.5rem] object-cover"
+            alt="MCP Icon"
+            width="64"
+            height="64"
+          />
+        ) : (
+          <SquirclePlusIcon />
+        )}
+      </div>
+      <div className="flex flex-col gap-1">
+        <span className="token-text-secondary text-sm">
+          {localize('com_ui_icon')} {localize('com_ui_optional')}
+        </span>
+        <span className="token-text-tertiary text-xs">{localize('com_agents_mcp_icon_size')}</span>
+      </div>
+      <input
+        accept="image/png,.png,image/jpeg,.jpg,.jpeg,image/gif,.gif,image/webp,.webp"
+        multiple={false}
+        type="file"
+        style={{ display: 'none' }}
+        onChange={onIconChange}
+        ref={fileInputRef}
+      />
+    </div>
+  );
+}