AI Chat Taro Component

一个基于 Taro 4+ 的 AI 聊天组件，支持多平台小程序开发。

特性

• 🚀 基于 Taro 4+ 开发，支持多平台
• 🎨 可自定义主题和样式
• 🤖 支持多 AI 模型切换
• 💭 智能思考过程展示
• 📱 响应式设计，适配各种屏幕
• ⚡ 流式输出效果
• 🔧 TypeScript 支持
• 📦 支持 npm 发布

支持平台

• 微信小程序
• 支付宝小程序
• 百度小程序
• 字节跳动小程序
• QQ 小程序
• 京东小程序
• H5
• React Native

安装

npm install @linloop/ai-chat-taro

使用

基础用法

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;

自定义主题

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;

完整配置

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 | 默认主题 | 主题配置 | | 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 | - | 关闭回调 |

类型定义

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;
}

开发

安装依赖

npm install

开发模式

# 微信小程序
npm run dev

# 其他平台
npm run dev -- --type alipay  # 支付宝小程序
npm run dev -- --type tt      # 字节跳动小程序
npm run dev -- --type h5      # H5

构建

# 构建库文件
npm run build:lib

# 构建小程序
npm run build

预览

npm run preview

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

1.0.0

• 初始版本发布
• 支持多平台小程序
• 支持自定义主题
• 支持多模型切换
• 支持思考过程展示
• 支持流式输出