@xpert-ai/chatkit-ui 0.3.1 → 0.3.3

package/dist/index.cjs

@@ -7881,8 +7881,22 @@ var TOOL_GROUP_TOKEN_CATEGORY = {
   tools: "tools"
 };
 var TOOL_CALL_OUTPUT_RENDERERS = {};
+function normalizeStepCategory(category) {
+  if (typeof category !== "string" || category.trim() === "") {
+    return "Tool";
+  }
+  return category;
+}
 function getToolStepData(content) {
-  return content.data ?? {};
+  const data = content.data ?? {};
+  const category = normalizeStepCategory(data.category);
+  if (category === data.category) {
+    return data;
+  }
+  return {
+    ...data,
+    category
+  };
 }
 function parseStepDate(value) {
   if (value instanceof Date) {
@@ -7972,7 +7986,7 @@ function isWidgetComponent(content) {
 }
 function isGroupableToolComponent(content) {
   if (!content || typeof content === "string") return false;
-  return isComponentContent(content) && !isWidgetComponent(content) && content.data?.category === "Tool";
+  return isComponentContent(content) && !isWidgetComponent(content) && getToolStepData(content).category === "Tool";
 }
 function isSkippableToolGroupSeparator(content) {
   if (typeof content === "string") return !content.trim();
@@ -8031,15 +8045,20 @@ function getEffectiveToolGroupDisplayStatus(items, isThreadRunning) {
 }
 function getToolActivityLabel(content, language, statusOverride) {
   const data = getToolStepData(content);
-  const runningCandidates = [data.message, data.title, data.tool, data.type];
-  const completedCandidates = [data.title, data.message, data.tool, data.type];
   const status = statusOverride ?? data.status;
-  const candidates = status === "running" ? runningCandidates : completedCandidates;
-  for (const candidate of candidates) {
-    const label = resolveLocalizedText(candidate, language);
-    if (label) return label;
+  const message = resolveLocalizedText(data.message, language);
+  const title = resolveLocalizedText(data.title, language);
+  const tool = resolveLocalizedText(data.tool, language);
+  const type = resolveLocalizedText(data.type, language);
+  if (status === "running") {
+    return message ?? title ?? tool ?? type ?? "Tool";
+  }
+  const titleToken = normalizeToolToken(title);
+  const genericTitle = titleToken !== null && [tool, type].map((candidate) => normalizeToolToken(candidate)).some((candidate) => candidate === titleToken);
+  if (message && (!title || genericTitle)) {
+    return message;
   }
-  return "Tool";
+  return title ?? message ?? tool ?? type ?? "Tool";
 }
 function flushPendingTools(units, pendingTools) {
   if (pendingTools.length === 0) return;
@@ -8245,6 +8264,11 @@ function ToolStepIcon({
     usesToolsetAvatar,
     apiUrl
   );
+  const iconUrl = createToolsetIconUrl(data.toolset, organizationId, apiUrl);
+  const [failedIconUrl, setFailedIconUrl] = React28.useState(null);
+  React28.useEffect(() => {
+    setFailedIconUrl(null);
+  }, [iconUrl]);
   if (avatar) {
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       ToolAvatarIcon,
@@ -8255,6 +8279,19 @@ function ToolStepIcon({
       }
     );
   }
+  if (iconUrl && failedIconUrl !== iconUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "img",
+      {
+        alt: "",
+        "aria-hidden": "true",
+        className: cn("rounded-sm object-contain", className),
+        "data-slot": "tool-step-icon",
+        src: iconUrl,
+        onError: () => setFailedIconUrl(iconUrl)
+      }
+    );
+  }
   const TypeIcon = getStepTypeIcon(data.type);
   if (TypeIcon) {
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -8287,19 +8324,6 @@ function ToolStepIcon({
       }
     );
   }
-  const iconUrl = createToolsetIconUrl(data.toolset, organizationId, apiUrl);
-  if (iconUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      "img",
-      {
-        alt: "",
-        "aria-hidden": "true",
-        className: cn("rounded-sm object-contain", className),
-        "data-slot": "tool-step-icon",
-        src: iconUrl
-      }
-    );
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_lucide_react16.CircleHelp,
     {
@@ -8406,7 +8430,10 @@ function ToolCallDetails({ content }) {
     hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(OutputRenderer, { content, data }) : null
   ] });
 }
-function ToolCallRow({
+function areToolCallRowPropsEqual(previous, next) {
+  return previous.content.id === next.content.id && previous.content.data === next.content.data && previous.isThreadRunning === next.isThreadRunning && previous.organizationId === next.organizationId && previous.apiUrl === next.apiUrl;
+}
+function ToolCallRowContent({
   content,
   isThreadRunning,
   organizationId,
@@ -8440,7 +8467,7 @@ function ToolCallRow({
       {
         type: "button",
         className: cn(
-          "flex w-full min-w-0 items-center gap-2 text-left text-sm leading-6 text-muted-foreground",
+          "group/tool-call flex w-full min-w-0 items-center gap-2 text-left text-sm leading-6 text-muted-foreground",
           hasDetails && "cursor-pointer hover:text-foreground",
           hasError && "text-destructive hover:text-destructive"
         ),
@@ -8472,14 +8499,14 @@ function ToolCallRow({
               )
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "min-w-0 flex-1 truncate", title: label, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "min-w-0 truncate", title: label, children: label }),
           durationLabel ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/80", children: durationLabel }) : null,
           hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             import_lucide_react16.ChevronRight,
             {
               "aria-hidden": "true",
               className: cn(
-                "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
+                "h-3.5 w-3.5 shrink-0 text-muted-foreground opacity-0 transition-[opacity,transform] group-hover/tool-call:opacity-100 group-focus-visible/tool-call:opacity-100",
                 isExpanded && "rotate-90"
               )
             }
@@ -8490,6 +8517,8 @@ function ToolCallRow({
     hasDetails && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { id: detailsId, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ToolCallDetails, { content }) }) : null
   ] });
 }
+var ToolCallRow = React28.memo(ToolCallRowContent, areToolCallRowPropsEqual);
+ToolCallRow.displayName = "ToolCallRow";
 function ToolComponentGroup({
   items,
   hasFollowingItem,

package/dist/index.js

@@ -7953,8 +7953,22 @@ var TOOL_GROUP_TOKEN_CATEGORY = {
   tools: "tools"
 };
 var TOOL_CALL_OUTPUT_RENDERERS = {};
+function normalizeStepCategory(category) {
+  if (typeof category !== "string" || category.trim() === "") {
+    return "Tool";
+  }
+  return category;
+}
 function getToolStepData(content) {
-  return content.data ?? {};
+  const data = content.data ?? {};
+  const category = normalizeStepCategory(data.category);
+  if (category === data.category) {
+    return data;
+  }
+  return {
+    ...data,
+    category
+  };
 }
 function parseStepDate(value) {
   if (value instanceof Date) {
@@ -8044,7 +8058,7 @@ function isWidgetComponent(content) {
 }
 function isGroupableToolComponent(content) {
   if (!content || typeof content === "string") return false;
-  return isComponentContent(content) && !isWidgetComponent(content) && content.data?.category === "Tool";
+  return isComponentContent(content) && !isWidgetComponent(content) && getToolStepData(content).category === "Tool";
 }
 function isSkippableToolGroupSeparator(content) {
   if (typeof content === "string") return !content.trim();
@@ -8103,15 +8117,20 @@ function getEffectiveToolGroupDisplayStatus(items, isThreadRunning) {
 }
 function getToolActivityLabel(content, language, statusOverride) {
   const data = getToolStepData(content);
-  const runningCandidates = [data.message, data.title, data.tool, data.type];
-  const completedCandidates = [data.title, data.message, data.tool, data.type];
   const status = statusOverride ?? data.status;
-  const candidates = status === "running" ? runningCandidates : completedCandidates;
-  for (const candidate of candidates) {
-    const label = resolveLocalizedText(candidate, language);
-    if (label) return label;
+  const message = resolveLocalizedText(data.message, language);
+  const title = resolveLocalizedText(data.title, language);
+  const tool = resolveLocalizedText(data.tool, language);
+  const type = resolveLocalizedText(data.type, language);
+  if (status === "running") {
+    return message ?? title ?? tool ?? type ?? "Tool";
+  }
+  const titleToken = normalizeToolToken(title);
+  const genericTitle = titleToken !== null && [tool, type].map((candidate) => normalizeToolToken(candidate)).some((candidate) => candidate === titleToken);
+  if (message && (!title || genericTitle)) {
+    return message;
   }
-  return "Tool";
+  return title ?? message ?? tool ?? type ?? "Tool";
 }
 function flushPendingTools(units, pendingTools) {
   if (pendingTools.length === 0) return;
@@ -8317,6 +8336,11 @@ function ToolStepIcon({
     usesToolsetAvatar,
     apiUrl
   );
+  const iconUrl = createToolsetIconUrl(data.toolset, organizationId, apiUrl);
+  const [failedIconUrl, setFailedIconUrl] = React28.useState(null);
+  React28.useEffect(() => {
+    setFailedIconUrl(null);
+  }, [iconUrl]);
   if (avatar) {
     return /* @__PURE__ */ jsx31(
       ToolAvatarIcon,
@@ -8327,6 +8351,19 @@ function ToolStepIcon({
       }
     );
   }
+  if (iconUrl && failedIconUrl !== iconUrl) {
+    return /* @__PURE__ */ jsx31(
+      "img",
+      {
+        alt: "",
+        "aria-hidden": "true",
+        className: cn("rounded-sm object-contain", className),
+        "data-slot": "tool-step-icon",
+        src: iconUrl,
+        onError: () => setFailedIconUrl(iconUrl)
+      }
+    );
+  }
   const TypeIcon = getStepTypeIcon(data.type);
   if (TypeIcon) {
     return /* @__PURE__ */ jsx31(
@@ -8359,19 +8396,6 @@ function ToolStepIcon({
       }
     );
   }
-  const iconUrl = createToolsetIconUrl(data.toolset, organizationId, apiUrl);
-  if (iconUrl) {
-    return /* @__PURE__ */ jsx31(
-      "img",
-      {
-        alt: "",
-        "aria-hidden": "true",
-        className: cn("rounded-sm object-contain", className),
-        "data-slot": "tool-step-icon",
-        src: iconUrl
-      }
-    );
-  }
   return /* @__PURE__ */ jsx31(
     CircleHelp,
     {
@@ -8478,7 +8502,10 @@ function ToolCallDetails({ content }) {
     hasOutput ? /* @__PURE__ */ jsx31(OutputRenderer, { content, data }) : null
   ] });
 }
-function ToolCallRow({
+function areToolCallRowPropsEqual(previous, next) {
+  return previous.content.id === next.content.id && previous.content.data === next.content.data && previous.isThreadRunning === next.isThreadRunning && previous.organizationId === next.organizationId && previous.apiUrl === next.apiUrl;
+}
+function ToolCallRowContent({
   content,
   isThreadRunning,
   organizationId,
@@ -8512,7 +8539,7 @@ function ToolCallRow({
       {
         type: "button",
         className: cn(
-          "flex w-full min-w-0 items-center gap-2 text-left text-sm leading-6 text-muted-foreground",
+          "group/tool-call flex w-full min-w-0 items-center gap-2 text-left text-sm leading-6 text-muted-foreground",
           hasDetails && "cursor-pointer hover:text-foreground",
           hasError && "text-destructive hover:text-destructive"
         ),
@@ -8544,14 +8571,14 @@ function ToolCallRow({
               )
             }
           ) : /* @__PURE__ */ jsx31("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx31("span", { className: "min-w-0 flex-1 truncate", title: label, children: label }),
+          /* @__PURE__ */ jsx31("span", { className: "min-w-0 truncate", title: label, children: label }),
           durationLabel ? /* @__PURE__ */ jsx31("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/80", children: durationLabel }) : null,
           hasDetails ? /* @__PURE__ */ jsx31(
             ChevronRight6,
             {
               "aria-hidden": "true",
               className: cn(
-                "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
+                "h-3.5 w-3.5 shrink-0 text-muted-foreground opacity-0 transition-[opacity,transform] group-hover/tool-call:opacity-100 group-focus-visible/tool-call:opacity-100",
                 isExpanded && "rotate-90"
               )
             }
@@ -8562,6 +8589,8 @@ function ToolCallRow({
     hasDetails && isExpanded ? /* @__PURE__ */ jsx31("div", { id: detailsId, children: /* @__PURE__ */ jsx31(ToolCallDetails, { content }) }) : null
   ] });
 }
+var ToolCallRow = React28.memo(ToolCallRowContent, areToolCallRowPropsEqual);
+ToolCallRow.displayName = "ToolCallRow";
 function ToolComponentGroup({
   items,
   hasFollowingItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpert-ai/chatkit-ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "ChatKit UI.",
   "type": "module",
   "sideEffects": false,
@@ -59,9 +59,9 @@
     "tw-animate-css": "^1.4.0",
     "uuid": "^11.1.0",
     "zod": "^4.1.12",
+    "@xpert-ai/chatkit-types": "~0.3.4",
     "@xpert-ai/a2ui-react": "~0.1.0",
-    "@xpert-ai/chatkit-types": "~0.3.2",
-    "@xpert-ai/chatkit-web-shared": "~0.3.1"
+    "@xpert-ai/chatkit-web-shared": "~0.3.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/dist/app/assets/channel-DFuCkxpD.js

@@ -1 +0,0 @@
-import{aq as o,ar as n}from"./index-GhHwJ7zy.js";const t=(r,a)=>o.lang.round(n.parse(r)[a]);export{t as c};

package/dist/app/assets/classDiagram-6PBFFD2Q-B-sKfC2b.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-ZsS-1RD1.js";import{_ as i}from"./index-GhHwJ7zy.js";import"./chunk-FMBD7UC4-SJj_87D9.js";import"./chunk-YZCP3GAM-CfJMloWe.js";import"./chunk-55IACEB6-DXiQApQ8.js";import"./chunk-EDXVE4YY-BYhbxZxV.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/classDiagram-v2-HSJHXN6E-B-sKfC2b.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-ZsS-1RD1.js";import{_ as i}from"./index-GhHwJ7zy.js";import"./chunk-FMBD7UC4-SJj_87D9.js";import"./chunk-YZCP3GAM-CfJMloWe.js";import"./chunk-55IACEB6-DXiQApQ8.js";import"./chunk-EDXVE4YY-BYhbxZxV.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/clone-tyFq5yaW.js

@@ -1 +0,0 @@
-import{b as r}from"./graph-Bkkgefa4.js";var e=4;function a(o){return r(o,e)}export{a as c};

package/dist/app/assets/stateDiagram-v2-QKLJ7IA2-9u9Bcufu.js

@@ -1 +0,0 @@
-import{s as t,b as r,a,S as s}from"./chunk-OYMX7WX6-B-BH2xMM.js";import{_ as i}from"./index-GhHwJ7zy.js";import"./chunk-55IACEB6-DXiQApQ8.js";import"./chunk-EDXVE4YY-BYhbxZxV.js";var l={parser:a,get db(){return new s(2)},renderer:r,styles:t,init:i(e=>{e.state||(e.state={}),e.state.arrowMarkerAbsolute=e.arrowMarkerAbsolute},"init")};export{l as diagram};