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

📂 refactor: Improve FileAttachment & File Form Deletion (#7471)

Browse source 
* refactor: optional attachment properties for `FileAttachment`

* refactor: update ActionButton to use localized text

* chore: localize text in DataTableFile, add missing translation, imports order, and linting

* chore: linting in DataTable

* fix: integrate Recoil state management for file deletion in DataTableFile

* fix: integrate Recoil state management for file deletion in DataTable

* fix: add temp_file_id to BatchFile type and update deleteFiles logic to properly remove files that are mapped to temp_file_id
This commit is contained in:
Danny Avila 2025-05-20 13:51:56 -04:00 • committed by GitHub
parent e86842fd19
commit eb1668ff22
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 65 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

32
client/src/components/Files/FileList/DataTableFile.tsx
View file

@ -1,5 +1,6 @@
import * as React from 'react';
import { ListFilter } from 'lucide-react';
import { useSetRecoilState } from 'recoil';
import {
flexRender,
getCoreRowModel,
@ -18,24 +19,25 @@ import { FileContext } from 'librechat-data-provider';
import type { AugmentedColumnDef } from '~/common';
import type { TFile } from 'librechat-data-provider';
import {
Button,
Input,
Table,
Button,
TableRow,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuTrigger,
DropdownMenuCheckboxItem,
} from '~/components/ui';
import ActionButton from '~/components/Files/ActionButton';
import { useDeleteFilesFromTable } from '~/hooks/Files';
import { TrashIcon, Spinner } from '~/components/svg';
import useLocalize from '~/hooks/useLocalize';
import ActionButton from '../ActionButton';
import UploadFileButton from './UploadFileButton';
import useLocalize from '~/hooks/useLocalize';
import store from '~/store';
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@ -57,12 +59,14 @@ export default function DataTableFile<TData, TValue>({
data,
}: DataTableProps<TData, TValue>) {
const localize = useLocalize();
const setFiles = useSetRecoilState(store.filesByIndex(0));
const [isDeleting, setIsDeleting] = React.useState(false);
const { deleteFiles } = useDeleteFilesFromTable(() => setIsDeleting(false));
const [rowSelection, setRowSelection] = React.useState({});
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
const { deleteFiles } = useDeleteFilesFromTable(() => setIsDeleting(false));
const table = useReactTable({
data,
@ -87,7 +91,7 @@ export default function DataTableFile<TData, TValue>({
<>
<div className="mt-2 flex flex-col items-start">
<h2 className="text-lg">
<strong>Files</strong>
<strong>{localize('com_ui_files')}</strong>
</h2>
<div className="mt-3 flex w-full flex-col-reverse justify-between md:flex-row">
<div className="mt-3 flex w-full flex-row justify-center gap-x-3 md:m-0 md:justify-start">
@ -103,7 +107,7 @@ export default function DataTableFile<TData, TValue>({
const filesToDelete = table
.getFilteredSelectedRowModel()
.rows.map((row) => row.original);
deleteFiles({ files: filesToDelete as TFile[] });
deleteFiles({ files: filesToDelete as TFile[], setFiles });
setRowSelection({});
}}
className="ml-1 gap-2 dark:hover:bg-gray-850/25 sm:ml-0"
@ -242,13 +246,11 @@ export default function DataTableFile<TData, TValue>({
</Table>
</div>
<div className="ml-4 mr-4 mt-4 flex h-auto items-center justify-end space-x-2 py-4 sm:ml-0 sm:mr-0 sm:h-0">
<div className="text-muted-foreground ml-2 flex-1 text-sm">
{localize(
'com_files_number_selected', {
0: `${table.getFilteredSelectedRowModel().rows.length}`,
1: `${table.getFilteredRowModel().rows.length}`,
},
)}
<div className="ml-2 flex-1 text-sm text-muted-foreground">
{localize('com_files_number_selected', {
0: `${table.getFilteredSelectedRowModel().rows.length}`,
1: `${table.getFilteredRowModel().rows.length}`,
})}
</div>
<Button
className="dark:border-gray-500 dark:hover:bg-gray-600"