@cntyclub/agent-react 0.10.1 → 0.11.0

package/dist/index.js

@@ -1,8 +1,9 @@
-import { Button, cn, Tooltip, TooltipTrigger, TooltipContent, ChatMessage, ChatMessageBubble, Markdown, Spinner, Checkbox, Collapsible, CollapsibleTrigger, ChatToolChip, CollapsiblePanel, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Group, Menu, MenuTrigger, MenuPopup, MenuItem, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Chat, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, useMediaQuery, TooltipProvider, DataTablePaged } from '@cntyclub/ui-react';
-import { FileTextIcon, XIcon, PaperclipIcon, ArrowUpIcon, CheckIcon, CopyIcon, Maximize2Icon, ListChecksIcon, ChevronDownIcon, ShieldAlertIcon, CheckCheckIcon, UploadCloudIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, Trash2Icon, SparklesIcon, DownloadIcon, CodeIcon } from 'lucide-react';
-import * as React8 from 'react';
+import { cn, Button, Tooltip, TooltipTrigger, TooltipContent, ChatMessage, ChatMessageBubble, Markdown, Spinner, Checkbox, Collapsible, CollapsibleTrigger, ChatToolChip, CollapsiblePanel, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Group, Menu, MenuTrigger, MenuPopup, MenuItem, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Chat, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, useMediaQuery, TooltipProvider, DataTablePaged } from '@cntyclub/ui-react';
+import { XIcon, Trash2Icon, SquareIcon, PauseIcon, PlayIcon, CheckIcon, Loader2Icon, FileTextIcon, PaperclipIcon, MicIcon, ArrowUpIcon, CopyIcon, Maximize2Icon, ListChecksIcon, ChevronDownIcon, ShieldAlertIcon, CheckCheckIcon, UploadCloudIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, SparklesIcon, DownloadIcon, CodeIcon } from 'lucide-react';
+import * as React11 from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { motion, AnimatePresence } from 'motion/react';
 
 // src/api-client.ts
 var AgentApiError = class extends Error {
@@ -52,6 +53,18 @@ var AgentApiClient = class {
   getConfig() {
     return this.request("/agent-mode/config/");
   }
+  /** Upload a recorded voice clip and get back the transcribed text. */
+  transcribe(audio) {
+    const type = audio.type || "audio/webm";
+    const ext = type.includes("mp4") ? "mp4" : type.includes("ogg") ? "ogg" : type.includes("wav") ? "wav" : "webm";
+    const form = new FormData();
+    form.append("client_id", this.config.clientId);
+    form.append("audio", audio, `recording.${ext}`);
+    return this.request("/agent-mode/transcribe/", {
+      body: form,
+      method: "POST"
+    });
+  }
   sendMessage(message, conversationId, files) {
     if (files && files.length > 0) {
       const form = new FormData();
@@ -183,28 +196,55 @@ var AgentApiClient = class {
 
 // src/file-support.ts
 var DEFAULT_ACCEPT = [".txt", ".md", ".markdown", ".csv", ".tsv", ".log", ".docx"];
+var IMAGE_ACCEPT = [".png", ".jpg", ".jpeg", ".webp", ".gif"];
 var DEFAULT_MAX_SIZE_MB = 5;
+var DEFAULT_IMAGE_MAX_SIZE_MB = 10;
 function fileUploadEnabled(config) {
   return config.fileUpload?.enabled !== false;
 }
-function acceptedExtensions(config) {
+function textExtensions(config) {
+  if (!fileUploadEnabled(config)) return [];
   const accept = config.fileUpload?.accept;
   return accept && accept.length > 0 ? accept.map((ext) => ext.toLowerCase()) : DEFAULT_ACCEPT;
 }
+function acceptedExtensions(config, caps) {
+  const extensions = [...textExtensions(config)];
+  if (caps?.visionEnabled) extensions.push(...IMAGE_ACCEPT);
+  return extensions;
+}
 function maxSizeMb(config) {
   return config.fileUpload?.maxSizeMb ?? DEFAULT_MAX_SIZE_MB;
 }
-function acceptAttribute(config) {
-  return acceptedExtensions(config).join(",");
+function attachmentsEnabled(config, caps) {
+  return fileUploadEnabled(config) || Boolean(caps?.visionEnabled);
+}
+function acceptAttribute(config, caps) {
+  return acceptedExtensions(config, caps).join(",");
 }
 function extensionOf(filename) {
   const dot = filename.lastIndexOf(".");
   return dot >= 0 ? filename.slice(dot).toLowerCase() : "";
 }
-function validateFile(config, file) {
-  const extensions = acceptedExtensions(config);
+function isImageFile(file) {
+  return file.type.startsWith("image/") || IMAGE_ACCEPT.includes(extensionOf(file.name));
+}
+function validateFile(config, file, caps) {
+  if (isImageFile(file)) {
+    if (!caps?.visionEnabled) {
+      return `\u201C${file.name}\u201D is an image \u2014 this assistant can\u2019t accept images.`;
+    }
+    const limit2 = caps.visionMaxMb ?? DEFAULT_IMAGE_MAX_SIZE_MB;
+    if (file.size > limit2 * 1024 * 1024) {
+      return `\u201C${file.name}\u201D is too large (max ${limit2} MB).`;
+    }
+    return null;
+  }
+  const extensions = textExtensions(config);
+  if (!fileUploadEnabled(config)) {
+    return `\u201C${file.name}\u201D can\u2019t be attached \u2014 file upload is disabled for this assistant.`;
+  }
   if (!extensions.includes(extensionOf(file.name))) {
-    return `\u201C${file.name}\u201D isn\u2019t a supported text file. Allowed: ${extensions.join(", ")}.`;
+    return `\u201C${file.name}\u201D isn\u2019t a supported file. Allowed: ${extensions.join(", ")}.`;
   }
   const limit = maxSizeMb(config);
   if (file.size > limit * 1024 * 1024) {
@@ -218,42 +258,305 @@ function formatBytes(bytes) {
   if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function AgentImageLightbox({ src, alt, onClose }) {
+  React11.useEffect(() => {
+    if (!src) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [src, onClose]);
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: src ? /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        animate: { opacity: 1 },
+        "aria-modal": "true",
+        className: cn(
+          "fixed inset-0 z-[2147483000] flex items-center justify-center bg-black/80 p-6 backdrop-blur-sm"
+        ),
+        exit: { opacity: 0 },
+        initial: { opacity: 0 },
+        onClick: onClose,
+        role: "dialog",
+        transition: { duration: 0.15 },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Close image",
+              className: "absolute top-4 right-4 flex size-10 cursor-pointer items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 [&_svg]:size-5",
+              onClick: onClose,
+              type: "button",
+              children: /* @__PURE__ */ jsx(XIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.img,
+            {
+              alt: alt ?? "Attached image",
+              animate: { scale: 1, opacity: 1 },
+              className: "max-h-full max-w-full rounded-lg object-contain shadow-2xl",
+              exit: { scale: 0.96, opacity: 0 },
+              initial: { scale: 0.96, opacity: 0 },
+              onClick: (event) => event.stopPropagation(),
+              src,
+              transition: { duration: 0.15 }
+            }
+          )
+        ]
+      }
+    ) : null }),
+    document.body
+  );
+}
+function formatClock(totalSeconds) {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function pickMimeType() {
+  if (typeof MediaRecorder === "undefined") return "";
+  for (const type of ["audio/webm", "audio/mp4", "audio/ogg"]) {
+    if (MediaRecorder.isTypeSupported(type)) return type;
+  }
+  return "";
+}
+function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError }) {
+  const [phase, setPhase] = React11.useState("recording");
+  const [elapsed, setElapsed] = React11.useState(0);
+  const [playing, setPlaying] = React11.useState(false);
+  const recorderRef = React11.useRef(null);
+  const streamRef = React11.useRef(null);
+  const chunksRef = React11.useRef([]);
+  const blobRef = React11.useRef(null);
+  const audioUrlRef = React11.useRef(null);
+  const audioRef = React11.useRef(null);
+  const timerRef = React11.useRef(null);
+  const onErrorRef = React11.useRef(onError);
+  onErrorRef.current = onError;
+  const stopTracks = React11.useCallback(() => {
+    streamRef.current?.getTracks().forEach((track) => track.stop());
+    streamRef.current = null;
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  React11.useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) {
+        onErrorRef.current("Voice recording isn't supported in this browser.");
+        onCancel();
+        return;
+      }
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        if (cancelled) {
+          stream.getTracks().forEach((track) => track.stop());
+          return;
+        }
+        streamRef.current = stream;
+        const mimeType = pickMimeType();
+        const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
+        recorderRef.current = recorder;
+        chunksRef.current = [];
+        recorder.ondataavailable = (event) => {
+          if (event.data.size > 0) chunksRef.current.push(event.data);
+        };
+        recorder.onstop = () => {
+          const blob = new Blob(chunksRef.current, { type: mimeType || "audio/webm" });
+          blobRef.current = blob;
+          if (audioUrlRef.current) URL.revokeObjectURL(audioUrlRef.current);
+          audioUrlRef.current = URL.createObjectURL(blob);
+          setPhase("review");
+        };
+        recorder.start();
+        timerRef.current = setInterval(() => {
+          setElapsed((current) => {
+            const next = current + 1;
+            if (next >= maxSeconds) stopRecording();
+            return next;
+          });
+        }, 1e3);
+      } catch {
+        onErrorRef.current("Microphone access was blocked. Enable it to record.");
+        onCancel();
+      }
+    })();
+    return () => {
+      cancelled = true;
+      stopTracks();
+      if (recorderRef.current && recorderRef.current.state !== "inactive") {
+        try {
+          recorderRef.current.stop();
+        } catch {
+        }
+      }
+      if (audioUrlRef.current) URL.revokeObjectURL(audioUrlRef.current);
+    };
+  }, []);
+  function stopRecording() {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    const recorder = recorderRef.current;
+    if (recorder && recorder.state !== "inactive") recorder.stop();
+    stopTracks();
+  }
+  const togglePlayback = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (audio.paused) {
+      void audio.play();
+      setPlaying(true);
+    } else {
+      audio.pause();
+      setPlaying(false);
+    }
+  };
+  const confirm = async () => {
+    const blob = blobRef.current;
+    if (!blob || blob.size === 0) {
+      onError("The recording was empty.");
+      onCancel();
+      return;
+    }
+    setPhase("transcribing");
+    try {
+      const text = await transcribe(blob);
+      onDone(text.trim());
+    } catch {
+      onError("Transcription failed. Please try again.");
+      setPhase("review");
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      animate: { opacity: 1, y: 0 },
+      className: "flex min-h-8 flex-1 items-center gap-2 px-1",
+      initial: { opacity: 0, y: 4 },
+      transition: { duration: 0.15 },
+      children: [
+        phase === "recording" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                animate: { opacity: [1, 0.35, 1] },
+                className: "size-2.5 rounded-full bg-destructive",
+                transition: { duration: 1.2, repeat: Infinity }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: formatClock(elapsed) }),
+            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              "/ ",
+              formatClock(maxSeconds)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+          /* @__PURE__ */ jsx(Button, { "aria-label": "Discard recording", onClick: onCancel, size: "icon-sm", type: "button", variant: "ghost", children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
+          /* @__PURE__ */ jsx(Button, { "aria-label": "Stop recording", onClick: stopRecording, size: "icon-sm", type: "button", children: /* @__PURE__ */ jsx(SquareIcon, {}) })
+        ] }) : null,
+        phase === "review" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("audio", { onEnded: () => setPlaying(false), ref: audioRef, src: audioUrlRef.current ?? void 0 }),
+          /* @__PURE__ */ jsx(Button, { "aria-label": playing ? "Pause" : "Play recording", onClick: togglePlayback, size: "icon-sm", type: "button", variant: "ghost", children: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm tabular-nums", children: formatClock(elapsed) }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+          /* @__PURE__ */ jsx(Button, { "aria-label": "Discard recording", onClick: onCancel, size: "icon-sm", type: "button", variant: "ghost", children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
+          /* @__PURE__ */ jsx(Button, { "aria-label": "Use recording", className: "rounded-full before:rounded-full", onClick: () => void confirm(), size: "icon-sm", type: "button", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+        ] }) : null,
+        phase === "transcribing" ? /* @__PURE__ */ jsxs("span", { className: cn("flex flex-1 items-center gap-2 text-muted-foreground text-sm"), children: [
+          /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }),
+          "Transcribing\u2026"
+        ] }) : null
+      ]
+    }
+  );
+}
+function appendText(current, addition) {
+  if (!addition) return current;
+  if (!current) return addition;
+  return /\s$/.test(current) ? current + addition : `${current} ${addition}`;
+}
 function AgentComposer({
   acceptAttribute: acceptAttribute2,
   busy,
   className,
   disabled,
   files,
+  onError,
   onPickFiles,
   onRemoveFile,
   onSubmit,
+  onTranscribe,
   onValueChange,
   placeholder = "Ask anything\u2026",
-  value
+  value,
+  voiceEnabled,
+  voiceMaxSeconds = 600
 }) {
-  const textareaRef = React8.useRef(null);
-  const inputRef = React8.useRef(null);
+  const textareaRef = React11.useRef(null);
+  const inputRef = React11.useRef(null);
+  const [recording, setRecording] = React11.useState(false);
+  const [lightboxSrc, setLightboxSrc] = React11.useState(null);
   const canSubmit = !disabled && !busy && (value.trim().length > 0 || files.length > 0);
-  const submit = React8.useCallback(() => {
+  const voiceAvailable = Boolean(voiceEnabled && onTranscribe);
+  const submit = React11.useCallback(() => {
     if (!canSubmit) return;
     onSubmit(value.trim());
     textareaRef.current?.focus();
   }, [canSubmit, onSubmit, value]);
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     if (!disabled) textareaRef.current?.focus();
   }, [disabled]);
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
     textarea.style.height = "auto";
     textarea.style.height = `${Math.min(textarea.scrollHeight, 144)}px`;
   }, [value]);
