npm package: @linloop/ai-chat-taro
Description: Taro 4+ AI Chat Component with customizable themes and models
Author: LinLoop
Latest version: 1.0.1

# AI Chat Taro Component

一个基于 Taro 4+ 的 AI 聊天组件，支持多平台小程序开发。

## 特性

- 🚀 基于 Taro 4+ 开发，支持多平台
- 🎨 可自定义主题和样式
- 🤖 支持多 AI 模型切换
- 💭 智能思考过程展示
- 📱 响应式设计，适配各种屏幕
- ⚡ 流式输出效果
- 🔧 TypeScript 支持
- 📦 支持 npm 发布

## 支持平台

- 微信小程序
- 支付宝小程序
- 百度小程序
- 字节跳动小程序
- QQ 小程序
- 京东小程序
- H5
- React Native

## 安装

```bash
npm install @linloop/ai-chat-taro
```

## 使用

### 基础用法

```tsx
import React from 'react';
import { AiChat } from '@linloop/ai-chat-taro';
// 导入样式
import '@linloop/ai-chat-taro/style';

const App = () => {
  return (
    <AiChat
      models={[
        { value: 'gpt-4', label: 'GPT-4', description: 'OpenAI 最新模型' },
        { value: 'claude', label: 'Claude-2', description: 'Anthropic 模型' }
      ]}
      defaultModel="gpt-4"
      onMessageSent={(message) => console.log('消息已发送:', message)}
      onReplyComplete={(message) => console.log('回复完成:', message)}
    />
  );
};

export default App;
```

### 自定义主题

```tsx
import React from 'react';
import { AiChat } from '@linloop/ai-chat-taro';

const App = () => {
  const themeConfig = {
    primaryColor: '#ff6b6b',
    inputBorderRadius: '24px',
    fontSize: '16px',
    fontFamily: 'Arial, sans-serif',
    inputBorderColor: '#ff6b6b'
  };

  return (
    <AiChat
      themeConfig={themeConfig}
      welcomeMessage="欢迎使用AI助手"
      welcomeDescription="我是您的AI助手，有什么可以帮助您的吗？"
    />
  );
};

export default App;
```

### 完整配置

```tsx
import React from 'react';
import { AiChat, ChatMessage, ModelConfig, ThemeConfig } from '@linloop/ai-chat-taro';

const App = () => {
  const models: ModelConfig[] = [
    { value: 'deepseek', label: 'DeepSeek-R1', description: '智能对话模型' },
    { value: 'gpt-4', label: 'GPT-4', description: 'OpenAI 最新模型' },
    { value: 'claude', label: 'Claude-2', description: 'Anthropic 模型' },
    { value: 'gemini', label: 'Gemini Pro', description: 'Google AI 模型' }
  ];

  const themeConfig: Partial<ThemeConfig> = {
    primaryColor: "#7b52fe",
    inputBorderRadius: "20px",
    fontSize: "14px",
    fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
    inputBorderColor: "#BDB8E4",
  };

  const handleMessageSent = (message: ChatMessage) => {
    console.log('消息已发送:', message);
  };

  const handleReplyComplete = (message: ChatMessage) => {
    console.log('回复完成:', message);
  };

  const handleModelChange = (model: string) => {
    console.log('模型已切换:', model);
  };

  const handleClear = () => {
    console.log('清空聊天记录');
  };

  const handleClose = () => {
    console.log('关闭聊天');
  };

  return (
    <AiChat
      models={models}
      themeConfig={themeConfig}
      defaultModel="deepseek"
      autoScroll={true}
      showModelSelector={true}
      showClearButton={true}
      showCloseButton={false}
      maxMessages={100}
      placeholder="请输入您的问题..."
      welcomeMessage="问问玄览"
      welcomeDescription="Hi~ 我是玄览，助你速阅文章、解析迷思，此刻静候垂询"
      chatName="玄览"
      enableThinking={true}
      onMessageSent={handleMessageSent}
      onReplyComplete={handleReplyComplete}
      onModelChange={handleModelChange}
      onClear={handleClear}
      onClose={handleClose}
    />
  );
};

export default App;
```

## API

### Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| models | ModelConfig[] | 默认模型列表 | 可选择的AI模型列表 |
| themeConfig | Partial<ThemeConfig> | 默认主题 | 主题配置 |
| defaultModel | string | 'deepseek' | 默认选择的模型 |
| autoScroll | boolean | true | 是否自动滚动到底部 |
| showModelSelector | boolean | true | 是否显示模型选择器 |
| showClearButton | boolean | true | 是否显示清空按钮 |
| showCloseButton | boolean | false | 是否显示关闭按钮 |
| maxMessages | number | 100 | 最大消息数量 |
| placeholder | string | '请输入您的问题...' | 输入框占位符 |
| welcomeMessage | string | '问问玄览' | 欢迎消息标题 |
| welcomeDescription | string | 默认描述 | 欢迎消息描述 |
| chatName | string | '玄览' | 聊天机器人名称 |
| enableThinking | boolean | true | 是否启用思考过程 |
| hideMessage | boolean | false | 是否隐藏消息区域 |
| onMessageSent | (message: ChatMessage) => void | - | 消息发送回调 |
| onReplyComplete | (message: ChatMessage) => void | - | 回复完成回调 |
| onModelChange | (model: string) => void | - | 模型切换回调 |
| onClear | () => void | - | 清空回调 |
| onClose | () => void | - | 关闭回调 |

### 类型定义

```typescript
interface ChatMessage {
  id: string;
  content: string;
  role: "user" | "assistant";
  timestamp: number;
  status?: "sending" | "completed" | "error" | 'pause';
  thinking?: string;
  thinkingTime?: number;
  thinkingExpanded?: boolean;
}

interface ModelConfig {
  value: string;
  label: string;
  description?: string;
  disabled?: boolean;
}

interface ThemeConfig {
  primaryColor?: string;
  background?: string;
  fileUploadText?: string;
  inputBorderRadius?: string;
  fontSize?: string;
  fontFamily?: string;
  inputBorderColor?: string;
}
```

## 开发

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
# 微信小程序
npm run dev

# 其他平台
npm run dev -- --type alipay  # 支付宝小程序
npm run dev -- --type tt      # 字节跳动小程序
npm run dev -- --type h5      # H5
```

### 构建

```bash
# 构建库文件
npm run build:lib

# 构建小程序
npm run build
```

### 预览

```bash
npm run preview
```

## 许可证

MIT

## 贡献

欢迎提交 Issue 和 Pull Request！

## 更新日志

### 1.0.0

- 初始版本发布
- 支持多平台小程序
- 支持自定义主题
- 支持多模型切换
- 支持思考过程展示
- 支持流式输出