Think Apps Vue Chat SDK

一个现代化的Vue.js聊天组件库，专为Think Apps平台设计，采用iOS风格的用户界面。

🚀 快速开始 • 📖 API文档 • 💡 在线演示 • 🎨 样式测试

✨ 特性

• 🚀 Vue 3 Composition API - 基于最新的Vue 3技术栈
• 💬 流式聊天 - 支持实时流式响应和工具调用
• 🍎 iOS风格设计 - 毛玻璃效果、大圆角、统一交互（已移除干扰动效）
• 📝 完整Markdown支持 - 表格、任务列表、代码高亮等高级功能
• 📱 响应式设计 - 完美适配桌面端和移动端
• 🔧 现代化开发 - ES6+语法，模块化设计
• 🛠 工具调用可视化 - 直观的Function Calling展示，立即响应
• 🎯 易于集成 - 插件化设计，开箱即用
• ⚡ 性能优化 - 移除不必要动效，提升专业体验

📦 安装

# 使用pnpm（推荐）
pnpm add @think-apps/vue-chat-sdk

# 使用npm
npm install @think-apps/vue-chat-sdk

# 使用yarn
yarn add @think-apps/vue-chat-sdk

🎨 样式依赖

SDK已内置TailwindCSS样式，无需额外安装TailwindCSS。组件样式完全独立，不会与您项目中的CSS框架产生冲突。

重要提示：请确保在使用组件时引入样式文件：

import '@think-apps/vue-chat-sdk/style.css'

🚀 快速开始

1. 全局注册

import { createApp } from 'vue'
import { ThinkAppsChatSDK } from '@think-apps/vue-chat-sdk'
import '@think-apps/vue-chat-sdk/style.css'

const app = createApp(App)

app.use(ThinkAppsChatSDK, {
  baseURL: 'https://your-api-domain.com',
  apiKey: 'your-api-key'
})

app.mount('#app')

2. 使用组件

<template>
  <ChatContainer
    agent-id="your-agent-id"
    placeholder="输入您的问题..."
    :show-tool-calls="true"
    @message-sent="onMessageSent"
    @message-received="onMessageReceived"
  />
</template>

<script setup>
function onMessageSent(message) {
  console.log('用户发送:', message)
}

function onMessageReceived(message) {
  console.log('收到回复:', message)
}
</script>

3. Composition API

<script setup>
import { useChat } from '@think-apps/vue-chat-sdk'

const { 
  messages, 
  sendMessage, 
  loading, 
  streaming 
} = useChat('your-agent-id')

async function handleSend() {
  await sendMessage('Hello, AI!')
}
</script>

🎨 iOS风格设计

核心特色

• 统一风格 - 所有组件采用一致的iOS设计语言
• 毛玻璃效果 - backdrop-blur-xl 背景模糊
• 大圆角设计 - rounded-3xl 统一圆角
• 弹性动画 - iOS风格的交互反馈
• 简化逻辑 - 遵循KISS原则，移除复杂功能

样式变量

:root {
  --chat-primary: #007AFF;
  --chat-background: #F2F2F7;
  --chat-surface: rgba(255, 255, 255, 0.8);
  --chat-text: #000000;
  --chat-border: rgba(0, 0, 0, 0.1);
  --chat-shadow: rgba(0, 0, 0, 0.1);
}

🔧 样式配置

内置样式系统

SDK采用内置TailwindCSS样式系统，具有以下优势：

• ✅ 零配置 - 无需在项目中安装或配置TailwindCSS
• ✅ 样式隔离 - 不会与您现有的CSS框架产生冲突
• ✅ 按需加载 - 只包含组件实际使用的CSS类
• ✅ 优化体积 - 构建时自动移除未使用的样式

使用方式

// 方式1：全局引入（推荐）
import { createApp } from 'vue'
import { ThinkAppsChatSDK } from '@think-apps/vue-chat-sdk'
import '@think-apps/vue-chat-sdk/style.css' // 必须引入

const app = createApp(App)
app.use(ThinkAppsChatSDK)

<!-- 方式2：组件级引入 -->
<template>
  <ChatContainer agent-id="your-agent-id" />
</template>

<script setup>
import { ChatContainer } from '@think-apps/vue-chat-sdk'
import '@think-apps/vue-chat-sdk/style.css' // 必须引入
</script>

自定义主题

如果需要自定义主题，可以通过CSS变量覆盖默认样式：

/* 在您的全局CSS中 */
.think-apps-chat-sdk {
  --chat-primary: #your-primary-color;
  --chat-background: #your-background-color;
  /* 更多自定义变量... */
}

暗色模式支持

SDK内置暗色模式支持，会自动响应系统主题变化：

<ChatContainer
  agent-id="your-agent-id"
  theme="auto"
/>

📚 核心组件

ChatContainer

主聊天容器，包含完整的聊天功能。

<ChatContainer
  agent-id="agent-123"
  :config="{ baseURL: 'https://api.example.com' }"
  placeholder="输入消息..."
  :show-tool-calls="true"
  max-height="600px"
/>

更多组件API请参考 API文档

🔧 配置选项

全局配置

{
  baseURL: 'https://api.example.com',
  apiKey: 'your-api-key',
  timeout: 30000,
  getUserKey: () => 'user-123',
  getHeaders: () => ({
    'Authorization': 'Bearer token'
  })
}

组件配置

{
  placeholder: '输入消息...',
  maxHeight: '600px',
  showToolCalls: true,
  showVoiceButton: true,
  showFileButton: true
}

🌐 浏览器支持

| Chrome | Firefox | Safari | Edge | |--------|---------|--------|------| | ≥ 88 | ≥ 85 | ≥ 14 | ≥ 88 |

🛠 开发

# 克隆项目
git clone <repository-url>
cd vue-chat-sdk

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm type-check

📄 许可证

MIT License

🎮 在线演示

想要快速体验SDK功能？运行本地演示：

# 克隆项目
git clone https://github.com/think-apps/vue-chat-sdk.git
cd vue-chat-sdk

# 安装依赖并构建
pnpm install
pnpm build

# 启动演示服务器
pnpm serve:demo

然后访问 http://localhost:8080 查看完整功能演示。

📝 更新日志

v1.0.9 (2024-07-18)

• 🐛 修复流式响应处理中的连接错误问题
• 🔧 改进错误处理和连接管理，减少socket异常
• 📝 优化流式数据解析的稳定性

v1.0.8 (2024-07-18)

• 🔧 移除废弃的 mode 参数，适配最新后端接口
• 📝 更新类型定义，移除不再使用的字段
• ✨ 保持SDK专注于聊天功能，遵循轻量化原则

v1.0.7 及之前版本

• 基础聊天功能和流式响应支持
• iOS风格界面设计
• 工具调用可视化
• Markdown渲染支持

🤝 贡献

欢迎提交 Issue 和 Pull Request！

Think Apps © 2024

Made with ❤️ for the Vue.js community