feat(webui): support image uploads in composer and message bubbles

webui/src/components/MessageBubble.tsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
-import { ChevronRight, Wrench } from "lucide-react";
+import { ChevronRight, ImageIcon, Wrench } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
+import { ImageLightbox } from "@/components/ImageLightbox";
 import { MarkdownText } from "@/components/MarkdownText";
 import { cn } from "@/lib/utils";
-import type { UIMessage } from "@/lib/types";
+import type { UIImage, UIMessage } from "@/lib/types";
 
 interface MessageBubbleProps {
   message: UIMessage;
@@ -27,22 +28,28 @@ export function MessageBubble({ message }: MessageBubbleProps) {
   }
 
   if (message.role === "user") {
+    const images = message.images ?? [];
+    const hasImages = images.length > 0;
+    const hasText = message.content.trim().length > 0;
     return (
       <div
         className={cn(
-          "group ml-auto flex max-w-[min(85%,36rem)] items-center gap-2",
+          "group ml-auto flex max-w-[min(85%,36rem)] flex-col items-end gap-1.5",
           baseAnim,
         )}
       >
-        <p
-          className={cn(
-            "ml-auto w-fit rounded-[18px] border border-border/60 bg-secondary/70 px-4 py-2",
-            "text-right text-[18px]/[1.8] whitespace-pre-wrap break-words",
-            "shadow-[0_10px_24px_-18px_rgba(0,0,0,0.55)]",
-          )}
-        >
-          {message.content}
-        </p>
+        {hasImages ? <UserImages images={images} /> : null}
+        {hasText ? (
+          <p
+            className={cn(
+              "ml-auto w-fit rounded-[18px] border border-border/60 bg-secondary/70 px-4 py-2",
+              "text-right text-[18px]/[1.8] whitespace-pre-wrap break-words",
+              "shadow-[0_10px_24px_-18px_rgba(0,0,0,0.55)]",
+            )}
+          >
+            {message.content}
+          </p>
+        ) : null}
       </div>
     );
   }
@@ -62,6 +69,121 @@ export function MessageBubble({ message }: MessageBubbleProps) {
   );
 }
 
+/**
+ * Right-aligned preview row for images attached to a user turn.
+ *
+ * Visual follows agent-chat-ui: a single wrapping row of fixed-size square
+ * thumbnails that stay modest next to the text pill regardless of how many
+ * images are attached.
+ *
+ * The URL is expected to be a self-contained ``data:`` URL (the Composer
+ * hands the normalized base64 payload to the optimistic bubble so that the
+ * preview survives React StrictMode double-mount — blob URLs would be
+ * revoked by the Composer's cleanup before remount). Historical replays
+ * have no URL (the backend strips data URLs before persisting), so we
+ * render a labelled placeholder tile instead of a broken ``<img>``.
+ */
+function UserImages({ images }: { images: UIImage[] }) {
+  const { t } = useTranslation();
+  // Only real-URL images can open in the lightbox; historical-replay
+  // placeholders (no URL) have nothing to zoom into.
+  const viewable = images
+    .map((img, i) => ({ img, i }))
+    .filter(({ img }) => typeof img.url === "string" && img.url.length > 0);
+  const viewableImages = viewable.map(({ img }) => img);
+  const originalToViewable = new Map<number, number>(
+    viewable.map(({ i }, v) => [i, v]),
+  );
+
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+
+  return (
+    <>
+      <div className="ml-auto flex flex-wrap items-end justify-end gap-2">
+        {images.map((img, i) => (
+          <UserImageCell
+            key={`${img.url ?? "placeholder"}-${i}`}
+            image={img}
+            placeholderLabel={t("message.imageAttachment")}
+            openLabel={t("lightbox.open")}
+            onOpen={
+              originalToViewable.has(i)
+                ? () => setLightboxIndex(originalToViewable.get(i)!)
+                : undefined
+            }
+          />
+        ))}
+      </div>
+      <ImageLightbox
+        images={viewableImages}
+        index={lightboxIndex}
+        onIndexChange={setLightboxIndex}
+        onOpenChange={(open) => {
+          if (!open) setLightboxIndex(null);
+        }}
+      />
+    </>
+  );
+}
+
+function UserImageCell({
+  image,
+  placeholderLabel,
+  openLabel,
+  onOpen,
+}: {
+  image: UIImage;
+  placeholderLabel: string;
+  openLabel: string;
+  onOpen?: () => void;
+}) {
+  const hasUrl = typeof image.url === "string" && image.url.length > 0;
+  const tileClasses = cn(
+    "relative h-24 w-24 overflow-hidden rounded-[14px] border border-border/60 bg-muted/40",
+    "shadow-[0_6px_18px_-14px_rgba(0,0,0,0.45)]",
+  );
+
+  if (hasUrl && onOpen) {
+    return (
+      <button
+        type="button"
+        onClick={onOpen}
+        aria-label={image.name ? `${openLabel}: ${image.name}` : openLabel}
+        title={image.name ?? undefined}
+        className={cn(
+          tileClasses,
+          "cursor-zoom-in transition-transform duration-150 motion-reduce:transition-none",
+          "hover:scale-[1.02] hover:ring-2 hover:ring-primary/30",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
+        )}
+      >
+        <img
+          src={image.url}
+          alt={image.name ?? ""}
+          loading="lazy"
+          decoding="async"
+          draggable={false}
+          className="h-full w-full object-cover"
+        />
+      </button>
+    );
+  }
+
+  return (
+    <div className={tileClasses} title={image.name ?? undefined}>
+      <div
+        className="flex h-full w-full flex-col items-center justify-center gap-1 px-2 text-[11px] text-muted-foreground"
+        aria-label={placeholderLabel}
+      >
+        <ImageIcon className="h-4 w-4 flex-none" aria-hidden />
+        <span className="line-clamp-2 text-center leading-tight">
+          {image.name ?? placeholderLabel}
+        </span>
+      </div>
+    </div>
+  );
+}
+
 /** Blinking cursor appended at the end of streaming text. */
 function StreamCursor() {
   const { t } = useTranslation();