From 8ca4cf3d2f4cd911403bc6f7e1577cc9cfb44f34 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Thu, 10 Jul 2025 08:38:55 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix:=20Update=20Drag=20&=20Drop?=
 =?UTF-8?q?=20Logic=20with=20new=20File=20Option=20handling=20(#8354)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chat/Input/Files/DragDropModal.tsx        | 60 +++++++++----------
 client/src/hooks/Files/useDragHelpers.ts      | 19 +++---
 2 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/client/src/components/Chat/Input/Files/DragDropModal.tsx b/client/src/components/Chat/Input/Files/DragDropModal.tsx
index 5606b4d30c..44838271b3 100644
--- a/client/src/components/Chat/Input/Files/DragDropModal.tsx
+++ b/client/src/components/Chat/Input/Files/DragDropModal.tsx
@@ -1,10 +1,8 @@
 import React, { useMemo } from 'react';
-import { EModelEndpoint, EToolResources } from 'librechat-data-provider';
+import { EToolResources, defaultAgentCapabilities } from 'librechat-data-provider';
 import { FileSearch, ImageUpIcon, FileType2Icon, TerminalSquareIcon } from 'lucide-react';
-import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
-import { useGetEndpointsQuery } from '~/data-provider';
-import useLocalize from '~/hooks/useLocalize';
-import { OGDialog } from '~/components/ui';
+import { useLocalize, useGetAgentsConfig, useAgentCapabilities } from '~/hooks';
+import { OGDialog, OGDialogTemplate } from '~/components/ui';
 
 interface DragDropModalProps {
   onOptionSelect: (option: EToolResources | undefined) => void;
@@ -22,12 +20,12 @@ interface FileOption {
 
 const DragDropModal = ({ onOptionSelect, setShowModal, files, isVisible }: DragDropModalProps) => {
   const localize = useLocalize();
-  const { data: endpointsConfig } = useGetEndpointsQuery();
-  const capabilities = useMemo(
-    () => endpointsConfig?.[EModelEndpoint.agents]?.capabilities ?? [],
-    [endpointsConfig],
-  );
-
+  const { agentsConfig } = useGetAgentsConfig();
+  /** TODO: Ephemeral Agent Capabilities
+   * Allow defining agent capabilities on a per-endpoint basis
+   * Use definition for agents endpoint for ephemeral agents
+   * */
+  const capabilities = useAgentCapabilities(agentsConfig?.capabilities ?? defaultAgentCapabilities);
   const options = useMemo(() => {
     const _options: FileOption[] = [
       {
@@ -37,26 +35,26 @@ const DragDropModal = ({ onOptionSelect, setShowModal, files, isVisible }: DragD
         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" />,
-        });
-      } else if (capability === EToolResources.ocr) {
-        _options.push({
-          label: localize('com_ui_upload_ocr_text'),
-          value: EToolResources.ocr,
-          icon: <FileType2Icon className="icon-md" />,
-        });
-      }
+    if (capabilities.fileSearchEnabled) {
+      _options.push({
+        label: localize('com_ui_upload_file_search'),
+        value: EToolResources.file_search,
+        icon: <FileSearch className="icon-md" />,
+      });
+    }
+    if (capabilities.codeEnabled) {
+      _options.push({
+        label: localize('com_ui_upload_code_files'),
+        value: EToolResources.execute_code,
+        icon: <TerminalSquareIcon className="icon-md" />,
+      });
+    }
+    if (capabilities.ocrEnabled) {
+      _options.push({
+        label: localize('com_ui_upload_ocr_text'),
+        value: EToolResources.ocr,
+        icon: <FileType2Icon className="icon-md" />,
+      });
     }
 
     return _options;
diff --git a/client/src/hooks/Files/useDragHelpers.ts b/client/src/hooks/Files/useDragHelpers.ts
index 3968e2bb03..d7ff122e70 100644
--- a/client/src/hooks/Files/useDragHelpers.ts
+++ b/client/src/hooks/Files/useDragHelpers.ts
@@ -10,6 +10,7 @@ import {
   EToolResources,
   AgentCapabilities,
   isAssistantsEndpoint,
+  defaultAgentCapabilities,
 } from 'librechat-data-provider';
 import type { DropTargetMonitor } from 'react-dnd';
 import type * as t from 'librechat-data-provider';
@@ -38,13 +39,13 @@ export default function useDragHelpers() {
     setDraggedFiles([]);
   };
 
-  const isAgents = useMemo(
-    () => !isAssistantsEndpoint(conversation?.endpoint),
+  const isAssistants = useMemo(
+    () => isAssistantsEndpoint(conversation?.endpoint),
     [conversation?.endpoint],
   );
 
   const { handleFiles } = useFileHandling({
-    overrideEndpoint: isAgents ? EModelEndpoint.agents : undefined,
+    overrideEndpoint: isAssistants ? undefined : EModelEndpoint.agents,
   });
 
   const [{ canDrop, isOver }, drop] = useDrop(
@@ -52,18 +53,18 @@ export default function useDragHelpers() {
       accept: [NativeTypes.FILE],
       drop(item: { files: File[] }) {
         console.log('drop', item.files);
-        if (!isAgents) {
+        if (isAssistants) {
           handleFiles(item.files);
           return;
         }
 
         const endpointsConfig = queryClient.getQueryData<t.TEndpointsConfig>([QueryKeys.endpoints]);
         const agentsConfig = endpointsConfig?.[EModelEndpoint.agents];
-        const codeEnabled =
-          agentsConfig?.capabilities?.includes(AgentCapabilities.execute_code) === true;
-        const fileSearchEnabled =
-          agentsConfig?.capabilities?.includes(AgentCapabilities.file_search) === true;
-        if (!codeEnabled && !fileSearchEnabled) {
+        const capabilities = agentsConfig?.capabilities ?? defaultAgentCapabilities;
+        const fileSearchEnabled = capabilities.includes(AgentCapabilities.file_search) === true;
+        const codeEnabled = capabilities.includes(AgentCapabilities.execute_code) === true;
+        const ocrEnabled = capabilities.includes(AgentCapabilities.ocr) === true;
+        if (!codeEnabled && !fileSearchEnabled && !ocrEnabled) {
           handleFiles(item.files);
           return;
         }