mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-08 20:42:30 +08:00
dc48c3863d
### What problem does this PR solve? Feat: Replace color variables according to design draft #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { getExtension } from '@/utils/document-util';
|
|
import { formatBytes } from '@/utils/file-util';
|
|
import { memo } from 'react';
|
|
import SvgIcon from '../svg-icon';
|
|
|
|
interface IProps {
|
|
files?: File[];
|
|
}
|
|
export function InnerUploadedMessageFiles({ files = [] }: IProps) {
|
|
return (
|
|
<section className="flex gap-2 pt-2">
|
|
{files?.map((file, idx) => (
|
|
<div key={idx} className="flex gap-1 border rounded-md p-1.5">
|
|
{file.type.startsWith('image/') ? (
|
|
<img
|
|
src={URL.createObjectURL(file)}
|
|
alt={file.name}
|
|
className="size-10 object-cover"
|
|
/>
|
|
) : (
|
|
<SvgIcon
|
|
name={`file-icon/${getExtension(file.name)}`}
|
|
width={24}
|
|
></SvgIcon>
|
|
)}
|
|
<div className="text-xs max-w-20">
|
|
<div className="truncate">{file.name}</div>
|
|
<p className="text-text-secondary pt-1">{formatBytes(file.size)}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export const UploadedMessageFiles = memo(InnerUploadedMessageFiles);
|