Skip to content

[Feature] 为 NanoBot API 服务器添加内置 Web UI | Add built-in Web UI for NanoBot API server #3059

@kxsk-git

Description

@kxsk-git
## 摘要`nanobot serve` 提供了一个完整的单页 Web UI,支持聊天、历史记录查看、配置实时编辑和会话管理。  
This PR adds a full-featured single-page Web UI to `nanobot serve`, including chat, history, live config editing, and session management.

---

## 动机

目前 `nanobot serve` 只暴露了 OpenAI-compatible 的 HTTP 接口,没有可视化界面,对不熟悉命令行的用户不够友好。  
我们希望提供一个开箱即用的浏览器界面,让用户可以直接聊天、查看历史、并在网页上修改配置。  
Currently `nanobot serve` only exposes an OpenAI-compatible HTTP endpoint without any GUI, which is unfriendly to non-CLI users. This PR provides a zero-config browser interface for chatting, viewing history, and editing configs.

---

## 主要改动

### 1. Web UI 前端 (`api/static/index.html`)
- **Chat 界面**:底部输入框、Markdown 渲染(`marked.js` + `highlight.js` + `DOMPurify`)、代码块 Copy 按钮、消息时间戳。
- **History 加载**:自动拉取 `/v1/session` 并保留原始时间戳。
- **Settings 编辑器**:按 `agents` / `channels` / `providers` / `api` / `gateway` / `tools` 分栏;支持 `channels``providers` 的嵌套子对象编辑;支持 JSON 与表单双模式切换。
- **Stop 按钮**:通过 `AbortController` 中断进行中的请求。
- **Footer 布局优化**:输入框最大化、Send/Stop 按钮固定尺寸、左右按钮对齐底部。

### 2. 后端路由扩展 (`api/server.py`)
- 新增 `/``/static/*` 路由,提供 Web UI。
- 新增 `GET /v1/session`:直接读取 `session.messages[-500:]`**修复**`get_history()` 会丢失 `timestamp` 的问题。
- 新增 `GET/POST /v1/config`:支持配置的读取与保存;保存时自动创建 `.bak` 备份。
- **安全修复**:对 `session_id``re.sub(r'[^a-zA-Z0-9_-]', '', ...)` 过滤,防止路径注入。
- 移除了 `requested_model != model_name` 的硬校验,允许更灵活的客户端接入。

### 3. Bug 修复
- **Settings 保存丢失字段**:从直接覆盖改为**递归深合并(deep merge)**,编辑嵌套对象时不会误删同级的其他 provider/channel。
- **加载历史时间戳为当前时间**`get_history()` 内部会 strip timestamp,改为直接访问 `session.messages` slice。
- **配置死引用**:清理了 `index.html` 中已不存在的 `#subSectionBar` JS 引用,避免空指针异常。

### 4. 适配与样式
- 支持通过 `anthropic` provider 接入 **Kimi for Coding API** (`api.kimi.com/coding/v1`),解决 OpenAI-compatible 路径被白名单拒绝的问题。
- 统一导航按钮的 hover 效果;提亮 assistant 气泡背景,降低黑底白字的刺眼感。

---

## 使用方式

```bash
nanobot serve --port 8900
# 然后打开 http://127.0.0.1:8900

已知限制

  • Web UI 当前只支持 stream=false,因为 API 层尚未实现 SSE streaming。
  • 通过 Anthropic provider 使用 Kimi for Coding 时,若 maxTokens 超过约 21k,Anthropic Python SDK 会强制要求 streaming,建议设置 maxTokens <= 16384
  • 配置修改后需要重启 nanobot serve 才能完全生效。

检查清单

  • 新增 api/static/index.html
  • 修改 api/server.py 添加路由和修复
  • 已验证 Kimi (anthropic provider) 对话正常
  • 已验证配置编辑保存不丢失字段
  • 已验证历史时间戳正常

我可以提供完整的 patch 或根据维护者反馈提交 PR。
I can provide the full patch or open a PR upon request.

感谢审阅!如有修改建议请随时指出。
Thanks for reviewing! Feedback is welcome.


[nanobot-webui.patch](https://github.com/user-attachments/files/26654450/nanobot-webui.patch)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions