@yushaw/sanqian-chat 0.2.41 → 0.2.43

package/dist/core/index.d.mts

@@ -64,6 +64,7 @@ interface ChatUiStrings {
     embedWindow: string;
     collapseSidebar: string;
     history: string;
+    related: string;
     remove: string;
 }
 type ChatThemeMode = 'light' | 'dark' | 'auto';

package/dist/core/index.d.ts

@@ -64,6 +64,7 @@ interface ChatUiStrings {
     embedWindow: string;
     collapseSidebar: string;
     history: string;
+    related: string;
     remove: string;
 }
 type ChatThemeMode = 'light' | 'dark' | 'auto';

package/dist/main/index.d.mts

@@ -497,6 +497,7 @@ interface ChatUiStrings {
     embedWindow: string;
     collapseSidebar: string;
     history: string;
+    related: string;
     remove: string;
 }
 type ChatThemeMode = 'light' | 'dark' | 'auto';

package/dist/main/index.d.ts

@@ -497,6 +497,7 @@ interface ChatUiStrings {
     embedWindow: string;
     collapseSidebar: string;
     history: string;
+    related: string;
     remove: string;
 }
 type ChatThemeMode = 'light' | 'dark' | 'auto';

package/dist/preload/factories.d.mts

@@ -62,6 +62,7 @@ interface ChatUiStrings {
     embedWindow: string;
     collapseSidebar: string;
     history: string;
+    related: string;
     remove: string;
 }
 type ChatThemeMode = 'light' | 'dark' | 'auto';

package/dist/preload/factories.d.ts

@@ -62,6 +62,7 @@ interface ChatUiStrings {
     embedWindow: string;
     collapseSidebar: string;
     history: string;
+    related: string;
     remove: string;
 }
 type ChatThemeMode = 'light' | 'dark' | 'auto';

package/dist/renderer/index.d.mts

@@ -67,6 +67,7 @@ interface ChatUiStrings {
     embedWindow: string;
     collapseSidebar: string;
     history: string;
+    related: string;
     remove: string;
 }
 type ChatThemeMode = 'light' | 'dark' | 'auto';
@@ -1259,6 +1260,7 @@ interface HistoryListProps {
         today?: string;
         yesterday?: string;
         delete?: string;
+        related?: string;
     };
     /** Whether a conversation should be highlighted (host-defined relation) */
     isConversationHighlighted?: (conversation: ConversationInfo) => boolean;
@@ -1350,6 +1352,8 @@ interface CompactChatHistoryConfig {
     /** Label shown on highlighted rows. */
     highlightedLabel?: string | ((conversation: ConversationInfo) => string | null | undefined);
 }
