@mieweb/ui 0.7.1 → 0.7.2-dev.1

package/dist/{chunk-IWDQPSJN.cjs → chunk-XS35KPBZ.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkLOTMAKUG_cjs = require('./chunk-LOTMAKUG.cjs');
-var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var chunkZZJ4ZVYR_cjs = require('./chunk-ZZJ4ZVYR.cjs');
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var React2 = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
@@ -24,7 +24,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 var sizeClasses = {
   sm: "h-4 w-4",
@@ -36,7 +36,7 @@ function SparklesIcon({ className, size = "md" }) {
     "svg",
     {
       "aria-hidden": "true",
-      className: chunkOR5DRJCW_cjs.cn(sizeClasses[size], className),
+      className: chunkS5RVSXDV_cjs.cn(sizeClasses[size], className),
       viewBox: "0 0 24 24",
       fill: "currentColor",
       children: [
@@ -68,7 +68,7 @@ function AILogoIcon({ className, size = "md" }) {
     "svg",
     {
       "aria-hidden": "true",
-      className: chunkOR5DRJCW_cjs.cn(sizeClasses[size], className),
+      className: chunkS5RVSXDV_cjs.cn(sizeClasses[size], className),
       viewBox: "0 0 24 24",
       fill: "none",
       children: [
@@ -113,7 +113,7 @@ function CloseIcon({ className }) {
     "svg",
     {
       "aria-hidden": "true",
-      className: chunkOR5DRJCW_cjs.cn("h-5 w-5", className),
+      className: chunkS5RVSXDV_cjs.cn("h-5 w-5", className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -134,7 +134,7 @@ function RefreshIcon({ className }) {
     "svg",
     {
       "aria-hidden": "true",
-      className: chunkOR5DRJCW_cjs.cn("h-5 w-5", className),
+      className: chunkS5RVSXDV_cjs.cn("h-5 w-5", className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -164,7 +164,7 @@ function ChevronIcon({
     "svg",
     {
       "aria-hidden": "true",
-      className: chunkOR5DRJCW_cjs.cn("h-4 w-4", chevronRotation[direction], className),
+      className: chunkS5RVSXDV_cjs.cn("h-4 w-4", chevronRotation[direction], className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -178,7 +178,7 @@ function SendIcon({ className }) {
     "svg",
     {
       "aria-hidden": "true",
-      className: chunkOR5DRJCW_cjs.cn("h-5 w-5", className),
+      className: chunkS5RVSXDV_cjs.cn("h-5 w-5", className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -199,7 +199,7 @@ function SpinnerIcon({ className }) {
     "svg",
     {
       "aria-hidden": "true",
-      className: chunkOR5DRJCW_cjs.cn("h-5 w-5 animate-spin", className),
+      className: chunkS5RVSXDV_cjs.cn("h-5 w-5 animate-spin", className),
       fill: "none",
       viewBox: "0 0 24 24",
       children: [
@@ -226,6 +226,68 @@ function SpinnerIcon({ className }) {
     }
   );
 }
+function CollapsiblePill({
+  label,
+  leadingIcon,
+  density = "standard",
+  defaultOpen = false,
+  pillClassName,
+  className,
+  title,
+  children
+}) {
+  const hasContent = Boolean(children);
+  const [isOpen, setIsOpen] = React2__namespace.useState(defaultOpen);
+  const contentId = React2__namespace.useId();
+  React2__namespace.useEffect(() => {
+    setIsOpen(defaultOpen);
+  }, [defaultOpen]);
+  const toggle = () => {
+    setIsOpen((open) => !open);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "collapsible-pill", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: hasContent ? toggle : void 0,
+        "aria-expanded": hasContent ? isOpen : void 0,
+        "aria-controls": hasContent ? contentId : void 0,
+        title,
+        disabled: !hasContent,
+        className: chunkS5RVSXDV_cjs.cn(
+          "focus-visible:ring-ring inline-flex items-center gap-1.5 border font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
+          density === "condensed" ? "rounded-[8px] px-2 py-0.5 text-[10px]" : "rounded-[10px] px-[11px] py-1 text-[11px]",
+          pillClassName
+        ),
+        children: [
+          leadingIcon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+          hasContent && /* @__PURE__ */ jsxRuntime.jsx(
+            ChevronIcon,
+            {
+              direction: isOpen ? "down" : "right",
+              className: density === "condensed" ? "h-2.5 w-2.5 opacity-60" : "h-3 w-3 opacity-60"
+            }
+          )
+        ]
+      }
+    ),
+    hasContent && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: contentId,
+        "aria-hidden": !isOpen,
+        inert: !isOpen || void 0,
+        className: chunkS5RVSXDV_cjs.cn(
+          "overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out",
+          isOpen ? "max-h-[500px] overflow-y-auto opacity-100" : "max-h-0 opacity-0"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5", children })
+      }
+    )
+  ] });
+}
 var statusIconVariants = classVarianceAuthority.cva(
   "flex h-5 w-5 items-center justify-center rounded-full",
   {
@@ -248,7 +310,7 @@ function ToolStatusIcon({ status, className }) {
     "span",
     {
       "data-slot": "ai-tool-status-icon",
-      className: chunkOR5DRJCW_cjs.cn(statusIconVariants({ status }), className),
+      className: chunkS5RVSXDV_cjs.cn(statusIconVariants({ status }), className),
       children: [
         status === "pending" && /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
@@ -655,7 +717,7 @@ function ResourceLink({ link, onClick, className }) {
     {
       href: link.href,
       onClick: handleClick,
-      className: chunkOR5DRJCW_cjs.cn(
+      className: chunkS5RVSXDV_cjs.cn(
         "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5",
         "bg-primary-50 text-primary-900 hover:bg-primary-100",
         "dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/50",
@@ -693,15 +755,13 @@ function ResourceLink({ link, onClick, className }) {
 function ToolResultDisplay({
   result,
   onLinkClick,
-  showRawData = false,
   className
 }) {
-  const [showJson, setShowJson] = React__namespace.useState(false);
   if (result.type === "error") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: chunkOR5DRJCW_cjs.cn(
+        className: chunkS5RVSXDV_cjs.cn(
           "mt-2 rounded-md bg-red-50 p-3 dark:bg-red-900/20",
           className
         ),
@@ -709,8 +769,7 @@ function ToolResultDisplay({
       }
     );
   }
-  const hasRawData = result.type === "json" && result.data !== void 0 && result.data !== null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkOR5DRJCW_cjs.cn("space-y-2", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkS5RVSXDV_cjs.cn("space-y-2", className), children: [
     result.summary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-700 dark:text-neutral-300", children: result.summary }),
     result.link && /* @__PURE__ */ jsxRuntime.jsx(ResourceLink, { link: result.link, onClick: onLinkClick }),
     result.resources && result.resources.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: result.resources.map((resource) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -724,67 +783,9 @@ function ToolResultDisplay({
         onClick: onLinkClick
       },
       resource.id
-    )) }),
-    hasRawData && showRawData && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: () => setShowJson(!showJson),
-          className: "flex items-center gap-1 text-xs text-neutral-600 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                "aria-hidden": "true",
-                className: chunkOR5DRJCW_cjs.cn(
-                  "h-3 w-3 transition-transform",
-                  showJson && "rotate-90"
-                ),
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M9 5l7 7-7 7"
-                  }
-                )
-              }
-            ),
-            showJson ? "Hide" : "Show",
-            " raw data"
-          ]
-        }
-      ),
-      showJson && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-2 max-h-40 overflow-auto rounded-md bg-neutral-100 p-2 text-xs dark:bg-neutral-800", children: JSON.stringify(result.data, null, 2) })
-    ] })
+    )) })
   ] });
 }
-var toolCallVariants = classVarianceAuthority.cva(
-  ["rounded-lg border", "overflow-hidden", "transition-all duration-200"],
-  {
-    variants: {
-      status: {
-        pending: "border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50",
-        running: "border-primary-200 bg-primary-50/50 dark:border-primary-800 dark:bg-primary-900/20",
-        success: "border-green-200 bg-green-50/50 dark:border-green-800 dark:bg-green-900/20",
-        error: "border-red-200 bg-red-50/50 dark:border-red-800 dark:bg-red-900/20",
-        cancelled: "border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50 opacity-60"
-      },
-      compact: {
-        true: "p-2",
-        false: "p-3"
-      }
-    },
-    defaultVariants: {
-      status: "pending",
-      compact: false
-    }
-  }
-);
 var TOOL_FRIENDLY_NAMES = {
   create_patient: "Creating patient",
   get_patient: "Looking up patient",
@@ -849,120 +850,113 @@ function getParameterSummary(toolName, params) {
   }
   return null;
 }
+var statusPillClasses = {
+  pending: "bg-neutral-100 border-neutral-200 text-neutral-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400",
+  running: "bg-primary-50 border-primary-200 text-primary-800 dark:bg-primary-900/20 dark:border-primary-800 dark:text-primary-300",
+  success: "bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-800 dark:text-green-300",
+  error: "bg-red-50 border-red-200 text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300",
+  cancelled: "bg-neutral-100 border-neutral-200 text-neutral-400 opacity-60 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400"
+};
 function MCPToolCallDisplay({
   toolCall,
   showParameters = true,
   collapsible = true,
-  defaultCollapsed = true,
+  defaultCollapsed,
   compact,
+  hidden = false,
   onLinkClick,
   className
 }) {
-  const [showDetails, setShowDetails] = React__namespace.useState(!defaultCollapsed);
   const formatDuration = (ms) => {
     if (!ms) return null;
     if (ms < 1e3) return `${ms}ms`;
     return `${(ms / 1e3).toFixed(1)}s`;
   };
   const friendlyName = getToolFriendlyName(toolCall.toolName, toolCall.status);
+  const durationLabel = formatDuration(toolCall.duration);
   const paramSummary = getParameterSummary(
     toolCall.toolName,
     toolCall.parameters
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const detailBit = toolCall.status === "success" ? durationLabel : paramSummary ?? durationLabel;
+  const pillLabel = detailBit ? `${friendlyName} \xB7 ${detailBit}` : friendlyName;
+  const hasParams = showParameters && toolCall.parameters.length > 0;
+  const hasBoxContent = Boolean(toolCall.result || toolCall.error || hasParams);
+  const isCompleted = toolCall.status === "success" || toolCall.status === "error";
+  const effectiveDefaultCollapsed = defaultCollapsed ?? !isCompleted;
+  if (hidden) return null;
+  const box = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      "data-slot": "ai-tool-call",
-      className: chunkOR5DRJCW_cjs.cn(
-        toolCallVariants({ status: toolCall.status, compact }),
-        className
+      className: chunkS5RVSXDV_cjs.cn(
+        "w-full max-w-md space-y-2 rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50",
+        compact ? "p-2" : "p-3"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+      children: [
+        toolCall.result && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "ai-tool-result", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ToolResultDisplay,
+          {
+            result: toolCall.result,
+            onLinkClick
+          }
+        ) }),
+        toolCall.error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md bg-red-100 p-2 dark:bg-red-900/30", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: toolCall.error }) }),
+        hasParams && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            "data-slot": "ai-tool-icon",
-            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-white/50 text-neutral-600 dark:bg-neutral-700/50 dark:text-neutral-400",
-            children: getToolIcon(toolCall.toolName)
+            "data-slot": "ai-tool-parameters",
+            className: "rounded-md bg-neutral-100 p-2 dark:bg-neutral-800",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400", children: "Parameters" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: toolCall.parameters.map((param) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-neutral-600 dark:text-neutral-400", children: [
+                  param.name,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-neutral-700 dark:text-neutral-300", children: typeof param.value === "string" ? param.value : JSON.stringify(param.value) })
+              ] }, param.name)) })
+            ]
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "ai-tool-content", className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-neutral-900 dark:text-white", children: friendlyName }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToolStatusIcon, { status: toolCall.status }),
-            toolCall.duration && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-neutral-600 dark:text-neutral-400", children: formatDuration(toolCall.duration) })
-          ] }),
-          paramSummary && toolCall.status !== "success" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: paramSummary }),
-          toolCall.result && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "ai-tool-result", className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-            ToolResultDisplay,
-            {
-              result: toolCall.result,
-              onLinkClick,
-              showRawData: showDetails
-            }
-          ) }),
-          toolCall.error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 rounded-md bg-red-100 p-2 dark:bg-red-900/30", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: toolCall.error }) }),
-          collapsible && showParameters && toolCall.parameters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              onClick: () => setShowDetails(!showDetails),
-              className: "mt-2 flex items-center gap-1 text-xs text-neutral-600 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    "aria-hidden": "true",
-                    className: chunkOR5DRJCW_cjs.cn(
-                      "h-3 w-3 transition-transform",
-                      showDetails && "rotate-90"
-                    ),
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        d: "M9 5l7 7-7 7"
-                      }
-                    )
-                  }
-                ),
-                showDetails ? "Hide" : "Show",
-                " details"
-              ]
-            }
-          ),
-          showDetails && showParameters && toolCall.parameters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              "data-slot": "ai-tool-parameters",
-              className: "mt-3 rounded-md bg-neutral-100 p-2 dark:bg-neutral-800",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400", children: "Parameters" }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: toolCall.parameters.map((param) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: "flex items-start gap-2 text-xs",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-neutral-600 dark:text-neutral-400", children: [
-                        param.name,
-                        ":"
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-neutral-700 dark:text-neutral-300", children: typeof param.value === "string" ? param.value : JSON.stringify(param.value) })
-                    ]
-                  },
-                  param.name
-                )) })
-              ]
-            }
-          )
-        ] })
-      ] })
+        )
+      ]
     }
   );
