AiChatPanel 对话面板

组合式对话面板，内部集成 AiPrompts、AiBubbleList 和 AiSender。适合快速搭建一个完整的 Element Plus X 风格 AI 对话区域。

何时使用

• 需要快速落地一个完整问答区域。
• Vue2 宿主通过 SDK 挂载 Vue3 对话组件。
• 业务只关心消息列表、提示词、发送和停止事件，不想手动拼装底层组件。

代码演示

基础用法

import { mountAiChat } from '@zhiyongui/lingxi-ui/sdk'
import '@zhiyongui/lingxi-ui/style.css'

export default {
  data: function () {
    return {
      instance: null,
      loading: false,
      messages: [
        { id: 1, role: 'assistant', content: '你好，我是灵析助手。' }
      ]
    }
  },
  mounted: function () {
    this.instance = mountAiChat({
      container: this.$refs.container,
      props: {
        title: '智能问答',
        subtitle: '企业知识库助手',
        messages: this.messages,
        prompts: ['总结报告', '生成知识图谱', '解释政策'],
        loading: this.loading,
        onSend: this.handleSend
      }
    })
  },
  beforeDestroy: function () {
    this.instance && this.instance.unmount()
  },
  methods: {
    handleSend: function (value) {
      this.messages = this.messages.concat({ id: Date.now(), role: 'user', content: value })
      this.instance.update({ messages: this.messages })
    }
  }
}

加载与停止

this.instance.update({
  messages: this.messages,
  loading: this.generating,
  placeholder: '请输入问题',
  onSend: this.startGenerate,
  onStop: this.abortGenerate
})

通过 ref 控制草稿

export default {
  methods: {
    fillPrompt: function () {
      this.instance.callMethod('setDraft', '请总结这份报告')
    },
    clearPrompt: function () {
      this.instance.call('clearDraft')
    }
  }
}

API 标准表

Props

属性	类型	默认值	说明
title	string	'Lingxi AI Assistant'	面板标题。
subtitle	string	'Vue3 component mounted through Lingxi SDK'	面板副标题。
messages	AiChatMessage[]	[]	消息列表。
prompts	Array<string | AiPromptItem>	[]	快捷提示词。
loading	boolean	false	展示生成中的 assistant 占位消息。
placeholder	string	'Type a question'	输入框占位文案。

Events

事件	参数	说明
send	value: string	用户提交输入内容。
stop	-	用户请求停止生成。
promptClick	value: string	点击快捷提示词。

Slots

当前无公开 slot。深度定制消息、输入区或提示词时，建议组合 AiBubbleList、AiSender 和 AiPrompts。

Exposes

方法	参数	说明
setDraft(value)	string	设置输入草稿，返回设置后的草稿。
clearDraft()	-	清空输入草稿，返回清空前内容。

样式入口

import '@zhiyongui/lingxi-ui/ai-chat-panel/style.css'

FAQ

Vue2 页面更新消息后为什么列表不变？

Vue2 data 更新后需要调用 instance.update({ messages }) 同步到独立 Vue3 app。