File size: 1,665 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 | import type { TFile } from 'librechat-data-provider';
import type { ExtendedFile } from '~/common';
import { getFileType, cn } from '~/utils';
import FilePreview from './FilePreview';
import RemoveFile from './RemoveFile';
const FileContainer = ({
file,
overrideType,
buttonClassName,
containerClassName,
onDelete,
onClick,
}: {
file: Partial<ExtendedFile | TFile>;
overrideType?: string;
buttonClassName?: string;
containerClassName?: string;
onDelete?: () => void;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
}) => {
const fileType = getFileType(overrideType ?? file.type);
return (
<div
className={cn('group relative inline-block text-sm text-text-primary', containerClassName)}
>
<button
type="button"
onClick={onClick}
aria-label={file.filename}
className={cn(
'relative overflow-hidden rounded-2xl border border-border-light bg-surface-hover-alt',
buttonClassName,
)}
>
<div className="w-56 p-1.5">
<div className="flex flex-row items-center gap-2">
<FilePreview file={file} fileType={fileType} className="relative" />
<div className="overflow-hidden">
<div className="truncate font-medium" title={file.filename}>
{file.filename}
</div>
<div className="truncate text-text-secondary" title={fileType.title}>
{fileType.title}
</div>
</div>
</div>
</div>
</button>
{onDelete && <RemoveFile onRemove={onDelete} />}
</div>
);
};
export default FileContainer;
|