AI 智能助手对话系统

一个基于 React 和 Tailwind CSS 构建的现代化 AI 对话系统，提供流畅的用户体验和丰富的交互功能。
项目链接：即将开放…

功能特点

• 🤖 智能对话：支持与 AI 助手实时对话，流式输出回答
• 📁 文件处理：支持上传和预览多种格式的文件（图片、文档等）
• 💬 对话管理：支持多会话管理，可以创建、切换和删除对话
• 🎨 现代界面：采用简约优雅的设计，提供流畅的动画效果
• 📱 响应式：完美支持各种设备尺寸的显示

安装

1. 克隆项目到本地：

git clone [项目地址]
cd [项目目录]

2. 安装依赖：

npm install
# 或
yarn install

3. 启动开发服务器：

npm run dev
# 或
yarn dev

技术栈

• React 18
• Vite
• Tailwind CSS
• 现代 JavaScript (ES6+)

项目结构

src/
  ├── components/          # 组件目录
  │   ├── ChatHistory.jsx # 聊天历史记录组件
  │   ├── ChatInput.jsx   # 聊天输入组件
  │   ├── FileUpload.jsx  # 文件上传组件
  │   └── ...
  ├── App.jsx             # 主应用组件
  ├── main.jsx           # 应用入口
  └── index.css          # 全局样式

主要功能

1. 智能对话

• 支持实时对话，流式输出回答
• 提供智能建议和快捷问题
• 优雅的等待动画和状态提示

2. 文件处理

• 支持拖拽上传文件
• 支持图片预览和文件下载
• 支持多种文件格式（Excel、Word、PDF、图片等）

3. 会话管理

• 支持创建多个对话
• 可以切换不同的对话
• 支持删除对话（带确认提示）

4. 界面特性

• 可折叠侧边栏
• 自适应消息布局
• 流畅的动画效果
• 优雅的加载状态

配置说明

文件上传

支持的文件类型：

• Excel (.xls, .xlsx)
• Word (.doc, .docx)
• PDF (.pdf)
• 图片 (.jpg, .jpeg, .png, .gif, .webp)

扩展开发

1. 添加新的消息类型

在 ChatHistory 组件中扩展 renderMessage 方法：

const renderMessage = (message) => {
  switch (message.type) {
    case 'your-new-type':
      return <YourNewComponent {...message.data} />;
    default:
      return null;
  }
};

2. 自定义主题

修改 tailwind.config.js 添加自定义主题：

module.exports = {
  theme: {
    extend: {
      colors: {
        'your-color': '#hexcode',
      },
    },
  },
};