@cntyclub/agent-react 0.14.4 → 0.16.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;AAqBD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,uBAAuB,qBAwRhH"}
+{"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;AA8BD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,uBAAuB,qBAiShH"}

package/dist/components/thinking-indicator.d.ts

@@ -7,8 +7,10 @@ export interface ThinkingIndicatorProps {
     className?: string;
 }
 /**
- * A muted "typing" bubble: a spinning gradient ring plus a phrase that rotates
- * every ~1.8s, so a long tool run reads as active progress instead of a frozen "…".
+ * A muted "typing" bubble: a monochrome thinking orb plus an aurora-gradient
+ * phrase that rotates every ~1.8s, so a long tool run reads as active progress
+ * instead of a frozen "…". The aurora treatment lives on the TEXT only — the
+ * orb keeps the stock theme ink.
  */
 export declare function ThinkingIndicator({ className, intervalMs, phrases }: ThinkingIndicatorProps): React.JSX.Element;
 //# sourceMappingURL=thinking-indicator.d.ts.map

package/dist/components/thinking-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thinking-indicator.d.ts","sourceRoot":"","sources":["../../src/components/thinking-indicator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,UAAiB,EAAE,OAAO,EAAE,EAAE,sBAAsB,qBA8ClG"}
+{"version":3,"file":"thinking-indicator.d.ts","sourceRoot":"","sources":["../../src/components/thinking-indicator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,UAAiB,EAAE,OAAO,EAAE,EAAE,sBAAsB,qBAoClG"}

package/dist/index.js

@@ -1,5 +1,5 @@
-import { cn, Button, 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, Loader2Icon, FileTextIcon, PaperclipIcon, MicIcon, ArrowUpIcon, CopyIcon, Maximize2Icon, ListChecksIcon, ChevronDownIcon, ShieldAlertIcon, CheckCheckIcon, UploadCloudIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, ChevronsRightIcon, SparklesIcon, DownloadIcon, CodeIcon } from 'lucide-react';
+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 { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
@@ -312,7 +312,10 @@ function AgentImageLightbox({ src, alt, onClose }) {
     document.body
   );
 }
-var BAR_COUNT = 40;
+var BAR_WIDTH = 2;
+var BAR_GAP = 3;
+var MAX_BARS = 1024;
+var FADE_BARS = 12;
 function formatClock(totalSeconds) {
   const minutes = Math.floor(totalSeconds / 60);
   const seconds = totalSeconds % 60;
@@ -340,7 +343,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
   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 levelsRef = React11.useRef(new Array(MAX_BARS).fill(0));
   const onErrorRef = React11.useRef(onError);
   onErrorRef.current = onError;
   const stopMeter = React11.useCallback(() => {
@@ -379,7 +382,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
     analyser.smoothingTimeConstant = 0.75;
     source.connect(analyser);
     analyserRef.current = analyser;
-    levelsRef.current = new Array(BAR_COUNT).fill(0);
+    levelsRef.current = new Array(MAX_BARS).fill(0);
     const buffer = new Uint8Array(analyser.fftSize);
     const draw = () => {
       const canvas = canvasRef.current;
@@ -407,16 +410,19 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
       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 barWidth = BAR_WIDTH * dpr;
+      const slot = (BAR_WIDTH + BAR_GAP) * dpr;
+      const count = Math.max(1, Math.min(MAX_BARS, Math.floor((pxWidth + BAR_GAP * dpr) / slot)));
       const midY = pxHeight / 2;
-      const minBar = Math.max(1, dpr);
+      const minBar = barWidth;
+      const maxBar = pxHeight * 0.92;
       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);
+      for (let i = 0; i < count; i += 1) {
+        const value = levels[levels.length - count + i];
+        const barHeight = Math.max(minBar, value * maxBar);
+        const x = pxWidth - barWidth - (count - 1 - i) * slot;
         const y = midY - barHeight / 2;
+        ctx2d.globalAlpha = Math.min(1, (i + 1) / FADE_BARS);
         if (typeof ctx2d.roundRect === "function") {
           ctx2d.beginPath();
           ctx2d.roundRect(x, y, barWidth, barHeight, Math.min(radius, barHeight / 2));
@@ -425,6 +431,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
           ctx2d.fillRect(x, y, barWidth, barHeight);
         }
       }
+      ctx2d.globalAlpha = 1;
       rafRef.current = requestAnimationFrame(draw);
     };
     rafRef.current = requestAnimationFrame(draw);
@@ -540,7 +547,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
             ),
             /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: formatClock(elapsed) })
           ] }),
