@cntyclub/agent-react 0.16.0 → 0.17.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { cn, Button, ThinkingOrb, Tooltip, TooltipTrigger, TooltipContent, ChatMessage, ChatMessageBubble, Markdown, AuroraText, 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, FileTextIcon, PaperclipIcon, MicIcon, ArrowUpIcon, CopyIcon, Maximize2Icon, ListChecksIcon, ChevronDownIcon, ShieldAlertIcon, CheckCheckIcon, UploadCloudIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, ChevronsRightIcon, SparklesIcon, DownloadIcon, CodeIcon } from 'lucide-react';
-import * as React11 from 'react';
+import * as React12 from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -259,7 +259,7 @@ function formatBytes(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 function AgentImageLightbox({ src, alt, onClose }) {
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!src) return;
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
@@ -329,24 +329,24 @@ function pickMimeType() {
   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 canvasRef = React11.useRef(null);
-  const audioContextRef = React11.useRef(null);
-  const analyserRef = React11.useRef(null);
-  const rafRef = React11.useRef(null);
-  const levelsRef = React11.useRef(new Array(MAX_BARS).fill(0));
-  const onErrorRef = React11.useRef(onError);
+  const [phase, setPhase] = React12.useState("recording");
+  const [elapsed, setElapsed] = React12.useState(0);
+  const [playing, setPlaying] = React12.useState(false);
+  const recorderRef = React12.useRef(null);
+  const streamRef = React12.useRef(null);
+  const chunksRef = React12.useRef([]);
+  const blobRef = React12.useRef(null);
+  const audioUrlRef = React12.useRef(null);
+  const audioRef = React12.useRef(null);
+  const timerRef = React12.useRef(null);
+  const canvasRef = React12.useRef(null);
+  const audioContextRef = React12.useRef(null);
+  const analyserRef = React12.useRef(null);
+  const rafRef = React12.useRef(null);
+  const levelsRef = React12.useRef(new Array(MAX_BARS).fill(0));
+  const onErrorRef = React12.useRef(onError);
   onErrorRef.current = onError;
-  const stopMeter = React11.useCallback(() => {
+  const stopMeter = React12.useCallback(() => {
     if (rafRef.current != null) {
       cancelAnimationFrame(rafRef.current);
       rafRef.current = null;
@@ -357,7 +357,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
     if (ctx && ctx.state !== "closed") void ctx.close().catch(() => {
     });
   }, []);
-  const stopTracks = React11.useCallback(() => {
+  const stopTracks = React12.useCallback(() => {
     streamRef.current?.getTracks().forEach((track) => track.stop());
     streamRef.current = null;
     if (timerRef.current) {
@@ -366,7 +366,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
     }
     stopMeter();
   }, [stopMeter]);
-  const startMeter = React11.useCallback((stream) => {
+  const startMeter = React12.useCallback((stream) => {
     const Ctor = typeof window === "undefined" ? void 0 : window.AudioContext ?? window.webkitAudioContext;
     if (!Ctor) return;
     let context;
@@ -436,7 +436,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
     };
     rafRef.current = requestAnimationFrame(draw);
   }, []);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     let cancelled = false;
     void (async () => {
       if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) {
@@ -589,40 +589,40 @@ function AgentComposer({
   voiceEnabled,
   voiceMaxSeconds = 600
 }) {
-  const textareaRef = React11.useRef(null);
-  const inputRef = React11.useRef(null);
-  const [recording, setRecording] = React11.useState(false);
-  const [lightboxSrc, setLightboxSrc] = React11.useState(null);
+  const textareaRef = React12.useRef(null);
+  const inputRef = React12.useRef(null);
+  const [recording, setRecording] = React12.useState(false);
+  const [lightboxSrc, setLightboxSrc] = React12.useState(null);
   const canSubmit = !disabled && !busy && (value.trim().length > 0 || files.length > 0);
   const voiceAvailable = Boolean(voiceEnabled && onTranscribe);
-  const submit = React11.useCallback(() => {
+  const submit = React12.useCallback(() => {
     if (!canSubmit) return;
     onSubmit(value.trim());
     textareaRef.current?.focus();
   }, [canSubmit, onSubmit, value]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!disabled) textareaRef.current?.focus();
   }, [disabled]);
-  React11.useEffect(() => {
+  React12.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(
+  const previews = React12.useMemo(
     () => files.map((file, originalIndex) => {
       const image = isImageFile(file);
       return { file, image, originalIndex, url: image ? URL.createObjectURL(file) : null };
     }),
     [files]
   );
-  React11.useEffect(
+  React12.useEffect(
     () => () => {
       previews.forEach((preview) => preview.url && URL.revokeObjectURL(preview.url));
     },
     [previews]
   );
-  const ordered = React11.useMemo(
+  const ordered = React12.useMemo(
     () => [...previews].sort((a, b) => Number(b.image) - Number(a.image)),
     [previews]
   );
@@ -867,15 +867,15 @@ function groupMessages(messages) {
   return items;
 }
 function ChatScroller({ children, className, ...props }) {
-  const viewportRef = React11.useRef(null);
-  const pinnedRef = React11.useRef(true);
-  const handleScroll = React11.useCallback(() => {
+  const viewportRef = React12.useRef(null);
+  const pinnedRef = React12.useRef(true);
+  const handleScroll = React12.useCallback(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     const distanceFromBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
     pinnedRef.current = distanceFromBottom < 64;
   }, []);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport || !pinnedRef.current) return;
     viewport.scrollTop = viewport.scrollHeight;
@@ -892,15 +892,66 @@ function ChatScroller({ children, className, ...props }) {
     }
   );
 }
+var MIN_CHARS_PER_FRAME = 2;
+var CATCH_UP = 0.22;
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React12.useState(
+    () => typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+  React12.useEffect(() => {
+    if (typeof matchMedia === "undefined") return;
+    const mq = matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = (event) => setReduced(event.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+function useSmoothText(target, animate) {
+  const prefersReduced = usePrefersReducedMotion();
+  const enabled = animate && !prefersReduced;
+  const [count, setCount] = React12.useState(() => enabled ? 0 : target.length);
+  const countRef = React12.useRef(count);
+  countRef.current = count;
+  const everEnabled = React12.useRef(enabled);
+  if (enabled) everEnabled.current = true;
+  React12.useEffect(() => {
+    if (!everEnabled.current) {
+      if (countRef.current !== target.length) setCount(target.length);
+      return;
+    }
+    if (countRef.current > target.length) {
+      setCount(target.length);
+      return;
+    }
+    if (countRef.current >= target.length) return;
+    let raf = 0;
+    let last = performance.now();
+    const tick = (now) => {
+      const dt = Math.min(64, now - last);
+      last = now;
+      const frames = dt / (1e3 / 60);
+      const gap = target.length - countRef.current;
+      const step = Math.max(MIN_CHARS_PER_FRAME * frames, gap * CATCH_UP * frames);
+      const next = Math.min(target.length, countRef.current + step);
+      countRef.current = next;
+      setCount(next);
+      if (next < target.length) raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [target, enabled]);
+  return everEnabled.current ? target.slice(0, Math.floor(count)) : target;
+}
 function CopyButton({ className, text }) {
-  const [copied, setCopied] = React11.useState(false);
-  const timerRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [copied, setCopied] = React12.useState(false);
+  const timerRef = React12.useRef(null);
+  React12.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
-  const copy = React11.useCallback(async () => {
+  const copy = React12.useCallback(async () => {
     try {
       await navigator.clipboard.writeText(text);
     } catch {
@@ -932,8 +983,9 @@ function CopyButton({ className, text }) {
   ] });
 }
 var isImageAttachment = (format) => IMAGE_ACCEPT.includes(`.${format.toLowerCase()}`);
-function MessageItem({ message }) {
-  const [lightboxSrc, setLightboxSrc] = React11.useState(null);
+function MessageItem({ animate = false, message }) {
+  const [lightboxSrc, setLightboxSrc] = React12.useState(null);
+  const displayed = useSmoothText(message.content ?? "", animate && message.role === "assistant");
   if (message.role === "user") {
     const attachments = message.attachments ?? [];
     const images = attachments.filter((a) => isImageAttachment(a.format) && a.url);
@@ -989,7 +1041,7 @@ function MessageItem({ message }) {
             if (src) setLightboxSrc(src);
           },
           role: "presentation",
-          children: /* @__PURE__ */ jsx(Markdown, { children: message.content })
+          children: /* @__PURE__ */ jsx(Markdown, { children: displayed })
         }
       ) }),
       /* @__PURE__ */ jsx(
@@ -1017,8 +1069,8 @@ var DEFAULT_PHRASES = [
 ];
 function ThinkingIndicator({ className, intervalMs = 1800, phrases }) {
   const words = phrases && phrases.length ? phrases : DEFAULT_PHRASES;
-  const [index, setIndex] = React11.useState(0);
-  React11.useEffect(() => {
+  const [index, setIndex] = React12.useState(0);
+  React12.useEffect(() => {
     setIndex(0);
     const timer = setInterval(() => {
       setIndex((current) => (current + 1) % words.length);
@@ -1037,14 +1089,7 @@ function ThinkingIndicator({ className, intervalMs = 1800, phrases }) {
       role: "status",
       children: [
         /* @__PURE__ */ jsx(ThinkingOrb, { className: "shrink-0", size: 20, speed: 0.7, state: "solving" }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "fade-in-0 animate-in text-xs font-medium duration-300",
-            children: /* @__PURE__ */ jsx(AuroraText, { children: words[index] })
-          },
-          index
-        )
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: /* @__PURE__ */ jsx(AuroraText, { speed: 2.2, children: /* @__PURE__ */ jsx("span", { className: "fade-in-0 inline-block animate-in duration-300", children: words[index] }, index) }) })
       ]
     }
   );
@@ -1273,7 +1318,7 @@ function DownloadButton({ block, size = "sm" }) {
   );
 }
 function DocumentViewer({ block, onClose }) {
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const onKey = (event) => event.key === "Escape" && onClose();
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
@@ -1298,7 +1343,7 @@ function DocumentViewer({ block, onClose }) {
   ] });
 }
 function DocumentCard({ block }) {
-  const [open, setOpen] = React11.useState(false);
+  const [open, setOpen] = React12.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: [
@@ -1420,7 +1465,7 @@ function StepDetail({
   ] });
 }
 function ToolActivityGroup({ describeToolCall, steps }) {
-  const [open, setOpen] = React11.useState(false);
+  const [open, setOpen] = React12.useState(false);
   if (steps.length === 0) return null;
   const last = steps[steps.length - 1];
   const anyRunning = steps.some((step) => step.status === "running");
@@ -1525,12 +1570,12 @@ function AgentPanel({
   onClose,
   onToggleAgentMode
 }) {
-  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 [draft, setDraft] = React12.useState("");
+  const [view, setView] = React12.useState("chat");
+  const [files, setFiles] = React12.useState([]);
+  const [uploadError, setUploadError] = React12.useState(null);
+  const [dragging, setDragging] = React12.useState(false);
+  const dragDepth = React12.useRef(0);
   const agentName = config.agentName ?? chat.agentInfo?.name ?? "Assistant";
   const caps = {
     visionEnabled: chat.agentInfo?.vision_enabled,
@@ -1541,7 +1586,7 @@ function AgentPanel({
     "What can you help me with?",
     "Give me a quick summary of my data."
   ];
-  const addFiles = React11.useCallback(
+  const addFiles = React12.useCallback(
     (incoming) => {
       const accepted = [];
       let rejection = null;
@@ -1558,10 +1603,10 @@ function AgentPanel({
     },
     [config, caps.visionEnabled, caps.visionMaxMb]
   );
-  const removeFile = React11.useCallback((index) => {
+  const removeFile = React12.useCallback((index) => {
     setFiles((current) => current.filter((_, i) => i !== index));
   }, []);
-  const handleSubmit = React11.useCallback(
+  const handleSubmit = React12.useCallback(
     (text) => {
       const staged = files;
       setDraft("");
@@ -1571,7 +1616,7 @@ function AgentPanel({
     },
     [chat, files]
   );
-  const onDragEnter = React11.useCallback(
+  const onDragEnter = React12.useCallback(
     (event) => {
       if (!uploadEnabled || !event.dataTransfer?.types?.includes("Files")) return;
       dragDepth.current += 1;
@@ -1579,12 +1624,12 @@ function AgentPanel({
     },
     [uploadEnabled]
   );
-  const onDragLeave = React11.useCallback((event) => {
+  const onDragLeave = React12.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 = React11.useCallback(
+  const onDrop = React12.useCallback(
     (event) => {
       if (!uploadEnabled) return;
       event.preventDefault();
@@ -1595,7 +1640,7 @@ function AgentPanel({
     },
     [addFiles, uploadEnabled]
   );
-  const openHistory = React11.useCallback(() => {
+  const openHistory = React12.useCallback(() => {
     setView("history");
     void chat.refreshConversations();
   }, [chat]);
@@ -1759,7 +1804,16 @@ 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(React11.Fragment, { children: [
+              let liveAssistantKey = null;
+              if (chat.sending) {
+                for (let i = grouped.length - 1; i >= 0; i -= 1) {
+                  if (grouped[i].kind === "assistant-text") {
+                    liveAssistantKey = grouped[i].key;
+                    break;
+                  }
+                }
+              }
+              return grouped.map((item) => /* @__PURE__ */ jsxs(React12.Fragment, { children: [
                 item.key === anchorKey ? /* @__PURE__ */ jsx(NewMessagesDivider, {}) : null,
                 /* @__PURE__ */ jsx(
                   motion.div,
@@ -1773,7 +1827,7 @@ function AgentPanel({
                         describeToolCall: config.describeToolCall,
                         steps: item.steps
                       }
-                    ) }) : /* @__PURE__ */ jsx(MessageItem, { message: item.message })
+                    ) }) : /* @__PURE__ */ jsx(MessageItem, { animate: item.key === liveAssistantKey, message: item.message })
                   }
                 )
               ] }, item.key));
@@ -1859,17 +1913,17 @@ function buildOptimisticUserMessage(text, files) {
   };
 }
 function useAgentChat(config) {
-  const client = React11.useMemo(() => new AgentApiClient(config), [config]);
-  const [agentInfo, setAgentInfo] = React11.useState(null);
-  const [conversationId, setConversationId] = React11.useState(null);
-  const [conversationEpoch, setConversationEpoch] = React11.useState(0);
-  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(() => {
+  const client = React12.useMemo(() => new AgentApiClient(config), [config]);
+  const [agentInfo, setAgentInfo] = React12.useState(null);
+  const [conversationId, setConversationId] = React12.useState(null);
+  const [conversationEpoch, setConversationEpoch] = React12.useState(0);
+  const [conversations, setConversations] = React12.useState([]);
+  const [messages, setMessages] = React12.useState([]);
+  const [pendingApprovals, setPendingApprovals] = React12.useState([]);
+  const [sending, setSending] = React12.useState(false);
+  const [resolvingApprovalId, setResolvingApprovalId] = React12.useState(null);
+  const [error, setError] = React12.useState(null);
+  React12.useEffect(() => {
     let cancelled = false;
     client.getConfig().then((info) => {
       if (!cancelled) setAgentInfo(info);
@@ -1879,11 +1933,11 @@ function useAgentChat(config) {
       cancelled = true;
     };
   }, [client]);
-  const handleFailure = React11.useCallback((err) => {
+  const handleFailure = React12.useCallback((err) => {
     const message = err instanceof AgentApiError ? err.message : "Something went wrong. Please try again.";
     setError(message);
   }, []);
-  const applyResponse = React11.useCallback(
+  const applyResponse = React12.useCallback(
     (response) => {
       if (response.status === "error" && !response.messages?.length) {
         setError(response.message ?? "The assistant could not answer.");
@@ -1913,7 +1967,7 @@ function useAgentChat(config) {
     },
     []
   );
-  const handleStreamEvent = React11.useCallback(
+  const handleStreamEvent = React12.useCallback(
     (event, ctx) => {
       switch (event.type) {
         case "conversation":
@@ -1992,7 +2046,7 @@ function useAgentChat(config) {
     []
   );
   const streamingEnabled = config.streaming !== false && typeof ReadableStream !== "undefined";
-  const send = React11.useCallback(
+  const send = React12.useCallback(
     async (text, files) => {
       if (sending) return;
       if (!text.trim() && !(files && files.length)) return;
@@ -2023,14 +2077,14 @@ function useAgentChat(config) {
     },
     [applyResponse, client, conversationId, handleFailure, handleStreamEvent, sending, streamingEnabled]
   );
-  const transcribe = React11.useCallback(
+  const transcribe = React12.useCallback(
     async (audio) => {
       const { text } = await client.transcribe(audio);
       return text;
     },
     [client]
   );
-  const resolveApproval = React11.useCallback(
+  const resolveApproval = React12.useCallback(
     async (callId, approve) => {
       if (resolvingApprovalId) return;
       setResolvingApprovalId(callId);
@@ -2059,14 +2113,14 @@ function useAgentChat(config) {
     },
     [applyResponse, client, handleFailure, handleStreamEvent, resolvingApprovalId, streamingEnabled]
   );
-  const newChat = React11.useCallback(() => {
+  const newChat = React12.useCallback(() => {
     setConversationId(null);
     setMessages([]);
     setPendingApprovals([]);
     setError(null);
     setConversationEpoch((e) => e + 1);
   }, []);
-  const refreshConversations = React11.useCallback(async () => {
+  const refreshConversations = React12.useCallback(async () => {
     try {
       const { conversations: list } = await client.listConversations();
       setConversations(list);
@@ -2076,7 +2130,7 @@ function useAgentChat(config) {
       return [];
     }
   }, [client, handleFailure]);
-  const openConversation = React11.useCallback(
+  const openConversation = React12.useCallback(
     async (id) => {
       setError(null);
       try {
@@ -2091,7 +2145,7 @@ function useAgentChat(config) {
     },
     [client, handleFailure]
   );
-  const deleteConversation = React11.useCallback(
+  const deleteConversation = React12.useCallback(
     async (id) => {
       try {
         await client.deleteConversation(id);
@@ -2103,7 +2157,7 @@ function useAgentChat(config) {
     },
     [client, conversationId, handleFailure, newChat]
   );
-  const clearError = React11.useCallback(() => setError(null), []);
+  const clearError = React12.useCallback(() => setError(null), []);
   return {
     agentInfo,
     clearError,
@@ -2140,11 +2194,11 @@ function readStored(clientId) {
   }
 }
 function useAlwaysApprove(clientId) {
-  const [approved, setApproved] = React11.useState(() => /* @__PURE__ */ new Set());
-  React11.useEffect(() => {
+  const [approved, setApproved] = React12.useState(() => /* @__PURE__ */ new Set());
+  React12.useEffect(() => {
     setApproved(readStored(clientId));
   }, [clientId]);
-  const persist = React11.useCallback(
+  const persist = React12.useCallback(
     (next) => {
       setApproved(next);
       if (typeof window === "undefined") return;
@@ -2155,8 +2209,8 @@ function useAlwaysApprove(clientId) {
     },
     [clientId]
   );
-  const isAlwaysApproved = React11.useCallback((toolName) => approved.has(toolName), [approved]);
-  const setAlwaysApprove = React11.useCallback(
+  const isAlwaysApproved = React12.useCallback((toolName) => approved.has(toolName), [approved]);
+  const setAlwaysApprove = React12.useCallback(
     (toolName) => {
       if (approved.has(toolName)) return;
       const next = new Set(approved);
@@ -2165,7 +2219,7 @@ function useAlwaysApprove(clientId) {
     },
     [approved, persist]
   );
-  const clearAlwaysApprove = React11.useCallback(
+  const clearAlwaysApprove = React12.useCallback(
     (toolName) => {
       if (!approved.has(toolName)) return;
       const next = new Set(approved);
@@ -2191,10 +2245,10 @@ function AgentWidget({
   const isControlled = controlledOpen !== void 0;
   const isDocked = presentation === "docked";
   const storageKey2 = `cc-agent-open:${config.clientId}`;
-  const [uncontrolledOpen, setUncontrolledOpen] = React11.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React12.useState(false);
   const open = controlledOpen ?? uncontrolledOpen;
-  const [bootstrapDone, setBootstrapDone] = React11.useState(isControlled);
-  const persist = React11.useCallback(
+  const [bootstrapDone, setBootstrapDone] = React12.useState(isControlled);
+  const persist = React12.useCallback(
     (next) => {
       if (isControlled || !behavior.persistOpenState) return;
       try {
@@ -2204,7 +2258,7 @@ function AgentWidget({
     },
     [behavior.persistOpenState, isControlled, storageKey2]
   );
-  const setOpen = React11.useCallback(
+  const setOpen = React12.useCallback(
     (next) => {
       setUncontrolledOpen(next);
       persist(next);
@@ -2212,14 +2266,14 @@ function AgentWidget({
     },
     [onOpenChange, persist]
   );
-  const [agentMode, setAgentMode] = React11.useState(false);
+  const [agentMode, setAgentMode] = React12.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 = React11.useRef(false);
-  React11.useEffect(() => {
+  const bootRef = React12.useRef(false);
+  React12.useEffect(() => {
     if (bootRef.current) return;
     if (isControlled && !isDocked) return;
     bootRef.current = true;
@@ -2251,15 +2305,15 @@ function AgentWidget({
       cancelled = true;
     };
   }, []);
-  const seenCountRef = React11.useRef(0);
-  const [baselined, setBaselined] = React11.useState(false);
-  const [anchorId, setAnchorId] = React11.useState(null);
-  React11.useEffect(() => {
+  const seenCountRef = React12.useRef(0);
+  const [baselined, setBaselined] = React12.useState(false);
+  const [anchorId, setAnchorId] = React12.useState(null);
+  React12.useEffect(() => {
     if (baselined || !bootstrapDone) return;
     seenCountRef.current = messages.length;
     setBaselined(true);
   }, [baselined, bootstrapDone, messages.length]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (open) {
       if (messages.length > seenCountRef.current) {
         const firstUnread = messages[seenCountRef.current];
@@ -2269,7 +2323,7 @@ function AgentWidget({
     }
   }, [open, messages]);
   const unreadCount = open || !baselined ? 0 : messages.slice(seenCountRef.current).filter(isUnreadable).length;
-  const workLabel = React11.useMemo(() => {
+  const workLabel = React12.useMemo(() => {
     if (!sending) return null;
     const last = messages[messages.length - 1];
     if (last?.role === "tool") return "Calling tools\u2026";
@@ -2278,14 +2332,14 @@ function AgentWidget({
   }, [sending, messages]);
   const approvalWaiting = pendingApprovals.length > 0;
   const { isAlwaysApproved } = alwaysApprove;
-  React11.useEffect(() => {
+  React12.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 = React11.useRef(/* @__PURE__ */ new Set());
+  const firedWriteIds = React12.useRef(/* @__PURE__ */ new Set());
   const { onWriteSuccess } = config;
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!onWriteSuccess) return;
     for (const message of messages) {
       if (message.role !== "tool" || !message.is_write || message.tool_status !== "success") continue;
@@ -2295,9 +2349,9 @@ function AgentWidget({
       onWriteSuccess({ arguments: args, toolName: message.tool_name ?? "" });
     }
   }, [messages, onWriteSuccess]);
-  const lastNavigatedMessageId = React11.useRef(null);
-  const navEpochRef = React11.useRef(-1);
-  React11.useEffect(() => {
+  const lastNavigatedMessageId = React12.useRef(null);
+  const navEpochRef = React12.useRef(-1);
+  React12.useEffect(() => {
     if (!open || fullscreen || !config.navigate || !config.pages?.length) return;
     const toolMessages = messages.filter((message) => message.role === "tool");
     const latest = toolMessages[toolMessages.length - 1];
@@ -2316,7 +2370,7 @@ function AgentWidget({
     const scrollTo = typeof mapping.scrollTo === "function" ? mapping.scrollTo(args) : mapping.scrollTo;
     config.navigate(path, { scrollTo: scrollTo ?? null });
   }, [chat.conversationEpoch, config, fullscreen, messages, open]);
-  const closePanel = React11.useCallback(() => {
+  const closePanel = React12.useCallback(() => {
     setOpen(false);
     setAgentMode(false);
   }, [setOpen]);
@@ -2489,6 +2543,6 @@ function defineAgentConfig(config) {
   return config;
 }
 
-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 };
+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, useSmoothText, validateFile };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map