更新记录

1.1.0（2026-02-28） 下载此版本

1. 优化插件包大小
2. 修复已知问题

平台兼容性

uni-app(5.01)

kz-ai-chat-ui AI 聊天 UI 组件库

基于 uni_modules 标准开发的 AI 聊天 UI 组件库。提供高性能的聊天列表渲染、消息气泡、输入框及常用交互，适配全平台。

功能特性

• 非侵入式：基于 uni_modules 标准，极简集成。
• 自动滚动：智能处理消息流式更新后的置底。
• Easycom 支持：无需手动引入组件，直接在模板中使用。
• 样式高度可定制：基于 Scss 编写，方便修改主题颜色。

安装与使用

1. 引入插件 (可选)

如果需要全局配置，可以在 main.js 中引入：

import { createSSRApp } from 'vue'
import App from './App.vue'
import kzAiChatUi from '@/uni_modules/kz-ai-chat-ui'

export function createApp() {
  const app = createSSRApp(App)
  app.use(kzAiChatUi)
  return {
    app
  }
}

2. 使用组件

直接在页面中使用 kz-ai-chat-ui 组件：

<template>
  <view>
    <kz-ai-chat-ui :messages="chatHistory" @send="handleSend" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
const chatHistory = ref([
  { role: 'assistant', content: '你好！我是你的 AI 助手，有什么可以帮你的吗？' }
])

const handleSend = (text) => {
  chatHistory.value.push({ role: 'user', content: text })
  // 在此处调用 AI 接口...
}
</script>

主要参数

开源协议

MIT