init: hermes-web-ui v0.1.0
Hermes Agent Web 管理面板，支持对话交互和定时任务管理。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ekko
+24
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
package-lock.json
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,434 @@
|
||||
# Hermes UI
|
||||
|
||||
Hermes Agent 的 Web 管理面板，用于对话交互和定时任务管理。
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **Vue 3** — Composition API + `<script setup>`
|
||||
- **TypeScript**
|
||||
- **Vite** — 构建工具
|
||||
- **Naive UI** — 组件库
|
||||
- **Pinia** — 状态管理
|
||||
- **Vue Router** — 路由（Hash 模式）
|
||||
- **SCSS** — 样式预处理
|
||||
- **markdown-it** + **highlight.js** — Markdown 渲染与代码高亮
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 1. 配置 API Server
|
||||
|
||||
编辑 `~/.hermes/config.yaml`，启用 API Server：
|
||||
|
||||
```yaml
|
||||
platforms:
|
||||
api_server:
|
||||
enabled: true
|
||||
host: "127.0.0.1"
|
||||
port: 8642
|
||||
key: ""
|
||||
cors_origins: "*"
|
||||
```
|
||||
|
||||
重启 Gateway 使配置生效：
|
||||
|
||||
```bash
|
||||
hermes gateway restart
|
||||
```
|
||||
|
||||
### 2. 安装并启动
|
||||
|
||||
```bash
|
||||
# 全局安装
|
||||
npm install -g hermes-web-ui
|
||||
|
||||
# 启动 Web 面板（默认 http://localhost:8648）
|
||||
hermes-web-ui start
|
||||
```
|
||||
|
||||
### 开发模式
|
||||
|
||||
```bash
|
||||
# 克隆项目后
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── api/
|
||||
│ ├── client.ts # HTTP 请求封装（fetch + Bearer Auth）
|
||||
│ ├── chat.ts # 对话 API（startRun + SSE 事件流）
|
||||
│ ├── jobs.ts # 定时任务 CRUD
|
||||
│ └── system.ts # 健康检查、模型列表
|
||||
├── stores/
|
||||
│ ├── app.ts # 全局状态（连接状态、版本、模型）
|
||||
│ ├── chat.ts # 对话状态（消息、会话、流式输出）
|
||||
│ └── jobs.ts # 任务状态（列表、CRUD 操作）
|
||||
├── components/
|
||||
│ ├── layout/
|
||||
│ │ └── AppSidebar.vue # 侧边栏导航
|
||||
│ ├── chat/
|
||||
│ │ ├── ChatPanel.vue # 对话面板（会话列表 + 聊天区域）
|
||||
│ │ ├── MessageList.vue # 消息列表（自动滚动、加载动画）
|
||||
│ │ ├── MessageItem.vue # 单条消息（用户/AI/工具/系统）
|
||||
│ │ ├── ChatInput.vue # 输入框（Ctrl+Enter 发送）
|
||||
│ │ └── MarkdownRenderer.vue # Markdown 渲染（代码高亮、复制）
|
||||
│ └── jobs/
|
||||
│ ├── JobsPanel.vue # 任务面板
|
||||
│ ├── JobCard.vue # 任务卡片
|
||||
│ └── JobFormModal.vue # 创建/编辑任务弹窗
|
||||
├── views/
|
||||
│ ├── ChatView.vue # 对话页
|
||||
│ └── JobsView.vue # 任务页
|
||||
├── router/
|
||||
│ └── index.ts # 路由配置
|
||||
├── styles/
|
||||
│ ├── variables.scss # SCSS 设计变量
|
||||
│ ├── global.scss # 全局样式
|
||||
│ └── theme.ts # Naive UI 主题覆盖
|
||||
├── composables/
|
||||
│ └── useKeyboard.ts # 键盘快捷键
|
||||
└── main.ts # 应用入口
|
||||
```
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 对话（Chat）
|
||||
|
||||
- 基于 `/v1/runs` + `/v1/runs/{id}/events` 的异步 Run + SSE 事件流
|
||||
- 实时流式输出，工具调用进度可视化
|
||||
- 多会话管理，会话历史持久化到 localStorage
|
||||
- Markdown 渲染，代码块语法高亮与一键复制
|
||||
|
||||
### 定时任务（Jobs）
|
||||
|
||||
- 任务列表查看（含暂停/禁用任务）
|
||||
- 创建、编辑、删除任务
|
||||
- 暂停/恢复任务
|
||||
- 立即触发任务执行
|
||||
- Cron 表达式快速预设
|
||||
|
||||
### 其他
|
||||
|
||||
- 连接状态实时检测（30s 轮询）
|
||||
- 纯黑白主题
|
||||
- 键盘快捷键支持
|
||||
|
||||
---
|
||||
|
||||
## API 接口文档
|
||||
|
||||
Base URL: `http://127.0.0.1:8642`
|
||||
|
||||
### 认证
|
||||
|
||||
除 `/health` 外，所有接口支持 Bearer Token 认证（如果服务端配置了 `key`）：
|
||||
|
||||
```
|
||||
Authorization: Bearer <your-api-key>
|
||||
```
|
||||
|
||||
未配置 key 时所有请求放行。
|
||||
|
||||
### 通用错误格式
|
||||
|
||||
```json
|
||||
{
|
||||
"error": {
|
||||
"message": "错误描述",
|
||||
"type": "invalid_request_error",
|
||||
"param": null,
|
||||
"code": "invalid_api_key"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
| 状态码 | 说明 |
|
||||
|--------|------|
|
||||
| 200 | 成功 |
|
||||
| 400 | 请求参数错误 |
|
||||
| 401 | API Key 无效 |
|
||||
| 404 | 资源不存在 |
|
||||
| 413 | 请求体过大（上限 1MB） |
|
||||
| 429 | 并发超限（最大 10 个 Run） |
|
||||
| 500 | 服务器内部错误 |
|
||||
|
||||
---
|
||||
|
||||
### 1. 健康检查
|
||||
|
||||
**GET** `/health` 或 `/v1/health`
|
||||
|
||||
无需认证。
|
||||
|
||||
```json
|
||||
{"status": "ok", "platform": "hermes-agent"}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. 模型列表
|
||||
|
||||
**GET** `/v1/models`
|
||||
|
||||
```json
|
||||
{
|
||||
"object": "list",
|
||||
"data": [
|
||||
{
|
||||
"id": "hermes-agent",
|
||||
"object": "model",
|
||||
"created": 1744348800,
|
||||
"owned_by": "hermes"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. Chat Completions（OpenAI 兼容）
|
||||
|
||||
**POST** `/v1/chat/completions`
|
||||
|
||||
| 字段 | 类型 | 必填 | 说明 |
|
||||
|------|------|------|------|
|
||||
| messages | array | Y | 消息数组，格式同 OpenAI |
|
||||
| stream | boolean | N | 是否流式返回，默认 false |
|
||||
| model | string | N | 模型名，默认 "hermes-agent" |
|
||||
|
||||
可选 Header: `X-Hermes-Session-Id` 指定会话 ID。
|
||||
|
||||
**stream=false 响应：**
|
||||
```json
|
||||
{
|
||||
"id": "chatcmpl-xxxxx",
|
||||
"object": "chat.completion",
|
||||
"created": 1744348800,
|
||||
"model": "hermes-agent",
|
||||
"choices": [{"index": 0, "message": {"role": "assistant", "content": "回复内容"}, "finish_reason": "stop"}],
|
||||
"usage": {"prompt_tokens": 100, "completion_tokens": 50, "total_tokens": 150}
|
||||
}
|
||||
```
|
||||
|
||||
**stream=true 响应：** SSE 流（`Content-Type: text/event-stream`）
|
||||
```
|
||||
data: {"id":"chatcmpl-xxx","choices":[{"delta":{"content":"你"},"index":0}]}
|
||||
data: [DONE]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. Responses（有状态链式对话）
|
||||
|
||||
**POST** `/v1/responses`
|
||||
|
||||
| 字段 | 类型 | 必填 | 说明 |
|
||||
|------|------|------|------|
|
||||
| input | string / array | Y | 用户输入 |
|
||||
| instructions | string | N | 系统指令 |
|
||||
| previous_response_id | string | N | 链式对话的上一次响应 ID |
|
||||
| conversation | string | N | 会话名称，自动链式到最新响应 |
|
||||
| conversation_history | array | N | 显式传入对话历史 |
|
||||
| store | boolean | N | 是否存储响应，默认 true |
|
||||
| truncation | string | N | 设为 "auto" 自动截断历史到 100 条 |
|
||||
| model | string | N | 模型名 |
|
||||
|
||||
> `conversation` 和 `previous_response_id` 互斥。
|
||||
|
||||
可选 Header: `Idempotency-Key` 幂等键。
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "resp_xxx",
|
||||
"object": "response",
|
||||
"status": "completed",
|
||||
"created_at": 1744348800,
|
||||
"output": [{"type": "message", "role": "assistant", "content": "回复内容"}],
|
||||
"usage": {"input_tokens": 100, "output_tokens": 50, "total_tokens": 150}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. 获取 / 删除存储的响应
|
||||
|
||||
**GET** `/v1/responses/{response_id}` — 获取存储的响应
|
||||
|
||||
**DELETE** `/v1/responses/{response_id}` — 删除存储的响应
|
||||
|
||||
```json
|
||||
{"id": "resp_xxx", "object": "response", "deleted": true}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 启动异步 Run
|
||||
|
||||
**POST** `/v1/runs`
|
||||
|
||||
| 字段 | 类型 | 必填 | 说明 |
|
||||
|------|------|------|------|
|
||||
| input | string / array | Y | 用户输入 |
|
||||
| instructions | string | N | 系统指令 |
|
||||
| previous_response_id | string | N | 链式对话 ID |
|
||||
| conversation_history | array | N | 对话历史 |
|
||||
| session_id | string | N | 会话 ID，默认使用 run_id |
|
||||
|
||||
```json
|
||||
{"run_id": "run_xxx", "status": "started"}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. SSE 事件流
|
||||
|
||||
**GET** `/v1/runs/{run_id}/events`
|
||||
|
||||
`Content-Type: text/event-stream`
|
||||
|
||||
**事件类型：**
|
||||
|
||||
| 事件 | 说明 |
|
||||
|------|------|
|
||||
| `run.started` | Run 开始 |
|
||||
| `message.delta` | 消息内容片段（字段 `delta`） |
|
||||
| `tool.started` | 工具调用开始（字段 `tool`、`preview`） |
|
||||
| `tool.completed` | 工具调用完成（字段 `tool`、`duration`） |
|
||||
| `run.completed` | Run 完成（字段 `output`、`usage`） |
|
||||
| `run.failed` | Run 失败（字段 `error`） |
|
||||
|
||||
示例：
|
||||
```
|
||||
data: {"event":"message.delta","run_id":"run_xxx","delta":"你好","timestamp":...}
|
||||
data: {"event":"tool.started","run_id":"run_xxx","tool":"browser_navigate","preview":"https://...","timestamp":...}
|
||||
data: {"event":"tool.completed","run_id":"run_xxx","tool":"browser_navigate","duration":3.8,"timestamp":...}
|
||||
data: {"event":"run.completed","run_id":"run_xxx","output":"完整回复","usage":{"input_tokens":100,"output_tokens":50,"total_tokens":150}}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 8. 定时任务
|
||||
|
||||
#### 列出任务
|
||||
|
||||
**GET** `/api/jobs?include_disabled=true`
|
||||
|
||||
```json
|
||||
{
|
||||
"jobs": [
|
||||
{
|
||||
"job_id": "61a5eb0baeb9",
|
||||
"name": "任务名",
|
||||
"schedule": "0 9 * * *",
|
||||
"repeat": "forever",
|
||||
"deliver": "origin",
|
||||
"next_run_at": "2026-04-12T09:00:00+08:00",
|
||||
"last_run_at": "2026-04-11T09:04:25+08:00",
|
||||
"last_status": "ok",
|
||||
"enabled": true,
|
||||
"state": "scheduled",
|
||||
"prompt_preview": "...",
|
||||
"skills": []
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### 创建任务
|
||||
|
||||
**POST** `/api/jobs`
|
||||
|
||||
| 字段 | 类型 | 必填 | 说明 |
|
||||
|------|------|------|------|
|
||||
| name | string | Y | 任务名称（最大 200 字符） |
|
||||
| schedule | string | Y | Cron 表达式 |
|
||||
| prompt | string | N | 任务 prompt |
|
||||
| deliver | string | N | 投递目标（origin / local / telegram / discord） |
|
||||
| skills | array | N | skill 名称数组 |
|
||||
| repeat | integer | N | 重复次数，不传表示永久 |
|
||||
|
||||
响应包裹在 `{"job": {...}}` 中。
|
||||
|
||||
#### 查看任务详情
|
||||
|
||||
**GET** `/api/jobs/{job_id}`
|
||||
|
||||
#### 更新任务
|
||||
|
||||
**PATCH** `/api/jobs/{job_id}`
|
||||
|
||||
可更新字段：`name`、`schedule`、`prompt`、`deliver`、`skills`、`repeat`、`enabled`
|
||||
|
||||
#### 删除任务
|
||||
|
||||
**DELETE** `/api/jobs/{job_id}`
|
||||
|
||||
```json
|
||||
{"ok": true}
|
||||
```
|
||||
|
||||
#### 暂停任务
|
||||
|
||||
**POST** `/api/jobs/{job_id}/pause`
|
||||
|
||||
```json
|
||||
{"job": {"job_id": "xxx", "enabled": false, "state": "paused", ...}}
|
||||
```
|
||||
|
||||
#### 恢复任务
|
||||
|
||||
**POST** `/api/jobs/{job_id}/resume`
|
||||
|
||||
```json
|
||||
{"job": {"job_id": "xxx", "enabled": true, "state": "scheduled", ...}}
|
||||
```
|
||||
|
||||
#### 立即触发任务
|
||||
|
||||
**POST** `/api/jobs/{job_id}/run`
|
||||
|
||||
```json
|
||||
{"job": {"job_id": "xxx", "state": "scheduled", ...}}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 快速测试
|
||||
|
||||
```bash
|
||||
# 健康检查
|
||||
curl http://127.0.0.1:8642/health
|
||||
|
||||
# 模型列表
|
||||
curl http://127.0.0.1:8642/v1/models
|
||||
|
||||
# Chat Completions
|
||||
curl -X POST http://127.0.0.1:8642/v1/chat/completions \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"messages":[{"role":"user","content":"你好"}]}'
|
||||
|
||||
# 启动异步 Run
|
||||
curl -X POST http://127.0.0.1:8642/v1/runs \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"input":"你好"}'
|
||||
|
||||
# 监听 Run 事件流
|
||||
curl http://127.0.0.1:8642/v1/runs/{run_id}/events
|
||||
|
||||
# 列出任务（含已暂停）
|
||||
curl "http://127.0.0.1:8642/api/jobs?include_disabled=true"
|
||||
|
||||
# 创建任务
|
||||
curl -X POST http://127.0.0.1:8642/api/jobs \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"name":"测试任务","schedule":"0 9 * * *","prompt":"执行测试"}'
|
||||
|
||||
# 暂停 / 恢复 / 触发 / 删除
|
||||
curl -X POST http://127.0.0.1:8642/api/jobs/{job_id}/pause
|
||||
curl -X POST http://127.0.0.1:8642/api/jobs/{job_id}/resume
|
||||
curl -X POST http://127.0.0.1:8642/api/jobs/{job_id}/run
|
||||
curl -X DELETE http://127.0.0.1:8642/api/jobs/{job_id}
|
||||
```
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Executable
+24
@@ -0,0 +1,24 @@
|
||||
#!/usr/bin/env node
|
||||
import { spawn } from 'child_process'
|
||||
import { resolve, dirname } from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
const projectRoot = resolve(__dirname, '..')
|
||||
|
||||
const args = process.argv.slice(2)
|
||||
const command = args[0]
|
||||
|
||||
if (!command || command === 'start' || command === 'dev') {
|
||||
const viteBin = resolve(projectRoot, 'node_modules/.bin/vite')
|
||||
spawn(viteBin, ['--host', '--port', '8648'], { stdio: 'inherit', cwd: projectRoot })
|
||||
} else if (command === 'build') {
|
||||
const viteBin = resolve(projectRoot, 'node_modules/.bin/vite')
|
||||
spawn(viteBin, ['build'], { stdio: 'inherit', cwd: projectRoot })
|
||||
} else {
|
||||
console.log(`Usage: hermes-web-ui [command]`)
|
||||
console.log()
|
||||
console.log('Commands:')
|
||||
console.log(' start Start dev server (default)')
|
||||
console.log(' build Build for production')
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hermes</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "hermes-web-ui",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"bin": {
|
||||
"hermes-web-ui": "./bin/hermes-web-ui.mjs"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "vite --host --port 8648",
|
||||
"dev": "vite --host",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"files": [
|
||||
"bin/",
|
||||
"index.html",
|
||||
"public/",
|
||||
"assets/",
|
||||
"src/",
|
||||
"vite.config.ts",
|
||||
"tsconfig.json",
|
||||
"tsconfig.app.json",
|
||||
"tsconfig.node.json",
|
||||
"package.json"
|
||||
],
|
||||
"dependencies": {
|
||||
"highlight.js": "^11.11.1",
|
||||
"markdown-it": "^14.1.1",
|
||||
"naive-ui": "^2.44.1",
|
||||
"pinia": "^3.0.4",
|
||||
"vue": "^3.5.32",
|
||||
"vue-router": "^4.6.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"@types/node": "^24.12.2",
|
||||
"@vitejs/plugin-vue": "^6.0.5",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"sass": "^1.99.0",
|
||||
"typescript": "~6.0.2",
|
||||
"vite": "^8.0.4",
|
||||
"vue-tsc": "^3.2.6"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
+54
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { NConfigProvider, NMessageProvider, NDialogProvider, NNotificationProvider } from 'naive-ui'
|
||||
import { themeOverrides } from '@/styles/theme'
|
||||
import AppSidebar from '@/components/layout/AppSidebar.vue'
|
||||
import { useKeyboard } from '@/composables/useKeyboard'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
onMounted(() => {
|
||||
appStore.startHealthPolling()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
appStore.stopHealthPolling()
|
||||
})
|
||||
|
||||
useKeyboard()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NConfigProvider :theme-overrides="themeOverrides">
|
||||
<NMessageProvider>
|
||||
<NDialogProvider>
|
||||
<NNotificationProvider>
|
||||
<div class="app-layout">
|
||||
<AppSidebar />
|
||||
<main class="app-main">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</NNotificationProvider>
|
||||
</NDialogProvider>
|
||||
</NMessageProvider>
|
||||
</NConfigProvider>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.app-layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background-color: $bg-primary;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
import { request, getBaseUrlValue } from './client'
|
||||
|
||||
export interface ChatMessage {
|
||||
role: 'user' | 'assistant' | 'system'
|
||||
content: string
|
||||
}
|
||||
|
||||
export interface StartRunRequest {
|
||||
input: string | ChatMessage[]
|
||||
instructions?: string
|
||||
conversation_history?: ChatMessage[]
|
||||
session_id?: string
|
||||
}
|
||||
|
||||
export interface StartRunResponse {
|
||||
run_id: string
|
||||
status: string
|
||||
}
|
||||
|
||||
// SSE event types from /v1/runs/{id}/events
|
||||
export interface RunEvent {
|
||||
event: string
|
||||
run_id?: string
|
||||
delta?: string
|
||||
tool?: string
|
||||
name?: string
|
||||
preview?: string
|
||||
timestamp?: number
|
||||
error?: string
|
||||
}
|
||||
|
||||
export async function startRun(body: StartRunRequest): Promise<StartRunResponse> {
|
||||
return request<StartRunResponse>('/v1/runs', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
}
|
||||
|
||||
export function streamRunEvents(
|
||||
runId: string,
|
||||
onEvent: (event: RunEvent) => void,
|
||||
onDone: () => void,
|
||||
onError: (err: Error) => void,
|
||||
) {
|
||||
const baseUrl = getBaseUrlValue()
|
||||
const url = `${baseUrl}/v1/runs/${runId}/events`
|
||||
|
||||
let closed = false
|
||||
const source = new EventSource(url)
|
||||
|
||||
source.onmessage = (e) => {
|
||||
if (closed) return
|
||||
try {
|
||||
const parsed = JSON.parse(e.data)
|
||||
onEvent(parsed)
|
||||
|
||||
if (parsed.event === 'run.completed' || parsed.event === 'run.failed') {
|
||||
closed = true
|
||||
source.close()
|
||||
onDone()
|
||||
}
|
||||
} catch {
|
||||
onEvent({ event: 'message', delta: e.data })
|
||||
}
|
||||
}
|
||||
|
||||
source.onerror = () => {
|
||||
if (closed) return
|
||||
closed = true
|
||||
source.close()
|
||||
onError(new Error('SSE connection error'))
|
||||
}
|
||||
|
||||
// Return AbortController-compatible object
|
||||
return {
|
||||
abort: () => {
|
||||
if (!closed) {
|
||||
closed = true
|
||||
source.close()
|
||||
}
|
||||
},
|
||||
} as unknown as AbortController
|
||||
}
|
||||
|
||||
export async function fetchModels(): Promise<{ data: Array<{ id: string }> }> {
|
||||
return request('/v1/models')
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
const DEFAULT_BASE_URL = ''
|
||||
|
||||
function getBaseUrl(): string {
|
||||
return localStorage.getItem('hermes_server_url') || DEFAULT_BASE_URL
|
||||
}
|
||||
|
||||
function getApiKey(): string {
|
||||
return localStorage.getItem('hermes_api_key') || ''
|
||||
}
|
||||
|
||||
export function setServerUrl(url: string) {
|
||||
localStorage.setItem('hermes_server_url', url)
|
||||
}
|
||||
|
||||
export function setApiKey(key: string) {
|
||||
localStorage.setItem('hermes_api_key', key)
|
||||
}
|
||||
|
||||
export async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||
const base = getBaseUrl()
|
||||
const url = `${base}${path}`
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...options.headers as Record<string, string>,
|
||||
}
|
||||
|
||||
const apiKey = getApiKey()
|
||||
if (apiKey) {
|
||||
headers['Authorization'] = `Bearer ${apiKey}`
|
||||
}
|
||||
|
||||
const res = await fetch(url, { ...options, headers })
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '')
|
||||
throw new Error(`API Error ${res.status}: ${text || res.statusText}`)
|
||||
}
|
||||
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export function getBaseUrlValue(): string {
|
||||
return getBaseUrl()
|
||||
}
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
import { request } from './client'
|
||||
|
||||
export interface Job {
|
||||
job_id: string
|
||||
id: string
|
||||
name: string
|
||||
prompt: string
|
||||
prompt_preview?: string
|
||||
skills: string[]
|
||||
skill: string | null
|
||||
model: string | null
|
||||
provider: string | null
|
||||
base_url: string | null
|
||||
script: string | null
|
||||
schedule: string | { kind: string; expr: string; display: string }
|
||||
schedule_display: string
|
||||
repeat: string | { times: number | null; completed: number }
|
||||
enabled: boolean
|
||||
state: string
|
||||
paused_at: string | null
|
||||
paused_reason: string | null
|
||||
created_at: string
|
||||
next_run_at: string | null
|
||||
last_run_at: string | null
|
||||
last_status: string | null
|
||||
last_error: string | null
|
||||
deliver: string
|
||||
origin: {
|
||||
platform: string
|
||||
chat_id: string
|
||||
chat_name: string
|
||||
thread_id: string | null
|
||||
} | null
|
||||
last_delivery_error: string | null
|
||||
}
|
||||
|
||||
export interface CreateJobRequest {
|
||||
name: string
|
||||
schedule: string
|
||||
prompt?: string
|
||||
deliver?: string
|
||||
skills?: string[]
|
||||
repeat?: number
|
||||
}
|
||||
|
||||
export interface UpdateJobRequest {
|
||||
name?: string
|
||||
schedule?: string
|
||||
prompt?: string
|
||||
deliver?: string
|
||||
skills?: string[]
|
||||
skill?: string
|
||||
repeat?: number
|
||||
enabled?: boolean
|
||||
}
|
||||
|
||||
function unwrap(res: { job: Job }): Job {
|
||||
return res.job
|
||||
}
|
||||
|
||||
export async function listJobs(): Promise<Job[]> {
|
||||
const res = await request<{ jobs: Job[] }>('/api/jobs?include_disabled=true')
|
||||
return res.jobs
|
||||
}
|
||||
|
||||
export async function getJob(jobId: string): Promise<Job> {
|
||||
return unwrap(await request<{ job: Job }>(`/api/jobs/${jobId}`))
|
||||
}
|
||||
|
||||
export async function createJob(data: CreateJobRequest): Promise<Job> {
|
||||
return unwrap(await request<{ job: Job }>('/api/jobs', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
}))
|
||||
}
|
||||
|
||||
export async function updateJob(jobId: string, data: UpdateJobRequest): Promise<Job> {
|
||||
return unwrap(await request<{ job: Job }>(`/api/jobs/${jobId}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(data),
|
||||
}))
|
||||
}
|
||||
|
||||
export async function deleteJob(jobId: string): Promise<{ ok: boolean }> {
|
||||
return request<{ ok: boolean }>(`/api/jobs/${jobId}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
|
||||
export async function pauseJob(jobId: string): Promise<Job> {
|
||||
return unwrap(await request<{ job: Job }>(`/api/jobs/${jobId}/pause`, { method: 'POST' }))
|
||||
}
|
||||
|
||||
export async function resumeJob(jobId: string): Promise<Job> {
|
||||
return unwrap(await request<{ job: Job }>(`/api/jobs/${jobId}/resume`, { method: 'POST' }))
|
||||
}
|
||||
|
||||
export async function runJob(jobId: string): Promise<Job> {
|
||||
return unwrap(await request<{ job: Job }>(`/api/jobs/${jobId}/run`, { method: 'POST' }))
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { request } from './client'
|
||||
|
||||
export interface HealthResponse {
|
||||
status: string
|
||||
version?: string
|
||||
}
|
||||
|
||||
export interface Model {
|
||||
id: string
|
||||
object: string
|
||||
owned_by: string
|
||||
}
|
||||
|
||||
export interface ModelsResponse {
|
||||
object: string
|
||||
data: Model[]
|
||||
}
|
||||
|
||||
export async function checkHealth(): Promise<HealthResponse> {
|
||||
return request<HealthResponse>('/health')
|
||||
}
|
||||
|
||||
export async function fetchModels(): Promise<ModelsResponse> {
|
||||
return request<ModelsResponse>('/v1/models')
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,123 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { NButton } from 'naive-ui'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
|
||||
const chatStore = useChatStore()
|
||||
const inputText = ref('')
|
||||
const textareaRef = ref<HTMLTextAreaElement>()
|
||||
|
||||
function handleSend() {
|
||||
const text = inputText.value.trim()
|
||||
if (!text) return
|
||||
|
||||
chatStore.sendMessage(text)
|
||||
inputText.value = ''
|
||||
|
||||
// Reset textarea height
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.style.height = 'auto'
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSend()
|
||||
}
|
||||
}
|
||||
|
||||
function handleInput(e: Event) {
|
||||
const el = e.target as HTMLTextAreaElement
|
||||
el.style.height = 'auto'
|
||||
el.style.height = Math.min(el.scrollHeight, 100) + 'px'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-input-area">
|
||||
<div class="input-wrapper">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
v-model="inputText"
|
||||
class="input-textarea"
|
||||
placeholder="Type a message... (Enter to send, Shift+Enter for new line)"
|
||||
rows="1"
|
||||
@keydown="handleKeydown"
|
||||
@input="handleInput"
|
||||
></textarea>
|
||||
<div class="input-actions">
|
||||
<NButton
|
||||
v-if="chatStore.isStreaming"
|
||||
size="small"
|
||||
type="error"
|
||||
@click="chatStore.stopStreaming()"
|
||||
>
|
||||
Stop
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="!inputText.trim() || chatStore.isStreaming"
|
||||
@click="handleSend"
|
||||
>
|
||||
<template #icon>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
</template>
|
||||
Send
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.chat-input-area {
|
||||
padding: 12px 20px 16px;
|
||||
border-top: 1px solid $border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background-color: $bg-input;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-md;
|
||||
padding: 10px 12px;
|
||||
transition: border-color $transition-fast;
|
||||
|
||||
&:focus-within {
|
||||
border-color: $accent-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.input-textarea {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: $text-primary;
|
||||
font-family: $font-ui;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
max-height: 100px;
|
||||
min-height: 20px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::placeholder {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,289 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { NButton, NTooltip, NPopconfirm, useMessage } from 'naive-ui'
|
||||
import MessageList from './MessageList.vue'
|
||||
import ChatInput from './ChatInput.vue'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const chatStore = useChatStore()
|
||||
const appStore = useAppStore()
|
||||
const message = useMessage()
|
||||
|
||||
const showSessions = ref(true)
|
||||
|
||||
const sortedSessions = computed(() => {
|
||||
return [...chatStore.sessions].sort((a, b) => b.updatedAt - a.updatedAt)
|
||||
})
|
||||
|
||||
const activeSessionLabel = computed(() =>
|
||||
chatStore.activeSession?.title || 'New Chat',
|
||||
)
|
||||
|
||||
function handleNewChat() {
|
||||
chatStore.newChat()
|
||||
}
|
||||
|
||||
function copySessionId() {
|
||||
if (chatStore.activeSessionId) {
|
||||
navigator.clipboard.writeText(chatStore.activeSessionId)
|
||||
message.success('Copied')
|
||||
}
|
||||
}
|
||||
|
||||
function handleDeleteSession(id: string) {
|
||||
chatStore.deleteSession(id)
|
||||
message.success('Session deleted')
|
||||
}
|
||||
|
||||
function formatTime(ts: number) {
|
||||
const d = new Date(ts)
|
||||
const now = new Date()
|
||||
const isToday = d.toDateString() === now.toDateString()
|
||||
if (isToday) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
return d.toLocaleDateString([], { month: 'short', day: 'numeric' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-panel">
|
||||
<!-- Session List -->
|
||||
<aside class="session-list" :class="{ collapsed: !showSessions }">
|
||||
<div class="session-list-header">
|
||||
<span v-if="showSessions" class="session-list-title">Sessions</span>
|
||||
<NButton quaternary size="tiny" @click="handleNewChat" circle>
|
||||
<template #icon>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</template>
|
||||
</NButton>
|
||||
</div>
|
||||
<div v-if="showSessions" class="session-items">
|
||||
<button
|
||||
v-for="s in sortedSessions"
|
||||
:key="s.id"
|
||||
class="session-item"
|
||||
:class="{ active: s.id === chatStore.activeSessionId }"
|
||||
@click="chatStore.switchSession(s.id)"
|
||||
>
|
||||
<div class="session-item-content">
|
||||
<span class="session-item-title">{{ s.title }}</span>
|
||||
<span class="session-item-time">{{ formatTime(s.updatedAt) }}</span>
|
||||
</div>
|
||||
<NPopconfirm
|
||||
v-if="s.id !== chatStore.activeSessionId || sortedSessions.length > 1"
|
||||
@positive-click="handleDeleteSession(s.id)"
|
||||
>
|
||||
<template #trigger>
|
||||
<button class="session-item-delete" @click.stop>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</template>
|
||||
Delete this session?
|
||||
</NPopconfirm>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Chat Area -->
|
||||
<div class="chat-main">
|
||||
<header class="chat-header">
|
||||
<div class="header-left">
|
||||
<NButton quaternary size="small" @click="showSessions = !showSessions" circle>
|
||||
<template #icon>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
||||
</template>
|
||||
</NButton>
|
||||
<span class="header-session-title">{{ activeSessionLabel }}</span>
|
||||
<span class="model-badge">{{ appStore.selectedModel }}</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<NTooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<NButton quaternary size="small" @click="copySessionId" circle>
|
||||
<template #icon>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
</template>
|
||||
</NButton>
|
||||
</template>
|
||||
Copy Session ID
|
||||
</NTooltip>
|
||||
<NButton size="small" @click="handleNewChat">
|
||||
<template #icon>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</template>
|
||||
New Chat
|
||||
</NButton>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<MessageList />
|
||||
<ChatInput />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.chat-panel {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.session-list {
|
||||
width: 220px;
|
||||
border-right: 1px solid $border-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
transition: width $transition-normal, opacity $transition-normal;
|
||||
overflow: hidden;
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
border-right: none;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.session-list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.session-list-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $text-muted;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.session-items {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 6px 12px;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: $radius-sm;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: $text-secondary;
|
||||
transition: all $transition-fast;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
background: rgba($accent-primary, 0.06);
|
||||
color: $text-primary;
|
||||
|
||||
.session-item-delete {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba($accent-primary, 0.1);
|
||||
color: $text-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.session-item-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.session-item-title {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.session-item-time {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.session-item-delete {
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
padding: 2px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $text-muted;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: all $transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: $error;
|
||||
background: rgba($error, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-session-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.model-badge {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
background: rgba($accent-primary, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid $border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import hljs from 'highlight.js'
|
||||
|
||||
const props = defineProps<{ content: string }>()
|
||||
|
||||
const md: MarkdownIt = new MarkdownIt({
|
||||
html: false,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
highlight(str: string, lang: string): string {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
return `<pre class="hljs-code-block"><div class="code-header"><span class="code-lang">${lang}</span><button class="copy-btn" onclick="navigator.clipboard.writeText(this.closest('.hljs-code-block').querySelector('code').textContent)">Copy</button></div><code class="hljs language-${lang}">${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`
|
||||
} catch {
|
||||
// fall through
|
||||
}
|
||||
}
|
||||
return `<pre class="hljs-code-block"><div class="code-header"><button class="copy-btn" onclick="navigator.clipboard.writeText(this.closest('.hljs-code-block').querySelector('code').textContent)">Copy</button></div><code class="hljs">${md.utils.escapeHtml(str)}</code></pre>`
|
||||
},
|
||||
})
|
||||
|
||||
const renderedHtml = computed(() => md.render(props.content))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="markdown-body" v-html="renderedHtml"></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.markdown-body {
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
|
||||
p {
|
||||
margin: 0 0 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 20px;
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $text-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
em {
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accent-primary;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
|
||||
&:hover {
|
||||
color: $accent-hover;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 8px 0;
|
||||
padding: 4px 12px;
|
||||
border-left: 3px solid $border-color;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
code:not(.hljs) {
|
||||
background: $code-bg;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: $font-code;
|
||||
font-size: 13px;
|
||||
color: $accent-primary;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 8px 0;
|
||||
|
||||
th, td {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid $border-color;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
th {
|
||||
background: rgba($accent-primary, 0.08);
|
||||
color: $text-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
td {
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid $border-color;
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hljs-code-block {
|
||||
margin: 8px 0;
|
||||
border-radius: $radius-sm;
|
||||
overflow: hidden;
|
||||
background: $code-bg;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.code-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.code-lang {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
transition: all $transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: $text-primary;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
display: block;
|
||||
padding: 12px;
|
||||
font-family: $font-code;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// highlight.js theme override — pure ink B&W
|
||||
.hljs {
|
||||
color: #2a2a2a;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag { color: #1a1a1a; font-weight: 600; }
|
||||
.hljs-string,
|
||||
.hljs-attr { color: #555555; }
|
||||
.hljs-number { color: #333333; }
|
||||
.hljs-comment { color: #999999; font-style: italic; }
|
||||
.hljs-built_in { color: #444444; }
|
||||
.hljs-type { color: #3a3a3a; }
|
||||
.hljs-variable { color: #1a1a1a; }
|
||||
.hljs-title,
|
||||
.hljs-title\.function_ { color: #1a1a1a; }
|
||||
.hljs-params { color: #2a2a2a; }
|
||||
.hljs-meta { color: #999999; }
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Message } from '@/stores/chat'
|
||||
import MarkdownRenderer from './MarkdownRenderer.vue'
|
||||
|
||||
const props = defineProps<{ message: Message }>()
|
||||
|
||||
const isSystem = computed(() => props.message.role === 'system')
|
||||
|
||||
const timeStr = computed(() => {
|
||||
const d = new Date(props.message.timestamp)
|
||||
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="message" :class="[message.role]">
|
||||
<template v-if="message.role === 'tool'">
|
||||
<div class="tool-line">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="tool-icon"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
||||
<span class="tool-name">{{ message.toolName }}</span>
|
||||
<span v-if="message.toolPreview" class="tool-preview">{{ message.toolPreview }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="msg-body">
|
||||
<img v-if="message.role === 'assistant'" src="/assets/logo.png" alt="Hermes" class="msg-avatar" />
|
||||
<div class="msg-content" :class="message.role">
|
||||
<div class="message-bubble" :class="{ system: isSystem }">
|
||||
<MarkdownRenderer v-if="message.content" :content="message.content" />
|
||||
<span v-if="message.isStreaming" class="streaming-cursor"></span>
|
||||
<div v-if="message.isStreaming && !message.content" class="streaming-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-time">{{ timeStr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.user {
|
||||
align-items: flex-end;
|
||||
|
||||
.msg-body {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.msg-content.user {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
background-color: $msg-user-bg;
|
||||
border-radius: $radius-md $radius-md 4px $radius-md;
|
||||
}
|
||||
}
|
||||
|
||||
&.assistant {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
|
||||
.msg-body {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.msg-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
background-color: $msg-assistant-bg;
|
||||
border-radius: $radius-md $radius-md $radius-md 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tool {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&.system {
|
||||
align-items: flex-start;
|
||||
|
||||
.message-bubble.system {
|
||||
border-left: 3px solid $warning;
|
||||
border-radius: $radius-sm;
|
||||
max-width: 80%;
|
||||
background-color: rgba($warning, 0.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msg-body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
margin-top: 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.tool-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
padding: 0 4px;
|
||||
|
||||
.tool-name {
|
||||
font-family: $font-code;
|
||||
}
|
||||
|
||||
.tool-preview {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.streaming-cursor {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 1em;
|
||||
background-color: $text-muted;
|
||||
margin-left: 2px;
|
||||
vertical-align: text-bottom;
|
||||
animation: blink 0.8s infinite;
|
||||
}
|
||||
|
||||
.streaming-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 4px 0;
|
||||
|
||||
span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $text-muted;
|
||||
border-radius: 50%;
|
||||
animation: pulse 1.4s infinite ease-in-out;
|
||||
|
||||
&:nth-child(2) { animation-delay: 0.2s; }
|
||||
&:nth-child(3) { animation-delay: 0.4s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||
40% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick } from 'vue'
|
||||
import MessageItem from './MessageItem.vue'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
|
||||
const chatStore = useChatStore()
|
||||
const listRef = ref<HTMLElement>()
|
||||
|
||||
function scrollToBottom() {
|
||||
nextTick(() => {
|
||||
if (listRef.value) {
|
||||
listRef.value.scrollTop = listRef.value.scrollHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => chatStore.messages.length, scrollToBottom)
|
||||
watch(() => chatStore.messages[chatStore.messages.length - 1]?.content, scrollToBottom)
|
||||
watch(() => chatStore.isStreaming, (v) => { if (v) scrollToBottom() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="listRef" class="message-list">
|
||||
<div v-if="chatStore.messages.length === 0" class="empty-state">
|
||||
<img src="/assets/logo.png" alt="Hermes" class="empty-logo" />
|
||||
<p>Start a conversation with Hermes Agent</p>
|
||||
</div>
|
||||
<MessageItem
|
||||
v-for="msg in chatStore.messages"
|
||||
:key="msg.id"
|
||||
:message="msg"
|
||||
/>
|
||||
<div v-if="chatStore.isStreaming" class="streaming-indicator">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.message-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $text-muted;
|
||||
gap: 12px;
|
||||
|
||||
.empty-logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.streaming-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
color: $text-muted;
|
||||
|
||||
span {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: $text-muted;
|
||||
border-radius: 50%;
|
||||
animation: stream-pulse 1.4s infinite ease-in-out;
|
||||
|
||||
&:nth-child(2) { animation-delay: 0.2s; }
|
||||
&:nth-child(3) { animation-delay: 0.4s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stream-pulse {
|
||||
0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
|
||||
40% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,244 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { NButton, NTooltip, useMessage } from 'naive-ui'
|
||||
import type { Job } from '@/api/jobs'
|
||||
import { useJobsStore } from '@/stores/jobs'
|
||||
|
||||
const props = defineProps<{ job: Job }>()
|
||||
const emit = defineEmits<{
|
||||
edit: [jobId: string]
|
||||
}>()
|
||||
|
||||
const jobsStore = useJobsStore()
|
||||
const message = useMessage()
|
||||
|
||||
const jobId = computed(() => props.job.job_id || props.job.id)
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
if (props.job.state === 'running') return 'Running'
|
||||
if (props.job.state === 'paused') return 'Paused'
|
||||
if (!props.job.enabled) return 'Disabled'
|
||||
return 'Scheduled'
|
||||
})
|
||||
|
||||
const statusType = computed(() => {
|
||||
if (props.job.state === 'running') return 'info' as const
|
||||
if (props.job.state === 'paused') return 'warning' as const
|
||||
if (!props.job.enabled) return 'error' as const
|
||||
return 'success' as const
|
||||
})
|
||||
|
||||
const scheduleExpr = computed(() => {
|
||||
const s = props.job.schedule
|
||||
if (typeof s === 'string') return s
|
||||
return s?.expr || props.job.schedule_display || '—'
|
||||
})
|
||||
|
||||
const formatTime = (t?: string | null) => {
|
||||
if (!t) return '—'
|
||||
return new Date(t).toLocaleString()
|
||||
}
|
||||
|
||||
async function handlePause() {
|
||||
try {
|
||||
await jobsStore.pauseJob(jobId.value)
|
||||
message.success('Job paused')
|
||||
} catch (e: any) {
|
||||
message.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleResume() {
|
||||
try {
|
||||
await jobsStore.resumeJob(jobId.value)
|
||||
message.success('Job resumed')
|
||||
} catch (e: any) {
|
||||
message.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRun() {
|
||||
try {
|
||||
await jobsStore.runJob(jobId.value)
|
||||
message.info('Job triggered')
|
||||
} catch (e: any) {
|
||||
message.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
try {
|
||||
await jobsStore.deleteJob(jobId.value)
|
||||
message.success('Job deleted')
|
||||
} catch (e: any) {
|
||||
message.error(e.message)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="job-card">
|
||||
<div class="card-header">
|
||||
<h3 class="job-name">{{ job.name }}</h3>
|
||||
<span class="status-badge" :class="statusType">{{ statusLabel }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Schedule</span>
|
||||
<code class="info-value mono">{{ scheduleExpr }}</code>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Run</span>
|
||||
<span class="info-value">
|
||||
{{ formatTime(job.last_run_at) }}
|
||||
<span v-if="job.last_status" class="run-status" :class="{ ok: job.last_status === 'ok', err: job.last_status !== 'ok' }">
|
||||
{{ job.last_status === 'ok' ? 'OK' : job.last_status }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Next Run</span>
|
||||
<span class="info-value">{{ formatTime(job.next_run_at) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Deliver</span>
|
||||
<span class="info-value">{{ job.deliver }}<template v-if="job.origin"> ({{ job.origin.platform }})</template></span>
|
||||
</div>
|
||||
<div v-if="job.repeat" class="info-row">
|
||||
<span class="info-label">Repeat</span>
|
||||
<span class="info-value">
|
||||
<template v-if="typeof job.repeat === 'string'">{{ job.repeat }}</template>
|
||||
<template v-else>{{ job.repeat.completed }} / {{ job.repeat.times ?? '∞' }}</template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions">
|
||||
<NTooltip v-if="job.state !== 'paused' && job.enabled">
|
||||
<template #trigger>
|
||||
<NButton size="tiny" quaternary @click="handlePause">Pause</NButton>
|
||||
</template>
|
||||
Pause job
|
||||
</NTooltip>
|
||||
<NTooltip v-else-if="job.state === 'paused'">
|
||||
<template #trigger>
|
||||
<NButton size="tiny" quaternary @click="handleResume">Resume</NButton>
|
||||
</template>
|
||||
Resume job
|
||||
</NTooltip>
|
||||
<NTooltip>
|
||||
<template #trigger>
|
||||
<NButton size="tiny" quaternary @click="handleRun">Run Now</NButton>
|
||||
</template>
|
||||
Trigger immediately
|
||||
</NTooltip>
|
||||
<NButton size="tiny" quaternary @click="emit('edit', jobId)">Edit</NButton>
|
||||
<NButton size="tiny" quaternary type="error" @click="handleDelete">Delete</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.job-card {
|
||||
background-color: $bg-card;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-md;
|
||||
padding: 16px;
|
||||
transition: border-color $transition-fast;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba($accent-primary, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.job-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
|
||||
&.success {
|
||||
background: rgba($success, 0.12);
|
||||
color: $success;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: rgba($accent-primary, 0.12);
|
||||
color: $accent-primary;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: rgba($warning, 0.12);
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: rgba($error, 0.12);
|
||||
color: $error;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 12px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.run-status {
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
|
||||
&.ok { color: $success; }
|
||||
&.err { color: $error; }
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: $font-code;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
border-top: 1px solid $border-light;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,188 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { NModal, NForm, NFormItem, NInput, NButton, NSelect, NInputNumber, useMessage } from 'naive-ui'
|
||||
import { useJobsStore } from '@/stores/jobs'
|
||||
|
||||
const props = defineProps<{
|
||||
jobId: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
saved: []
|
||||
}>()
|
||||
|
||||
const jobsStore = useJobsStore()
|
||||
const message = useMessage()
|
||||
|
||||
const showModal = ref(true)
|
||||
const loading = ref(false)
|
||||
|
||||
const formData = ref({
|
||||
name: '',
|
||||
schedule: '',
|
||||
prompt: '',
|
||||
deliver: 'origin',
|
||||
repeat_times: null as number | null,
|
||||
})
|
||||
|
||||
const presetValue = ref<string | null>(null)
|
||||
|
||||
const isEdit = computed(() => !!props.jobId)
|
||||
|
||||
const schedulePresets = [
|
||||
{ label: 'Every minute', value: '* * * * *' },
|
||||
{ label: 'Every 5 minutes', value: '*/5 * * * *' },
|
||||
{ label: 'Every hour', value: '0 * * * *' },
|
||||
{ label: 'Every day at 00:00', value: '0 0 * * *' },
|
||||
{ label: 'Every day at 09:00', value: '0 9 * * *' },
|
||||
{ label: 'Every Monday at 09:00', value: '0 9 * * 1' },
|
||||
{ label: 'Every month 1st at 09:00', value: '0 9 1 * *' },
|
||||
]
|
||||
|
||||
const targetOptions = [
|
||||
{ label: 'Origin', value: 'origin' },
|
||||
{ label: 'Local', value: 'local' },
|
||||
]
|
||||
|
||||
onMounted(async () => {
|
||||
if (props.jobId) {
|
||||
try {
|
||||
const { getJob } = await import('@/api/jobs')
|
||||
const job = await getJob(props.jobId)
|
||||
formData.value = {
|
||||
name: job.name,
|
||||
schedule: typeof job.schedule === 'string' ? job.schedule : (job.schedule?.expr || job.schedule_display || ''),
|
||||
prompt: job.prompt,
|
||||
deliver: job.deliver || 'origin',
|
||||
repeat_times: typeof job.repeat === 'number' ? job.repeat : (typeof job.repeat === 'object' ? job.repeat.times : null),
|
||||
}
|
||||
} catch (e: any) {
|
||||
message.error('Failed to load job: ' + e.message)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
async function handleSave() {
|
||||
if (!formData.value.name.trim()) {
|
||||
message.warning('Name is required')
|
||||
return
|
||||
}
|
||||
if (!formData.value.schedule.trim()) {
|
||||
message.warning('Schedule is required')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const payload = {
|
||||
name: formData.value.name,
|
||||
schedule: formData.value.schedule,
|
||||
prompt: formData.value.prompt,
|
||||
deliver: formData.value.deliver,
|
||||
repeat: formData.value.repeat_times ?? undefined,
|
||||
}
|
||||
|
||||
if (isEdit.value) {
|
||||
await jobsStore.updateJob(props.jobId!, payload)
|
||||
message.success('Job updated')
|
||||
} else {
|
||||
await jobsStore.createJob(payload)
|
||||
message.success('Job created')
|
||||
}
|
||||
emit('saved')
|
||||
} catch (e: any) {
|
||||
message.error(e.message)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
showModal.value = false
|
||||
setTimeout(() => emit('close'), 200)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
v-model:show="showModal"
|
||||
preset="card"
|
||||
:title="isEdit ? 'Edit Job' : 'Create Job'"
|
||||
:style="{ width: '520px' }"
|
||||
:mask-closable="!loading"
|
||||
@after-leave="emit('close')"
|
||||
>
|
||||
<NForm label-placement="top">
|
||||
<NFormItem label="Name" required>
|
||||
<NInput
|
||||
v-model:value="formData.name"
|
||||
placeholder="Job name"
|
||||
maxlength="200"
|
||||
show-count
|
||||
/>
|
||||
</NFormItem>
|
||||
|
||||
<NFormItem label="Schedule (Cron Expression)" required>
|
||||
<NInput
|
||||
v-model:value="formData.schedule"
|
||||
placeholder="e.g. 0 9 * * *"
|
||||
/>
|
||||
</NFormItem>
|
||||
|
||||
<NFormItem label="Quick Presets">
|
||||
<NSelect
|
||||
v-model:value="presetValue"
|
||||
:options="schedulePresets"
|
||||
placeholder="Select a preset..."
|
||||
@update:value="v => formData.schedule = v"
|
||||
/>
|
||||
</NFormItem>
|
||||
|
||||
<NFormItem label="Prompt" required>
|
||||
<NInput
|
||||
v-model:value="formData.prompt"
|
||||
type="textarea"
|
||||
placeholder="The prompt to execute"
|
||||
:rows="4"
|
||||
maxlength="5000"
|
||||
show-count
|
||||
/>
|
||||
</NFormItem>
|
||||
|
||||
<NFormItem label="Deliver Target">
|
||||
<NSelect
|
||||
v-model:value="formData.deliver"
|
||||
:options="targetOptions"
|
||||
/>
|
||||
</NFormItem>
|
||||
|
||||
<NFormItem label="Repeat Count (optional)">
|
||||
<NInputNumber
|
||||
v-model:value="formData.repeat_times"
|
||||
:min="1"
|
||||
placeholder="Leave empty for infinite"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
|
||||
<template #footer>
|
||||
<div class="modal-footer">
|
||||
<NButton @click="handleClose">Cancel</NButton>
|
||||
<NButton type="primary" :loading="loading" @click="handleSave">
|
||||
{{ isEdit ? 'Update' : 'Create' }}
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import JobCard from './JobCard.vue'
|
||||
import { useJobsStore } from '@/stores/jobs'
|
||||
|
||||
const emit = defineEmits<{
|
||||
edit: [jobId: string]
|
||||
}>()
|
||||
|
||||
const jobsStore = useJobsStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="jobsStore.jobs.length === 0" class="empty-state">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="empty-icon">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
<p>No scheduled jobs yet. Create one to get started.</p>
|
||||
</div>
|
||||
<div v-else class="jobs-grid">
|
||||
<JobCard
|
||||
v-for="job in jobsStore.jobs"
|
||||
:key="job.id"
|
||||
:job="job"
|
||||
@edit="emit('edit', job.id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: $text-muted;
|
||||
gap: 12px;
|
||||
|
||||
.empty-icon {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.jobs-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const selectedKey = computed(() => route.name as string)
|
||||
|
||||
function handleNav(key: string) {
|
||||
router.push({ name: key })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo" @click="router.push('/')">
|
||||
<img src="/assets/logo.png" alt="Hermes" class="logo-img" />
|
||||
<span class="logo-text">Hermes</span>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<button
|
||||
class="nav-item"
|
||||
:class="{ active: selectedKey === 'chat' }"
|
||||
@click="handleNav('chat')"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
<span>Chat</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="nav-item"
|
||||
:class="{ active: selectedKey === 'jobs' }"
|
||||
@click="handleNav('jobs')"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
<span>Jobs</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="status-indicator" :class="{ connected: appStore.connected, disconnected: !appStore.connected }">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-text">{{ appStore.connected ? 'Connected' : 'Disconnected' }}</span>
|
||||
</div>
|
||||
<div class="version-info">Hermes {{ appStore.serverVersion || 'v0.1.0' }}</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-width;
|
||||
height: 100vh;
|
||||
background-color: $bg-sidebar;
|
||||
border-right: 1px solid $border-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 12px;
|
||||
flex-shrink: 0;
|
||||
transition: width $transition-normal;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 4px 12px 20px;
|
||||
color: $text-primary;
|
||||
cursor: pointer;
|
||||
|
||||
.logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $text-secondary;
|
||||
font-size: 14px;
|
||||
border-radius: $radius-sm;
|
||||
cursor: pointer;
|
||||
transition: all $transition-fast;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($accent-primary, 0.06);
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba($accent-primary, 0.12);
|
||||
color: $accent-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.connected .status-dot {
|
||||
background-color: $success;
|
||||
box-shadow: 0 0 6px rgba($success, 0.5);
|
||||
}
|
||||
|
||||
&.disconnected .status-dot {
|
||||
background-color: $error;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.version-info {
|
||||
padding: 4px 12px;
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
|
||||
export function useKeyboard() {
|
||||
const router = useRouter()
|
||||
const chatStore = useChatStore()
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
const mod = e.ctrlKey || e.metaKey
|
||||
|
||||
if (mod && e.key === 'n') {
|
||||
e.preventDefault()
|
||||
chatStore.newChat()
|
||||
}
|
||||
|
||||
if (mod && e.key === 'j') {
|
||||
e.preventDefault()
|
||||
router.push({ name: 'jobs' })
|
||||
}
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
// Close any open modals — naive-ui handles this internally
|
||||
const modal = document.querySelector('.n-modal-mask')
|
||||
if (modal) {
|
||||
const closeBtn = modal.querySelector('.n-base-close') as HTMLElement
|
||||
closeBtn?.click()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', handleKeydown)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleKeydown)
|
||||
})
|
||||
}
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import router from './router'
|
||||
import App from './App.vue'
|
||||
import './styles/global.scss'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,24 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'chat',
|
||||
component: () => import('@/views/ChatView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/jobs',
|
||||
name: 'jobs',
|
||||
component: () => import('@/views/JobsView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
redirect: '/',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,66 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { checkHealth, fetchModels } from '@/api/system'
|
||||
import type { Model } from '@/api/system'
|
||||
|
||||
export const useAppStore = defineStore('app', () => {
|
||||
const connected = ref(false)
|
||||
const serverVersion = ref('')
|
||||
const models = ref<Model[]>([])
|
||||
const healthPollTimer = ref<ReturnType<typeof setInterval>>()
|
||||
|
||||
// Settings
|
||||
const streamEnabled = ref(true)
|
||||
const sessionPersistence = ref(true)
|
||||
const maxTokens = ref(4096)
|
||||
const selectedModel = ref('hermes-agent')
|
||||
|
||||
async function checkConnection() {
|
||||
try {
|
||||
const res = await checkHealth()
|
||||
connected.value = true
|
||||
if (res.version) serverVersion.value = res.version
|
||||
} catch {
|
||||
connected.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadModels() {
|
||||
try {
|
||||
const res = await fetchModels()
|
||||
models.value = res.data || []
|
||||
if (models.value.length > 0 && !models.value.find(m => m.id === selectedModel.value)) {
|
||||
selectedModel.value = models.value[0].id
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
function startHealthPolling(interval = 30000) {
|
||||
stopHealthPolling()
|
||||
checkConnection()
|
||||
healthPollTimer.value = setInterval(checkConnection, interval)
|
||||
}
|
||||
|
||||
function stopHealthPolling() {
|
||||
if (healthPollTimer.value) {
|
||||
clearInterval(healthPollTimer.value)
|
||||
healthPollTimer.value = undefined
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
connected,
|
||||
serverVersion,
|
||||
models,
|
||||
streamEnabled,
|
||||
sessionPersistence,
|
||||
maxTokens,
|
||||
selectedModel,
|
||||
checkConnection,
|
||||
loadModels,
|
||||
startHealthPolling,
|
||||
stopHealthPolling,
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,344 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { startRun, streamRunEvents, type ChatMessage, type RunEvent } from '@/api/chat'
|
||||
import { useAppStore } from './app'
|
||||
|
||||
export interface Message {
|
||||
id: string
|
||||
role: 'user' | 'assistant' | 'system' | 'tool'
|
||||
content: string
|
||||
timestamp: number
|
||||
toolName?: string
|
||||
toolPreview?: string
|
||||
toolStatus?: 'running' | 'done' | 'error'
|
||||
isStreaming?: boolean
|
||||
}
|
||||
|
||||
interface Session {
|
||||
id: string
|
||||
title: string
|
||||
messages: Message[]
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
}
|
||||
|
||||
function uid(): string {
|
||||
return Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
|
||||
}
|
||||
|
||||
const SESSIONS_KEY = 'hermes_chat_sessions'
|
||||
const ACTIVE_SESSION_KEY = 'hermes_active_session'
|
||||
|
||||
function loadSessions(): Session[] {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(SESSIONS_KEY) || '[]')
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function saveSessions(sessions: Session[]) {
|
||||
localStorage.setItem(SESSIONS_KEY, JSON.stringify(sessions))
|
||||
}
|
||||
|
||||
function loadActiveSessionId(): string | null {
|
||||
return localStorage.getItem(ACTIVE_SESSION_KEY)
|
||||
}
|
||||
|
||||
export const useChatStore = defineStore('chat', () => {
|
||||
const appStore = useAppStore()
|
||||
const sessions = ref<Session[]>(loadSessions())
|
||||
const activeSessionId = ref<string | null>(loadActiveSessionId())
|
||||
const isStreaming = ref(false)
|
||||
const abortController = ref<AbortController | null>(null)
|
||||
|
||||
const activeSession = ref<Session | null>(
|
||||
sessions.value.find(s => s.id === activeSessionId.value) || null,
|
||||
)
|
||||
|
||||
const messages = ref<Message[]>(activeSession.value?.messages || [])
|
||||
|
||||
function createSession(): Session {
|
||||
const session: Session = {
|
||||
id: uid(),
|
||||
title: 'New Chat',
|
||||
messages: [],
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
sessions.value.unshift(session)
|
||||
saveSessions(sessions.value)
|
||||
return session
|
||||
}
|
||||
|
||||
function switchSession(sessionId: string) {
|
||||
activeSessionId.value = sessionId
|
||||
localStorage.setItem(ACTIVE_SESSION_KEY, sessionId)
|
||||
activeSession.value = sessions.value.find(s => s.id === sessionId) || null
|
||||
messages.value = activeSession.value ? [...activeSession.value.messages] : []
|
||||
}
|
||||
|
||||
function newChat() {
|
||||
if (isStreaming.value) return
|
||||
const session = createSession()
|
||||
switchSession(session.id)
|
||||
}
|
||||
|
||||
function deleteSession(sessionId: string) {
|
||||
sessions.value = sessions.value.filter(s => s.id !== sessionId)
|
||||
saveSessions(sessions.value)
|
||||
if (activeSessionId.value === sessionId) {
|
||||
if (sessions.value.length > 0) {
|
||||
switchSession(sessions.value[0].id)
|
||||
} else {
|
||||
const session = createSession()
|
||||
switchSession(session.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function persistMessages() {
|
||||
if (!activeSession.value || !appStore.sessionPersistence) return
|
||||
activeSession.value.messages = [...messages.value]
|
||||
activeSession.value.updatedAt = Date.now()
|
||||
|
||||
if (activeSession.value.title === 'New Chat') {
|
||||
const firstUser = messages.value.find(m => m.role === 'user')
|
||||
if (firstUser) {
|
||||
activeSession.value.title = firstUser.content.slice(0, 40) + (firstUser.content.length > 40 ? '...' : '')
|
||||
}
|
||||
}
|
||||
|
||||
const idx = sessions.value.findIndex(s => s.id === activeSession.value!.id)
|
||||
if (idx !== -1) sessions.value[idx] = activeSession.value
|
||||
saveSessions(sessions.value)
|
||||
}
|
||||
|
||||
function addMessage(msg: Message) {
|
||||
messages.value.push(msg)
|
||||
}
|
||||
|
||||
function updateMessage(id: string, update: Partial<Message>) {
|
||||
const idx = messages.value.findIndex(m => m.id === id)
|
||||
if (idx !== -1) {
|
||||
messages.value[idx] = { ...messages.value[idx], ...update }
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage(content: string) {
|
||||
if (!content.trim() || isStreaming.value) return
|
||||
|
||||
if (!activeSession.value) {
|
||||
const session = createSession()
|
||||
switchSession(session.id)
|
||||
}
|
||||
|
||||
const userMsg: Message = {
|
||||
id: uid(),
|
||||
role: 'user',
|
||||
content: content.trim(),
|
||||
timestamp: Date.now(),
|
||||
}
|
||||
addMessage(userMsg)
|
||||
persistMessages()
|
||||
|
||||
isStreaming.value = true
|
||||
|
||||
try {
|
||||
// Build conversation history from past messages
|
||||
const history: ChatMessage[] = messages.value
|
||||
.filter(m => (m.role === 'user' || m.role === 'assistant') && m.content.trim())
|
||||
.map(m => ({ role: m.role as 'user' | 'assistant' | 'system', content: m.content }))
|
||||
|
||||
const run = await startRun({
|
||||
input: content.trim(),
|
||||
conversation_history: history,
|
||||
session_id: activeSession.value?.id,
|
||||
})
|
||||
|
||||
const runId = (run as any).run_id || (run as any).id
|
||||
if (!runId) {
|
||||
addMessage({
|
||||
id: uid(),
|
||||
role: 'system',
|
||||
content: `Error: startRun returned no run ID. Response: ${JSON.stringify(run)}`,
|
||||
timestamp: Date.now(),
|
||||
})
|
||||
isStreaming.value = false
|
||||
persistMessages()
|
||||
return
|
||||
}
|
||||
|
||||
// Listen to SSE events
|
||||
abortController.value = streamRunEvents(
|
||||
runId,
|
||||
// onEvent
|
||||
(evt: RunEvent) => {
|
||||
switch (evt.event) {
|
||||
case 'run.started':
|
||||
// run started, nothing to render yet
|
||||
break
|
||||
|
||||
case 'message.delta': {
|
||||
// Find or create the assistant message
|
||||
const last = messages.value[messages.value.length - 1]
|
||||
if (last?.role === 'assistant' && last.isStreaming) {
|
||||
last.content += evt.delta || ''
|
||||
} else {
|
||||
addMessage({
|
||||
id: uid(),
|
||||
role: 'assistant',
|
||||
content: evt.delta || '',
|
||||
timestamp: Date.now(),
|
||||
isStreaming: true,
|
||||
})
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'tool.started': {
|
||||
// Close any streaming assistant message first
|
||||
const last = messages.value[messages.value.length - 1]
|
||||
if (last?.isStreaming) {
|
||||
updateMessage(last.id, { isStreaming: false })
|
||||
}
|
||||
// Add tool message
|
||||
addMessage({
|
||||
id: uid(),
|
||||
role: 'tool',
|
||||
content: '',
|
||||
timestamp: Date.now(),
|
||||
toolName: evt.tool || evt.name,
|
||||
toolPreview: evt.preview,
|
||||
toolStatus: 'running',
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'tool.completed': {
|
||||
// Find the running tool message and mark done
|
||||
const toolMsgs = messages.value.filter(
|
||||
m => m.role === 'tool' && m.toolStatus === 'running',
|
||||
)
|
||||
if (toolMsgs.length > 0) {
|
||||
const last = toolMsgs[toolMsgs.length - 1]
|
||||
updateMessage(last.id, { toolStatus: 'done' })
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'run.completed':
|
||||
// Close any streaming message
|
||||
const lastMsg = messages.value[messages.value.length - 1]
|
||||
if (lastMsg?.isStreaming) {
|
||||
updateMessage(lastMsg.id, { isStreaming: false })
|
||||
}
|
||||
isStreaming.value = false
|
||||
abortController.value = null
|
||||
persistMessages()
|
||||
break
|
||||
|
||||
case 'run.failed':
|
||||
// Mark error
|
||||
const lastErr = messages.value[messages.value.length - 1]
|
||||
if (lastErr?.isStreaming) {
|
||||
updateMessage(lastErr.id, {
|
||||
isStreaming: false,
|
||||
content: evt.error ? `Error: ${evt.error}` : 'Run failed',
|
||||
role: 'system',
|
||||
})
|
||||
} else {
|
||||
addMessage({
|
||||
id: uid(),
|
||||
role: 'system',
|
||||
content: evt.error ? `Error: ${evt.error}` : 'Run failed',
|
||||
timestamp: Date.now(),
|
||||
})
|
||||
}
|
||||
// Mark any running tools as error
|
||||
messages.value.forEach((m, i) => {
|
||||
if (m.role === 'tool' && m.toolStatus === 'running') {
|
||||
messages.value[i] = { ...m, toolStatus: 'error' }
|
||||
}
|
||||
})
|
||||
isStreaming.value = false
|
||||
abortController.value = null
|
||||
persistMessages()
|
||||
break
|
||||
}
|
||||
},
|
||||
// onDone
|
||||
() => {
|
||||
const last = messages.value[messages.value.length - 1]
|
||||
if (last?.isStreaming) {
|
||||
updateMessage(last.id, { isStreaming: false })
|
||||
}
|
||||
isStreaming.value = false
|
||||
abortController.value = null
|
||||
persistMessages()
|
||||
},
|
||||
// onError
|
||||
(err) => {
|
||||
const last = messages.value[messages.value.length - 1]
|
||||
if (last?.isStreaming) {
|
||||
updateMessage(last.id, {
|
||||
isStreaming: false,
|
||||
content: `Error: ${err.message}`,
|
||||
role: 'system',
|
||||
})
|
||||
} else {
|
||||
addMessage({
|
||||
id: uid(),
|
||||
role: 'system',
|
||||
content: `Error: ${err.message}`,
|
||||
timestamp: Date.now(),
|
||||
})
|
||||
}
|
||||
isStreaming.value = false
|
||||
abortController.value = null
|
||||
persistMessages()
|
||||
},
|
||||
)
|
||||
} catch (err: any) {
|
||||
addMessage({
|
||||
id: uid(),
|
||||
role: 'system',
|
||||
content: `Error: ${err.message}`,
|
||||
timestamp: Date.now(),
|
||||
})
|
||||
isStreaming.value = false
|
||||
abortController.value = null
|
||||
persistMessages()
|
||||
}
|
||||
}
|
||||
|
||||
function stopStreaming() {
|
||||
abortController.value?.abort()
|
||||
isStreaming.value = false
|
||||
const lastMsg = messages.value[messages.value.length - 1]
|
||||
if (lastMsg?.isStreaming) {
|
||||
updateMessage(lastMsg.id, { isStreaming: false })
|
||||
}
|
||||
abortController.value = null
|
||||
}
|
||||
|
||||
if (sessions.value.length === 0) {
|
||||
const session = createSession()
|
||||
switchSession(session.id)
|
||||
} else if (!activeSession.value) {
|
||||
switchSession(sessions.value[0].id)
|
||||
}
|
||||
|
||||
return {
|
||||
sessions,
|
||||
activeSessionId,
|
||||
activeSession,
|
||||
messages,
|
||||
isStreaming,
|
||||
newChat,
|
||||
switchSession,
|
||||
deleteSession,
|
||||
sendMessage,
|
||||
stopStreaming,
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,72 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import * as jobsApi from '@/api/jobs'
|
||||
import type { Job, CreateJobRequest, UpdateJobRequest } from '@/api/jobs'
|
||||
|
||||
function matchId(job: Job, id: string): boolean {
|
||||
return job.job_id === id || job.id === id
|
||||
}
|
||||
|
||||
export const useJobsStore = defineStore('jobs', () => {
|
||||
const jobs = ref<Job[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
async function fetchJobs() {
|
||||
loading.value = true
|
||||
try {
|
||||
jobs.value = await jobsApi.listJobs()
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch jobs:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function createJob(data: CreateJobRequest): Promise<Job> {
|
||||
const job = await jobsApi.createJob(data)
|
||||
jobs.value.unshift(job)
|
||||
return job
|
||||
}
|
||||
|
||||
async function updateJob(jobId: string, data: UpdateJobRequest): Promise<Job> {
|
||||
const job = await jobsApi.updateJob(jobId, data)
|
||||
const idx = jobs.value.findIndex(j => matchId(j, jobId))
|
||||
if (idx !== -1) jobs.value[idx] = job
|
||||
return job
|
||||
}
|
||||
|
||||
async function deleteJob(jobId: string) {
|
||||
await jobsApi.deleteJob(jobId)
|
||||
jobs.value = jobs.value.filter(j => !matchId(j, jobId))
|
||||
}
|
||||
|
||||
async function pauseJob(jobId: string) {
|
||||
const job = await jobsApi.pauseJob(jobId)
|
||||
const idx = jobs.value.findIndex(j => matchId(j, jobId))
|
||||
if (idx !== -1) jobs.value[idx] = job
|
||||
}
|
||||
|
||||
async function resumeJob(jobId: string) {
|
||||
const job = await jobsApi.resumeJob(jobId)
|
||||
const idx = jobs.value.findIndex(j => matchId(j, jobId))
|
||||
if (idx !== -1) jobs.value[idx] = job
|
||||
}
|
||||
|
||||
async function runJob(jobId: string) {
|
||||
const job = await jobsApi.runJob(jobId)
|
||||
const idx = jobs.value.findIndex(j => matchId(j, jobId))
|
||||
if (idx !== -1) jobs.value[idx] = job
|
||||
}
|
||||
|
||||
return {
|
||||
jobs,
|
||||
loading,
|
||||
fetchJobs,
|
||||
createJob,
|
||||
updateJob,
|
||||
deleteJob,
|
||||
pauseJob,
|
||||
resumeJob,
|
||||
runJob,
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,60 @@
|
||||
@use 'variables' as *;
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-ui;
|
||||
background-color: $bg-primary;
|
||||
color: $text-primary;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code, pre, .mono {
|
||||
font-family: $font-code;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accent-primary;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $accent-hover;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $border-color;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba($accent-primary, 0.3);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import type { GlobalThemeOverrides } from 'naive-ui'
|
||||
|
||||
export const themeOverrides: GlobalThemeOverrides = {
|
||||
common: {
|
||||
primaryColor: '#333333',
|
||||
primaryColorHover: '#1a1a1a',
|
||||
primaryColorPressed: '#000000',
|
||||
primaryColorSuppl: '#333333',
|
||||
bodyColor: '#fafafa',
|
||||
cardColor: '#ffffff',
|
||||
modalColor: '#ffffff',
|
||||
popoverColor: '#ffffff',
|
||||
tableColor: '#ffffff',
|
||||
inputColor: '#ffffff',
|
||||
actionColor: '#f0f0f0',
|
||||
textColorBase: '#1a1a1a',
|
||||
textColor1: '#1a1a1a',
|
||||
textColor2: '#666666',
|
||||
textColor3: '#999999',
|
||||
dividerColor: '#e0e0e0',
|
||||
borderColor: '#e0e0e0',
|
||||
hoverColor: 'rgba(0, 0, 0, 0.04)',
|
||||
borderRadius: '8px',
|
||||
borderRadiusSmall: '6px',
|
||||
fontSize: '14px',
|
||||
fontSizeMedium: '14px',
|
||||
heightMedium: '36px',
|
||||
fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
|
||||
fontFamilyMono: 'JetBrains Mono, Fira Code, Consolas, monospace',
|
||||
},
|
||||
Layout: {
|
||||
color: '#fafafa',
|
||||
siderColor: '#f5f5f5',
|
||||
headerColor: '#fafafa',
|
||||
},
|
||||
Menu: {
|
||||
itemTextColorActive: '#1a1a1a',
|
||||
itemTextColorActiveHover: '#1a1a1a',
|
||||
itemTextColorChildActive: '#1a1a1a',
|
||||
itemIconColorActive: '#1a1a1a',
|
||||
itemIconColorActiveHover: '#000000',
|
||||
itemColorActive: 'rgba(0, 0, 0, 0.06)',
|
||||
itemColorActiveHover: 'rgba(0, 0, 0, 0.1)',
|
||||
arrowColorActive: '#1a1a1a',
|
||||
},
|
||||
Button: {
|
||||
textColorPrimary: '#ffffff',
|
||||
colorPrimary: '#333333',
|
||||
colorHoverPrimary: '#1a1a1a',
|
||||
colorPressedPrimary: '#000000',
|
||||
},
|
||||
Input: {
|
||||
color: '#ffffff',
|
||||
colorFocus: '#ffffff',
|
||||
border: '1px solid #e0e0e0',
|
||||
borderHover: '1px solid #999999',
|
||||
borderFocus: '1px solid #333333',
|
||||
placeholderColor: '#999999',
|
||||
caretColor: '#1a1a1a',
|
||||
},
|
||||
Card: {
|
||||
color: '#ffffff',
|
||||
borderColor: '#e0e0e0',
|
||||
},
|
||||
Modal: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
Tag: {
|
||||
borderRadius: '6px',
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
// 黑白水墨 — Pure Ink
|
||||
// 纯黑白灰，无彩色
|
||||
|
||||
// Backgrounds
|
||||
$bg-primary: #fafafa;
|
||||
$bg-secondary: #f0f0f0;
|
||||
$bg-sidebar: #f5f5f5;
|
||||
$bg-card: #ffffff;
|
||||
$bg-card-hover: #fafafa;
|
||||
$bg-input: #ffffff;
|
||||
|
||||
// Borders
|
||||
$border-color: #e0e0e0;
|
||||
$border-light: #ebebeb;
|
||||
|
||||
// Accent
|
||||
$accent-primary: #333333;
|
||||
$accent-hover: #1a1a1a;
|
||||
$accent-muted: #888888;
|
||||
|
||||
// Text
|
||||
$text-primary: #1a1a1a;
|
||||
$text-secondary: #666666;
|
||||
$text-muted: #999999;
|
||||
|
||||
// Status
|
||||
$success: #2e7d32;
|
||||
$error: #c62828;
|
||||
$warning: #f57f17;
|
||||
$info: $accent-primary;
|
||||
|
||||
// Message bubbles
|
||||
$msg-user-bg: #e8e8e8;
|
||||
$msg-assistant-bg: #f5f5f5;
|
||||
$msg-system-border: #bdbdbd;
|
||||
|
||||
// Code
|
||||
$code-bg: #f4f4f4;
|
||||
|
||||
// Typography
|
||||
$font-ui: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
$font-code: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
|
||||
// Layout
|
||||
$sidebar-width: 240px;
|
||||
$sidebar-collapsed-width: 64px;
|
||||
$header-height: 56px;
|
||||
|
||||
// Radius
|
||||
$radius-sm: 6px;
|
||||
$radius-md: 10px;
|
||||
$radius-lg: 14px;
|
||||
|
||||
// Transition
|
||||
$transition-fast: 0.15s ease;
|
||||
$transition-normal: 0.25s ease;
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import ChatPanel from '@/components/chat/ChatPanel.vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
onMounted(() => {
|
||||
appStore.loadModels()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-view">
|
||||
<ChatPanel />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chat-view {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { NButton, NSpin } from 'naive-ui'
|
||||
import JobsPanel from '@/components/jobs/JobsPanel.vue'
|
||||
import JobFormModal from '@/components/jobs/JobFormModal.vue'
|
||||
import { useJobsStore } from '@/stores/jobs'
|
||||
|
||||
const jobsStore = useJobsStore()
|
||||
const showModal = ref(false)
|
||||
const editingJob = ref<string | null>(null)
|
||||
|
||||
onMounted(() => {
|
||||
jobsStore.fetchJobs()
|
||||
})
|
||||
|
||||
function openCreateModal() {
|
||||
editingJob.value = null
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function openEditModal(jobId: string) {
|
||||
editingJob.value = jobId
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function handleModalClose() {
|
||||
showModal.value = false
|
||||
editingJob.value = null
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
await jobsStore.fetchJobs()
|
||||
handleModalClose()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="jobs-view">
|
||||
<header class="jobs-header">
|
||||
<h2 class="header-title">Scheduled Jobs</h2>
|
||||
<NButton type="primary" @click="openCreateModal">
|
||||
<template #icon>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</template>
|
||||
Create Job
|
||||
</NButton>
|
||||
</header>
|
||||
|
||||
<div class="jobs-content">
|
||||
<NSpin :show="jobsStore.loading && jobsStore.jobs.length === 0">
|
||||
<JobsPanel @edit="openEditModal" />
|
||||
</NSpin>
|
||||
</div>
|
||||
|
||||
<JobFormModal
|
||||
v-if="showModal"
|
||||
:job-id="editingJob"
|
||||
@close="handleModalClose"
|
||||
@saved="handleSave"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.jobs-view {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.jobs-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.jobs-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,257 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import {
|
||||
NButton, NInput, NSwitch, NSlider, NSelect, NDataTable, useMessage,
|
||||
} from 'naive-ui'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { setServerUrl, setApiKey, getBaseUrlValue } from '@/api/client'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const message = useMessage()
|
||||
|
||||
const serverUrl = ref(getBaseUrlValue())
|
||||
const apiKey = ref(localStorage.getItem('hermes_api_key') || '')
|
||||
const testingConnection = ref(false)
|
||||
|
||||
const modelOptions = computed(() =>
|
||||
appStore.models.map(m => ({ label: m.id, value: m.id })),
|
||||
)
|
||||
|
||||
async function handleTestConnection() {
|
||||
testingConnection.value = true
|
||||
setServerUrl(serverUrl.value)
|
||||
if (apiKey.value) setApiKey(apiKey.value)
|
||||
try {
|
||||
await appStore.checkConnection()
|
||||
if (appStore.connected) {
|
||||
message.success('Connected successfully')
|
||||
} else {
|
||||
message.error('Connection failed')
|
||||
}
|
||||
} catch (e: any) {
|
||||
message.error(e.message)
|
||||
} finally {
|
||||
testingConnection.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSaveApiKey() {
|
||||
setApiKey(apiKey.value)
|
||||
message.success('API key saved')
|
||||
}
|
||||
|
||||
const endpointColumns = [
|
||||
{ title: 'Method', key: 'method', width: 80 },
|
||||
{ title: 'Endpoint', key: 'endpoint' },
|
||||
{ title: 'Description', key: 'description' },
|
||||
]
|
||||
|
||||
const endpoints = [
|
||||
{ method: 'GET', endpoint: '/health', description: 'Health Check' },
|
||||
{ method: 'GET', endpoint: '/v1/health', description: 'Health Check (v1)' },
|
||||
{ method: 'GET', endpoint: '/v1/models', description: 'Model List' },
|
||||
{ method: 'POST', endpoint: '/v1/chat/completions', description: 'Chat Completions (OpenAI compatible)' },
|
||||
{ method: 'POST', endpoint: '/v1/responses', description: 'Create Response (stateful)' },
|
||||
{ method: 'GET', endpoint: '/v1/responses/{id}', description: 'Get Stored Response' },
|
||||
{ method: 'DELETE', endpoint: '/v1/responses/{id}', description: 'Delete Response' },
|
||||
{ method: 'POST', endpoint: '/v1/runs', description: 'Start Async Run' },
|
||||
{ method: 'GET', endpoint: '/v1/runs/{id}/events', description: 'SSE Event Stream' },
|
||||
{ method: 'GET', endpoint: '/api/jobs', description: 'List Jobs' },
|
||||
{ method: 'POST', endpoint: '/api/jobs', description: 'Create Job' },
|
||||
{ method: 'GET', endpoint: '/api/jobs/{id}', description: 'Get Job Detail' },
|
||||
{ method: 'PATCH', endpoint: '/api/jobs/{id}', description: 'Update Job' },
|
||||
{ method: 'DELETE', endpoint: '/api/jobs/{id}', description: 'Delete Job' },
|
||||
{ method: 'POST', endpoint: '/api/jobs/{id}/pause', description: 'Pause Job' },
|
||||
{ method: 'POST', endpoint: '/api/jobs/{id}/resume', description: 'Resume Job' },
|
||||
{ method: 'POST', endpoint: '/api/jobs/{id}/run', description: 'Trigger Job Now' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings-view">
|
||||
<header class="settings-header">
|
||||
<h2 class="header-title">Settings</h2>
|
||||
</header>
|
||||
|
||||
<div class="settings-content">
|
||||
<!-- API Configuration -->
|
||||
<section class="settings-section">
|
||||
<h3 class="section-title">API Configuration</h3>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Server URL</label>
|
||||
<NInput v-model:value="serverUrl" placeholder="http://127.0.0.1:8642" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">API Key (optional)</label>
|
||||
<div class="input-with-action">
|
||||
<NInput v-model:value="apiKey" type="password" show-password-on="click" placeholder="Enter API key" />
|
||||
<NButton size="small" @click="handleSaveApiKey">Save</NButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="connection-status">
|
||||
<span class="status-dot" :class="{ on: appStore.connected, off: !appStore.connected }"></span>
|
||||
<span>{{ appStore.connected ? 'Connected' : 'Disconnected' }}</span>
|
||||
<span v-if="appStore.serverVersion" class="version">v{{ appStore.serverVersion }}</span>
|
||||
</div>
|
||||
<NButton type="primary" size="small" :loading="testingConnection" @click="handleTestConnection">
|
||||
Test Connection
|
||||
</NButton>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Chat Settings -->
|
||||
<section class="settings-section">
|
||||
<h3 class="section-title">Chat Settings</h3>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Default Model</label>
|
||||
<NSelect
|
||||
v-model:value="appStore.selectedModel"
|
||||
:options="modelOptions"
|
||||
placeholder="Select model"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Stream Responses</label>
|
||||
<NSwitch v-model:value="appStore.streamEnabled" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Session Persistence</label>
|
||||
<NSwitch v-model:value="appStore.sessionPersistence" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Max Tokens: {{ appStore.maxTokens }}</label>
|
||||
<NSlider v-model:value="appStore.maxTokens" :min="256" :max="32768" :step="256" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section class="settings-section">
|
||||
<h3 class="section-title">About</h3>
|
||||
<p class="about-text">
|
||||
Hermes Agent Web UI
|
||||
<br />Version 0.1.0
|
||||
</p>
|
||||
<div class="endpoint-table">
|
||||
<NDataTable
|
||||
:columns="endpointColumns"
|
||||
:data="endpoints"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
:row-props="() => ({ style: 'cursor: default;' })"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.settings-view {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 28px;
|
||||
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: $text-secondary;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 14px;
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-with-action {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
.n-input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.on {
|
||||
background-color: $success;
|
||||
box-shadow: 0 0 6px rgba($success, 0.5);
|
||||
}
|
||||
|
||||
&.off {
|
||||
background-color: $error;
|
||||
}
|
||||
}
|
||||
|
||||
.version {
|
||||
color: $text-muted;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.about-text {
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.endpoint-table {
|
||||
:deep(.n-data-table) {
|
||||
--n-td-color: transparent;
|
||||
--n-th-color: rgba($accent-primary, 0.04);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"types": ["vite/client"],
|
||||
"ignoreDeprecations": "6.0",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "esnext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import type { ProxyOptions } from 'vite'
|
||||
import { resolve } from 'path'
|
||||
|
||||
function createProxyConfig(): ProxyOptions {
|
||||
return {
|
||||
target: 'http://127.0.0.1:8642',
|
||||
changeOrigin: true,
|
||||
configure: (proxy) => {
|
||||
proxy.on('proxyReq', (proxyReq) => {
|
||||
proxyReq.removeHeader('origin')
|
||||
proxyReq.removeHeader('referer')
|
||||
})
|
||||
// Disable response buffering for SSE streaming
|
||||
proxy.on('proxyRes', (proxyRes) => {
|
||||
proxyRes.headers['cache-control'] = 'no-cache'
|
||||
proxyRes.headers['x-accel-buffering'] = 'no'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
compress: false,
|
||||
proxy: {
|
||||
'/api': createProxyConfig(),
|
||||
'/v1': createProxyConfig(),
|
||||
'/health': createProxyConfig(),
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user