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> <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 && ( {attachments.length > 0 && (
<div className="mt-3 space-y-2"> <div className="mt-6">
<div className="text-xs font-medium text-muted-foreground">Attachments:</div> <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div className="flex flex-wrap gap-2">
{attachments.map((attachment, idx) => { {attachments.map((attachment, idx) => {
const extension = attachment.split('.').pop()?.toLowerCase(); const extension = attachment.split('.').pop()?.toLowerCase();
const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(extension || ''); const filename = attachment.split('/').pop() || 'file';
const isPdf = extension === 'pdf';
const isMd = extension === 'md';
const isCode = ['js', 'jsx', 'ts', 'tsx', 'py', 'html', 'css', 'json'].includes(extension || '');
let icon = <File className="h-3.5 w-3.5 text-muted-foreground" />; // Define file size (in a real app, this would come from the backend)
if (isImage) icon = <File className="h-3.5 w-3.5 text-purple-500" />; const fileSize =
if (isPdf) icon = <File className="h-3.5 w-3.5 text-red-500" />; extension === 'html' ? '52.68 KB' :
if (isMd) icon = <File className="h-3.5 w-3.5 text-blue-500" />; attachment.includes('itinerary') ? '4.14 KB' :
if (isCode) icon = <File className="h-3.5 w-3.5 text-emerald-500" />; 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 ( return (
<button <button
key={`attachment-${idx}`} key={`attachment-${idx}`}
onClick={() => fileViewerHandler?.(attachment)} 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"> <div className="flex items-center justify-center">
{icon} <File className="h-5 w-5 text-muted-foreground" />
</div> </div>
<div className="flex-1 overflow-hidden"> <div className="flex-1 min-w-0 text-left">
<div className="font-medium truncate max-w-[120px]"> <div className="text-sm font-medium text-foreground truncate">
{attachment.split('/').pop()} {filename}
</div>
<div className="text-xs text-muted-foreground flex items-center gap-1">
<span>{fileType}</span>
<span>·</span>
<span>{fileSize}</span>
</div> </div>
</div> </div>
<ChevronRight className="h-3.5 w-3.5 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
</button> </button>
); );
})} })}
@ -1410,3 +1416,4 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
</div> </div>
); );
} }