ChatFlow - 悬浮智能聊天助手

 

 

 

 

✨ 特性

• 🤖 13个 AI 平台支持: 国外平台(OpenAI GPT、Anthropic Claude、Google Gemini等) + 国内平台(通义千问、智谱AI、DeepSeek等)

• 📝 Markdown 语法: 完整支持 Markdown 渲染，包括 GFM 扩展语法

• 🎨 代码高亮: 支持多种编程语言的语法高亮和代码复制

• 📁 文件上传: 支持图片、文档等多种文件格式，拖拽上传

• 🔗 URL 解析: 智能解析网页内容和元数据

• 💬 实时聊天: 流式响应，打字效果，上下文记忆

• 📚 聊天历史: 本地和云端同步，搜索功能

• 🔄 多密钥轮换: 自动API密钥轮换和负载均衡

• ⚡ 智能选择: 根据内容类型自动选择最适合的AI平台

• 📱 响应式设计: 完美适配桌面和移动设备

• 🎯 悬浮组件: 优雅的右下角入口，类似ChatbaseAI

• ⌨️ 快捷键支持: Ctrl+Enter发送，提升操作效率

• 📊 配额管理: 智能的 API 使用量控制和监控

• 🔒 安全可靠: 基于 Cloudflare Workers 的边缘计算

🚀 快速开始

环境要求

• Node.js 18+

• npm 或 yarn

• Cloudflare 账户

安装步骤

1. 克隆项目

1. 安装依赖

1. 配置环境变量

1. 配置和部署 Cloudflare Workers

1. KV 命名空间: 用于存储聊天历史和会话数据

2. R2 存储桶: 用于存储用户上传的文件

3. API 密钥: 支持多个密钥，用逗号分隔实现轮换

4. 环境配置: 可以分别配置开发和生产环境

5. 启动开发服务器

📖 使用方法

🚀 快速集成（3分钟上手）

步骤 1: 复制组件文件

步骤 2: 安装依赖

步骤 3: 在您的应用中使用

🎯 不同框架的集成方式

Next.js 项目

React 单页应用

Vue.js 项目集成

⚙️ 详细配置选项

🎨 样式自定义

自定义CSS样式

🔧 环境变量配置

📱 实际使用场景

1. 客服网站集成

2. 技术文档网站

3. 教育平台

🔧 常见问题解决

Q1: 组件不显示怎么办？

Q2: 如何自定义样式？

Q3: 如何处理多语言？

⚡ 性能优化建议

1. 懒加载组件

2. 条件渲染

🎯 下一步

1. 📊 查看 配置选项 了解更多自定义选项

2. 🚀 阅读 部署指南 部署后端服务

3. 🔧 参考 API 文档 了解后端接口

🛠️ 配置选项

环境变量

Workers 配置

配置说明：

• name: Workers 项目名称，影响部署后的 URL

• main: 指定入口文件，通常是 src/index.js

• compatibility_date: 确保使用特定版本的 Workers 运行时

• ENVIRONMENT: 区分开发/生产环境

• MAX_FILE_SIZE: 限制上传文件大小，防止滥用

• ALLOWED_ORIGINS: CORS 安全配置，限制访问来源

• KV 存储: 用于保存聊天历史和会话数据

• R2 存储: 用于保存用户上传的文件

• 所有 your-* 占位符需要替换为实际值

• KV 和 R2 资源需要先在 Cloudflare 控制台创建

• API 密钥通过 wrangler secret put 命令单独设置

📁 项目结构

🎨 界面展示

 

 

🔧 开发指南

本地开发

测试

部署

📊 Star History

🤝 贡献

1. Fork 项目

2. 创建特性分支 (git checkout -b feature/AmazingFeature)

3. 提交更改 (git commit -m 'Add some AmazingFeature')

4. 推送到分支 (git push origin feature/AmazingFeature)

5. 打开 Pull Request

📄 许可证

👨‍💻 作者

🙏 致谢

• Cloudflare Workers - 边缘计算平台

• Google - Gemini 模型

• Framer Motion - 动画库