@think-apps/vue-chat-sdk/README.md

Vue.js SDK for Think Apps Chat Integration

# Think Apps Vue Chat SDK

<div align="center">

![Vue 3](https://img.shields.io/badge/Vue-3.x-4FC08D?style=for-the-badge&logo=vue.js)
![JavaScript](https://img.shields.io/badge/JavaScript-ES6+-F7DF1E?style=for-the-badge&logo=javascript)
![iOS Style](https://img.shields.io/badge/Design-iOS%20Style-000000?style=for-the-badge&logo=apple)

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

[🚀 快速开始](#快速开始) • [📖 API文档](./docs/API.md) • [💡 在线演示](./examples/) • [🎨 样式测试](./examples/demos/style-test.html)

</div>

## ✨ 特性

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

## 📦 安装

```bash
# 使用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框架产生冲突。

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

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

## 🚀 快速开始

### 1. 全局注册

```javascript
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. 使用组件

```vue
<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

```vue
<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原则，移除复杂功能

### 样式变量

```css
: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类
- ✅ **优化体积** - 构建时自动移除未使用的样式

### 使用方式

```javascript
// 方式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)
```

```vue
<!-- 方式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
/* 在您的全局CSS中 */
.think-apps-chat-sdk {
  --chat-primary: #your-primary-color;
  --chat-background: #your-background-color;
  /* 更多自定义变量... */
}
```

### 暗色模式支持

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

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

## 📚 核心组件

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

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

> 更多组件API请参考 [API文档](./docs/API.md)

## 🔧 配置选项

### 全局配置

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

### 组件配置

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

## 🌐 浏览器支持

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

## 🛠 开发

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

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm type-check
```

## 📄 许可证

MIT License

## 🎮 在线演示

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

```bash
# 克隆项目
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！

---

<div align="center">

**[Think Apps](https://think-apps.com) © 2024**

Made with ❤️ for the Vue.js community

</div>