+  const staticPill = /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-slot": "ai-tool-pill",
+      className: chunkS5RVSXDV_cjs.cn(
+        "inline-flex items-center gap-1.5 border font-medium",
+        compact ? "rounded-[8px] px-2 py-0.5 text-[10px]" : "rounded-[10px] px-[11px] py-1 text-[11px]",
+        statusPillClasses[toolCall.status]
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ToolStatusIcon, { status: toolCall.status }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: pillLabel })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "ai-tool-call", className, children: !hasBoxContent ? staticPill : collapsible ? (
+    // Pill click reveals the whole box (result + params) in one go.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsiblePill,
+      {
+        label: pillLabel,
+        leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(ToolStatusIcon, { status: toolCall.status }),
+        density: compact ? "condensed" : "standard",
+        defaultOpen: !effectiveDefaultCollapsed,
+        pillClassName: statusPillClasses[toolCall.status],
+        title: "Toggle details",
+        children: box
+      }
+    )
+  ) : (
+    // Non-collapsible: pill + box always visible.
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      staticPill,
+      box
+    ] })
+  ) });
 }
 var avatarVariants = classVarianceAuthority.cva(
   "flex shrink-0 items-center justify-center rounded-full",
@@ -1000,7 +994,7 @@ function MessageAvatar({
     "div",
     {
       "data-slot": "ai-message-avatar",
-      className: chunkOR5DRJCW_cjs.cn(avatarVariants({ role, size }), className),
+      className: chunkS5RVSXDV_cjs.cn(avatarVariants({ role, size }), className),
       children: role === "assistant" ? /* @__PURE__ */ jsxRuntime.jsx(SparklesIcon, { size: "md" }) : role === "user" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: getInitials(userName) }) : role === "system" ? /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
@@ -1053,7 +1047,7 @@ function AITypingIndicator({ className }) {
     "div",
     {
       "data-slot": "ai-typing-indicator",
-      className: chunkOR5DRJCW_cjs.cn("inline-flex items-center justify-center gap-2", className),
+      className: chunkS5RVSXDV_cjs.cn("inline-flex items-center justify-center gap-2", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
@@ -1097,6 +1091,39 @@ function AITypingIndicator({ className }) {
     }
   );
 }
+function ThinkingBlock({
+  text,
+  streaming,
+  defaultCollapsed = false
+}) {
+  const startedAt = React2__namespace.useRef(Date.now());
+  const [elapsed, setElapsed] = React2__namespace.useState(null);
+  const prevStreaming = React2__namespace.useRef(streaming);
+  React2__namespace.useEffect(() => {
+    if (prevStreaming.current && !streaming) {
+      setElapsed(Math.round((Date.now() - startedAt.current) / 1e3));
+    }
+    prevStreaming.current = streaming;
+  }, [streaming]);
+  const label = streaming ? "Thinking" : elapsed !== null && elapsed > 0 ? `Thought for ${elapsed}s` : "Thought";
+  const dot = streaming ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-violet-500 dark:bg-violet-400"
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "ai-message-thinking", children: /* @__PURE__ */ jsxRuntime.jsx(
+    CollapsiblePill,
+    {
+      label,
+      leadingIcon: dot,
+      defaultOpen: !defaultCollapsed,
+      pillClassName: "bg-violet-50 border-violet-200 text-violet-600 hover:bg-violet-100 dark:bg-violet-950/30 dark:border-violet-800 dark:text-violet-400 dark:hover:bg-violet-950/50 focus-visible:ring-violet-500",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-s-2 border-violet-200 ps-3 text-[13px] leading-relaxed text-neutral-600 italic dark:border-violet-700 dark:text-neutral-400", children: text })
+    }
+  ) });
+}
 function ContentBlock({
   content,
   onLinkClick,
@@ -1105,9 +1132,6 @@ function ContentBlock({
   role,
   renderTextContent
 }) {
-  const [isCollapsed, setIsCollapsed] = React__namespace.useState(
-    content.collapsed ?? false
-  );
   if (content.type === "text" && content.text) {
     if (renderTextContent) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: renderTextContent(content.text, { messageId, streaming, role }) });
@@ -1125,52 +1149,12 @@ function ContentBlock({
     );
   }
   if (content.type === "thinking" && content.text) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ThinkingBlock,
       {
-        "data-slot": "ai-message-thinking",
-        className: "rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              onClick: () => setIsCollapsed(!isCollapsed),
-              className: "flex w-full items-center justify-between px-3 py-2 text-left",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
-                    {
-                      "aria-hidden": "true",
-                      className: "h-4 w-4",
-                      fill: "none",
-                      viewBox: "0 0 24 24",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          d: "M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
-                        }
-                      )
-                    }
-                  ),
-                  "Thinking..."
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ChevronIcon,
-                  {
-                    direction: isCollapsed ? "right" : "down",
-                    className: "text-neutral-400"
-                  }
-                )
-              ]
-            }
-          ),
-          !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-neutral-200 px-3 py-2 dark:border-neutral-700", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 italic dark:text-neutral-400", children: content.text }) })
-        ]
+        text: content.text,
+        streaming,
+        defaultCollapsed: content.collapsed ?? false
       }
     );
   }
