@huyooo/ai-chat-frontend-vue 0.2.13 → 0.2.14

package/src/components/message/parts/TextPart.vue

@@ -1,28 +1,770 @@
 <template>
-  <div 
-    v-if="text" 
-    class="text-part markdown-content"
-    v-html="html"
-  />
+  <div v-if="text" ref="containerRef" class="text-part">
+    <!-- 渲染解析后的内容块 -->
+    <template v-for="block in blocks" :key="block.id">
+      <!-- 文本块：使用 markdown 渲染 -->
+      <div v-if="block.type === 'text'" class="text-block" v-html="renderMarkdown(block.content)"></div>
+      <!-- 代码块 -->
+      <div v-else-if="block.type === 'code'" class="code-block-wrapper">
+        <div class="code-header">
+          <span class="code-language">{{ block.language || 'plaintext' }}</span>
+          <div class="code-actions">
+            <button
+              v-if="shouldShowVisualToggle(block.language, block.content)"
+              class="action-btn"
+              type="button"
+              :title="visualShowMap[block.id] ? '切换为代码视图' : '切换为可视化视图'"
+              @click="toggleVisualView(block.id, block.language)"
+            >
+              <!-- 切换图标 -->
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="17 1 21 5 17 9"></polyline>
+                <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
+                <polyline points="7 23 3 19 7 15"></polyline>
+                <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
+              </svg>
+              <span>切换视图</span>
+            </button>
+            <button 
+              class="action-btn" 
+              @click="copyCode(block.content, block.id)"
+              :title="copiedId === block.id ? '已复制' : '复制代码'"
+            >
+              <svg v-if="copiedId !== block.id" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+              </svg>
+              <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="20 6 9 17 4 12"></polyline>
+              </svg>
+              <span>{{ copiedId === block.id ? '已复制' : '复制' }}</span>
+            </button>
+          </div>
+        </div>
+        <!-- Mermaid: 默认显示代码，点击"显示图表"后才渲染 -->
+        <div
+          v-if="isMermaidBlockLanguage(block.language) && visualShowMap[block.id]"
+          class="mermaid-placeholder"
+          :data-mermaid-code-b64="encodeMermaidCodeToBase64Url(block.content)"
+        >
+          <div class="mermaid-loading">加载图表中...</div>
+        </div>
+        <!-- LaTeX: 闭合后自动切换到渲染视图 -->
+        <div
+          v-if="isLatexBlockLanguage(block.language) && visualShowMap[block.id]"
+          class="latex-rendered"
+          v-html="renderFencedLatexToHtml(block.content)"
+        ></div>
+        <pre
+          v-if="(!(isMermaidBlockLanguage(block.language) || isLatexBlockLanguage(block.language))) || !visualShowMap[block.id] || (isLatexBlockLanguage(block.language) && !canVisualizeLatex(block.content))"
+          class="code-block"
+        ><code :class="block.language ? `language-${block.language}` : ''" v-html="highlightCode(block.content, block.language)"></code></pre>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { renderMarkdown } from '@huyooo/ai-chat-shared'
+import { ref, watch, nextTick } from 'vue'
+import {
+  createStreamParseState,
+  finishStreamParse,
+  parseContentStream,
+  highlightCode,
+  renderMarkdown,
+  initMermaid,
+  renderMermaidDiagrams,
+  encodeMermaidCodeToBase64Url,
+  type ContentBlock,
+  type StreamParseState,
+} from '@huyooo/ai-chat-shared'
+import {
+  canVisualizeLatex,
+  isLatexLanguage,
+  isMermaidLanguage,
+  renderFencedLatexToHtml,
+  shouldShowVisualToggle,
+} from './visual'
+// KaTeX CSS for LaTeX rendering
+import 'katex/dist/katex.min.css'
+
+// 初始化 Mermaid
+initMermaid()
 
 const props = defineProps<{
   text: string
 }>()
 