+type LegacyNewConversationRef = React.MutableRefObject<(() => void) | null>;
+type ExtendedNewConversationRef = React.MutableRefObject<((options?: ConversationSwitchOptions) => void) | null>;
 interface CompactChatProps {
     /** Chat adapter for backend communication */
     adapter: ChatAdapter;
@@ -1384,7 +1388,7 @@ interface CompactChatProps {
     /** Ref to expose sendMessage function for external input */
     sendMessageRef?: React.MutableRefObject<((message: string) => void) | null>;
     /** Ref to expose newConversation function */
-    newConversationRef?: React.MutableRefObject<((options?: ConversationSwitchOptions) => void) | null>;
+    newConversationRef?: LegacyNewConversationRef | ExtendedNewConversationRef;
     /** Ref to expose loadConversation function */
     loadConversationRef?: React.MutableRefObject<((id: string, options?: ConversationSwitchOptions) => Promise<void>) | null>;
     /** Ref to expose stopStreaming function */

package/dist/renderer/index.d.ts

@@ -67,6 +67,7 @@ interface ChatUiStrings {
     embedWindow: string;
     collapseSidebar: string;
     history: string;
+    related: string;
     remove: string;
 }
 type ChatThemeMode = 'light' | 'dark' | 'auto';
@@ -1259,6 +1260,7 @@ interface HistoryListProps {
         today?: string;
         yesterday?: string;
         delete?: string;
+        related?: string;
     };
     /** Whether a conversation should be highlighted (host-defined relation) */
     isConversationHighlighted?: (conversation: ConversationInfo) => boolean;
@@ -1350,6 +1352,8 @@ interface CompactChatHistoryConfig {
     /** Label shown on highlighted rows. */
     highlightedLabel?: string | ((conversation: ConversationInfo) => string | null | undefined);
 }
+type LegacyNewConversationRef = React.MutableRefObject<(() => void) | null>;
+type ExtendedNewConversationRef = React.MutableRefObject<((options?: ConversationSwitchOptions) => void) | null>;
 interface CompactChatProps {
     /** Chat adapter for backend communication */
     adapter: ChatAdapter;
@@ -1384,7 +1388,7 @@ interface CompactChatProps {
     /** Ref to expose sendMessage function for external input */
     sendMessageRef?: React.MutableRefObject<((message: string) => void) | null>;
     /** Ref to expose newConversation function */
-    newConversationRef?: React.MutableRefObject<((options?: ConversationSwitchOptions) => void) | null>;
+    newConversationRef?: LegacyNewConversationRef | ExtendedNewConversationRef;
     /** Ref to expose loadConversation function */
     loadConversationRef?: React.MutableRefObject<((id: string, options?: ConversationSwitchOptions) => Promise<void>) | null>;
     /** Ref to expose stopStreaming function */

package/dist/renderer/index.js

@@ -1151,6 +1151,7 @@ var CHAT_UI_STRINGS = {
     embedWindow: "Embed",
     collapseSidebar: "Collapse",
     history: "History",
+    related: "RELATED",
     // Resource
     remove: "Remove"
   },
@@ -1210,6 +1211,7 @@ var CHAT_UI_STRINGS = {
     embedWindow: "\u5D4C\u5165",
     collapseSidebar: "\u6536\u8D77",
     history: "\u5386\u53F2",
+    related: "\u76F8\u5173",
     // Resource
     remove: "\u79FB\u9664"
   }
@@ -1915,13 +1917,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;
@@ -1934,8 +1938,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;
@@ -1955,7 +1959,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;
 }
@@ -1970,7 +1974,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;
@@ -1987,8 +1991,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,
@@ -1997,18 +2001,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"],
@@ -2022,17 +2041,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 {
@@ -7025,6 +7065,7 @@ var import_react21 = require("react");
 // src/renderer/renderers/MarkdownRenderer.tsx
 var import_react18 = require("react");
 var import_streamdown = require("streamdown");
+var import_code = require("@streamdown/code");
 var import_rehype_harden = require("rehype-harden");
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -7083,6 +7124,7 @@ var MarkdownRenderer = (0, import_react18.memo)(function MarkdownRenderer2({
   const remarkPlugins = (0, import_react18.useMemo)(() => {
     return [import_remark_gfm.default];
   }, []);
+  const streamdownPlugins = (0, import_react18.useMemo)(() => ({ code: import_code.code }), []);
   const customComponents = (0, import_react18.useMemo)(() => {
     const comps = {};
     comps.p = ({ children }) => {
@@ -7135,6 +7177,7 @@ var MarkdownRenderer = (0, import_react18.memo)(function MarkdownRenderer2({
     {
       remarkPlugins,
       rehypePlugins,
+      plugins: streamdownPlugins,
       components: customComponents,
       mode: isStreaming ? "streaming" : "static",
       isAnimating: isStreaming,
@@ -7870,7 +7913,7 @@ var SanqianChatMessage = (0, import_react21.memo)(function SanqianChatMessage2({
       "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__ */ (0, import_jsx_runtime9.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" }) : showStreamingPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 text-[var(--chat-muted)] italic min-h-[1.5rem]", children: [
+        children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-0" }) : showStreamingPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 text-[var(--chat-muted)] italic min-h-[1.5rem]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-1 items-center", children: [
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-1.5 h-1.5 bg-[var(--chat-accent)] rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-1.5 h-1.5 bg-[var(--chat-accent)] rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
@@ -10073,7 +10116,7 @@ var FloatingChat = (0, import_react35.memo)(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__ */ (0, import_jsx_runtime22.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && (renderContent ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "prose prose-chat dark:prose-invert max-w-none px-3", children: renderContent(message.content, message.isStreaming ?? false) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-3" }))
+          children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }) : message.content && (renderContent ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "prose prose-chat dark:prose-invert max-w-none px-0", children: renderContent(message.content, message.isStreaming ?? false) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkdownRenderer, { content: message.content, isStreaming: message.isStreaming, className: "px-0" }))
         }
       ) }) }) });
     },
@@ -10336,7 +10379,7 @@ var HistoryList = (0, import_react36.memo)(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__ */ (0, import_jsx_runtime23.jsxs)(
         "div",
         {
@@ -10987,7 +11030,7 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
               content: message.content,
               isStreaming: message.isStreaming,
               linkHandler,
-              className: "px-3"
+              className: "px-0"
             }
           )
         }
@@ -11187,7 +11230,8 @@ var CompactChat = (0, import_react38.memo)(function CompactChat2({
                   loadMore: mergedStrings.loadMore,
                   today: mergedStrings.today,
                   yesterday: mergedStrings.yesterday,
-                  delete: mergedStrings.delete
+                  delete: mergedStrings.delete,
+                  related: mergedStrings.related
                 }
               }
             )

package/dist/renderer/index.mjs

@@ -1063,6 +1063,7 @@ var CHAT_UI_STRINGS = {
     embedWindow: "Embed",
     collapseSidebar: "Collapse",
     history: "History",
+    related: "RELATED",
     // Resource
     remove: "Remove"
   },
@@ -1122,6 +1123,7 @@ var CHAT_UI_STRINGS = {
     embedWindow: "\u5D4C\u5165",
     collapseSidebar: "\u6536\u8D77",
     history: "\u5386\u53F2",
+    related: "\u76F8\u5173",
     // Resource
     remove: "\u79FB\u9664"
   }
@@ -1827,13 +1829,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 +1850,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 +1871,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 +1886,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 +1903,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 +1913,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 +1953,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 +6985,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 +7044,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 +7097,7 @@ var MarkdownRenderer = memo3(function MarkdownRenderer2({
     {
       remarkPlugins,
       rehypePlugins,
+      plugins: streamdownPlugins,
       components: customComponents,
       mode: isStreaming ? "streaming" : "static",
       isAnimating: isStreaming,
@@ -7790,7 +7833,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 +10044,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" }))
         }
       ) }) }) });
     },
@@ -10264,7 +10307,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 +10958,7 @@ var CompactChat = memo18(function CompactChat2({
               content: message.content,
               isStreaming: message.isStreaming,
               linkHandler,
-              className: "px-3"
+              className: "px-0"
             }
           )
         }
@@ -11115,7 +11158,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.41",
+  "version": "0.2.43",
   "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 {

package/src/renderer/styles/coreCss.ts

@@ -415,13 +415,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;
@@ -434,8 +436,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;
@@ -455,7 +457,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;
 }
@@ -470,7 +472,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;
@@ -487,8 +489,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,
@@ -497,18 +499,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"],
@@ -522,17 +539,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 {

package/src/renderer/styles/safe.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 {