@cntyclub/agent-react 0.11.0 → 0.13.0

package/dist/components/agent-voice-recorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-voice-recorder.d.ts","sourceRoot":"","sources":["../../src/components/agent-voice-recorder.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7C,4EAA4E;IAC5E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,sEAAsE;IACtE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAkBD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,uBAAuB,qBAkLhH"}
+{"version":3,"file":"agent-voice-recorder.d.ts","sourceRoot":"","sources":["../../src/components/agent-voice-recorder.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7C,4EAA4E;IAC5E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,sEAAsE;IACtE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAqBD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,uBAAuB,qBAwRhH"}

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,qBA2TlB"}

package/dist/index.js

@@ -312,6 +312,7 @@ function AgentImageLightbox({ src, alt, onClose }) {
     document.body
   );
 }
+var BAR_COUNT = 40;
 function formatClock(totalSeconds) {
   const minutes = Math.floor(totalSeconds / 60);
   const seconds = totalSeconds % 60;
@@ -335,8 +336,24 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
   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(BAR_COUNT).fill(0));
   const onErrorRef = React11.useRef(onError);
   onErrorRef.current = onError;
+  const stopMeter = React11.useCallback(() => {
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    analyserRef.current = null;
+    const ctx = audioContextRef.current;
+    audioContextRef.current = null;
+    if (ctx && ctx.state !== "closed") void ctx.close().catch(() => {
+    });
+  }, []);
   const stopTracks = React11.useCallback(() => {
     streamRef.current?.getTracks().forEach((track) => track.stop());
     streamRef.current = null;
@@ -344,6 +361,73 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
       clearInterval(timerRef.current);
       timerRef.current = null;
     }
+    stopMeter();
+  }, [stopMeter]);
+  const startMeter = React11.useCallback((stream) => {
+    const Ctor = typeof window === "undefined" ? void 0 : window.AudioContext ?? window.webkitAudioContext;
+    if (!Ctor) return;
+    let context;
+    try {
+      context = new Ctor();
+    } catch {
+      return;
+    }
+    audioContextRef.current = context;
+    const source = context.createMediaStreamSource(stream);
+    const analyser = context.createAnalyser();
+    analyser.fftSize = 1024;
+    analyser.smoothingTimeConstant = 0.75;
+    source.connect(analyser);
+    analyserRef.current = analyser;
+    levelsRef.current = new Array(BAR_COUNT).fill(0);
+    const buffer = new Uint8Array(analyser.fftSize);
+    const draw = () => {
+      const canvas = canvasRef.current;
+      const activeAnalyser = analyserRef.current;
+      if (!canvas || !activeAnalyser) return;
+      const ctx2d = canvas.getContext("2d");
+      if (!ctx2d) return;
+      activeAnalyser.getByteTimeDomainData(buffer);
+      let sumSquares = 0;
+      for (let i = 0; i < buffer.length; i += 1) {
+        const centered = (buffer[i] - 128) / 128;
+        sumSquares += centered * centered;
+      }
+      const rms = Math.sqrt(sumSquares / buffer.length);
+      const level = Math.min(1, rms * 3.2);
+      const levels = levelsRef.current;
+      levels.push(level);
+      levels.shift();
+      const dpr = Math.min(2, typeof window === "undefined" ? 1 : window.devicePixelRatio || 1);
+      const cssWidth = canvas.clientWidth || 1;
+      const cssHeight = canvas.clientHeight || 1;
+      const pxWidth = Math.round(cssWidth * dpr);
+      const pxHeight = Math.round(cssHeight * dpr);
+      if (canvas.width !== pxWidth) canvas.width = pxWidth;
+      if (canvas.height !== pxHeight) canvas.height = pxHeight;
+      ctx2d.clearRect(0, 0, pxWidth, pxHeight);
+      ctx2d.fillStyle = getComputedStyle(canvas).color || "currentColor";
+      const gap = Math.max(1, pxWidth / BAR_COUNT / 3);
+      const barWidth = Math.max(1, (pxWidth - gap * (BAR_COUNT - 1)) / BAR_COUNT);
+      const midY = pxHeight / 2;
+      const minBar = Math.max(1, dpr);
+      const radius = barWidth / 2;
+      for (let i = 0; i < BAR_COUNT; i += 1) {
+        const value = levels[i];
+        const barHeight = Math.max(minBar, value * pxHeight);
+        const x = i * (barWidth + gap);
+        const y = midY - barHeight / 2;
+        if (typeof ctx2d.roundRect === "function") {
+          ctx2d.beginPath();
+          ctx2d.roundRect(x, y, barWidth, barHeight, Math.min(radius, barHeight / 2));
+          ctx2d.fill();
+        } else {
+          ctx2d.fillRect(x, y, barWidth, barHeight);
+        }
+      }
+      rafRef.current = requestAnimationFrame(draw);
+    };
+    rafRef.current = requestAnimationFrame(draw);
   }, []);
   React11.useEffect(() => {
     let cancelled = false;
@@ -360,6 +444,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
           return;
         }
         streamRef.current = stream;
+        startMeter(stream);
         const mimeType = pickMimeType();
         const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
         recorderRef.current = recorder;
@@ -444,7 +529,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
       transition: { duration: 0.15 },
       children: [
         phase === "recording" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2 text-sm", children: [
             /* @__PURE__ */ jsx(
               motion.span,
               {
@@ -453,13 +538,9 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
                 transition: { duration: 1.2, repeat: Infinity }
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: formatClock(elapsed) }),
-            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-              "/ ",
-              formatClock(maxSeconds)
-            ] })
+            /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: formatClock(elapsed) })
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+          /* @__PURE__ */ jsx("canvas", { "aria-hidden": true, className: "h-6 min-w-0 flex-1 text-foreground/80", ref: canvasRef }),
           /* @__PURE__ */ jsx(Button, { "aria-label": "Discard recording", onClick: onCancel, size: "icon-sm", type: "button", variant: "ghost", children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
           /* @__PURE__ */ jsx(Button, { "aria-label": "Stop recording", onClick: stopRecording, size: "icon-sm", type: "button", children: /* @__PURE__ */ jsx(SquareIcon, {}) })
         ] }) : null,
@@ -2039,10 +2120,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;
@@ -2073,7 +2160,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 () => {
@@ -2083,17 +2171,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);
     })();
@@ -2163,7 +2253,7 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
     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,
@@ -2208,7 +2298,32 @@ 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",
+            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,
@@ -2248,7 +2363,7 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
         )
       },
       "agent-panel"
-    ) : null })
+    ) : null }) })
   ] });
 }
 function StatusChip({