🎭 Let's Chat

🎯 一个现代化、可开源的多供应商 AI 聊天 Web 应用（Next.js + Tailwind CSS）。

🌐 Language: 简体中文 | English

✨ 功能特性

• 💬 类 ChatGPT 的对话体验
• 🌊 流式输出 + Markdown 渲染
• 🧠 思考模式（可折叠思考块）
• 🧩 多模型供应商配置 + Custom 兜底
• 📦 按供应商缓存模型列表（互不污染）
• 📎 附件上传（文本提取后注入上下文）
• 🧪 Mock Mode（无 Key 也可演示）
• 📱 移动端抽屉式会话列表

🖼️ 项目截图

主界面

设置弹窗

移动端抽屉

🧱 技术栈

• 框架： Next.js 16（App Router）
• UI： React 19、Tailwind CSS v4
• 语言： TypeScript（strict）
• Markdown 渲染： streamdown

📂 项目结构

src/
├─ app/
│  ├─ api/
│  │  ├─ chat/route.ts         # 多供应商聊天代理
│  │  ├─ models/route.ts       # 多供应商模型列表查询
│  │  ├─ mock-chat/route.ts    # SSE mock 流
│  │  └─ user-info/route.ts    # 用户信息探测（可选）
│  ├─ globals.css              # 全局样式 + streamdown 样式
│  ├─ layout.tsx               # 根布局与 metadata
│  └─ page.tsx                 # 主聊天页面（状态与流解析）
├─ components/chat/
│  ├─ icons.tsx                # Logo 与图标
│  └─ message-markdown.tsx     # Markdown 渲染包装组件
├─ lib/
│  ├─ chat-helpers.ts          # 聊天辅助函数
│  └─ providers.ts             # 供应商配置与请求头策略
└─ types/
   └─ chat.ts                  # 共享类型与默认配置

⚡ 快速开始

npm install
npm run dev

打开：http://localhost:3000

🧭 使用方式

1. 点击左侧设置（⚙️）
2. 选择模型供应商（或 Custom）
3. 填写 API Key 与 Base URL
4. 点击刷新模型（🔄）并选择模型
5. 开始对话

🔐 安全说明

• API Key 默认保存在浏览器本地（localStorage），请仅在可信设备使用。
• 不要提交密钥、token、私有凭证到仓库。

🤝 参与贡献

欢迎提交 Issue / PR：

1. Fork 仓库
2. 新建分支
3. 执行 npm run lint && npm run build
4. 提交 PR（建议附上 UI 截图）

📈 Star History

👀 Visitors