This commit is contained in:
marko-kraemer 2025-04-21 05:47:03 +01:00
parent 04ce0e499b
commit a873e3467c
1 changed files with 26 additions and 19 deletions

View File

@ -113,37 +113,43 @@ function renderMarkdownContent(content: string, handleToolClick: (assistantMessa
<Markdown className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none break-words [&>:first-child]:mt-0 prose-headings:mt-3">{askContent}</Markdown>
{attachments.length > 0 && (
<div className="mt-3 space-y-2">
<div className="text-xs font-medium text-muted-foreground">Attachments:</div>
<div className="flex flex-wrap gap-2">
<div className="mt-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{attachments.map((attachment, idx) => {
const extension = attachment.split('.').pop()?.toLowerCase();
const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(extension || '');
const isPdf = extension === 'pdf';
const isMd = extension === 'md';
const isCode = ['js', 'jsx', 'ts', 'tsx', 'py', 'html', 'css', 'json'].includes(extension || '');
const filename = attachment.split('/').pop() || 'file';
let icon = <File className="h-3.5 w-3.5 text-muted-foreground" />;
if (isImage) icon = <File className="h-3.5 w-3.5 text-purple-500" />;
if (isPdf) icon = <File className="h-3.5 w-3.5 text-red-500" />;
if (isMd) icon = <File className="h-3.5 w-3.5 text-blue-500" />;
if (isCode) icon = <File className="h-3.5 w-3.5 text-emerald-500" />;
// Define file size (in a real app, this would come from the backend)
const fileSize =
extension === 'html' ? '52.68 KB' :
attachment.includes('itinerary') ? '4.14 KB' :
attachment.includes('proposal') ? '6.20 KB' :
attachment.includes('todo') ? '1.89 KB' :
attachment.includes('research') ? '3.75 KB' :
`${(Math.random() * 5 + 1).toFixed(2)} KB`;
// Get file type display
const fileType = extension === 'html' ? 'Code' : 'Text';
return (
<button
key={`attachment-${idx}`}
onClick={() => fileViewerHandler?.(attachment)}
className="group inline-flex items-center gap-2 rounded-md border bg-muted/5 px-2.5 py-1.5 text-sm transition-colors hover:bg-muted/10"
className="group flex items-center gap-3 p-4 rounded-md bg-muted/10 hover:bg-muted/20 transition-colors"
>
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border bg-background">
{icon}
<div className="flex items-center justify-center">
<File className="h-5 w-5 text-muted-foreground" />
</div>
<div className="flex-1 overflow-hidden">
<div className="font-medium truncate max-w-[120px]">
{attachment.split('/').pop()}
<div className="flex-1 min-w-0 text-left">
<div className="text-sm font-medium text-foreground truncate">
{filename}
</div>
<div className="text-xs text-muted-foreground flex items-center gap-1">
<span>{fileType}</span>
<span>·</span>
<span>{fileSize}</span>
</div>
</div>
<ChevronRight className="h-3.5 w-3.5 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
</button>
);
})}
@ -1410,3 +1416,4 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
</div>
);
}