🤖 feat: Streamline Endpoints to Agent Framework (#8013)

* refactor(buildEndpointOption): Improve error logging in middleware, consolidate `isAgents` builder logic, remove adding `modelsConfig` to `endpointOption`

* refactor: parameter extraction and organization in agent services, minimize redundancy of shared fields across objects, make clear distinction of parameters processed uniquely by LibreChat vs LLM Provider Configs

* refactor(createPayload): streamline all endpoints to agent route

* fix: add `modelLabel` to response sender options for agent initialization

* chore: correct log message context in EditController abort controller cleanup

* chore: remove unused abortRequest hook

* chore: remove unused addToCache module and its dependencies

* refactor: remove AskController and related routes, update endpoint URLs (now all streamlined to agents route)

* chore: remove unused bedrock route and its related imports

* refactor: simplify response sender logic for Google endpoint

* chore: add `modelDisplayLabel` handling for agents endpoint

* feat: add file search capability to ephemeral agents, update code interpreter selection based of file upload, consolidate main upload menu for all endpoints

* feat: implement useToolToggle hook for managing tool toggle state, refactor CodeInterpreter and WebSearch components to utilize new hook

* feat: add ToolsDropdown component to BadgeRow for enhanced tool options

* feat: introduce BadgeRowContext and BadgeRowProvider for managing conversation state, refactor related components to utilize context

* feat: implement useMCPSelect hook for managing MCP selection state, refactor MCPSelect component to utilize new hook

* feat: enhance BadgeRowContext with MCPSelect and tool toggle functionality, refactor related components to utilize updated context and hooks

* refactor: streamline useToolToggle hook by integrating setEphemeralAgent directly into toggle logic and removing redundant setValue function

* refactor: consolidate codeApiKeyForm and searchApiKeyForm from CodeInterpreter and WebSearch to utilize new context properties

* refactor: update CheckboxButton to support controlled state and enhance ToolsDropdown with permission-based toggles for web search and code interpreter

* refactor: conditionally render CheckboxButton in CodeInterpreter and WebSearch components for improved UI responsiveness

* chore: add jotai dependency to package.json and package-lock.json

* chore: update brace-expansion package to version 2.0.2 in package-lock.json due to CVE-2025-5889

* Revert "chore: add jotai dependency to package.json and package-lock.json"

This reverts commit 69b6997396.

* refactor: add pinning functionality to CodeInterpreter and WebSearch components, and enhance ToolsDropdown with pin toggle for web search and code interpreter

* chore: move MCPIcon to correct location, remove duplicate

* fix: update MCP import to use type-only import from librechat-data-provider

* feat: implement MCPSubMenu component and integrate pinning functionality into ToolsDropdown

* fix: cycling to submenu by using parent menu context

* feat: add FileSearch component and integrate it into BadgeRow and ToolsDropdown

* chore: import order

* chore: remove agent specific logic that would block functionality for streamlined endpoints

* chore: linting for `createContextHandlers`

* chore: ensure ToolsDropdown doesn't show up for agents

* chore: ensure tool resource is selected when dragged to UI

* chore: update file search behavior to simulate legacy functionality

* feat: ToolDialogs with multiple trigger references, add settings to tool dropdown

* refactor: simplify web search and code interpreter settings checks

* chore: simplify local storage key for pinned state in useToolToggle

* refactor: reinstate agent check in AttachFileChat component, as individual providers will ahve different file configurations

* ci: increase timeout for MongoDB connection in Agent tests

client/src/components/ui/CheckboxButton.tsx

@@ -9,11 +9,12 @@ const CheckboxButton = React.forwardRef<
     icon?: React.ReactNode;
     label: string;
     className?: string;
+    checked?: boolean;
     defaultChecked?: boolean;
     isCheckedClassName?: string;
-    setValue?: (e: React.ChangeEvent<HTMLInputElement>, isChecked: boolean) => void;
+    setValue?: (values: { e?: React.ChangeEvent<HTMLInputElement>; isChecked: boolean }) => void;
   }
