From a873e3467cff2411cd7a8ba86971c4d2c4280f6a Mon Sep 17 00:00:00 2001
From: marko-kraemer <markokraemer.mail@gmail.com>
Date: Mon, 21 Apr 2025 05:47:03 +0100
Subject: [PATCH] wip

---
 .../app/dashboard/agents/[threadId]/page.tsx  | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/dashboard/agents/[threadId]/page.tsx b/frontend/src/app/dashboard/agents/[threadId]/page.tsx
index 36b3ac0e..fd3ee938 100644
--- a/frontend/src/app/dashboard/agents/[threadId]/page.tsx
+++ b/frontend/src/app/dashboard/agents/[threadId]/page.tsx
@@ -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>
   );
 }
+