@mieweb/ui 0.7.1-dev.9 → 0.7.2-dev.0

package/dist/{chunk-QKKYMNR2.js → chunk-RZJXCI53.js}

@@ -1,7 +1,7 @@
 import { AudioPlayer } from './chunk-XO3WLK65.js';
 import { cn } from './chunk-TQONQSJO.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
+import * as React2 from 'react';
 import { cva } from 'class-variance-authority';
 
 var sizeClasses = {
@@ -204,6 +204,68 @@ function SpinnerIcon({ className }) {
     }
   );
 }
+function CollapsiblePill({
+  label,
+  leadingIcon,
+  density = "standard",
+  defaultOpen = false,
+  pillClassName,
+  className,
+  title,
+  children
+}) {
+  const hasContent = Boolean(children);
+  const [isOpen, setIsOpen] = React2.useState(defaultOpen);
+  const contentId = React2.useId();
+  React2.useEffect(() => {
+    setIsOpen(defaultOpen);
+  }, [defaultOpen]);
+  const toggle = () => {
+    setIsOpen((open) => !open);
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "collapsible-pill", className, children: [
+    /* @__PURE__ */ 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: 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__ */ jsx("span", { children: label }),
+          hasContent && /* @__PURE__ */ 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__ */ jsx(
+      "div",
+      {
+        id: contentId,
+        "aria-hidden": !isOpen,
+        inert: !isOpen || void 0,
+        className: 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__ */ jsx("div", { className: "mt-1.5", children })
+      }
+    )
+  ] });
+}
 var statusIconVariants = cva(
   "flex h-5 w-5 items-center justify-center rounded-full",
   {
@@ -671,10 +733,8 @@ function ResourceLink({ link, onClick, className }) {
 function ToolResultDisplay({
   result,
   onLinkClick,
-  showRawData = false,
   className
 }) {
-  const [showJson, setShowJson] = React.useState(false);
   if (result.type === "error") {
     return /* @__PURE__ */ jsx(
       "div",
@@ -687,7 +747,6 @@ function ToolResultDisplay({
       }
     );
   }
-  const hasRawData = result.type === "json" && result.data !== void 0 && result.data !== null;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
     result.summary && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-700 dark:text-neutral-300", children: result.summary }),
     result.link && /* @__PURE__ */ jsx(ResourceLink, { link: result.link, onClick: onLinkClick }),
@@ -702,67 +761,9 @@ function ToolResultDisplay({
         onClick: onLinkClick
       },
       resource.id
-    )) }),
-    hasRawData && showRawData && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-      /* @__PURE__ */ 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__ */ jsx(
-              "svg",
-              {
-                "aria-hidden": "true",
-                className: cn(
-                  "h-3 w-3 transition-transform",
-                  showJson && "rotate-90"
-                ),
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M9 5l7 7-7 7"
-                  }
-                )
-              }
-            ),
-            showJson ? "Hide" : "Show",
-            " raw data"
-          ]
-        }
-      ),
-      showJson && /* @__PURE__ */ 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 = 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",
@@ -827,120 +828,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.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__ */ 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__ */ jsxs(
     "div",
     {
-      "data-slot": "ai-tool-call",
       className: cn(
-        toolCallVariants({ status: toolCall.status, compact }),
-        className
+        "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__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsx(
+      children: [
+        toolCall.result && /* @__PURE__ */ jsx("div", { "data-slot": "ai-tool-result", children: /* @__PURE__ */ jsx(
+          ToolResultDisplay,
+          {
+            result: toolCall.result,
+            onLinkClick
+          }
+        ) }),
+        toolCall.error && /* @__PURE__ */ jsx("div", { className: "rounded-md bg-red-100 p-2 dark:bg-red-900/30", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: toolCall.error }) }),
+        hasParams && /* @__PURE__ */ 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__ */ jsx("h4", { className: "mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400", children: "Parameters" }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: toolCall.parameters.map((param) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs", children: [
+                /* @__PURE__ */ jsxs("span", { className: "font-mono text-neutral-600 dark:text-neutral-400", children: [
+                  param.name,
+                  ":"
+                ] }),
+                /* @__PURE__ */ 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__ */ jsxs("div", { "data-slot": "ai-tool-content", className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-neutral-900 dark:text-white", children: friendlyName }),
-            /* @__PURE__ */ jsx(ToolStatusIcon, { status: toolCall.status }),
-            toolCall.duration && /* @__PURE__ */ jsx("span", { className: "text-xs text-neutral-600 dark:text-neutral-400", children: formatDuration(toolCall.duration) })
-          ] }),
-          paramSummary && toolCall.status !== "success" && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: paramSummary }),
-          toolCall.result && /* @__PURE__ */ jsx("div", { "data-slot": "ai-tool-result", className: "mt-2", children: /* @__PURE__ */ jsx(
-            ToolResultDisplay,
-            {
-              result: toolCall.result,
-              onLinkClick,
-              showRawData: showDetails
-            }
-          ) }),
-          toolCall.error && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-md bg-red-100 p-2 dark:bg-red-900/30", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: toolCall.error }) }),
-          collapsible && showParameters && toolCall.parameters.length > 0 && /* @__PURE__ */ 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__ */ jsx(
-                  "svg",
-                  {
-                    "aria-hidden": "true",
-                    className: cn(
-                      "h-3 w-3 transition-transform",
-                      showDetails && "rotate-90"
-                    ),
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        d: "M9 5l7 7-7 7"
-                      }
-                    )
-                  }
-                ),
-                showDetails ? "Hide" : "Show",
-                " details"
-              ]
-            }
-          ),
-          showDetails && showParameters && toolCall.parameters.length > 0 && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "data-slot": "ai-tool-parameters",
-              className: "mt-3 rounded-md bg-neutral-100 p-2 dark:bg-neutral-800",
-              children: [
-                /* @__PURE__ */ jsx("h4", { className: "mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400", children: "Parameters" }),
-                /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: toolCall.parameters.map((param) => /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex items-start gap-2 text-xs",
-                    children: [
-                      /* @__PURE__ */ jsxs("span", { className: "font-mono text-neutral-600 dark:text-neutral-400", children: [
-                        param.name,
-                        ":"
-                      ] }),
-                      /* @__PURE__ */ 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__ */ jsxs(
+    "span",
+    {
+      "data-slot": "ai-tool-pill",
+      className: 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__ */ jsx(ToolStatusIcon, { status: toolCall.status }),
+        /* @__PURE__ */ jsx("span", { children: pillLabel })
+      ]
     }
   );
+  return /* @__PURE__ */ jsx("div", { "data-slot": "ai-tool-call", className, children: !hasBoxContent ? staticPill : collapsible ? (
+    // Pill click reveals the whole box (result + params) in one go.
+    /* @__PURE__ */ jsx(
+      CollapsiblePill,
+      {
+        label: pillLabel,
+        leadingIcon: /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-1.5", children: [
+      staticPill,
+      box
+    ] })
+  ) });
 }
 var avatarVariants = cva(
   "flex shrink-0 items-center justify-center rounded-full",
@@ -1075,6 +1069,39 @@ function AITypingIndicator({ className }) {
     }
   );
 }
