✨ refactor: Integrate Capabilities into Agent File Uploads and Tool Handling (#5048)

* refactor: support drag/drop files for agents, handle undefined tool_resource edge cases

* refactor: consolidate endpoints config logic to dedicated getter

* refactor: Enhance agent tools loading logic to respect capabilities and filter tools accordingly

* refactor: Integrate endpoint capabilities into file upload dropdown for dynamic resource handling

* refactor: Implement capability checks for agent file upload operations

* fix: non-image tool_resource check

client/src/components/Chat/Input/Files/AttachFileMenu.tsx

@@ -1,7 +1,8 @@
 import * as Ariakit from '@ariakit/react';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useMemo } from 'react';
 import { FileSearch, ImageUpIcon, TerminalSquareIcon } from 'lucide-react';
-import { EToolResources } from 'librechat-data-provider';
+import { EToolResources, EModelEndpoint } from 'librechat-data-provider';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import { FileUpload, TooltipAnchor, DropdownPopup } from '~/components/ui';
 import { AttachmentIcon } from '~/components/svg';
 import { useLocalize } from '~/hooks';
@@ -19,6 +20,12 @@ const AttachFile = ({ isRTL, disabled, setToolResource, handleFileChange }: Atta
   const isUploadDisabled = disabled ?? false;
   const inputRef = useRef<HTMLInputElement>(null);
   const [isPopoverActive, setIsPopoverActive] = useState(false);
+  const { data: endpointsConfig } = useGetEndpointsQuery();
+
+  const capabilities = useMemo(
+    () => endpointsConfig?.[EModelEndpoint.agents]?.capabilities ?? [],
+    [endpointsConfig],
+  );
 
   const handleUploadClick = (isImage?: boolean) => {
     if (!inputRef.current) {
@@ -30,32 +37,42 @@ const AttachFile = ({ isRTL, disabled, setToolResource, handleFileChange }: Atta
     inputRef.current.accept = '';
   };
 
-  const dropdownItems = [
-    {
-      label: localize('com_ui_upload_image_input'),
-      onClick: () => {
-        setToolResource?.(undefined);
-        handleUploadClick(true);
+  const dropdownItems = useMemo(() => {
+    const items = [
+      {
+        label: localize('com_ui_upload_image_input'),
+        onClick: () => {
+          setToolResource?.(undefined);
+          handleUploadClick(true);
+        },
+        icon: <ImageUpIcon className="icon-md" />,
       },
-      icon: <ImageUpIcon className="icon-md" />,
-    },
-    {
-      label: localize('com_ui_upload_file_search'),
-      onClick: () => {
-        setToolResource?.(EToolResources.file_search);
-        handleUploadClick();
-      },
-      icon: <FileSearch className="icon-md" />,
-    },
-    {
-      label: localize('com_ui_upload_code_files'),
-      onClick: () => {
-        setToolResource?.(EToolResources.execute_code);
-        handleUploadClick();
-      },
-      icon: <TerminalSquareIcon className="icon-md" />,
-    },
-  ];
+    ];
+
+    if (capabilities.includes(EToolResources.file_search)) {
+      items.push({
+        label: localize('com_ui_upload_file_search'),
+        onClick: () => {
+          setToolResource?.(EToolResources.file_search);
+          handleUploadClick();
+        },
+        icon: <FileSearch className="icon-md" />,
+      });
+    }
+
+    if (capabilities.includes(EToolResources.execute_code)) {
+      items.push({
+        label: localize('com_ui_upload_code_files'),
+        onClick: () => {
+          setToolResource?.(EToolResources.execute_code);
+          handleUploadClick();
+        },
+        icon: <TerminalSquareIcon className="icon-md" />,
+      });
+    }
+
+    return items;
+  }, [capabilities, localize, setToolResource]);
 
   const menuTrigger = (
     <TooltipAnchor

client/src/components/Chat/Input/Files/DragDropModal.tsx

@@ -0,0 +1,90 @@
+import React, { useMemo } from 'react';
+import { EModelEndpoint, EToolResources } from 'librechat-data-provider';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
+import { FileSearch, ImageUpIcon, TerminalSquareIcon } from 'lucide-react';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
+import useLocalize from '~/hooks/useLocalize';
+import { OGDialog } from '~/components/ui';
+
+interface DragDropModalProps {
+  onOptionSelect: (option: string | undefined) => void;
+  files: File[];
+  isVisible: boolean;
+  setShowModal: (showModal: boolean) => void;
+}
+
+interface FileOption {
+  label: string;
+  value?: EToolResources;
+  icon: React.JSX.Element;
+  condition?: boolean;
+}
+
+const DragDropModal = ({ onOptionSelect, setShowModal, files, isVisible }: DragDropModalProps) => {
+  const localize = useLocalize();
+  const { data: endpointsConfig } = useGetEndpointsQuery();
+  const capabilities = useMemo(
+    () => endpointsConfig?.[EModelEndpoint.agents]?.capabilities ?? [],
+    [endpointsConfig],
+  );
+
+  const options = useMemo(() => {
+    const _options: FileOption[] = [
+      {
+        label: localize('com_ui_upload_image_input'),
+        value: undefined,
+        icon: <ImageUpIcon className="icon-md" />,
+        condition: files.every((file) => file.type.startsWith('image/')),
+      },
+    ];
+    for (const capability of capabilities) {
+      if (capability === EToolResources.file_search) {
+        _options.push({
+          label: localize('com_ui_upload_file_search'),
+          value: EToolResources.file_search,
+          icon: <FileSearch className="icon-md" />,
+        });
+      } else if (capability === EToolResources.execute_code) {
+        _options.push({
+          label: localize('com_ui_upload_code_files'),
+          value: EToolResources.execute_code,
+          icon: <TerminalSquareIcon className="icon-md" />,
+        });
+      }
+    }
+
+    return _options;
+  }, [capabilities, files, localize]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <OGDialog open={isVisible} onOpenChange={setShowModal}>
+      <OGDialogTemplate
+        title={localize('com_ui_upload_type')}
+        className="w-11/12 sm:w-[440px] md:w-[400px] lg:w-[360px]"
+        main={
+          <div className="flex flex-col gap-2">
+            {options.map(
+              (option, index) =>
+                option.condition !== false && (
+                  <button
+                    key={index}
+                    onClick={() => onOptionSelect(option.value)}
+                    className="flex items-center gap-2 rounded-lg p-2 hover:bg-surface-active-alt"
+                  >
+                    {option.icon}
+                    <span>{option.label}</span>
+                  </button>
+                ),
+            )}
+          </div>
+        }
+      />
+    </OGDialog>
+  );
+};
+
+export default DragDropModal;

client/src/components/Chat/Input/Files/DragDropWrapper.tsx

@@ -0,0 +1,29 @@
+import { useDragHelpers } from '~/hooks';
+import DragDropOverlay from '~/components/Chat/Input/Files/DragDropOverlay';
+import DragDropModal from '~/components/Chat/Input/Files/DragDropModal';
+import { cn } from '~/utils';
+
+interface DragDropWrapperProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function DragDropWrapper({ children, className }: DragDropWrapperProps) {
+  const { isOver, canDrop, drop, showModal, setShowModal, draggedFiles, handleOptionSelect } =
+    useDragHelpers();
+
+  const isActive = canDrop && isOver;
+
+  return (
+    <div ref={drop} className={cn('relative flex h-full w-full', className)}>
+      {children}
+      {isActive && <DragDropOverlay />}
+      <DragDropModal
+        files={draggedFiles}
+        isVisible={showModal}
+        setShowModal={setShowModal}
+        onOptionSelect={handleOptionSelect}
+      />
+    </div>
+  );
+}