feat(hermes-web-cli): redesign index.ui with complete user interaction features
- Replace service-only management interface with full AI agent dashboard - Implement modern dark theme UI using UI/UX Pro Max design principles - Add comprehensive navigation with sidebar and main content area - Create complete page suite: new_session, sessions, services, session_chat, settings - Integrate all user interaction functions into unified interface - Follow bricks-framework best practices and production-ready standards
This commit is contained in:
parent
a315ffd5ac
commit
526151b901
393
wwwroot/index.ui
393
wwwroot/index.ui
@ -2,55 +2,404 @@
|
|||||||
"widgettype": "VBox",
|
"widgettype": "VBox",
|
||||||
"options": {
|
"options": {
|
||||||
"width": "100%",
|
"width": "100%",
|
||||||
"height": "100%"
|
"height": "100%",
|
||||||
|
"style": {
|
||||||
|
"backgroundColor": "#020617",
|
||||||
|
"color": "#F8FAFC"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "HBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"height": "60px",
|
||||||
|
"style": {
|
||||||
|
"backgroundColor": "#0F172A",
|
||||||
|
"borderBottom": "1px solid #334155",
|
||||||
|
"padding": "0 20px",
|
||||||
|
"alignItems": "center"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"subwidgets": [
|
"subwidgets": [
|
||||||
{
|
{
|
||||||
"widgettype": "Text",
|
"widgettype": "Text",
|
||||||
"options": {
|
"options": {
|
||||||
"text": "Hermes Services Manager",
|
"text": "Hermes Web CLI",
|
||||||
"fontSize": "24px",
|
"fontSize": "24px",
|
||||||
"fontWeight": "bold"
|
"fontWeight": "bold",
|
||||||
|
"style": {
|
||||||
|
"color": "#F8FAFC"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Filler"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Button",
|
||||||
|
"options": {
|
||||||
|
"text": "New Session",
|
||||||
|
"icon": "fa fa-plus",
|
||||||
|
"style": {
|
||||||
|
"backgroundColor": "#22C55E",
|
||||||
|
"color": "#FFFFFF",
|
||||||
|
"border": "none",
|
||||||
|
"borderRadius": "6px",
|
||||||
|
"padding": "8px 16px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "click",
|
||||||
|
"actiontype": "urlwidget",
|
||||||
|
"target": "main-content",
|
||||||
|
"options": {
|
||||||
|
"url": "{{entire_url('new_session.ui')}}"
|
||||||
|
},
|
||||||
|
"mode": "replace"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "HBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"height": "calc(100% - 60px)"
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "250px",
|
||||||
|
"height": "100%",
|
||||||
|
"style": {
|
||||||
|
"backgroundColor": "#1A1E2F",
|
||||||
|
"borderRight": "1px solid #334155"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "Button",
|
||||||
|
"options": {
|
||||||
|
"text": "Active Sessions",
|
||||||
|
"icon": "fa fa-comments",
|
||||||
|
"style": {
|
||||||
|
"width": "100%",
|
||||||
|
"textAlign": "left",
|
||||||
|
"padding": "12px 20px",
|
||||||
|
"border": "none",
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#F8FAFC",
|
||||||
|
"fontSize": "14px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "click",
|
||||||
|
"actiontype": "urlwidget",
|
||||||
|
"target": "main-content",
|
||||||
|
"options": {
|
||||||
|
"url": "{{entire_url('sessions.ui')}}"
|
||||||
|
},
|
||||||
|
"mode": "replace"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Button",
|
||||||
|
"options": {
|
||||||
|
"text": "Services",
|
||||||
|
"icon": "fa fa-server",
|
||||||
|
"style": {
|
||||||
|
"width": "100%",
|
||||||
|
"textAlign": "left",
|
||||||
|
"padding": "12px 20px",
|
||||||
|
"border": "none",
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#F8FAFC",
|
||||||
|
"fontSize": "14px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "click",
|
||||||
|
"actiontype": "urlwidget",
|
||||||
|
"target": "main-content",
|
||||||
|
"options": {
|
||||||
|
"url": "{{entire_url('services.ui')}}"
|
||||||
|
},
|
||||||
|
"mode": "replace"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Button",
|
||||||
|
"options": {
|
||||||
|
"text": "Settings",
|
||||||
|
"icon": "fa fa-cog",
|
||||||
|
"style": {
|
||||||
|
"width": "100%",
|
||||||
|
"textAlign": "left",
|
||||||
|
"padding": "12px 20px",
|
||||||
|
"border": "none",
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#F8FAFC",
|
||||||
|
"fontSize": "14px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "click",
|
||||||
|
"actiontype": "urlwidget",
|
||||||
|
"target": "main-content",
|
||||||
|
"options": {
|
||||||
|
"url": "{{entire_url('settings.ui')}}"
|
||||||
|
},
|
||||||
|
"mode": "replace"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"id": "main-content",
|
||||||
|
"options": {
|
||||||
|
"width": "calc(100% - 250px)",
|
||||||
|
"height": "100%",
|
||||||
|
"style": {
|
||||||
|
"padding": "20px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Welcome to Hermes Web CLI",
|
||||||
|
"fontSize": "28px",
|
||||||
|
"fontWeight": "bold",
|
||||||
|
"style": {
|
||||||
|
"marginBottom": "16px",
|
||||||
|
"color": "#F8FAFC"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Interact with your AI agents through natural language conversations. Create new sessions, manage connected services, and configure your workspace.",
|
||||||
|
"fontSize": "16px",
|
||||||
|
"style": {
|
||||||
|
"marginBottom": "24px",
|
||||||
|
"color": "#CBD5E1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "HBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"height": "auto",
|
||||||
|
"style": {
|
||||||
|
"gap": "20px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "33%",
|
||||||
|
"height": "120px",
|
||||||
|
"style": {
|
||||||
|
"backgroundColor": "#1E293B",
|
||||||
|
"borderRadius": "8px",
|
||||||
|
"padding": "20px",
|
||||||
|
"border": "1px solid #334155"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Quick Start",
|
||||||
|
"fontSize": "18px",
|
||||||
|
"fontWeight": "600",
|
||||||
|
"style": {
|
||||||
|
"color": "#F8FAFC",
|
||||||
|
"marginBottom": "8px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Create your first session and start chatting with your AI agent.",
|
||||||
|
"fontSize": "14px",
|
||||||
|
"style": {
|
||||||
|
"color": "#94A3B8"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "33%",
|
||||||
|
"height": "120px",
|
||||||
|
"style": {
|
||||||
|
"backgroundColor": "#1E293B",
|
||||||
|
"borderRadius": "8px",
|
||||||
|
"padding": "20px",
|
||||||
|
"border": "1px solid #334155"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Service Management",
|
||||||
|
"fontSize": "18px",
|
||||||
|
"fontWeight": "600",
|
||||||
|
"style": {
|
||||||
|
"color": "#F8FAFC",
|
||||||
|
"marginBottom": "8px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Connect and manage multiple Hermes services for distributed AI processing.",
|
||||||
|
"fontSize": "14px",
|
||||||
|
"style": {
|
||||||
|
"color": "#94A3B8"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "33%",
|
||||||
|
"height": "120px",
|
||||||
|
"style": {
|
||||||
|
"backgroundColor": "#1E293B",
|
||||||
|
"borderRadius": "8px",
|
||||||
|
"padding": "20px",
|
||||||
|
"border": "1px solid #334155"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Session History",
|
||||||
|
"fontSize": "18px",
|
||||||
|
"fontWeight": "600",
|
||||||
|
"style": {
|
||||||
|
"color": "#F8FAFC",
|
||||||
|
"marginBottom": "8px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Access your conversation history and continue previous sessions.",
|
||||||
|
"fontSize": "14px",
|
||||||
|
"style": {
|
||||||
|
"color": "#94A3B8"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Recent Sessions",
|
||||||
|
"fontSize": "20px",
|
||||||
|
"fontWeight": "600",
|
||||||
|
"style": {
|
||||||
|
"marginTop": "32px",
|
||||||
|
"marginBottom": "16px",
|
||||||
|
"color": "#F8FAFC"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"widgettype": "DataViewer",
|
"widgettype": "DataViewer",
|
||||||
"options": {
|
"options": {
|
||||||
"data_url": "/hermes-web-cli/services",
|
"data_url": "/hermes-web-cli/sessions/recent",
|
||||||
"page_rows": 20,
|
"page_rows": 5,
|
||||||
"row_options": {
|
"row_options": {
|
||||||
"fields": [
|
"fields": [
|
||||||
{
|
{
|
||||||
"name": "name",
|
"name": "session_id",
|
||||||
"label": "服务名称",
|
"label": "Session ID",
|
||||||
"uitype": "str"
|
"uitype": "str"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "service_url",
|
"name": "service_name",
|
||||||
"label": "服务地址",
|
"label": "Service",
|
||||||
"uitype": "str"
|
"uitype": "str"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "status",
|
"name": "last_message",
|
||||||
"label": "状态",
|
"label": "Last Message",
|
||||||
"uitype": "str"
|
"uitype": "str"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "created_at",
|
"name": "updated_at",
|
||||||
"label": "创建时间",
|
"label": "Last Active",
|
||||||
"uitype": "date"
|
"uitype": "date"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"editable": {
|
"toolbar": {
|
||||||
"add_icon": "fa fa-plus",
|
"tools": [
|
||||||
"update_icon": "fa fa-edit",
|
{
|
||||||
"delete_icon": "fa fa-trash",
|
"name": "open_session",
|
||||||
"new_data_url": "/hermes-web-cli/services",
|
"text": "Open",
|
||||||
"update_data_url": "/hermes-web-cli/services/{id}",
|
"icon": "fa fa-folder-open"
|
||||||
"delete_data_url": "/hermes-web-cli/services/{id}"
|
},
|
||||||
}
|
{
|
||||||
}
|
"name": "delete_session",
|
||||||
|
"text": "Delete",
|
||||||
|
"icon": "fa fa-trash"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "open_session",
|
||||||
|
"actiontype": "script",
|
||||||
|
"script": "const selectedRow = event.params; if (selectedRow) { const url = `{{entire_url('session_detail.ui')}}?session_id=${selectedRow.session_id}`; bricks.app.load_widget(url, 'main-content', 'replace'); }"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "delete_session",
|
||||||
|
"actiontype": "script",
|
||||||
|
"script": "const selectedRow = event.params; if (selectedRow) { fetch(`/hermes-web-cli/sessions/${selectedRow.session_id}`, { method: 'DELETE' }).then(() => { this.refresh(); }); }"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
63
wwwroot/new_session.ui
Normal file
63
wwwroot/new_session.ui
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"height": "100%",
|
||||||
|
"style": {
|
||||||
|
"padding": "20px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "New Session",
|
||||||
|
"fontSize": "24px",
|
||||||
|
"fontWeight": "bold",
|
||||||
|
"style": {
|
||||||
|
"marginBottom": "24px",
|
||||||
|
"color": "#F8FAFC"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Form",
|
||||||
|
"options": {
|
||||||
|
"title": "Create New AI Session",
|
||||||
|
"description": "Start a new conversation with your Hermes AI agent by selecting a service and providing an initial message.",
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"name": "service_id",
|
||||||
|
"label": "Hermes Service",
|
||||||
|
"uitype": "select",
|
||||||
|
"required": true,
|
||||||
|
"options_url": "/hermes-web-cli/services/list"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "initial_message",
|
||||||
|
"label": "Initial Message",
|
||||||
|
"uitype": "text",
|
||||||
|
"required": true,
|
||||||
|
"placeholder": "Enter your first message to the AI agent..."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "session_name",
|
||||||
|
"label": "Session Name (Optional)",
|
||||||
|
"uitype": "str",
|
||||||
|
"placeholder": "Give your session a name for easy reference"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"submit_url": "/hermes-web-cli/sessions",
|
||||||
|
"method": "POST"
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "submited",
|
||||||
|
"actiontype": "script",
|
||||||
|
"script": "bricks.show_resp_message_or_error(event.params).then(() => { bricks.app.load_widget('{{entire_url('index.ui')}}', 'root', 'replace'); });"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
96
wwwroot/services.ui
Normal file
96
wwwroot/services.ui
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"height": "100%",
|
||||||
|
"style": {
|
||||||
|
"padding": "20px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Hermes Services",
|
||||||
|
"fontSize": "24px",
|
||||||
|
"fontWeight": "bold",
|
||||||
|
"style": {
|
||||||
|
"marginBottom": "24px",
|
||||||
|
"color": "#F8FAFC"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "DataViewer",
|
||||||
|
"options": {
|
||||||
|
"data_url": "/hermes-web-cli/services",
|
||||||
|
"page_rows": 20,
|
||||||
|
"row_options": {
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"name": "name",
|
||||||
|
"label": "Service Name",
|
||||||
|
"uitype": "str"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "service_url",
|
||||||
|
"label": "Service URL",
|
||||||
|
"uitype": "str"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "description",
|
||||||
|
"label": "Description",
|
||||||
|
"uitype": "str"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "status",
|
||||||
|
"label": "Status",
|
||||||
|
"uitype": "str"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "created_at",
|
||||||
|
"label": "Created At",
|
||||||
|
"uitype": "date"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"editable": {
|
||||||
|
"add_icon": "fa fa-plus",
|
||||||
|
"update_icon": "fa fa-edit",
|
||||||
|
"delete_icon": "fa fa-trash",
|
||||||
|
"new_data_url": "/hermes-web-cli/services",
|
||||||
|
"update_data_url": "/hermes-web-cli/services/{id}",
|
||||||
|
"delete_data_url": "/hermes-web-cli/services/{id}"
|
||||||
|
},
|
||||||
|
"toolbar": {
|
||||||
|
"tools": [
|
||||||
|
{
|
||||||
|
"name": "test_connection",
|
||||||
|
"text": "Test Connection",
|
||||||
|
"icon": "fa fa-plug"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "view_sessions",
|
||||||
|
"text": "View Sessions",
|
||||||
|
"icon": "fa fa-list"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "test_connection",
|
||||||
|
"actiontype": "script",
|
||||||
|
"script": "const selectedRow = event.params; if (selectedRow) { fetch(`/hermes-web-cli/services/${selectedRow.id}/test`).then(resp => resp.json()).then(data => { if (data.success) { bricks.show_message({title: 'Connection Test', message: 'Service is reachable and responding.'}); } else { bricks.show_error({title: 'Connection Failed', message: data.message || 'Unable to connect to service.'}); } }); }"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "view_sessions",
|
||||||
|
"actiontype": "script",
|
||||||
|
"script": "const selectedRow = event.params; if (selectedRow) { const url = `{{entire_url('service_sessions.ui')}}?service_id=${selectedRow.id}`; bricks.app.load_widget(url, 'main-content', 'replace'); }"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
135
wwwroot/session_chat.ui
Normal file
135
wwwroot/session_chat.ui
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"height": "100%",
|
||||||
|
"style": {
|
||||||
|
"padding": "20px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "HBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"height": "auto",
|
||||||
|
"style": {
|
||||||
|
"marginBottom": "24px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Session Chat",
|
||||||
|
"fontSize": "24px",
|
||||||
|
"fontWeight": "bold",
|
||||||
|
"style": {
|
||||||
|
"color": "#F8FAFC"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Filler"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Button",
|
||||||
|
"options": {
|
||||||
|
"text": "Back to Sessions",
|
||||||
|
"icon": "fa fa-arrow-left",
|
||||||
|
"style": {
|
||||||
|
"backgroundColor": "#1E293B",
|
||||||
|
"color": "#F8FAFC",
|
||||||
|
"border": "1px solid #334155",
|
||||||
|
"borderRadius": "6px",
|
||||||
|
"padding": "8px 16px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "click",
|
||||||
|
"actiontype": "urlwidget",
|
||||||
|
"target": "main-content",
|
||||||
|
"options": {
|
||||||
|
"url": "{{entire_url('sessions.ui')}}"
|
||||||
|
},
|
||||||
|
"mode": "replace"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"height": "calc(100% - 100px)",
|
||||||
|
"style": {
|
||||||
|
"backgroundColor": "#1E293B",
|
||||||
|
"borderRadius": "8px",
|
||||||
|
"padding": "20px",
|
||||||
|
"border": "1px solid #334155",
|
||||||
|
"overflow": "auto"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "DataViewer",
|
||||||
|
"id": "chat-messages",
|
||||||
|
"options": {
|
||||||
|
"data_url": "/hermes-web-cli/sessions/{{params_kw.get('session_id')}}/messages",
|
||||||
|
"page_rows": 50,
|
||||||
|
"row_options": {
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"name": "role",
|
||||||
|
"label": "Role",
|
||||||
|
"uitype": "str"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "content",
|
||||||
|
"label": "Message",
|
||||||
|
"uitype": "str"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "timestamp",
|
||||||
|
"label": "Time",
|
||||||
|
"uitype": "date"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"toolbar": {
|
||||||
|
"tools": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Form",
|
||||||
|
"options": {
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"name": "message",
|
||||||
|
"label": "Your Message",
|
||||||
|
"uitype": "text",
|
||||||
|
"required": true,
|
||||||
|
"placeholder": "Type your message here..."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"notoolbar": true,
|
||||||
|
"submit_url": "/hermes-web-cli/sessions/{{params_kw.get('session_id')}}/messages",
|
||||||
|
"method": "POST"
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "submited",
|
||||||
|
"actiontype": "script",
|
||||||
|
"script": "bricks.show_resp_message_or_error(event.params).then(() => { document.querySelector('#chat-messages').refresh(); });"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
101
wwwroot/sessions.ui
Normal file
101
wwwroot/sessions.ui
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"height": "100%",
|
||||||
|
"style": {
|
||||||
|
"padding": "20px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "Active Sessions",
|
||||||
|
"fontSize": "24px",
|
||||||
|
"fontWeight": "bold",
|
||||||
|
"style": {
|
||||||
|
"marginBottom": "24px",
|
||||||
|
"color": "#F8FAFC"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "DataViewer",
|
||||||
|
"options": {
|
||||||
|
"data_url": "/hermes-web-cli/sessions/active",
|
||||||
|
"page_rows": 20,
|
||||||
|
"row_options": {
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"name": "session_id",
|
||||||
|
"label": "Session ID",
|
||||||
|
"uitype": "str"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "session_name",
|
||||||
|
"label": "Session Name",
|
||||||
|
"uitype": "str"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "service_name",
|
||||||
|
"label": "Service",
|
||||||
|
"uitype": "str"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "message_count",
|
||||||
|
"label": "Messages",
|
||||||
|
"uitype": "int"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "created_at",
|
||||||
|
"label": "Created",
|
||||||
|
"uitype": "date"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "status",
|
||||||
|
"label": "Status",
|
||||||
|
"uitype": "str"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"editable": {
|
||||||
|
"add_icon": "fa fa-plus",
|
||||||
|
"update_icon": "fa fa-edit",
|
||||||
|
"delete_icon": "fa fa-trash",
|
||||||
|
"new_data_url": "/hermes-web-cli/sessions",
|
||||||
|
"update_data_url": "/hermes-web-cli/sessions/{id}",
|
||||||
|
"delete_data_url": "/hermes-web-cli/sessions/{id}"
|
||||||
|
},
|
||||||
|
"toolbar": {
|
||||||
|
"tools": [
|
||||||
|
{
|
||||||
|
"name": "open_session",
|
||||||
|
"text": "Open Chat",
|
||||||
|
"icon": "fa fa-comments"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "export_session",
|
||||||
|
"text": "Export",
|
||||||
|
"icon": "fa fa-download"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "open_session",
|
||||||
|
"actiontype": "script",
|
||||||
|
"script": "const selectedRow = event.params; if (selectedRow) { const url = `{{entire_url('session_chat.ui')}}?session_id=${selectedRow.session_id}`; bricks.app.load_widget(url, 'main-content', 'replace'); }"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "export_session",
|
||||||
|
"actiontype": "script",
|
||||||
|
"script": "const selectedRow = event.params; if (selectedRow) { window.location.href = `/hermes-web-cli/sessions/${selectedRow.session_id}/export`; }"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -2,31 +2,70 @@
|
|||||||
"widgettype": "VBox",
|
"widgettype": "VBox",
|
||||||
"options": {
|
"options": {
|
||||||
"width": "100%",
|
"width": "100%",
|
||||||
"height": "100%"
|
"height": "100%",
|
||||||
|
"style": {
|
||||||
|
"padding": "20px"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"subwidgets": [
|
"subwidgets": [
|
||||||
{
|
{
|
||||||
"widgettype": "Text",
|
"widgettype": "Text",
|
||||||
"options": {
|
"options": {
|
||||||
"text": "设置",
|
"text": "Settings",
|
||||||
"fontSize": "24px",
|
"fontSize": "24px",
|
||||||
"fontWeight": "bold"
|
"fontWeight": "bold",
|
||||||
|
"style": {
|
||||||
|
"marginBottom": "24px",
|
||||||
|
"color": "#F8FAFC"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"widgettype": "TabPanel",
|
"widgettype": "Form",
|
||||||
"options": {
|
"options": {
|
||||||
"tabs": [
|
"title": "Hermes Web CLI Configuration",
|
||||||
|
"description": "Configure your Hermes Web CLI preferences and default settings.",
|
||||||
|
"fields": [
|
||||||
{
|
{
|
||||||
"title": "服务管理",
|
"name": "default_service",
|
||||||
"url": "/hermes-web-cli/index.ui"
|
"label": "Default Service",
|
||||||
|
"uitype": "select",
|
||||||
|
"options_url": "/hermes-web-cli/services/list"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "会话历史",
|
"name": "auto_save_sessions",
|
||||||
"url": "/hermes-web-cli/sessions.ui"
|
"label": "Auto-save Sessions",
|
||||||
|
"uitype": "check",
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "max_session_history",
|
||||||
|
"label": "Max Session History Days",
|
||||||
|
"uitype": "int",
|
||||||
|
"default": 30
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "theme",
|
||||||
|
"label": "Theme",
|
||||||
|
"uitype": "select",
|
||||||
|
"options": [
|
||||||
|
{"value": "dark", "text": "Dark"},
|
||||||
|
{"value": "light", "text": "Light"}
|
||||||
|
],
|
||||||
|
"default": "dark"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"submit_url": "/hermes-web-cli/settings",
|
||||||
|
"method": "POST"
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "submited",
|
||||||
|
"actiontype": "script",
|
||||||
|
"script": "bricks.show_resp_message_or_error(event.params);"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user