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: , - }); - } else if (capability === EToolResources.execute_code) { - _options.push({ - label: localize('com_ui_upload_code_files'), - value: EToolResources.execute_code, - icon: , - }); - } else if (capability === EToolResources.ocr) { - _options.push({ - label: localize('com_ui_upload_ocr_text'), - value: EToolResources.ocr, - icon: , - }); - } + if (capabilities.fileSearchEnabled) { + _options.push({ + label: localize('com_ui_upload_file_search'), + value: EToolResources.file_search, + icon: , + }); + } + if (capabilities.codeEnabled) { + _options.push({ + label: localize('com_ui_upload_code_files'), + value: EToolResources.execute_code, + icon: , + }); + } + if (capabilities.ocrEnabled) { + _options.push({ + label: localize('com_ui_upload_ocr_text'), + value: EToolResources.ocr, + icon: , + }); } 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([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; }