@inkeep/agents-ui 0.15.29 → 0.16.0

package/dist/styled/components/message.js

@@ -1,20 +1,21 @@
 "use client";
-import { jsx as e, jsxs as i, Fragment as oe } from "react/jsx-runtime";
-import { useBaseEvents as se } from "../../primitives/providers/base-events-provider.js";
-import { useInkeepConfig as ie } from "../../primitives/providers/config-provider.js";
-import { useMessage as le } from "../../primitives/providers/message-provider.js";
-import { EmbeddedChatPrimitiveMarkdown as pe, PrimitiveMessagePart as S } from "../../primitives/components/embedded-chat.js";
-import { useChat as ce } from "../../primitives/components/embedded-chat/chat-provider.js";
-import { merge as de } from "merge-anything";
-import { cn as T } from "../utils.js";
-import { markdownStyles as ue } from "./ui/markdown-styles.js";
-import { useStreamProcessor as me } from "../../primitives/components/embedded-chat/use-stream-processor.js";
-import { DataSummaryGroup as he } from "./data-summary-group.js";
-import { useState as j, useRef as D, useEffect as $, useMemo as L, useCallback as P } from "react";
-import { DynamicComponent as R, MessageLoading as fe } from "./embedded-chat.js";
-import { Library as xe, ComponentIcon as ge, Hammer as ye, ChevronDown as we, Check as F, X as ve, XCircle as K, CheckCircle as W, Clock as be, Loader2 as Ce, Circle as ke } from "lucide-react";
-import { button as X } from "./ui/recipes/button.js";
-const Ne = {
+import { jsx as e, jsxs as o, Fragment as ie } from "react/jsx-runtime";
+import { useBaseEvents as le } from "../../primitives/providers/base-events-provider.js";
+import { useInkeepConfig as de } from "../../primitives/providers/config-provider.js";
+import { useMessage as pe } from "../../primitives/providers/message-provider.js";
+import { EmbeddedChatPrimitiveMarkdown as ce, PrimitiveMessagePart as D } from "../../primitives/components/embedded-chat.js";
+import { useChat as me } from "../../primitives/components/embedded-chat/chat-provider.js";
+import { isCitationArtifact as ue } from "../../primitives/utils/misc.js";
+import { merge as he } from "merge-anything";
+import { cn as y } from "../utils.js";
+import { markdownStyles as xe } from "./ui/markdown-styles.js";
+import { useStreamProcessor as fe } from "../../primitives/components/embedded-chat/use-stream-processor.js";
+import { DataSummaryGroup as ge } from "./data-summary-group.js";
+import { useState as L, useRef as A, useEffect as $, useMemo as E, useCallback as P } from "react";
+import { DynamicComponent as M, MessageLoading as ye } from "./embedded-chat.js";
+import { Hammer as be, ChevronDown as X, Check as F, X as we, Library as ke, ComponentIcon as Ne, XCircle as ve, TriangleAlert as Ce, CheckCircle as K, Clock as Se, Loader2 as De, Circle as Te } from "lucide-react";
+import { button as W } from "./ui/recipes/button.js";
+const Ae = {
   "input-streaming": "Pending",
   "input-available": "Running",
   "approval-requested": "Awaiting Approval",
@@ -23,312 +24,385 @@ const Ne = {
   "output-error": "Error",
   "output-denied": "Denied"
 };
-function Se(a) {
-  if (!a || typeof a != "object") return !1;
-  const r = a;
-  return typeof r.type == "string" && r.type.startsWith("tool-");
+function Ee(t) {
+  if (!t || typeof t != "object") return !1;
+  const a = t;
+  return typeof a.type == "string" && a.type.startsWith("tool-");
 }
-const Te = (a) => {
-  if (!a || typeof a != "object" || !("status" in a)) return;
-  const r = a.status;
-  return typeof r == "string" ? r : void 0;
-}, De = () => /* @__PURE__ */ e("div", { className: "flex space-x-1", children: [0, 1, 2].map((a) => /* @__PURE__ */ e(
+const Pe = (t) => {
+  if (!t || typeof t != "object" || !("status" in t)) return;
+  const a = t.status;
+  return typeof a == "string" ? a : void 0;
+}, Le = () => /* @__PURE__ */ e("div", { className: "flex space-x-1", children: [0, 1, 2].map((t) => /* @__PURE__ */ e(
   "span",
   {
     className: "animate-bounce-dot opacity-30",
     style: {
-      animationDelay: `${a * 0.2}s`
+      animationDelay: `${t * 0.2}s`
     },
     children: "."
   },
-  a
-)) }), G = ({ name: a, Icon: r, props: n, componentType: l }) => /* @__PURE__ */ i("div", { className: "border rounded-lg bg-gray-50 dark:bg-gray-dark-800 mb-3", children: [
-  /* @__PURE__ */ i("div", { className: "flex justify-between px-4 py-2 text-xs", children: [
-    /* @__PURE__ */ i("div", { className: "font-medium flex items-center gap-2", children: [
-      /* @__PURE__ */ e(r, { className: "w-3 h-3 text-gray-600 dark:text-white-alpha-600" }),
-      /* @__PURE__ */ e("span", { children: a })
+  t
+)) }), G = ({ name: t, Icon: a, props: i, componentType: s }) => /* @__PURE__ */ o("div", { className: "border rounded-lg bg-gray-50 dark:bg-gray-dark-800 mb-3", children: [
+  /* @__PURE__ */ o("div", { className: "flex justify-between px-4 py-2 text-xs", children: [
+    /* @__PURE__ */ o("div", { className: "font-medium flex items-center gap-2", children: [
+      /* @__PURE__ */ e(a, { className: "w-3 h-3 text-gray-600 dark:text-white-alpha-600" }),
+      /* @__PURE__ */ e("span", { children: t })
     ] }),
-    /* @__PURE__ */ e("div", { className: "flex items-center px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-200 dark:bg-white-alpha-200 font-medium text-gray-700 dark:text-white-alpha-700 font-mono", children: l })
+    /* @__PURE__ */ e("div", { className: "flex items-center px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-200 dark:bg-white-alpha-200 font-medium text-gray-700 dark:text-white-alpha-700 font-mono", children: s })
   ] }),
-  /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 font-mono px-4 py-2", children: JSON.stringify(n, null, 2) })
-] }), Le = ({ name: a, props: r }) => /* @__PURE__ */ e(G, { name: a, Icon: ge, props: r, componentType: "component" }), Pe = ({ name: a, props: r }) => /* @__PURE__ */ e(G, { name: a, Icon: xe, props: r, componentType: "artifact" }), Ee = ({
-  tool: a,
-  componentDef: r,
-  renderText: n,
-  approvalId: l,
-  messagePartsLength: h,
-  setApprovalDelayPending: o,
-  addToolApprovalResponse: s,
-  sendMessage: c,
-  conversationId: d
+  /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 font-mono px-4 py-2", children: JSON.stringify(i, null, 2) })
+] }), je = ({ name: t, props: a }) => /* @__PURE__ */ e(G, { name: t, Icon: Ne, props: a, componentType: "component" }), Ie = ({ name: t, props: a }) => /* @__PURE__ */ e(G, { name: t, Icon: ke, props: a, componentType: "artifact" }), _e = ({
+  tool: t,
+  componentDef: a,
+  renderText: i,
+  approvalId: s,
+  messagePartsLength: u,
+  setApprovalDelayPending: n,
+  addToolApprovalResponse: c,
+  sendMessage: d,
+  conversationId: f
 }) => {
-  const f = D(c);
-  f.current = c;
-  const x = D(s);
-  x.current = s;
-  const u = D(o);
-  u.current = o;
-  const v = P(
-    async (A = !0) => {
-      l && (u.current({ partCount: h }), x.current({ id: l, approved: A }), await f.current(void 0, { body: { conversationId: d } }));
+  const l = A(d);
+  l.current = d;
+  const m = A(c);
+  m.current = c;
+  const p = A(n);
+  p.current = n;
+  const h = P(
+    async (j = !0) => {
+      s && (p.current({ partCount: u }), m.current({ id: s, approved: j }), await l.current(void 0, { body: { conversationId: f } }));
     },
-    [l, h, d]
-  ), g = L(() => ({ tool: a, approve: v, renderMarkdown: n }), [a]);
-  return /* @__PURE__ */ e(r ? R : Ae, { name: a.type, props: g, componentDef: r });
-}, Ae = ({ props: a, isDebug: r = !1 }) => {
-  const { tool: n, approve: l } = a, h = n.type, o = h.startsWith("tool-") ? h.slice(5) : h, s = n.state, c = n.approval?.id, d = !!c, f = s === "approval-requested", x = Te(n.output), [u, v] = j(d || r), g = s ? Ne[s] ?? s : "tool";
+    [s, u, f]
+  ), v = E(() => ({ tool: t, approve: h, renderMarkdown: i }), [t]);
+  return /* @__PURE__ */ e(a ? M : Me, { name: t.type, props: v, componentDef: a });
+};
+function H(t) {
+  return t === null ? /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-white-alpha-500 font-mono font-medium text-1xs", children: "null" }) : t === void 0 ? /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-white-alpha-400 italic text-xs font-medium", children: "undefined" }) : typeof t == "boolean" ? /* @__PURE__ */ e(
+    "span",
+    {
+      className: y(
+        "inline-flex font-mono font-semibold items-center px-1 py-0.5 text-1xs rounded-md border",
+        t ? "bg-inkeep-expanded-primary-50 border-inkeep-expanded-primary-200 text-inkeep-expanded-primary-600 dark:bg-inkeep-expanded-primary-950 dark:border-inkeep-expanded-primary-600 dark:text-inkeep-expanded-primary-200" : "bg-gray-100 dark:bg-white-alpha-50 text-gray-700 dark:text-white-alpha-700"
+      ),
+      children: t ? "true" : "false"
+    }
+  ) : typeof t == "number" ? /* @__PURE__ */ e("span", { className: "tabular-nums font-medium text-inkeep-expanded-primary-600 dark:text-inkeep-expanded-primary-200", children: t.toLocaleString() }) : typeof t == "string" ? /* @__PURE__ */ e("span", { className: "text-gray-800 dark:text-white-alpha-800 break-words", children: t }) : /* @__PURE__ */ e("span", { children: String(t) });
+}
+const J = ({
+  name: t,
+  value: a,
+  isArrayIndex: i,
+  depth: s = 0
+}) => {
+  const [u, n] = L(s < 1), c = a !== null && typeof a == "object" && !Array.isArray(a), d = Array.isArray(a);
+  if (!(c || d))
+    return /* @__PURE__ */ o("div", { className: "flex items-baseline gap-2 py-1 text-xs", children: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: y(
+            "font-medium shrink-0",
+            i ? "text-gray-300 dark:text-white-alpha-300" : "text-gray-500 dark:text-white-alpha-500"
+          ),
+          children: i ? "—" : t
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: "min-w-0", children: H(a) })
+    ] });
+  const l = d ? a.map((p, h) => [String(h), p]) : Object.entries(a);
+  return l.length === 0 ? /* @__PURE__ */ o("div", { className: "flex items-baseline gap-2 py-1 text-xs", children: [
+    /* @__PURE__ */ e("span", { className: "font-medium text-gray-500 dark:text-white-alpha-500 shrink-0", children: t }),
+    /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-white-alpha-400 italic", children: d ? "empty list" : "empty" })
+  ] }) : /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        onClick: (p) => {
+          p.stopPropagation(), n(!u);
+        },
+        className: "flex items-center gap-1.5 py-1 text-xs hover:bg-gray-50 dark:hover:bg-white-alpha-50 -mx-1.5 px-1.5 rounded transition-colors w-full text-left",
+        children: [
+          /* @__PURE__ */ e(
+            X,
+            {
+              className: y(
+                "h-3.5 w-3.5 text-gray-400 dark:text-white-alpha-400 shrink-0 transition-transform",
+                !u && "-rotate-90"
+              )
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "font-medium text-gray-500 dark:text-white-alpha-500", children: t }),
+          !u && /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-white-alpha-400 text-1xs ml-1", children: d ? `${l.length} item${l.length !== 1 ? "s" : ""}` : `${l.length} field${l.length !== 1 ? "s" : ""}` })
+        ]
+      }
+    ),
+    u && /* @__PURE__ */ e("div", { className: "border-l-2 border-gray-200 dark:border-white-alpha-200 ml-1.5 pl-3", children: l.map(([p, h]) => /* @__PURE__ */ e(J, { name: p, value: h, isArrayIndex: d, depth: s + 1 }, p)) })
+  ] });
+}, $e = ({ value: t }) => {
+  if (t == null || typeof t != "object")
+    return /* @__PURE__ */ e("span", { className: "text-xs", children: H(t) });
+  const a = Array.isArray(t) ? t.map((i, s) => [String(s), i]) : Object.entries(t);
+  return a.length === 0 ? /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-white-alpha-400 italic", children: "No arguments" }) : /* @__PURE__ */ e("div", { className: "space-y-1", children: a.map(([i, s]) => /* @__PURE__ */ e(J, { name: i, value: s, isArrayIndex: Array.isArray(t) }, i)) });
+}, Me = ({ props: t }) => {
+  const { tool: a, approve: i } = t, s = a.type, u = s.startsWith("tool-") ? s.slice(5) : s, n = a.state, c = a.approval?.id, d = !!c, f = n === "approval-requested", l = Pe(a.output), [m, p] = L(d), h = n ? Ae[n] ?? n : "tool";
   return $(() => {
-    f && v(!0);
-  }, [f]), /* @__PURE__ */ i("div", { className: "border rounded-lg mb-3 overflow-hidden", children: [
-    (!d || r) && /* @__PURE__ */ i(
+    f && p(!0);
+  }, [f]), /* @__PURE__ */ o("div", { className: "border rounded-lg mb-3 overflow-hidden", children: [
+    /* @__PURE__ */ o(
       "button",
       {
         type: "button",
-        className: "inline-flex items-center group gap-2 text-xs text-gray-700 dark:text-white-alpha-700 hover:text-gray-800 dark:hover:text-white-alpha-800 transition-colors cursor-pointer w-full justify-between px-4 py-2",
-        onClick: () => v(!u),
-        "data-expanded": u,
+        className: "inline-flex items-center group gap-2 text-xs text-gray-700 dark:text-white-alpha-700 hover:text-gray-800 dark:hover:text-white-alpha-800 transition-colors cursor-pointer w-full justify-between px-4 py-2 data-[expanded=true]:border-b",
+        onClick: () => p(!m),
+        "aria-expanded": m,
+        "data-expanded": m,
         children: [
-          /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ i("div", { className: "font-medium flex items-center gap-2", children: [
-            /* @__PURE__ */ e(ye, { className: "w-3 h-3 text-gray-600 dark:text-white-alpha-600" }),
-            /* @__PURE__ */ e("span", { children: o })
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ o("div", { className: "font-medium flex items-center gap-2", children: [
+            /* @__PURE__ */ e(be, { className: "w-3 h-3 text-gray-600 dark:text-white-alpha-600" }),
+            /* @__PURE__ */ e("span", { children: u })
           ] }) }),
-          /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-100 dark:bg-white-alpha-100 font-medium text-gray-700 dark:text-white-alpha-700 font-mono", children: [
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-100 dark:bg-white-alpha-100 font-medium text-gray-700 dark:text-white-alpha-700 font-mono", children: [
               (() => {
-                switch (s) {
+                switch (n) {
                   case "input-streaming":
-                    return /* @__PURE__ */ e(ke, { className: "w-3 h-3" });
+                    return /* @__PURE__ */ e(Te, { className: "w-3 h-3" });
                   case "input-available":
-                    return /* @__PURE__ */ e(Ce, { className: "w-3 h-3 animate-spin" });
+                    return /* @__PURE__ */ e(De, { className: "w-3 h-3 animate-spin" });
                   case "approval-requested":
-                    return /* @__PURE__ */ e(be, { className: "w-3 h-3" });
+                    return /* @__PURE__ */ e(Se, { className: "w-3 h-3" });
                   case "approval-responded":
-                    return /* @__PURE__ */ e(W, { className: "w-3 h-3" });
+                    return /* @__PURE__ */ e(K, { className: "w-3 h-3" });
                   case "output-available":
-                    return /* @__PURE__ */ e(W, { className: "w-3 h-3" });
-                  case "output-error":
                     return /* @__PURE__ */ e(K, { className: "w-3 h-3" });
+                  case "output-error":
+                    return /* @__PURE__ */ e(Ce, { className: "w-3 h-3" });
                   case "output-denied":
-                    return /* @__PURE__ */ e(K, { className: "w-3 h-3" });
+                    return /* @__PURE__ */ e(ve, { className: "w-3 h-3" });
                   default:
                     return null;
                 }
               })(),
-              g
+              h
             ] }),
-            /* @__PURE__ */ e(we, { className: "w-3 h-3 text-gray-500 dark:text-white-alpha-500 transition-all duration-200 transform rotate-0 group-data-[expanded=true]:rotate-180" })
+            /* @__PURE__ */ e(X, { className: "w-3.5 h-3.5 text-gray-500 dark:text-white-alpha-500 transition-all duration-200 transform rotate-0 group-data-[expanded=true]:rotate-180" })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ o(
       "div",
       {
-        "data-expanded": u,
-        className: T(
-          "relative",
-          'before:content-[""] before:absolute before:inset-x-0 before:-top-px before:h-3 before:pointer-events-none before:z-10',
-          'after:content-[""] after:absolute after:inset-x-0 after:bottom-0 after:h-3 after:pointer-events-none after:z-10',
-          "before:bg-[linear-gradient(white,_transparent)] after:bg-[linear-gradient(transparent,_white)]",
-          "dark:before:bg-[linear-gradient(var(--ikp-color-gray-dark-950),_transparent)] dark:after:bg-[linear-gradient(transparent,_var(--ikp-color-gray-dark-950))]",
-          "data-[expanded=false]:before:opacity-0 data-[expanded=false]:after:opacity-0"
+        "data-expanded": m,
+        className: y(
+          "overflow-hidden transition-all duration-300 ease-in-out data-[expanded=true]:opacity-100 data-[expanded=false]:max-h-0 data-[expanded=false]:opacity-0 max-w-full"
         ),
-        children: /* @__PURE__ */ i(
-          "div",
-          {
-            "data-expanded": u,
-            className: T(
-              "px-4 data-[expanded=true]:pb-3 [scrollbar-width:thin] overflow-hidden transition-all duration-300 ease-in-out data-[expanded=true]:opacity-100 data-[expanded=false]:max-h-0 data-[expanded=false]:opacity-0 max-w-full",
-              d ? "" : "data-[expanded=true]:max-h-48 data-[expanded=true]:overflow-y-auto"
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              "data-expanded": m,
+              className: y(
+                "relative",
+                'before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-3 before:pointer-events-none before:z-10',
+                'after:content-[""] after:absolute after:inset-x-0 after:bottom-0 after:h-3 after:pointer-events-none after:z-10',
+                "before:bg-[linear-gradient(white,_transparent)] after:bg-[linear-gradient(transparent,_white)]",
+                "dark:before:bg-[linear-gradient(var(--ikp-color-gray-dark-950),_transparent)] dark:after:bg-[linear-gradient(transparent,_var(--ikp-color-gray-dark-950))]",
+                "data-[expanded=false]:before:opacity-0 data-[expanded=false]:after:opacity-0"
+              ),
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  "data-expanded": m,
+                  className: y(
+                    "[scrollbar-width:thin] px-4",
+                    "data-[expanded=true]:max-h-48 data-[expanded=true]:overflow-y-auto"
+                  ),
+                  children: a.input != null && /* @__PURE__ */ e("div", { className: "text-xs py-2", children: /* @__PURE__ */ e($e, { value: a.input }) })
+                }
+              )
+            }
+          ),
+          f && c && /* @__PURE__ */ o("div", { className: "flex justify-end gap-2 pt-1 pb-3 px-4", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: y(
+                  W({ size: "xs", variant: "outline" }),
+                  "px-2 py-1 rounded-md text-xs text-gray-700 dark:text-white-alpha-700"
+                ),
+                onClick: () => i(!1),
+                children: "Deny"
+              }
             ),
-            children: [
-              n.input != null && /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 font-mono py-2", children: JSON.stringify(n.input, null, 2) }),
-              !r && d && /* @__PURE__ */ i("div", { className: "whitespace-pre-wrap text-sm text-gray-700 dark:text-white-alpha-700 py-2", children: [
-                "Approval is needed to run ",
-                /* @__PURE__ */ e("strong", { children: o }),
-                "."
-              ] }),
-              f && c && /* @__PURE__ */ i("div", { className: "flex justify-end gap-2 pt-1", children: [
-                /* @__PURE__ */ e(
-                  "button",
-                  {
-                    type: "button",
-                    className: T(
-                      X({ size: "xs", variant: "outline" }),
-                      "px-2 py-1 rounded-md text-xs text-gray-700 dark:text-white-alpha-700"
-                    ),
-                    onClick: () => l(!1),
-                    children: "Deny"
-                  }
+            /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                className: y(
+                  W({ size: "xs", variant: "primaryFilled" }),
+                  "px-2 py-1 rounded-md text-xs gap-1"
                 ),
-                /* @__PURE__ */ i(
-                  "button",
-                  {
-                    type: "button",
-                    className: T(
-                      X({ size: "xs", variant: "primaryFilled" }),
-                      "px-2 py-1 rounded-md text-xs gap-1"
-                    ),
-                    onClick: () => l(!0),
-                    children: [
-                      /* @__PURE__ */ e(F, { className: "w-3 h-3" }),
-                      "Approve"
-                    ]
-                  }
-                )
-              ] }),
-              s === "output-available" && n.output != null && !r && /* @__PURE__ */ i("div", { className: "flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize", children: [
-                x === "approved" && /* @__PURE__ */ e(F, { className: "w-3 h-3" }),
-                x
-              ] }),
-              s === "output-denied" && !r && /* @__PURE__ */ i("div", { className: "flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize", children: [
-                /* @__PURE__ */ e(ve, { className: "w-3 h-3" }),
-                g
-              ] }),
-              s === "output-available" && n.output != null && r && /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 font-mono py-2", children: typeof n.output == "string" ? n.output : JSON.stringify(n.output, null, 2) })
-            ]
-          }
-        )
+                onClick: () => i(!0),
+                children: [
+                  /* @__PURE__ */ e(F, { className: "w-3 h-3" }),
+                  "Approve"
+                ]
+              }
+            )
+          ] }),
+          n === "output-available" && l && a.output != null && /* @__PURE__ */ o("div", { className: "flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize pb-3 px-4", children: [
+            l === "approved" && /* @__PURE__ */ e(F, { className: "w-3 h-3" }),
+            l
+          ] }),
+          n === "output-denied" && /* @__PURE__ */ o("div", { className: "flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize pb-3 px-4", children: [
+            /* @__PURE__ */ e(we, { className: "w-3 h-3" }),
+            h
+          ] })
+        ]
       }
     )
   ] });
