Agent Zero
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import type { MessageBlock } from '@/store/commStore';
|
|
import { Download, FileText } from 'lucide-react';
|
|
|
|
interface FileBlockProps {
|
|
block: MessageBlock;
|
|
}
|
|
|
|
function formatFileSize(bytes: number | undefined): string {
|
|
if (typeof bytes !== 'number' || bytes <= 0) return '';
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
|
}
|
|
|
|
const fileIcon = (
|
|
<FileText className="w-8 h-8 text-secondary-400" aria-hidden="true" strokeWidth={1.5} />
|
|
);
|
|
|
|
const downloadIcon = (
|
|
<Download className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
|
|
);
|
|
|
|
const FileBlock: React.FC<FileBlockProps> = ({ block }) => {
|
|
const { url, name, size } = block.block_data;
|
|
|
|
if (!url && !name) {
|
|
return null;
|
|
}
|
|
|
|
const fileName: string = name || 'Datei';
|
|
const fileSizeLabel = formatFileSize(size);
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 p-3 rounded-lg border border-secondary-200 bg-white shadow-sm">
|
|
<div className="flex-shrink-0">{fileIcon}</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-secondary-700 truncate">{fileName}</p>
|
|
{fileSizeLabel && (
|
|
<p className="text-xs text-secondary-400">{fileSizeLabel}</p>
|
|
)}
|
|
</div>
|
|
{url && (
|
|
<a
|
|
href={url}
|
|
download={fileName}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex-shrink-0 p-2 rounded-lg bg-primary-500 text-white hover:bg-primary-600 transition-colors"
|
|
aria-label={`Datei herunterladen: ${fileName}`}
|
|
>
|
|
{downloadIcon}
|
|
</a>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FileBlock;
|