Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 08:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

🔧 fix: Update Drag & Drop Logic with new File Option handling (#8354)

Browse source
This commit is contained in:
Danny Avila 2025-07-10 08:38:55 -04:00 • committed by GitHub
parent 13a9bcdd48
commit 8ca4cf3d2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 39 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

30
client/src/components/Chat/Input/Files/DragDropModal.tsx
View file

@ -1,10 +1,8 @@
import React, { useMemo } from 'react'; 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 { FileSearch, ImageUpIcon, FileType2Icon, TerminalSquareIcon } from 'lucide-react';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate'; import { useLocalize, useGetAgentsConfig, useAgentCapabilities } from '~/hooks';
import { useGetEndpointsQuery } from '~/data-provider'; import { OGDialog, OGDialogTemplate } from '~/components/ui';
import useLocalize from '~/hooks/useLocalize';
import { OGDialog } from '~/components/ui';
interface DragDropModalProps { interface DragDropModalProps {
onOptionSelect: (option: EToolResources | undefined) => void; onOptionSelect: (option: EToolResources | undefined) => void;
@ -22,12 +20,12 @@ interface FileOption {
const DragDropModal = ({ onOptionSelect, setShowModal, files, isVisible }: DragDropModalProps) => { const DragDropModal = ({ onOptionSelect, setShowModal, files, isVisible }: DragDropModalProps) => {
const localize = useLocalize(); const localize = useLocalize();
const { data: endpointsConfig } = useGetEndpointsQuery(); const { agentsConfig } = useGetAgentsConfig();
const capabilities = useMemo( /** TODO: Ephemeral Agent Capabilities
() => endpointsConfig?.[EModelEndpoint.agents]?.capabilities ?? [], * Allow defining agent capabilities on a per-endpoint basis
[endpointsConfig], * Use definition for agents endpoint for ephemeral agents
); * */
const capabilities = useAgentCapabilities(agentsConfig?.capabilities ?? defaultAgentCapabilities);
const options = useMemo(() => { const options = useMemo(() => {
const _options: FileOption[] = [ const _options: FileOption[] = [
{ {
@ -37,27 +35,27 @@ const DragDropModal = ({ onOptionSelect, setShowModal, files, isVisible }: DragD
condition: files.every((file) => file.type?.startsWith('image/')), condition: files.every((file) => file.type?.startsWith('image/')),
}, },
]; ];
for (const capability of capabilities) { if (capabilities.fileSearchEnabled) {
if (capability === EToolResources.file_search) {
_options.push({ _options.push({
label: localize('com_ui_upload_file_search'), label: localize('com_ui_upload_file_search'),
value: EToolResources.file_search, value: EToolResources.file_search,
icon: <FileSearch className="icon-md" />, icon: <FileSearch className="icon-md" />,
}); });
} else if (capability === EToolResources.execute_code) { }
if (capabilities.codeEnabled) {
_options.push({ _options.push({
label: localize('com_ui_upload_code_files'), label: localize('com_ui_upload_code_files'),
value: EToolResources.execute_code, value: EToolResources.execute_code,
icon: <TerminalSquareIcon className="icon-md" />, icon: <TerminalSquareIcon className="icon-md" />,
}); });
} else if (capability === EToolResources.ocr) { }
if (capabilities.ocrEnabled) {
_options.push({ _options.push({
label: localize('com_ui_upload_ocr_text'), label: localize('com_ui_upload_ocr_text'),
value: EToolResources.ocr, value: EToolResources.ocr,
icon: <FileType2Icon className="icon-md" />, icon: <FileType2Icon className="icon-md" />,
}); });
} }
}
return _options; return _options;
}, [capabilities, files, localize]); }, [capabilities, files, localize]);

19
client/src/hooks/Files/useDragHelpers.ts
View file

@ -10,6 +10,7 @@ import {
EToolResources, EToolResources,
AgentCapabilities, AgentCapabilities,
isAssistantsEndpoint, isAssistantsEndpoint,
defaultAgentCapabilities,
} from 'librechat-data-provider'; } from 'librechat-data-provider';
import type { DropTargetMonitor } from 'react-dnd'; import type { DropTargetMonitor } from 'react-dnd';
import type * as t from 'librechat-data-provider'; import type * as t from 'librechat-data-provider';
@ -38,13 +39,13 @@ export default function useDragHelpers() {
setDraggedFiles([]); setDraggedFiles([]);
}; };
const isAgents = useMemo( const isAssistants = useMemo(
() => !isAssistantsEndpoint(conversation?.endpoint), () => isAssistantsEndpoint(conversation?.endpoint),
[conversation?.endpoint], [conversation?.endpoint],
); );
const { handleFiles } = useFileHandling({ const { handleFiles } = useFileHandling({
overrideEndpoint: isAgents ? EModelEndpoint.agents : undefined, overrideEndpoint: isAssistants ? undefined : EModelEndpoint.agents,
}); });
const [{ canDrop, isOver }, drop] = useDrop( const [{ canDrop, isOver }, drop] = useDrop(
@ -52,18 +53,18 @@ export default function useDragHelpers() {
accept: [NativeTypes.FILE], accept: [NativeTypes.FILE],
drop(item: { files: File[] }) { drop(item: { files: File[] }) {
console.log('drop', item.files); console.log('drop', item.files);
if (!isAgents) { if (isAssistants) {
handleFiles(item.files); handleFiles(item.files);
return; return;
} }
const endpointsConfig = queryClient.getQueryData<t.TEndpointsConfig>([QueryKeys.endpoints]); const endpointsConfig = queryClient.getQueryData<t.TEndpointsConfig>([QueryKeys.endpoints]);
const agentsConfig = endpointsConfig?.[EModelEndpoint.agents]; const agentsConfig = endpointsConfig?.[EModelEndpoint.agents];
const codeEnabled = const capabilities = agentsConfig?.capabilities ?? defaultAgentCapabilities;
agentsConfig?.capabilities?.includes(AgentCapabilities.execute_code) === true; const fileSearchEnabled = capabilities.includes(AgentCapabilities.file_search) === true;
const fileSearchEnabled = const codeEnabled = capabilities.includes(AgentCapabilities.execute_code) === true;
agentsConfig?.capabilities?.includes(AgentCapabilities.file_search) === true; const ocrEnabled = capabilities.includes(AgentCapabilities.ocr) === true;
if (!codeEnabled && !fileSearchEnabled) { if (!codeEnabled && !fileSearchEnabled && !ocrEnabled) {
handleFiles(item.files); handleFiles(item.files);
return; return;
} }