@templmf/temp-solf-lmf 0.0.54 → 0.0.55

package/guanwang/src/chat-sdk/core/components/MessageBubble.vue

@@ -0,0 +1,703 @@
+<template>
+  <div class="msg-row" :class="isUser ? 'msg-user' : 'msg-ai'" @click="onBubbleClick">
+    <!-- Avatar -->
+    <div v-if="isUser" class="msg-avatar" :style="{ background: avatarBg }">{{ userInitial }}</div>
+    <div v-else class="msg-avatar msg-avatar--ai">
+      <Bot :size="14" color="var(--brand-400)" :stroke-width="1.75" />
+    </div>
+
+    <!-- Bubble -->
+    <div class="msg-bubble" :class="{
+      'msg-bubble--user':  isUser,
+      'msg-bubble--ai':    !isUser,
+      'msg-bubble--error': msg.error,
+    }">
+      <div v-if="msg.error" class="msg-error-header">
+        <AlertCircle :size="13" /> 请求出错
+      </div>
+
+      <!-- 用户消息：文字 + 附件缩略图 -->
+      <template v-if="isUser">
+        <!-- 附件缩略图行 -->
+        <div v-if="msg.attachments && msg.attachments.length > 0" class="msg-attachments">
+          <div
+            v-for="att in msg.attachments"
+            :key="att.id"
+            class="msg-att-item"
+            :title="att.fileName"
+          >
+            <!-- 图片：显示缩略图 -->
+            <img
+              v-if="att.preview"
+              :src="att.preview"
+              class="msg-att-thumb"
+              :alt="att.fileName"
+            />
+            <!-- 非图片：图标 + 文件名 -->
+            <div v-else class="msg-att-file">
+              <FileText :size="14" />
+              <span>{{ att.fileName }}</span>
+            </div>
+          </div>
+        </div>
+        <!-- 文字内容 -->
+        <div v-if="msg.content" class="msg-text">{{ msg.content }}</div>
+      </template>
+
+      <!-- AI 消息：双区渲染 -->
+      <template v-else>
+        <!-- 等待阶段：streaming=true 且 content 为空时，显示呼吸动画 -->
+        <div v-if="msg.streaming && !msg.content" class="ai-waiting">
+          <span class="ai-waiting__dot" />
+          <span class="ai-waiting__dot" />
+          <span class="ai-waiting__dot" />
+        </div>
+
+        <div ref="closedRef" class="msg-md msg-md-closed" />
+        <!-- ArtifactCard 通过 createApp 原地挂载到 closedRef 内的占位符节点 -->
+        <div ref="tailRef" class="msg-md msg-md-tail" />
+
+        <!-- 原始文本调试面板（VITE_SHOW_RAW_TEXT=true 时显示）-->
+        <div v-if="showRawText && msg.content" class="raw-text-panel">
+          <button class="raw-text-toggle" @click="rawExpanded = !rawExpanded">
+            <span class="raw-text-toggle__icon">{{ rawExpanded ? '▾' : '▸' }}</span>
+            <span>原始文本</span>
+            <span class="raw-text-toggle__len">{{ msg.content.length }} 字符</span>
+          </button>
+          <pre v-if="rawExpanded" class="raw-text-content">{{ msg.content }}</pre>
+        </div>
+      </template>
+
+      <!-- 流式光标（附加在 tail 区后面）-->
+      <span v-if="msg.streaming && !isUser && msg.content" class="cursor-blink" />
+    </div>
+  </div>
+
+  <!-- 代码预览弹框 -->
+  <CodePreview
+    v-if="previewState.visible"
+    :visible="previewState.visible"
+    :lang="previewState.lang"
+    :code="previewState.code"
+    @close="previewState.visible = false"
+  />
+
+  <!-- mermaid 图表全屏放大 -->
+  <MermaidZoom
+    :visible="mermaidZoom.visible"
+    :svg-html="mermaidZoom.svgHtml"
+    @close="mermaidZoom.visible = false"
+  />
+</template>
+
+<script setup>
+import { ref, shallowRef, triggerRef, computed, watch, nextTick, reactive, onUnmounted, createApp, defineComponent, h } from 'vue'
+import { Bot, AlertCircle, FileText } from 'lucide-vue-next'
+import CodePreview  from '../../features/codepreview/CodePreview.vue'
+import MermaidZoom  from '../../features/mermaid/MermaidZoom.vue'
+import ArtifactCard from '../../features/artifact/ArtifactCard.vue'
+import {
+  renderMarkdown,
+  createStreamingParser,
+  postRender,
+  handleCodeAction,
+  onThemeChange,
+  offThemeChange,
+  clearBlocksByMessage,
+} from '../../features/markdown/useMarkdown.js'
+import { useArtifactStore, STORE_KEY } from '../../features/artifact/useArtifactStore.js'
+import { useChatTracker } from '../../../tracker/useChatTracker.js'
+
+const props = defineProps({
+  msg:  { type: Object, required: true },
+  user: { type: Object, default: null },
+})
+
+// ── 原始文本调试面板（.env: VITE_SHOW_RAW_TEXT=true）────────────
+const showRawText = import.meta.env.VITE_SHOW_RAW_TEXT === 'true'
+const rawExpanded = ref(false)
+
+// ── 头像 ──────────────────────────────────────────────────────────
+const AVATAR_COLORS = ['#1A6FC4', '#0891b2', '#059669', '#7c3aed', '#b45309']
+const isUser        = computed(() => props.msg.role === 'user')
+const userInitial   = computed(() => (props.user?.name || props.user?.username || '?')[0].toUpperCase())
+const avatarBg      = computed(() => AVATAR_COLORS[(props.user?.id || 0) % AVATAR_COLORS.length])
+
+// ── Artifact Store 注入 ───────────────────────────────────────────
+const artifactStore  = useArtifactStore()
+// 当前消息关联的 artifacts
+const msgArtifacts = computed(() =>
+  artifactStore.byMessage.value.get(props.msg.id) || []
+)
+
+// 每个 artId 对应一个 createApp 实例，组件卸载时统一 unmount，防止内存泄漏
+const mountedApps = new Map()
+
+// ── DOM refs ──────────────────────────────────────────────────────
+const closedRef    = ref(null)
+const tailRef      = ref(null)
+const previewState = reactive({ visible: false, lang: '', code: '', svgHtml: '' })
+const mermaidZoom  = reactive({ visible: false, svgHtml: '' })
+
+// ── 渲染上下文：messageId + artifactStore，传给 useMarkdown ────────
+const renderCtx = {
+  messageId:     props.msg.id,
+  artifactStore: {
+    shouldBeArtifact: artifactStore.shouldBeArtifact,
+    preRegister: (opts) => artifactStore.preRegister(opts),
+    register:   (opts) => artifactStore.register(opts),
+    updateCode: (id, code) => artifactStore.updateCode(id, code),
+    markDone:   (id) => artifactStore.markDone(id),
+  },
+}
+
+// ── 流式解析器（每条 AI 消息独享）────────────────────────────────
+const parser = createStreamingParser(renderCtx)
+
+// 上一次的 closedHtml —— 只有发生变化时才更新 DOM（避免抖动）
+let lastClosedHtml = ''
+
+// ── 流式渲染调度 ─────────────────────────────────────────────────
+// useChatStore 层已做自适应节流（弱网16ms/强网80ms），
+// MessageBubble 层只需用 rAF 把渲染对齐到浏览器绘制时机，无需额外节流。
+let rafId         = null
+let pendingContent = null
+
+function scheduleRender(content) {
+  pendingContent = content
+  if (rafId) return
+  rafId = requestAnimationFrame(() => {
+    rafId = null
+    const c = pendingContent
+    pendingContent = null
+    renderStreaming(c)
+  })
+}
+
+// ── 流式渲染：双区增量 patch ──────────────────────────────────────
+// closed 区：代码块/段落完整关闭后才更新一次（低频，O(新增块)）
+// tail 区：正在输入的文字用增量 textContent patch，不重建 DOM（零回流）
+let lastTailText = ''   // 上一帧 tail 区的纯文本，用于增量对比
+
+function renderStreaming(content) {
+  const { closedHtml, tailHtml } = parser.parse(content)
+
+  // closed 区：只在内容真正变化时才 patch
+  if (closedHtml !== lastClosedHtml) {
+    lastClosedHtml = closedHtml
+    if (closedRef.value) {
+      // 记录已渲染的 mermaid 图的 data-mermaid hash，innerHTML 重建后恢复标记，避免重复渲染抖动
+      const renderedHashes = new Set(
+        [...closedRef.value.querySelectorAll('.mermaid-chart[data-rendered]')]
+          .map(el => el.dataset.mermaid)
+      )
+      closedRef.value.innerHTML = closedHtml
+      if (renderedHashes.size > 0) {
+        closedRef.value.querySelectorAll('.mermaid-chart[data-mermaid]').forEach(el => {
+          if (renderedHashes.has(el.dataset.mermaid)) el.dataset.rendered = '1'
+        })
+      }
+      postRender(closedRef.value).then(replaceArtifactPlaceholders)
+    }
+  }
+
+  // tail 区：用 innerHTML 更新，但跳过内容相同的帧（强网下 content 可能多帧不变）
+  if (tailRef.value && tailHtml !== lastTailText) {
+    lastTailText = tailHtml
+    tailRef.value.innerHTML = tailHtml
+    scanTailPlaceholders()
+  }
+}
+
+function scanTailPlaceholders() {
+  // 流式期间 tailRef 里的占位符只是 hint，等 closedRef 里出现后再原地挂载
+  // 此处无需操作，避免流式期间频繁触发 createApp
+}
+
+// ── 全量渲染（流式结束后切换） ────────────────────────────────────
+async function renderFull(content) {
+  if (rafId) { cancelAnimationFrame(rafId); rafId = null }
+  lastClosedHtml = ''
+  lastTailText   = ''
+  parser.reset()
+
+  // innerHTML 重写前先 unmount 旧的 ArtifactCard 实例
+  // 否则 mountedApps 里的旧 artId 记录会导致新占位符被跳过
+  mountedApps.forEach(app => app.unmount())
+  mountedApps.clear()
+
+  const html = renderMarkdown(content, renderCtx)
+  if (closedRef.value) closedRef.value.innerHTML = html
+  if (tailRef.value)   tailRef.value.innerHTML   = ''
+
+  await nextTick()
+  if (closedRef.value) await postRender(closedRef.value, { skipMermaid: false })
+  // 把 artifact 占位符节点替换为 Vue 挂载点（触发 ArtifactCard 渲染）
+  replaceArtifactPlaceholders()
+}
+
+// 找到 closedRef 里的 .artifact-placeholder 节点，
+// 用 createApp 原地挂载 ArtifactCard，位置完全对应代码块在文档流中的位置
+// 已挂载的节点（mountedApps 里有记录）跳过，避免重复挂载
+function replaceArtifactPlaceholders() {
+  if (!closedRef.value) return
+  const placeholders = closedRef.value.querySelectorAll('.artifact-placeholder[data-art-id]')
+  placeholders.forEach(el => {
+    const artId = el.dataset.artId
+    if (!artId || mountedApps.has(artId)) return
+
+    // 把占位 div 改为挂载容器（保留尺寸占位，避免替换时布局跳变）
+    const container = document.createElement('div')
+    container.className = 'artifact-card-mount'
+    container.style.display = 'contents'  // scoped CSS 无法作用于动态插入节点，改为内联
+    // 用 replaceWith 保持文档流位置不变
+    el.replaceWith(container)
+
+    // 创建独立 Vue app 挂载 ArtifactCard，传入 artifactStore 作为依赖
+    const app = createApp(defineComponent({
+      setup() {
+        // 响应式追踪：直接从 store 里取 artifact，保证流式更新时卡片数据同步
+        const artifact = computed(() =>
+          artifactStore.artifactsMap.value.get(artId) || null
+        )
+        return () => artifact.value
+          ? h(ArtifactCard, { artifact: artifact.value })
+          : null
+      }
+    }))
+    // 用与父组件相同的 Symbol key provide，让 ArtifactCard 内的 inject 能正常工作
+    app.provide(STORE_KEY, artifactStore)
+    app.mount(container)
+    mountedApps.set(artId, app)
+  })
+}
+
+// ── 监听消息内容变化 ──────────────────────────────────────────────
+watch(
+  () => props.msg.content,
+  (val) => {
+    if (!val || isUser.value) return
+    if (props.msg.streaming) {
+      scheduleRender(val)
+    }
+    // 流式期间不做全量渲染；结束时由 streaming watch 触发
+  },
+  { immediate: true }
+)
+
+// 流式结束 → 全量渲染完成后再标记 artifact 为已完成
+// 必须 await renderFull：内部的 renderMarkdown → buildCodeBlock → register 会写入最终完整代码
+// markDone 必须在 register 完成之后调用，否则 streaming 状态会被提前清除
+watch(
+  () => props.msg.streaming,
+  async (streaming) => {
+    if (!streaming && !isUser.value) {
+      await renderFull(props.msg.content)
+      // renderFull 完成后，artifact store 已拿到完整代码，此时再 markDone
+      const arts = artifactStore.byMessage.value.get(props.msg.id) || []
+      arts.forEach(art => artifactStore.markDone(art.id))
+    }
+  }
+)
+
+// 主题切换 → 重新渲染（使用模块级单例 Observer，避免 N 条消息创建 N 个 Observer）
+function onTheme() {
+  if (!isUser.value && props.msg.content) renderFull(props.msg.content)
+}
+onThemeChange(onTheme)
+
+onUnmounted(() => {
+  // 取消主题订阅
+  offThemeChange(onTheme)
+  // 取消 rAF
+  if (rafId) cancelAnimationFrame(rafId)
+  // 清理本条消息的代码块缓存
+  clearBlocksByMessage(props.msg.id)
+  // 卸载所有原地挂载的 ArtifactCard 实例，防止内存泄漏
+  mountedApps.forEach(app => app.unmount())
+  mountedApps.clear()
+})
+
+// ── 代码块点击委托 ────────────────────────────────────────────────
+const tracker = useChatTracker()
+
+function onBubbleClick(e) {
+  // 拦截复制按钮：记录采纳行为后再执行原有逻辑
+  const btn = e.target.closest('[data-action]')
+  if (btn?.dataset.action === 'copy') {
+    tracker.contentCopy({
+      source: 'code_block',
+      lang:   btn.closest('[data-lang]')?.dataset.lang || '',
+    })
+  }
+
+  handleCodeAction(e, ({ lang, code, svgHtml }) => {
+    if (lang === 'mermaid-svg' && svgHtml) {
+      mermaidZoom.svgHtml = svgHtml
+      mermaidZoom.visible = true
+    } else {
+      previewState.lang    = lang
+      previewState.code    = code
+      previewState.visible = true
+    }
+  })
+}
+</script>
+
+<style scoped>
+/* ── 布局 ── */
+.msg-row  { display: flex; gap: 10px; animation: fadeUp 0.25s ease; }
+.msg-user { flex-direction: row-reverse; }
+.msg-ai   { flex-direction: row; }
+
+/* ── 头像 ── */
+.msg-avatar {
+  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  color: white; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; font-weight: 700; font-size: 12.6px;
+}
+.msg-avatar--ai {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-default);
+  color: unset;
+}
+
+/* ── 气泡 ── */
+.msg-bubble {
+  max-width: 80%;
+  padding: 10px 14px;
+  font-size: 14px;
+  line-height: 1.65;
+  position: relative;
+}
+.msg-bubble--user {
+  background: var(--brand-500); color: white;
+  border-radius: 12px 4px 12px 12px;
+  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  white-space: pre-wrap; word-break: break-word;
+}
+.msg-bubble--ai {
+  background: var(--msg-ai-bg); color: var(--msg-ai-color);
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px 12px 12px 12px;
+  min-width: 60px;
+}
+.msg-bubble--error {
+  background: rgba(248,113,113,0.08) !important;
+  color: #f87171 !important;
+  border-color: rgba(248,113,113,0.25) !important;
+}
+.msg-text { word-break: break-word; }
+.msg-error-header { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 6px; color: #f87171; }
+
+/* ── 流式光标 ── */
+.cursor-blink {
+  display: inline-block; width: 2px; height: 14px;
+  background: currentColor; margin-left: 2px; vertical-align: middle;
+  animation: blink 1s step-end infinite;
+}
+
+/* ── 流式尾部段落（无闪烁过渡） ── */
+:deep(.streaming-tail) {
+  margin: 0;
+  color: var(--msg-ai-color);
+  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  line-height: 1.65;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── 流式代码块 badge ── */
+:deep(.cb-streaming-badge) {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 11px; color: var(--brand-400); font-family: 'Cascadia Code', 'Consolas', monospace;
+}
+:deep(.cb-dot) {
+  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
+  animation: pulseSlow 1.5s ease infinite;
+}
+
+/* ── Markdown 通用 ── */
+:deep(.msg-md) { font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; word-break: break-word; overflow-wrap: anywhere; }
+:deep(.msg-md-closed + .msg-md-tail) { margin-top: 0; }
+
+/* 标题 */
+:deep(.msg-md h1) { font-size: 1.3em; font-weight: 700; margin: 14px 0 8px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; }
+:deep(.msg-md h2) { font-size: 1.15em; font-weight: 700; margin: 12px 0 6px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; color: var(--text-primary); }
+:deep(.msg-md h3) { font-size: 1.05em; font-weight: 600; margin: 10px 0 5px; color: var(--text-primary); }
+:deep(.msg-md h1:first-child),:deep(.msg-md h2:first-child),:deep(.msg-md h3:first-child) { margin-top: 0; }
+:deep(.msg-md p)  { margin: 0 0 8px; }
+:deep(.msg-md p:last-child) { margin-bottom: 0; }
+:deep(.msg-md ul), :deep(.msg-md ol) { padding-left: 1.4em; margin: 6px 0 8px; }
+:deep(.msg-md li) { margin: 3px 0; line-height: 1.6; }
+:deep(.msg-md li > p) { margin: 0; }
+:deep(.msg-md blockquote) { margin: 8px 0; padding: 8px 14px; border-left: 3px solid var(--brand-500); background: var(--bg-tertiary); border-radius: 0 8px 8px 0; color: var(--text-secondary); font-style: italic; }
+:deep(.msg-md a) { color: var(--brand-400); text-decoration: underline; text-underline-offset: 2px; }
+:deep(.msg-md a:hover) { color: var(--brand-500); }
+:deep(.msg-md hr) { border: none; border-top: 1px solid var(--border-subtle); margin: 12px 0; }
+:deep(.msg-md table) { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
+:deep(.msg-md th) { background: var(--bg-tertiary); padding: 7px 12px; font-weight: 600; color: var(--text-primary); border: 1px solid var(--border-subtle); }
+:deep(.msg-md td) { padding: 6px 12px; border: 1px solid var(--border-subtle); color: var(--text-secondary); }
+:deep(.msg-md tr:nth-child(even) td) { background: var(--bg-secondary); }
+:deep(.msg-md img) { max-width: 100%; border-radius: 8px; margin: 8px 0; display: block; }
+
+/* ── 行内代码 ── */
+:deep(.inline-code) {
+  font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 12px;
+  padding: 2px 6px; border-radius: 4px;
+  background: var(--code-bg); color: var(--code-color);
+  border: 1px solid var(--border-subtle);
+}
+
+/* ── 代码块容器 ── */
+:deep(.code-wrapper) {
+  margin: 10px 0; border-radius: 10px;
+  border: 1px solid var(--border-subtle); overflow: hidden;
+  background: var(--bg-tertiary);
+}
+:deep(.code-streaming) {
+  border-color: rgba(26,111,196,0.3);
+  box-shadow: 0 0 0 1px rgba(26,111,196,0.1);
+}
+
+/* 操作栏 */
+:deep(.cb-actions) {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 6px 12px; background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-subtle);
+}
+:deep(.cb-lang) {
+  font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 11px;
+  color: var(--brand-400); letter-spacing: 0.04em;
+}
+:deep(.cb-btn) {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 8px; font-size: 11px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  border: 1px solid var(--border-default); border-radius: 5px;
+  background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s;
+}
+:deep(.cb-btn:hover) { border-color: rgba(26,111,196,0.4); color: var(--brand-400); background: var(--tag-bg); }
+
+/* Shiki 输出 */
+:deep(.shiki) { margin: 0 !important; border-radius: 0 0 8px 8px !important; font-size: 13px !important; line-height: 1.6 !important; overflow-x: auto !important; padding: 14px 16px !important; }
+:deep(.shiki code) { font-family: 'Cascadia Code', 'Consolas', monospace !important; }
+:deep(.shiki-live .shiki) { border-radius: 0 !important; }
+
+/* 降级 pre */
+:deep(.shiki-pre) { margin: 0; padding: 14px 16px; font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; color: var(--code-color); }
+
+/* Mermaid */
+:deep(.mermaid-container) { padding: 16px; display: flex; justify-content: center; }
+:deep(.mermaid-chart) { width: 100%; display: flex; justify-content: center; align-items: center; }
+:deep(.mermaid-chart svg) { max-width: 100%; height: auto; }
+/* mermaid-error 不再使用，保留空规则兼容旧引用 */
+:deep(.mermaid-error) { display: none; }
+/* 降级：渲染失败时显示原始代码 */
+:deep(.mermaid-raw) { margin: 0; padding: 12px 16px; font-size: 12px; font-family: 'Cascadia Code', 'Consolas', monospace; color: var(--text-secondary); white-space: pre-wrap; word-break: break-all; background: transparent; }
+
+/* 渲染前占位动画，避免高度为 0 → SVG 高度的突变 */
+:deep(.mermaid-pending) { min-height: 120px; }
+:deep(.mermaid-placeholder) {
+  display: flex; align-items: center; gap: 6px;
+}
+:deep(.mermaid-placeholder__dot) {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: var(--brand-400); opacity: 0.5;
+  animation: ai-bounce 1.2s ease-in-out infinite;
+}
+:deep(.mermaid-placeholder__dot:nth-child(1)) { animation-delay: 0s; }
+:deep(.mermaid-placeholder__dot:nth-child(2)) { animation-delay: 0.2s; }
+:deep(.mermaid-placeholder__dot:nth-child(3)) { animation-delay: 0.4s; }
+
+/* Math / KaTeX */
+:deep(.math-display) { padding: 16px; display: flex; justify-content: center; overflow-x: auto; }
+:deep(.katex-display) { margin: 0 !important; }
+
+/* ── 用户消息附件 ── */
+.msg-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.msg-att-item { border-radius: 8px; overflow: hidden; }
+.msg-att-thumb {
+  display: block;
+  width: 120px;
+  height: 90px;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid rgba(255,255,255,0.2);
+}
+.msg-att-file {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: rgba(255,255,255,0.15);
+  border-radius: 8px;
+  font-size: 12px;
+  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  color: rgba(255,255,255,0.9);
+  max-width: 180px;
+}
+.msg-att-file span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── ArtifactCard 原地挂载容器 ── */
+:deep(.artifact-card-mount) { display: contents; }
+
+/* ── 流式 Artifact Loading 卡片 ── */
+:deep(.artifact-streaming-card) {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 14px 9px 10px;
+  margin: 6px 0;
+  border-radius: 10px;
+  border: 1px solid rgba(26,111,196,0.35);
+  background: var(--tag-bg);
+  max-width: 300px;
+  animation: fadeUp 0.2s ease;
+}
+:deep(.asc-icon) {
+  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
+  background: rgba(26,111,196,0.15);
+  border: 1px solid rgba(26,111,196,0.25);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--brand-400);
+}
+:deep(.asc-body) {
+  display: flex; flex-direction: column; gap: 3px; min-width: 0;
+}
+:deep(.asc-name) {
+  font-size: 12px; font-weight: 500;
+  font-family: 'Cascadia Code', 'Consolas', monospace;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+:deep(.asc-sub) {
+  display: flex; align-items: center; gap: 5px;
+  font-size: 10px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+}
+:deep(.asc-lang) { color: var(--brand-400); font-family: 'Cascadia Code', 'Consolas', monospace; }
+:deep(.asc-dot) {
+  width: 3px; height: 3px; border-radius: 50%;
+  background: var(--text-muted); flex-shrink: 0;
+}
+:deep(.asc-gen) {
+  color: #4ade80;
+  display: flex; align-items: center; gap: 4px;
+}
+:deep(.asc-gen::before) {
+  content: '';
+  display: inline-block;
+  width: 5px; height: 5px; border-radius: 50%;
+  background: #4ade80;
+  animation: pulseSlow 1.2s ease infinite;
+}
+
+/* ── AI 等待中呼吸动画（content 为空时） ── */
+.ai-waiting {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 2px;
+  min-height: 22px;
+}
+.ai-waiting__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--brand-400);
+  animation: ai-bounce 1.2s ease-in-out infinite;
+  opacity: 0.7;
+}
+.ai-waiting__dot:nth-child(1) { animation-delay: 0s; }
+.ai-waiting__dot:nth-child(2) { animation-delay: 0.2s; }
+.ai-waiting__dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes ai-bounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+  30%            { transform: translateY(-5px); opacity: 1; }
+}
+
+/* ── 文件生成提示条（流式期间显示在气泡里） ── */
+:deep(.artifact-gen-hint) {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 10px;
+  margin: 4px 0;
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  font-size: 12px;
+  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  color: var(--text-muted);
+  animation: hint-breathe 1.8s ease-in-out infinite;
+}
+:deep(.artifact-gen-hint__dot) {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #4ade80;
+  flex-shrink: 0;
+  animation: pulseSlow 1.2s ease infinite;
+}
+:deep(.artifact-gen-hint__text) {
+  white-space: nowrap;
+}
+@keyframes hint-breathe {
+  0%, 100% { opacity: 0.6; }
+  50%       { opacity: 1; }
+}
+
+/* ── 原始文本调试面板 ── */
+.raw-text-panel {
+  margin-top: 10px;
+  border: 1px dashed rgba(250,204,21,0.35);
+  border-radius: 7px;
+  overflow: hidden;
+  background: rgba(250,204,21,0.04);
+}
+.raw-text-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 5px 10px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: #fbbf24;
+  font-size: 11px;
+  font-family: 'Cascadia Code', 'Consolas', monospace;
+  text-align: left;
+}
+.raw-text-toggle:hover { background: rgba(250,204,21,0.06); }
+.raw-text-toggle__icon { font-size: 10px; flex-shrink: 0; }
+.raw-text-toggle__len {
+  margin-left: auto;
+  opacity: 0.5;
+  font-size: 10px;
+}
+.raw-text-content {
+  margin: 0;
+  padding: 10px 12px;
+  border-top: 1px dashed rgba(250,204,21,0.2);
+  font-family: 'Cascadia Code', 'Consolas', monospace;
+  font-size: 11.5px;
+  line-height: 1.55;
+  color: #fde68a;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 320px;
+  overflow-y: auto;
+}
+/* ── Mermaid 全屏放大 ── */
+/* mermaid zoom 样式已移至 MermaidZoom.vue */
+
+</style>