@cntyclub/agent-react 0.9.1 → 0.10.0

package/dist/index.js

@@ -1,7 +1,8 @@
-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, 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 React7 from 'react';
+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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { motion, AnimatePresence } from 'motion/react';
 
 // src/api-client.ts
 var AgentApiError = class extends Error {
@@ -230,18 +231,18 @@ function AgentComposer({
   placeholder = "Ask anything\u2026",
   value
 }) {
-  const textareaRef = React7.useRef(null);
-  const inputRef = React7.useRef(null);
+  const textareaRef = React8.useRef(null);
+  const inputRef = React8.useRef(null);
   const canSubmit = !disabled && !busy && (value.trim().length > 0 || files.length > 0);
-  const submit = React7.useCallback(() => {
+  const submit = React8.useCallback(() => {
     if (!canSubmit) return;
     onSubmit(value.trim());
     textareaRef.current?.focus();
   }, [canSubmit, onSubmit, value]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!disabled) textareaRef.current?.focus();
   }, [disabled]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
     textarea.style.height = "auto";
@@ -423,15 +424,15 @@ function groupMessages(messages) {
   return items;
 }
 function ChatScroller({ children, className, ...props }) {
-  const viewportRef = React7.useRef(null);
-  const pinnedRef = React7.useRef(true);
-  const handleScroll = React7.useCallback(() => {
+  const viewportRef = React8.useRef(null);
+  const pinnedRef = React8.useRef(true);
+  const handleScroll = React8.useCallback(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     const distanceFromBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
     pinnedRef.current = distanceFromBottom < 64;
   }, []);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport || !pinnedRef.current) return;
     viewport.scrollTop = viewport.scrollHeight;
@@ -448,6 +449,45 @@ function ChatScroller({ children, className, ...props }) {
     }
   );
 }
+function CopyButton({ className, text }) {
+  const [copied, setCopied] = React8.useState(false);
+  const timerRef = React8.useRef(null);
+  React8.useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  const copy = React8.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return;
+    }
+    setCopied(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setCopied(false), 1500);
+  }, [text]);
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(
+      TooltipTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": copied ? "Copied" : "Copy message",
+            className: cn("text-muted-foreground", className),
+            onClick: copy,
+            size: "icon-xs",
+            type: "button",
+            variant: "ghost",
+            children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-success" }) : /* @__PURE__ */ jsx(CopyIcon, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(TooltipContent, { children: copied ? "Copied!" : "Copy" })
+  ] });
+}
 function MessageItem({ message }) {
   if (message.role === "user") {
     const attachments = message.attachments ?? [];
@@ -468,7 +508,19 @@ function MessageItem({ message }) {
   }
   if (message.role === "assistant") {
     if (!message.content || !message.content.trim()) return null;
-    return /* @__PURE__ */ jsx(ChatMessage, { from: "assistant", children: /* @__PURE__ */ jsx(ChatMessageBubble, { from: "assistant", children: /* @__PURE__ */ jsx(Markdown, { children: message.content }) }) });
+    return /* @__PURE__ */ jsxs(ChatMessage, { className: "group", from: "assistant", children: [
+      /* @__PURE__ */ jsx(ChatMessageBubble, { from: "assistant", children: /* @__PURE__ */ jsx(Markdown, { children: message.content }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mt-0.5 flex opacity-0 transition-opacity",
+            "group-hover:opacity-100 focus-within:opacity-100"
+          ),
+          children: /* @__PURE__ */ jsx(CopyButton, { text: message.content })
+        }
+      )
+    ] });
   }
   return null;
 }
@@ -482,8 +534,8 @@ var DEFAULT_PHRASES = [
 ];
 function ThinkingIndicator({ className, intervalMs = 1800, phrases }) {
   const words = phrases && phrases.length ? phrases : DEFAULT_PHRASES;
-  const [index, setIndex] = React7.useState(0);
-  React7.useEffect(() => {
+  const [index, setIndex] = React8.useState(0);
+  React8.useEffect(() => {
     setIndex(0);
     const timer = setInterval(() => {
       setIndex((current) => (current + 1) % words.length);
@@ -745,7 +797,7 @@ function DownloadButton({ block, size = "sm" }) {
   );
 }
 function DocumentViewer({ block, onClose }) {
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     const onKey = (event) => event.key === "Escape" && onClose();
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
@@ -770,7 +822,7 @@ function DocumentViewer({ block, onClose }) {
   ] });
 }
 function DocumentCard({ block }) {
-  const [open, setOpen] = React7.useState(false);
+  const [open, setOpen] = React8.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: [
@@ -892,7 +944,7 @@ function StepDetail({
   ] });
 }
 function ToolActivityGroup({ describeToolCall, steps }) {
-  const [open, setOpen] = React7.useState(false);
+  const [open, setOpen] = React8.useState(false);
   if (steps.length === 0) return null;
   const last = steps[steps.length - 1];
   const anyRunning = steps.some((step) => step.status === "running");
@@ -991,23 +1043,24 @@ function AgentPanel({
   chat,
   className,
   config,
+  newMessageAnchorId,
   onAlwaysApprove,
   onClose,
   onToggleAgentMode
 }) {
-  const [draft, setDraft] = React7.useState("");
-  const [view, setView] = React7.useState("chat");
-  const [files, setFiles] = React7.useState([]);
-  const [uploadError, setUploadError] = React7.useState(null);
-  const [dragging, setDragging] = React7.useState(false);
-  const dragDepth = React7.useRef(0);
+  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 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 = React7.useCallback(
+  const addFiles = React8.useCallback(
     (incoming) => {
       const accepted = [];
       let rejection = null;
@@ -1024,10 +1077,10 @@ function AgentPanel({
     },
     [config]
   );
-  const removeFile = React7.useCallback((index) => {
+  const removeFile = React8.useCallback((index) => {
     setFiles((current) => current.filter((_, i) => i !== index));
   }, []);
-  const handleSubmit = React7.useCallback(
+  const handleSubmit = React8.useCallback(
     (text) => {
       const staged = files;
       setDraft("");
@@ -1037,7 +1090,7 @@ function AgentPanel({
     },
     [chat, files]
   );
-  const onDragEnter = React7.useCallback(
+  const onDragEnter = React8.useCallback(
     (event) => {
       if (!uploadEnabled || !event.dataTransfer?.types?.includes("Files")) return;
       dragDepth.current += 1;
@@ -1045,12 +1098,12 @@ function AgentPanel({
     },
     [uploadEnabled]
   );
-  const onDragLeave = React7.useCallback((event) => {
+  const onDragLeave = React8.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 = React7.useCallback(
+  const onDrop = React8.useCallback(
     (event) => {
       if (!uploadEnabled) return;
       event.preventDefault();
@@ -1061,7 +1114,7 @@ function AgentPanel({
     },
     [addFiles, uploadEnabled]
   );
-  const openHistory = React7.useCallback(() => {
+  const openHistory = React8.useCallback(() => {
     setView("history");
     void chat.refreshConversations();
   }, [chat]);
@@ -1211,9 +1264,30 @@ function AgentPanel({
               suggestion
             )) })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            groupMessages(chat.messages).map(
-              (item) => item.kind === "tool-activity" ? /* @__PURE__ */ jsx(ChatMessage, { from: "assistant", children: /* @__PURE__ */ jsx(ToolActivityGroup, { describeToolCall: config.describeToolCall, steps: item.steps }) }, item.key) : /* @__PURE__ */ jsx(MessageItem, { message: item.message }, item.key)
-            ),
+            (() => {
+              const grouped = groupMessages(chat.messages);
+              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: [
+                item.key === anchorKey ? /* @__PURE__ */ jsx(NewMessagesDivider, {}) : null,
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { opacity: 0, y: 8 },
+                    animate: { opacity: 1, y: 0 },
+                    transition: { duration: 0.18, ease: "easeOut" },
+                    children: item.kind === "tool-activity" ? /* @__PURE__ */ jsx(ChatMessage, { from: "assistant", children: /* @__PURE__ */ jsx(
+                      ToolActivityGroup,
+                      {
+                        describeToolCall: config.describeToolCall,
+                        steps: item.steps
+                      }
+                    ) }) : /* @__PURE__ */ jsx(MessageItem, { message: item.message })
+                  }
+                )
+              ] }, item.key));
+            })(),
             chat.pendingApprovals.map((approval) => /* @__PURE__ */ jsx(
               ToolApprovalCard,
               {
@@ -1263,6 +1337,13 @@ function AgentPanel({
     }
   );
 }
+function NewMessagesDivider() {
+  return /* @__PURE__ */ jsxs("div", { className: "my-1 flex items-center gap-2", "aria-label": "New messages", children: [
+    /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "New messages" }),
+    /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+  ] });
+}
 var OPTIMISTIC_ID_PREFIX = "optimistic-";
 var STREAMING_ID_PREFIX = "streaming-";
 var optimisticCounter = 0;
@@ -1284,16 +1365,16 @@ function buildOptimisticUserMessage(text, files) {
   };
 }
 function useAgentChat(config) {
-  const client = React7.useMemo(() => new AgentApiClient(config), [config]);
-  const [agentInfo, setAgentInfo] = React7.useState(null);
-  const [conversationId, setConversationId] = React7.useState(null);
-  const [conversations, setConversations] = React7.useState([]);
-  const [messages, setMessages] = React7.useState([]);
-  const [pendingApprovals, setPendingApprovals] = React7.useState([]);
-  const [sending, setSending] = React7.useState(false);
-  const [resolvingApprovalId, setResolvingApprovalId] = React7.useState(null);
-  const [error, setError] = React7.useState(null);
-  React7.useEffect(() => {
+  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(() => {
     let cancelled = false;
     client.getConfig().then((info) => {
       if (!cancelled) setAgentInfo(info);
@@ -1303,11 +1384,11 @@ function useAgentChat(config) {
       cancelled = true;
     };
   }, [client]);
-  const handleFailure = React7.useCallback((err) => {
+  const handleFailure = React8.useCallback((err) => {
     const message = err instanceof AgentApiError ? err.message : "Something went wrong. Please try again.";
     setError(message);
   }, []);
-  const applyResponse = React7.useCallback(
+  const applyResponse = React8.useCallback(
     (response) => {
       if (response.status === "error" && !response.messages?.length) {
         setError(response.message ?? "The assistant could not answer.");
@@ -1329,7 +1410,7 @@ function useAgentChat(config) {
     },
     []
   );
-  const handleStreamEvent = React7.useCallback(
+  const handleStreamEvent = React8.useCallback(
     (event, ctx) => {
       switch (event.type) {
         case "conversation":
@@ -1394,7 +1475,7 @@ function useAgentChat(config) {
     []
   );
   const streamingEnabled = config.streaming !== false && typeof ReadableStream !== "undefined";
-  const send = React7.useCallback(
+  const send = React8.useCallback(
     async (text, files) => {
       if (sending) return;
       if (!text.trim() && !(files && files.length)) return;
@@ -1425,7 +1506,7 @@ function useAgentChat(config) {
     },
     [applyResponse, client, conversationId, handleFailure, handleStreamEvent, sending, streamingEnabled]
   );
-  const resolveApproval = React7.useCallback(
+  const resolveApproval = React8.useCallback(
     async (callId, approve) => {
       if (resolvingApprovalId) return;
       setResolvingApprovalId(callId);
@@ -1454,21 +1535,23 @@ function useAgentChat(config) {
     },
     [applyResponse, client, handleFailure, handleStreamEvent, resolvingApprovalId, streamingEnabled]
   );
-  const newChat = React7.useCallback(() => {
+  const newChat = React8.useCallback(() => {
     setConversationId(null);
     setMessages([]);
     setPendingApprovals([]);
     setError(null);
   }, []);
-  const refreshConversations = React7.useCallback(async () => {
+  const refreshConversations = React8.useCallback(async () => {
     try {
       const { conversations: list } = await client.listConversations();
       setConversations(list);
+      return list;
     } catch (err) {
       handleFailure(err);
+      return [];
     }
   }, [client, handleFailure]);
-  const openConversation = React7.useCallback(
+  const openConversation = React8.useCallback(
     async (id) => {
       setError(null);
       try {
@@ -1482,7 +1565,7 @@ function useAgentChat(config) {
     },
     [client, handleFailure]
   );
-  const deleteConversation = React7.useCallback(
+  const deleteConversation = React8.useCallback(
     async (id) => {
       try {
         await client.deleteConversation(id);
@@ -1494,7 +1577,7 @@ function useAgentChat(config) {
     },
     [client, conversationId, handleFailure, newChat]
   );
-  const clearError = React7.useCallback(() => setError(null), []);
+  const clearError = React8.useCallback(() => setError(null), []);
   return {
     agentInfo,
     clearError,
@@ -1529,11 +1612,11 @@ function readStored(clientId) {
   }
 }
 function useAlwaysApprove(clientId) {
-  const [approved, setApproved] = React7.useState(() => /* @__PURE__ */ new Set());
-  React7.useEffect(() => {
+  const [approved, setApproved] = React8.useState(() => /* @__PURE__ */ new Set());
+  React8.useEffect(() => {
     setApproved(readStored(clientId));
   }, [clientId]);
-  const persist = React7.useCallback(
+  const persist = React8.useCallback(
     (next) => {
       setApproved(next);
       if (typeof window === "undefined") return;
@@ -1544,8 +1627,8 @@ function useAlwaysApprove(clientId) {
     },
     [clientId]
   );
-  const isAlwaysApproved = React7.useCallback((toolName) => approved.has(toolName), [approved]);
-  const setAlwaysApprove = React7.useCallback(
+  const isAlwaysApproved = React8.useCallback((toolName) => approved.has(toolName), [approved]);
+  const setAlwaysApprove = React8.useCallback(
     (toolName) => {
       if (approved.has(toolName)) return;
       const next = new Set(approved);
@@ -1554,7 +1637,7 @@ function useAlwaysApprove(clientId) {
     },
     [approved, persist]
   );
-  const clearAlwaysApprove = React7.useCallback(
+  const clearAlwaysApprove = React8.useCallback(
     (toolName) => {
       if (!approved.has(toolName)) return;
       const next = new Set(approved);
@@ -1565,46 +1648,110 @@ function useAlwaysApprove(clientId) {
   );
   return { clearAlwaysApprove, isAlwaysApproved, setAlwaysApprove };
 }
+function isUnreadable(message) {
+  if (message.id.startsWith("streaming-")) return false;
+  return message.role === "assistant" || message.role === "tool";
+}
 function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React7.useState(false);
+  const behavior = config.behavior ?? {};
+  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 open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = React7.useCallback(
+  const persist = React8.useCallback(
+    (next) => {
+      if (isControlled || !behavior.persistOpenState) return;
+      try {
+        window.localStorage.setItem(storageKey2, next ? "1" : "0");
+      } catch {
+      }
+    },
+    [behavior.persistOpenState, isControlled, storageKey2]
+  );
+  const setOpen = React8.useCallback(
     (next) => {
       setUncontrolledOpen(next);
+      persist(next);
       onOpenChange?.(next);
     },
-    [onOpenChange]
+    [onOpenChange, persist]
   );
-  const [agentMode, setAgentMode] = React7.useState(false);
-  const isDesktop = useMediaQuery("(min-width: 640px)", {
-    defaultSSRValue: true,
-    ssr: true
-  });
+  const [agentMode, setAgentMode] = React8.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 { pendingApprovals, resolveApproval, resolvingApprovalId } = chat;
+  const { messages, pendingApprovals, resolveApproval, resolvingApprovalId, sending } = chat;
+  const bootRef = React8.useRef(false);
+  React8.useEffect(() => {
+    if (isControlled || bootRef.current) return;
+    bootRef.current = true;
+    let cancelled = false;
+    void (async () => {
+      if (behavior.openLastConversation !== false) {
+        const list = await chat.refreshConversations();
+        if (cancelled) return;
+        if (list.length) await chat.openConversation(list[0].id);
+        if (cancelled) return;
+      }
+      let shouldOpen = behavior.initialOpen ?? false;
+      if (behavior.persistOpenState) {
+        try {
+          const stored = window.localStorage.getItem(storageKey2);
+          if (stored !== null) shouldOpen = stored === "1";
+        } catch {
+        }
+      }
+      if (shouldOpen) {
+        setUncontrolledOpen(true);
+        onOpenChange?.(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const seenCountRef = React8.useRef(0);
+  const [anchorId, setAnchorId] = React8.useState(null);
+  React8.useEffect(() => {
+    if (open) {
+      if (messages.length > seenCountRef.current) {
+        const firstUnread = messages[seenCountRef.current];
+        setAnchorId(firstUnread && isUnreadable(firstUnread) ? firstUnread.id : null);
+      }
+      seenCountRef.current = messages.length;
+    }
+  }, [open, messages]);
+  const unreadCount = open ? 0 : messages.slice(seenCountRef.current).filter(isUnreadable).length;
+  const workLabel = React8.useMemo(() => {
+    if (!sending) return null;
+    const last = messages[messages.length - 1];
+    if (last?.role === "tool") return "Calling tools\u2026";
+    if (last?.role === "assistant" && (last.tool_calls?.length ?? 0) > 0) return "Calling tools\u2026";
+    return "Thinking\u2026";
+  }, [sending, messages]);
+  const approvalWaiting = pendingApprovals.length > 0;
   const { isAlwaysApproved } = alwaysApprove;
-  React7.useEffect(() => {
-    if (!open || resolvingApprovalId) return;
+  React8.useEffect(() => {
+    if (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 = React7.useRef(/* @__PURE__ */ new Set());
+  }, [pendingApprovals, resolvingApprovalId, isAlwaysApproved, resolveApproval]);
+  const firedWriteIds = React8.useRef(/* @__PURE__ */ new Set());
   const { onWriteSuccess } = config;
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!onWriteSuccess) return;
-    for (const message of chat.messages) {
+    for (const message of messages) {
       if (message.role !== "tool" || !message.is_write || message.tool_status !== "success") continue;
       if (firedWriteIds.current.has(message.id)) continue;
       firedWriteIds.current.add(message.id);
-      const args = findToolArguments(chat.messages, message);
+      const args = findToolArguments(messages, message);
       onWriteSuccess({ arguments: args, toolName: message.tool_name ?? "" });
     }
-  }, [chat.messages, onWriteSuccess]);
-  const lastNavigatedMessageId = React7.useRef(null);
-  const { messages } = chat;
-  React7.useEffect(() => {
+  }, [messages, onWriteSuccess]);
+  const lastNavigatedMessageId = React8.useRef(null);
+  React8.useEffect(() => {
     if (!open || fullscreen || !config.navigate || !config.pages?.length) return;
     const toolMessages = messages.filter((message) => message.role === "tool");
     const latest = toolMessages[toolMessages.length - 1];
@@ -1616,69 +1763,137 @@ 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 = React7.useCallback(() => {
+  const closePanel = React8.useCallback(() => {
     setOpen(false);
     setAgentMode(false);
   }, [setOpen]);
+  const transformOrigin = position === "bottom-left" ? "bottom left" : "bottom right";
+  const launcherHidden = open || config.appearance?.hideLauncher;
   return /* @__PURE__ */ jsxs(TooltipProvider, { children: [
-    !open && !config.appearance?.hideLauncher ? /* @__PURE__ */ jsx(
-      Fab,
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !launcherHidden ? /* @__PURE__ */ jsxs(
+      motion.div,
       {
-        "aria-label": "Open assistant",
-        onClick: () => setOpen(true),
-        position: config.appearance?.position ?? "bottom-right",
-        children: /* @__PURE__ */ jsx(SparklesIcon, {})
-      }
-    ) : null,
-    open ? fullscreen ? /* @__PURE__ */ jsx(
-      "div",
+        initial: { opacity: 0, scale: 0.6 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.6 },
+        transition: { type: "spring", stiffness: 300, damping: 24 },
+        style: { transformOrigin },
+        className: cn(
+          "fixed z-50 flex flex-col items-end gap-2",
+          position === "bottom-left" ? "bottom-4 left-4 items-start sm:bottom-6 sm:left-6" : "right-4 bottom-4 sm:right-6 sm:bottom-6"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: approvalWaiting ? /* @__PURE__ */ jsx(StatusChip, { tone: "warning", pulse: true, children: "Approval needed" }, "approval") : workLabel ? /* @__PURE__ */ jsx(StatusChip, { tone: "muted", children: workLabel }, workLabel) : null }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Open assistant",
+                onClick: () => setOpen(true),
+                className: "flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg outline-none transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                children: /* @__PURE__ */ jsx(SparklesIcon, { className: "size-6" })
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: unreadCount > 0 ? /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                initial: { scale: 0 },
+                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",
+                "aria-label": `${unreadCount} new message${unreadCount === 1 ? "" : "s"}`,
+                children: unreadCount > 9 ? "9+" : unreadCount
+              },
+              "badge"
+            ) : null })
+          ] })
+        ]
+      },
+      "agent-launcher"
+    ) : null }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
+      motion.div,
       {
-        "aria-modal": "true",
-        className: "fixed inset-0 z-50 flex flex-col bg-background",
-        role: "dialog",
-        children: /* @__PURE__ */ jsx(
-          AgentPanel,
-          {
-            agentMode,
-            canToggleAgentMode: isDesktop,
-            chat,
-            className: "flex-1",
-            config,
-            onAlwaysApprove: alwaysApprove.setAlwaysApprove,
-            onClose: closePanel,
-            onToggleAgentMode: () => setAgentMode((value) => !value)
+        layout: true,
+        initial: { opacity: 0, scale: 0.9 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.9 },
+        transition: { type: "spring", stiffness: 260, damping: 28 },
+        style: {
+          transformOrigin,
+          ...fullscreen ? {} : {
+            height: `min(${config.appearance?.panelHeight ?? 640}px, calc(100dvh - 3rem))`,
+            width: `min(${config.appearance?.panelWidth ?? 400}px, calc(100vw - 2rem))`
           }
-        )
-      }
-    ) : /* @__PURE__ */ jsx(
-      "div",
-      {
+        },
         className: cn(
-          "fixed z-50 flex flex-col overflow-hidden rounded-2xl border border-border shadow-2xl",
-          (config.appearance?.position ?? "bottom-right") === "bottom-left" ? "bottom-4 left-4 sm:bottom-6 sm:left-6" : "right-4 bottom-4 sm:right-6 sm:bottom-6"
+          "fixed z-50 flex flex-col overflow-hidden bg-background",
+          fullscreen ? "inset-0" : cn(
+            "rounded-2xl border border-border shadow-2xl",
+            position === "bottom-left" ? "bottom-4 left-4 sm:bottom-6 sm:left-6" : "right-4 bottom-4 sm:right-6 sm:bottom-6"
+          )
         ),
         role: "dialog",
-        style: {
-          height: `min(${config.appearance?.panelHeight ?? 640}px, calc(100dvh - 3rem))`,
-          width: `min(${config.appearance?.panelWidth ?? 400}px, calc(100vw - 2rem))`
-        },
+        "aria-modal": fullscreen ? "true" : void 0,
         children: /* @__PURE__ */ jsx(
           AgentPanel,
           {
-            agentMode: false,
-            canToggleAgentMode: true,
+            agentMode: fullscreen && agentMode,
+            canToggleAgentMode: isDesktop,
             chat,
             className: "flex-1",
             config,
+            newMessageAnchorId: anchorId,
             onAlwaysApprove: alwaysApprove.setAlwaysApprove,
             onClose: closePanel,
-            onToggleAgentMode: () => setAgentMode(true)
+            onToggleAgentMode: () => setAgentMode((value) => !value)
           }
         )
-      }
-    ) : null
+      },
+      "agent-panel"
+    ) : null })
   ] });
 }
+function StatusChip({
+  children,
+  tone,
+  pulse
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, y: 6, scale: 0.9 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: 6, scale: 0.9 },
+      transition: { duration: 0.18 },
+      className: cn(
+        "flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium shadow-sm",
+        tone === "warning" ? "border-warning bg-warning-surface text-warning-foreground" : "border-border bg-card text-secondary-foreground"
+      ),
+      children: [
+        pulse ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-warning-foreground" }) : /* @__PURE__ */ jsxs("span", { className: "flex gap-0.5", children: [
+          /* @__PURE__ */ jsx(Dot, { delay: 0 }),
+          /* @__PURE__ */ jsx(Dot, { delay: 0.15 }),
+          /* @__PURE__ */ jsx(Dot, { delay: 0.3 })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function Dot({ delay }) {
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "size-1.5 rounded-full bg-current opacity-60",
+      animate: { opacity: [0.2, 1, 0.2] },
+      transition: { duration: 1, repeat: Infinity, delay }
+    }
+  );
+}
 function findToolArguments(messages, toolMessage) {
   if (!toolMessage.tool_call_id) return {};
   for (let index = messages.length - 1; index >= 0; index -= 1) {
@@ -1695,6 +1910,6 @@ function defineAgentConfig(config) {
   return config;
 }
 
-export { AgentApiClient, AgentApiError, AgentComposer, AgentPanel, AgentWidget, ChatScroller, DEFAULT_ACCEPT, DocumentCard, MessageItem, TaskChecklist, ThinkingIndicator, ToolActivityGroup, ToolApprovalCard, acceptAttribute, acceptedExtensions, defineAgentConfig, deriveDetails, fileUploadEnabled, formatBytes, groupMessages, humanizeToolName, resolveToolPresentation, useAgentChat, useAlwaysApprove, validateFile };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map