@cntyclub/agent-react 0.12.0 → 0.14.0

package/dist/components/agent-panel.d.ts

@@ -14,11 +14,17 @@ export interface AgentPanelProps {
     onAlwaysApprove: (toolName: string) => void;
     /** Message id to render a "New messages" divider before (arrived while closed). */
     newMessageAnchorId?: string | null;
+    /**
+     * Render the close control as a "collapse to the right" affordance (two right
+     * chevrons) instead of an ✕. Used by the docked presentation, where closing
+     * collapses the panel to the side rather than dismissing a dialog.
+     */
+    collapseToSide?: boolean;
     className?: string;
 }
 /**
  * The chat surface shared by the popup panel and fullscreen Agent Mode.
  * Header (title, history, new chat, expand/collapse, close) + messages + input.
  */
-export declare function AgentPanel({ agentMode, canToggleAgentMode, chat, className, config, newMessageAnchorId, onAlwaysApprove, onClose, onToggleAgentMode, }: AgentPanelProps): React.JSX.Element;
+export declare function AgentPanel({ agentMode, canToggleAgentMode, chat, className, collapseToSide, config, newMessageAnchorId, onAlwaysApprove, onClose, onToggleAgentMode, }: AgentPanelProps): React.JSX.Element;
 //# sourceMappingURL=agent-panel.d.ts.map

