File size: 2,542 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 | import React from 'react';
import { FileIcon, PlusIcon } from 'lucide-react';
import { Button, DotsIcon, TrashIcon } from '@librechat/client';
import type { TFile } from 'librechat-data-provider';
import { useNavigate } from 'react-router-dom';
type FileListItemProps = {
file: TFile;
deleteFile: (id: string | undefined) => void;
attachedVectorStores: { name: string }[];
};
export default function FileListItem2({
file,
deleteFile,
attachedVectorStores,
}: FileListItemProps) {
const navigate = useNavigate();
return (
<div
onClick={() => {
navigate('file_id_abcdef');
}}
className="w-100 mt-2 flex h-fit cursor-pointer flex-row rounded-md border border-0 bg-white p-4 transition duration-300 ease-in-out hover:bg-slate-200"
>
<div className="flex w-10/12 flex-col justify-around md:flex-row">
<div className="flex w-2/5 flex-row">
<div className="w-1/4 content-center">
<FileIcon className="m-0 size-5 p-0" />
</div>
<div className="w-3/4 content-center">{file.filename}</div>
</div>
<div className="flex w-fit flex-row flex-wrap text-gray-500 md:w-3/5">
{attachedVectorStores.map((vectorStore, index) => {
if (index === 4) {
return (
<span
key={index}
className="ml-2 mt-1 flex flex-row items-center rounded-full bg-[#f5f5f5] px-2 text-xs"
>
<PlusIcon className="h-3 w-3" />
{attachedVectorStores.length - index} more
</span>
);
}
if (index > 4) {
return null;
}
return (
<span
key={index}
className="ml-2 mt-1 content-center rounded-full bg-[#f2f8ec] px-2 text-xs text-[#91c561]"
>
{vectorStore.name}
</span>
);
})}
</div>
</div>
<div className="mr-0 flex w-2/12 flex-col items-center justify-evenly sm:mr-4 md:flex-row">
<Button className="w-min content-center bg-transparent text-gray-500 hover:bg-slate-200">
<DotsIcon className="text-grey-100" />
</Button>
<Button
className="w-min bg-transparent text-[#666666] hover:bg-slate-200"
onClick={() => deleteFile(file._id)}
>
<TrashIcon className="" />
</Button>
</div>
</div>
);
}
|