FloChatAI - 悬浮智能聊天助手

 

 

 

 

✨ 特性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🎨 界面展示

　　　　　　　主界面

　　　　　　　国外AI平台

　　　　　　　菜单栏

　　　　　　　国内AI平台

📁 项目结构

🏗️ 技术架构

架构概览

前端技术栈

后端技术栈

AI平台集成

🌍 国外平台 (7个)

• OpenAI GPT: GPT-4/3.5，通用能力最强

• Anthropic Claude: Claude-3，安全性突出

• Google Gemini: Gemini Pro，多模态能力

• Groq: 超快推理速度，免费额度

• Mistral AI: 欧洲开源模型

• Cohere: 企业级AI平台

• Perplexity: 搜索增强AI

🇨🇳 国内平台 (6个)

• 通义千问: 阿里云，中文优化

• 智谱AI: GLM-4，多模态

• DeepSeek: 代码能力强

• 月之暗面: Kimi，长文本

• 百度文心: 文心一言

• MiniMax: 海螺AI

核心特性实现

🔄 多密钥轮换系统

⚡ 智能AI选择

📝 Markdown渲染引擎

🗄️ 数据存储架构

安全架构

🔒 API密钥管理

• Wrangler Secrets: 安全存储API密钥

• 环境隔离: 开发/生产环境分离

• 密钥轮换: 自动故障转移机制

🛡️ 安全防护

• CORS配置: 跨域请求控制

• 速率限制: 防止API滥用

• 输入验证: XSS和注入攻击防护

• 会话管理: 安全的用户会话

🌐 边缘计算优势

• 全球分布: 200+数据中心

• 低延迟: 就近响应用户请求

• 高可用: 99.9%+服务可用性

• 自动扩展: 无需容量规划

🚀 快速开始

环境要求

• 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 命令单独设置

🔧 开发指南

本地开发

测试

部署

🤝 贡献

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 - 动画库