@huyooo/ai-chat-shared 0.2.12 → 0.2.14

package/src/styles.css

@@ -295,6 +295,8 @@
   overflow-x: auto;
   margin: 1em 0;
   border-radius: 8px;
+  /* 确保滚动条始终可见（内容超出时） */
+  scrollbar-gutter: stable;
 }
 
 /* 统一滚动条样式 */
@@ -316,9 +318,10 @@
   background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
 }
 
-/* 表格 */
-.markdown-table {
-  width: 100%;
+/* 表格（仅在 markdown 容器内生效，避免影响业务里其它同名 class） */
+.markdown-content .markdown-table {
+  min-width: 100%;
+  width: max-content;
   border-collapse: separate;
   border-spacing: 0;
   margin: 0;
@@ -329,11 +332,11 @@
 }
 
 /* 表头样式 */
-.markdown-table thead {
+.markdown-content .markdown-table thead {
   display: table-header-group;
 }
 
-.markdown-table th {
+.markdown-content .markdown-table th {
   padding: 0.875em 1em;
   text-align: left;
   font-weight: 600;
@@ -344,16 +347,16 @@
   background: transparent;
 }
 
-.markdown-table th:last-child {
+.markdown-content .markdown-table th:last-child {
   border-right: none;
 }
 
 /* 表格内容样式 */
-.markdown-table tbody {
+.markdown-content .markdown-table tbody {
   display: table-row-group;
 }
 
-.markdown-table td {
+.markdown-content .markdown-table td {
   padding: 0.875em 1em;
   text-align: left;
   color: var(--chat-text, #ccc);
@@ -363,53 +366,53 @@
   vertical-align: top;
 }
 
-.markdown-table td:last-child {
+.markdown-content .markdown-table td:last-child {
   border-right: none;
 }
 
-.markdown-table tbody tr:last-child td {
+.markdown-content .markdown-table tbody tr:last-child td {
   border-bottom: none;
 }
 
 /* 表格行悬停效果（可选，保持简洁） */
-.markdown-table tbody tr {
+.markdown-content .markdown-table tbody tr {
   transition: opacity 0.15s ease;
 }
 
 /* 表格中的图标和特殊内容 */
-.markdown-table td img,
-.markdown-table td svg,
-.markdown-table th img,
-.markdown-table th svg {
+.markdown-content .markdown-table td img,
+.markdown-content .markdown-table td svg,
+.markdown-content .markdown-table th img,
+.markdown-content .markdown-table th svg {
   vertical-align: middle;
   margin-right: 0.5em;
   display: inline-block;
 }
 
 /* 表格中的进度条、星级等 */
-.markdown-table td .progress,
-.markdown-table td .stars {
+.markdown-content .markdown-table td .progress,
+.markdown-content .markdown-table td .stars {
   display: inline-flex;
   align-items: center;
   gap: 0.25em;
 }
 
 /* 表格中的代码块 */
-.markdown-table td code,
-.markdown-table th code {
+.markdown-content .markdown-table td code,
+.markdown-content .markdown-table th code {
   font-size: 0.85em;
   padding: 0.15em 0.35em;
 }
 
 /* 表格响应式 */
 @media (max-width: 768px) {
-  .markdown-table {
+  .markdown-content .markdown-table {
     font-size: 13px;
     border-radius: 6px;
   }
 
-  .markdown-table th,
-  .markdown-table td {
+  .markdown-content .markdown-table th,
+  .markdown-content .markdown-table td {
     padding: 0.6em 0.8em;
   }
 }
@@ -503,3 +506,252 @@
   user-select: none;
   opacity: 0.5;
 }
+
+/* ============================================
+   LaTeX 数学公式样式
+   ============================================ */
+
+/* 块级公式 */
+.latex-block {
+  display: block;
+  margin: 1em 0;
+  padding: 0.75em 1em;
+  overflow-x: auto;
+  background: var(--chat-latex-bg, rgba(255, 255, 255, 0.02));
+  border-radius: 8px;
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+}
+
+/* LaTeX fenced 代码块渲染：嵌在代码块容器内时由外层负责卡片与 padding，避免套娃 */
+.code-block-wrapper .latex-rendered {
+  margin: 0;
+  padding: 14px 18px;
+}
+
+.code-block-wrapper .latex-rendered .latex-block {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+.latex-block .katex-display {
+  margin: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  text-align: left;
+}
+
+.latex-block .katex {
+  text-align: left;
+}
+
+/* 行内公式 */
+.latex-inline {
+  display: inline;
+  padding: 0 0.15em;
+}
+
+/* 公式错误提示 */
+.latex-error {
+  color: var(--chat-error, #ef4444);
+  background: rgba(239, 68, 68, 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+/* KaTeX 样式覆盖 - 适配暗色主题 */
+.katex {
+  font-size: 1.1em;
+  color: var(--chat-text, #e5e7eb);
+}
+
+.katex .mord,
+.katex .mop,
+.katex .mrel,
+.katex .mbin,
+.katex .mpunct,
+.katex .mopen,
+.katex .mclose,
+.katex .minner {
+  color: inherit;
+}
+
+/* KaTeX 分数线颜色 */
+.katex .frac-line {
+  background: var(--chat-text, #e5e7eb);
+}
+
+/* KaTeX 根号 */
+.katex .sqrt > .sqrt-sign {
+  color: var(--chat-text, #e5e7eb);
+}
+
+/* KaTeX 矩阵边框 */
+.katex .mord.mtight,
+.katex .delimsizing {
+  color: var(--chat-text, #e5e7eb);
+}
+
+/* ==================== Markdown 滚动条样式（与系统 chat-scrollbar 对齐） ==================== */
+/* 说明：
+ * - table/pre/code/latex/mermaid 等在 markdown 中都会产生横向/纵向滚动
+ * - 这里统一使用系统变量 --chat-scrollbar / --chat-scrollbar-hover
+ */
+
+.markdown-content pre::-webkit-scrollbar,
+.text-block pre::-webkit-scrollbar,
+.markdown-code-block::-webkit-scrollbar,
+.markdown-content .markdown-table-wrapper::-webkit-scrollbar,
+.text-block .markdown-table-wrapper::-webkit-scrollbar,
+.latex-block::-webkit-scrollbar,
+.mermaid-rendered::-webkit-scrollbar,
+.mermaid-source::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.markdown-content pre::-webkit-scrollbar-track,
+.text-block pre::-webkit-scrollbar-track,
+.markdown-code-block::-webkit-scrollbar-track,
+.markdown-content .markdown-table-wrapper::-webkit-scrollbar-track,
+.text-block .markdown-table-wrapper::-webkit-scrollbar-track,
+.latex-block::-webkit-scrollbar-track,
+.mermaid-rendered::-webkit-scrollbar-track,
+.mermaid-source::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.markdown-content pre::-webkit-scrollbar-thumb,
+.text-block pre::-webkit-scrollbar-thumb,
+.markdown-code-block::-webkit-scrollbar-thumb,
+.markdown-content .markdown-table-wrapper::-webkit-scrollbar-thumb,
+.text-block .markdown-table-wrapper::-webkit-scrollbar-thumb,
+.latex-block::-webkit-scrollbar-thumb,
+.mermaid-rendered::-webkit-scrollbar-thumb,
+.mermaid-source::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
+}
+
+.markdown-content pre::-webkit-scrollbar-thumb:hover,
+.text-block pre::-webkit-scrollbar-thumb:hover,
+.markdown-code-block::-webkit-scrollbar-thumb:hover,
+.markdown-content .markdown-table-wrapper::-webkit-scrollbar-thumb:hover,
+.text-block .markdown-table-wrapper::-webkit-scrollbar-thumb:hover,
+.latex-block::-webkit-scrollbar-thumb:hover,
+.mermaid-rendered::-webkit-scrollbar-thumb:hover,
+.mermaid-source::-webkit-scrollbar-thumb:hover {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
+}
+
+/* ==================== Mermaid 图表样式 ==================== */
+
+/* Mermaid 占位符（加载中） */
+.mermaid-placeholder {
+  margin: 1em 0;
+  padding: 2em;
+  background: var(--chat-muted, #2a2a2a);
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
+  border-radius: 8px;
+  text-align: center;
+}
+
+.mermaid-loading {
+  color: var(--chat-text-muted, #888);
+  font-size: 0.9em;
+}
+
+/* Mermaid 嵌在代码块容器内时：外层已有边框/圆角，这里只做内容区对齐 */
+.code-block-wrapper .mermaid-placeholder,
+.code-block-wrapper .mermaid-rendered,
+.code-block-wrapper .mermaid-error-container {
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  padding: 14px 18px;
+}
+
+/* 错误态仍然需要明显提示 */
+.code-block-wrapper .mermaid-error-container {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* Mermaid 渲染后容器 */
+.mermaid-rendered {
+  /* Mermaid 通常嵌在消息的代码块容器里，外层已有卡片/边框。
+     这里保持最小必要样式：只负责滚动与尺寸适配，避免“套娃边框/多余背景”。 */
+  margin: 0.75em 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  overflow-x: auto;
+}
+
+.mermaid-rendered svg {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0 auto;
+}
+
+/* Mermaid 错误状态 */
+.mermaid-error-container {
+  margin: 1em 0;
+  padding: 1em;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 8px;
+}
+
+.mermaid-error {
+  color: #ef4444;
+  font-size: 0.9em;
+  margin-bottom: 0.5em;
+}
+
+.mermaid-source {
+  margin: 0;
+  padding: 0.75em;
+  background: var(--chat-muted, #1a1a1a);
+  border-radius: 4px;
+  font-size: 0.8em;
+  color: var(--chat-text-muted, #888);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 200px;
+  overflow: auto;
+}
+
+/* Mermaid 深色主题覆盖 */
+.mermaid-rendered .node rect,
+.mermaid-rendered .node circle,
+.mermaid-rendered .node ellipse,
+.mermaid-rendered .node polygon,
+.mermaid-rendered .node path {
+  fill: var(--chat-muted, #3a3a3a);
+  stroke: var(--chat-border, #555);
+}
+
+.mermaid-rendered .node .label {
+  color: var(--chat-text, #e4e4e7);
+}
+
+.mermaid-rendered .edgeLabel {
+  background-color: var(--chat-muted, #2a2a2a);
+  color: var(--chat-text, #e4e4e7);
+}
+
+.mermaid-rendered .edgePath path {
+  stroke: var(--chat-text-muted, #888);
+}
+
+.mermaid-rendered .marker {
+  fill: var(--chat-text-muted, #888);
+  stroke: var(--chat-text-muted, #888);
+}

package/src/types.ts

@@ -30,19 +30,6 @@ export interface CodeBlock extends ContentBlockBase {
 /** 内容块联合类型 */
 export type ContentBlock = TextBlock | CodeBlock
 
-// ============ 工具渲染器类型 ============
-
-/** 工具渲染器 Props */
-export interface ToolRendererProps {
-  /** 工具名称 */
-  toolName: string
-  /** 工具参数 */
-  toolArgs: Record<string, unknown>
-  /** 工具返回结果 */
-  toolResult: unknown
-  /** 执行状态 */
-  status: 'running' | 'completed' | 'error'
-}
 
 // ============ 内置工具结果数据类型 ============
 

package/src/visual.ts

@@ -0,0 +1,68 @@
+import { renderMarkdown } from './markdown'
+
+function normalizeLanguage(lang?: string): string {
+  return (lang || '').trim().toLowerCase()
+}
+
+export function isMermaidLanguage(lang?: string): boolean {
+  return normalizeLanguage(lang) === 'mermaid'
+}
+
+export function isLatexLanguage(lang?: string): boolean {
+  const l = normalizeLanguage(lang)
+  return l === 'latex' || l === 'katex' || l === 'tex'
+}
+
+export function isLatexDocument(code: string): boolean {
+  const t = (code || '').trim()
+  return /\\documentclass\b|\\usepackage\b|\\begin\{document\}|\\end\{document\}/.test(t)
+}
+
+export function canVisualizeLatex(code: string): boolean {
+  const t = (code || '').trim()
+  if (!t) return false
+  if (isLatexDocument(t)) return false
+  return true
+}
+
+export function hasLatexDelimiters(code: string): boolean {
+  const t = (code || '').trim()
+  if (!t) return false
+  return (
+    /\$\$[\s\S]*\$\$/.test(t) ||
+    /\\\[[\s\S]*\\\]/.test(t) ||
+    /\\\([\s\S]*\\\)/.test(t) ||
+    /(?<!\$)\$(?!\$)[\s\S]*?\$(?!\$)/.test(t)
+  )
+}
+
+export function shouldShowVisualToggle(lang?: string, code?: string): boolean {
+  if (isMermaidLanguage(lang)) return true
+  if (isLatexLanguage(lang)) return canVisualizeLatex(code || '')
+  return false
+}
+
+/**
+ * 将 fenced 的 latex/katex/tex 代码块渲染成 HTML（复用 shared 的 renderMarkdown + latex 预处理）。
+ * - 如果是完整 LaTeX 文档：返回提示 + code block（避免 KaTeX 报错）
+ * - 如果已经带分隔符：直接渲染（避免二次包裹）
+ * - 否则：自动包一层 $$...$$ 作为 display 公式渲染
+ */
+export function renderFencedLatexToHtml(code: string): string {
+  const t = (code || '').trim()
+  if (!t) return ''
+
+  if (!canVisualizeLatex(t)) {
+    return renderMarkdown(
+      `> 不支持将完整 LaTeX 文档作为公式渲染，请切换到代码视图查看。\n\n\`\`\`latex\n${t}\n\`\`\``
+    )
+  }
+
+  if (hasLatexDelimiters(t)) {
+    return renderMarkdown(t)
+  }
+
+  return renderMarkdown(`$$\n${t}\n$$`)
+}
+
+