feat: add click-to-preview for image attachments in chat

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/message/user-image-attachments.tsx

@@ -1,7 +1,9 @@
 "use client"
 
+import { useState } from "react"
 import Image from "next/image"
 import type { UserImageDisplay } from "@/lib/adapters/ai-elements-adapter"
+import { ImagePreviewDialog } from "@/components/ui/image-preview-dialog"
 
 interface UserImageAttachmentsProps {
   images: UserImageDisplay[]
@@ -12,15 +14,24 @@ export function UserImageAttachments({
   images,
   className,
 }: UserImageAttachmentsProps) {
+  const [previewIndex, setPreviewIndex] = useState<number | null>(null)
+
   if (images.length === 0) return null
 
+  const previewImage =
+    previewIndex !== null && previewIndex < images.length
+      ? images[previewIndex]
+      : null
+
   return (
     <div className={className}>
       <div className="flex flex-wrap gap-1.5">
         {images.map((image, index) => (
-          <div
+          <button
             key={`${image.uri ?? image.name}-${index}`}
-            className="overflow-hidden rounded-md border border-border/70 bg-muted/30"
+            type="button"
+            onClick={() => setPreviewIndex(index)}
+            className="cursor-pointer overflow-hidden rounded-md border border-border/70 bg-muted/30 transition-opacity hover:opacity-80"
           >
             <Image
               src={`data:${image.mime_type};base64,${image.data}`}
@@ -30,9 +41,21 @@ export function UserImageAttachments({
               unoptimized
               className="h-14 w-14 object-cover"
             />
-          </div>
+          </button>
         ))}
       </div>
+      <ImagePreviewDialog
+        src={
+          previewImage
+            ? `data:${previewImage.mime_type};base64,${previewImage.data}`
+            : ""
+        }
+        alt={previewImage?.name ?? ""}
+        open={previewImage !== null}
+        onOpenChange={(open) => {
+          if (!open) setPreviewIndex(null)
+        }}
+      />
     </div>
   )
 }