fix: enhance file handling and UI improvements in chat and file preview components

.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": []

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"

components/chat-panel.tsx

@@ -28,12 +28,17 @@ export default function ChatPanel() {
     } = useDiagram();
 
     const onFetchChart = () => {
-        return new Promise<string>((resolve) => {
+        return Promise.race([
-            if (resolverRef && "current" in resolverRef) {
+            new Promise<string>((resolve) => {
-                resolverRef.current = resolve; // Store the resolver
+                if (resolverRef && "current" in resolverRef) {
-            }
+                    resolverRef.current = resolve;
-            onExport(); // Trigger the export
+                }
-        });
+                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") {

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
+                            width={1200}
-                            className="object-contain"
+                            height={900}
+                            className="object-contain max-w-full max-h-[90vh] w-auto h-auto"
                             onClick={(e) => e.stopPropagation()}
                         />
                     </div>