-          /* @__PURE__ */ jsx("canvas", { "aria-hidden": true, className: "h-6 min-w-0 flex-1 text-foreground/80", ref: canvasRef }),
+          /* @__PURE__ */ jsx("canvas", { "aria-hidden": true, className: "h-6 min-w-0 flex-1 text-foreground/70", 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,
@@ -552,8 +559,8 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
           /* @__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": "Use recording", className: "rounded-full before:rounded-full", onClick: () => void confirm(), size: "icon-sm", type: "button", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
         ] }) : null,
-        phase === "transcribing" ? /* @__PURE__ */ jsxs("span", { className: cn("flex flex-1 items-center gap-2 text-muted-foreground text-sm"), children: [
-          /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }),
+        phase === "transcribing" ? /* @__PURE__ */ jsxs("span", { className: "flex flex-1 items-center gap-2 text-muted-foreground text-sm", children: [
+          /* @__PURE__ */ jsx(ThinkingOrb, { className: "shrink-0", size: 20, speed: 1, state: "working" }),
           "Transcribing\u2026"
         ] }) : null
       ]
@@ -809,14 +816,14 @@ function groupMessages(messages) {
   for (const message of messages) {
     if (message.role === "user") {
       flush();
-      items.push({ key: message.id, kind: "user", message });
+      items.push({ key: message.client_key ?? message.id, kind: "user", message });
       continue;
     }
     if (message.role === "assistant") {
       const hasText = Boolean(message.content && message.content.trim());
       if (hasText) {
         flush();
-        items.push({ key: message.id, kind: "assistant-text", message });
+        items.push({ key: message.client_key ?? message.id, kind: "assistant-text", message });
       }
       for (const toolCall of message.tool_calls ?? []) {
         const callId2 = toolCall.id ?? `${message.id}-${toolCall.name}`;
@@ -1029,18 +1036,7 @@ function ThinkingIndicator({ className, intervalMs = 1800, phrases }) {
       "data-slot": "thinking-indicator",
       role: "status",
       children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "size-4 shrink-0 animate-spin rounded-full [animation-duration:900ms]",
-            style: {
-              background: "conic-gradient(from 0deg, #FF0080, #7928CA, #0070F3, #38bdf8, #FF0080)",
-              WebkitMask: "radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px))",
-              mask: "radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px))"
-            }
-          }
-        ),
+        /* @__PURE__ */ jsx(ThinkingOrb, { className: "shrink-0", size: 20, speed: 0.7, state: "solving" }),
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -1897,8 +1893,16 @@ function useAgentChat(config) {
       if (response.messages?.length) {
         setMessages((current) => {
           const settled = current.filter((message) => !message.id.startsWith(OPTIMISTIC_ID_PREFIX));
+          const optimistic = 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)) ?? [];
+          const placeholder = optimistic[optimistic.length - 1];
+          if (placeholder) {
+            const echoIndex = fresh.findIndex((message) => message.role === "user");
+            if (echoIndex !== -1) {
+              fresh[echoIndex] = { ...fresh[echoIndex], client_key: placeholder.client_key ?? placeholder.id };
+            }
+          }
           return [...settled, ...fresh];
         });
       }
@@ -1918,8 +1922,13 @@ function useAgentChat(config) {
         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];
+            if (settled.some((message) => message.id === event.message.id)) return settled;
+            const optimistic = current.filter((message) => message.id.startsWith(OPTIMISTIC_ID_PREFIX));
+            const placeholder = optimistic[optimistic.length - 1];
+            if (!placeholder) return [...settled, event.message];
+            return current.filter((message) => !message.id.startsWith(OPTIMISTIC_ID_PREFIX) || message.id === placeholder.id).map(
+              (message) => message.id === placeholder.id ? { ...event.message, client_key: placeholder.client_key ?? placeholder.id } : message
+            );
           });
           break;
         case "text_delta": {
@@ -1947,9 +1956,18 @@ function useAgentChat(config) {
           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];
+            if (current.some((message) => message.id === event.message.id)) {
+              return streamingId ? current.filter((message) => message.id !== streamingId) : current;
+            }
+            if (streamingId) {
+              const index = current.findIndex((message) => message.id === streamingId);
+              if (index !== -1) {
+                const next = [...current];
+                next[index] = { ...event.message, client_key: streamingId };
+                return next;
+              }
+            }
+            return [...current, event.message];
           });
           break;
         }