🚀 打造极致聊天体验：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即可使用。

基础用法

<template>
  <uz-chat 
    @sendMessage="sendMessage"
    :isSending="isSending"
    :messages="messages"
    v-model:modelValue="inputMessage"
    :offset-height="topHeight + 'rpx'"
  ></uz-chat>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const isSending = ref(false)
const messages = ref([])
const inputMessage = ref('')

// 发送消息处理
const sendMessage = async (msg: string) => {
  // 实现消息发送逻辑
}
</script>

对接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类型定义
• 轻量化设计：核心功能打包体积小

📈 未来规划

• 支持上拉加载更多历史消息
• 支持语音消息
• 自定义表情包功能
• 暗黑模式

🤝 如何获取

• 插件市场地址：ext.dcloud.net.cn/plugin?name…
• 版本：v1.0.0

💡 写在最后

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

如果觉得这个组件对你有帮助，欢迎在掘金、CSDN等平台分享你的使用体验，也欢迎提交issue和PR参与项目贡献！