本项目旨在开发一个功能完善的 LLMs 助手 Web 应用，提供中文用户界面，核心功能是利用大语言模型 API 进行对话交互。用户可以管理多个助手、自定义提示词、配置不同的 LLM 服务，并在一个直观的界面中与助手进行聊天。
应用包含以下主要功能模块：
- Dock栏助手列表：
- 浅灰色背景，位于应用左侧。
- 显示用户添加的助手列表，包含头像和名称。
- 支持拖拽助手头像进行排序。
- 选中助手后，右侧主区域切换到对应助手的聊天界面。
- 列表底部包含“查看全部助手”和“添加助手”图标。
- 助手中心页面 (
/assistants-hub)：- 点击 Dock 栏“查看全部助手”图标进入。
- 使用卡片宫格展示“我的助手”和“助手库”。
- 助手卡片显示头像、名称和单行指令提示词。
- 我的助手：可编辑或删除已添加的助手。
- 助手库：预设多个助手（头像、名称、指令提示词），用户可将其添加到“我的助手”列表，并实时在 Dock 栏显示。
- 添加/编辑助手 (
/add-assistant,/edit-assistant/[id])：- 点击 Dock 栏“添加助手”图标或助手中心的编辑按钮进入。
- 表单字段：
- 头像：从大量 Emoji 下拉列表中选择。
- 名称：自定义助手名称。
- 指令提示词：定义助手的行为和角色。
- 模型ID：从已配置的 LLM 服务模型列表中选择（按 API 域名/服务名称分组）。
- 新建或从助手库添加助手时，默认使用用户最新添加的模型服务（若无则使用预设的 Riiid Chat 模型）。
- 编辑助手时可以更改模型。
- 默认助手：应用初始化时会自动添加一个“默认助手”（头像: 🤖, 名称: 默认助手, 指令提示词: 我可以回答任何问题, 模型: 预设的 Riiid Chat 模型）。
- 顶部信息栏：
- 显示当前选中助手的头像、名称和当前使用的模型ID。
- 点击助手头像或名称旁边的编辑图标可跳转至编辑助手页面。
- 聊天记录区：
- 实时流式显示聊天记录（当前为模拟流式输出）。
- 支持 Markdown 格式渲染。
- 支持预览聊天消息中的图片链接。
- 支持将
<think>...</think>标签内的内容识别为“深度思考”，并提供可收起/展开的交互。
- 底部输入框与功能区：
- 悬浮输入框，始终位于聊天记录之上。
- 多行输入框，默认显示一行，随内容增多自动扩展，与右侧功能区图标对齐。
- 快捷键：Enter 发送消息，Shift + Enter 换行。
- 功能区图标 (位于输入框内右侧)：
- Paperclip (上传图片)：点击上传图片，图片在输入区预览，随文本消息一同发送（图片实际发送逻辑未对接真实后端，仅为前端效果）。
- FileText (提示词)：点击弹出底部对齐的下拉菜单，显示提示词列表（单行内容），点击可将提示词插入输入框。
- Columns (选择模型)：点击弹出底部对齐的下拉菜单，选择本次提问使用的模型 ID（按 API 域名/服务名称分组）。默认勾选当前助手配置的模型或上次选择的模型。支持选择多个模型 ID 进行提问，勾选多个模型后，聊天区域会横向分割成多栏，每个模型在各自的分栏内同时回答（当前为模拟并行回答）。
- Clock (历史会话)：UI占位符已添加，点击弹出历史会话列表的下拉菜单。完整功能（自动命名、删除、查看、新建会话）待进一步开发。
- 发送/停止按钮：发送消息后，发送按钮变为停止生成按钮，用于停止 AI 生成内容（当前为模拟停止）。点停止后按钮回到默认状态。
- 多模型提问：
- 选择多个模型ID后，聊天区域横向分割，每个模型对应一个分栏。
- 共用一个输入框发送提问。
- 多个模型在各自分栏内同时回答（当前为模拟）。
- 本地持久化：
- 助手列表、聊天记录、提示词、模型服务配置均使用
localStorage进行本地持久化存储。 - 选择助手后默认继续上次会话，若无历史会话则自动创建新会话。
- 进入页面时默认选择第一个助手。
- 助手列表、聊天记录、提示词、模型服务配置均使用
- 卡片列表：
- 使用卡片宫格展示用户保存的提示词列表。
- 卡片固定显示2行内容，超出部分截断。
- 点击卡片弹窗显示完整内容并可直接编辑。
- 管理功能：
- 添加/编辑：通过弹窗进行，关闭弹窗即时保存。
- 删除：鼠标 Hover 卡片时显示删除图标，点击确认后删除。
- 拖拽排序：支持拖拽卡片进行排序，排序结果实时保存。
- 模型服务管理：
- 以卡片形式展示所有已添加的 LLM 服务。
- 添加/编辑模型服务：
- 服务名称：用户自定义。
- API 密钥：输入框下方显示获取密钥的示例链接 (
https://riiio.top)。 - API 地址：自动补全
/v1/chat/completions后缀（如果用户未填写）。 - 模型ID：
- 标签形式展示已添加的模型ID列表。
- 支持通过输入框手动输入模型ID后按回车添加。
- 激活模型ID输入框或填写完API地址和密钥后，尝试从API地址获取模型列表（当前为模拟获取），供用户从下拉列表中点击添加，支持筛选。
- 删除模型服务：用户添加的服务可删除，默认预设服务不可删除。
- API连通性测试：提供按钮测试用户添加的模型服务的API连通性（当前为模拟测试）。
- 导入/导出模型设置：支持以 JSON 文件格式导入和导出用户添加的模型服务配置（不包括默认服务）。
- 兼容性：设计上考虑兼容 OpenAI、Gemini、DeepSeek、Anthropic 等多种 LLM 提供商及自定义 API 服务（通过填写API地址和模型ID实现）。
- 默认预设服务：
- 预添加一个名为 “Riiid Chat (默认)” 的模型服务。
- 模型ID包含
deepseek/deepseek-chat:free和qwen/qwen2.5-vl-32b-instruct:free。 - API 地址显示为
api.riiio.chat(实际使用 OpenRouter 地址进行模拟测试)。 - API 密钥为预设的 OpenRouter 密钥。
- 此默认服务不可编辑、不可删除，其真实 API 地址和密钥对用户隐藏。
- 前端框架：Next.js (App Router)
- 状态管理：Zustand
- UI组件：Tailwind CSS, Lucide Icons
- 拖拽排序：@dnd-kit/core, @dnd-kit/sortable
- Markdown渲染：react-markdown, remark-gfm
- 包管理：pnpm
llm-assistants-webapp/
├── public/
│ └── assets/ (原计划存放SVG图标，现使用lucide-react替代)
├── src/
│ ├── app/ # Next.js 页面和布局
│ │ ├── (main)/ # 主应用页面 (示例分组，实际未用)
│ │ │ ├── page.tsx # 聊天主界面
│ │ │ └── layout.tsx # 主布局 (Dock栏等)
│ │ ├── add-assistant/
│ │ │ └── page.tsx
│ │ ├── edit-assistant/[id]/
│ │ │ └── page.tsx
│ │ ├── assistants-hub/
│ │ │ └── page.tsx
│ │ ├── prompts/
│ │ │ └── page.tsx
│ │ ├── settings/
│ │ │ └── page.tsx
│ │ ├── globals.css
│ │ └── layout.tsx # 根布局
│ ├── components/
│ │ ├── AssistantList.tsx
│ │ └── chat/ # 聊天相关组件 (如果拆分)
│ ├── store/
│ │ ├── assistantStore.ts
│ │ ├── chatStore.ts
│ │ ├── modelStore.ts
│ │ └── promptStore.ts
│ └── lib/ # 工具函数等 (未使用)
├── .eslintrc.json
├── .gitignore
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── tailwind.config.ts
├── tsconfig.json
└── todo.md # 开发任务清单
- 环境准备：
- 确保已安装 Node.js (推荐 v18 或更高版本) 和 pnpm。
- 解压项目：
- 将提供的
llm-assistants-webapp.zip解压到本地目录。
- 将提供的
- 安装依赖：
- 在项目根目录下打开终端，运行命令：
pnpm install
- 在项目根目录下打开终端，运行命令：
- 启动开发服务器：
- 运行命令：
pnpm dev
- 运行命令：
- 访问应用：
- 在浏览器中打开
http://localhost:3000(或终端提示的其他端口)。
- 在浏览器中打开
- API 调用：所有涉及 LLM API 的调用（聊天、获取模型列表、API连通性测试）当前均为 模拟实现。需要替换为真实的 API 请求逻辑才能与实际大模型交互。
- 流式输出：聊天回复的流式输出当前也是模拟的，真实场景下需要对接支持流式响应的 API。
- 历史会话：聊天界面中的“历史会话”功能目前仅有UI占位符，其具体功能（如会话列表展示、切换、删除、新建、自动命名等）尚未完全实现，是后续可以完善的方向。
- 图标：应用主要使用
lucide-react图标库，未单独在public/assets存放 SVG 文件。 - 错误处理：已进行基础的错误提示，但更完善的错误处理和用户反馈机制可以进一步加强。
- 安全性：API 密钥等敏感信息目前直接存储在前端状态管理和
localStorage中，这在生产环境中是不安全的。真实部署时，API 密钥管理和对 LLM 的调用应通过后端服务进行代理，以保护密钥安全。 - 响应式设计：已进行基础的响应式布局，但在各种设备和屏幕尺寸下的详细测试和优化仍需进行。
- 代码优化与测试：部分组件和逻辑可以进一步优化和重构，单元测试和集成测试的覆盖可以提高项目质量。
LLMs Assistants Web App 项目已按照需求完成了核心功能的开发，提供了一个相对完整的单页面应用体验。通过模块化的组件和状态管理，项目具备了良好的可扩展性。后续可以根据实际需求，对接真实 API、完善细节功能、并进行性能优化和安全加固。