Chat 对话

何时使用

构建 AI 对话主界面时使用，负责消息列表与上下文注入。

假 SSE 演示

可直接发送消息、点建议词，观察流式输出与停止。

输入 0·输出 0·合计 0

助手

你好，我是 dan-ui 演示助手。发送一条消息试试假流式输出。

<script setup lang="ts">
import { ref } from 'vue'
import {
  DanChat,
  DanChatInput,
  DanGenerationControl,
  DanModelSelect,
  DanSuggestion,
  DanTokenUsage,
  type ChatMessageModel,
} from '@dandan-ui/ui'

const messages = ref<ChatMessageModel[]>([
  {
    id: 'welcome',
    role: 'assistant',
    content: '你好，我是 dan-ui 演示助手。发送一条消息试试假流式输出。',
    status: 'done',
  },
])
const generating = ref(false)
const model = ref('demo-mini')
const timer = ref<number | null>(null)
const tokens = ref({ prompt: 0, completion: 0 })

const modelOptions = [
  { label: 'demo-mini', value: 'demo-mini' },
  { label: 'demo-pro', value: 'demo-pro' },
]

function clearTimer() {
  if (timer.value != null) {
    window.clearInterval(timer.value)
    timer.value = null
  }
}

function uid() {
  return `${Date.now()}-${Math.random().toString(16).slice(2)}`
}

async function fakeStream(prompt: string) {
  clearTimer()
  generating.value = true
  tokens.value.prompt += prompt.length

  messages.value.push({
    id: uid(),
    role: 'user',
    content: prompt,
    status: 'done',
  })

  const assistantId = uid()
  messages.value.push({
    id: assistantId,
    role: 'assistant',
    content: '',
    status: 'streaming',
    reasoning: '正在组织回答…',
  })

  const full =
    `收到：「${prompt}」\n\n` +
    '这是 **假 SSE** 演示：\n\n' +
    '- 由定时器逐字追加 `content`\n' +
    '- 业务侧可替换为真实模型流\n\n' +
    '```ts\nmessage.content += chunk\n```'

  let index = 0
  timer.value = window.setInterval(() => {
    const target = messages.value.find((item) => item.id === assistantId)
    if (!target) return
    if (index >= full.length) {
      target.status = 'done'
      generating.value = false
      clearTimer()
      return
    }
    const chunk = full.slice(index, index + 2)
    target.content += chunk
    tokens.value.completion += chunk.length
    index += 2
  }, 40)
}

function onStop() {
  clearTimer()
  generating.value = false
  const last = [...messages.value]
    .reverse()
    .find((item) => item.role === 'assistant')
  if (last && last.status === 'streaming') last.status = 'stopped'
}

function onSuggestion(text: string) {
  fakeStream(text)
}
</script>

<template>
  <div style="display: grid; gap: 12px">
    <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap">
      <DanModelSelect v-model="model" :options="modelOptions" />
      <DanTokenUsage
        :prompt-tokens="tokens.prompt"
        :completion-tokens="tokens.completion"
      />
      <DanGenerationControl
        :generating="generating"
        @stop="onStop"
        @regenerate="fakeStream('请再回答一次')"
      />
    </div>

    <DanSuggestion
      :items="['写一个按钮示例', '解释 Form 校验', '给 Chat 加停止按钮']"
      @select="onSuggestion"
    />

    <DanChat
      :messages="messages"
      :generating="generating"
      @send="fakeStream"
      @stop="onStop"
    >
      <template #footer>
        <DanChatInput />
      </template>
    </DanChat>
  </div>
</template>

API

Props

属性	说明	类型	默认值	必填
messages	消息列表，由业务侧维护	ChatMessageModel[]	[]	否
generating	是否处于生成中；会注入给 ChatInput 等子组件	boolean	false	否

ChatMessageModel

字段	说明	类型	必填
id	唯一标识	string	是
role	角色	'user' | 'assistant' | 'system' | 'tool'	是
content	正文，可含 Markdown	string	是
status	消息状态	'pending' | 'streaming' | 'done' | 'error' | 'stopped'	否
reasoning	思考过程文本	string	否
attachments	附件列表	ChatAttachment[]	否

Events

事件名	说明	回调参数
send	子级 ChatInput 发送时触发（上下文 send）	(content: string) => void
stop	停止生成	() => void

Slots

插槽名	说明	作用域参数
default	自定义消息列表；不传则默认渲染 DanChatMessage	—
footer	底部区域，通常放 DanChatInput	—

上下文

DanChat 会 provide：

字段	说明
messages	消息列表 Ref
generating	生成中 Ref
send	触发发送
stop	触发停止

子组件可通过 injectChat() 读取（需在 Chat 子树内）。