-}, Xe = ({
-  className: a,
-  componentStyles: r,
-  children: n,
-  isLast: l,
-  ...h
+}, Ze = ({
+  className: t,
+  componentStyles: a,
+  children: i,
+  isLast: s,
+  ...u
 }) => {
-  const { message: o } = le(), { logEvent: s } = se(), { conversationId: c, isStreaming: d, isLoading: f, setError: x, addToolApprovalResponse: u, sendMessage: v } = ce(), {
-    aiChatSettings: { components: g, artifacts: E, headers: A }
-  } = ie(), H = A?.["x-emit-operations"] === "true", O = o.role === "user", V = (d || f) && l && o.role === "assistant", { processedParts: Q, summaryTimings: Y, shouldShowInitialLoading: Z, shouldShowStreamDelayLoading: ee } = me(o.parts, V, x), [k, z] = j(null), [te, _] = j(!1), m = D(null);
+  const { message: n } = pe(), { logEvent: c } = le(), { conversationId: d, isStreaming: f, isLoading: l, setError: m, addToolApprovalResponse: p, sendMessage: h } = me(), {
+    aiChatSettings: { components: v, artifacts: R, headers: j }
+  } = de(), Q = j?.["x-emit-operations"] === "true", O = n.role === "user", Y = (f || l) && s && n.role === "assistant", { processedParts: Z, summaryTimings: ee, shouldShowInitialLoading: te, shouldShowStreamDelayLoading: ae } = fe(n.parts, Y, m), [C, z] = L(null), [re, I] = L(!1), g = A(null);
   $(() => {
-    if (!k) {
-      _(!1), m.current && (clearTimeout(m.current), m.current = null);
+    if (!C) {
+      I(!1), g.current && (clearTimeout(g.current), g.current = null);
       return;
     }
-    return _(!1), m.current && clearTimeout(m.current), m.current = window.setTimeout(() => {
-      _(!0);
+    return I(!1), g.current && clearTimeout(g.current), g.current = window.setTimeout(() => {
+      I(!0);
     }, 1e3), () => {
-      m.current && (clearTimeout(m.current), m.current = null);
+      g.current && (clearTimeout(g.current), g.current = null);
     };
-  }, [k]), $(() => {
-    k && (!l || o.parts.length > k.partCount) && z(null);
-  }, [k, l, o.parts.length]);
-  const q = L(
-    () => o.parts.filter(
-      (t) => t.type === "data-artifact" && t.data?.type?.toLowerCase() === "citation"
-    ),
-    [o.parts]
-  ), J = L(
-    () => de(ue, r ?? {}),
-    [r]
-  ), U = P(
-    (t, p) => {
-      s({
+  }, [C]), $(() => {
+    C && (!s || n.parts.length > C.partCount) && z(null);
+  }, [C, s, n.parts.length]);
+  const q = E(() => n.parts.filter(ue), [n.parts]), U = E(
+    () => he(xe, a ?? {}),
+    [a]
+  ), V = P(
+    (r, x) => {
+      c({
         eventName: "assistant_message_inline_link_opened",
         properties: {
-          title: p?.toString(),
-          url: t
+          title: x?.toString(),
+          url: r
         }
       });
     },
-    [s]
+    [c]
   ), B = P(
-    (t, p) => {
-      s({
+    (r, x) => {
+      c({
         eventName: "assistant_code_block_copied",
         properties: {
-          conversationId: c,
-          language: t,
-          code: p
+          conversationId: d,
+          language: r,
+          code: x
         }
       });
     },
-    [s, c]
-  ), I = P(
-    (t) => /* @__PURE__ */ e(
-      pe,
+    [c, d]
+  ), _ = P(
+    (r) => /* @__PURE__ */ e(
+      ce,
       {
-        text: t,
-        componentStyles: J,
-        onLinkClick: U,
+        text: r,
+        componentStyles: U,
+        onLinkClick: V,
         onCodeCopy: B,
         artifacts: q
       }
     ),
-    [J, U, B, q]
-  ), ae = L(
-    () => T(
+    [U, V, B, q]
+  ), ne = E(
+    () => y(
       "data-[role=user]:whitespace-pre-wrap mb-3 data-[role=user]:mb-0 [&[data-role=user]>p]:mb-0 max-w-full",
-      a
+      t
     ),
-    [a]
-  ), re = !O || o.parts.some((t) => t.type === "text" && t.text?.trim());
-  return /* @__PURE__ */ i(oe, { children: [
-    !re && /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-white-alpha-500", children: "No message content" }),
-    Q.map((t, p) => {
-      const b = {
-        "data-role": o.role,
-        "data-type": t?.type === "data-component" ? t.data.type : t?.type,
-        ...h,
-        className: ae
+    [t]
+  ), se = !O || n.parts.some(
+    (r) => r.type === "text" && r.text?.trim()
+  );
+  return /* @__PURE__ */ o(ie, { children: [
+    !se && /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-white-alpha-500", children: "No message content" }),
+    Z.map((r, x) => {
+      const k = {
+        "data-role": n.role,
+        "data-type": r?.type === "data-component" ? r.data.type : r?.type,
+        ...u,
+        className: ne
       };
-      switch (t?.type) {
+      switch (r?.type) {
         case "text":
-          return /* @__PURE__ */ e(S, { ...b, children: O ? t.text : I(t.text || "") }, p);
+          return /* @__PURE__ */ e(D, { ...k, children: O ? r.text : _(r.text || "") }, x);
         case "data-component": {
-          const { type: y } = t.data;
-          switch (y) {
+          const { type: w } = r.data;
+          switch (w) {
             case "text":
-              return /* @__PURE__ */ e("div", { ...b, children: I(t.data.text || "") }, p);
+              return /* @__PURE__ */ e("div", { ...k, children: _(r.data.text || "") }, x);
             default: {
-              const C = t.data, { name: w, props: M } = C, N = g?.[w];
-              return /* @__PURE__ */ e(S, { ...b, children: /* @__PURE__ */ e(N ? R : Le, { name: w, props: M, componentDef: N }) }, `${w}-${p}`);
+              const N = r.data, { name: b, props: T } = N, S = v?.[b];
+              return /* @__PURE__ */ e(D, { ...k, children: /* @__PURE__ */ e(S ? M : je, { name: b, props: T, componentDef: S }) }, `${b}-${x}`);
             }
           }
         }
         case "data-artifact": {
-          const y = t.data, { name: C, type: w, artifactSummary: M } = y, N = E?.[w];
-          return /* @__PURE__ */ e(S, { ...b, children: /* @__PURE__ */ e(N ? R : Pe, { name: w, props: M, componentDef: N }) }, `${C}-${p}`);
+          const w = r.data, { name: N, type: b, artifactSummary: T } = w;
+          if (b === "citation" && !T?.url) return null;
+          const S = R?.[b];
+          return /* @__PURE__ */ e(D, { ...k, children: /* @__PURE__ */ e(S ? M : Ie, { name: b, props: T, componentDef: S }) }, `${N}-${x}`);
         }
         case "summary-group": {
-          const y = Y.get(t.groupKey) || {
+          const w = ee.get(r.groupKey) || {
             isCompleted: !1
           };
-          return /* @__PURE__ */ e(S, { ...b, children: /* @__PURE__ */ e(
-            he,
+          return /* @__PURE__ */ e(D, { ...k, children: /* @__PURE__ */ e(
+            ge,
             {
-              summaries: t.summaries || [],
-              isCompleted: y.isCompleted
+              summaries: r.summaries || [],
+              isCompleted: w.isCompleted
             }
-          ) }, `${t.groupKey}-${p}`);
+          ) }, `${r.groupKey}-${x}`);
         }
         default: {
-          if (!Se(t))
+          if (!Ee(r))
             return null;
-          const y = t, C = t.approval?.id;
-          return H || C ? /* @__PURE__ */ e(S, { ...b, children: /* @__PURE__ */ e(
-            Ee,
+          const w = r, N = r.approval?.id;
+          return Q || N ? /* @__PURE__ */ e(D, { ...k, children: /* @__PURE__ */ e(
+            _e,
             {
-              tool: y,
-              componentDef: g?.IkpTool,
-              renderText: I,
-              approvalId: C,
-              messagePartsLength: o.parts.length,
+              tool: w,
+              componentDef: v?.IkpTool,
+              renderText: _,
+              approvalId: N,
+              messagePartsLength: n.parts.length,
               setApprovalDelayPending: z,
-              addToolApprovalResponse: u,
-              sendMessage: v,
-              conversationId: c
+              addToolApprovalResponse: p,
+              sendMessage: h,
+              conversationId: d
             }
-          ) }, t.toolCallId ?? `${t.type}-${p}`) : null;
+          ) }, r.toolCallId ?? `${r.type}-${x}`) : null;
         }
       }
     }),
-    Z && /* @__PURE__ */ e(fe, {}),
-    (ee || te) && /* @__PURE__ */ e(De, {})
+    te && /* @__PURE__ */ e(ye, {}),
+    (ae || re) && /* @__PURE__ */ e(Le, {})
   ] });
 };
 export {
-  Xe as EmbeddedChatMessagePart
+  Me as DefaultToolComponent,
+  Ze as EmbeddedChatMessagePart
 };