@cntyclub/agent-react 0.7.1 → 0.9.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { Button, cn, ChatMessage, ChatMessageBubble, Markdown, Spinner, Checkbox, Collapsible, CollapsibleTrigger, ChatToolChip, CollapsiblePanel, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Group, Menu, MenuTrigger, MenuPopup, MenuItem, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Tooltip, TooltipTrigger, TooltipContent, Chat, ChatMessages, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, ChatTypingIndicator, useMediaQuery, TooltipProvider, Fab, DataTablePaged } from '@cntyclub/ui-react';
+import { Button, cn, ChatMessage, ChatMessageBubble, Markdown, Spinner, Checkbox, Collapsible, CollapsibleTrigger, ChatToolChip, CollapsiblePanel, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Group, Menu, MenuTrigger, MenuPopup, MenuItem, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Tooltip, TooltipTrigger, TooltipContent, Chat, ChatMessages, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, useMediaQuery, TooltipProvider, Fab, DataTablePaged } from '@cntyclub/ui-react';
 import { FileTextIcon, XIcon, PaperclipIcon, ArrowUpIcon, Maximize2Icon, ListChecksIcon, ChevronDownIcon, CheckIcon, ShieldAlertIcon, CheckCheckIcon, UploadCloudIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, Trash2Icon, SparklesIcon, DownloadIcon, CodeIcon } from 'lucide-react';
-import * as React5 from 'react';
+import * as React6 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/api-client.ts
@@ -75,6 +75,98 @@ var AgentApiClient = class {
       method: "POST"
     });
   }
+  // ------------------------------------------------------------- streaming
+  /** POST a chat turn and yield parsed SSE events as they stream in. */
+  async streamMessage(message, conversationId, files, onEvent, signal) {
+    let body;
+    const headers = await this.streamHeaders();
+    if (files && files.length > 0) {
+      const form = new FormData();
+      form.append("client_id", this.config.clientId);
+      form.append("message", message);
+      if (conversationId) form.append("conversation_id", conversationId);
+      for (const file of files) form.append("files", file, file.name);
+      body = form;
+    } else {
+      headers["Content-Type"] = "application/json";
+      body = JSON.stringify({
+        client_id: this.config.clientId,
+        conversation_id: conversationId ?? null,
+        message
+      });
+    }
+    await this.consumeStream("/agent-mode/chat/stream/", { body, headers, signal }, onEvent);
+  }
+  /** POST an approval decision and yield the continued reply as SSE events. */
+  async streamResolveApproval(callId, approve, onEvent, signal) {
+    const headers = await this.streamHeaders();
+    headers["Content-Type"] = "application/json";
+    await this.consumeStream(
+      `/agent-mode/approvals/${callId}/resolve/stream/`,
+      {
+        body: JSON.stringify({ approve, client_id: this.config.clientId }),
+        headers,
+        signal
+      },
+      onEvent
+    );
+  }
+  async streamHeaders() {
+    const token = await this.config.getAccessToken();
+    if (!token) {
+      throw new AgentApiError("You need to be signed in to use the assistant.", 401);
+    }
+    return {
+      // Include application/json so DRF content-negotiation always finds a match.
+      Accept: "text/event-stream, application/json",
+      Authorization: `Bearer ${token}`,
+      "X-Agent-Client-Id": this.config.clientId
+    };
+  }
+  async consumeStream(path, init, onEvent) {
+    const base = this.config.apiBaseUrl.replace(/\/$/, "");
+    const separator = path.includes("?") ? "&" : "?";
+    const url = `${base}${path}${separator}client_id=${encodeURIComponent(this.config.clientId)}`;
+    const response = await fetch(url, {
+      body: init.body,
+      headers: init.headers,
+      method: "POST",
+      signal: init.signal
+    });
+    if (!response.ok || !response.body) {
+      let detail = `Request failed (${response.status})`;
+      try {
+        const payload = await response.json();
+        detail = payload.detail || payload.message || detail;
+      } catch {
+      }
+      throw new AgentApiError(detail, response.status || 0);
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    const flushFrame = (frame) => {
+      const dataLines = frame.split("\n").filter((line) => line.startsWith("data:")).map((line) => line.slice(5).trimStart());
+      if (dataLines.length === 0) return;
+      const raw = dataLines.join("\n");
+      try {
+        onEvent(JSON.parse(raw));
+      } catch {
+      }
+    };
+    for (; ; ) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      let boundary = buffer.indexOf("\n\n");
+      while (boundary !== -1) {
+        flushFrame(buffer.slice(0, boundary));
+        buffer = buffer.slice(boundary + 2);
+        boundary = buffer.indexOf("\n\n");
+      }
+    }
+    if (buffer.trim()) flushFrame(buffer);
+  }
   listConversations() {
     return this.request("/agent-mode/conversations/");
   }