package/dist/components/agent-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-panel.d.ts","sourceRoot":"","sources":["../../src/components/agent-panel.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACxC,yCAAyC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iEAAiE;IACjE,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,eAAe,EACf,OAAO,EACP,iBAAiB,GAClB,EAAE,eAAe,qBAgVjB"}
+{"version":3,"file":"agent-panel.d.ts","sourceRoot":"","sources":["../../src/components/agent-panel.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACxC,yCAAyC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iEAAiE;IACjE,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,SAAS,EACT,cAAc,EACd,MAAM,EACN,kBAAkB,EAClB,eAAe,EACf,OAAO,EACP,iBAAiB,GAClB,EAAE,eAAe,qBAqVjB"}

package/dist/components/agent-widget.d.ts

@@ -5,6 +5,17 @@ export interface AgentWidgetProps {
     /** Controlled open state (optional). */
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * How the panel is presented:
+     * - `"floating"` (default): a launcher button + a popup/fullscreen panel,
+     *   positioned by the widget itself (fixed to a screen corner).
+     * - `"docked"`: no launcher; the panel fills its parent element so the host
+     *   can place it in the layout (e.g. a resizable side pane on desktop, or a
+     *   fullscreen overlay on smaller screens). Open state is controlled by the
+     *   host via `open`/`onOpenChange`. Page-follow navigation stays enabled so
+     *   the agent can drive the main view alongside the chat.
+     */
+    presentation?: "floating" | "docked";
 }
 /**
  * The embeddable Agent Mode widget.
@@ -19,5 +30,5 @@ export interface AgentWidgetProps {
  * corner; size morph between popup and fullscreen). All colors come from the
  * host app's UI-kit theme tokens.
  */
-export declare function AgentWidget({ config, onOpenChange, open: controlledOpen }: AgentWidgetProps): React.JSX.Element;
+export declare function AgentWidget({ config, onOpenChange, open: controlledOpen, presentation, }: AgentWidgetProps): React.JSX.Element;
 //# sourceMappingURL=agent-widget.d.ts.map

package/dist/components/agent-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-widget.d.ts","sourceRoot":"","sources":["../../src/components/agent-widget.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAC;AAK1D,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAQD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,gBAAgB,qBAqR3F"}
+{"version":3,"file":"agent-widget.d.ts","sourceRoot":"","sources":["../../src/components/agent-widget.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAC;AAK1D,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;CACtC;AAQD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,YAAY,EACZ,IAAI,EAAE,cAAc,EACpB,YAAyB,GAC1B,EAAE,gBAAgB,qBAgUlB"}

package/dist/index.js

@@ -1,5 +1,5 @@
 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 { XIcon, Trash2Icon, SquareIcon, PauseIcon, PlayIcon, CheckIcon, Loader2Icon, 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 { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
@@ -1494,6 +1494,7 @@ function AgentPanel({
   canToggleAgentMode,
   chat,
   className,
+  collapseToSide,
   config,
   newMessageAnchorId,
   onAlwaysApprove,
@@ -1662,7 +1663,16 @@ function AgentPanel({
               ),
               /* @__PURE__ */ jsx(TooltipContent, { children: agentMode ? "Exit Agent Mode" : "Agent Mode" })
             ] }) : null,
-            /* @__PURE__ */ jsx(Button, { "aria-label": "Close", onClick: onClose, size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ jsx(XIcon, {}) })
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": collapseToSide ? "Collapse agent" : "Close",
+                onClick: onClose,
+                size: "icon-sm",
+                variant: "ghost",
+                children: collapseToSide ? /* @__PURE__ */ jsx(ChevronsRightIcon, {}) : /* @__PURE__ */ jsx(XIcon, {})
+              }
+            )
           ] })
         ] }),
         view === "history" ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto p-2", children: chat.conversations.length === 0 ? /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-muted-foreground text-sm", children: "No conversations yet." }) : chat.conversations.map((conversation) => /* @__PURE__ */ jsxs(
@@ -2120,10 +2130,16 @@ function isUnreadable(message) {
   if (message.id.startsWith("streaming-")) return false;
   return message.role === "assistant" || message.role === "tool";
 }
-function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
+function AgentWidget({
+  config,
+  onOpenChange,
+  open: controlledOpen,
+  presentation = "floating"
+}) {
   const behavior = config.behavior ?? {};
   const position = config.appearance?.position ?? "bottom-right";
   const isControlled = controlledOpen !== void 0;
+  const isDocked = presentation === "docked";
   const storageKey2 = `cc-agent-open:${config.clientId}`;
   const [uncontrolledOpen, setUncontrolledOpen] = React11.useState(false);
   const open = controlledOpen ?? uncontrolledOpen;
@@ -2154,7 +2170,8 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
   const { messages, pendingApprovals, resolveApproval, resolvingApprovalId, sending } = chat;
   const bootRef = React11.useRef(false);
   React11.useEffect(() => {
-    if (isControlled || bootRef.current) return;
+    if (bootRef.current) return;
+    if (isControlled && !isDocked) return;
     bootRef.current = true;
     let cancelled = false;
     void (async () => {
@@ -2164,17 +2181,19 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
         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 (!isControlled) {
+        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);
         }
-      }
-      if (shouldOpen) {
-        setUncontrolledOpen(true);
-        onOpenChange?.(true);
       }
       setBootstrapDone(true);
     })();
@@ -2237,14 +2256,16 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
     if (!mapping) return;
     const args = findToolArguments(messages, latest);
     const path = mapping.buildRoute ? mapping.buildRoute(args) : mapping.route;
-    if (path) config.navigate(path);
+    if (!path) return;
+    const scrollTo = typeof mapping.scrollTo === "function" ? mapping.scrollTo(args) : mapping.scrollTo;
+    config.navigate(path, { scrollTo: scrollTo ?? null });
   }, [config, fullscreen, messages, open]);
   const closePanel = React11.useCallback(() => {
     setOpen(false);
     setAgentMode(false);
   }, [setOpen]);
   const transformOrigin = position === "bottom-left" ? "bottom left" : "bottom right";
-  const launcherHidden = open || config.appearance?.hideLauncher;
+  const launcherHidden = open || config.appearance?.hideLauncher || isDocked;
   return /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsx(AnimatePresence, { children: !launcherHidden ? /* @__PURE__ */ jsxs(
       motion.div,
@@ -2289,7 +2310,33 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
       },
       "agent-launcher"
     ) : null }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
+    isDocked ? /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, x: 28 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, x: 28 },
+        transition: { type: "spring", stiffness: 260, damping: 30 },
+        className: "flex h-full w-full flex-col overflow-hidden bg-background",
+        children: /* @__PURE__ */ jsx(
+          AgentPanel,
+          {
+            agentMode: false,
+            canToggleAgentMode: false,
+            chat,
+            className: "flex-1",
+            collapseToSide: true,
+            config,
+            newMessageAnchorId: anchorId,
+            onAlwaysApprove: alwaysApprove.setAlwaysApprove,
+            onClose: closePanel,
+            onToggleAgentMode: () => {
+            }
+          }
+        )
+      },
+      "agent-docked"
+    ) : null }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
       motion.div,
       {
         layout: true,
@@ -2329,7 +2376,7 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
         )
       },
       "agent-panel"
-    ) : null })
+    ) : null }) })
   ] });
 }
 function StatusChip({