-const html = computed(() => renderMarkdown(props.text))
+const containerRef = ref<HTMLDivElement | null>(null)
+const streamState = ref<StreamParseState>(createStreamParseState())
+const lastText = ref('')
+const blocks = ref<ContentBlock[]>([])
+// 记录哪些可视化 block 要显示“可视化视图”（mermaid / latex），默认 undefined/false = 显示代码
+const visualShowMap = ref<Record<string, boolean>>({})
+const autoSwitchedVisual = ref<Set<string>>(new Set())
+
+// 复制状态
+const copiedId = ref<string | null>(null)
+
+// 复制代码
+async function copyCode(content: string, id: string) {
+  try {
+    await navigator.clipboard.writeText(content)
+    copiedId.value = id
+    setTimeout(() => {
+      copiedId.value = null
+    }, 2000)
+  } catch (err) {
+    console.error('复制失败:', err)
+  }
+}
+
+function isMermaidBlockLanguage(lang?: string) {
+  return isMermaidLanguage(lang)
+}
+
+function isLatexBlockLanguage(lang?: string) {
+  return isLatexLanguage(lang)
+}
+
+async function toggleVisualView(id: string, lang?: string) {
+  const willShowVisual = !visualShowMap.value[id]
+  visualShowMap.value = {
+    ...visualShowMap.value,
+    [id]: willShowVisual,
+  }
+
+  // Mermaid 切换到可视化时，需要在 DOM 更新后触发渲染
+  const lower = (lang || '').toLowerCase()
+  if (willShowVisual && lower === 'mermaid') {
+    await nextTick()
+    if (containerRef.value) renderMermaidDiagrams(containerRef.value)
+  }
+}
+
+function updateBlocksFromStream(newText: string) {
+  const prev = lastText.value
+  const current = newText || ''
+
+  if (prev && current.startsWith(prev)) {
+    const delta = current.slice(prev.length)
+    if (delta) streamState.value = parseContentStream(delta, streamState.value)
+  } else {
+    streamState.value = createStreamParseState()
+    streamState.value = parseContentStream(current, streamState.value)
+  }
+
+  lastText.value = current
+  blocks.value = finishStreamParse(streamState.value)
+
+  const inProgressVisualId =
+    streamState.value.inCodeBlock &&
+    (isMermaidBlockLanguage(streamState.value.codeLanguage) || isLatexBlockLanguage(streamState.value.codeLanguage))
+      ? streamState.value.codeBlockId
+      : null
+
+  const completedVisualIds: string[] = []
+  for (const b of streamState.value.blocks) {
+    if (b.type !== 'code') continue
+    if (!(isMermaidBlockLanguage(b.language) || isLatexBlockLanguage(b.language))) continue
+    if (inProgressVisualId && b.id === inProgressVisualId) continue
+    if (isLatexBlockLanguage(b.language) && !canVisualizeLatex(b.content)) continue
+    if (!autoSwitchedVisual.value.has(b.id)) completedVisualIds.push(b.id)
+  }
+
+  if (completedVisualIds.length > 0) {
+    for (const id of completedVisualIds) autoSwitchedVisual.value.add(id)
+    for (const id of completedVisualIds) {
+      if (visualShowMap.value[id] === undefined) visualShowMap.value[id] = true
+    }
+    window.setTimeout(() => {
+      if (containerRef.value) renderMermaidDiagrams(containerRef.value)
+    }, 0)
+  }
+}
+
+watch(
+  () => props.text,
+  (v) => updateBlocksFromStream(v),
+  { immediate: true }
+)
 </script>
 
 <style scoped>
