@cntyclub/agent-react 0.14.2 → 0.14.4

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,8 @@ 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: 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 "…".
  */
 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,qBAqClG"}
+{"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"}

package/dist/index.js

@@ -1,4 +1,4 @@
-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 { 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 * as React11 from 'react';
 import { AnimatePresence, motion } from 'motion/react';
@@ -931,7 +931,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 +954,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 +994,8 @@ function MessageItem({ message }) {
           ),
           children: /* @__PURE__ */ jsx(CopyButton, { text: message.content })
         }
-      )
+      ),
+      /* @__PURE__ */ jsx(AgentImageLightbox, { onClose: () => setLightboxSrc(null), src: lightboxSrc })
     ] });
   }
   return null;
@@ -1005,19 +1029,23 @@ 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__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "span",
           {
-            className: "fade-in-0 animate-in text-muted-foreground text-xs duration-300",
-            children: [
-              words[index],
-              " \u2026"
-            ]
+            "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(
+          "span",
+          {
+            className: "fade-in-0 animate-in text-xs font-medium duration-300",
+            children: /* @__PURE__ */ jsx(AuroraText, { children: words[index] })
           },
           index
         )