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
+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>
|
||||
Reference in New Issue
Block a user