+/* ============================================
+   Vercel + GitHub 混合风格 Markdown 主题
+   ============================================ */
+
 .text-part {
+  max-width: 100%;
+}
+
+/* 文本块基础样式 */
+.text-block {
   font-size: 14px;
-  line-height: 1.7;
-  color: var(--chat-text, #ccc);
+  line-height: 1.75;
+  color: var(--chat-text, #e5e7eb);
   word-break: break-word;
-  overflow-wrap: break-word;
+  letter-spacing: 0.01em;
+}
+
+/* 段落 */
+.text-block :deep(p) {
+  margin: 0.75em 0;
+}
+
+.text-block :deep(p:first-child) {
+  margin-top: 0;
+}
+
+.text-block :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+/* 标题 - GitHub 风格层级 + Vercel 现代感 */
+.text-block :deep(h1) {
+  font-size: 1.5em;
+  font-weight: 700;
+  margin: 1.5em 0 0.75em;
+  padding-bottom: 0.4em;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
+  color: var(--chat-text-strong, #fff);
+  letter-spacing: -0.02em;
+}
+
+.text-block :deep(h2) {
+  font-size: 1.3em;
+  font-weight: 600;
+  margin: 1.25em 0 0.6em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+  color: var(--chat-text-strong, #fff);
+  letter-spacing: -0.01em;
+}
+
+.text-block :deep(h3) {
+  font-size: 1.15em;
+  font-weight: 600;
+  margin: 1em 0 0.5em;
+  color: var(--chat-text-strong, #fff);
+}
+
+.text-block :deep(h4),
+.text-block :deep(h5),
+.text-block :deep(h6) {
+  font-size: 1em;
+  font-weight: 600;
+  margin: 0.8em 0 0.4em;
+  color: var(--chat-text, #e5e7eb);
+}
+
+.text-block :deep(h1:first-child),
+.text-block :deep(h2:first-child),
+.text-block :deep(h3:first-child) {
+  margin-top: 0;
+}
+
+/* 列表 */
+.text-block :deep(ul),
+.text-block :deep(ol) {
+  margin: 0.75em 0;
+  padding-left: 1.5em;
+}
+
+.text-block :deep(li) {
+  margin: 0.4em 0;
+  line-height: 1.6;
+}
+
+.text-block :deep(li::marker) {
+  color: var(--chat-text-muted, #9ca3af);
+}
+
+/* 嵌套列表 */
+.text-block :deep(li ul),
+.text-block :deep(li ol) {
+  margin: 0.25em 0;
+}
+
+/* 任务列表 */
+.text-block :deep(.markdown-task-item) {
+  list-style: none;
+  margin-left: -1.5em;
+  padding-left: 0;
+}
+
+.text-block :deep(.markdown-task-checkbox) {
+  display: inline-block;
+  width: 1.2em;
+  margin-right: 0.4em;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 0.85em;
+  color: var(--chat-accent, #60a5fa);
+}
+
+/* 链接 - Vercel 风格下划线动画 */
+.text-block :deep(a) {
+  color: var(--chat-accent, #60a5fa);
+  text-decoration: none;
+  background-image: linear-gradient(var(--chat-accent, #60a5fa), var(--chat-accent, #60a5fa));
+  background-size: 0% 1px;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  transition: background-size 0.25s ease-out;
+}
+
+.text-block :deep(a:hover) {
+  background-size: 100% 1px;
+}
+
+/* 粗体和斜体 */
+.text-block :deep(strong) {
+  font-weight: 600;
+  color: var(--chat-text-strong, #fff);
+}
+
+.text-block :deep(em) {
+  font-style: italic;
+  color: var(--chat-text, #e5e7eb);
+}
+
+/* 删除线 */
+.text-block :deep(s),
+.text-block :deep(del) {
+  text-decoration: line-through;
+  color: var(--chat-text-muted, #9ca3af);
+}
+
+/* 行内代码 - 突出显示 */
+.text-block :deep(code) {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 0.875em;
+  background: var(--chat-inline-code-bg, rgba(110, 118, 129, 0.25));
+  padding: 0.2em 0.45em;
+  border-radius: 6px;
+  color: var(--chat-inline-code-text, #f472b6);
+  font-weight: 500;
+}
+
+/* 引用块 - VitePress 风格 */
+.text-block :deep(blockquote) {
+  margin: 1em 0;
+  padding: 0.75em 1em;
+  border-left: 4px solid var(--chat-accent, #60a5fa);
+  background: var(--chat-blockquote-bg, rgba(96, 165, 250, 0.08));
+  border-radius: 0 8px 8px 0;
+  color: var(--chat-text-muted, #d1d5db);
+}
+
+.text-block :deep(blockquote p) {
+  margin: 0.25em 0;
+}
+
+.text-block :deep(blockquote p:first-child) {
+  margin-top: 0;
+}
+
+.text-block :deep(blockquote p:last-child) {
+  margin-bottom: 0;
+}
+
+/* 分隔线 - 渐变效果 */
+.text-block :deep(hr) {
+  border: none;
+  height: 1px;
+  margin: 1.5em 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--chat-border, rgba(255, 255, 255, 0.15)) 20%,
+    var(--chat-border, rgba(255, 255, 255, 0.15)) 80%,
+    transparent
+  );
+}
+
+/* 表格 - GitHub 风格 + 现代感 */
+.text-block :deep(.markdown-table-wrapper) {
+  margin: 1em 0;
+  overflow-x: auto;
+  border-radius: 8px;
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
+  scrollbar-gutter: stable;
+}
+
+.text-block :deep(.markdown-table) {
+  min-width: 100%;
+  width: max-content;
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+
+.text-block :deep(.markdown-table th) {
+  background: var(--chat-table-header-bg, rgba(255, 255, 255, 0.06));
+  font-weight: 600;
+  text-align: left;
+  padding: 0.75em 1em;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
+  color: var(--chat-text-strong, #fff);
+}
+
+.text-block :deep(.markdown-table td) {
+  padding: 0.65em 1em;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.06));
+}
+
+.text-block :deep(.markdown-table tr:last-child td) {
+  border-bottom: none;
+}
+
+.text-block :deep(.markdown-table tbody tr:hover) {
+  background: var(--chat-table-row-hover-bg, rgba(255, 255, 255, 0.05));
+}
+
+/* 图片 */
+.text-block :deep(img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 0.75em 0;
+}
+
+/* ============================================
+   代码块样式 - 简洁边框风格
+   ============================================ */
+
+.code-block-wrapper {
+  margin: 1em 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.15));
+  background: transparent;
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+}
+
+.code-language {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #8b949e);
+  text-transform: lowercase;
+  letter-spacing: 0.03em;
+}
+
+/* 按钮组容器 */
+.code-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 统一的操作按钮样式 */
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #8b949e);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.action-btn:hover {
+  color: var(--chat-text, #e5e7eb);
+  background: var(--chat-hover-bg, rgba(255, 255, 255, 0.08));
+  border-color: var(--chat-border, rgba(255, 255, 255, 0.1));
+}
+
+.action-btn:active {
+  transform: scale(0.97);
+}
+
+.action-btn svg {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+}
+
+.code-block {
+  margin: 0;
+  padding: 14px 18px;
+  overflow-x: auto;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--chat-code-text, #e6edf3);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  -webkit-font-smoothing: antialiased;
+}
+
+.code-block code {
+  display: block;
+  white-space: pre;
+  tab-size: 2;
+}
+
+/* 代码块滚动条 */
+.code-block::-webkit-scrollbar {
+  height: 6px;
+}
+
+.code-block::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.code-block::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
+}
+
+.code-block::-webkit-scrollbar-thumb:hover {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
+}
+
+/* ============================================
+   代码高亮主题 - 跟随主题变化
+   使用 CSS 变量，支持浅色/深色主题
+   ============================================ */
+
+/* 关键字: if, const, function, return, import, export 等 */
+.code-block :deep(.hljs-keyword),
+.code-block :deep(.hljs-selector-tag) {
+  color: var(--chat-hljs-keyword, #ff7b72);
+}
+
+/* 内置: console, document, window, Array, Object 等 */
+.code-block :deep(.hljs-built_in) {
+  color: var(--chat-hljs-built-in, #ffa657);
+}
+
+/* 类型: string, number, boolean, interface, type 等 */
+.code-block :deep(.hljs-type),
+.code-block :deep(.hljs-class) {
+  color: var(--chat-hljs-type, #ffa657);
+}
+
+/* 函数名 */
+.code-block :deep(.hljs-title),
+.code-block :deep(.hljs-title.function_),
+.code-block :deep(.hljs-function) {
+  color: var(--chat-hljs-function, #d2a8ff);
+}
+
+/* 字符串 */
+.code-block :deep(.hljs-string),
+.code-block :deep(.hljs-template-variable) {
+  color: var(--chat-hljs-string, #a5d6ff);
+}
+
+/* 数字 */
+.code-block :deep(.hljs-number) {
+  color: var(--chat-hljs-number, #79c0ff);
+}
+
+/* 布尔值、null、undefined */
+.code-block :deep(.hljs-literal),
+.code-block :deep(.hljs-null) {
+  color: var(--chat-hljs-literal, #79c0ff);
+}
+
+/* 注释 */
+.code-block :deep(.hljs-comment),
+.code-block :deep(.hljs-quote) {
+  color: var(--chat-hljs-comment, #8b949e);
+  font-style: italic;
+}
+
+/* 变量 */
+.code-block :deep(.hljs-variable),
+.code-block :deep(.hljs-template-tag) {
+  color: var(--chat-hljs-variable, #ffa657);
+}
+
+/* 属性 */
+.code-block :deep(.hljs-attr),
+.code-block :deep(.hljs-attribute) {
+  color: var(--chat-hljs-attr, #79c0ff);
+}
+
+/* 对象属性名 */
+.code-block :deep(.hljs-property) {
+  color: var(--chat-hljs-property, #7ee787);
+}
+
+/* 操作符 */
+.code-block :deep(.hljs-operator) {
+  color: var(--chat-hljs-operator, #ff7b72);
+}
+
+/* 标点符号 */
+.code-block :deep(.hljs-punctuation) {
+  color: var(--chat-hljs-punctuation, #e6edf3);
+}
+
+/* 参数 */
+.code-block :deep(.hljs-params) {
+  color: var(--chat-hljs-params, #e6edf3);
+}
+
+/* 正则表达式 */
+.code-block :deep(.hljs-regexp) {
+  color: var(--chat-hljs-regexp, #7ee787);
+}
+
+/* 选择器 (CSS) */
+.code-block :deep(.hljs-selector-class),
+.code-block :deep(.hljs-selector-id) {
+  color: var(--chat-hljs-selector, #7ee787);
+}
+
+/* 标签 (HTML/XML) */
+.code-block :deep(.hljs-tag) {
+  color: var(--chat-hljs-tag, #7ee787);
+}
+
+.code-block :deep(.hljs-name) {
+  color: var(--chat-hljs-name, #7ee787);
+}
+
+/* 删除 (diff) */
+.code-block :deep(.hljs-deletion) {
+  color: var(--chat-hljs-deletion, #ffa198);
+  background: var(--chat-hljs-deletion-bg, rgba(248, 81, 73, 0.15));
+}
+
+/* 添加 (diff) */
+.code-block :deep(.hljs-addition) {
+  color: var(--chat-hljs-addition, #7ee787);
+  background: var(--chat-hljs-addition-bg, rgba(46, 160, 67, 0.15));
+}
+
+/* meta 信息 */
+.code-block :deep(.hljs-meta) {
+  color: var(--chat-hljs-meta, #8b949e);
+}
+
+/* 链接 */
+.code-block :deep(.hljs-link) {
+  color: var(--chat-hljs-link, #a5d6ff);
+  text-decoration: underline;
+}
+
+/* 符号 */
+.code-block :deep(.hljs-symbol) {
+  color: var(--chat-hljs-symbol, #79c0ff);
+}
+
+/* 子字符串 (模板字符串中的 ${}) */
+.code-block :deep(.hljs-subst) {
+  color: var(--chat-hljs-subst, #e6edf3);
+}
+
+/* section (markdown 标题等) */
+.code-block :deep(.hljs-section) {
+  color: var(--chat-hljs-section, #79c0ff);
+  font-weight: bold;
+}
+
+/* bullet (markdown 列表) */
+.code-block :deep(.hljs-bullet) {
+  color: var(--chat-hljs-bullet, #ffa657);
+}
+
+/* emphasis */
+.code-block :deep(.hljs-emphasis) {
+  font-style: italic;
+}
+
+/* strong */
+.code-block :deep(.hljs-strong) {
+  font-weight: bold;
+}
+
+/* ============================================
+   LaTeX 数学公式样式
+   ============================================ */
+
+/* 块级公式 */
+.text-block :deep(.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));
+}
+
+.text-block :deep(.latex-block .katex-display) {
+  margin: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  text-align: left;
+}
+
+.text-block :deep(.latex-block .katex) {
+  text-align: left;
+}
+
+/* 行内公式 */
+.text-block :deep(.latex-inline) {
+  display: inline;
+  padding: 0 0.15em;
+}
+
+/* 公式错误提示 */
+.text-block :deep(.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 样式覆盖 - 适配暗色主题 */
+.text-block :deep(.katex) {
+  font-size: 1.1em;
+  color: var(--chat-text, #e5e7eb);
+}
+
+/* KaTeX 分数线颜色 */
+.text-block :deep(.katex .frac-line) {
+  background: var(--chat-text, #e5e7eb);
+}
+
+/* KaTeX 根号 */
+.text-block :deep(.katex .sqrt > .sqrt-sign) {
+  color: var(--chat-text, #e5e7eb);
+}
+
+/* 滚动条样式 */
+.text-block :deep(.latex-block::-webkit-scrollbar) {
+  height: 6px;
+}
+
+.text-block :deep(.latex-block::-webkit-scrollbar-track) {
+  background: transparent;
+}
+
+.text-block :deep(.latex-block::-webkit-scrollbar-thumb) {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
+}
+
+.text-block :deep(.latex-block::-webkit-scrollbar-thumb:hover) {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
 }
 </style>