From ce45339c0db11c83b7d509a030126ce91768051f Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Mon, 10 Nov 2025 10:28:37 +0900
Subject: [PATCH] fix: enhance file handling and UI improvements in chat and
 file preview components

---
 .claude/settings.local.json       |  3 ++-
 components/chat-example-panel.tsx |  6 ++++--
 components/chat-panel.tsx         | 19 +++++++++++--------
 components/file-preview-list.tsx  |  9 +++++----
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 8fcc355..f0acd5e 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -5,7 +5,8 @@
       "WebFetch(domain:ai-sdk.dev)",
       "mcp__ide__getDiagnostics",
       "Bash(npx tsc:*)",
-      "WebFetch(domain:sdk.vercel.ai)"
+      "WebFetch(domain:sdk.vercel.ai)",
+      "Bash(npm run build:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/components/chat-example-panel.tsx b/components/chat-example-panel.tsx
index 2c48263..68599ea 100644
--- a/components/chat-example-panel.tsx
+++ b/components/chat-example-panel.tsx
@@ -30,7 +30,9 @@ export default function ExamplePanel({
             // Fetch the architecture image
             const response = await fetch("/architecture.png");
             const blob = await response.blob();
-            const file = new File([blob], "architecture.png", { type: "image/png" });
+            const file = new File([blob], "architecture.png", {
+                type: "image/png",
+            });
 
             // Set the file to the files state
             setFiles([file]);
@@ -54,7 +56,7 @@ export default function ExamplePanel({
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
                     onClick={handleReplicateArchitecture}
                 >
-                    Replicate this in aws style
+                    Create this diagram in aws style
                 </button>
                 <button
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index 820ef74..5359eee 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -28,12 +28,17 @@ export default function ChatPanel() {
     } = useDiagram();
 
     const onFetchChart = () => {
-        return new Promise<string>((resolve) => {
-            if (resolverRef && "current" in resolverRef) {
-                resolverRef.current = resolve; // Store the resolver
-            }
-            onExport(); // Trigger the export
-        });
+        return Promise.race([
+            new Promise<string>((resolve) => {
+                if (resolverRef && "current" in resolverRef) {
+                    resolverRef.current = resolve;
+                }
+                onExport();
+            }),
+            new Promise<string>((_, reject) =>
+                setTimeout(() => reject(new Error("Chart export timed out after 10 seconds")), 10000)
+            )
+        ]);
     };
     // Add a step counter to track updates
 
@@ -112,8 +117,6 @@ export default function ChatPanel() {
         }
     }, [messages]);
 
-    console.log(JSON.stringify(messages, null, 2));
-
     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         if (input.trim() && status !== "streaming") {
diff --git a/components/file-preview-list.tsx b/components/file-preview-list.tsx
index 1da3758..208d90b 100644
--- a/components/file-preview-list.tsx
+++ b/components/file-preview-list.tsx
@@ -70,18 +70,19 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
                     onClick={() => setSelectedImage(null)}
                 >
                     <button
-                        className="absolute top-4 right-4 bg-white rounded-full p-2 hover:bg-gray-200 transition-colors"
+                        className="absolute top-4 right-4 z-10 bg-white rounded-full p-2 hover:bg-gray-200 transition-colors"
                         onClick={() => setSelectedImage(null)}
                         aria-label="Close"
                     >
                         <X className="h-6 w-6" />
                     </button>
-                    <div className="relative max-w-7xl max-h-[90vh] w-full h-full">
+                    <div className="relative w-auto h-auto max-w-[90vw] max-h-[90vh]">
                         <Image
                             src={selectedImage}
                             alt="Preview"
-                            fill
-                            className="object-contain"
+                            width={1200}
+                            height={900}
+                            className="object-contain max-w-full max-h-[90vh] w-auto h-auto"
                             onClick={(e) => e.stopPropagation()}
                         />
                     </div>