mateclaw/mateclaw-ui/src/components/chat/ContentSegment.vue
matevip 6a13cc2f50 perf(chat): throttle streaming markdown render and defer chart mounts
- add useStreamingMarkdown: cap mid-stream markdown re-render to ~140ms,
  full-fidelity render once the segment completes
- skip code-block language auto-detection while streaming (escaped plain
  text), restore full highlighting on the final render
- defer echarts/mermaid blocks to a lightweight loading placeholder while
  streaming so their parsers never run on truncated source
- bypass the render cache for streaming-mode output
- wire into ContentSegment and MessageBubble (content + thinking)
2026-06-15 11:39:24 +08:00

37 lines
913 B
Vue

<script setup lang="ts">
import { computed } from 'vue'
import { useStreamingMarkdown } from '@/composables/useStreamingMarkdown'
import TypingCursor from './TypingCursor.vue'
import type { MessageSegment } from '@/types'
const props = withDefaults(defineProps<{
segment: MessageSegment
showCursor?: boolean
}>(), {
showCursor: false,
})
const isRunning = computed(() => props.segment.status === 'running')
// Throttle markdown rendering while the segment streams; render once at full
// fidelity the moment it completes.
const { html: renderedContent } = useStreamingMarkdown(
() => props.segment.text || '',
() => isRunning.value,
)
</script>
<template>
<div class="seg-content">
<div class="markdown-body" v-html="renderedContent"></div>
<TypingCursor v-if="isRunning && showCursor" />
</div>
</template>
<style scoped>
.seg-content {
padding: 4px 0;
margin-top: 4px;
}
</style>