->(({ icon, label, setValue, className, defaultChecked, isCheckedClassName }, ref) => {
+>(({ icon, label, setValue, className, checked, defaultChecked, isCheckedClassName }, ref) => {
   const checkbox = useCheckboxStore();
   const isChecked = useStoreState(checkbox, (state) => state?.value);
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -21,20 +22,28 @@ const CheckboxButton = React.forwardRef<
     if (typeof isChecked !== 'boolean') {
       return;
     }
-    setValue?.(e, !isChecked);
+    setValue?.({ e, isChecked: !isChecked });
   };
+
+  // Sync with controlled checked prop
   useEffect(() => {
-    if (defaultChecked) {
+    if (checked !== undefined) {
+      checkbox.setValue(checked);
+    }
+  }, [checked, checkbox]);
+
+  // Set initial value from defaultChecked
+  useEffect(() => {
+    if (defaultChecked !== undefined && checked === undefined) {
       checkbox.setValue(defaultChecked);
     }
-  }, [defaultChecked, checkbox]);
+  }, [defaultChecked, checked, checkbox]);
 
   return (
     <Checkbox
       ref={ref}
       store={checkbox}
       onChange={onChange}
-      defaultChecked={defaultChecked}
       className={cn(
         // Base styling from MultiSelect's selectClassName
         'group relative inline-flex items-center justify-center gap-1.5',

client/src/components/ui/MCPIcon.tsx

@@ -1,31 +0,0 @@
-export default function MCPIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      width="195"
-      height="195"
-      viewBox="0 2 195 195"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        d="M25 97.8528L92.8823 29.9706C102.255 20.598 117.451 20.598 126.823 29.9706V29.9706C136.196 39.3431 136.196 54.5391 126.823 63.9117L75.5581 115.177"
-        stroke="currentColor"
-        strokeWidth="12"
-        strokeLinecap="round"
-      />
-      <path
-        d="M76.2653 114.47L126.823 63.9117C136.196 54.5391 151.392 54.5391 160.765 63.9117L161.118 64.2652C170.491 73.6378 170.491 88.8338 161.118 98.2063L99.7248 159.6C96.6006 162.724 96.6006 167.789 99.7248 170.913L112.331 183.52"
-        stroke="currentColor"
-        strokeWidth="12"
-        strokeLinecap="round"
-      />
-      <path
-        d="M109.853 46.9411L59.6482 97.1457C50.2757 106.518 50.2757 121.714 59.6482 131.087V131.087C69.0208 140.459 84.2168 140.459 93.5894 131.087L143.794 80.8822"
-        stroke="currentColor"
-        strokeWidth="12"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}

client/src/components/ui/OriginalDialog.tsx

@@ -5,16 +5,26 @@ import { cn } from '~/utils';
 
 interface OGDialogProps extends DialogPrimitive.DialogProps {
   triggerRef?: React.RefObject<HTMLButtonElement | HTMLInputElement | null>;
+  triggerRefs?: React.RefObject<HTMLButtonElement | HTMLInputElement | null>[];
 }
 
 const Dialog = React.forwardRef<HTMLDivElement, OGDialogProps>(
-  ({ children, triggerRef, onOpenChange, ...props }, _ref) => {
+  ({ children, triggerRef, triggerRefs, onOpenChange, ...props }, _ref) => {
     const handleOpenChange = (open: boolean) => {
       if (!open && triggerRef?.current) {
         setTimeout(() => {
           triggerRef.current?.focus();
         }, 0);
       }
+      if (triggerRefs?.length) {
+        triggerRefs.forEach((ref) => {
+          if (ref?.current) {
+            setTimeout(() => {
+              ref.current?.focus();
+            }, 0);
+          }
+        });
+      }
       onOpenChange?.(open);
     };
 

client/src/components/ui/index.ts

@@ -28,7 +28,6 @@ export * from './Pagination';
 export * from './Progress';
 export * from './InputOTP';
 export { default as Badge } from './Badge';
-export { default as MCPIcon } from './MCPIcon';
 export { default as Combobox } from './Combobox';
 export { default as Dropdown } from './Dropdown';
 export { default as SplitText } from './SplitText';