+  const previews = React11.useMemo(
+    () => files.map((file, originalIndex) => {
+      const image = isImageFile(file);
+      return { file, image, originalIndex, url: image ? URL.createObjectURL(file) : null };
+    }),
+    [files]
+  );
+  React11.useEffect(
+    () => () => {
+      previews.forEach((preview) => preview.url && URL.revokeObjectURL(preview.url));
+    },
+    [previews]
+  );
+  const ordered = React11.useMemo(
+    () => [...previews].sort((a, b) => Number(b.image) - Number(a.image)),
+    [previews]
+  );
   const handlePick = (event) => {
     const picked = Array.from(event.target.files ?? []);
     if (picked.length) onPickFiles?.(picked);
     event.target.value = "";
   };
-  return /* @__PURE__ */ jsx(
+  const handlePaste = (event) => {
+    if (!onPickFiles) return;
+    const images = Array.from(event.clipboardData?.files ?? []).filter((file) => file.type.startsWith("image/"));
+    if (images.length) {
+      event.preventDefault();
+      onPickFiles(images);
+    }
+  };
+  const finishRecording = (text) => {
+    setRecording(false);
+    if (text) onValueChange(appendText(value, text));
+    setTimeout(() => textareaRef.current?.focus(), 0);
+  };
+  return /* @__PURE__ */ jsxs(
     "form",
     {
       className: cn("shrink-0 bg-background p-3 pt-1.5", className),
@@ -262,96 +565,148 @@ function AgentComposer({
         event.preventDefault();
         submit();
       },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col gap-1.5 rounded-2xl border border-input bg-popover p-1.5 shadow-xs transition-[border-color,box-shadow] duration-150 focus-within:border-ring/64 focus-within:ring-2 focus-within:ring-ring/24 dark:bg-input/32",
-            disabled && "opacity-64"
-          ),
-          children: [
-            files.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 px-1 pt-1", children: files.map((file, index) => /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: "flex max-w-52 items-center gap-1.5 rounded-lg border border-border/72 bg-muted/48 py-1 pr-1 pl-2 text-xs",
-                children: [
-                  /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: file.name }),
-                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: formatBytes(file.size) }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-1.5 rounded-2xl border border-input bg-popover p-1.5 shadow-xs transition-[border-color,box-shadow] duration-150 focus-within:border-ring/64 focus-within:ring-2 focus-within:ring-ring/24 dark:bg-input/32",
+              disabled && "opacity-64"
+            ),
+            children: [
+              files.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 px-1 pt-1", children: ordered.map(
+                (preview) => preview.image && preview.url ? /* @__PURE__ */ jsxs("span", { className: "group relative", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "aria-label": `Preview ${preview.file.name}`,
+                      className: "block size-14 cursor-zoom-in overflow-hidden rounded-lg border border-border/72",
+                      onClick: () => setLightboxSrc(preview.url),
+                      type: "button",
+                      children: /* @__PURE__ */ jsx("img", { alt: preview.file.name, className: "size-full object-cover", src: preview.url })
+                    }
+                  ),
                   onRemoveFile ? /* @__PURE__ */ jsx(
                     "button",
                     {
-                      "aria-label": `Remove ${file.name}`,
-                      className: "flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground [&_svg]:size-3",
-                      onClick: () => onRemoveFile(index),
+                      "aria-label": `Remove ${preview.file.name}`,
+                      className: "-right-1.5 -top-1.5 absolute flex size-5 cursor-pointer items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-sm hover:text-foreground [&_svg]:size-3",
+                      onClick: () => onRemoveFile(preview.originalIndex),
                       type: "button",
                       children: /* @__PURE__ */ jsx(XIcon, {})
                     }
                   ) : null
-                ]
-              },
-              `${file.name}-${index}`
-            )) }) : null,
-            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1.5", children: [
-              onPickFiles ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                ] }, `${preview.file.name}-${preview.originalIndex}`) : /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "flex max-w-52 items-center gap-1.5 rounded-lg border border-border/72 bg-muted/48 py-1 pr-1 pl-2 text-xs",
+                    children: [
+                      /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: preview.file.name }),
+                      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: formatBytes(preview.file.size) }),
+                      onRemoveFile ? /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          "aria-label": `Remove ${preview.file.name}`,
+                          className: "flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground [&_svg]:size-3",
+                          onClick: () => onRemoveFile(preview.originalIndex),
+                          type: "button",
+                          children: /* @__PURE__ */ jsx(XIcon, {})
+                        }
+                      ) : null
+                    ]
+                  },
+                  `${preview.file.name}-${preview.originalIndex}`
+                )
+              ) }) : null,
+              recording && onTranscribe ? /* @__PURE__ */ jsx(
+                AgentVoiceRecorder,
+                {
+                  maxSeconds: voiceMaxSeconds,
+                  onCancel: () => {
+                    setRecording(false);
+                    setTimeout(() => textareaRef.current?.focus(), 0);
+                  },
+                  onDone: finishRecording,
+                  onError: (message) => onError?.(message),
+                  transcribe: onTranscribe
+                }
+              ) : /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1.5", children: [
+                onPickFiles ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      accept: acceptAttribute2,
+                      className: "hidden",
+                      multiple: true,
+                      onChange: handlePick,
+                      ref: inputRef,
+                      type: "file"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      "aria-label": "Attach files",
+                      className: "shrink-0 self-center",
+                      disabled,
+                      onClick: () => inputRef.current?.click(),
+                      size: "icon-sm",
+                      type: "button",
+                      variant: "ghost",
+                      children: /* @__PURE__ */ jsx(PaperclipIcon, {})
+                    }
+                  )
+                ] }) : null,
                 /* @__PURE__ */ jsx(
-                  "input",
+                  "textarea",
                   {
-                    accept: acceptAttribute2,
-                    className: "hidden",
-                    multiple: true,
-                    onChange: handlePick,
-                    ref: inputRef,
-                    type: "file"
+                    className: "max-h-36 min-h-8 flex-1 resize-none self-center bg-transparent py-1.5 pl-1.5 text-sm outline-none placeholder:text-muted-foreground",
+                    disabled,
+                    onChange: (event) => onValueChange(event.target.value),
+                    onKeyDown: (event) => {
+                      if (event.key === "Enter" && !event.shiftKey) {
+                        event.preventDefault();
+                        submit();
+                      }
+                    },
+                    onPaste: onPickFiles ? handlePaste : void 0,
+                    placeholder,
+                    ref: textareaRef,
+                    rows: 1,
+                    value
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                voiceAvailable ? /* @__PURE__ */ jsx(
                   Button,
                   {
-                    "aria-label": "Attach files",
+                    "aria-label": "Record voice",
                     className: "shrink-0 self-center",
                     disabled,
-                    onClick: () => inputRef.current?.click(),
+                    onClick: () => setRecording(true),
                     size: "icon-sm",
                     type: "button",
                     variant: "ghost",
-                    children: /* @__PURE__ */ jsx(PaperclipIcon, {})
+                    children: /* @__PURE__ */ jsx(MicIcon, {})
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-label": "Send message",
+                    className: "shrink-0 rounded-full before:rounded-full",
+                    disabled: !canSubmit,
+                    size: "icon-sm",
+                    type: "submit",
+                    children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
                   }
                 )
-              ] }) : null,
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  className: "max-h-36 min-h-8 flex-1 resize-none self-center bg-transparent py-1.5 pl-1.5 text-sm outline-none placeholder:text-muted-foreground",
-                  disabled,
-                  onChange: (event) => onValueChange(event.target.value),
-                  onKeyDown: (event) => {
-                    if (event.key === "Enter" && !event.shiftKey) {
-                      event.preventDefault();
-                      submit();
-                    }
-                  },
-                  placeholder,
-                  ref: textareaRef,
-                  rows: 1,
-                  value
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  "aria-label": "Send message",
-                  className: "shrink-0 rounded-full before:rounded-full",
-                  disabled: !canSubmit,
-                  size: "icon-sm",
-                  type: "submit",
-                  children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
-                }
-              )
-            ] })
-          ]
-        }
-      )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(AgentImageLightbox, { onClose: () => setLightboxSrc(null), src: lightboxSrc })
+      ]
     }
   );
 }
