@yushaw/sanqian-chat 0.2.42 → 0.2.44

package/dist/renderer/index.mjs

@@ -2,6 +2,7 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 var TYPEWRITER_DELAYS = { VERY_FAST: 2, FAST: 5, NORMAL: 10, SLOW: 20 };
 var TYPEWRITER_THRESHOLDS = { VERY_FAST: 100, FAST: 50, NORMAL: 20 };
+var MAX_DETACHED_SNAPSHOTS = 30;
 var findToolCallIndex = (toolCalls, toolId, toolName) => {
   if (!toolCalls || toolCalls.length === 0) return -1;
   if (toolId) {
@@ -19,6 +20,34 @@ var findLastBlock = (blocks, predicate) => {
   }
   return void 0;
 };
+function cloneBlocks(blocks) {
+  return blocks?.map((block) => ({
+    ...block,
+    toolArgs: block.toolArgs ? { ...block.toolArgs } : block.toolArgs
+  }));
+}
+function cloneMessages(messages) {
+  return messages.map((message) => ({
+    ...message,
+    toolCalls: message.toolCalls?.map((toolCall) => ({
+      ...toolCall,
+      args: toolCall.args ? { ...toolCall.args } : toolCall.args
+    })),
+    blocks: cloneBlocks(message.blocks),
+    filePaths: message.filePaths ? [...message.filePaths] : message.filePaths,
+    attachedResources: message.attachedResources?.map((resource) => ({ ...resource }))
+  }));
+}
+function normalizeConversationMessages(messages) {
+  return messages.filter((message) => message.role !== "tool").map((message) => ({
+    ...message,
+    isStreaming: false,
+    isComplete: true
+  }));
+}
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 var CHAT_CAPABILITIES = {
   conversationSwitch: {
     supportsCancelActiveStream: true,
@@ -39,6 +68,7 @@ function useChat(options) {
   const isMountedRef = useRef(true);
   const messagesRef = useRef(messages);
   const conversationIdRef = useRef(conversationId);
+  const detachedConversationSnapshotsRef = useRef(/* @__PURE__ */ new Map());
   const currentRunIdRef = useRef(null);
   const pendingInterruptStreamIdRef = useRef(null);
   const currentAgentIdRef = useRef(null);
@@ -133,11 +163,49 @@ function useChat(options) {
     pendingCancelRef.current = false;
     pendingCancelFnRef.current = null;
   }, []);
+  const setDetachedConversationSnapshot = useCallback((id, snapshot) => {
+    if (!id || snapshot.length === 0) return;
+    const map = detachedConversationSnapshotsRef.current;
+    if (map.has(id)) {
+      map.delete(id);
+    }
+    map.set(id, cloneMessages(snapshot));
+    while (map.size > MAX_DETACHED_SNAPSHOTS) {
+      const oldestKey = map.keys().next().value;
+      if (!oldestKey) break;
+      map.delete(oldestKey);
+    }
+  }, []);
   const detachActiveStream = useCallback((detachContext) => {
     const context = activeStreamContextRef.current;
     if (!context || context.detached) {
       return;
     }
+    const detachedSnapshot = cloneMessages(normalizeConversationMessages(messagesRef.current));
+    const detachedAssistantMessageIndex = detachedSnapshot.findIndex(
+      (message) => message.id === context.assistantMessageId
+    );
+    if (detachedAssistantMessageIndex !== -1) {
+      const detachedAssistantMessage = detachedSnapshot[detachedAssistantMessageIndex];
+      const detachedContent = fullContentRef.current || displayedContentRef.current || detachedAssistantMessage.content;
+      detachedSnapshot[detachedAssistantMessageIndex] = {
+        ...detachedAssistantMessage,
+        content: detachedContent,
+        finalContent: detachedContent || detachedAssistantMessage.finalContent,
+        blocks: currentBlocksRef.current.length > 0 ? cloneBlocks(currentBlocksRef.current) : detachedAssistantMessage.blocks,
+        thinking: detachedAssistantMessage.thinking?.trimEnd(),
+        currentThinking: void 0,
+        isStreaming: false,
+        isThinkingStreaming: false,
+        isThinkingPaused: false,
+        isToolCallsStreaming: false,
+        isComplete: true
+      };
+    }
+    if (detachedSnapshot.length > 0) {
+      context.detachedSnapshot = detachedSnapshot;
+      setDetachedConversationSnapshot(context.conversationId, detachedSnapshot);
+    }
     context.detached = true;
     context.detachContext = detachContext;
     if (typewriterIntervalRef.current) {
@@ -153,19 +221,72 @@ function useChat(options) {
     pendingInterruptStreamIdRef.current = null;
     clearPendingCancel();
     suppressStreamRef.current = false;
-  }, [clearPendingCancel, resetStreamBuffers]);
+  }, [clearPendingCancel, resetStreamBuffers, setDetachedConversationSnapshot]);
+  const refreshConversationIfVisible = useCallback(async (id) => {
+    if (!id || conversationIdRef.current !== id) return false;
+    try {
+      const detail = await adapter.getConversation(id);
+      if (!isMountedRef.current || conversationIdRef.current !== id) return false;
+      const normalizedMessages = normalizeConversationMessages(detail.messages);
+      if (normalizedMessages.length === 0) return false;
+      detachedConversationSnapshotsRef.current.delete(id);
+      setMessages(normalizedMessages);
+      setConversationTitle(detail.title ?? null);
+      return true;
+    } catch (refreshError) {
+      console.warn("[useChat] Failed to refresh conversation after detached stream completion:", refreshError);
+      return false;
+    }
+  }, [adapter]);
+  const refreshConversationIfVisibleWithRetry = useCallback((id, retryDelaysMs) => {
+    if (!id) return;
+    void (async () => {
+      for (const retryDelayMs of retryDelaysMs) {
+        if (retryDelayMs > 0) {
+          await delay(retryDelayMs);
+        }
+        if (!isMountedRef.current || conversationIdRef.current !== id) {
+          return;
+        }
+        const refreshed = await refreshConversationIfVisible(id);
+        if (refreshed) {
+          return;
+        }
+      }
+    })();
+  }, [refreshConversationIfVisible]);
   const handleStreamEvent = 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) {
+        if (streamContext.conversationId && streamContext.conversationId !== event.conversationId) {
+          detachedConversationSnapshotsRef.current.delete(streamContext.conversationId);
+        }
+        streamContext.conversationId = event.conversationId;
         streamContext.didReportConversationChange = true;
+        if (streamContext.detachedSnapshot?.length) {
+          setDetachedConversationSnapshot(event.conversationId, streamContext.detachedSnapshot);
+        }
         onConversationChange?.(event.conversationId, event.title, {
           source: "background",
           streamToken: streamContext.token,
           detached: true,
           detachContext: streamContext.detachContext
         });
+        refreshConversationIfVisibleWithRetry(event.conversationId, [0, 300, 900]);
+      } else if (event.type === "done" && event.conversationId && streamContext.didReportConversationChange) {
+        if (streamContext.detachedSnapshot?.length) {
+          setDetachedConversationSnapshot(event.conversationId, streamContext.detachedSnapshot);
+        }
+        refreshConversationIfVisibleWithRetry(event.conversationId, [0, 300, 900]);
+      }
+      const isTerminalEvent = event.type === "done" || event.type === "cancelled" || event.type === "error";
+      if (isTerminalEvent) {
+        streamContext.detachedSnapshot = void 0;
+      }
+      if (isTerminalEvent && activeStreamContextRef.current?.token === streamContext.token) {
+        activeStreamContextRef.current = null;
       }
       return;
     }
@@ -250,9 +371,9 @@ function useChat(options) {
                 return updated;
               });
               const qLen = tokenQueueRef.current.length;