+function ThinkingBlock({
+  text,
+  streaming,
+  defaultCollapsed = false
+}) {
+  const startedAt = React2.useRef(Date.now());
+  const [elapsed, setElapsed] = React2.useState(null);
+  const prevStreaming = React2.useRef(streaming);
+  React2.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__ */ 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__ */ jsx("div", { "data-slot": "ai-message-thinking", children: /* @__PURE__ */ 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__ */ 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,
@@ -1083,9 +1110,6 @@ function ContentBlock({
   role,
   renderTextContent
 }) {
-  const [isCollapsed, setIsCollapsed] = React.useState(
-    content.collapsed ?? false
-  );
   if (content.type === "text" && content.text) {
     if (renderTextContent) {
       return /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: renderTextContent(content.text, { messageId, streaming, role }) });
@@ -1103,52 +1127,12 @@ function ContentBlock({
     );
   }
   if (content.type === "thinking" && content.text) {
-    return /* @__PURE__ */ jsxs(
-      "div",
+    return /* @__PURE__ */ 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__ */ jsxs(
-            "button",
-            {
-              onClick: () => setIsCollapsed(!isCollapsed),
-              className: "flex w-full items-center justify-between px-3 py-2 text-left",
-              children: [
-                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [
-                  /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      "aria-hidden": "true",
-                      className: "h-4 w-4",
-                      fill: "none",
-                      viewBox: "0 0 24 24",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      children: /* @__PURE__ */ 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__ */ jsx(
-                  ChevronIcon,
-                  {
-                    direction: isCollapsed ? "right" : "down",
-                    className: "text-neutral-400"
-                  }
-                )
-              ]
-            }
-          ),
-          !isCollapsed && /* @__PURE__ */ jsx("div", { className: "border-t border-neutral-200 px-3 py-2 dark:border-neutral-700", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 italic dark:text-neutral-400", children: content.text }) })
-        ]
+        text: content.text,
+        streaming,
+        defaultCollapsed: content.collapsed ?? false
       }
     );
   }
@@ -1297,7 +1281,7 @@ var bubbleVariants = cva("rounded-2xl px-4 py-2.5 w-fit max-w-[85%]", {
     variant: "assistant"
   }
 });
-var ChatBubble = React.forwardRef(
+var ChatBubble = React2.forwardRef(
   ({ className, variant, hasError, accent, style, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -1324,10 +1308,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, {
@@ -1394,6 +1380,7 @@ function AIMessageDisplay({
                   )) }) : isStreaming ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(AITypingIndicator, {}) }) : null
                 }
               ),
+              messageFooter != null && messageFooter !== false && /* @__PURE__ */ jsx("div", { "data-slot": "ai-message-footer", className: "w-fit max-w-[85%]", children: messageFooter }),
               showTimestamp && /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -1411,6 +1398,6 @@ function AIMessageDisplay({
   );
 }
 
-export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon };
-//# sourceMappingURL=chunk-QKKYMNR2.js.map
-//# sourceMappingURL=chunk-QKKYMNR2.js.map
+export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, CollapsiblePill, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon };
+//# sourceMappingURL=chunk-RZJXCI53.js.map
+//# sourceMappingURL=chunk-RZJXCI53.js.map