@@ -137,14 +229,14 @@ function AgentComposer({
   placeholder = "Ask anything\u2026",
   value
 }) {
-  const textareaRef = React5.useRef(null);
-  const inputRef = React5.useRef(null);
+  const textareaRef = React6.useRef(null);
+  const inputRef = React6.useRef(null);
   const canSubmit = !disabled && (value.trim().length > 0 || files.length > 0);
-  const submit = React5.useCallback(() => {
+  const submit = React6.useCallback(() => {
     if (!canSubmit) return;
     onSubmit(value.trim());
   }, [canSubmit, onSubmit, value]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
     textarea.style.height = "auto";
@@ -349,6 +441,55 @@ function MessageItem({ message }) {
   }
   return null;
 }
+var DEFAULT_PHRASES = [
+  "Thinking",
+  "Working on it",
+  "Looking that up",
+  "Reading the data",
+  "Putting it together",
+  "Almost there"
+];
+function ThinkingIndicator({ className, intervalMs = 1800, phrases }) {
+  const words = phrases && phrases.length ? phrases : DEFAULT_PHRASES;
+  const [index, setIndex] = React6.useState(0);
+  React6.useEffect(() => {
+    setIndex(0);
+    const timer = setInterval(() => {
+      setIndex((current) => (current + 1) % words.length);
+    }, intervalMs);
+    return () => clearInterval(timer);
+  }, [intervalMs, words]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Assistant is working",
+      className: cn(
+        "fade-in-0 flex w-fit animate-in items-center gap-2 rounded-2xl rounded-bl-md bg-muted px-3.5 py-2.5 duration-200",
+        className
+      ),
+      "data-slot": "thinking-indicator",
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:0ms]" }),
+          /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:150ms]" }),
+          /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:300ms]" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "fade-in-0 animate-in text-muted-foreground text-xs duration-300",
+            children: [
+              words[index],
+              "\u2026"
+            ]
+          },
+          index
+        )
+      ]
+    }
+  );
+}
 var NOISE_KEYS = /* @__PURE__ */ new Set([
   "id",
   "pk",
@@ -573,7 +714,7 @@ function DownloadButton({ block, size = "sm" }) {
   );
 }
 function DocumentViewer({ block, onClose }) {
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const onKey = (event) => event.key === "Escape" && onClose();
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
@@ -598,7 +739,7 @@ function DocumentViewer({ block, onClose }) {
   ] });
 }
 function DocumentCard({ block }) {
-  const [open, setOpen] = React5.useState(false);
+  const [open, setOpen] = React6.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: [
@@ -720,7 +861,7 @@ function StepDetail({
   ] });
 }
 function ToolActivityGroup({ describeToolCall, steps }) {
-  const [open, setOpen] = React5.useState(false);
+  const [open, setOpen] = React6.useState(false);
   if (steps.length === 0) return null;
   const last = steps[steps.length - 1];
   const anyRunning = steps.some((step) => step.status === "running");
@@ -823,19 +964,19 @@ function AgentPanel({
   onClose,
   onToggleAgentMode
 }) {
-  const [draft, setDraft] = React5.useState("");
-  const [view, setView] = React5.useState("chat");
-  const [files, setFiles] = React5.useState([]);
-  const [uploadError, setUploadError] = React5.useState(null);
-  const [dragging, setDragging] = React5.useState(false);
-  const dragDepth = React5.useRef(0);
+  const [draft, setDraft] = React6.useState("");
+  const [view, setView] = React6.useState("chat");
+  const [files, setFiles] = React6.useState([]);
+  const [uploadError, setUploadError] = React6.useState(null);
+  const [dragging, setDragging] = React6.useState(false);
+  const dragDepth = React6.useRef(0);
   const agentName = config.agentName ?? chat.agentInfo?.name ?? "Assistant";
   const uploadEnabled = fileUploadEnabled(config);
   const suggestions = config.suggestions ?? [
     "What can you help me with?",
     "Give me a quick summary of my data."
   ];
-  const addFiles = React5.useCallback(
+  const addFiles = React6.useCallback(
     (incoming) => {
       const accepted = [];
       let rejection = null;
@@ -852,10 +993,10 @@ function AgentPanel({
     },
     [config]
   );
-  const removeFile = React5.useCallback((index) => {
+  const removeFile = React6.useCallback((index) => {
     setFiles((current) => current.filter((_, i) => i !== index));
   }, []);
-  const handleSubmit = React5.useCallback(
+  const handleSubmit = React6.useCallback(
     (text) => {
       const staged = files;
       setDraft("");
@@ -865,7 +1006,7 @@ function AgentPanel({
     },
     [chat, files]
   );
-  const onDragEnter = React5.useCallback(
+  const onDragEnter = React6.useCallback(
     (event) => {
       if (!uploadEnabled || !event.dataTransfer?.types?.includes("Files")) return;
       dragDepth.current += 1;
@@ -873,12 +1014,12 @@ function AgentPanel({
     },
     [uploadEnabled]
   );
-  const onDragLeave = React5.useCallback((event) => {
+  const onDragLeave = React6.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 = React5.useCallback(
+  const onDrop = React6.useCallback(
     (event) => {
       if (!uploadEnabled) return;
       event.preventDefault();
@@ -889,11 +1030,14 @@ function AgentPanel({
     },
     [addFiles, uploadEnabled]
   );
-  const openHistory = React5.useCallback(() => {
+  const openHistory = React6.useCallback(() => {
     setView("history");
     void chat.refreshConversations();
   }, [chat]);
   const busy = chat.sending || chat.resolvingApprovalId !== null;
+  const lastMessage = chat.messages[chat.messages.length - 1];
+  const replyStreaming = lastMessage?.role === "assistant" && Boolean(lastMessage.content);
+  const showThinking = busy && !replyStreaming;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1050,7 +1194,7 @@ function AgentPanel({
               },
               approval.id
             )),
-            busy ? /* @__PURE__ */ jsx(ChatTypingIndicator, {}) : null
+            showThinking ? /* @__PURE__ */ jsx(ThinkingIndicator, {}) : null
           ] }) }),
           chat.error || uploadError ? /* @__PURE__ */ jsxs("div", { className: "mx-3 mb-1 flex items-center justify-between gap-2 rounded-lg bg-destructive/10 px-3 py-2 text-destructive text-xs", children: [
             /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: chat.error ?? uploadError }),
@@ -1087,17 +1231,37 @@ function AgentPanel({
     }
   );
 }
+var OPTIMISTIC_ID_PREFIX = "optimistic-";
+var STREAMING_ID_PREFIX = "streaming-";
+var optimisticCounter = 0;
+var streamingCounter = 0;
+function buildOptimisticUserMessage(text, files) {
+  optimisticCounter += 1;
+  const attachments = (files ?? []).map((file, index) => ({
+    id: `${OPTIMISTIC_ID_PREFIX}att-${optimisticCounter}-${index}`,
+    filename: file.name,
+    format: file.name.split(".").pop()?.toLowerCase() ?? "file",
+    size_bytes: file.size
+  }));
+  return {
+    id: `${OPTIMISTIC_ID_PREFIX}${optimisticCounter}`,
+    role: "user",
+    content: text,
+    created_at: (/* @__PURE__ */ new Date()).toISOString(),
+    ...attachments.length ? { attachments } : {}
+  };
+}
 function useAgentChat(config) {
-  const client = React5.useMemo(() => new AgentApiClient(config), [config]);
-  const [agentInfo, setAgentInfo] = React5.useState(null);
-  const [conversationId, setConversationId] = React5.useState(null);
-  const [conversations, setConversations] = React5.useState([]);
-  const [messages, setMessages] = React5.useState([]);
-  const [pendingApprovals, setPendingApprovals] = React5.useState([]);
-  const [sending, setSending] = React5.useState(false);
-  const [resolvingApprovalId, setResolvingApprovalId] = React5.useState(null);
-  const [error, setError] = React5.useState(null);
-  React5.useEffect(() => {
+  const client = React6.useMemo(() => new AgentApiClient(config), [config]);
+  const [agentInfo, setAgentInfo] = React6.useState(null);
+  const [conversationId, setConversationId] = React6.useState(null);
+  const [conversations, setConversations] = React6.useState([]);
+  const [messages, setMessages] = React6.useState([]);
+  const [pendingApprovals, setPendingApprovals] = React6.useState([]);
+  const [sending, setSending] = React6.useState(false);
+  const [resolvingApprovalId, setResolvingApprovalId] = React6.useState(null);
+  const [error, setError] = React6.useState(null);
+  React6.useEffect(() => {
     let cancelled = false;
     client.getConfig().then((info) => {
       if (!cancelled) setAgentInfo(info);
@@ -1107,11 +1271,11 @@ function useAgentChat(config) {
       cancelled = true;
     };
   }, [client]);
-  const handleFailure = React5.useCallback((err) => {
+  const handleFailure = React6.useCallback((err) => {
     const message = err instanceof AgentApiError ? err.message : "Something went wrong. Please try again.";
     setError(message);
   }, []);
-  const applyResponse = React5.useCallback(
+  const applyResponse = React6.useCallback(
     (response) => {
       if (response.status === "error" && !response.messages?.length) {
         setError(response.message ?? "The assistant could not answer.");
@@ -1120,9 +1284,10 @@ function useAgentChat(config) {
       if (response.conversation_id) setConversationId(response.conversation_id);
       if (response.messages?.length) {
         setMessages((current) => {
-          const seen = new Set(current.map((message) => message.id));
+          const settled = current.filter((message) => !message.id.startsWith(OPTIMISTIC_ID_PREFIX));
+          const seen = new Set(settled.map((message) => message.id));
           const fresh = response.messages?.filter((message) => !seen.has(message.id)) ?? [];
-          return [...current, ...fresh];
+          return [...settled, ...fresh];
         });
       }
       setPendingApprovals(response.pending_approvals ?? []);
@@ -1132,13 +1297,92 @@ function useAgentChat(config) {
     },
     []
   );
-  const send = React5.useCallback(
+  const handleStreamEvent = React6.useCallback(
+    (event, ctx) => {
+      switch (event.type) {
+        case "conversation":
+          setConversationId(event.conversation_id);
+          break;
+        case "user_message":
+          setMessages((current) => {
+            const settled = current.filter((message) => !message.id.startsWith(OPTIMISTIC_ID_PREFIX));
+            const seen = new Set(settled.map((message) => message.id));
+            return seen.has(event.message.id) ? settled : [...settled, event.message];
+          });
+          break;
+        case "text_delta": {
+          if (!ctx.streamingId) {
+            streamingCounter += 1;
+            ctx.streamingId = `${STREAMING_ID_PREFIX}${streamingCounter}`;
+            const bubble = {
+              id: ctx.streamingId,
+              role: "assistant",
+              content: event.delta,
+              created_at: (/* @__PURE__ */ new Date()).toISOString()
+            };
+            setMessages((current) => [...current, bubble]);
+          } else {
+            const id = ctx.streamingId;
+            setMessages(
+              (current) => current.map(
+                (message) => message.id === id ? { ...message, content: (message.content ?? "") + event.delta } : message
+              )
+            );
+          }
+          break;
+        }
+        case "assistant_message": {
+          const streamingId = ctx.streamingId;
+          ctx.streamingId = null;
+          setMessages((current) => {
+            const withoutTransient = streamingId ? current.filter((message) => message.id !== streamingId) : current;
+            const seen = new Set(withoutTransient.map((message) => message.id));
+            return seen.has(event.message.id) ? withoutTransient : [...withoutTransient, event.message];
+          });
+          break;
+        }
+        case "tool_result":
+          setMessages((current) => {
+            const seen = new Set(current.map((message) => message.id));
+            return seen.has(event.message.id) ? current : [...current, event.message];
+          });
+          break;
+        case "pending_approvals":
+          setPendingApprovals(event.approvals ?? []);
+          break;
+        case "error":
+          setError(event.message);
+          break;
+        case "done":
+          if (event.conversation_id) setConversationId(event.conversation_id);
+          if (event.pending_approvals) setPendingApprovals(event.pending_approvals);
+          break;
+      }
+    },
+    []
+  );
+  const streamingEnabled = config.streaming !== false && typeof ReadableStream !== "undefined";
+  const send = React6.useCallback(
     async (text, files) => {
       if (sending) return;
       if (!text.trim() && !(files && files.length)) return;
       setSending(true);
       setError(null);
+      setMessages((current) => [...current, buildOptimisticUserMessage(text, files)]);
       try {
+        if (streamingEnabled) {
+          const ctx = { streamingId: null };
+          let started = false;
+          try {
+            await client.streamMessage(text, conversationId, files, (event) => {
+              started = true;
+              handleStreamEvent(event, ctx);
+            });
+            return;
+          } catch (err) {
+            if (started) throw err;
+          }
+        }
         const response = await client.sendMessage(text, conversationId, files);
         applyResponse(response);
       } catch (err) {
@@ -1147,14 +1391,27 @@ function useAgentChat(config) {
         setSending(false);
       }
     },
-    [applyResponse, client, conversationId, handleFailure, sending]
+    [applyResponse, client, conversationId, handleFailure, handleStreamEvent, sending, streamingEnabled]
   );
-  const resolveApproval = React5.useCallback(
+  const resolveApproval = React6.useCallback(
     async (callId, approve) => {
       if (resolvingApprovalId) return;
       setResolvingApprovalId(callId);
       setError(null);
       try {
+        if (streamingEnabled) {
+          const ctx = { streamingId: null };
+          let started = false;
+          try {
+            await client.streamResolveApproval(callId, approve, (event) => {
+              started = true;
+              handleStreamEvent(event, ctx);
+            });
+            return;
+          } catch (err) {
+            if (started) throw err;
+          }
+        }
         const response = await client.resolveApproval(callId, approve);
         applyResponse(response);
       } catch (err) {
@@ -1163,15 +1420,15 @@ function useAgentChat(config) {
         setResolvingApprovalId(null);
       }
     },
-    [applyResponse, client, handleFailure, resolvingApprovalId]
+    [applyResponse, client, handleFailure, handleStreamEvent, resolvingApprovalId, streamingEnabled]
   );
-  const newChat = React5.useCallback(() => {
+  const newChat = React6.useCallback(() => {
     setConversationId(null);
     setMessages([]);
     setPendingApprovals([]);
     setError(null);
   }, []);
-  const refreshConversations = React5.useCallback(async () => {
+  const refreshConversations = React6.useCallback(async () => {
     try {
       const { conversations: list } = await client.listConversations();
       setConversations(list);
@@ -1179,7 +1436,7 @@ function useAgentChat(config) {
       handleFailure(err);
     }
   }, [client, handleFailure]);
-  const openConversation = React5.useCallback(
+  const openConversation = React6.useCallback(
     async (id) => {
       setError(null);
       try {
@@ -1193,7 +1450,7 @@ function useAgentChat(config) {
     },
     [client, handleFailure]
   );
-  const deleteConversation = React5.useCallback(
+  const deleteConversation = React6.useCallback(
     async (id) => {
       try {
         await client.deleteConversation(id);
@@ -1205,7 +1462,7 @@ function useAgentChat(config) {
     },
     [client, conversationId, handleFailure, newChat]
   );
-  const clearError = React5.useCallback(() => setError(null), []);
+  const clearError = React6.useCallback(() => setError(null), []);
   return {
     agentInfo,
     clearError,
@@ -1240,11 +1497,11 @@ function readStored(clientId) {
   }
 }
 function useAlwaysApprove(clientId) {
-  const [approved, setApproved] = React5.useState(() => /* @__PURE__ */ new Set());
-  React5.useEffect(() => {
+  const [approved, setApproved] = React6.useState(() => /* @__PURE__ */ new Set());
+  React6.useEffect(() => {
     setApproved(readStored(clientId));
   }, [clientId]);
-  const persist = React5.useCallback(
+  const persist = React6.useCallback(
     (next) => {
       setApproved(next);
       if (typeof window === "undefined") return;
@@ -1255,8 +1512,8 @@ function useAlwaysApprove(clientId) {
     },
     [clientId]
   );
-  const isAlwaysApproved = React5.useCallback((toolName) => approved.has(toolName), [approved]);
-  const setAlwaysApprove = React5.useCallback(
+  const isAlwaysApproved = React6.useCallback((toolName) => approved.has(toolName), [approved]);
+  const setAlwaysApprove = React6.useCallback(
     (toolName) => {
       if (approved.has(toolName)) return;
       const next = new Set(approved);
@@ -1265,7 +1522,7 @@ function useAlwaysApprove(clientId) {
     },
     [approved, persist]
   );
-  const clearAlwaysApprove = React5.useCallback(
+  const clearAlwaysApprove = React6.useCallback(
     (toolName) => {
       if (!approved.has(toolName)) return;
       const next = new Set(approved);
@@ -1277,16 +1534,16 @@ function useAlwaysApprove(clientId) {
   return { clearAlwaysApprove, isAlwaysApproved, setAlwaysApprove };
 }
 function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React5.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React6.useState(false);
   const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = React5.useCallback(
+  const setOpen = React6.useCallback(
     (next) => {
       setUncontrolledOpen(next);
       onOpenChange?.(next);
     },
     [onOpenChange]
   );
-  const [agentMode, setAgentMode] = React5.useState(false);
+  const [agentMode, setAgentMode] = React6.useState(false);
   const isDesktop = useMediaQuery("(min-width: 640px)", {
     defaultSSRValue: true,
     ssr: true
@@ -1296,14 +1553,14 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
   const alwaysApprove = useAlwaysApprove(config.clientId);
   const { pendingApprovals, resolveApproval, resolvingApprovalId } = chat;
   const { isAlwaysApproved } = alwaysApprove;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!open || resolvingApprovalId) return;
     const target = pendingApprovals.find((approval) => isAlwaysApproved(approval.tool_name));
     if (target) void resolveApproval(target.id, true);
   }, [open, pendingApprovals, resolvingApprovalId, isAlwaysApproved, resolveApproval]);
-  const firedWriteIds = React5.useRef(/* @__PURE__ */ new Set());
+  const firedWriteIds = React6.useRef(/* @__PURE__ */ new Set());
   const { onWriteSuccess } = config;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!onWriteSuccess) return;
     for (const message of chat.messages) {
       if (message.role !== "tool" || !message.is_write || message.tool_status !== "success") continue;
@@ -1313,9 +1570,9 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
       onWriteSuccess({ arguments: args, toolName: message.tool_name ?? "" });
     }
   }, [chat.messages, onWriteSuccess]);
-  const lastNavigatedMessageId = React5.useRef(null);
+  const lastNavigatedMessageId = React6.useRef(null);
   const { messages } = chat;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!open || fullscreen || !config.navigate || !config.pages?.length) return;
     const toolMessages = messages.filter((message) => message.role === "tool");
     const latest = toolMessages[toolMessages.length - 1];
@@ -1327,7 +1584,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 = React5.useCallback(() => {
+  const closePanel = React6.useCallback(() => {
     setOpen(false);
     setAgentMode(false);
   }, [setOpen]);
@@ -1406,6 +1663,6 @@ function defineAgentConfig(config) {
   return config;
 }
 
-export { AgentApiClient, AgentApiError, AgentComposer, AgentPanel, AgentWidget, DEFAULT_ACCEPT, DocumentCard, MessageItem, TaskChecklist, ToolActivityGroup, ToolApprovalCard, acceptAttribute, acceptedExtensions, defineAgentConfig, deriveDetails, fileUploadEnabled, formatBytes, groupMessages, humanizeToolName, resolveToolPresentation, useAgentChat, useAlwaysApprove, validateFile };
+export { AgentApiClient, AgentApiError, AgentComposer, AgentPanel, AgentWidget, DEFAULT_ACCEPT, DocumentCard, MessageItem, TaskChecklist, ThinkingIndicator, ToolActivityGroup, ToolApprovalCard, acceptAttribute, acceptedExtensions, defineAgentConfig, deriveDetails, fileUploadEnabled, formatBytes, groupMessages, humanizeToolName, resolveToolPresentation, useAgentChat, useAlwaysApprove, validateFile };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map