AI 对话组件

一个功能完整的 AI 对话组件，类似于 DeepSeek、腾讯元宝、ChatGPT 的对话界面。

✨ 特性

• 🎯 多种消息类型：支持文本、Markdown、ECharts 图表、自定义组件
• ⌨️ 打字机效果：文本消息支持可配置的打字机动画
• 🤔 思考过程：支持显示 AI 的思考过程，提升用户体验
• 📱 移动端优化：完全响应式设计，支持移动端 H5
• 🎨 主题支持：内置明暗主题切换
• 🔧 高度可定制：简单易用的 API，支持自定义扩展
• 📦 现代化技术栈：React 18 + TypeScript + Vite + Redux Toolkit + Less

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

📖 使用方法

基础用法

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import AIChat from './components/AIChat';

function App() {
  return (
    <Provider store={store}>
      <AIChat
        config={{
          theme: 'light',
          showThinking: true,
          enableMarkdown: true,
          enableECharts: true,
        }}
        onSendMessage={(message) => {
          console.log('用户发送:', message);
          // 处理消息发送逻辑
        }}
      />
    </Provider>
  );
}

高级配置

import { ChatConfig } from './types';

const config: Partial<ChatConfig> = {
  // 打字机效果配置
  typewriter: {
    speed: 30,           // 打字速度（毫秒）
    delay: 500,          // 开始延迟（毫秒）
    pauseOnPunctuation: true,  // 标点符号处暂停
    pauseDuration: 300,  // 暂停时长（毫秒）
  },
  
  // 功能开关
  showThinking: true,    // 显示思考过程
  enableMarkdown: true,  // 启用 Markdown 渲染
  enableECharts: true,   // 启用 ECharts 图表
  
  // 主题和样式
  theme: 'light',        // 'light' | 'dark'
  mobileOptimized: true, // 移动端优化
  
  // 自定义渲染器
  customRenderers: {
    'card': CardRenderer,
    'table': TableRenderer,
  },
};

🎨 消息类型

1. 文本消息

const textMessage = {
  id: 'msg-1',
  role: 'assistant',
  type: 'text',
  content: '这是一条文本消息',
  timestamp: Date.now(),
  status: 'completed',
};

2. Markdown 消息

const markdownMessage = {
  id: 'msg-2',
  role: 'assistant',
  type: 'markdown',
  content: `# 标题\n\n**粗体** 和 *斜体*\n\n\`\`\`javascript\nconsole.log("Hello World");\n\`\`\``,
  timestamp: Date.now(),
  status: 'completed',
};

3. ECharts 图表消息

const chartMessage = {
  id: 'msg-3',
  role: 'assistant',
  type: 'echarts',
  content: '数据可视化图表',
  chartOption: {
    title: { text: '销售数据' },
    xAxis: { data: ['一月', '二月', '三月'] },
    yAxis: {},
    series: [{
      type: 'bar',
      data: [120, 200, 150]
    }]
  },
  timestamp: Date.now(),
  status: 'completed',
};

4. 自定义消息

import { CardMessage } from './examples/CustomMessageExample';

const customMessage = {
  id: 'msg-4',
  role: 'assistant',
  type: 'custom',
  content: '自定义卡片消息',
  customComponent: CardMessage,
  customProps: {
    title: '产品信息',
    subtitle: '最新产品介绍',
    items: ['特性1', '特性2', '特性3'],
    footer: '更新时间: 2024-01-01'
  },
  timestamp: Date.now(),
  status: 'completed',
};

🔧 API 参考

AIChat Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | config | Partial | - | 组件配置 | | onSendMessage | (message: string) => void | - | 消息发送回调 | | onMessageUpdate | (message: Message) => void | - | 消息更新回调 | | className | string | - | 自定义 CSS 类名 | | style | React.CSSProperties | - | 自定义样式 |

ChatConfig

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | typewriter | TypewriterConfig | - | 打字机效果配置 | | showThinking | boolean | true | 是否显示思考过程 | | enableMarkdown | boolean | true | 是否启用 Markdown | | enableECharts | boolean | true | 是否启用 ECharts | | theme | 'light' | 'dark' | 'light' | 主题 | | mobileOptimized | boolean | true | 移动端优化 | | customRenderers | Record<string, Component> | - | 自定义渲染器 |

📱 移动端适配

组件内置了完整的移动端适配：

• 响应式布局设计
• 触摸友好的交互
• 动态视口高度支持
• iOS Safari 兼容性优化
• 横屏/竖屏自适应

🎯 自定义扩展

添加自定义消息类型

// 1. 创建自定义组件
const MyCustomComponent = ({ content, metadata }) => (
  <div className="my-custom-message">
    <h3>{metadata.title}</h3>
    <p>{content}</p>
  </div>
);

// 2. 注册到配置中
const config = {
  customRenderers: {
    'my-type': MyCustomComponent,
  },
};

// 3. 使用自定义消息
const message = {
  type: 'custom',
  customComponent: MyCustomComponent,
  customProps: { title: '自定义标题' },
  // ... 其他属性
};

自定义样式

// 覆盖默认样式
.ai-chat {
  .message {
    &.custom {
      .message-body {
        background: #f0f0f0;
        border-radius: 12px;
      }
    }
  }
}

🛠️ 开发

项目结构

src/
├── components/          # 组件
│   ├── AIChat/         # 主对话组件
│   ├── TypewriterText/ # 打字机效果
│   ├── ThinkingProcess/# 思考过程
│   └── MessageRenderers/# 消息渲染器
├── store/              # Redux 状态管理
├── types/              # TypeScript 类型定义
├── hooks/              # 自定义 Hooks
└── examples/           # 示例和演示

技术栈

• React 18 - 用户界面库
• TypeScript - 类型安全
• Vite - 构建工具
• Redux Toolkit - 状态管理
• Less - CSS 预处理器
• ECharts - 图表库
• React Markdown - Markdown 渲染

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 支持

如有问题，请通过以下方式联系：

• 提交 GitHub Issue
• 发送邮件至 [[email protected]]

⭐ 如果这个项目对你有帮助，请给个 Star！