@xpert-ai/chatkit-ui 0.3.0 → 0.3.2

package/dist/index.js

@@ -590,6 +590,7 @@ function ParentMessengerProvider({
     /* @__PURE__ */ new Map()
   );
   const onSetOptionsHandlersRef = useRef(/* @__PURE__ */ new Set());
+  const onSetPetEnabledHandlersRef = useRef(/* @__PURE__ */ new Set());
   const onSetComposerValueHandlersRef = useRef(
     /* @__PURE__ */ new Set()
   );
@@ -607,6 +608,15 @@ function ParentMessengerProvider({
       onSetOptionsHandlersRef.current.delete(handler);
     };
   }, []);
+  const registerOnSetPetEnabled = useCallback(
+    (handler) => {
+      onSetPetEnabledHandlersRef.current.add(handler);
+      return () => {
+        onSetPetEnabledHandlersRef.current.delete(handler);
+      };
+    },
+    []
+  );
   const registerOnSetComposerValue = useCallback(
     (handler) => {
       onSetComposerValueHandlersRef.current.add(handler);
@@ -749,6 +759,17 @@ function ParentMessengerProvider({
         }
         return;
       }
+      if (payload.type === "command" && payload.command === "onSetPetEnabled") {
+        const data = payload.data;
+        const enabled = data?.enabled === true;
+        onSetPetEnabledHandlersRef.current.forEach((handler2) => {
+          handler2(enabled);
+        });
+        if (payload.nonce) {
+          sendResponse(payload.nonce, { ok: true });
+        }
+        return;
+      }
       if (payload.type === "command" && payload.command === "onFocusComposer") {
         void Promise.all(
           [...onFocusComposerHandlersRef.current].map(
@@ -845,6 +866,7 @@ function ParentMessengerProvider({
       sendCommand,
       sendEvent,
       registerOnSetOptions,
+      registerOnSetPetEnabled,
       registerOnSetComposerValue,
       registerOnFocusComposer
     }),
@@ -853,6 +875,7 @@ function ParentMessengerProvider({
       sendCommand,
       sendEvent,
       registerOnSetOptions,
+      registerOnSetPetEnabled,
       registerOnSetComposerValue,
       registerOnFocusComposer
     ]
@@ -863,6 +886,7 @@ function ParentMessengerProvider({
 // src/hooks/useParentMessenger.tsx
 function useParentMessenger({
   onSetOptions,
+  onSetPetEnabled,
   onSetComposerValue,
   onFocusComposer
 } = {}) {
@@ -874,16 +898,21 @@ function useParentMessenger({
   }
   const {
     registerOnSetOptions,
+    registerOnSetPetEnabled,
     registerOnSetComposerValue,
     registerOnFocusComposer,
     ...messenger
   } = context;
   const onSetOptionsRef = useRef2(onSetOptions);
+  const onSetPetEnabledRef = useRef2(onSetPetEnabled);
   const onSetComposerValueRef = useRef2(onSetComposerValue);
   const onFocusComposerRef = useRef2(onFocusComposer);
   useEffect2(() => {
     onSetOptionsRef.current = onSetOptions;
   }, [onSetOptions]);
+  useEffect2(() => {
+    onSetPetEnabledRef.current = onSetPetEnabled;
+  }, [onSetPetEnabled]);
   useEffect2(() => {
     onSetComposerValueRef.current = onSetComposerValue;
   }, [onSetComposerValue]);
@@ -891,6 +920,7 @@ function useParentMessenger({
     onFocusComposerRef.current = onFocusComposer;
   }, [onFocusComposer]);
   const hasOnSetOptions = Boolean(onSetOptions);
+  const hasOnSetPetEnabled = Boolean(onSetPetEnabled);
   const hasOnSetComposerValue = Boolean(onSetComposerValue);
   const hasOnFocusComposer = Boolean(onFocusComposer);
   useEffect2(() => {
@@ -900,6 +930,13 @@ function useParentMessenger({
     };
     return registerOnSetOptions(handler);
   }, [hasOnSetOptions, registerOnSetOptions]);
+  useEffect2(() => {
+    if (!hasOnSetPetEnabled) return;
+    const handler = (enabled) => {
+      onSetPetEnabledRef.current?.(enabled);
+    };
+    return registerOnSetPetEnabled(handler);
+  }, [hasOnSetPetEnabled, registerOnSetPetEnabled]);
   useEffect2(() => {
     if (!hasOnSetComposerValue) return;
     const handler = (payload) => {
@@ -5545,14 +5582,14 @@ function formatUnknownMessageContent(content) {
 function getMessagePlainText(message) {
   return formatUnknownMessageContent(message.content).replace(/\s+/g, " ").trim();
 }
-function findLatestMessageByType(messages, types) {
+function findLatestMessageMatchByType(messages, types) {
   for (let index = messages.length - 1; index >= 0; index -= 1) {
     const message = messages[index];
     if (!message) {
       continue;
     }
     if (types.includes(String(message.type))) {
-      return message;
+      return { message, index };
     }
   }
   return null;
@@ -5567,6 +5604,21 @@ function truncateSummaryText(value, maxLength) {
   }
   return `${value.slice(0, Math.max(0, maxLength - 3)).trimEnd()}...`;
 }
+function normalizeThreadId(threadId) {
+  const normalized = threadId?.trim();
+  return normalized || null;
+}
+function getConversationSummarySourceKey(summary) {
+  if (!summary) {
+    return null;
+  }
+  return [
+    summary.threadId,
+    summary.messageId ?? "",
+    summary.updatedAt ?? "",
+    summary.message
+  ].join("
");
+}
 function buildConversationSummary({
   threadId,
   currentThread,
@@ -5580,22 +5632,33 @@ function buildConversationSummary({
     return null;
   }
   const errorMessage = threadErrorMessage?.trim();
-  const assistantMessage = findLatestMessageByType(messages, [
+  const assistantMatch = findLatestMessageMatchByType(messages, [
     "assistant",
     "ai"
   ]);
-  if (!assistantMessage && !errorMessage) {
+  const latestUserMatch = findLatestMessageMatchByType(messages, [
+    "user",
+    "human"
+  ]);
+  const assistantMessage = assistantMatch?.message;
+  const latestUserMessage = latestUserMatch?.message;
+  const assistantMessageText = assistantMessage ? getMessagePlainText(assistantMessage) : "";
+  const latestUserMessageText = latestUserMessage ? getMessagePlainText(latestUserMessage) : "";
+  const latestUserIsAfterAssistant = Boolean(
+    latestUserMatch && (!assistantMatch || latestUserMatch.index > assistantMatch.index)
+  );
+  const shouldUseLatestUserMessage = Boolean(
+    currentThreadIsRunning && latestUserMatch && latestUserMessageText && (latestUserIsAfterAssistant || !assistantMessageText)
+  );
+  const summaryMessage = shouldUseLatestUserMessage && latestUserMatch ? latestUserMatch.message : assistantMessageText ? assistantMessage : void 0;
+  if (!summaryMessage && !errorMessage) {
     return null;
   }
-  const assistantMessageText = assistantMessage ? getMessagePlainText(assistantMessage) : "";
-  const message = errorMessage || assistantMessageText;
+  const summaryMessageText = shouldUseLatestUserMessage ? latestUserMessageText : assistantMessageText;
+  const message = errorMessage || summaryMessageText;
   if (!message) {
     return null;
   }
-  const latestUserMessage = findLatestMessageByType(messages, [
-    "user",
-    "human"
-  ]);
   const title = currentThread?.title?.trim() || (latestUserMessage ? truncateSummaryText(
     getMessagePlainText(latestUserMessage),
     CONVERSATION_SUMMARY_TITLE_FALLBACK_MAX_LENGTH
@@ -5606,8 +5669,8 @@ function buildConversationSummary({
     title,
     message,
     status,
-    ...assistantMessage && getMessageStringField(assistantMessage, "id") ? { messageId: getMessageStringField(assistantMessage, "id") } : {},
-    ...assistantMessage && getMessageStringField(assistantMessage, "updatedAt") ? { updatedAt: getMessageStringField(assistantMessage, "updatedAt") } : assistantMessage && getMessageStringField(assistantMessage, "createdAt") ? { updatedAt: getMessageStringField(assistantMessage, "createdAt") } : {}
+    ...summaryMessage && getMessageStringField(summaryMessage, "id") ? { messageId: getMessageStringField(summaryMessage, "id") } : {},
+    ...summaryMessage && getMessageStringField(summaryMessage, "updatedAt") ? { updatedAt: getMessageStringField(summaryMessage, "updatedAt") } : summaryMessage && getMessageStringField(summaryMessage, "createdAt") ? { updatedAt: getMessageStringField(summaryMessage, "createdAt") } : {}
   };
 }
 function useConversationSummaryEvent({
@@ -5617,6 +5680,7 @@ function useConversationSummaryEvent({
   currentThreadIsRunning,
   threadErrorMessage,
   messages,
+  historyMessageLoadVersion = 0,
   fallbackTitle
 }) {
   const summary = React21.useMemo(
@@ -5639,18 +5703,57 @@ function useConversationSummaryEvent({
     ]
   );
   const sendParentEvent = parentMessenger?.sendEvent;
+  const emissionStateRef = React21.useRef({
+    threadId: null,
+    historyMessageLoadVersion,
+    baselineSourceKey: null,
+    publishedSourceKey: null
+  });
   React21.useEffect(() => {
     if (!sendParentEvent) {
       return;
     }
-    sendParentEvent("public_event", [
-      "log",
-      {
-        name: CONVERSATION_SUMMARY_LOG_NAME,
-        data: summary
-      }
-    ]);
-  }, [sendParentEvent, summary]);
+    const normalizedThreadId = summary?.threadId ?? normalizeThreadId(threadId);
+    const sourceKey = getConversationSummarySourceKey(summary);
+    const state = emissionStateRef.current;
+    const sendSummary = (data) => {
+      sendParentEvent("public_event", [
+        "log",
+        {
+          name: CONVERSATION_SUMMARY_LOG_NAME,
+          data
+        }
+      ]);
+    };
+    if (state.threadId !== normalizedThreadId) {
+      emissionStateRef.current = {
+        threadId: normalizedThreadId,
+        historyMessageLoadVersion,
+        baselineSourceKey: sourceKey,
+        publishedSourceKey: null
+      };
+      sendSummary(null);
+      return;
+    }
+    if (state.historyMessageLoadVersion !== historyMessageLoadVersion) {
+      state.historyMessageLoadVersion = historyMessageLoadVersion;
+      state.baselineSourceKey = sourceKey;
+      state.publishedSourceKey = null;
+      sendSummary(null);
+      return;
+    }
+    if (!summary || !sourceKey) {
+      state.baselineSourceKey = null;
+      state.publishedSourceKey = null;
+      sendSummary(null);
+      return;
+    }
+    if (!state.publishedSourceKey && state.baselineSourceKey === sourceKey) {
+      return;
+    }
+    state.publishedSourceKey = sourceKey;
+    sendSummary(summary);
+  }, [historyMessageLoadVersion, sendParentEvent, summary, threadId]);
   return summary;
 }
 
@@ -7850,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) {
@@ -7941,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();
@@ -8000,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;
@@ -8214,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,
@@ -8224,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(
@@ -8256,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,
     {
@@ -8375,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,
@@ -8409,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"
         ),
@@ -8441,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"
               )
             }
@@ -8459,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,
@@ -11223,15 +11355,12 @@ function Chat({
     }),
     [basePetSettings, petLocalSettings, petRequired]
   );
-  const effectivePet = React43.useMemo(
-    () => {
-      if (petRequired || petLocalSettings) {
-        return buildPetOptionsFromLocalSettings(displayedPetSettings);
-      }
-      return options?.pet ?? null;
-    },
-    [displayedPetSettings, options?.pet, petLocalSettings, petRequired]
-  );
+  const effectivePet = React43.useMemo(() => {
+    if (petRequired || petLocalSettings) {
+      return buildPetOptionsFromLocalSettings(displayedPetSettings);
+    }
+    return options?.pet ?? null;
+  }, [displayedPetSettings, options?.pet, petLocalSettings, petRequired]);
   const savePetLocalSettings = React43.useCallback(
     (settings) => {
       const nextSettings = petRequired ? { ...settings, enabled: true } : settings;
@@ -11441,7 +11570,19 @@ function Chat({
     ),
     onFocusComposer: React43.useCallback(() => {
       composerInputRef.current?.focus();
-    }, [])
+    }, []),
+    onSetPetEnabled: React43.useCallback(
+      (enabled) => {
+        if (petRequired) {
+          return;
+        }
+        savePetLocalSettings({
+          ...displayedPetSettings,
+          enabled
+        });
+      },
+      [displayedPetSettings, petRequired, savePetLocalSettings]
+    )
   });
   const syncQuoteSelection = React43.useCallback(() => {
     if (typeof window === "undefined") {
@@ -12674,9 +12815,10 @@ function Chat({
     parentMessenger,
     threadId: stream.threadId,
     currentThread,
-    currentThreadIsRunning,
+    currentThreadIsRunning: stream.isLoading,
     threadErrorMessage,
     messages,
+    historyMessageLoadVersion: stream.historyMessageLoadVersion ?? 0,
     fallbackTitle: t("history.threadFallback")
   });
   const assistantTitle = assistantName || resolvedTitle;

package/package.json

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

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

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

package/dist/app/assets/classDiagram-6PBFFD2Q-bIGveE9D.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-C_BNMjyo.js";import{_ as i}from"./index-ymMwuJsf.js";import"./chunk-FMBD7UC4-CsUUeatk.js";import"./chunk-YZCP3GAM-Dr-QmZua.js";import"./chunk-55IACEB6-D3WNN3Ra.js";import"./chunk-EDXVE4YY-ZQR5cNyF.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-bIGveE9D.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-C_BNMjyo.js";import{_ as i}from"./index-ymMwuJsf.js";import"./chunk-FMBD7UC4-CsUUeatk.js";import"./chunk-YZCP3GAM-Dr-QmZua.js";import"./chunk-55IACEB6-D3WNN3Ra.js";import"./chunk-EDXVE4YY-ZQR5cNyF.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-CGhA6PF9.js

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

package/dist/app/assets/stateDiagram-v2-QKLJ7IA2-1yK0SXDF.js

@@ -1 +0,0 @@
-import{s as t,b as r,a,S as s}from"./chunk-OYMX7WX6-BfC1NUL6.js";import{_ as i}from"./index-ymMwuJsf.js";import"./chunk-55IACEB6-D3WNN3Ra.js";import"./chunk-EDXVE4YY-ZQR5cNyF.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};