File size: 3,290 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | /* eslint-disable react-hooks/rules-of-hooks */
import { PlusIcon } from 'lucide-react';
import { Button, Checkbox, DotsIcon, FileIcon } from '@librechat/client';
import type { ColumnDef } from '@tanstack/react-table';
import type { TFile } from 'librechat-data-provider';
import { formatDate, getFileType } from '~/utils';
import { useLocalize } from '~/hooks';
export const fileTableColumns: ColumnDef<TFile>[] = [
{
id: 'select',
header: ({ table }) => {
return (
<Checkbox
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && 'indeterminate')
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="Select all"
className="flex"
/>
);
},
cell: ({ row }) => {
return (
<Checkbox
checked={row.getIsSelected()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="Select row"
className="flex"
/>
);
},
enableSorting: false,
enableHiding: false,
},
{
meta: {
size: '50px',
},
accessorKey: 'icon',
header: () => {
return 'Icon';
},
cell: ({ row }) => {
const file = row.original;
return <FileIcon file={file} fileType={getFileType(file.type)} />;
},
},
{
meta: {
size: '150px',
},
accessorKey: 'filename',
header: ({ column }) => {
const localize = useLocalize();
return <>{localize('com_ui_name')}</>;
},
cell: ({ row }) => {
const file = row.original;
return <span className="self-center truncate">{file.filename}</span>;
},
},
{
accessorKey: 'vectorStores',
header: () => {
return 'Vector Stores';
},
cell: ({ row }) => {
const { vectorsAttached: attachedVectorStores } = row.original;
return (
<>
{attachedVectorStores.map((vectorStore, index) => {
if (index === 4) {
return (
<span
key={index}
className="ml-2 mt-2 flex w-fit flex-row items-center rounded-full bg-[#f5f5f5] px-2 text-gray-500"
>
<PlusIcon className="h-3 w-3" />
{attachedVectorStores.length - index} more
</span>
);
}
if (index > 4) {
return null;
}
return (
<span key={index} className="ml-2 mt-2 rounded-full bg-[#f2f8ec] px-2 text-[#91c561]">
{vectorStore.name}
</span>
);
})}
</>
);
},
},
{
accessorKey: 'updatedAt',
header: () => {
const localize = useLocalize();
return 'Modified';
},
cell: ({ row }) => formatDate(row.original.updatedAt),
},
{
accessorKey: 'actions',
header: () => {
return 'Actions';
},
cell: ({ row }) => {
return (
<>
<Button className="w-min content-center bg-transparent text-gray-500 hover:bg-slate-200">
<DotsIcon className="text-grey-100 m-0 size-5 p-0" />
</Button>
</>
);
},
},
];
|