sg-paisou 0.0.0 → 0.0.1

package/README.npm.md

@@ -0,0 +1,322 @@
+# AI Chat SDK
+
+一个功能强大的 Vue 3 AI 聊天组件，支持流式消息、TTS 语音播放、反馈系统等功能。
+
+## ✨ 特性
+
+- 🎨 **完全可配置** - 所有图片、样式、文本都可以自定义
+- 🔊 **TTS 支持** - 内置文本转语音功能，支持流式播放
+- 💬 **流式消息** - 支持 AI 消息的流式接收和打字机效果
+- 📱 **响应式设计** - 适配各种屏幕尺寸
+- 🎭 **反馈系统** - 支持点赞、不喜欢、长按反馈等交互
+- 🖼️ **图片支持** - 支持消息中的图片显示和预览
+- 🎯 **TypeScript** - 完整的类型定义支持
+
+## 📦 安装
+
+```bash
+npm install @tal/ai-chat-sdk
+# 或
+pnpm add @tal/ai-chat-sdk
+# 或
+yarn add @tal/ai-chat-sdk
+```
+
+## 🚀 快速开始
+
+### 基础使用
+
+```vue
+<template>
+  <AIChatComponent :config="chatConfig" :questionInfo="questionInfo" />
+</template>
+
+<script setup lang="ts">
+import { AIChatComponent, createAIChatConfig } from '@tal/ai-chat-sdk'
+import '@tal/ai-chat-sdk/style.css'
+
+const chatConfig = createAIChatConfig({
+  aiInfo: {
+    name: 'AI Assistant',
+    title: 'Your helpful assistant'
+  }
+})
+
+const questionInfo = {
+  sessionId: 'session-123',
+  questionType: 1,
+  imgUrl: 'https://example.com/question.jpg'
+}
+</script>
+```
+
+### 自定义配置
+
+```typescript
+import { createAIChatConfig, IMAGE_ASSETS } from '@tal/ai-chat-sdk'
+
+const config = createAIChatConfig({
+  // AI 头像配置
+  avatar: {
+    src: 'https://your-domain.com/avatar.png', // 或使用内置: IMAGE_ASSETS.maskGroup
+    width: '48px',
+    height: '48px',
+    borderRadius: '50%'
+  },
+  
+  // AI 信息配置
+  aiInfo: {
+    name: 'ChatGPT',
+    title: 'AI Assistant',
+    nameStyle: {
+      color: '#333',
+      fontSize: '16px',
+      fontWeight: 'bold'
+    },
+    titleStyle: {
+      color: '#666',
+      fontSize: '12px'
+    }
+  },
+  
+  // 静音按钮配置
+  muteButton: {
+    soundOnIcon: IMAGE_ASSETS.soundOn,  // 使用内置图标
+    soundOffIcon: IMAGE_ASSETS.soundOff,
+    width: '24px',
+    height: '24px'
+  },
+  
+  // 反馈按钮配置
+  feedback: {
+    show: true,
+    buttons: [
+      {
+        id: 'helpful',
+        text: 'Helpful',
+        icon: IMAGE_ASSETS.smile
+      }
+    ]
+  },
+  
+  // 输入框配置
+  input: {
+    placeholder: 'Type your message...',
+    sendIcon: IMAGE_ASSETS.voiceTube,
+    borderRadius: '24px'
+  },
+  
+  // 样式配置
+  styles: {
+    container: {
+      background: '#ffffff',
+      borderRadius: '16px',
+      boxShadow: '0 2px 12px rgba(0,0,0,0.1)'
+    },
+    header: {
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      padding: '16px',
+      borderRadius: '16px 16px 0 0'
+    },
+    messages: {
+      aiMessage: {
+        background: '#f5f5f5',
+        color: '#333',
+        borderRadius: '12px',
+        padding: '12px 16px'
+      },
+      userMessage: {
+        background: '#667eea',
+        color: '#ffffff',
+        borderRadius: '12px',
+        padding: '12px 16px'
+      },
+      messageGap: '12px'
+    }
+  },
+  
+  // 自定义类名
+  customClasses: {
+    container: 'my-chat-container',
+    header: 'my-chat-header',
+    chatContent: 'my-chat-content',
+    inputContainer: 'my-input-container'
+  }
+})
+```
+
+## 📚 API 文档
+
+### Props
+
+#### `config` (IAIChatConfig)
+
+聊天组件的配置对象，包含所有可自定义的选项。
+
+#### `questionInfo` (Object)
+
+题目信息对象，包含以下字段：
+
+```typescript
+{
+  sessionId: string;        // 会话ID
+  sessionDetailId?: string; // 会话详情ID
+  questionType: number;     // 题目类型 (0: 普通题, 1: 其他)
+  imgUrl?: string;          // 题目图片URL
+  imagePath?: string;       // 题目图片路径
+  orcText?: string;         // OCR识别的文本
+}
+```
+
+### Events
+
+```typescript
+// 消息发送事件
+@messageSend="(message: string) => void"
+
+// 反馈事件
+@feedback="(feedbackId: string) => void"
+
+// 静音切换事件
+@muteToggle="(isMuted: boolean) => void"
+
+// "不是我的问题"事件
+@not-my-question="() => void"
+
+// "拍另一张"事件
+@snap-another="() => void"
+```
+
+### 内置图片资源
+
+SDK 提供了一组内置的 Base64 编码图片，可以直接使用：
+
+```typescript
+import { IMAGE_ASSETS } from '@tal/ai-chat-sdk'
+
+IMAGE_ASSETS.maskGroup      // AI 头像
+IMAGE_ASSETS.soundOn        // 声音开启图标
+IMAGE_ASSETS.soundOff       // 声音关闭图标
+IMAGE_ASSETS.smile          // 笑脸图标
+IMAGE_ASSETS.confused       // 困惑图标
+IMAGE_ASSETS.lightbulb      // 灯泡图标
+IMAGE_ASSETS.voiceTube      // 发送图标
+IMAGE_ASSETS.userAvatar     // 用户头像
+```
+
+### 预设配置
+
+SDK 提供了几个预设配置供快速使用：
+
+```typescript
+import { PRESET_CONFIGS } from '@tal/ai-chat-sdk'
+
+// 默认配置
+PRESET_CONFIGS.default
+
+// 简洁模式
+PRESET_CONFIGS.minimal
+
+// 暗色主题
+PRESET_CONFIGS.dark
+
+// 紧凑模式
+PRESET_CONFIGS.compact
+```
+
+使用示例：
+
+```typescript
+const config = PRESET_CONFIGS.dark
+// 或者在预设基础上自定义
+const customConfig = createAIChatConfig({
+  ...PRESET_CONFIGS.dark,
+  aiInfo: {
+    name: 'My AI'
+  }
+})
+```
+
+## 🎨 样式定制
+
+### 使用 CSS 变量
+
+```css
+:root {
+  --ai-chat-primary-color: #667eea;
+  --ai-chat-secondary-color: #764ba2;
+  --ai-chat-text-color: #333;
+  --ai-chat-bg-color: #ffffff;
+}
+```
+
+### 覆盖默认样式
+
+```css
+/* 自定义消息样式 */
+.ai-message {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+/* 自定义输入框样式 */
+.chat-input {
+  border: 2px solid #667eea;
+  border-radius: 24px;
+}
+```
+
+## 🔧 高级功能
+
+### TTS 语音播放
+
+组件内置了 TTS 功能，支持：
+
+- 自动播放 AI 消息
+- 手动播放/停止
+- 按段落播放
+- 播放状态显示
+
+### 流式消息
+
+支持 SSE (Server-Sent Events) 流式消息接收，实现打字机效果。
+
+### 反馈系统
+
+- 点赞/不喜欢
+- 长按消息显示反馈弹窗
+- 自定义反馈选项
+
+## 📝 类型定义
+
+完整的 TypeScript 类型定义：
+
+```typescript
+import type {
+  IAIChatConfig,
+  IAIChatSDKProps,
+  IMessage,
+  IAvatarConfig,
+  IAIInfoConfig,
+  IMuteButtonConfig,
+  IFeedbackButton,
+  IFeedbackConfig,
+  IInputConfig,
+  IStyleConfig,
+  IMessageStyle
+} from '@tal/ai-chat-sdk'
+```
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📄 License
+
+MIT
+
+## 🔗 相关链接
+
+- [GitHub Repository](https://github.com/tal-tech/ai-chat-sdk)
+- [Issue Tracker](https://github.com/tal-tech/ai-chat-sdk/issues)
+- [Changelog](https://github.com/tal-tech/ai-chat-sdk/blob/main/CHANGELOG.md)