@mieweb/ui 0.11.0-dev.49 → 0.11.0-dev.50

package/dist/{chunk-O2EAHOXM.cjs → chunk-G56OUIGH.cjs}

@@ -1,6 +1,12 @@
 'use strict';
 
+var chunkVXW7D5LR_cjs = require('./chunk-VXW7D5LR.cjs');
 var chunkZ7ZOSENN_cjs = require('./chunk-Z7ZOSENN.cjs');
+var chunkXXVUHLQN_cjs = require('./chunk-XXVUHLQN.cjs');
+var chunk7E46YDOT_cjs = require('./chunk-7E46YDOT.cjs');
+var chunkYW2AKBLS_cjs = require('./chunk-YW2AKBLS.cjs');
+var chunkFSARTLUE_cjs = require('./chunk-FSARTLUE.cjs');
+var chunkIEY3ZJIT_cjs = require('./chunk-IEY3ZJIT.cjs');
 var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React2 = require('react');
@@ -295,10 +301,13 @@ var statusIconVariants = classVarianceAuthority.cva(
     variants: {
       status: {
         pending: "bg-neutral-200 dark:bg-neutral-700",
+        "awaiting-approval": "bg-amber-100 dark:bg-amber-900/50",
         running: "bg-primary-100 dark:bg-primary-900/50",
         success: "bg-green-100 dark:bg-green-900/50",
         error: "bg-red-100 dark:bg-red-900/50",
-        cancelled: "bg-neutral-200 dark:bg-neutral-700"
+        cancelled: "bg-neutral-200 dark:bg-neutral-700",
+        denied: "bg-neutral-200 dark:bg-neutral-700",
+        expired: "bg-neutral-200 dark:bg-neutral-700"
       }
     },
     defaultVariants: {
@@ -323,6 +332,25 @@ function ToolStatusIcon({ status, className }) {
             children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "3" })
           }
         ),
+        status === "awaiting-approval" && /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "h-3 w-3 text-amber-600 dark:text-amber-400",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M12 7v6m0 4h.01"
+              }
+            )
+          }
+        ),
         status === "running" && /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
@@ -391,7 +419,7 @@ function ToolStatusIcon({ status, className }) {
             )
           }
         ),
-        status === "cancelled" && /* @__PURE__ */ jsxRuntime.jsx(
+        (status === "cancelled" || status === "denied" || status === "expired") && /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
           {
             "aria-hidden": "true",
@@ -772,6 +800,14 @@ function ToolResultDisplay({
   }
   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 }),
+    /* @__PURE__ */ jsxRuntime.jsx(ToolResultLinks, { result, onLinkClick })
+  ] });
+}
+function hasToolResultLinks(result) {
+  return Boolean(result?.link || result?.resources?.length);
+}
+function ToolResultLinks({ result, onLinkClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     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(
       ResourceLink,
@@ -853,10 +889,13 @@ function getParameterSummary(toolName, params) {
 }
 var statusPillClasses = {
   pending: "bg-neutral-100 border-neutral-200 text-neutral-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400",
+  "awaiting-approval": "bg-amber-50 border-amber-200 text-amber-800 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-300",
   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"
+  cancelled: "bg-neutral-100 border-neutral-200 text-neutral-400 opacity-60 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400",
+  denied: "bg-neutral-100 border-neutral-200 text-neutral-400 opacity-60 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400",
+  expired: "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,
@@ -959,6 +998,381 @@ function MCPToolCallDisplay({
     ] })
   ) });
 }