-              const delay = qLen > TYPEWRITER_THRESHOLDS.VERY_FAST ? TYPEWRITER_DELAYS.VERY_FAST : qLen > TYPEWRITER_THRESHOLDS.FAST ? TYPEWRITER_DELAYS.FAST : qLen > TYPEWRITER_THRESHOLDS.NORMAL ? TYPEWRITER_DELAYS.NORMAL : TYPEWRITER_DELAYS.SLOW;
+              const delay2 = qLen > TYPEWRITER_THRESHOLDS.VERY_FAST ? TYPEWRITER_DELAYS.VERY_FAST : qLen > TYPEWRITER_THRESHOLDS.FAST ? TYPEWRITER_DELAYS.FAST : qLen > TYPEWRITER_THRESHOLDS.NORMAL ? TYPEWRITER_DELAYS.NORMAL : TYPEWRITER_DELAYS.SLOW;
               if (typewriterIntervalRef.current !== null) {
-                typewriterIntervalRef.current = setTimeout(tick, delay);
+                typewriterIntervalRef.current = setTimeout(tick, delay2);
               }
             } else {
               typewriterIntervalRef.current = null;
@@ -515,6 +636,7 @@ function useChat(options) {
         });
         resetStreamBuffers();
         if (event.conversationId) {
+          streamContext.conversationId = event.conversationId;
           streamContext.didReportConversationChange = true;
           setConversationId(event.conversationId);
           onConversationChange?.(event.conversationId, event.title, {
@@ -615,7 +737,7 @@ function useChat(options) {
         break;
       }
     }
-  }, [clearPendingCancel, flushTypewriter, onConversationChange, onError, resetStreamBuffers]);
+  }, [clearPendingCancel, flushTypewriter, onConversationChange, onError, refreshConversationIfVisibleWithRetry, resetStreamBuffers, setDetachedConversationSnapshot]);
   const trySendMessage = useCallback(async (content, sendOptions) => {
     const trimmedContent = content.trim();
     const hasAttachedResources = (sendOptions?.attachedResources?.length ?? 0) > 0;
@@ -651,6 +773,7 @@ function useChat(options) {
     const streamContext = {
       token: crypto.randomUUID(),
       assistantMessageId: assistantMessage.id,
+      conversationId: conversationIdRef.current,
       detached: false,
       didReportConversationChange: false
     };
@@ -773,6 +896,7 @@ function useChat(options) {
     activeStreamContextRef.current = null;
     clearPendingCancel();
     suppressStreamRef.current = false;
+    detachedConversationSnapshotsRef.current.clear();
   }, [clearPendingCancel, resetStreamBuffers]);
   const loadConversation = useCallback(async (id, optionsArg) => {
     const cancelActiveStream = optionsArg?.cancelActiveStream ?? true;
@@ -789,11 +913,16 @@ function useChat(options) {
       setError(null);
       const detail = await adapter.getConversation(id);
       if (!isMountedRef.current) return;
-      setMessages(detail.messages.filter((m) => m.role !== "tool").map((m) => ({
-        ...m,
-        isStreaming: false,
-        isComplete: true
-      })));
+      const normalizedMessages = normalizeConversationMessages(detail.messages);
+      const detachedSnapshot = detachedConversationSnapshotsRef.current.get(id);
+      const shouldUseDetachedSnapshot = normalizedMessages.length === 0 && !!detachedSnapshot?.length;
+      const nextMessages = shouldUseDetachedSnapshot ? cloneMessages(detachedSnapshot) : normalizedMessages;
+      if (!shouldUseDetachedSnapshot) {
+        detachedConversationSnapshotsRef.current.delete(id);
+      } else {
+        refreshConversationIfVisibleWithRetry(id, [250, 800, 1800]);
+      }
+      setMessages(nextMessages);
       setConversationId(detail.id);
       setConversationTitle(detail.title);
       currentAgentIdRef.current = detail.agentId ?? currentAgentIdRef.current;
@@ -804,7 +933,7 @@ function useChat(options) {
     } finally {
       if (isMountedRef.current) setIsLoading(false);
     }
-  }, [adapter, detachActiveStream, onError, stopStreaming]);
+  }, [adapter, detachActiveStream, onError, refreshConversationIfVisibleWithRetry, stopStreaming]);
   const newConversation = useCallback((optionsArg) => {
     const cancelActiveStream = optionsArg?.cancelActiveStream ?? true;
     const activeStream = activeStreamContextRef.current;
@@ -1063,6 +1192,7 @@ var CHAT_UI_STRINGS = {
     embedWindow: "Embed",
     collapseSidebar: "Collapse",
     history: "History",
+    related: "RELATED",
     // Resource
     remove: "Remove"
   },
@@ -1122,6 +1252,7 @@ var CHAT_UI_STRINGS = {
     embedWindow: "\u5D4C\u5165",
     collapseSidebar: "\u6536\u8D77",
     history: "\u5386\u53F2",
+    related: "\u76F8\u5173",
     // Resource
     remove: "\u79FB\u9664"
   }
@@ -1273,13 +1404,13 @@ function useConnection(options) {
     const isFirstAttempt = status === "disconnected" && reconnectAttemptsRef.current === 0;
     const baseDelay = isFirstAttempt ? 0 : Math.min(500 * Math.pow(2, reconnectAttemptsRef.current), 5e3);
     const jitter = isFirstAttempt ? 0 : Math.random() * 500;
-    const delay = baseDelay + jitter;
+    const delay2 = baseDelay + jitter;
     const timer = setTimeout(() => {
       if (!isMountedRef.current) return;
       reconnectAttemptsRef.current++;
       adapter.connect().catch(() => {
       });
-    }, delay);
+    }, delay2);
     return () => clearTimeout(timer);
   }, [status, autoConnect, adapter]);
   useEffect3(() => {
@@ -1827,13 +1958,15 @@ code {
   border-radius: 6px !important;
   overflow: visible !important;
   background: transparent !important;
-  margin: 6px 0 !important;
+  margin: 4px 0 !important;
+  padding: 0 !important;
+  gap: 0 !important;
 }
 
 [data-streamdown="code-block-header"] {
   position: absolute !important;
-  top: 10px !important;
-  left: 12px !important;
+  top: 4px !important;
+  left: 10px !important;
   right: auto !important;
   z-index: 10;
   padding: 0 !important;
@@ -1846,8 +1979,8 @@ code {
 
 [data-streamdown="code-block-actions"] {
   position: absolute !important;
-  top: 10px !important;
-  right: 8px !important;
+  top: 4px !important;
+  right: 6px !important;
   z-index: 11;
   display: flex !important;
   align-items: center;
@@ -1867,7 +2000,7 @@ code {
 
 [data-streamdown="code-block-header"] > span:first-child {
   display: inline-flex;
-  font-size: 11px;
+  font-size: 10px;
   color: var(--color-muted);
   text-transform: lowercase;
 }
@@ -1882,7 +2015,7 @@ code {
 /* 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;
+  padding: 2px !important;
   border: none !important;
   border-radius: 4px !important;
   background: var(--color-surface) !important;
@@ -1899,8 +2032,8 @@ code {
 [data-streamdown="code-block-header"] svg,
 [data-streamdown="code-block-actions"] svg {
   color: var(--color-muted) !important;
-  width: 12px !important;
-  height: 12px !important;
+  width: 11px !important;
+  height: 11px !important;
 }
 
 [data-streamdown="code-block-header"] button:hover svg,
@@ -1909,18 +2042,33 @@ code {
 }
 
 [data-streamdown="code-block-body"] {
-  padding: 8px 12px !important;
+  padding: 18px 12px 8px !important;
   background: rgba(0, 0, 0, 0.02) !important;
   border-radius: 6px !important;
+  border: none !important;
+  box-shadow: none !important;
   font-size: 13px !important;
   line-height: 1.5 !important;
   white-space: pre !important;
   overflow-x: auto !important;
 }
 
+[data-streamdown="code-block-body"] pre {
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+}
+
 [data-streamdown="code-block-body"] code {
   white-space: pre !important;
   display: block !important;
+  color: var(--color-text);
+}
+
+[data-streamdown="code-block-body"] code > span {
+  display: block;
 }
 
 .dark [data-streamdown="code-block-body"],
@@ -1934,17 +2082,38 @@ code {
 
 [data-streamdown="code-block-body"],
 [data-streamdown="code-block-body"] code {
-  color: var(--color-text) !important;
-  opacity: 0.85;
+  opacity: 1;
 }
 
 [data-streamdown="code-block-body"] code span[style] {
   background-color: transparent !important;
 }
 
-.dark [data-streamdown="code-block-body"] code span[style],
-:root.dark [data-streamdown="code-block-body"] code span[style] {
-  color: var(--shiki-dark) !important;
+[data-streamdown="code-block-body"] pre[style*="--sdm-bg"] {
+  background-color: var(--sdm-bg) !important;
+}
+
+.dark [data-streamdown="code-block-body"] pre[style*="--sdm-bg"],
+:root.dark [data-streamdown="code-block-body"] pre[style*="--sdm-bg"] {
+  background-color: var(--shiki-dark-bg, var(--sdm-bg)) !important;
+}
+
+[data-streamdown="code-block-body"] code span[style*="--sdm-c"] {
+  color: var(--sdm-c) !important;
+}
+
+.dark [data-streamdown="code-block-body"] code span[style*="--sdm-c"],
+:root.dark [data-streamdown="code-block-body"] code span[style*="--sdm-c"] {
+  color: var(--shiki-dark, var(--sdm-c)) !important;
+}
+
+[data-streamdown="code-block-body"] code span[style*="--sdm-tbg"] {
+  background-color: var(--sdm-tbg) !important;
+}
+
+.dark [data-streamdown="code-block-body"] code span[style*="--sdm-tbg"],
+:root.dark [data-streamdown="code-block-body"] code span[style*="--sdm-tbg"] {
+  background-color: var(--shiki-dark-bg, var(--sdm-tbg)) !important;
 }
 
 [data-streamdown="table-wrapper"].my-4 {
@@ -6945,6 +7114,7 @@ import { memo as memo6 } from "react";
 // src/renderer/renderers/MarkdownRenderer.tsx
 import { memo as memo3, useMemo as useMemo5, useCallback as useCallback11 } from "react";
 import { Streamdown, defaultRehypePlugins } from "streamdown";
+import { code as streamdownCode } from "@streamdown/code";
 import { harden } from "rehype-harden";
 import remarkGfm from "remark-gfm";
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -7003,6 +7173,7 @@ var MarkdownRenderer = memo3(function MarkdownRenderer2({
   const remarkPlugins = useMemo5(() => {
     return [remarkGfm];
   }, []);
+  const streamdownPlugins = useMemo5(() => ({ code: streamdownCode }), []);
   const customComponents = useMemo5(() => {
     const comps = {};
     comps.p = ({ children }) => {
@@ -7055,6 +7226,7 @@ var MarkdownRenderer = memo3(function MarkdownRenderer2({
     {
       remarkPlugins,
       rehypePlugins,
+      plugins: streamdownPlugins,
       components: customComponents,
       mode: isStreaming ? "streaming" : "static",
       isAnimating: isStreaming,
@@ -7790,7 +7962,7 @@ var SanqianChatMessage = memo6(function SanqianChatMessage2({ message }) {
       "div",
       {
         className: `message-bubble-wrapper ${isUser ? "rounded-2xl shadow-sm bg-[var(--chat-accent)] text-white px-4 py-3 whitespace-pre-wrap break-words" : "text-[var(--chat-text)] break-words"}`,
-        children: isUser ? /* @__PURE__ */ jsx9("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content ? /* @__PURE__ */ jsx9(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" }) : showStreamingPlaceholder ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 text-[var(--chat-muted)] italic min-h-[1.5rem]", children: [
+        children: isUser ? /* @__PURE__ */ jsx9("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content ? /* @__PURE__ */ jsx9(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-0" }) : showStreamingPlaceholder ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 text-[var(--chat-muted)] italic min-h-[1.5rem]", children: [
           /* @__PURE__ */ jsxs4("div", { className: "flex gap-1 items-center", children: [
             /* @__PURE__ */ jsx9("span", { className: "w-1.5 h-1.5 bg-[var(--chat-accent)] rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
             /* @__PURE__ */ jsx9("span", { className: "w-1.5 h-1.5 bg-[var(--chat-accent)] rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
@@ -10001,7 +10173,7 @@ var FloatingChat = memo15(function FloatingChat2({
         "div",
         {
           className: `message-bubble-wrapper ${isUser ? "rounded-2xl shadow-sm bg-[var(--chat-accent)] text-white px-4 py-3 whitespace-pre-wrap break-words" : "text-[var(--chat-text)] break-words"}`,
-          children: isUser ? /* @__PURE__ */ jsx22("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && (renderContent ? /* @__PURE__ */ jsx22("div", { className: "prose prose-chat dark:prose-invert max-w-none px-3", children: renderContent(message.content, message.isStreaming ?? false) }) : /* @__PURE__ */ jsx22(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" }))
+          children: isUser ? /* @__PURE__ */ jsx22("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && (renderContent ? /* @__PURE__ */ jsx22("div", { className: "prose prose-chat dark:prose-invert max-w-none px-0", children: renderContent(message.content, message.isStreaming ?? false) }) : /* @__PURE__ */ jsx22(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-0" }))
         }
       ) }) }) });
     },
@@ -10239,7 +10411,7 @@ var HistoryList = memo16(function HistoryList2({
     deleteText: "#ef4444",
     loadingDot: isDarkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.2)"
   };
-  const loadingDots = /* @__PURE__ */ jsx23("div", { style: { display: "flex", justifyContent: "center", padding: "1.5rem 0" }, children: /* @__PURE__ */ jsx23("div", { style: { display: "flex", gap: "0.25rem" }, children: [0, 150, 300].map((delay) => /* @__PURE__ */ jsx23(
+  const loadingDots = /* @__PURE__ */ jsx23("div", { style: { display: "flex", justifyContent: "center", padding: "1.5rem 0" }, children: /* @__PURE__ */ jsx23("div", { style: { display: "flex", gap: "0.25rem" }, children: [0, 150, 300].map((delay2) => /* @__PURE__ */ jsx23(
     "span",
     {
       style: {
@@ -10248,10 +10420,10 @@ var HistoryList = memo16(function HistoryList2({
         borderRadius: "50%",
         background: colors.loadingDot,
         animation: "bounce 1s infinite",
-        animationDelay: `${delay}ms`
+        animationDelay: `${delay2}ms`
       }
     },
-    delay
+    delay2
   )) }) });
   if (isLoading && conversations.length === 0) {
     return loadingDots;
@@ -10264,7 +10436,7 @@ var HistoryList = memo16(function HistoryList2({
       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;
+      const resolvedHighlightLabel = isHighlighted ? (typeof highlightedLabel === "function" ? highlightedLabel(conv) : highlightedLabel) ?? strings.related ?? "RELATED" : null;
       return /* @__PURE__ */ jsxs17(
         "div",
         {
@@ -10915,7 +11087,7 @@ var CompactChat = memo18(function CompactChat2({
               content: message.content,
               isStreaming: message.isStreaming,
               linkHandler,
-              className: "px-3"
+              className: "px-0"
             }
           )
         }
@@ -11115,7 +11287,8 @@ var CompactChat = memo18(function CompactChat2({
                   loadMore: mergedStrings.loadMore,
                   today: mergedStrings.today,
                   yesterday: mergedStrings.yesterday,
-                  delete: mergedStrings.delete
+                  delete: mergedStrings.delete,
+                  related: mergedStrings.related
                 }
               }
             )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yushaw/sanqian-chat",
-  "version": "0.2.42",
+  "version": "0.2.44",
   "description": "Floating chat window SDK for Sanqian AI Assistant",
   "main": "./dist/main/index.js",
   "types": "./dist/main/index.d.ts",
@@ -44,6 +44,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@streamdown/code": "^1.0.3",
     "@yushaw/sanqian-sdk": "^0.3.26",
     "react-virtuoso": "^4.15.0",
     "rehype-harden": "^1.1.6",

package/src/renderer/styles/chat.css

@@ -408,13 +408,15 @@ code {
   border-radius: 6px !important;
   overflow: visible !important;
   background: transparent !important;
-  margin: 6px 0 !important;
+  margin: 4px 0 !important;
+  padding: 0 !important;
+  gap: 0 !important;
 }
 
 [data-streamdown="code-block-header"] {
   position: absolute !important;
-  top: 10px !important;
-  left: 12px !important;
+  top: 4px !important;
+  left: 10px !important;
   right: auto !important;
   z-index: 10;
   padding: 0 !important;
@@ -427,8 +429,8 @@ code {
 
 [data-streamdown="code-block-actions"] {
   position: absolute !important;
-  top: 10px !important;
-  right: 8px !important;
+  top: 4px !important;
+  right: 6px !important;
   z-index: 11;
   display: flex !important;
   align-items: center;
@@ -448,7 +450,7 @@ code {
 
 [data-streamdown="code-block-header"] > span:first-child {
   display: inline-flex;
-  font-size: 11px;
+  font-size: 10px;
   color: var(--color-muted);
   text-transform: lowercase;
 }
@@ -463,7 +465,7 @@ code {
 /* 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;
+  padding: 2px !important;
   border: none !important;
   border-radius: 4px !important;
   background: var(--color-surface) !important;
@@ -480,8 +482,8 @@ code {
 [data-streamdown="code-block-header"] svg,
 [data-streamdown="code-block-actions"] svg {
   color: var(--color-muted) !important;
-  width: 12px !important;
-  height: 12px !important;
+  width: 11px !important;
+  height: 11px !important;
 }
 
 [data-streamdown="code-block-header"] button:hover svg,
@@ -490,18 +492,33 @@ code {
 }
 
 [data-streamdown="code-block-body"] {
-  padding: 8px 12px !important;
+  padding: 18px 12px 8px !important;
   background: rgba(0, 0, 0, 0.02) !important;
   border-radius: 6px !important;
+  border: none !important;
+  box-shadow: none !important;
   font-size: 13px !important;
   line-height: 1.5 !important;
   white-space: pre !important;
   overflow-x: auto !important;
 }
 
+[data-streamdown="code-block-body"] pre {
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+}
+
 [data-streamdown="code-block-body"] code {
   white-space: pre !important;
   display: block !important;
+  color: var(--color-text);
+}
+
+[data-streamdown="code-block-body"] code > span {
+  display: block;
 }
 
 .dark [data-streamdown="code-block-body"],
@@ -515,17 +532,38 @@ code {
 
 [data-streamdown="code-block-body"],
 [data-streamdown="code-block-body"] code {
-  color: var(--color-text) !important;
-  opacity: 0.85;
+  opacity: 1;
 }
 
 [data-streamdown="code-block-body"] code span[style] {
   background-color: transparent !important;
 }
 
-.dark [data-streamdown="code-block-body"] code span[style],
-:root.dark [data-streamdown="code-block-body"] code span[style] {
-  color: var(--shiki-dark) !important;
+[data-streamdown="code-block-body"] pre[style*="--sdm-bg"] {
+  background-color: var(--sdm-bg) !important;
+}
+
+.dark [data-streamdown="code-block-body"] pre[style*="--sdm-bg"],
+:root.dark [data-streamdown="code-block-body"] pre[style*="--sdm-bg"] {
+  background-color: var(--shiki-dark-bg, var(--sdm-bg)) !important;
+}
+
+[data-streamdown="code-block-body"] code span[style*="--sdm-c"] {
+  color: var(--sdm-c) !important;
+}
+
+.dark [data-streamdown="code-block-body"] code span[style*="--sdm-c"],
+:root.dark [data-streamdown="code-block-body"] code span[style*="--sdm-c"] {
+  color: var(--shiki-dark, var(--sdm-c)) !important;
+}
+
+[data-streamdown="code-block-body"] code span[style*="--sdm-tbg"] {
+  background-color: var(--sdm-tbg) !important;
+}
+
+.dark [data-streamdown="code-block-body"] code span[style*="--sdm-tbg"],
+:root.dark [data-streamdown="code-block-body"] code span[style*="--sdm-tbg"] {
+  background-color: var(--shiki-dark-bg, var(--sdm-tbg)) !important;
 }
 
 [data-streamdown="table-wrapper"].my-4 {