@@ -1195,7 +1179,7 @@ function ContentBlock({
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkLOTMAKUG_cjs.AudioPlayer,
+      chunkZZJ4ZVYR_cjs.AudioPlayer,
       {
         src: content.audioUrl,
         title: content.text || "Audio recording",
@@ -1319,14 +1303,14 @@ var bubbleVariants = classVarianceAuthority.cva("rounded-2xl px-4 py-2.5 w-fit m
     variant: "assistant"
   }
 });
-var ChatBubble = React__namespace.forwardRef(
+var ChatBubble = React2__namespace.forwardRef(
   ({ className, variant, hasError, accent, style, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-slot": "chat-bubble",
-        className: chunkOR5DRJCW_cjs.cn(
+        className: chunkS5RVSXDV_cjs.cn(
           bubbleVariants({ variant }),
           hasError && "border border-red-300 dark:border-red-700",
           className
@@ -1346,10 +1330,12 @@ function AIMessageDisplay({
   showTimestamp = false,
   onLinkClick,
   renderTextContent,
+  renderMessageFooter,
   className
 }) {
   const isStreaming = message.status === "streaming";
   const hasContent = message.content.length > 0;
+  const messageFooter = renderMessageFooter?.(message);
   const formatTime = (timestamp) => {
     const date = new Date(timestamp);
     return date.toLocaleTimeString(void 0, {
@@ -1362,7 +1348,7 @@ function AIMessageDisplay({
       "div",
       {
         "data-slot": "ai-message",
-        className: chunkOR5DRJCW_cjs.cn(messageVariants({ role: message.role }), className),
+        className: chunkS5RVSXDV_cjs.cn(messageVariants({ role: message.role }), className),
         children: [
           showAvatar && /* @__PURE__ */ jsxRuntime.jsx(MessageAvatar, { role: message.role }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 space-y-2", children: message.content.map((content, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1385,13 +1371,13 @@ function AIMessageDisplay({
     "div",
     {
       "data-slot": "ai-message",
-      className: chunkOR5DRJCW_cjs.cn(messageVariants({ role: message.role }), className),
+      className: chunkS5RVSXDV_cjs.cn(messageVariants({ role: message.role }), className),
       children: [
         showAvatar && message.role !== "system" && /* @__PURE__ */ jsxRuntime.jsx(MessageAvatar, { role: message.role, userName }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: chunkOR5DRJCW_cjs.cn(
+            className: chunkS5RVSXDV_cjs.cn(
               "flex min-w-0 flex-1 flex-col gap-1",
               message.role === "user" && "items-end"
             ),
@@ -1416,6 +1402,7 @@ function AIMessageDisplay({
                   )) }) : isStreaming ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(AITypingIndicator, {}) }) : null
                 }
               ),
+              messageFooter != null && messageFooter !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "ai-message-footer", className: "w-fit max-w-[85%]", children: messageFooter }),
               showTimestamp && /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
@@ -1439,6 +1426,7 @@ exports.AITypingIndicator = AITypingIndicator;
 exports.ChatBubble = ChatBubble;
 exports.ChevronIcon = ChevronIcon;
 exports.CloseIcon = CloseIcon;
+exports.CollapsiblePill = CollapsiblePill;
 exports.MCPToolCallDisplay = MCPToolCallDisplay;
 exports.MessageAvatar = MessageAvatar;
 exports.RefreshIcon = RefreshIcon;
@@ -1448,5 +1436,5 @@ exports.SparklesIcon = SparklesIcon;
 exports.SpinnerIcon = SpinnerIcon;
 exports.ToolStatusIcon = ToolStatusIcon;
 exports.getToolIcon = getToolIcon;
-//# sourceMappingURL=chunk-IWDQPSJN.cjs.map
-//# sourceMappingURL=chunk-IWDQPSJN.cjs.map
+//# sourceMappingURL=chunk-XS35KPBZ.cjs.map
+//# sourceMappingURL=chunk-XS35KPBZ.cjs.map