@xpert-ai/chatkit-ui 0.3.5 → 0.3.6

package/dist/index.cjs

@@ -1518,6 +1518,13 @@ var en_US_default = {
       option: "Option",
       other: "Other"
     },
+    knowledgeRetriever: {
+      queryTitle: "Query",
+      resultsTitle: "Retrieved results ({{count}})",
+      rawDataTitle: "Raw data",
+      noResults: "No knowledge results found",
+      scoreLabel: "Score"
+    },
     agentRun: {
       defaultTitle: "Sub-agent",
       inputLabel: "Input",
@@ -1843,6 +1850,13 @@ var zh_CN_default = {
       option: "\u9009\u9879",
       other: "\u5176\u4ED6"
     },
+    knowledgeRetriever: {
+      queryTitle: "\u67E5\u8BE2",
+      resultsTitle: "\u68C0\u7D22\u7ED3\u679C\uFF08{{count}}\uFF09",
+      rawDataTitle: "\u539F\u59CB\u6570\u636E",
+      noResults: "\u672A\u627E\u5230\u77E5\u8BC6\u7ED3\u679C",
+      scoreLabel: "\u5206\u6570"
+    },
     agentRun: {
       defaultTitle: "\u5B50\u667A\u80FD\u4F53",
       inputLabel: "\u8F93\u5165",
@@ -8516,8 +8530,305 @@ function AgentRunGroup({
   ] });
 }
 
-// src/components/thread/messages/web-search-component-renderer.tsx
+// src/i18n/localized-text.ts
+function resolveLocalizedText(value, language) {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed || null;
+  }
+  if (!value || typeof value !== "object") return null;
+  const localized = value;
+  const normalizedLanguage = language.trim();
+  const underscoredLanguage = normalizedLanguage.replace(/-/g, "_");
+  const languagePrefix = normalizedLanguage.split("-")[0];
+  const preferredKeys = normalizedLanguage.startsWith("zh") ? [
+    normalizedLanguage,
+    underscoredLanguage,
+    "zh_Hans",
+    "zh-Hans",
+    "zh_CN",
+    "zh-CN",
+    "zh",
+    "en_US",
+    "en-US",
+    "en"
+  ] : [
+    normalizedLanguage,
+    underscoredLanguage,
+    "en_US",
+    "en-US",
+    "en",
+    languagePrefix,
+    "zh_Hans",
+    "zh-Hans",
+    "zh_CN",
+    "zh-CN",
+    "zh"
+  ];
+  for (const key of preferredKeys) {
+    const candidate = localized[key];
+    if (typeof candidate === "string" && candidate.trim()) {
+      return candidate.trim();
+    }
+  }
+  for (const candidate of Object.values(localized)) {
+    if (typeof candidate === "string" && candidate.trim()) {
+      return candidate.trim();
+    }
+  }
+  return null;
+}
+
+// src/components/thread/messages/knowledge-retriever-component-renderer.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
+var KNOWLEDGE_RETRIEVER_TITLE = "Knowledge Retriever";
+var KNOWLEDGE_METADATA_SKIP_KEYS = /* @__PURE__ */ new Set([
+  "assets",
+  "children",
+  "loc",
+  "relevanceScore",
+  "score"
+]);
+var knowledgeRetrieverComponentRenderer = {
+  id: "knowledge-retriever",
+  presentation: "grouped-step",
+  match: isKnowledgeRetrieverComponent,
+  getTitle: () => KNOWLEDGE_RETRIEVER_TITLE,
+  hasDetails: hasKnowledgeRetrieverDetails,
+  renderDetails: KnowledgeRetrieverDetails
+};
+function normalizeToolToken(value) {
+  if (typeof value !== "string") return null;
+  const normalized = value.trim().toLowerCase().replace(/[\s-]+/g, "_");
+  return normalized || null;
+}
+function isRecord2(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function readString(value) {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  return trimmed || void 0;
+}
+function stringifyValue(value) {
+  if (value === null || value === void 0) return void 0;
+  if (typeof value === "string") return readString(value);
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    const serialized = JSON.stringify(value);
+    return serialized && serialized !== "{}" ? serialized : void 0;
+  } catch {
+    return String(value);
+  }
+}
+function truncateMetadataValue(value) {
+  return value.length > 90 ? `${value.slice(0, 87)}...` : value;
+}
+function formatScore(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value.toFixed(value < 1 ? 3 : 2) : void 0;
+  }
+  return readString(value);
+}
+function getLineRange(metadata) {
+  const loc = metadata.loc;
+  if (!isRecord2(loc)) return void 0;
+  const lines = loc.lines;
+  if (!isRecord2(lines)) return void 0;
+  const from = stringifyValue(lines.from);
+  const to = stringifyValue(lines.to);
+  if (from && to) return `${from}-${to}`;
+  return from ?? to;
+}
+function normalizeMetadataEntries(metadata) {
+  return Object.entries(metadata).flatMap(([key, value]) => {
+    if (KNOWLEDGE_METADATA_SKIP_KEYS.has(key)) return [];
+    const formatted = stringifyValue(value);
+    if (!formatted) return [];
+    return [
+      {
+        key,
+        value: truncateMetadataValue(formatted)
+      }
+    ];
+  });
+}
+function normalizeKnowledgeResult(value, fallbackTitle) {
+  if (!isRecord2(value)) return null;
+  const metadata = isRecord2(value.metadata) ? value.metadata : {};
+  const document2 = isRecord2(value.document) ? value.document : {};
+  const content = readString(value.pageContent);
+  const title = readString(document2.name) ?? readString(metadata.originalFileName) ?? readString(metadata.source) ?? readString(value.id) ?? readString(metadata.chunkId) ?? fallbackTitle;
+  if (!content && Object.keys(metadata).length === 0 && Object.keys(document2).length === 0) {
+    return null;
+  }
+  return {
+    id: readString(value.id) ?? readString(metadata.chunkId),
+    title,
+    url: readString(document2.fileUrl),
+    content,
+    lineRange: getLineRange(metadata),
+    score: formatScore(
+      metadata.relevanceScore ?? metadata.score ?? value.score
+    ),
+    metadata: normalizeMetadataEntries(metadata)
+  };
+}
+function getKnowledgeResults(data) {
+  if (!Array.isArray(data.data)) return [];
+  return data.data.flatMap((item, index) => {
+    const result = normalizeKnowledgeResult(item, `Result ${index + 1}`);
+    return result ? [result] : [];
+  });
+}
+function getRawKnowledgeData(data) {
+  return data.data ?? data.output ?? null;
+}
+function getRetrieverQuery(data, language) {
+  const input = data.input;
+  if (isRecord2(input)) {
+    return readString(input.query) ?? readString(input.input) ?? readString(input.question);
+  }
+  return readString(resolveLocalizedText(data.message, language)) ?? readString(input);
+}
+function hasKnowledgeRetrieverDetails(_content, data) {
+  return isKnowledgeRetrieverComponent(_content, data);
+}
+function isKnowledgeRetrieverComponent(_content, data) {
+  return normalizeToolToken(data.type) === "knowledges";
+}
+function KnowledgeRawDataBlock({ value }) {
+  const { t } = useChatkitTranslation();
+  const detected = detectJsonValue(value);
+  if (detected.kind === "text") {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PlainTextBlock, { value: detected.text });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Tabs, { defaultValue: "tree", className: "min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mb-2 flex min-w-0 items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "min-w-0 truncate text-[11px] text-muted-foreground", children: [
+        t("message.toolGroup.jsonTitle"),
+        " \xB7",
+        " ",
+        getJsonValueSummary(detected.value)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(TabsList, { className: "rounded-md p-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "tree", children: t("message.toolGroup.jsonTree") }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "raw", children: t("message.toolGroup.jsonRaw") })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TabsContent, { value: "tree", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(JsonTreeView, { value: detected.value }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TabsContent, { value: "raw", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RawJsonBlock, { raw: detected.raw }) })
+  ] });
+}
+function KnowledgeRetrieverDetails({
+  data
+}) {
+  const { i18n: i18n2, t } = useChatkitTranslation();
+  const query = getRetrieverQuery(data, i18n2.language);
+  const results = getKnowledgeResults(data);
+  const rawData = getRawKnowledgeData(data);
+  const hasArrayData = Array.isArray(data.data);
+  const hasRawFallback = rawData !== null && rawData !== void 0 && (!hasArrayData || Array.isArray(data.data) && data.data.length > 0 && results.length === 0);
+  const showEmptyState = results.length === 0 && !hasRawFallback && data.status !== "running";
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "min-w-0 space-y-3 px-3 py-2", children: [
+    query ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "min-w-0 space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.knowledgeRetriever.queryTitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "min-w-0 whitespace-pre-wrap wrap-break-word rounded-md bg-muted/40 px-3 py-2 font-mono text-[12px] leading-5 text-foreground/80", children: query })
+    ] }) : null,
+    results.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "min-w-0 space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.knowledgeRetriever.resultsTitle", {
+        count: results.length
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "space-y-2", children: results.map((result, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        KnowledgeResultCard,
+        {
+          result,
+          index
+        },
+        result.id ?? `${result.title}-${index}`
+      )) })
+    ] }) : null,
+    hasRawFallback ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "min-w-0 space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.knowledgeRetriever.rawDataTitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(KnowledgeRawDataBlock, { value: rawData })
+    ] }) : null,
+    showEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "rounded-md border border-dashed border-border/70 px-3 py-4 text-center text-xs text-muted-foreground", children: t("message.knowledgeRetriever.noResults") }) : null
+  ] });
+}
+function KnowledgeResultCard({
+  result,
+  index
+}) {
+  const { t } = useChatkitTranslation();
+  const titleId = `knowledge-result-${index + 1}`;
+  const metadata = [
+    ...result.score ? [
+      {
+        key: t("message.knowledgeRetriever.scoreLabel"),
+        value: result.score
+      }
+    ] : [],
+    ...result.metadata
+  ];
+  const titleClassName = "min-w-0 line-clamp-2 text-sm font-medium leading-5 text-foreground";
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("article", { className: "min-w-0 rounded-md border border-border/60 bg-background/80 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex min-w-0 items-start gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-medium text-muted-foreground", children: index + 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      result.url ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        "a",
+        {
+          id: titleId,
+          href: result.url,
+          target: "_blank",
+          rel: "noreferrer",
+          className: cn(titleClassName, "hover:underline"),
+          children: [
+            result.title,
+            result.lineRange ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "ml-1 text-muted-foreground", children: [
+              "[",
+              result.lineRange,
+              "]"
+            ] }) : null
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { id: titleId, className: titleClassName, children: [
+        result.title,
+        result.lineRange ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "ml-1 text-muted-foreground", children: [
+          "[",
+          result.lineRange,
+          "]"
+        ] }) : null
+      ] }),
+      result.content ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "mt-1 line-clamp-3 whitespace-pre-wrap text-xs leading-5 text-muted-foreground", children: result.content }) : null,
+      metadata.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        "div",
+        {
+          className: "mt-2 flex flex-wrap gap-1.5",
+          "aria-labelledby": titleId,
+          children: metadata.slice(0, 10).map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            "span",
+            {
+              className: "inline-flex min-w-0 max-w-full items-center gap-1 rounded-md bg-muted/50 px-1.5 py-0.5 text-[11px] leading-4 text-muted-foreground",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "shrink-0 font-medium text-foreground/70", children: [
+                  item.key,
+                  ":"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "min-w-0 truncate font-mono", children: item.value })
+              ]
+            },
+            `${item.key}:${item.value}`
+          ))
+        }
+      ) : null
+    ] })
+  ] }) });
+}
+
+// src/components/thread/messages/web-search-component-renderer.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var webSearchComponentRenderer = {
   id: "computer-web-search-sources",
   presentation: "grouped-step",
