| import { useState, useRef, useEffect } from 'react'; |
| import { |
| EToolResources, |
| mergeFileConfig, |
| fileConfig as defaultFileConfig, |
| } from 'librechat-data-provider'; |
| import type { AssistantsEndpoint } from 'librechat-data-provider'; |
| import type { ExtendedFile } from '~/common'; |
| import FileRow from '~/components/Chat/Input/Files/FileRow'; |
| import { useGetFileConfig } from '~/data-provider'; |
| import { useFileHandling } from '~/hooks/Files'; |
| import useLocalize from '~/hooks/useLocalize'; |
| import { useChatContext } from '~/Providers'; |
|
|
| const tool_resource = EToolResources.code_interpreter; |
|
|
| export default function CodeFiles({ |
| endpoint, |
| assistant_id, |
| files: _files, |
| }: { |
| version: number | string; |
| endpoint: AssistantsEndpoint; |
| assistant_id: string; |
| files?: [string, ExtendedFile][]; |
| }) { |
| const localize = useLocalize(); |
| const { setFilesLoading } = useChatContext(); |
| const fileInputRef = useRef<HTMLInputElement>(null); |
| const [files, setFiles] = useState<Map<string, ExtendedFile>>(new Map()); |
| const { data: fileConfig = defaultFileConfig } = useGetFileConfig({ |
| select: (data) => mergeFileConfig(data), |
| }); |
| const { handleFileChange } = useFileHandling({ |
| overrideEndpoint: endpoint, |
| additionalMetadata: { assistant_id, tool_resource }, |
| fileSetter: setFiles, |
| }); |
|
|
| useEffect(() => { |
| if (_files) { |
| setFiles(new Map(_files)); |
| } |
| }, [_files]); |
|
|
| const endpointFileConfig = fileConfig.endpoints[endpoint]; |
|
|
| if (endpointFileConfig?.disabled) { |
| return null; |
| } |
|
|
| const handleButtonClick = () => { |
| |
| if (fileInputRef.current) { |
| fileInputRef.current.value = ''; |
| } |
| fileInputRef.current?.click(); |
| }; |
|
|
| return ( |
| <div className={'mb-2'}> |
| <div className="flex flex-col gap-4"> |
| <div className="text-token-text-tertiary rounded-lg text-xs"> |
| {localize('com_assistants_code_interpreter_files')} |
| </div> |
| <FileRow |
| files={files} |
| setFiles={setFiles} |
| assistant_id={assistant_id} |
| tool_resource={tool_resource} |
| setFilesLoading={setFilesLoading} |
| Wrapper={({ children }) => <div className="flex flex-wrap gap-2">{children}</div>} |
| /> |
| <div> |
| <button |
| type="button" |
| disabled={!assistant_id} |
| className="btn btn-neutral border-token-border-light relative h-8 rounded-lg font-medium" |
| onClick={handleButtonClick} |
| > |
| <div className="flex w-full items-center justify-center gap-2"> |
| <input |
| multiple={true} |
| type="file" |
| style={{ display: 'none' }} |
| tabIndex={-1} |
| ref={fileInputRef} |
| disabled={!assistant_id} |
| onChange={handleFileChange} |
| /> |
| {localize('com_ui_upload_files')} |
| </div> |
| </button> |
| </div> |
| </div> |
| </div> |
| ); |
| } |
|
|
