sionrui/frontend/app/web-gold/src/components/ChatMessageRenderer.vue

<template>
  <div class="prompt-display" v-html="renderedContent"></div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { renderMarkdown } from '@/utils/markdown'

const props = defineProps({
  content: {
    type: String,
    default: ''
  },
  isStreaming: {
    type: Boolean,
    default: false
  }
})

// 已完成的 chunks（包含已渲染的 HTML）
const chunks = ref([])
// chunk ID 计数器
const chunkIdCounter = ref(0)

/**
 * 创建 chunk 对象（包含预渲染的 HTML）
 */
function createChunk(text) {
  return {
    id: chunkIdCounter.value++,
    text: text.trim(),
    rendered: renderMarkdown(text.trim()) // 预渲染，避免重复渲染
  }
}

/**
 * 智能分块：业界成熟方案
 */
function splitIntoChunks(text) {
  if (!text || !text.trim()) return []
  
  const result = []
  
  // 第一级：按段落分割（双换行）
  const paragraphs = text.split(/\n\s*\n/)
  
  for (const paragraph of paragraphs) {
    if (!paragraph.trim()) continue
    
    // 如果段落长度适中（< 500字符），直接作为一个 chunk
    if (paragraph.trim().length < 500) {
      result.push(createChunk(paragraph))
      continue
    }
    
    // 第二级：段落太长，按句子分割
    const sentences = paragraph.split(/([。！？.!?]\s*)/)
    let currentChunk = ''
    
    for (let i = 0; i < sentences.length; i++) {
      currentChunk += sentences[i]
      
      // 如果累积的句子达到一定长度（> 300字符），创建一个 chunk
      if (currentChunk.trim().length > 300) {
        result.push(createChunk(currentChunk))
        currentChunk = ''
      }
    }
    
    // 处理剩余的文本
    if (currentChunk.trim()) {
      if (currentChunk.trim().length > 500) {
        // 第三级：按固定长度分割
        const fixedLength = 400
        let start = 0
        while (start < currentChunk.length) {
          const end = Math.min(start + fixedLength, currentChunk.length)
          const chunkText = currentChunk.slice(start, end).trim()
          if (chunkText) {
            result.push(createChunk(chunkText))
          }
          start = end
        }
      } else {
        result.push(createChunk(currentChunk))
      }
    }
  }
  
  return result
}

/**
 * 计算流式传输中的文本
 */
const streamingText = computed(() => {
  if (!props.isStreaming || !props.content) return ''
  
  const text = props.content
  
  // 优先查找最后一个段落分隔符
  const lastParagraphIndex = text.lastIndexOf('\n\n')
  if (lastParagraphIndex !== -1) {
    return text.slice(lastParagraphIndex + 2)
  }
  
  // 查找最后一个句子结束符
  const lastSentenceMatch = text.match(/([。！？.!?]\s*)(?!.*[。！？.!?]\s*)/)
  if (lastSentenceMatch) {
    return text.slice(lastSentenceMatch.index + lastSentenceMatch[0].length)
  }
  
  // 全部作为流式文本
  return text
})

/**
 * 计算最终渲染的内容（合并所有 chunks 和流式文本）
 */
const renderedContent = computed(() => {
  let html = ''
  
  // 添加已完成的 chunks
  for (const chunk of chunks.value) {
    html += chunk.rendered
  }
  
  // 添加流式传输中的文本
  if (props.isStreaming && streamingText.value) {
    html += renderMarkdown(streamingText.value)
  }
  
  return html
})

/**
 * 增量更新 chunks（避免全量重新渲染）
 */
function updateChunksIncremental(content) {
  if (!content) {
    chunks.value = []
    return
  }
  
  const text = content
  
  // 查找最后一个段落分隔符
  const lastParagraphIndex = text.lastIndexOf('\n\n')
  let completedText = ''
  
  if (lastParagraphIndex !== -1) {
    completedText = text.slice(0, lastParagraphIndex)
  } else {
    // 没有段落分隔符，查找最后一个句子结束符
    const lastSentenceMatch = text.match(/([。！？.!?]\s*)(?!.*[。！？.!?]\s*)/)
    if (lastSentenceMatch && lastSentenceMatch.index > 300) {
      completedText = text.slice(0, lastSentenceMatch.index + lastSentenceMatch[0].length)
    } else {
      // 流式传输中，还没有完整的段落或句子
      return
    }
  }
  
  // 分割已完成的文本
  const newChunks = splitIntoChunks(completedText)
  
  // 增量更新：只添加新的 chunks，保留已存在的
  if (newChunks.length > chunks.value.length) {
    // 只添加新增的 chunks
    const existingTexts = new Set(chunks.value.map(c => c.text))
    for (let i = chunks.value.length; i < newChunks.length; i++) {
      if (!existingTexts.has(newChunks[i].text)) {
        chunks.value.push(newChunks[i])
      }
    }
  }
}

/**
 * 处理内容更新
 */
function updateChunks(content) {
  if (!content) {
    chunks.value = []
    return
  }
  
  if (props.isStreaming) {
    // 流式模式：增量更新
    updateChunksIncremental(content)
  } else {
    // 非流式模式：完整分割
    chunks.value = splitIntoChunks(content)
  }
}

// 监听 content 变化
watch(() => props.content, (newContent) => {
  updateChunks(newContent)
}, { immediate: true })

// 监听 isStreaming 变化：流式结束时处理最后一个未完成的块
watch(() => props.isStreaming, (newVal, oldVal) => {
  if (!newVal && oldVal && props.content) {
    // 流式结束，完整重新分割
    const newChunks = splitIntoChunks(props.content)
    chunks.value = newChunks
  }
})
</script>

<style scoped>
/* 修复 pre 标签撑开容器的问题 */
.prompt-display :deep(pre) {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-word;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>