Chat 对话

页内 AI 助手对话：提问、回复列表、输入发送。RdChat 通过 messages + @send 驱动。

基础用法

会话消息列表；发送后由业务追加 assistant 回复（可接流式）。

助手

演示对话

A

你好，我是演示助手。有什么可以帮你？

请介绍一下 Rodel UI。

A

Rodel UI（@rd-element/ui）是基于 Element Plus 的企业级 Vue 3 组件库。

<script setup lang="ts">
import { ref } from 'vue'
import { RdChat, type ChatMessage } from '@rd-element/ui'

const messages = ref<ChatMessage[]>([
  { id: '1', role: 'assistant', content: '你好，我是演示助手。' },
])

function onSend(text: string) {
  messages.value.push({ id: String(Date.now()), role: 'user', content: text })
}
</script>

<template>
  <div style="height: 360px">
    <RdChat
      :messages="messages"
      title="助手"
      subtitle="演示"
      @send="onSend"
    />
  </div>
</template>

API

Attributes

属性名	说明	类型	默认值
messages	会话消息列表	ChatMessage[]	[]
title / subtitle	顶部标题与欢迎语	string	—
assistantName	AI 头像名	string	'AI'
loading	生成中（禁用输入）	boolean	false
placeholder	输入占位	string	'发送消息…'
showAttach	是否显示附件按钮	boolean	true
maxHeight	容器最大高度	string	'600px'

Events

事件名	说明	类型
send	发送消息	(content: string) => void
attach	点击附件	() => void
refresh	刷新	() => void