@@ -424,15 +779,15 @@ function groupMessages(messages) {
   return items;
 }
 function ChatScroller({ children, className, ...props }) {
-  const viewportRef = React8.useRef(null);
-  const pinnedRef = React8.useRef(true);
-  const handleScroll = React8.useCallback(() => {
+  const viewportRef = React11.useRef(null);
+  const pinnedRef = React11.useRef(true);
+  const handleScroll = React11.useCallback(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     const distanceFromBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
     pinnedRef.current = distanceFromBottom < 64;
   }, []);
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport || !pinnedRef.current) return;
     viewport.scrollTop = viewport.scrollHeight;
@@ -450,14 +805,14 @@ function ChatScroller({ children, className, ...props }) {
   );
 }
 function CopyButton({ className, text }) {
-  const [copied, setCopied] = React8.useState(false);
-  const timerRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const [copied, setCopied] = React11.useState(false);
+  const timerRef = React11.useRef(null);
+  React11.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
-  const copy = React8.useCallback(async () => {
+  const copy = React11.useCallback(async () => {
     try {
       await navigator.clipboard.writeText(text);
     } catch {
@@ -488,11 +843,26 @@ function CopyButton({ className, text }) {
     /* @__PURE__ */ jsx(TooltipContent, { children: copied ? "Copied!" : "Copy" })
   ] });
 }
+var isImageAttachment = (format) => IMAGE_ACCEPT.includes(`.${format.toLowerCase()}`);
 function MessageItem({ message }) {
+  const [lightboxSrc, setLightboxSrc] = React11.useState(null);
   if (message.role === "user") {
     const attachments = message.attachments ?? [];
+    const images = attachments.filter((a) => isImageAttachment(a.format) && a.url);
+    const others = attachments.filter((a) => !isImageAttachment(a.format) || !a.url);
     return /* @__PURE__ */ jsxs(ChatMessage, { from: "user", children: [
-      attachments.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-1.5", children: attachments.map((attachment) => /* @__PURE__ */ jsxs(
+      images.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-1.5", children: images.map((attachment) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": `Preview ${attachment.filename}`,
+          className: "block size-20 cursor-zoom-in overflow-hidden rounded-lg border border-border/72",
+          onClick: () => setLightboxSrc(attachment.url ?? null),
+          type: "button",
+          children: /* @__PURE__ */ jsx("img", { alt: attachment.filename, className: "size-full object-cover", src: attachment.url ?? void 0 })
+        },
+        attachment.id
+      )) }) : null,
+      others.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-1.5", children: others.map((attachment) => /* @__PURE__ */ jsxs(
         "span",
         {
           className: "flex max-w-52 items-center gap-1.5 rounded-lg border border-border/72 bg-muted/48 px-2 py-1 text-muted-foreground text-xs",
@@ -503,7 +873,8 @@ function MessageItem({ message }) {
         },
         attachment.id
       )) }) : null,