+var plural = (count, one, other) => count === 1 ? one : other;
+var defaultMCPToolCallGroupLabels = {
+  used: (count) => `Used ${count} ${plural(count, "tool", "tools")}`,
+  running: (count) => `Running ${count} ${plural(count, "tool", "tools")}`,
+  needsApproval: (count) => `${count} ${plural(count, "needs", "need")} approval`,
+  failed: (count) => `${count} failed`,
+  announceApproval: (count) => `${count} tool ${plural(count, "call needs", "calls need")} your approval`,
+  announceFailed: (count) => `${count} tool ${plural(count, "call", "calls")} failed`,
+  status: {
+    pending: "Pending",
+    "awaiting-approval": "Needs approval",
+    running: "Running",
+    success: "Done",
+    error: "Failed",
+    cancelled: "Cancelled",
+    denied: "Denied",
+    expired: "Expired"
+  },
+  callLabel: (toolCall) => toolCall.serverName ? `Tool call: ${toolCall.toolName} from ${toolCall.serverName}` : `Tool call: ${toolCall.toolName}`,
+  showResult: "Show result",
+  showError: "Show error",
+  allowOnce: "Allow once",
+  allowAlways: "Always allow",
+  deny: "Deny"
+};
+function resolveLabels(overrides) {
+  if (!overrides) return defaultMCPToolCallGroupLabels;
+  return {
+    ...defaultMCPToolCallGroupLabels,
+    ...overrides,
+    status: { ...defaultMCPToolCallGroupLabels.status, ...overrides.status }
+  };
+}
+function needsAttention(toolCall) {
+  return toolCall.status === "awaiting-approval" || toolCall.status === "error";
+}
+function summarize(toolCalls) {
+  let failed = 0;
+  let inFlight = 0;
+  const awaitingIds = [];
+  for (const toolCall of toolCalls) {
+    if (toolCall.status === "awaiting-approval") awaitingIds.push(toolCall.id);
+    else if (toolCall.status === "error") failed += 1;
+    else if (toolCall.status === "running" || toolCall.status === "pending")
+      inFlight += 1;
+  }
+  return {
+    total: toolCalls.length,
+    awaitingApproval: awaitingIds.length,
+    failed,
+    isActive: awaitingIds.length + inFlight > 0,
+    signature: toolCalls.map((call) => `${call.id}:${call.status}`).join("|"),
+    approvalKey: awaitingIds.join("|")
+  };
+}
+function useAutoCollapse(isActive, signature, focus) {
+  const [state, setState] = React2__namespace.useState(() => ({
+    signature,
+    expanded: isActive,
+    deferred: false
+  }));
+  let next = state;
+  if (state.signature !== signature) {
+    const expanded = isActive || focus === "rows";
+    next = { signature, expanded, deferred: expanded !== isActive };
+  } else if (state.deferred && focus === null) {
+    next = { signature, expanded: isActive, deferred: false };
+  }
+  if (next !== state) setState(next);
+  const setExpanded = React2__namespace.useCallback(
+    (expanded) => setState((current) => ({ ...current, expanded, deferred: false })),
+    []
+  );
+  return [next.expanded, setExpanded];
+}
+function progressAnnouncement(summary, labels) {
+  if (summary.awaitingApproval > 0) {
+    return labels.announceApproval(summary.awaitingApproval);
+  }
+  if (summary.isActive) return labels.running(summary.total);
+  return labels.used(summary.total);
+}
+var STATUS_BADGE_VARIANT = {
+  pending: "secondary",
+  "awaiting-approval": "warning",
+  running: "default",
+  success: "success",
+  error: "danger",
+  cancelled: "secondary",
+  denied: "secondary",
+  expired: "secondary"
+};
+function formatParameters(toolCall) {
+  return JSON.stringify(
+    Object.fromEntries(toolCall.parameters.map((p) => [p.name, p.value])),
+    null,
+    2
+  );
+}
+function formatData(data) {
+  return typeof data === "string" ? data : JSON.stringify(data, null, 2);
+}
+function formatResult(toolCall) {
+  const { result } = toolCall;
+  if (!result) return null;
+  return result.summary || formatData(result.data);
+}
+function formatError(toolCall) {
+  if (toolCall.error) return toolCall.error;
+  const { result } = toolCall;
+  if (result?.type !== "error") return null;
+  if (result.data != null && result.data !== "") return formatData(result.data);
+  return result.summary || null;
+}
+function OutputDisclosure({ label, text }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkVXW7D5LR_cjs.Collapsible, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkVXW7D5LR_cjs.CollapsibleTrigger, { className: "flex items-center gap-1 text-xs font-medium text-neutral-600 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.ChevronDown,
+        {
+          "aria-hidden": "true",
+          className: "h-3 w-3 transition-transform motion-reduce:transition-none [[data-state=open]>&]:rotate-180"
+        }
+      ),
+      label
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkVXW7D5LR_cjs.CollapsibleContent, { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "pre",
+      {
+        dir: "auto",
+        className: "max-h-60 overflow-auto rounded bg-neutral-100 p-2 text-xs whitespace-pre-wrap dark:bg-neutral-900",
+        children: text
+      }
+    ) })
+  ] });
+}
+function ToolCallRow({
+  toolCall,
+  labels,
+  onApprove,
+  onDeny,
+  onLinkClick
+}) {
+  const prefersReducedMotion = chunkYW2AKBLS_cjs.usePrefersReducedMotion();
+  const [acting, setActing] = React2__namespace.useState(false);
+  const triggerRef = React2__namespace.useRef(null);
+  const focusInActionsRef = React2__namespace.useRef(false);
+  const isAwaitingApproval = toolCall.status === "awaiting-approval";
+  const result = toolCall.result?.type === "error" ? null : formatResult(toolCall);
+  const errorText = formatError(toolCall);
+  const hasLinks = hasToolResultLinks(toolCall.result);
+  const hasDetails = toolCall.parameters.length > 0 || Boolean(result) || hasLinks;
+  const act = async (action) => {
+    setActing(true);
+    try {
+      await action();
+    } catch {
+    } finally {
+      setActing(false);
+    }
+  };
+  React2__namespace.useLayoutEffect(() => {
+    if (isAwaitingApproval || !focusInActionsRef.current) return;
+    focusInActionsRef.current = false;
+    if (!document.activeElement || document.activeElement === document.body) {
+      triggerRef.current?.focus();
+    }
+  }, [isAwaitingApproval]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkIEY3ZJIT_cjs.Animated,
+    {
+      preset: "collapse",
+      mode: "presence",
+      enabled: !prefersReducedMotion,
+      role: "listitem",
+      "data-slot": "ai-tool-call-row",
+      className: "overflow-hidden text-sm",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": labels.callLabel(toolCall), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkVXW7D5LR_cjs.Collapsible, { defaultOpen: isAwaitingApproval && hasDetails, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            chunkVXW7D5LR_cjs.CollapsibleTrigger,
+            {
+              ref: triggerRef,
+              className: "focus-visible:ring-primary-500 flex w-full min-w-0 items-center gap-2 rounded px-1.5 py-1 text-start hover:bg-neutral-100 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset dark:hover:bg-neutral-800",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "flex h-3.5 w-3.5 shrink-0 items-center justify-center text-neutral-500 [&_svg]:h-3.5 [&_svg]:w-3.5",
+                    children: toolCall.icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wrench, {})
+                  }
+                ),
+                toolCall.serverName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-neutral-500 dark:text-neutral-400", children: toolCall.serverName }),
+                /* @__PURE__ */ jsxRuntime.jsx("code", { className: "min-w-0 truncate font-mono text-xs", children: toolCall.toolName }),
+                toolCall.status === "running" && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXXVUHLQN_cjs.Spinner, { size: "xs" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  chunk7E46YDOT_cjs.Badge,
+                  {
+                    variant: STATUS_BADGE_VARIANT[toolCall.status],
+                    size: "sm",
+                    className: "ms-auto shrink-0",
+                    children: labels.status[toolCall.status]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.ChevronDown,
+                  {
+                    "aria-hidden": "true",
+                    className: "h-3.5 w-3.5 shrink-0 text-neutral-400 transition-transform motion-reduce:transition-none [[data-state=open]>&]:rotate-180"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(chunkVXW7D5LR_cjs.CollapsibleContent, { className: "ms-6 mt-1 space-y-2 pb-1", children: [
+            toolCall.result && hasLinks && /* @__PURE__ */ jsxRuntime.jsx(
+              ToolResultLinks,
+              {
+                result: toolCall.result,
+                onLinkClick
+              }
+            ),
+            toolCall.parameters.length > 0 && // JSON keeps its left-to-right order in RTL documents.
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "pre",
+              {
+                dir: "ltr",
+                className: "max-h-40 overflow-auto rounded bg-neutral-100 p-2 text-xs dark:bg-neutral-900",
+                children: formatParameters(toolCall)
+              }
+            ),
+            result && /* @__PURE__ */ jsxRuntime.jsx(OutputDisclosure, { label: labels.showResult, text: result }),
+            errorText && /* @__PURE__ */ jsxRuntime.jsx(OutputDisclosure, { label: labels.showError, text: errorText })
+          ] })
+        ] }),
+        toolCall.status === "error" && errorText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ms-6 line-clamp-2 text-xs text-red-600 dark:text-red-400", children: errorText }),
+        isAwaitingApproval && (onApprove || onDeny) && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "ms-6 mt-1 flex flex-wrap gap-2 pb-1",
+            onFocus: () => {
+              focusInActionsRef.current = true;
+            },
+            onBlur: (event) => {
+              if (!event.currentTarget.contains(event.relatedTarget)) {
+                focusInActionsRef.current = false;
+              }
+            },
+            children: [
+              onApprove && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkFSARTLUE_cjs.Button,
+                  {
+                    size: "sm",
+                    onClick: () => void act(() => onApprove(toolCall, { always: false })),
+                    disabled: acting,
+                    isLoading: acting,
+                    children: labels.allowOnce
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkFSARTLUE_cjs.Button,
+                  {
+                    size: "sm",
+                    variant: "outline",
+                    onClick: () => void act(() => onApprove(toolCall, { always: true })),
+                    disabled: acting,
+                    children: labels.allowAlways
+                  }
+                )
+              ] }),
+              onDeny && /* @__PURE__ */ jsxRuntime.jsx(
+                chunkFSARTLUE_cjs.Button,
+                {
+                  size: "sm",
+                  variant: "danger",
+                  onClick: () => void act(() => onDeny(toolCall)),
+                  disabled: acting,
+                  children: labels.deny
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function MCPToolCallGroup({
+  toolCalls,
+  onApprove,
+  onDeny,
+  onLinkClick,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = React2__namespace.useMemo(
+    () => resolveLabels(labelOverrides),
+    [labelOverrides]
+  );
+  const listId = React2__namespace.useId();
+  const summary = summarize(toolCalls);
+  const [focus, setFocus] = React2__namespace.useState(null);
+  const [expanded, setExpanded] = useAutoCollapse(
+    summary.isActive,
+    summary.signature,
+    focus
+  );
+  const hasHeader = toolCalls.length > 1;
+  const visibleCalls = !hasHeader || expanded ? toolCalls : toolCalls.filter(needsAttention);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "ai-tool-call-group",
+      className,
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setFocus(null);
+      },
+      children: [
+        hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": expanded,
+            "aria-controls": listId,
+            onClick: () => setExpanded(!expanded),
+            onFocus: () => setFocus("header"),
+            className: "focus-visible:ring-primary-500 flex max-w-full items-center gap-2 rounded px-1.5 py-1 text-start text-sm text-neutral-600 hover:bg-neutral-100 focus-visible:ring-2 focus-visible:outline-none dark:text-neutral-400 dark:hover:bg-neutral-800",
+            children: [
+              summary.isActive ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXXVUHLQN_cjs.Spinner, { size: "xs" }) }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wrench, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: summary.isActive ? labels.running(summary.total) : labels.used(summary.total) }),
+              summary.awaitingApproval > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunk7E46YDOT_cjs.Badge, { variant: "warning", size: "sm", className: "shrink-0", children: labels.needsApproval(summary.awaitingApproval) }),
+              summary.failed > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunk7E46YDOT_cjs.Badge, { variant: "danger", size: "sm", className: "shrink-0", children: labels.failed(summary.failed) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.ChevronDown,
+                {
+                  "aria-hidden": "true",
+                  className: chunkS5RVSXDV_cjs.cn(
+                    "h-3.5 w-3.5 shrink-0 transition-transform motion-reduce:transition-none",
+                    expanded && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "list",
+            id: listId,
+            onFocus: () => setFocus("rows"),
+            className: chunkS5RVSXDV_cjs.cn(
+              hasHeader && "ms-3 border-s border-neutral-200 ps-2 dark:border-neutral-700"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkIEY3ZJIT_cjs.AnimatedPresence, { initial: false, children: visibleCalls.map((toolCall) => /* @__PURE__ */ jsxRuntime.jsx(
+              ToolCallRow,
+              {
+                toolCall,
+                labels,
+                onApprove,
+                onDeny,
+                onLinkClick
+              },
+              toolCall.id
+            )) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: progressAnnouncement(summary, labels) }, summary.approvalKey) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", className: "sr-only", children: summary.failed > 0 ? labels.announceFailed(summary.failed) : "" })
+      ]
+    }
+  );
+}
 var avatarVariants = classVarianceAuthority.cva(
   "flex shrink-0 items-center justify-center rounded-full",
   {
@@ -1329,6 +1743,54 @@ var ChatBubble = React2__namespace.forwardRef(
   }
 );
 ChatBubble.displayName = "ChatBubble";
+function MessageContentBlocks({
+  message,
+  streaming,
+  onLinkClick,
+  renderTextContent,
+  toolCallGroup
+}) {
+  const nodes = [];
+  let run = [];
+  const flushRun = () => {
+    if (run.length === 0) return;
+    nodes.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MCPToolCallGroup,
+        {
+          toolCalls: run,
+          onLinkClick,
+          ...toolCallGroup
+        },
+        `tool-call-group-${run[0].id}`
+      )
+    );
+    run = [];
+  };
+  message.content.forEach((content, index) => {
+    if (toolCallGroup && content.type === "tool_use" && content.toolCall) {
+      run.push(content.toolCall);
+      return;
+    }
+    flushRun();
+    nodes.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ContentBlock,
+        {
+          content,
+          onLinkClick,
+          messageId: message.id,
+          streaming,
+          role: message.role,
+          renderTextContent
+        },
+        index
+      )
+    );
+  });
+  flushRun();
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nodes });
+}
 function AIMessageDisplay({
   message,
   userName,
@@ -1337,11 +1799,22 @@ function AIMessageDisplay({
   onLinkClick,
   renderTextContent,
   renderMessageFooter,
+  toolCallGroup,
   className
 }) {
   const isStreaming = message.status === "streaming";
   const hasContent = message.content.length > 0;
   const messageFooter = renderMessageFooter?.(message);
+  const contentBlocks = /* @__PURE__ */ jsxRuntime.jsx(
+    MessageContentBlocks,
+    {
+      message,
+      streaming: isStreaming,
+      onLinkClick,
+      renderTextContent,
+      toolCallGroup
+    }
+  );
   const formatTime = (timestamp) => {
     const date = new Date(timestamp);
     return date.toLocaleTimeString(void 0, {
@@ -1355,18 +1828,7 @@ function AIMessageDisplay({
       {
         "data-slot": "ai-message",
         className: chunkS5RVSXDV_cjs.cn(messageVariants({ role: message.role }), className),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 space-y-2", children: message.content.map((content, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          ContentBlock,
-          {
-            content,
-            onLinkClick,
-            messageId: message.id,
-            streaming: isStreaming,
-            role: message.role,
-            renderTextContent
-          },
-          index
-        )) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 space-y-2", children: contentBlocks })
       }
     );
   }
@@ -1391,18 +1853,7 @@ function AIMessageDisplay({
                   "data-slot": "ai-message-bubble",
                   variant: message.role,
                   hasError: message.status === "error",
-                  children: hasContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: message.content.map((content, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                    ContentBlock,
-                    {
-                      content,
-                      onLinkClick,
-                      messageId: message.id,
-                      streaming: isStreaming,
-                      role: message.role,
-                      renderTextContent
-                    },
-                    index
-                  )) }) : isStreaming ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(AITypingIndicator, {}) }) : null
+                  children: hasContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: contentBlocks }) : 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 }),
@@ -1459,6 +1910,7 @@ exports.CloseIcon = CloseIcon;
 exports.CollapsiblePill = CollapsiblePill;
 exports.JumpToBottomButton = JumpToBottomButton;
 exports.MCPToolCallDisplay = MCPToolCallDisplay;
+exports.MCPToolCallGroup = MCPToolCallGroup;
 exports.MessageAvatar = MessageAvatar;
 exports.RefreshIcon = RefreshIcon;
 exports.ResourceLink = ResourceLink;
@@ -1466,6 +1918,7 @@ exports.SendIcon = SendIcon;
 exports.SparklesIcon = SparklesIcon;
 exports.SpinnerIcon = SpinnerIcon;
 exports.ToolStatusIcon = ToolStatusIcon;
+exports.defaultMCPToolCallGroupLabels = defaultMCPToolCallGroupLabels;
 exports.getToolIcon = getToolIcon;
-//# sourceMappingURL=chunk-O2EAHOXM.cjs.map
-//# sourceMappingURL=chunk-O2EAHOXM.cjs.map
+//# sourceMappingURL=chunk-G56OUIGH.cjs.map
+//# sourceMappingURL=chunk-G56OUIGH.cjs.map