全端AI聊天组件来了

打造极致聊天体验：uz-chat——全端AI聊天组件来了！

插件介绍

uz-chat是一款基于uni-app开发的全端AI聊天组件，可无缝对接DeepSeek、OpenAI等主流AI服务。它不仅支持基础的消息展示，还内置了打字机效果、Markdown渲染和平滑滚动等高级特性，让你的应用瞬间拥有专业级聊天体验！

核心功能亮点

1️⃣ 全端兼容，一次开发多端运行

完美支持H5、小程序、App等多平台

基于uni-app生态，无缝集成现有项目

2️⃣ 流畅的消息交互体验

实时滚动：新消息自动平滑滚动到底部

⌨️打字机效果：模拟AI思考和输入过程

消息操作：支持复制、编辑消息内容

3️⃣ 强大的内容渲染

Markdown支持：代码高亮、表格、列表等格式化展示

代码块展示：支持多种编程语言语法高亮

富文本内容：满足复杂消息展示需求

4️⃣ 灵活的自定义能力

支持自定义头像、昵称

可扩展的消息类型插槽

丰富的样式定制选项

快速上手

安装方式

在DCloud插件市场导入聊天消息组件uni_modules版本，无需额外import即可使用。

基础用法

<uz-chat

  @sendMessage="sendMessage"

  :isSending="isSending"

  :messages="messages"

  v-model:modelValue="inputMessage"

  :offset-height="topHeight + 'rpx'"

></uz-chat>

import { ref } from 'vue'

const isSending = ref(false)

const messages = ref([])

const inputMessage = ref('')

// 发送消息处理

const sendMessage = async (msg: string) => {

// 实现消息发送逻辑

}

对接AI服务

// 对接DeepSeek等AI服务示例

async function createChatCompletion(messages) {

const openai = new OpenAI({

  baseURL: 'https://api.deepseek.com',

  apiKey: process.env.DEEPSEEK_API_KEY

})

return openai.chat.completions.create({

  messages: messages,

  model: 'deepseek-chat',

  stream: true

})

}

技术特性

高效渲染：采用虚拟列表技术，支持大量消息展示

性能优化：消息滚动节流处理，避免卡顿

类型安全：完整的TypeScript类型定义

轻量化设计：核心功能打包体积小

未来规划

[ ] 支持上拉加载更多历史消息

[ ] 支持语音消息

[ ] 自定义表情包功能

[ ] 暗黑模式

🤝 如何获取

插件市场地址：https://ext.dcloud.net.cn/plugin?name=uz-chat

版本：v1.0.0

写在最后

uz-chat致力于为开发者提供开箱即用的高质量聊天组件，无论是构建AI助手、在线客服还是社交聊天应用，它都能满足你的需求。现在就集成uz-chat，为你的应用增添专业的聊天体验吧！