DSBJ UI Components - AI聊天机器人组件

一个功能丰富、美观易用的Vue 3 AI聊天机器人组件库。

✨ 特性

• 🎨 美观的UI设计 - 现代化的聊天界面，支持自定义主题色
• ⚡ 流式响应 - 实时显示AI回复，提升用户体验
• 📝 Markdown支持 - 支持富文本格式，代码高亮
• 📋 消息操作 - 复制消息、下载对话记录
• 🔄 会话管理 - 本地存储聊天记录，支持清空对话
• 📱 响应式设计 - 适配各种屏幕尺寸
• 🎯 快捷入口 - 预设常用问题，快速开始对话
• 🌐 全屏模式 - 支持全屏聊天体验
• 🔧 TypeScript支持 - 完整的类型定义

📦 安装

npm install ds-business

🚀 快速开始

全局注册

import { createApp } from 'vue';
import DSBusiness from 'ds-business';
import 'ds-business/dist/style.css';

const app = createApp(App);
app.use(DSBJUIComponents);
app.mount('#app');

按需引入

<template>
  <div>
    <AiChatBot
      endpoint="https://your-api-endpoint.com/chat"
      assistant-name="智能助手"
      welcome-message="您好！我是您的AI助手，有什么可以帮助您的吗？"
      :conversation-starters="starters"
      primary-color="#1890ff"
      :enable-markdown="true"
      :enable-copy="true"
    />
  </div>
</template>

<script setup lang="ts">
import { AiChatBot } from 'ds-business';
import 'ds-business/dist/style.css';

const starters = [
  {
    prompt: '介绍一下你自己',
    promptText: '你好，请介绍一下你自己',
  },
  {
    prompt: '帮我写一段代码',
    promptText: '请帮我写一个Vue组件的示例代码',
  },
];
</script>

📖 API文档

Props

| 属性名 | 类型 | 默认值 | 说明 | | ---------------------- | ----------------------- | --------------------------- | ---------------------- | | endpoint | string | - | AI API接口地址 | | appId | string | - | 应用ID（阿里云智能体） | | apiKey | string | - | API密钥 | | assistantName | string | 'AI助手' | 助手名称 | | welcomeMessage | string | '您好！我是您的AI助手...' | 欢迎消息 | | primaryColor | string | '#1890ff' | 主题色 | | backgroundColor | string | '#ffffff' | 背景色 | | width | string \| number | '400px' | 聊天窗口宽度 | | height | string \| number | '600px' | 聊天窗口高度 | | conversationStarters | ConversationStarter[] | [] | 快捷入口配置 | | maxMessages | number | 100 | 最大消息数量 | | enableMarkdown | boolean | true | 是否启用Markdown | | enableCopy | boolean | true | 是否启用复制功能 | | placeholder | string | '请输入您的问题...' | 输入框占位符 | | temperature | number | 0.7 | AI温度参数 | | maxTokens | number | 2000 | 最大token数 | | streamResponse | boolean | true | 是否启用流式响应 | | modelValue | boolean | false | 控制显示/隐藏 |

Events

| 事件名 | 参数 | 说明 | | ---------------------- | ------------------- | -------------- | | update:modelValue | (value: boolean) | 显示状态变化 | | message-sent | (message: string) | 发送消息时触发 | | message-received | (message: string) | 接收消息时触发 | | error | (error: Error) | 发生错误时触发 | | conversation-started | () | 开始对话时触发 | | conversation-ended | () | 结束对话时触发 |

类型定义

interface ConversationStarter {
  prompt: string; // 发送给AI的提示词
  promptText: string; // 显示给用户的文本
  icon?: string; // 图标（可选）
}

interface Message {
  id: string;
  content: string;
  isUser: boolean;
  role: 'user' | 'assistant' | 'system';
  timestamp: number;
  status?: 'sending' | 'sent' | 'error';
  isThinking?: boolean;
  formattedTime?: string;
}

🔧 API接口格式

组件支持多种API格式：

OpenAI兼容格式

// 请求格式
{
  "messages": [
    {
      "role": "user",
      "content": "用户消息"
    }
  ],
  "stream": true,
  "temperature": 0.7,
  "max_tokens": 2000
}

// 流式响应格式
{
  "choices": [
    {
      "delta": {
        "content": "AI回复内容片段"
      },
      "finish_reason": null
    }
  ]
}

阿里云智能体格式

// 请求格式
{
  "input": {
    "prompt": "用户消息"
  },
  "parameters": {
    "temperature": 0.7,
    "max_tokens": 2000
  },
  "debug": false
}

// 响应格式
{
  "output": {
    "text": "AI回复内容"
  },
  "usage": {
    "input_tokens": 10,
    "output_tokens": 20
  },
  "request_id": "req_123"
}

🎨 自定义样式

组件提供了丰富的CSS变量用于自定义样式：

.ai-chatbot {
  --primary-color: #1890ff;
  --background-color: #ffffff;
  --text-color: #333333;
  --border-radius: 8px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

📱 响应式设计

组件内置响应式设计，在不同屏幕尺寸下自动调整：

• 桌面端: 固定尺寸聊天窗口
• 平板端: 适中尺寸，保持良好体验
• 移动端: 全屏显示，优化触摸操作

🔍 示例

查看 example.html 文件获取完整的使用示例。

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 支持

如有问题，请联系开发团队或提交 Issue。