@cntyclub/agent-react 0.14.3 → 0.15.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/message-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-item.d.ts","sourceRoot":"","sources":["../../src/components/message-item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAM7C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,4BAmEjE"}
+{"version":3,"file":"message-item.d.ts","sourceRoot":"","sources":["../../src/components/message-item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAM7C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,4BAsGjE"}

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

@@ -7,8 +7,9 @@ export interface ThinkingIndicatorProps {
     className?: string;
 }
 /**
- * A muted "typing" bubble: three bouncing dots 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: an aurora-colored thinking orb plus a phrase that
+ * rotates every ~1.8s, so a long tool run reads as active progress instead of
+ * a frozen "…".
  */
 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,qBAuClG"}
+{"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;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,UAAiB,EAAE,OAAO,EAAE,EAAE,sBAAsB,qBAqClG"}

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, AuroraOrb, AuroraText, 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, 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,9 +559,9 @@ 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" }),
-          "Transcribing\u2026"
+        phase === "transcribing" ? /* @__PURE__ */ jsxs("span", { className: "flex flex-1 items-center gap-2 font-medium text-sm", children: [
+          /* @__PURE__ */ jsx(AuroraOrb, { speed: 1, state: "working" }),
+          /* @__PURE__ */ jsx(AuroraText, { children: "Transcribing" })
         ] }) : 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}`;
@@ -931,7 +938,7 @@ function MessageItem({ message }) {
     const attachments = message.attachments ?? [];
     const images = attachments.filter((a) => isImageAttachment(a.format) && a.url);
     const others = attachments.filter((a) => !isImageAttachment(a.format) || !a.url);
-    return /* @__PURE__ */ jsxs(ChatMessage, { from: "user", children: [
+    return /* @__PURE__ */ jsxs(ChatMessage, { className: "group", from: "user", children: [
       images.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-1.5", children: images.map((attachment) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -954,14 +961,37 @@ function MessageItem({ message }) {
         },
         attachment.id
       )) }) : null,
-      message.content ? /* @__PURE__ */ jsx(ChatMessageBubble, { from: "user", children: message.content }) : null,
+      message.content ? /* @__PURE__ */ jsx(ChatMessageBubble, { className: "whitespace-pre-wrap", from: "user", children: message.content }) : null,
+      message.content ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mt-0.5 flex justify-end opacity-0 transition-opacity",
+            "group-hover:opacity-100 focus-within:opacity-100"
+          ),
+          children: /* @__PURE__ */ jsx(CopyButton, { text: message.content })
+        }
+      ) : null,
       /* @__PURE__ */ jsx(AgentImageLightbox, { onClose: () => setLightboxSrc(null), src: lightboxSrc })
     ] });
   }
   if (message.role === "assistant") {
     if (!message.content || !message.content.trim()) return null;
     return /* @__PURE__ */ jsxs(ChatMessage, { className: "group", from: "assistant", children: [
-      /* @__PURE__ */ jsx(ChatMessageBubble, { from: "assistant", children: /* @__PURE__ */ jsx(Markdown, { children: message.content }) }),
+      /* @__PURE__ */ jsx(ChatMessageBubble, { from: "assistant", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "[&_img]:cursor-zoom-in [&_img]:rounded-md",
+          onClick: (event) => {
+            const target = event.target;
+            if (target.tagName !== "IMG") return;
+            const src = target.currentSrc || target.src;
+            if (src) setLightboxSrc(src);
+          },
+          role: "presentation",
+          children: /* @__PURE__ */ jsx(Markdown, { children: message.content })
+        }
+      ) }),
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -971,7 +1001,8 @@ function MessageItem({ message }) {
           ),
           children: /* @__PURE__ */ jsx(CopyButton, { text: message.content })
         }
-      )
+      ),
+      /* @__PURE__ */ jsx(AgentImageLightbox, { onClose: () => setLightboxSrc(null), src: lightboxSrc })
     ] });
   }
   return null;
@@ -1005,11 +1036,7 @@ function ThinkingIndicator({ className, intervalMs = 1800, phrases }) {
       "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__ */ jsx(AuroraOrb, { speed: 0.7, state: "solving" }),
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -1866,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];
         });
       }
@@ -1887,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": {
@@ -1916,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;
         }