@xpert-ai/chatkit-ui 0.3.0 → 0.3.2

package/dist/index.cjs

@@ -619,6 +619,7 @@ function ParentMessengerProvider({
     /* @__PURE__ */ new Map()
   );
   const onSetOptionsHandlersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+  const onSetPetEnabledHandlersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
   const onSetComposerValueHandlersRef = (0, import_react.useRef)(
     /* @__PURE__ */ new Set()
   );
@@ -636,6 +637,15 @@ function ParentMessengerProvider({
       onSetOptionsHandlersRef.current.delete(handler);
     };
   }, []);
+  const registerOnSetPetEnabled = (0, import_react.useCallback)(
+    (handler) => {
+      onSetPetEnabledHandlersRef.current.add(handler);
+      return () => {
+        onSetPetEnabledHandlersRef.current.delete(handler);
+      };
+    },
+    []
+  );
   const registerOnSetComposerValue = (0, import_react.useCallback)(
     (handler) => {
       onSetComposerValueHandlersRef.current.add(handler);
@@ -778,6 +788,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(
@@ -874,6 +895,7 @@ function ParentMessengerProvider({
       sendCommand,
       sendEvent,
       registerOnSetOptions,
+      registerOnSetPetEnabled,
       registerOnSetComposerValue,
       registerOnFocusComposer
     }),
@@ -882,6 +904,7 @@ function ParentMessengerProvider({
       sendCommand,
       sendEvent,
       registerOnSetOptions,
+      registerOnSetPetEnabled,
       registerOnSetComposerValue,
       registerOnFocusComposer
     ]
@@ -892,6 +915,7 @@ function ParentMessengerProvider({
 // src/hooks/useParentMessenger.tsx
 function useParentMessenger({
   onSetOptions,
+  onSetPetEnabled,
   onSetComposerValue,
   onFocusComposer
 } = {}) {
@@ -903,16 +927,21 @@ function useParentMessenger({
   }
   const {
     registerOnSetOptions,
+    registerOnSetPetEnabled,
     registerOnSetComposerValue,
     registerOnFocusComposer,
     ...messenger
   } = context;
   const onSetOptionsRef = (0, import_react2.useRef)(onSetOptions);
+  const onSetPetEnabledRef = (0, import_react2.useRef)(onSetPetEnabled);
   const onSetComposerValueRef = (0, import_react2.useRef)(onSetComposerValue);
   const onFocusComposerRef = (0, import_react2.useRef)(onFocusComposer);
   (0, import_react2.useEffect)(() => {
     onSetOptionsRef.current = onSetOptions;
   }, [onSetOptions]);
+  (0, import_react2.useEffect)(() => {
+    onSetPetEnabledRef.current = onSetPetEnabled;
+  }, [onSetPetEnabled]);
   (0, import_react2.useEffect)(() => {
     onSetComposerValueRef.current = onSetComposerValue;
   }, [onSetComposerValue]);
@@ -920,6 +949,7 @@ function useParentMessenger({
     onFocusComposerRef.current = onFocusComposer;
   }, [onFocusComposer]);
   const hasOnSetOptions = Boolean(onSetOptions);
+  const hasOnSetPetEnabled = Boolean(onSetPetEnabled);
   const hasOnSetComposerValue = Boolean(onSetComposerValue);
   const hasOnFocusComposer = Boolean(onFocusComposer);
   (0, import_react2.useEffect)(() => {
@@ -929,6 +959,13 @@ function useParentMessenger({
     };
     return registerOnSetOptions(handler);
   }, [hasOnSetOptions, registerOnSetOptions]);
+  (0, import_react2.useEffect)(() => {
+    if (!hasOnSetPetEnabled) return;
+    const handler = (enabled) => {
+      onSetPetEnabledRef.current?.(enabled);
+    };
+    return registerOnSetPetEnabled(handler);
+  }, [hasOnSetPetEnabled, registerOnSetPetEnabled]);
   (0, import_react2.useEffect)(() => {
     if (!hasOnSetComposerValue) return;
     const handler = (payload) => {
@@ -5510,14 +5547,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;
@@ -5532,6 +5569,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,
@@ -5545,22 +5597,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
@@ -5571,8 +5634,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({
@@ -5582,6 +5645,7 @@ function useConversationSummaryEvent({
   currentThreadIsRunning,
   threadErrorMessage,
   messages,
+  historyMessageLoadVersion = 0,
   fallbackTitle
 }) {
   const summary = React21.useMemo(
@@ -5604,18 +5668,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;
 }
 
@@ -7778,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) {
@@ -7869,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();
@@ -7928,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;
@@ -8142,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,
@@ -8152,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)(
@@ -8184,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,
     {
@@ -8303,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,
@@ -8337,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"
         ),
@@ -8369,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"
               )
             }
@@ -8387,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,
@@ -11135,15 +11267,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;
@@ -11353,7 +11482,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") {
@@ -12586,9 +12727,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/dist/index.d.cts

@@ -115,6 +115,9 @@ type CommandMessageMap = {
     onSendUserMessage: SendUserMessageParams;
     onSetComposerValue: ComposerValuePayload | null;
     onSetOptions: ChatKitOptions | null;
+    onSetPetEnabled: {
+        enabled: boolean;
+    };
     onFocusComposer: null;
     onSetThreadId: {
         threadId: string | null;
@@ -151,10 +154,11 @@ declare function ParentMessengerProvider({ children, }: ParentMessengerProviderP
 
 type ParentMessengerOptions = {
     onSetOptions?: (options: ChatKitOptions | null) => void;
+    onSetPetEnabled?: (enabled: boolean) => void;
     onSetComposerValue?: (payload: ComposerValuePayload | null) => void;
     onFocusComposer?: () => void;
 };
-declare function useParentMessenger({ onSetOptions, onSetComposerValue, onFocusComposer, }?: ParentMessengerOptions): ParentMessenger;
+declare function useParentMessenger({ onSetOptions, onSetPetEnabled, onSetComposerValue, onFocusComposer, }?: ParentMessengerOptions): ParentMessenger;
 
 interface ThemeProviderProps {
     children: React.ReactNode;

package/dist/index.d.ts

@@ -115,6 +115,9 @@ type CommandMessageMap = {
     onSendUserMessage: SendUserMessageParams;
     onSetComposerValue: ComposerValuePayload | null;
     onSetOptions: ChatKitOptions | null;
+    onSetPetEnabled: {
+        enabled: boolean;
+    };
     onFocusComposer: null;
     onSetThreadId: {
         threadId: string | null;
@@ -151,10 +154,11 @@ declare function ParentMessengerProvider({ children, }: ParentMessengerProviderP
 
 type ParentMessengerOptions = {
     onSetOptions?: (options: ChatKitOptions | null) => void;
+    onSetPetEnabled?: (enabled: boolean) => void;
     onSetComposerValue?: (payload: ComposerValuePayload | null) => void;
     onFocusComposer?: () => void;
 };
-declare function useParentMessenger({ onSetOptions, onSetComposerValue, onFocusComposer, }?: ParentMessengerOptions): ParentMessenger;
+declare function useParentMessenger({ onSetOptions, onSetPetEnabled, onSetComposerValue, onFocusComposer, }?: ParentMessengerOptions): ParentMessenger;
 
 interface ThemeProviderProps {
     children: React.ReactNode;