Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-22 02:06:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* 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
This commit is contained in:
Danny Avila 2024-12-19 13:04:48 -05:00 • committed by GitHub
parent d68c874db4
commit 3fbbcb1cfe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 449 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,42 +1,76 @@
import { useState, useMemo } from 'react';
import { useDrop } from 'react-dnd';
import { useRecoilValue } from 'recoil';
import { NativeTypes } from 'react-dnd-html5-backend';
import { useQueryClient } from '@tanstack/react-query';
import {
isAgentsEndpoint,
EModelEndpoint,
AgentCapabilities,
QueryKeys,
} from 'librechat-data-provider';
import type * as t from 'librechat-data-provider';
import type { DropTargetMonitor } from 'react-dnd';
import useFileHandling from './useFileHandling';
import store from '~/store';
export default function useDragHelpers() {
const { files, handleFiles } = useFileHandling();
const queryClient = useQueryClient();
const { handleFiles } = useFileHandling();
const [showModal, setShowModal] = useState(false);
const [draggedFiles, setDraggedFiles] = useState<File[]>([]);
const conversation = useRecoilValue(store.conversationByIndex(0)) || undefined;
const handleOptionSelect = (toolResource: string | undefined) => {
handleFiles(draggedFiles, toolResource);
setShowModal(false);
setDraggedFiles([]);
};
const isAgents = useMemo(
() => isAgentsEndpoint(conversation?.endpoint),
[conversation?.endpoint],
);
const [{ canDrop, isOver }, drop] = useDrop(
() => ({
accept: [NativeTypes.FILE],
drop(item: { files: File[] }) {
console.log('drop', item.files);
handleFiles(item.files);
},
canDrop() {
// console.log('canDrop', item.files, item.items);
return true;
},
// hover() {
// // console.log('hover', item.files, item.items);
// },
collect: (monitor: DropTargetMonitor) => {
// const item = monitor.getItem() as File[];
// if (item) {
// console.log('collect', item.files, item.items);
// }
if (!isAgents) {
handleFiles(item.files);
return;
}
return {
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
};
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) {
handleFiles(item.files);
return;
}
setDraggedFiles(item.files);
setShowModal(true);
},
canDrop: () => true,
collect: (monitor: DropTargetMonitor) => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}),
}),
[files],
[],
);
return {
canDrop,
isOver,
drop,
showModal,
setShowModal,
draggedFiles,
handleOptionSelect,
};
}