feat(chat): port chat widget components from Dart to React

src/app/chat/components/image-bubble.tsx

@@ -0,0 +1,67 @@
+"use client";
+/**
+ * ImageBubble 图片气泡
+ *
+ * 原始 Dart: lib/ui/chat/widgets/image_bubble.dart（63 行）
+ *
+ * 支持：
+ *   - base64 data URI 解码（`data:image/png;base64,...`）
+ *   - 点击 → 打开全屏查看器
+ *   - 错误占位符（broken image icon）
+ */
+import { useState } from "react";
+
+import { FullscreenImageViewer } from "./fullscreen-image-viewer";
+import styles from "./image-bubble.module.css";
+
+export interface ImageBubbleProps {
+  imageUrl: string; // base64 data URI 或 URL
+}
+
+export function ImageBubble({ imageUrl }: ImageBubbleProps) {
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState(false);
+
+  const src = decodeBase64Image(imageUrl);
+
+  return (
+    <>
+      <div
+        className={styles.bubble}
+        onClick={() => setOpen(true)}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        }}
+        aria-label="Open image in fullscreen"
+      >
+        {error ? (
+          <div className={styles.errorFallback}>🖼</div>
+        ) : (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            className={styles.image}
+            src={src}
+            alt=""
+            onError={() => setError(true)}
+          />
+        )}
+      </div>
+      {open && <FullscreenImageViewer imageUrl={imageUrl} onClose={() => setOpen(false)} />}
+    </>
+  );
+}
+
+/** 解析 base64 data URI（`data:image/png;base64,...`），否则原样返回 */
+function decodeBase64Image(uri: string): string {
+  // 已是 data URI 或 http(s) URL：直接返回
+  if (uri.startsWith("data:") || uri.startsWith("http")) {
+    return uri;
+  }
+  // 裸 base64 字符串 → 包装成 data URI（PNG 兜底）
+  return `data:image/png;base64,${uri}`;
+}