@yushaw/sanqian-chat 0.2.37 → 0.2.40

package/dist/renderer/index.js

@@ -107,6 +107,12 @@ var findLastBlock = (blocks, predicate) => {
   }
   return void 0;
 };
+var CHAT_CAPABILITIES = {
+  conversationSwitch: {
+    supportsCancelActiveStream: true,
+    supportsDetachContext: true
+  }
+};
 function useChat(options) {
   const { adapter, onError, onConversationChange } = options;
   const [messages, setMessages] = (0, import_react.useState)([]);
@@ -127,6 +133,7 @@ function useChat(options) {
   const pendingCancelRef = (0, import_react.useRef)(false);
   const pendingCancelFnRef = (0, import_react.useRef)(null);
   const suppressStreamRef = (0, import_react.useRef)(false);
+  const activeStreamContextRef = (0, import_react.useRef)(null);
   const currentBlocksRef = (0, import_react.useRef)([]);
   const currentTextBlockIndexRef = (0, import_react.useRef)(-1);
   const needsContentClearRef = (0, import_react.useRef)(false);
@@ -214,8 +221,43 @@ function useChat(options) {
     pendingCancelRef.current = false;
     pendingCancelFnRef.current = null;
   }, []);
-  const handleStreamEvent = (0, import_react.useCallback)((event, assistantMessageId) => {
+  const detachActiveStream = (0, import_react.useCallback)((detachContext) => {
+    const context = activeStreamContextRef.current;
+    if (!context || context.detached) {
+      return;
+    }
+    context.detached = true;
+    context.detachContext = detachContext;
+    if (typewriterIntervalRef.current) {
+      clearTimeout(typewriterIntervalRef.current);
+      typewriterIntervalRef.current = null;
+    }
+    currentAssistantMessageIdRef.current = null;
+    resetStreamBuffers();
+    setIsStreaming(false);
+    setIsLoading(false);
+    setPendingInterrupt(null);
+    currentRunIdRef.current = null;
+    pendingInterruptStreamIdRef.current = null;
+    clearPendingCancel();
+    suppressStreamRef.current = false;
+  }, [clearPendingCancel, resetStreamBuffers]);
+  const handleStreamEvent = (0, import_react.useCallback)((event, streamContext) => {
     if (!isMountedRef.current) return;
+    const isActiveStream = activeStreamContextRef.current?.token === streamContext.token && !streamContext.detached;
+    if (!isActiveStream) {
+      if (event.type === "done" && event.conversationId && !streamContext.didReportConversationChange) {
+        streamContext.didReportConversationChange = true;
+        onConversationChange?.(event.conversationId, event.title, {
+          source: "background",
+          streamToken: streamContext.token,
+          detached: true,
+          detachContext: streamContext.detachContext
+        });
+      }
+      return;
+    }
+    const assistantMessageId = streamContext.assistantMessageId;
     currentAssistantMessageIdRef.current = assistantMessageId;
     if (suppressStreamRef.current && event.type !== "start" && event.type !== "cancelled" && event.type !== "done" && event.type !== "error") {
       return;
@@ -561,8 +603,13 @@ function useChat(options) {
         });
         resetStreamBuffers();
         if (event.conversationId) {
+          streamContext.didReportConversationChange = true;
           setConversationId(event.conversationId);
-          onConversationChange?.(event.conversationId, event.title);
+          onConversationChange?.(event.conversationId, event.title, {
+            source: "active",
+            streamToken: streamContext.token,
+            detached: false
+          });
         }
         if (event.title) setConversationTitle(event.title);
         setIsStreaming(false);
@@ -571,6 +618,7 @@ function useChat(options) {
         pendingInterruptStreamIdRef.current = null;
         suppressStreamRef.current = false;
         clearPendingCancel();
+        activeStreamContextRef.current = null;
         break;
       }
       case "cancelled": {
@@ -608,6 +656,7 @@ function useChat(options) {
         pendingInterruptStreamIdRef.current = null;
         suppressStreamRef.current = false;
         clearPendingCancel();
+        activeStreamContextRef.current = null;
         break;
       }
       case "error": {
@@ -636,6 +685,7 @@ function useChat(options) {
         pendingInterruptStreamIdRef.current = null;
         suppressStreamRef.current = false;
         clearPendingCancel();
+        activeStreamContextRef.current = null;
         break;
       }
       case "interrupt": {
@@ -686,6 +736,13 @@ function useChat(options) {
       blocks: [],
       isComplete: false
     };
+    const streamContext = {
+      token: crypto.randomUUID(),
+      assistantMessageId: assistantMessage.id,
+      detached: false,
+      didReportConversationChange: false
+    };
+    activeStreamContextRef.current = streamContext;
     const shouldRenderUserMessage = trimmedContent.length > 0 || hasAttachedResources;
     setMessages(
       (prev) => shouldRenderUserMessage ? [...prev, userMessage, assistantMessage] : [...prev, assistantMessage]
@@ -708,7 +765,7 @@ function useChat(options) {
       const { cancel } = await adapter.chatStream(
         apiMessages,
         conversationIdRef.current ?? void 0,
-        (event) => handleStreamEvent(event, assistantMessage.id),
+        (event) => handleStreamEvent(event, streamContext),
         {
           agentId: currentAgentIdRef.current,
           attachedResources: attachedResources?.length ? attachedResources : void 0,
@@ -743,6 +800,9 @@ function useChat(options) {
       pendingInterruptStreamIdRef.current = null;
       setIsLoading(false);
       setIsStreaming(false);
+      if (activeStreamContextRef.current?.token === streamContext.token) {
+        activeStreamContextRef.current = null;
+      }
       return false;
     }
   }, [adapter, clearPendingCancel, handleStreamEvent, onError, resetStreamBuffers, sessionResources]);
@@ -784,6 +844,7 @@ function useChat(options) {
     resetStreamBuffers();
     currentRunIdRef.current = null;
     pendingInterruptStreamIdRef.current = null;
+    activeStreamContextRef.current = null;
     setIsStreaming(false);
     setIsLoading(false);
   }, [clearPendingCancel, flushTypewriter, resetStreamBuffers]);
@@ -797,10 +858,20 @@ function useChat(options) {
     resetStreamBuffers();
     currentRunIdRef.current = null;
     pendingInterruptStreamIdRef.current = null;
+    activeStreamContextRef.current = null;
     clearPendingCancel();
     suppressStreamRef.current = false;
   }, [clearPendingCancel, resetStreamBuffers]);
-  const loadConversation = (0, import_react.useCallback)(async (id) => {
+  const loadConversation = (0, import_react.useCallback)(async (id, optionsArg) => {
+    const cancelActiveStream = optionsArg?.cancelActiveStream ?? true;
+    const activeStream = activeStreamContextRef.current;
+    if (activeStream && !activeStream.detached) {
+      if (cancelActiveStream) {
+        stopStreaming();
+      } else {
+        detachActiveStream(optionsArg?.detachContext);
+      }
+    }
     try {
       setIsLoading(true);
       setError(null);
@@ -821,9 +892,19 @@ function useChat(options) {
     } finally {
       if (isMountedRef.current) setIsLoading(false);
     }
-  }, [adapter, onError]);
-  const newConversation = (0, import_react.useCallback)(() => {
-    cancelRef.current?.();
+  }, [adapter, detachActiveStream, onError, stopStreaming]);
+  const newConversation = (0, import_react.useCallback)((optionsArg) => {
+    const cancelActiveStream = optionsArg?.cancelActiveStream ?? true;
+    const activeStream = activeStreamContextRef.current;
+    if (activeStream && !activeStream.detached) {
+      if (cancelActiveStream) {
+        stopStreaming();
+      } else {
+        detachActiveStream(optionsArg?.detachContext);
+      }
+    } else if (cancelActiveStream) {
+      cancelRef.current?.();
+    }
     if (typewriterIntervalRef.current) clearTimeout(typewriterIntervalRef.current);
     setMessages([]);
     setConversationId(null);
@@ -835,8 +916,9 @@ function useChat(options) {
     resetStreamBuffers();
     currentRunIdRef.current = null;
     pendingInterruptStreamIdRef.current = null;
+    activeStreamContextRef.current = null;
     clearPendingCancel();
-  }, [clearPendingCancel, resetStreamBuffers]);
+  }, [clearPendingCancel, detachActiveStream, resetStreamBuffers, stopStreaming]);
   const sendHitlResponse = (0, import_react.useCallback)((response) => {
     const runId = currentRunIdRef.current ?? void 0;
     const streamId = pendingInterruptStreamIdRef.current ?? void 0;
@@ -916,7 +998,8 @@ function useChat(options) {
     loadConversation,
     newConversation,
     sessionResources,
-    removeSessionResource
+    removeSessionResource,
+    capabilities: CHAT_CAPABILITIES
   };
 }
 
@@ -1837,33 +1920,56 @@ code {
 
 [data-streamdown="code-block-header"] {
   position: absolute !important;
-  top: 14px !important;
-  right: 8px !important;
+  top: 10px !important;
+  left: 12px !important;
+  right: auto !important;
   z-index: 10;
   padding: 0 !important;
   background: transparent !important;
   border: none !important;
   opacity: 0;
   transition: opacity 150ms ease;
+  pointer-events: none;
 }
 
-[data-streamdown="code-block"]:hover [data-streamdown="code-block-header"] {
+[data-streamdown="code-block-actions"] {
+  position: absolute !important;
+  top: 10px !important;
+  right: 8px !important;
+  z-index: 11;
+  display: flex !important;
+  align-items: center;
+  gap: 4px;
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  opacity: 0;
+  transition: opacity 150ms ease;
+  pointer-events: auto !important;
+}
+
+[data-streamdown="code-block"]:hover [data-streamdown="code-block-header"],
+[data-streamdown="code-block"]:hover [data-streamdown="code-block-actions"] {
   opacity: 1;
 }
 
 [data-streamdown="code-block-header"] > span:first-child {
+  display: inline-flex;
   font-size: 11px;
   color: var(--color-muted);
   text-transform: lowercase;
-  margin-right: 8px;
 }
 
 [data-streamdown="code-block-header"] > div {
   display: flex;
   gap: 4px;
+  margin-left: 8px;
+  pointer-events: auto;
 }
 
-[data-streamdown="code-block-header"] button {
+/* Normalize action buttons for both streamdown v1 (header>div) and v2 (code-block-actions). */
+[data-streamdown="code-block-header"] button,
+[data-streamdown="code-block-actions"] button {
   padding: 4px !important;
   border: none !important;
   border-radius: 4px !important;
@@ -1872,18 +1978,21 @@ code {
   cursor: pointer;
 }
 
-[data-streamdown="code-block-header"] button:hover {
+[data-streamdown="code-block-header"] button:hover,
+[data-streamdown="code-block-actions"] button:hover {
   opacity: 1;
   background: var(--color-border) !important;
 }
 
-[data-streamdown="code-block-header"] svg {
+[data-streamdown="code-block-header"] svg,
+[data-streamdown="code-block-actions"] svg {
   color: var(--color-muted) !important;
   width: 12px !important;
   height: 12px !important;
 }
 
-[data-streamdown="code-block-header"] button:hover svg {
+[data-streamdown="code-block-header"] button:hover svg,
+[data-streamdown="code-block-actions"] button:hover svg {
   color: var(--color-text) !important;
 }
 
@@ -6884,9 +6993,8 @@ var useChatHeader = (config) => {
     }
     if (typeof config?.alwaysOnTop === "boolean") {
       setIsPinned(config.alwaysOnTop);
-      resolvedOnPin?.(config.alwaysOnTop);
     }
-  }, [config?.alwaysOnTop, resolvedOnPin]);
+  }, [config?.alwaysOnTop]);
   const showPin = !!resolvedOnPin || typeof config?.alwaysOnTop === "boolean";
   const showClose = !!resolvedOnClose;
   const logoNode = (0, import_react17.useMemo)(() => resolveLogoNode(config?.logo, "header"), [config?.logo]);
@@ -10169,7 +10277,9 @@ var HistoryList = (0, import_react36.memo)(function HistoryList2({
   onDelete,
   onLoadMore,
   isDarkMode = false,
-  strings = {}
+  strings = {},
+  isConversationHighlighted,
+  highlightedLabel
 }) {
   const [hoveredId, setHoveredId] = (0, import_react36.useState)(null);
   const loadMoreRef = (0, import_react36.useRef)(null);
@@ -10225,6 +10335,8 @@ var HistoryList = (0, import_react36.memo)(function HistoryList2({
     conversations.map((conv) => {
       const isSelected = conv.id === selectedId;
       const isHovered = conv.id === hoveredId;
+      const isHighlighted = isConversationHighlighted?.(conv) === true;
+      const resolvedHighlightLabel = isHighlighted ? (typeof highlightedLabel === "function" ? highlightedLabel(conv) : highlightedLabel) ?? "RELATED" : null;
       return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "div",
         {
@@ -10236,21 +10348,39 @@ var HistoryList = (0, import_react36.memo)(function HistoryList2({
             padding: "0.5rem 0.75rem",
             textAlign: "left",
             cursor: "pointer",
-            transition: "background-color 0.15s ease",
-            background: isSelected || isHovered ? colors.hover : "transparent"
+            transition: "background-color 0.15s ease, border-color 0.15s ease",
+            border: isHighlighted ? "1px solid var(--chat-accent)" : "1px solid transparent",
+            background: isSelected || isHovered ? colors.hover : isHighlighted ? "color-mix(in srgb, var(--chat-accent) 10%, transparent)" : "transparent"
           },
           onClick: () => onSelect(conv.id),
           onMouseEnter: () => setHoveredId(conv.id),
           onMouseLeave: () => setHoveredId(null),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: {
-                fontSize: "0.875rem",
-                color: colors.text,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              }, children: conv.title || "Untitled" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem", minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: {
+                  fontSize: "0.875rem",
+                  color: colors.text,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }, children: conv.title || "Untitled" }),
+                resolvedHighlightLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "0.625rem",
+                      lineHeight: 1,
+                      padding: "0.2rem 0.35rem",
+                      borderRadius: 999,
+                      background: "var(--chat-accent)",
+                      color: "#fff",
+                      flexShrink: 0
+                    },
+                    children: resolvedHighlightLabel
+                  }
+                )
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { fontSize: "0.75rem", color: colors.muted }, children: formatRelativeTime(conv.updatedAt, strings) })
             ] }),
             isHovered && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -10511,6 +10641,7 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
   onError,
   onMessageReceived,
   onLoadingChange,
+  onConversationChange,
   onStateChange,
   headerLeft,
   headerRight,
@@ -10519,8 +10650,13 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
   inputPortalContainer,
   sendMessageRef,
   newConversationRef,
+  loadConversationRef,
+  stopStreamingRef,
   focusInputRef: parentFocusInputRef,
   setTextRef: parentSetTextRef,
+  controllerRef,
+  onConversationDeleted,
+  historyConfig,
   renderMessage,
   emptyState,
   className = "",
@@ -10591,7 +10727,8 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
   });
   const chat = useChat({
     adapter,
-    onError
+    onError,
+    onConversationChange
   });
   useFocusPersistence({
     containerRef: chatContainerRef,
@@ -10635,6 +10772,16 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
       newConversationRef.current = chat.newConversation;
     }
   }, [newConversationRef, chat.newConversation]);
+  (0, import_react38.useEffect)(() => {
+    if (loadConversationRef) {
+      loadConversationRef.current = chat.loadConversation;
+    }
+  }, [loadConversationRef, chat.loadConversation]);
+  (0, import_react38.useEffect)(() => {
+    if (stopStreamingRef) {
+      stopStreamingRef.current = chat.stopStreaming;
+    }
+  }, [stopStreamingRef, chat.stopStreaming]);
   (0, import_react38.useEffect)(() => {
     if (parentFocusInputRef) {
       parentFocusInputRef.current = () => chatInputRef.current?.focus();
@@ -10645,6 +10792,63 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
       parentSetTextRef.current = (text) => chatInputRef.current?.setValue(text);
     }
   }, [parentSetTextRef]);
+  const getStateSnapshot = (0, import_react38.useCallback)(() => ({
+    messages: chat.messages,
+    isLoading: chat.isLoading,
+    isStreaming: chat.isStreaming,
+    error: chat.error,
+    conversationId: chat.conversationId,
+    conversationTitle: chat.conversationTitle,
+    capabilities: chat.capabilities
+  }), [
+    chat.messages,
+    chat.isLoading,
+    chat.isStreaming,
+    chat.error,
+    chat.conversationId,
+    chat.conversationTitle,
+    chat.capabilities
+  ]);
+  (0, import_react38.useEffect)(() => {
+    if (!controllerRef) return;
+    controllerRef.current = {
+      sendMessage: chat.sendMessage,
+      trySendMessage: chat.trySendMessage,
+      newConversation: chat.newConversation,
+      loadConversation: chat.loadConversation,
+      stopStreaming: chat.stopStreaming,
+      focusInput: () => chatInputRef.current?.focus(),
+      setInputText: (text) => chatInputRef.current?.setValue(text),
+      getState: getStateSnapshot
+    };
+  }, [
+    controllerRef,
+    chat.sendMessage,
+    chat.trySendMessage,
+    chat.newConversation,
+    chat.loadConversation,
+    chat.stopStreaming,
+    getStateSnapshot
+  ]);
+  (0, import_react38.useEffect)(() => {
+    return () => {
+      if (sendMessageRef) sendMessageRef.current = null;
+      if (newConversationRef) newConversationRef.current = null;
+      if (loadConversationRef) loadConversationRef.current = null;
+      if (stopStreamingRef) stopStreamingRef.current = null;
+      if (parentFocusInputRef) parentFocusInputRef.current = null;
+      if (parentSetTextRef) parentSetTextRef.current = null;
+      if (controllerRef) controllerRef.current = null;
+    };
+  }, [
+    sendMessageRef,
+    newConversationRef,
+    loadConversationRef,
+    stopStreamingRef,
+    parentFocusInputRef,
+    parentSetTextRef,
+    controllerRef
+  ]);
   (0, import_react38.useEffect)(() => {
     if (!adapter.onFocusInput) return;
     return adapter.onFocusInput(() => {
@@ -10666,12 +10870,9 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
   }, [chat.isLoading, onLoadingChange]);
   (0, import_react38.useEffect)(() => {
     if (onStateChange) {
-      onStateChange({
-        messages: chat.messages,
-        conversationId: chat.conversationId
-      });
+      onStateChange(getStateSnapshot());
     }
-  }, [chat.messages, chat.conversationId, onStateChange]);
+  }, [getStateSnapshot, onStateChange]);
   (0, import_react38.useEffect)(() => {
     if (connection.isConnected) {
       resourcePicker.refreshProviders();
@@ -10699,11 +10900,12 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
   const handleDeleteConversation = (0, import_react38.useCallback)(
     async (id) => {
       await conversations.deleteConversation(id);
+      onConversationDeleted?.(id);
       if (id === chat.conversationId) {
         chat.newConversation();
       }
     },
-    [conversations, chat]
+    [conversations, chat, onConversationDeleted]
   );
   const handleNewChat = (0, import_react38.useCallback)(() => {
     chat.newConversation();
@@ -10964,6 +11166,8 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
                 onDelete: handleDeleteConversation,
                 onLoadMore: conversations.loadMore,
                 isDarkMode: resolvedIsDarkMode,
+                isConversationHighlighted: historyConfig?.isConversationHighlighted,
+                highlightedLabel: historyConfig?.highlightedLabel,
                 strings: {
                   noHistory: mergedStrings.noHistory,
                   loadMore: mergedStrings.loadMore,