@@ -8525,7 +8836,7 @@ var webSearchComponentRenderer = {
   hasDetails: hasWebSearchSources,
   renderDetails: WebSearchToolCallOutput
 };
-function normalizeToolToken(value) {
+function normalizeToolToken2(value) {
   if (typeof value !== "string") return null;
   const normalized = value.trim().toLowerCase().replace(/[\s-]+/g, "_");
   return normalized || null;
@@ -8570,9 +8881,9 @@ function hasWebSearchSources(_content, data) {
 }
 function isComputerWebSearchComponent(_content, data) {
   const isComputer = data.category === "Computer";
-  const isWebSearch = normalizeToolToken(data.type) === "web_search";
+  const isWebSearch = normalizeToolToken2(data.type) === "web_search";
   if (!isComputer || !isWebSearch) return false;
-  return normalizeToolToken(data.tool) === "web_search" || getWebSearchSources(data).length > 0;
+  return normalizeToolToken2(data.tool) === "web_search" || getWebSearchSources(data).length > 0;
 }
 function getSourceHost(url) {
   try {
@@ -8587,9 +8898,9 @@ function WebSearchToolCallOutput({
   const { t } = useChatkitTranslation();
   const sources = getWebSearchSources(data);
   if (sources.length === 0 || data.error !== void 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.sourcesTitle") }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "space-y-2", children: sources.map((source, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.sourcesTitle") }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "space-y-2", children: sources.map((source, index) => {
       const sourceHost = getSourceHost(source.url);
       const snippet = source.content ?? source.description;
       const metaParts = [
@@ -8597,13 +8908,13 @@ function WebSearchToolCallOutput({
         source.publishedDate,
         source.author
       ].filter((item) => Boolean(item));
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "div",
         {
           className: "min-w-0 rounded-md border border-border/60 bg-background/80 px-3 py-2",
           children: [
-            metaParts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-1 truncate text-[11px] text-muted-foreground", children: metaParts.join(" / ") }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            metaParts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mb-1 truncate text-[11px] text-muted-foreground", children: metaParts.join(" / ") }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "a",
               {
                 href: source.url,
@@ -8613,7 +8924,7 @@ function WebSearchToolCallOutput({
                 children: source.title
               }
             ),
-            snippet ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "mt-1 line-clamp-3 text-xs leading-5 text-muted-foreground", children: snippet }) : null
+            snippet ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "mt-1 line-clamp-3 text-xs leading-5 text-muted-foreground", children: snippet }) : null
           ]
         },
         `${source.url}-${index}`
@@ -8624,6 +8935,7 @@ function WebSearchToolCallOutput({
 
 // src/components/thread/messages/component-message-renderers.tsx
 var COMPONENT_MESSAGE_RENDERERS = [
+  knowledgeRetrieverComponentRenderer,
   webSearchComponentRenderer
 ];
 function getComponentMessageRenderer(content, data) {
@@ -8642,58 +8954,7 @@ function hasComponentMessageRendererDetails(renderer, content, data) {
 // src/components/thread/messages/tool-component-group.tsx
 var React29 = __toESM(require("react"), 1);
 var import_lucide_react17 = require("lucide-react");
-
-// src/i18n/localized-text.ts
-function resolveLocalizedText(value, language) {
-  if (typeof value === "string") {
-    const trimmed = value.trim();
-    return trimmed || null;
-  }
-  if (!value || typeof value !== "object") return null;
-  const localized = value;
-  const normalizedLanguage = language.trim();
-  const underscoredLanguage = normalizedLanguage.replace(/-/g, "_");
-  const languagePrefix = normalizedLanguage.split("-")[0];
-  const preferredKeys = normalizedLanguage.startsWith("zh") ? [
-    normalizedLanguage,
-    underscoredLanguage,
-    "zh_Hans",
-    "zh-Hans",
-    "zh_CN",
-    "zh-CN",
-    "zh",
-    "en_US",
-    "en-US",
-    "en"
-  ] : [
-    normalizedLanguage,
-    underscoredLanguage,
-    "en_US",
-    "en-US",
-    "en",
-    languagePrefix,
-    "zh_Hans",
-    "zh-Hans",
-    "zh_CN",
-    "zh-CN",
-    "zh"
-  ];
-  for (const key of preferredKeys) {
-    const candidate = localized[key];
-    if (typeof candidate === "string" && candidate.trim()) {
-      return candidate.trim();
-    }
-  }
-  for (const candidate of Object.values(localized)) {
-    if (typeof candidate === "string" && candidate.trim()) {
-      return candidate.trim();
-    }
-  }
-  return null;
-}
-
-// src/components/thread/messages/tool-component-group.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var toolStatusConfig = {
   success: {
     iconClass: "border-green-500 text-green-700",
@@ -8865,13 +9126,13 @@ function isSkippableToolGroupSeparator(content) {
   }
   return false;
 }
-function normalizeToolToken2(value) {
+function normalizeToolToken3(value) {
   if (typeof value !== "string") return null;
   const normalized = value.trim().toLowerCase().replace(/[\s-]+/g, "_");
   return normalized || null;
 }
 function classifyToolToken(value) {
-  const normalized = normalizeToolToken2(
+  const normalized = normalizeToolToken3(
     typeof value === "string" ? value : resolveLocalizedText(value, "en-US")
   );
   if (!normalized) return null;
@@ -8910,8 +9171,8 @@ function getToolActivityLabel(content, language, statusOverride) {
   if (status === "running") {
     return message ?? title ?? tool ?? type ?? "Tool";
   }
-  const titleToken = normalizeToolToken2(title);
-  const genericTitle = titleToken !== null && [tool, type].map((candidate) => normalizeToolToken2(candidate)).some((candidate) => candidate === titleToken);
+  const titleToken = normalizeToolToken3(title);
+  const genericTitle = titleToken !== null && [tool, type].map((candidate) => normalizeToolToken3(candidate)).some((candidate) => candidate === titleToken);
   if (message && (!title || genericTitle)) {
     return message;
   }
@@ -8995,7 +9256,7 @@ function createToolsetAvatarUrl(toolsetId, apiUrl) {
   }
 }
 function shouldUseToolsetAvatar(toolset) {
-  const normalized = normalizeToolToken2(toolset);
+  const normalized = normalizeToolToken3(toolset);
   return normalized === "mcp" || normalized === "openapi";
 }
 function useToolsetAvatar(toolsetId, enabled, apiUrl) {
@@ -9033,7 +9294,7 @@ function ToolAvatarIcon({
   className
 }) {
   if (avatar.url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "img",
       {
         alt: "",
@@ -9046,7 +9307,7 @@ function ToolAvatarIcon({
   }
   const emoji = unicodeFromUnified2(avatar.emoji?.unified);
   if (emoji) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "span",
       {
         "aria-hidden": "true",
@@ -9061,7 +9322,7 @@ function ToolAvatarIcon({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_lucide_react17.CircleHelp,
     {
       className,
@@ -9071,7 +9332,7 @@ function ToolAvatarIcon({
   );
 }
 function getKnownToolsetIcon(toolset) {
-  const normalized = normalizeToolToken2(toolset);
+  const normalized = normalizeToolToken3(toolset);
   if (!normalized) return null;
   switch (normalized) {
     case "project":
@@ -9094,7 +9355,7 @@ function getKnownToolsetIcon(toolset) {
   }
 }
 function getStepTypeIcon(type) {
-  const normalized = normalizeToolToken2(type);
+  const normalized = normalizeToolToken3(type);
   if (!normalized) return null;
   switch (normalized) {
     case "file":
@@ -9129,7 +9390,7 @@ function ToolStepIcon({
     setFailedIconUrl(null);
   }, [iconUrl]);
   if (avatar) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       ToolAvatarIcon,
       {
         avatar,
@@ -9139,7 +9400,7 @@ function ToolStepIcon({
     );
   }
   if (iconUrl && failedIconUrl !== iconUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "img",
       {
         alt: "",
@@ -9153,7 +9414,7 @@ function ToolStepIcon({
   }
   const TypeIcon = getStepTypeIcon(data.type);
   if (TypeIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       TypeIcon,
       {
         className,
@@ -9164,7 +9425,7 @@ function ToolStepIcon({
   }
   const ToolsetIcon = getKnownToolsetIcon(data.toolset);
   if (ToolsetIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       ToolsetIcon,
       {
         className,
@@ -9174,7 +9435,7 @@ function ToolStepIcon({
     );
   }
   if (usesToolsetAvatar) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       import_lucide_react17.CircleHelp,
       {
         className,
@@ -9183,7 +9444,7 @@ function ToolStepIcon({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_lucide_react17.CircleHelp,
     {
       className,
@@ -9214,7 +9475,7 @@ function ToolCallCopyButton({ value }) {
     }).catch(() => void 0);
   }, [clearResetTimeout, value]);
   const label = isCopied ? t("message.toolGroup.copied") : t("message.toolGroup.copy");
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "button",
     {
       type: "button",
@@ -9222,7 +9483,7 @@ function ToolCallCopyButton({ value }) {
       "aria-label": label,
       title: label,
       onClick: handleCopy,
-      children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Check, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Copy, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+      children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react17.Check, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react17.Copy, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
     }
   );
 }
@@ -9233,28 +9494,28 @@ function ToolCallValueBlock({
   const { t } = useChatkitTranslation();
   const detected = detectJsonValue(value);
   if (detected.kind === "text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "min-w-0 space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToolCallCopyButton, { value: detected.text }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PlainTextBlock, { value: detected.text, destructive })
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0 space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToolCallCopyButton, { value: detected.text }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PlainTextBlock, { value: detected.text, destructive })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Tabs, { defaultValue: "tree", className: "min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mb-2 flex min-w-0 items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "min-w-0 truncate text-[11px] text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Tabs, { defaultValue: "tree", className: "min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mb-2 flex min-w-0 items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "min-w-0 truncate text-[11px] text-muted-foreground", children: [
         t("message.toolGroup.jsonTitle"),
         " \xB7 ",
         getJsonValueSummary(detected.value)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToolCallCopyButton, { value: detected.raw }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(TabsList, { className: "rounded-md p-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "tree", children: t("message.toolGroup.jsonTree") }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "raw", children: t("message.toolGroup.jsonRaw") })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToolCallCopyButton, { value: detected.raw }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(TabsList, { className: "rounded-md p-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "tree", children: t("message.toolGroup.jsonTree") }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "raw", children: t("message.toolGroup.jsonRaw") })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabsContent, { value: "tree", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(JsonTreeView, { value: detected.value }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabsContent, { value: "raw", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RawJsonBlock, { raw: detected.raw }) })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TabsContent, { value: "tree", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(JsonTreeView, { value: detected.value }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TabsContent, { value: "raw", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RawJsonBlock, { raw: detected.raw }) })
   ] });
 }
 function DefaultToolCallOutput({ data }) {
@@ -9262,15 +9523,15 @@ function DefaultToolCallOutput({ data }) {
   const output = data.output ?? null;
   const error = data.error ?? null;
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-[11px] font-medium text-destructive", children: t("message.toolGroup.errorTitle") }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToolCallValueBlock, { value: error, destructive: true })
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-[11px] font-medium text-destructive", children: t("message.toolGroup.errorTitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToolCallValueBlock, { value: error, destructive: true })
     ] });
   }
   if (output === null) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.outputTitle") }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToolCallValueBlock, { value: output })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.outputTitle") }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToolCallValueBlock, { value: output })
   ] });
 }
 function ToolCallDetails({ content }) {
@@ -9280,19 +9541,19 @@ function ToolCallDetails({ content }) {
   const hasCustomDetails = data.error === void 0 && hasComponentMessageRendererDetails(renderer, content, data);
   const CustomDetailsRenderer = hasCustomDetails ? renderer?.renderDetails : void 0;
   if (CustomDetailsRenderer) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ml-6 mt-1 max-h-60 overflow-auto rounded-md bg-muted/30 text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomDetailsRenderer, { content, data }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "ml-6 mt-1 max-h-60 overflow-auto rounded-md bg-muted/30 text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomDetailsRenderer, { content, data }) });
   }
   const OutputRenderer = getToolCallOutputRenderer(data);
   const hasInput = data.input !== void 0 && data.input !== null;
   const hasOutput = data.error !== void 0 || data.output !== void 0;
   if (!hasInput && !hasOutput) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ml-6 mt-1 max-h-60 overflow-auto rounded-md bg-muted/30 px-3 py-2 text-xs text-muted-foreground", children: [
-    hasInput && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.inputTitle") }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToolCallValueBlock, { value: data.input })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ml-6 mt-1 max-h-60 overflow-auto rounded-md bg-muted/30 px-3 py-2 text-xs text-muted-foreground", children: [
+    hasInput && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.inputTitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToolCallValueBlock, { value: data.input })
     ] }),
-    hasInput && hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-2" }) : null,
-    hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OutputRenderer, { content, data }) : null
+    hasInput && hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-2" }) : null,
+    hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(OutputRenderer, { content, data }) : null
   ] });
 }
 function areToolCallRowPropsEqual(previous, next) {
@@ -9308,9 +9569,9 @@ function ToolCallRowContent({
   const data = getToolStepData(content);
   const status = getEffectiveToolStepStatus(data, isThreadRunning);
   const hasError = status === "fail" || Boolean(data.error);
-  const label = getToolActivityLabel(content, i18n2.language, status);
   const detailsId = React29.useId();
   const renderer = getComponentMessageRenderer(content, data);
+  const label = renderer?.getTitle?.(content, data, i18n2.language) ?? getToolActivityLabel(content, i18n2.language, status);
   const hasCustomDetails = data.error === void 0 && hasComponentMessageRendererDetails(renderer, content, data);
   const hasDetails = data.input !== void 0 || data.error !== void 0 || data.output !== void 0 || hasCustomDetails;
   const fallbackEndedAt = useFrozenTimestamp(
@@ -9326,8 +9587,8 @@ function ToolCallRowContent({
       setIsExpanded(true);
     }
   }, [data.output, status]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { className: "min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { className: "ck-tool-call-row-enter min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "button",
       {
         type: "button",
@@ -9344,7 +9605,7 @@ function ToolCallRowContent({
           if (hasDetails) setIsExpanded((prev) => !prev);
         },
         children: [
-          status ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          status ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             ToolStepIcon,
             {
               data,
@@ -9355,8 +9616,8 @@ function ToolCallRowContent({
                 hasError ? "text-destructive" : "text-muted-foreground"
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "span",
             {
               className: cn(
@@ -9367,8 +9628,8 @@ function ToolCallRowContent({
               children: label
             }
           ),
-          durationLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/80", children: durationLabel }) : null,
-          hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          durationLabel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/80", children: durationLabel }) : null,
+          hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             import_lucide_react17.ChevronRight,
             {
               "aria-hidden": "true",
@@ -9381,7 +9642,7 @@ function ToolCallRowContent({
         ]
       }
     ),
-    hasDetails && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: detailsId, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToolCallDetails, { content }) }) : null
+    hasDetails && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { id: detailsId, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToolCallDetails, { content }) }) : null
   ] });
 }
 var ToolCallRow = React29.memo(ToolCallRowContent, areToolCallRowPropsEqual);
@@ -9412,9 +9673,9 @@ function ToolComponentGroup({
   const StatusIcon = config.icon;
   React29.useEffect(() => {
     setIsExpanded(!hasFollowingItem);
-  }, [hasFollowingItem, items.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "px-1 py-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  }, [hasFollowingItem]);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "px-1 py-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "button",
       {
         type: "button",
@@ -9423,8 +9684,8 @@ function ToolComponentGroup({
         "aria-controls": contentId,
         onClick: () => setIsExpanded((prev) => !prev),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               StatusIcon,
               {
                 className: cn(
@@ -9433,9 +9694,9 @@ function ToolComponentGroup({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: summary })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate", children: summary })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             import_lucide_react17.ChevronRight,
             {
               "aria-hidden": "true",
@@ -9448,7 +9709,7 @@ function ToolComponentGroup({
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { id: contentId, className: "mt-2 space-y-1.5 overflow-y-auto pr-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { id: contentId, className: "mt-2 space-y-1.5 overflow-y-auto pr-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       ToolCallRow,
       {
         content: item,
@@ -9465,11 +9726,11 @@ function ToolComponentGroup({
 var React30 = require("react");
 var import_chatkit_types6 = require("@xpert-ai/chatkit-types");
 var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-function isRecord2(value) {
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function isRecord3(value) {
   return !!value && typeof value === "object" && !Array.isArray(value);
 }
-function readString(record, keys) {
+function readString2(record, keys) {
   for (const key of keys) {
     const value = record[key];
     if (typeof value === "string" && value.trim()) {
@@ -9479,12 +9740,12 @@ function readString(record, keys) {
   return null;
 }
 function getToolCallId(value) {
-  if (!isRecord2(value)) return null;
-  return readString(value, ["id"]);
+  if (!isRecord3(value)) return null;
+  return readString2(value, ["id"]);
 }
 function getToolCallName(value) {
-  if (!isRecord2(value)) return null;
-  return readString(value, ["name"]);
+  if (!isRecord3(value)) return null;
+  return readString2(value, ["name"]);
 }
 function pushClientToolCallsFromRecord(record, calls) {
   const clientToolCalls = record.clientToolCalls;
@@ -9508,16 +9769,16 @@ function findRequestUserInputClientToolCallById(messages, id) {
   ) ?? null;
 }
 function normalizeAnswer(value) {
-  if (!isRecord2(value)) return null;
-  const id = readString(value, ["id"]);
-  const question = readString(value, ["question"]);
-  const answerValue = readString(value, ["value"]);
-  const type = readString(value, ["type"]);
+  if (!isRecord3(value)) return null;
+  const id = readString2(value, ["id"]);
+  const question = readString2(value, ["question"]);
+  const answerValue = readString2(value, ["value"]);
+  const type = readString2(value, ["type"]);
   if (!id || !question || !answerValue || type !== "option" && type !== "other") {
     return null;
   }
-  const label = readString(value, ["label"]);
-  const description = readString(value, ["description"]);
+  const label = readString2(value, ["label"]);
+  const description = readString2(value, ["description"]);
   return {
     id,
     question,
@@ -9536,7 +9797,7 @@ function parseResultOutput(output) {
       return null;
     }
   }
-  if (!isRecord2(result) || !Array.isArray(result.answers)) {
+  if (!isRecord3(result) || !Array.isArray(result.answers)) {
     return null;
   }
   const hasExplicitType = result.type === import_chatkit_types6.REQUEST_USER_INPUT_RESULT_TYPE;
@@ -9550,7 +9811,7 @@ function parseResultOutput(output) {
   };
 }
 function getRequestUserInputResultCardData(content, messages) {
-  const data = isRecord2(content.data) ? content.data : null;
+  const data = isRecord3(content.data) ? content.data : null;
   if (data?.status !== "success") {
     return null;
   }
@@ -9577,7 +9838,7 @@ function RequestUserInputResultCard({
   className
 }) {
   const { t } = useChatkitTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "section",
     {
       "aria-label": t("message.requestUserInputResult.title"),
@@ -9586,23 +9847,23 @@ function RequestUserInputResultCard({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mb-2 flex items-center gap-2 text-sm font-semibold text-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.CheckCircle2, { className: "h-4 w-4 text-primary" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: t("message.requestUserInputResult.title") })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mb-2 flex items-center gap-2 text-sm font-semibold text-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react18.CheckCircle2, { className: "h-4 w-4 text-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: t("message.requestUserInputResult.title") })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "space-y-2", children: result.answers.map((answer, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "space-y-2", children: result.answers.map((answer, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "div",
           {
             className: "rounded-md bg-background/70 px-2.5 py-2",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs font-medium leading-5 text-muted-foreground", children: answer.question }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-0.5 flex min-w-0 flex-wrap items-center gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "min-w-0 wrap-break-word text-sm font-semibold text-foreground", children: answer.label ?? answer.value }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground", children: t(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-xs font-medium leading-5 text-muted-foreground", children: answer.question }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mt-0.5 flex min-w-0 flex-wrap items-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "min-w-0 wrap-break-word text-sm font-semibold text-foreground", children: answer.label ?? answer.value }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground", children: t(
                   answer.type === "other" ? "message.requestUserInputResult.other" : "message.requestUserInputResult.option"
                 ) })
               ] }),
-              answer.description ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: answer.description }) : null
+              answer.description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: answer.description }) : null
             ]
           },
           `${answer.id}-${index}`
@@ -9614,18 +9875,18 @@ function RequestUserInputResultCard({
 
 // src/components/thread/messages/widget.tsx
 var import_a2ui_react = require("@xpert-ai/a2ui-react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function WidgetMessage({ messageId, data }) {
   const widgets = Array.isArray(data.widgets) ? data.widgets : [];
   if (widgets.length === 0) return null;
   const baseSurfaceId = `widget-${messageId}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "space-y-3", children: widgets.map((widget, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "space-y-3", children: widgets.map((widget, index) => {
     const config = widget?.config;
     if (!config || typeof config !== "object") {
       return null;
     }
     const surfaceId = widgets.length > 1 ? `${baseSurfaceId}-${index}` : baseSurfaceId;
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       import_a2ui_react.SurfaceRenderer,
       {
         surfaceId,
@@ -9637,7 +9898,7 @@ function WidgetMessage({ messageId, data }) {
 }
 
 // src/components/thread/messages/ai.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var assistantMessageStackClassName = "space-y-3 in-data-[density=compact]:space-y-2 in-data-[density=spacious]:space-y-4";
 function isTextContent3(content) {
   return content.type === "text";
@@ -9671,11 +9932,11 @@ function formatDisplayValue3(value) {
 function ReasoningBlock({ reasoning }) {
   const blocks = reasoning.filter((item) => item.text?.trim());
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       className: "rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground",
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
     },
     item.id ?? `reasoning-${index}`
   )) });
@@ -9683,20 +9944,20 @@ function ReasoningBlock({ reasoning }) {
 function ImageBlock({ content }) {
   const imageUrl = typeof content.image_url === "string" ? content.image_url : typeof content.image_url?.url === "string" ? content.image_url.url : null;
   if (!imageUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Card, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CardTitle, { className: "text-sm", children: "Image" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: safeJson3(content) })
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CardTitle, { className: "text-sm", children: "Image" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: safeJson3(content) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
 }
 function MemoryBlock({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CardTitle, { className: "text-sm", children: "Memory" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Badge, { variant: "secondary", children: "Memory" })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CardTitle, { className: "text-sm", children: "Memory" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Badge, { variant: "secondary", children: "Memory" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson3(content.data ?? []) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson3(content.data ?? []) }) })
   ] });
 }
 function parseStepDate2(value) {
@@ -9796,24 +10057,24 @@ function ComponentBlock({ content }) {
   }, [isExpanded, output, status]);
   const config = status ? toolStatusConfig[status] : null;
   const StatusIcon = config?.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
-        status && StatusIcon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CardTitle, { className: "text-sm truncate", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
+        status && StatusIcon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CardTitle, { className: "text-sm truncate", children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
-        durationLabel && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground tabular-nums", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Clock3, { className: "h-3 w-3" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: durationLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
+        durationLabel && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground tabular-nums", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react19.Clock3, { className: "h-3 w-3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: durationLabel })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "button",
           {
             className: "text-muted-foreground hover:text-foreground transition-colors",
             "aria-label": isExpanded ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               import_lucide_react19.ChevronDown,
               {
                 className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-180")
@@ -9823,35 +10084,35 @@ function ComponentBlock({ content }) {
         )
       ] })
     ] }),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
-      data.input && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue3(data.input) }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue3(error) }) : hasOutput && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue3(fallback) })
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
+      data.input && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue3(data.input) }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue3(error) }) : hasOutput && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue3(fallback) })
     ] })
   ] });
 }
 function UnknownBlock({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CardTitle, { className: "text-sm", children: "Assistant Content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Badge, { variant: "outline", children: content.type ?? "unknown" })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CardTitle, { className: "text-sm", children: "Assistant Content" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Badge, { variant: "outline", children: content.type ?? "unknown" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("pre", { className: "whitespace-pre-wrap break-words", children: safeJson3(content) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("pre", { className: "whitespace-pre-wrap break-words", children: safeJson3(content) }) })
   ] });
 }
 function renderContentItem(content, index, message, lookupMessages, options) {
   const messageId = message.id;
   const textClassName = options?.isAgentOutput ? "text-sm [&_.markdown-content_p]:!leading-6" : void 0;
   if (typeof content === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: textClassName, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MarkdownText, { children: content }) }, `text-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: textClassName, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MarkdownText, { children: content }) }, `text-${index}`);
   }
   if (isTextContent3(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: textClassName, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: textClassName, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
   }
   if (isReasoningContent3(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
   }
   if (isImageContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ImageBlock, { content }) }, content.id ?? `image-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ImageBlock, { content }) }, content.id ?? `image-${index}`);
   }
   if (isComponentContent3(content)) {
     const requestUserInputResult = getRequestUserInputResultCardData(
@@ -9859,13 +10120,13 @@ function renderContentItem(content, index, message, lookupMessages, options) {
       lookupMessages
     );
     if (requestUserInputResult) {
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RequestUserInputResultCard, { result: requestUserInputResult }) }, content.id ?? `request-user-input-result-${index}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RequestUserInputResultCard, { result: requestUserInputResult }) }, content.id ?? `request-user-input-result-${index}`);
     }
     if (isWidgetComponent2(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
     }
     if (getComponentMessagePresentation(content, getToolStepData(content)) === "grouped-step") {
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         ToolComponentGroup,
         {
           items: [content],
@@ -9876,15 +10137,15 @@ function renderContentItem(content, index, message, lookupMessages, options) {
         }
       ) }, content.id ?? `component-group-${index}`);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
   }
   if (isMemoryContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
   }
   if (isAgentEventContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AgentEventRow, { content }) }, content.id ?? `agent-event-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AgentEventRow, { content }) }, content.id ?? `agent-event-${index}`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
 }
 function renderContentUnit(unit, message, lookupMessages, hasFollowingItem, options) {
   if (unit.type === "item") {
@@ -9895,22 +10156,16 @@ function renderContentUnit(unit, message, lookupMessages, hasFollowingItem, opti
       isAgentOutput: options?.isAgentOutput
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    ToolComponentGroup,
     {
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        ToolComponentGroup,
-        {
-          items: unit.items,
-          hasFollowingItem,
-          isThreadRunning: options?.isThreadRunning,
-          organizationId: options?.organizationId,
-          apiUrl: options?.apiUrl
-        }
-      )
-    },
-    `tool-group-${unit.startIndex}-${unit.items[0]?.id ?? "tool"}-${unit.items.length}`
-  );
+      items: unit.items,
+      hasFollowingItem,
+      isThreadRunning: options?.isThreadRunning,
+      organizationId: options?.organizationId,
+      apiUrl: options?.apiUrl
+    }
+  ) }, `tool-group-${unit.startIndex}-${unit.items[0]?.id ?? "tool"}`);
 }
 function renderEntryBatch(entries, message, lookupMessages, hasFollowingItem, options) {
   if (entries.length === 0) return null;
@@ -9938,7 +10193,7 @@ function renderAssistantRenderUnits(units, message, lookupMessages, options, dep
     const batch = entryBatch;
     entryBatch = [];
     rendered.push(
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(React31.Fragment, { children: renderEntryBatch(batch, message, lookupMessages, hasFollowingItem, {
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(React31.Fragment, { children: renderEntryBatch(batch, message, lookupMessages, hasFollowingItem, {
         ...options,
         isAgentOutput: depth > 0
       }) }, `entries-${batch[0]?.order ?? rendered.length}`)
@@ -9955,7 +10210,7 @@ function renderAssistantRenderUnits(units, message, lookupMessages, options, dep
     }
     flushEntries(true);
     rendered.push(
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         AgentRunGroup,
         {
           node: unit.node,
@@ -9980,7 +10235,7 @@ function renderContent(message, lookupMessages, options) {
     message
   );
   if (renderTree.hasAgentRuns) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: assistantMessageStackClassName, children: renderAssistantRenderUnits(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: assistantMessageStackClassName, children: renderAssistantRenderUnits(
       renderTree.units,
       message,
       lookupMessages,
@@ -9990,13 +10245,13 @@ function renderContent(message, lookupMessages, options) {
   const content = message.content;
   if (typeof content === "string") {
     if (!content.trim()) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MarkdownText, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MarkdownText, { children: content });
   }
   if (!Array.isArray(content) || content.length === 0) return null;
   const renderUnits = buildToolComponentRenderUnits(content, {
     shouldGroupComponent: (item) => getRequestUserInputResultCardData(item, lookupMessages) === null
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "space-y-3", children: renderUnits.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "space-y-3", children: renderUnits.map(
     (unit, index) => renderContentUnit(
       unit,
       message,
@@ -10016,7 +10271,7 @@ function AssistantStreamingIndicator({
     thinking: t("message.thinking"),
     answering: t("message.answering")
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: cn(
@@ -10024,18 +10279,18 @@ function AssistantStreamingIndicator({
         className
       ),
       children: [
-        status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
-        status === "thinking" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
+        status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react19.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+        status === "thinking" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
         ] }),
-        status === "answering" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
+        status === "answering" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: labelMap[status] })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: labelMap[status] })
       ]
     }
   );
@@ -10064,42 +10319,42 @@ function AssistantMessage({
     organizationId,
     apiUrl
   });
-  const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ReasoningBlock, { reasoning: rootReasoning ?? [] }) : null;
+  const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ReasoningBlock, { reasoning: rootReasoning ?? [] }) : null;
   if (!hasContent && !hasReasoning && !resolvedStreamingStatus) return null;
   const streamingClass = isStreaming ? "streaming-active" : "";
   if (!hasContent && !hasReasoning && resolvedStreamingStatus) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
   }
   if (hasContent && hasReasoning) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
         Tabs,
         {
           defaultValue: message.status === "reasoning" ? "reasoning" : "answer",
           className: "w-full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(TabsList, { className: "", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(TabsList, { className: "", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
           ]
         }
       ),
-      resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+      resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
     hasReasoning ? reasoningNode : answerNode,
-    resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+    resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
   ] });
 }
 
 // src/components/thread/MessageActions.tsx
 var React32 = __toESM(require("react"), 1);
 var import_lucide_react20 = require("lucide-react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function MessageActions({
   content,
   isAssistant = false,
@@ -10121,7 +10376,7 @@ function MessageActions({
   if (isStreaming) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       className: cn(
@@ -10129,7 +10384,7 @@ function MessageActions({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "button",
           {
             type: "button",
@@ -10139,17 +10394,17 @@ function MessageActions({
               copied && "text-green-500"
             ),
             title: copied ? t("messageActions.copied") : t("messageActions.copy"),
-            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.Copy, { size: 14 })
+            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react20.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react20.Copy, { size: 14 })
           }
         ),
-        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "button",
           {
             type: "button",
             onClick: onRetry,
             className: "p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
             title: t("messageActions.regenerate"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.RefreshCw, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react20.RefreshCw, { size: 14 })
           }
         )
       ]
@@ -10160,18 +10415,18 @@ function MessageActions({
 // src/components/thread/StartScreen.tsx
 var React33 = require("react");
 var import_lucide_react21 = require("lucide-react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function getIconComponent2(icon) {
   const iconMap = {
-    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.HelpCircle, { size: 20 }),
-    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.Lightbulb, { size: 20 }),
-    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.Sparkles, { size: 20 }),
-    "write": /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.Pencil, { size: 20 }),
-    "search": /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.Search, { size: 20 }),
-    "globe": /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.Globe, { size: 20 }),
-    "book-open": /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.BookOpen, { size: 20 }),
-    "compass": /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.Compass, { size: 20 }),
-    "bolt": /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.Zap, { size: 20 })
+    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.HelpCircle, { size: 20 }),
+    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.Lightbulb, { size: 20 }),
+    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.Sparkles, { size: 20 }),
+    "write": /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.Pencil, { size: 20 }),
+    "search": /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.Search, { size: 20 }),
+    "globe": /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.Globe, { size: 20 }),
+    "book-open": /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.BookOpen, { size: 20 }),
+    "compass": /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.Compass, { size: 20 }),
+    "bolt": /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.Zap, { size: 20 })
   };
   return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
 }
@@ -10179,9 +10434,9 @@ function StartScreen({ startScreen, onPromptClick, className }) {
   const { t } = useChatkitTranslation();
   const greeting = startScreen?.greeting ?? t("startScreen.greeting");
   const prompts = startScreen?.prompts ?? [];
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
-    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "button",
       {
         type: "button",
@@ -10192,8 +10447,8 @@ function StartScreen({ startScreen, onPromptClick, className }) {
           "focus:outline-none focus:ring-2 focus:ring-primary/20"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
         ]
       },
       `prompt-${index}`
@@ -10392,7 +10647,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
 var React35 = __toESM(require("react"), 1);
 
 // src/components/ui/progress-circle.tsx
-var import_jsx_runtime39 = (
+var import_jsx_runtime40 = (
   // biome-ignore lint/a11y/useFocusableInteractive: false positive (progress + progressbar are not focusable interactives)
   // biome-ignore lint/nursery/useAriaPropsSupportedByRole: biome rule at odds with mdn docs (presumed nursary bug with rule)
   require("react/jsx-runtime")
@@ -10416,7 +10671,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
     fill: "none",
     strokeWidth
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "svg",
     {
       role: "progressbar",
@@ -10427,8 +10682,8 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
       "aria-valuemax": 100,
       ...restSvgProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "circle",
           {
             ...commonParams,
@@ -10446,7 +10701,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
 };
 
 // src/components/thread/context-usage-indicator.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var kNumberFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 1
@@ -10588,8 +10843,8 @@ function ContextUsageIndicator({
   });
   const usageLabelWithSuffix = usageLabel.endsWith(":") ? usageLabel : `${usageLabel}:`;
   const progressClassName = percent >= 90 ? "text-destructive" : percent >= 75 ? "text-amber-500" : "text-primary dark:text-zinc-300";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "button",
       {
         type: "button",
@@ -10598,13 +10853,13 @@ function ContextUsageIndicator({
           className
         ),
         "aria-label": `${usageLabelWithSuffix} ${usageFullLabel}. ${usageTokensLabel}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
     ] })
   ] });
 }
@@ -10637,10 +10892,10 @@ var import_lucide_react23 = require("lucide-react");
 
 // src/components/ui/input.tsx
 var React37 = __toESM(require("react"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Input = React37.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "input",
       {
         ref,
@@ -10660,17 +10915,17 @@ Input.displayName = "Input";
 var React38 = require("react");
 var import_radix_ui2 = require("radix-ui");
 var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui2.Select.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui2.Select.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_radix_ui2.Select.Group,
     {
       "data-slot": "select-group",
@@ -10682,7 +10937,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui2.Select.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui2.Select.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -10690,7 +10945,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     import_radix_ui2.Select.Trigger,
     {
       "data-slot": "select-trigger",
@@ -10702,7 +10957,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui2.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react22.ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui2.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react22.ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })
       ]
     }
   );
@@ -10714,7 +10969,7 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui2.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui2.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     import_radix_ui2.Select.Content,
     {
       "data-slot": "select-content",
@@ -10724,8 +10979,8 @@ function SelectContent({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectScrollUpButton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           import_radix_ui2.Select.Viewport,
           {
             "data-position": position,
@@ -10736,7 +10991,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectScrollDownButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -10746,7 +11001,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     import_radix_ui2.Select.Item,
     {
       "data-slot": "select-item",
@@ -10756,8 +11011,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui2.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react22.CheckIcon, { className: "pointer-events-none" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui2.Select.ItemText, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui2.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react22.CheckIcon, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui2.Select.ItemText, { children })
       ]
     }
   );
@@ -10766,7 +11021,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_radix_ui2.Select.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -10775,7 +11030,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         import_lucide_react22.ChevronUpIcon,
         {}
       )
@@ -10786,7 +11041,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_radix_ui2.Select.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -10795,7 +11050,7 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         import_lucide_react22.ChevronDownIcon,
         {}
       )
@@ -10806,7 +11061,7 @@ function SelectScrollDownButton({
 // src/components/ui/slider.tsx
 var React39 = __toESM(require("react"), 1);
 var import_radix_ui3 = require("radix-ui");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Slider({
   className,
   defaultValue,
@@ -10819,7 +11074,7 @@ function Slider({
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     import_radix_ui3.Slider.Root,
     {
       "data-slot": "slider",
@@ -10833,12 +11088,12 @@ function Slider({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           import_radix_ui3.Slider.Track,
           {
             "data-slot": "slider-track",
             className: "relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1",
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               import_radix_ui3.Slider.Range,
               {
                 "data-slot": "slider-range",
@@ -10847,7 +11102,7 @@ function Slider({
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           import_radix_ui3.Slider.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -10869,7 +11124,7 @@ var import_radix_ui5 = require("radix-ui");
 var React40 = require("react");
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_radix_ui4 = require("radix-ui");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority2.cva)(
   "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -10892,7 +11147,7 @@ var toggleVariants = (0, import_class_variance_authority2.cva)(
 );
 
 // src/components/ui/toggle-group.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var ToggleGroupContext = React41.createContext({
   size: "default",
   variant: "default",
@@ -10908,7 +11163,7 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     import_radix_ui5.ToggleGroup.Root,
     {
       "data-slot": "toggle-group",
@@ -10922,7 +11177,7 @@ function ToggleGroup({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         ToggleGroupContext.Provider,
         {
           value: { variant, size: size2, spacing, orientation },
@@ -10940,7 +11195,7 @@ function ToggleGroupItem({
   ...props
 }) {
   const context = React41.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     import_radix_ui5.ToggleGroup.Item,
     {
       "data-slot": "toggle-group-item",
@@ -11176,7 +11431,7 @@ var React42 = require("react");
 var import_chatkit_types9 = require("@xpert-ai/chatkit-types");
 
 // src/components/pet/PetPreview.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function escapeCssUrl(value) {
   return value.replace(/["\\]/g, "\\$&");
 }
@@ -11184,7 +11439,7 @@ function PetPreview({ src, label, className }) {
   const scale = 0.13;
   const width = import_chatkit_types9.petSpriteAtlas.cellWidth;
   const height = import_chatkit_types9.petSpriteAtlas.cellHeight;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "span",
     {
       className: cn(
@@ -11193,7 +11448,7 @@ function PetPreview({ src, label, className }) {
       ),
       "aria-hidden": "true",
       title: label,
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "span",
         {
           className: "absolute left-1/2 top-1/2 block",
@@ -11215,7 +11470,7 @@ function PetPreview({ src, label, className }) {
 }
 
 // src/components/settings/SettingsSheet.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var CHARACTER_TYPES2 = [
   "builtin",
   "atlas"
@@ -11255,23 +11510,23 @@ function SettingsSheet({
       defaultValue: selectedBuiltinPet.label
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Sheet, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(SheetContent, { side: "right", className: "w-[min(92vw,26rem)] overflow-y-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SheetHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react23.Settings, { size: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SheetTitle, { children: t("settings.title") })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Sheet, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(SheetContent, { side: "right", className: "w-[min(92vw,26rem)] overflow-y-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SheetHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react23.Settings, { size: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SheetTitle, { children: t("settings.title") })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("form", { className: "mt-6 space-y-5", onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("section", { className: "space-y-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react23.PawPrint, { size: 15 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h3", { className: "text-sm font-semibold", children: t("pet.settings.title") })
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("form", { className: "mt-6 space-y-5", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("section", { className: "space-y-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react23.PawPrint, { size: 15 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "text-sm font-semibold", children: t("pet.settings.title") })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "block text-sm font-medium", children: t("pet.settings.enabled") }),
-            petRequired && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: t("pet.settings.requiredHint") })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "block text-sm font-medium", children: t("pet.settings.enabled") }),
+            petRequired && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: t("pet.settings.requiredHint") })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "button",
             {
               type: "button",
@@ -11284,7 +11539,7 @@ function SettingsSheet({
                 draft.enabled ? "bg-primary" : "bg-muted-foreground/20",
                 petRequired ? "cursor-not-allowed opacity-70" : ""
               ].join(" "),
-              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "span",
                 {
                   className: [
@@ -11297,9 +11552,9 @@ function SettingsSheet({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { id: "chatkit-pet-type-label", className: "text-sm font-medium", children: t("pet.settings.characterType") }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { id: "chatkit-pet-type-label", className: "text-sm font-medium", children: t("pet.settings.characterType") }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           ToggleGroup,
           {
             id: "chatkit-pet-type",
@@ -11314,7 +11569,7 @@ function SettingsSheet({
             variant: "outline",
             spacing: 2,
             className: "!w-full",
-            children: CHARACTER_TYPES2.map((type) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            children: CHARACTER_TYPES2.map((type) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               ToggleGroupItem,
               {
                 value: type,
@@ -11326,8 +11581,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      draft.characterType === "builtin" && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      draft.characterType === "builtin" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "label",
           {
             htmlFor: "chatkit-pet-builtin",
@@ -11335,7 +11590,7 @@ function SettingsSheet({
             children: t("pet.settings.builtin")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           Select,
           {
             value: selectedBuiltinPet.id,
@@ -11346,26 +11601,26 @@ function SettingsSheet({
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 SelectTrigger,
                 {
                   id: "chatkit-pet-builtin",
                   className: "min-h-12 w-full px-3 py-2",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectValue, { placeholder: selectedBuiltinPetLabel })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: selectedBuiltinPetLabel })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectContent, { className: "w-[var(--radix-select-trigger-width)]", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectGroup, { children: INCLUDED_PET_OPTIONS.map((pet) => {
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContent, { className: "w-[var(--radix-select-trigger-width)]", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectGroup, { children: INCLUDED_PET_OPTIONS.map((pet) => {
                 const label = t(`pet.settings.builtins.${pet.id}`, {
                   defaultValue: pet.label
                 });
-                return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   SelectItem,
                   {
                     value: pet.id,
                     className: "min-h-10 py-1.5 pl-2 pr-8",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PetPreview, { src: pet.previewSrc, label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "min-w-0 truncate", children: label })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PetPreview, { src: pet.previewSrc, label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "min-w-0 truncate", children: label })
                     ] })
                   },
                   pet.id
@@ -11375,8 +11630,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      draft.characterType === "atlas" && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      draft.characterType === "atlas" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "label",
           {
             className: "text-sm font-medium",
@@ -11384,7 +11639,7 @@ function SettingsSheet({
             children: t("pet.settings.atlasUrl")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           Input,
           {
             id: "chatkit-pet-atlas",
@@ -11394,15 +11649,15 @@ function SettingsSheet({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { className: "text-sm font-medium", htmlFor: "chatkit-pet-scale", children: t("pet.settings.scale") }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { className: "text-sm font-medium", htmlFor: "chatkit-pet-scale", children: t("pet.settings.scale") }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
             draft.scale.toFixed(2),
             "x"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           Slider,
           {
             id: "chatkit-pet-scale",
@@ -11416,8 +11671,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "input",
           {
             type: "checkbox",
@@ -11428,8 +11683,8 @@ function SettingsSheet({
         ),
         t("pet.settings.draggable")
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "input",
           {
             type: "checkbox",
@@ -11440,8 +11695,8 @@ function SettingsSheet({
         ),
         t("pet.settings.persistPosition")
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           Button,
           {
             type: "button",
@@ -11450,7 +11705,7 @@ function SettingsSheet({
             children: t("pet.settings.cancel")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { type: "submit", children: t("pet.settings.save") })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { type: "submit", children: t("pet.settings.save") })
       ] })
     ] })
   ] }) });
@@ -11956,7 +12211,7 @@ function findDomPointForComposerOffset(root, offset) {
 }
 
 // src/components/chat.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var import_meta2 = {};
 var defaultApiUrl2 = import_meta2.env.VITE_XPERTAI_API_URL;
 var COMPOSER_INPUT_MAX_HEIGHT = 128;
@@ -12090,7 +12345,7 @@ function ReferenceChip({
   const metaLine = getReferenceMetaLine(reference);
   const isComposer = variant === "composer";
   const Icon = reference.type === "quote" ? import_lucide_react24.Quote : reference.type === "image" ? import_lucide_react24.ImageIcon : import_lucide_react24.FileText;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
       className: cn(
@@ -12099,7 +12354,7 @@ function ReferenceChip({
       ),
       title: getReferenceTitle(reference),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           Icon,
           {
             size: isComposer ? 14 : 12,
@@ -12109,8 +12364,8 @@ function ReferenceChip({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "div",
             {
               className: cn(
@@ -12120,7 +12375,7 @@ function ReferenceChip({
               children: getReferenceLabel(reference)
             }
           ),
-          metaLine && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          metaLine && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "div",
             {
               className: cn(
@@ -12131,7 +12386,7 @@ function ReferenceChip({
             }
           )
         ] }),
-        onRemove && removeLabel && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        onRemove && removeLabel && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "button",
           {
             type: "button",
@@ -12142,7 +12397,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.X, { size: 12 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.X, { size: 12 })
           }
         )
       ]
@@ -13748,7 +14003,7 @@ function Chat({
     fallbackTitle: t("history.threadFallback")
   });
   const assistantTitle = assistantName || resolvedTitle;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
       ref: viewportRef,
@@ -13758,10 +14013,10 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 ChatkitAvatar,
                 {
                   avatar: assistantAvatar,
@@ -13769,10 +14024,10 @@ function Chat({
                   label: assistantTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "truncate", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "truncate", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 "h2",
                 {
                   className: "text-lg font-semibold truncate",
@@ -13780,12 +14035,12 @@ function Chat({
                   children: assistantTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Tooltip, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Tooltip, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 "button",
                 {
                   type: "button",
@@ -13796,14 +14051,14 @@ function Chat({
                     "transition-colors duration-150"
                   ),
                   "aria-label": t("settings.open"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.Settings, { size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.Settings, { size: 16 })
                 }
               ) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TooltipContent, { side: "bottom", children: t("settings.open") })
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipContent, { side: "bottom", children: t("settings.open") })
             ] }),
-            history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Tooltip, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Tooltip, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   "button",
                   {
                     type: "button",
@@ -13816,12 +14071,12 @@ function Chat({
                       "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
                     ),
                     "aria-label": t("history.newThread"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.Pencil, { size: 16 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.Pencil, { size: 16 })
                   }
                 ) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TooltipContent, { side: "bottom", children: t("history.newThread") })
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipContent, { side: "bottom", children: t("history.newThread") })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 HistorySidebar,
                 {
                   threads,
@@ -13836,18 +14091,18 @@ function Chat({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1 p-4", children: [
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
-          historyError && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
-          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
-          isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
-          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex-1 p-4", children: [
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
+          historyError && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
+          isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
+          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             StartScreen,
             {
               startScreen,
               onPromptClick: handlePromptClick
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-4", children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "space-y-4", children: [
             messages.map((message, index) => {
               const messageType = String(message.type);
               const isAssistantMessage = messageType === "assistant" || messageType === "ai";
@@ -13880,7 +14135,7 @@ function Chat({
               if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanRuntimeCapabilityOptions.length === 0 && humanReferences.length === 0) {
                 return null;
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 "div",
                 {
                   className: cn(
@@ -13888,8 +14143,8 @@ function Chat({
                     message.type === "human" ? "justify-end" : "justify-start -ml-1"
                     // AI messages: slightly closer to left
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       "div",
                       {
                         ...canQuoteMessage ? {
@@ -13901,7 +14156,7 @@ function Chat({
                           message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
                           // AI messages: use chat-specific foreground color
                         ),
-                        children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                        children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                           AssistantMessage,
                           {
                             message: {
@@ -13920,25 +14175,25 @@ function Chat({
                             organizationId: stream.organizationId,
                             apiUrl: stream.apiUrl
                           }
-                        ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-                          message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+                          message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                             "span",
                             {
                               className: "inline-flex max-w-full items-center gap-1 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs font-medium text-primary-foreground",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                                   RuntimeCapabilityIcon,
                                   {
                                     option,
                                     variant: "chip"
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "max-w-[9rem] truncate", children: option.label })
+                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "max-w-[9rem] truncate", children: option.label })
                               ]
                             },
                             `${option.type}:${option.id}`
                           )) }),
-                          message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                          message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             ReferenceChip,
                             {
                               reference,
@@ -13946,29 +14201,29 @@ function Chat({
                             },
                             getReferenceKey(reference)
                           )) }),
-                          message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+                          message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                             "div",
                             {
                               className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.FileText, { size: 12 }),
-                                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
+                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.FileText, { size: 12 }),
+                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
                               ]
                             },
                             fileIndex
                           )) }),
-                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             "p",
                             {
                               className: "wrap-break-word text-sm leading-relaxed",
                               children: formatMessageContent(part)
                             },
                             `${part.type}-${partIndex}`
-                          )) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                          )) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       MessageActions,
                       {
                         content: messageContent,
@@ -14004,7 +14259,7 @@ function Chat({
                 stream.isLoading,
                 { now: streamingNow }
               );
-              return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 AssistantStreamingIndicator,
                 {
                   status: fallbackStreamingStatus ?? "loading"
@@ -14013,7 +14268,7 @@ function Chat({
             })()
           ] })
         ] }),
-        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           Button,
           {
             type: "button",
@@ -14026,10 +14281,10 @@ function Chat({
             onClick: () => scrollToBottom(true, true),
             "aria-label": t("chat.scrollToBottom"),
             title: t("chat.scrollToBottom"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.ArrowDown, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.ArrowDown, { size: 16 })
           }
         ) }),
-        quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-50",
@@ -14038,7 +14293,7 @@ function Chat({
               left: `${quoteSelection.left}px`,
               transform: "translateX(-50%)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
               Button,
               {
                 type: "button",
@@ -14050,16 +14305,16 @@ function Chat({
                 "aria-label": t("composer.quoteSelection"),
                 title: t("composer.quoteSelection"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.Quote, { size: 14 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.Quote, { size: 14 }),
                   t("composer.quoteSelection")
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
-          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
+          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -14070,7 +14325,7 @@ function Chat({
               className: "hidden"
             }
           ),
-          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
             "div",
             {
               className: cn(
@@ -14078,16 +14333,16 @@ function Chat({
                 item.status === "error" ? "bg-destructive/10 border border-destructive/30" : "bg-muted"
               ),
               children: [
-                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   import_lucide_react24.Loader2,
                   {
                     size: 14,
                     className: "animate-spin text-muted-foreground"
                   }
                 ),
-                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.FileText, { size: 14, className: "text-muted-foreground" }),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.FileText, { size: 14, className: "text-destructive" }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.FileText, { size: 14, className: "text-muted-foreground" }),
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.FileText, { size: 14, className: "text-destructive" }),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   "span",
                   {
                     className: cn(
@@ -14097,17 +14352,17 @@ function Chat({
                     children: item.file.name
                   }
                 ),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleRetryUpload(item.localId),
                     className: "ml-1 rounded-full p-0.5 text-destructive hover:bg-destructive/20",
                     title: t("chat.retryUpload"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.RefreshCw, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.RefreshCw, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   "button",
                   {
                     type: "button",
@@ -14116,14 +14371,14 @@ function Chat({
                       "ml-1 rounded-full p-0.5",
                       item.status === "error" ? "text-destructive hover:bg-destructive/20" : "hover:bg-muted-foreground/20"
                     ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.X, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.X, { size: 12 })
                   }
                 )
               ]
             },
             item.localId
           )) }),
-          references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             ReferenceChip,
             {
               reference,
@@ -14137,16 +14392,16 @@ function Chat({
             },
             getReferenceKey(reference)
           )) }),
-          detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
-            detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
+            detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
               "span",
               {
                 className: "inline-flex max-w-full items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RuntimeCapabilityIcon, { option, variant: "chip" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "max-w-40 truncate", children: option.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RuntimeCapabilityIcon, { option, variant: "chip" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "max-w-40 truncate", children: option.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                     "button",
                     {
                       type: "button",
@@ -14154,7 +14409,7 @@ function Chat({
                       className: "rounded-full p-0.5 hover:bg-primary/15",
                       title: t("composer.capabilities.removeRunCapability"),
                       "aria-label": t("composer.capabilities.removeRunCapability"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.X, { size: 11 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.X, { size: 11 })
                     }
                   )
                 ]
@@ -14162,7 +14417,7 @@ function Chat({
               `${option.type}:${option.id}`
             ))
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             PendingRuntimeServices,
             {
               state: stream.runtimeActivities.sandboxServices,
@@ -14171,7 +14426,7 @@ function Chat({
               className: hasPendingTodos || hasPendingFollowUps ? "mb-2" : void 0
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             PendingTodos,
             {
               snapshot: stream.todos,
@@ -14179,7 +14434,7 @@ function Chat({
               className: hasPendingFollowUps ? "mb-2" : void 0
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             PendingFollowUps,
             {
               items: pendingFollowUps,
@@ -14194,7 +14449,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             RequestUserInputPanel,
             {
               request: stream.pendingRequestUserInput,
@@ -14203,7 +14458,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             HITLApprovalPanel,
             {
               request: stream.pendingHITLRequest,
@@ -14212,7 +14467,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          runtimeCapabilityPalette && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          runtimeCapabilityPalette && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             SlashPalette,
             {
               palette: runtimeCapabilityPalette,
@@ -14226,7 +14481,7 @@ function Chat({
               onSelect: selectSlashPaletteOption
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
             "div",
             {
               "data-slot": "composer-input-shell",
@@ -14240,7 +14495,7 @@ function Chat({
                 composerInputRoundedClass
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   "div",
                   {
                     ref: composerInputRef,
@@ -14262,7 +14517,7 @@ function Chat({
                       (missingConfig || isHistoryLoading || hasPendingInteractiveRequest) && "cursor-not-allowed opacity-50"
                     ),
                     children: renderedComposerParts.map(
-                      (part, index) => part.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(React44.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+                      (part, index) => part.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(React44.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                         "span",
                         {
                           "data-composer-capability-key": part.key,
@@ -14271,14 +14526,14 @@ function Chat({
                           contentEditable: false,
                           className: "mx-0.5 inline-flex max-w-[14rem] select-none items-center gap-1 text-sm font-semibold text-primary align-baseline",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                               RuntimeCapabilityIcon,
                               {
                                 option: part.capability,
                                 variant: "chip"
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "truncate", children: part.capability.label })
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "truncate", children: part.capability.label })
                           ]
                         },
                         part.key
@@ -14287,14 +14542,14 @@ function Chat({
                   },
                   composerDomVersion
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                   "div",
                   {
                     "data-slot": "composer-action-bar",
                     className: "pointer-events-none absolute inset-x-1.5 bottom-1 flex min-h-10 items-center justify-between gap-2",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                           ComposerMenu,
                           {
                             composer,
@@ -14309,20 +14564,20 @@ function Chat({
                             disabled: missingConfig || isHistoryLoading || hasPendingInteractiveRequest
                           }
                         ) }),
-                        selectedTool && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
-                          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                        selectedTool && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             "button",
                             {
                               type: "button",
                               onClick: () => setSelectedTool(null),
                               className: "shrink-0 rounded-full p-0.5 text-primary/70 hover:bg-primary/10 hover:text-primary",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react24.X, { size: 12 })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.X, { size: 12 })
                             }
                           )
                         ] })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                         SendButton,
                         {
                           disabled: isSendDisabled,
@@ -14349,7 +14604,7 @@ function Chat({
               ]
             }
           ) }),
-          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "p",
             {
               className: cn(
@@ -14359,12 +14614,12 @@ function Chat({
               children: disclaimer.text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: t("chat.poweredBy") }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: t("chat.poweredBy") }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           SettingsSheet,
           {
             open: petSettingsOpen,
@@ -14374,7 +14629,7 @@ function Chat({
             onSave: savePetLocalSettings
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PetBridge, { pet: effectivePet, state: petAutoState })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PetBridge, { pet: effectivePet, state: petAutoState })
       ]
     }
   );
@@ -14382,9 +14637,9 @@ function Chat({
 
 // src/components/ui/separator.tsx
 var React45 = __toESM(require("react"), 1);
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var Separator = React45.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       ref,