-      message.content ? /* @__PURE__ */ jsx(ChatMessageBubble, { from: "user", children: message.content }) : null
+      message.content ? /* @__PURE__ */ jsx(ChatMessageBubble, { from: "user", children: message.content }) : null,
+      /* @__PURE__ */ jsx(AgentImageLightbox, { onClose: () => setLightboxSrc(null), src: lightboxSrc })
     ] });
   }
   if (message.role === "assistant") {
@@ -534,8 +905,8 @@ var DEFAULT_PHRASES = [
 ];
 function ThinkingIndicator({ className, intervalMs = 1800, phrases }) {
   const words = phrases && phrases.length ? phrases : DEFAULT_PHRASES;
-  const [index, setIndex] = React8.useState(0);
-  React8.useEffect(() => {
+  const [index, setIndex] = React11.useState(0);
+  React11.useEffect(() => {
     setIndex(0);
     const timer = setInterval(() => {
       setIndex((current) => (current + 1) % words.length);
@@ -797,7 +1168,7 @@ function DownloadButton({ block, size = "sm" }) {
   );
 }
 function DocumentViewer({ block, onClose }) {
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     const onKey = (event) => event.key === "Escape" && onClose();
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
@@ -822,7 +1193,7 @@ function DocumentViewer({ block, onClose }) {
   ] });
 }
 function DocumentCard({ block }) {
-  const [open, setOpen] = React8.useState(false);
+  const [open, setOpen] = React11.useState(false);
   const previewLines = (block.preview || "").split("\n").slice(0, 6).join("\n");
   return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-full overflow-hidden rounded-xl border border-border bg-card shadow-xs", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-border/72 border-b px-3 py-2", children: [
@@ -944,7 +1315,7 @@ function StepDetail({
   ] });
 }
 function ToolActivityGroup({ describeToolCall, steps }) {
-  const [open, setOpen] = React8.useState(false);
+  const [open, setOpen] = React11.useState(false);
   if (steps.length === 0) return null;
   const last = steps[steps.length - 1];
   const anyRunning = steps.some((step) => step.status === "running");
@@ -1048,24 +1419,28 @@ function AgentPanel({
   onClose,
   onToggleAgentMode
 }) {
-  const [draft, setDraft] = React8.useState("");
-  const [view, setView] = React8.useState("chat");
-  const [files, setFiles] = React8.useState([]);
-  const [uploadError, setUploadError] = React8.useState(null);
-  const [dragging, setDragging] = React8.useState(false);
-  const dragDepth = React8.useRef(0);
+  const [draft, setDraft] = React11.useState("");
+  const [view, setView] = React11.useState("chat");
+  const [files, setFiles] = React11.useState([]);
+  const [uploadError, setUploadError] = React11.useState(null);
+  const [dragging, setDragging] = React11.useState(false);
+  const dragDepth = React11.useRef(0);
   const agentName = config.agentName ?? chat.agentInfo?.name ?? "Assistant";
-  const uploadEnabled = fileUploadEnabled(config);
+  const caps = {
+    visionEnabled: chat.agentInfo?.vision_enabled,
+    visionMaxMb: chat.agentInfo?.vision_max_file_mb
+  };
+  const uploadEnabled = attachmentsEnabled(config, caps);
   const suggestions = config.suggestions ?? [
     "What can you help me with?",
     "Give me a quick summary of my data."
   ];
-  const addFiles = React8.useCallback(
+  const addFiles = React11.useCallback(
     (incoming) => {
       const accepted = [];
       let rejection = null;
       for (const file of incoming) {
-        const error = validateFile(config, file);
+        const error = validateFile(config, file, caps);
         if (error) {
           rejection = error;
           continue;
@@ -1075,12 +1450,12 @@ function AgentPanel({
       setUploadError(rejection);
       if (accepted.length) setFiles((current) => [...current, ...accepted].slice(0, 10));
     },
-    [config]
+    [config, caps.visionEnabled, caps.visionMaxMb]
   );
-  const removeFile = React8.useCallback((index) => {
+  const removeFile = React11.useCallback((index) => {
     setFiles((current) => current.filter((_, i) => i !== index));
   }, []);
-  const handleSubmit = React8.useCallback(
+  const handleSubmit = React11.useCallback(
     (text) => {
       const staged = files;
       setDraft("");
@@ -1090,7 +1465,7 @@ function AgentPanel({
     },
     [chat, files]
   );
-  const onDragEnter = React8.useCallback(
+  const onDragEnter = React11.useCallback(
     (event) => {
       if (!uploadEnabled || !event.dataTransfer?.types?.includes("Files")) return;
       dragDepth.current += 1;
@@ -1098,12 +1473,12 @@ function AgentPanel({
     },
     [uploadEnabled]
   );
-  const onDragLeave = React8.useCallback((event) => {
+  const onDragLeave = React11.useCallback((event) => {
     if (!event.dataTransfer?.types?.includes("Files")) return;
     dragDepth.current = Math.max(0, dragDepth.current - 1);
     if (dragDepth.current === 0) setDragging(false);
   }, []);
-  const onDrop = React8.useCallback(
+  const onDrop = React11.useCallback(
     (event) => {
       if (!uploadEnabled) return;
       event.preventDefault();
@@ -1114,7 +1489,7 @@ function AgentPanel({
     },
     [addFiles, uploadEnabled]
   );
-  const openHistory = React8.useCallback(() => {
+  const openHistory = React11.useCallback(() => {
     setView("history");
     void chat.refreshConversations();
   }, [chat]);
@@ -1137,8 +1512,8 @@ function AgentPanel({
       children: [
         dragging && view === "chat" ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-40 flex flex-col items-center justify-center gap-2 bg-background/85 backdrop-blur-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 rounded-2xl border-2 border-primary/40 border-dashed px-8 py-6 text-center", children: [
           /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-8 text-primary" }),
-          /* @__PURE__ */ jsx("div", { className: "font-medium text-sm", children: "Drop text files to attach" }),
-          /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: acceptAttribute(config).replaceAll(",", " \xB7 ") })
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-sm", children: "Drop files to attach" }),
+          /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: acceptAttribute(config, caps).replaceAll(",", " \xB7 ") })
         ] }) }) : null,
         /* @__PURE__ */ jsxs(ChatHeader, { children: [
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
@@ -1269,7 +1644,7 @@ function AgentPanel({
               const anchorKey = newMessageAnchorId ? grouped.find(
                 (it) => it.kind !== "tool-activity" && it.message.id === newMessageAnchorId
               )?.key : void 0;
-              return grouped.map((item) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+              return grouped.map((item) => /* @__PURE__ */ jsxs(React11.Fragment, { children: [
                 item.key === anchorKey ? /* @__PURE__ */ jsx(NewMessagesDivider, {}) : null,
                 /* @__PURE__ */ jsx(
                   motion.div,
@@ -1319,17 +1694,21 @@ function AgentPanel({
           /* @__PURE__ */ jsx(
             AgentComposer,
             {
-              acceptAttribute: acceptAttribute(config),
+              acceptAttribute: acceptAttribute(config, caps),
               busy,
               className: cn(agentMode && "mx-auto w-full max-w-3xl"),
               disabled: chat.pendingApprovals.length > 0,
               files,
+              onError: setUploadError,
               onPickFiles: uploadEnabled ? addFiles : void 0,
               onRemoveFile: removeFile,
               onSubmit: handleSubmit,
+              onTranscribe: chat.transcribe,
               onValueChange: setDraft,
               placeholder: chat.pendingApprovals.length > 0 ? "Approve or decline the pending action first\u2026" : `Ask ${agentName}\u2026`,
-              value: draft
+              value: draft,
+              voiceEnabled: chat.agentInfo?.voice_enabled,
+              voiceMaxSeconds: chat.agentInfo?.voice_max_seconds
             }
           )
         ] })
@@ -1365,16 +1744,16 @@ function buildOptimisticUserMessage(text, files) {
   };
 }
 function useAgentChat(config) {
-  const client = React8.useMemo(() => new AgentApiClient(config), [config]);
-  const [agentInfo, setAgentInfo] = React8.useState(null);
-  const [conversationId, setConversationId] = React8.useState(null);
-  const [conversations, setConversations] = React8.useState([]);
-  const [messages, setMessages] = React8.useState([]);
-  const [pendingApprovals, setPendingApprovals] = React8.useState([]);
-  const [sending, setSending] = React8.useState(false);
-  const [resolvingApprovalId, setResolvingApprovalId] = React8.useState(null);
-  const [error, setError] = React8.useState(null);
-  React8.useEffect(() => {
+  const client = React11.useMemo(() => new AgentApiClient(config), [config]);
+  const [agentInfo, setAgentInfo] = React11.useState(null);
+  const [conversationId, setConversationId] = React11.useState(null);
+  const [conversations, setConversations] = React11.useState([]);
+  const [messages, setMessages] = React11.useState([]);
+  const [pendingApprovals, setPendingApprovals] = React11.useState([]);
+  const [sending, setSending] = React11.useState(false);
+  const [resolvingApprovalId, setResolvingApprovalId] = React11.useState(null);
+  const [error, setError] = React11.useState(null);
+  React11.useEffect(() => {
     let cancelled = false;
     client.getConfig().then((info) => {
       if (!cancelled) setAgentInfo(info);
@@ -1384,11 +1763,11 @@ function useAgentChat(config) {
       cancelled = true;
     };
   }, [client]);
-  const handleFailure = React8.useCallback((err) => {
+  const handleFailure = React11.useCallback((err) => {
     const message = err instanceof AgentApiError ? err.message : "Something went wrong. Please try again.";
     setError(message);
   }, []);
-  const applyResponse = React8.useCallback(
+  const applyResponse = React11.useCallback(
     (response) => {
       if (response.status === "error" && !response.messages?.length) {
         setError(response.message ?? "The assistant could not answer.");
@@ -1410,7 +1789,7 @@ function useAgentChat(config) {
     },
     []
   );
-  const handleStreamEvent = React8.useCallback(
+  const handleStreamEvent = React11.useCallback(
     (event, ctx) => {
       switch (event.type) {
         case "conversation":
@@ -1475,7 +1854,7 @@ function useAgentChat(config) {
     []
   );
   const streamingEnabled = config.streaming !== false && typeof ReadableStream !== "undefined";
-  const send = React8.useCallback(
+  const send = React11.useCallback(
     async (text, files) => {
       if (sending) return;
       if (!text.trim() && !(files && files.length)) return;
@@ -1506,7 +1885,14 @@ function useAgentChat(config) {
     },
     [applyResponse, client, conversationId, handleFailure, handleStreamEvent, sending, streamingEnabled]
   );
-  const resolveApproval = React8.useCallback(
+  const transcribe = React11.useCallback(
+    async (audio) => {
+      const { text } = await client.transcribe(audio);
+      return text;
+    },
+    [client]
+  );
+  const resolveApproval = React11.useCallback(
     async (callId, approve) => {
       if (resolvingApprovalId) return;
       setResolvingApprovalId(callId);
@@ -1535,13 +1921,13 @@ function useAgentChat(config) {
     },
     [applyResponse, client, handleFailure, handleStreamEvent, resolvingApprovalId, streamingEnabled]
   );
-  const newChat = React8.useCallback(() => {
+  const newChat = React11.useCallback(() => {
     setConversationId(null);
     setMessages([]);
     setPendingApprovals([]);
     setError(null);
   }, []);
-  const refreshConversations = React8.useCallback(async () => {
+  const refreshConversations = React11.useCallback(async () => {
     try {
       const { conversations: list } = await client.listConversations();
       setConversations(list);
@@ -1551,7 +1937,7 @@ function useAgentChat(config) {
       return [];
     }
   }, [client, handleFailure]);
-  const openConversation = React8.useCallback(
+  const openConversation = React11.useCallback(
     async (id) => {
       setError(null);
       try {
@@ -1565,7 +1951,7 @@ function useAgentChat(config) {
     },
     [client, handleFailure]
   );
-  const deleteConversation = React8.useCallback(
+  const deleteConversation = React11.useCallback(
     async (id) => {
       try {
         await client.deleteConversation(id);
@@ -1577,7 +1963,7 @@ function useAgentChat(config) {
     },
     [client, conversationId, handleFailure, newChat]
   );
-  const clearError = React8.useCallback(() => setError(null), []);
+  const clearError = React11.useCallback(() => setError(null), []);
   return {
     agentInfo,
     clearError,
@@ -1593,7 +1979,8 @@ function useAgentChat(config) {
     resolveApproval,
     resolvingApprovalId,
     send,
-    sending
+    sending,
+    transcribe
   };
 }
 var STORAGE_PREFIX = "cc-agent-always-approve:";
@@ -1612,11 +1999,11 @@ function readStored(clientId) {
   }
 }
 function useAlwaysApprove(clientId) {
-  const [approved, setApproved] = React8.useState(() => /* @__PURE__ */ new Set());
-  React8.useEffect(() => {
+  const [approved, setApproved] = React11.useState(() => /* @__PURE__ */ new Set());
+  React11.useEffect(() => {
     setApproved(readStored(clientId));
   }, [clientId]);
-  const persist = React8.useCallback(
+  const persist = React11.useCallback(
     (next) => {
       setApproved(next);
       if (typeof window === "undefined") return;
@@ -1627,8 +2014,8 @@ function useAlwaysApprove(clientId) {
     },
     [clientId]
   );
-  const isAlwaysApproved = React8.useCallback((toolName) => approved.has(toolName), [approved]);
-  const setAlwaysApprove = React8.useCallback(
+  const isAlwaysApproved = React11.useCallback((toolName) => approved.has(toolName), [approved]);
+  const setAlwaysApprove = React11.useCallback(
     (toolName) => {
       if (approved.has(toolName)) return;
       const next = new Set(approved);
@@ -1637,7 +2024,7 @@ function useAlwaysApprove(clientId) {
     },
     [approved, persist]
   );
-  const clearAlwaysApprove = React8.useCallback(
+  const clearAlwaysApprove = React11.useCallback(
     (toolName) => {
       if (!approved.has(toolName)) return;
       const next = new Set(approved);
@@ -1657,9 +2044,10 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
   const position = config.appearance?.position ?? "bottom-right";
   const isControlled = controlledOpen !== void 0;
   const storageKey2 = `cc-agent-open:${config.clientId}`;
-  const [uncontrolledOpen, setUncontrolledOpen] = React8.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React11.useState(false);
   const open = controlledOpen ?? uncontrolledOpen;
-  const persist = React8.useCallback(
+  const [bootstrapDone, setBootstrapDone] = React11.useState(isControlled);
+  const persist = React11.useCallback(
     (next) => {
       if (isControlled || !behavior.persistOpenState) return;
       try {
@@ -1669,7 +2057,7 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
     },
     [behavior.persistOpenState, isControlled, storageKey2]
   );
-  const setOpen = React8.useCallback(
+  const setOpen = React11.useCallback(
     (next) => {
       setUncontrolledOpen(next);
       persist(next);
@@ -1677,14 +2065,14 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
     },
     [onOpenChange, persist]
   );
-  const [agentMode, setAgentMode] = React8.useState(false);
+  const [agentMode, setAgentMode] = React11.useState(false);
   const isDesktop = useMediaQuery("(min-width: 640px)", { defaultSSRValue: true, ssr: true });
   const fullscreen = !isDesktop || agentMode;
   const chat = useAgentChat(config);
   const alwaysApprove = useAlwaysApprove(config.clientId);
   const { messages, pendingApprovals, resolveApproval, resolvingApprovalId, sending } = chat;
-  const bootRef = React8.useRef(false);
-  React8.useEffect(() => {
+  const bootRef = React11.useRef(false);
+  React11.useEffect(() => {
     if (isControlled || bootRef.current) return;
     bootRef.current = true;
     let cancelled = false;
@@ -1707,14 +2095,21 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
         setUncontrolledOpen(true);
         onOpenChange?.(true);
       }
+      setBootstrapDone(true);
     })();
     return () => {
       cancelled = true;
     };
   }, []);
-  const seenCountRef = React8.useRef(0);
-  const [anchorId, setAnchorId] = React8.useState(null);
-  React8.useEffect(() => {
+  const seenCountRef = React11.useRef(0);
+  const [baselined, setBaselined] = React11.useState(false);
+  const [anchorId, setAnchorId] = React11.useState(null);
+  React11.useEffect(() => {
+    if (baselined || !bootstrapDone) return;
+    seenCountRef.current = messages.length;
+    setBaselined(true);
+  }, [baselined, bootstrapDone, messages.length]);
+  React11.useEffect(() => {
     if (open) {
       if (messages.length > seenCountRef.current) {
         const firstUnread = messages[seenCountRef.current];
@@ -1723,8 +2118,8 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
       seenCountRef.current = messages.length;
     }
   }, [open, messages]);
-  const unreadCount = open ? 0 : messages.slice(seenCountRef.current).filter(isUnreadable).length;
-  const workLabel = React8.useMemo(() => {
+  const unreadCount = open || !baselined ? 0 : messages.slice(seenCountRef.current).filter(isUnreadable).length;
+  const workLabel = React11.useMemo(() => {
     if (!sending) return null;
     const last = messages[messages.length - 1];
     if (last?.role === "tool") return "Calling tools\u2026";
@@ -1733,14 +2128,14 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
   }, [sending, messages]);
   const approvalWaiting = pendingApprovals.length > 0;
   const { isAlwaysApproved } = alwaysApprove;
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     if (resolvingApprovalId) return;
     const target = pendingApprovals.find((approval) => isAlwaysApproved(approval.tool_name));
     if (target) void resolveApproval(target.id, true);
   }, [pendingApprovals, resolvingApprovalId, isAlwaysApproved, resolveApproval]);
-  const firedWriteIds = React8.useRef(/* @__PURE__ */ new Set());
+  const firedWriteIds = React11.useRef(/* @__PURE__ */ new Set());
   const { onWriteSuccess } = config;
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     if (!onWriteSuccess) return;
     for (const message of messages) {
       if (message.role !== "tool" || !message.is_write || message.tool_status !== "success") continue;
@@ -1750,8 +2145,8 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
       onWriteSuccess({ arguments: args, toolName: message.tool_name ?? "" });
     }
   }, [messages, onWriteSuccess]);
-  const lastNavigatedMessageId = React8.useRef(null);
-  React8.useEffect(() => {
+  const lastNavigatedMessageId = React11.useRef(null);
+  React11.useEffect(() => {
     if (!open || fullscreen || !config.navigate || !config.pages?.length) return;
     const toolMessages = messages.filter((message) => message.role === "tool");
     const latest = toolMessages[toolMessages.length - 1];
@@ -1763,7 +2158,7 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
     const path = mapping.buildRoute ? mapping.buildRoute(args) : mapping.route;
     if (path) config.navigate(path);
   }, [config, fullscreen, messages, open]);
-  const closePanel = React8.useCallback(() => {
+  const closePanel = React11.useCallback(() => {
     setOpen(false);
     setAgentMode(false);
   }, [setOpen]);
@@ -1802,7 +2197,7 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
                 animate: { scale: 1 },
                 exit: { scale: 0 },
                 transition: { type: "spring", stiffness: 500, damping: 20 },
-                className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-xs font-semibold text-destructive-foreground shadow",
+                className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-semibold text-white shadow-md ring-2 ring-background",
                 "aria-label": `${unreadCount} new message${unreadCount === 1 ? "" : "s"}`,
                 children: unreadCount > 9 ? "9+" : unreadCount
               },
@@ -1910,6 +2305,6 @@ function defineAgentConfig(config) {
   return config;
 }
 
-export { AgentApiClient, AgentApiError, AgentComposer, AgentPanel, AgentWidget, ChatScroller, CopyButton, DEFAULT_ACCEPT, DocumentCard, MessageItem, TaskChecklist, ThinkingIndicator, ToolActivityGroup, ToolApprovalCard, acceptAttribute, acceptedExtensions, defineAgentConfig, deriveDetails, fileUploadEnabled, formatBytes, groupMessages, humanizeToolName, resolveToolPresentation, useAgentChat, useAlwaysApprove, validateFile };
+export { AgentApiClient, AgentApiError, AgentComposer, AgentImageLightbox, AgentPanel, AgentVoiceRecorder, AgentWidget, ChatScroller, CopyButton, DEFAULT_ACCEPT, DocumentCard, IMAGE_ACCEPT, MessageItem, TaskChecklist, ThinkingIndicator, ToolActivityGroup, ToolApprovalCard, acceptAttribute, acceptedExtensions, attachmentsEnabled, defineAgentConfig, deriveDetails, fileUploadEnabled, formatBytes, groupMessages, humanizeToolName, isImageFile, resolveToolPresentation, textExtensions, useAgentChat, useAlwaysApprove, validateFile };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map