From 526151b901bb1576aa7793c0b9f1ed7e66f27aa4 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Tue, 21 Apr 2026 17:16:13 +0800 Subject: [PATCH] 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 --- wwwroot/index.ui | 415 ++++++++++++++++++++++++++++++++++++---- wwwroot/new_session.ui | 63 ++++++ wwwroot/services.ui | 96 ++++++++++ wwwroot/session_chat.ui | 135 +++++++++++++ wwwroot/sessions.ui | 101 ++++++++++ wwwroot/settings.ui | 61 ++++-- 6 files changed, 827 insertions(+), 44 deletions(-) create mode 100644 wwwroot/new_session.ui create mode 100644 wwwroot/services.ui create mode 100644 wwwroot/session_chat.ui create mode 100644 wwwroot/sessions.ui diff --git a/wwwroot/index.ui b/wwwroot/index.ui index 40828bd..25dd355 100644 --- a/wwwroot/index.ui +++ b/wwwroot/index.ui @@ -2,55 +2,404 @@ "widgettype": "VBox", "options": { "width": "100%", - "height": "100%" + "height": "100%", + "style": { + "backgroundColor": "#020617", + "color": "#F8FAFC" + } }, "subwidgets": [ { - "widgettype": "Text", + "widgettype": "HBox", "options": { - "text": "Hermes Services Manager", - "fontSize": "24px", - "fontWeight": "bold" - } + "width": "100%", + "height": "60px", + "style": { + "backgroundColor": "#0F172A", + "borderBottom": "1px solid #334155", + "padding": "0 20px", + "alignItems": "center" + } + }, + "subwidgets": [ + { + "widgettype": "Text", + "options": { + "text": "Hermes Web CLI", + "fontSize": "24px", + "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": "DataViewer", + "widgettype": "HBox", "options": { - "data_url": "/hermes-web-cli/services", - "page_rows": 20, - "row_options": { - "fields": [ + "width": "100%", + "height": "calc(100% - 60px)" + }, + "subwidgets": [ + { + "widgettype": "VBox", + "options": { + "width": "250px", + "height": "100%", + "style": { + "backgroundColor": "#1A1E2F", + "borderRight": "1px solid #334155" + } + }, + "subwidgets": [ { - "name": "name", - "label": "服务名称", - "uitype": "str" + "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" + } + ] }, { - "name": "service_url", - "label": "服务地址", - "uitype": "str" + "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" + } + ] }, { - "name": "status", - "label": "状态", - "uitype": "str" - }, - { - "name": "created_at", - "label": "创建时间", - "uitype": "date" + "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" + } + ] } ] }, - "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}" + { + "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", + "options": { + "data_url": "/hermes-web-cli/sessions/recent", + "page_rows": 5, + "row_options": { + "fields": [ + { + "name": "session_id", + "label": "Session ID", + "uitype": "str" + }, + { + "name": "service_name", + "label": "Service", + "uitype": "str" + }, + { + "name": "last_message", + "label": "Last Message", + "uitype": "str" + }, + { + "name": "updated_at", + "label": "Last Active", + "uitype": "date" + } + ] + }, + "toolbar": { + "tools": [ + { + "name": "open_session", + "text": "Open", + "icon": "fa fa-folder-open" + }, + { + "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(); }); }" + } + ] + } + ] } - } + ] } ] } \ No newline at end of file diff --git a/wwwroot/new_session.ui b/wwwroot/new_session.ui new file mode 100644 index 0000000..39415ba --- /dev/null +++ b/wwwroot/new_session.ui @@ -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'); });" + } + ] + } + ] +} \ No newline at end of file diff --git a/wwwroot/services.ui b/wwwroot/services.ui new file mode 100644 index 0000000..a98b801 --- /dev/null +++ b/wwwroot/services.ui @@ -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'); }" + } + ] + } + ] +} \ No newline at end of file diff --git a/wwwroot/session_chat.ui b/wwwroot/session_chat.ui new file mode 100644 index 0000000..1f5a247 --- /dev/null +++ b/wwwroot/session_chat.ui @@ -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(); });" + } + ] + } + ] +} \ No newline at end of file diff --git a/wwwroot/sessions.ui b/wwwroot/sessions.ui new file mode 100644 index 0000000..5134a49 --- /dev/null +++ b/wwwroot/sessions.ui @@ -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`; }" + } + ] + } + ] +} \ No newline at end of file diff --git a/wwwroot/settings.ui b/wwwroot/settings.ui index 893bd97..d19125f 100644 --- a/wwwroot/settings.ui +++ b/wwwroot/settings.ui @@ -2,31 +2,70 @@ "widgettype": "VBox", "options": { "width": "100%", - "height": "100%" + "height": "100%", + "style": { + "padding": "20px" + } }, "subwidgets": [ { "widgettype": "Text", "options": { - "text": "设置", + "text": "Settings", "fontSize": "24px", - "fontWeight": "bold" + "fontWeight": "bold", + "style": { + "marginBottom": "24px", + "color": "#F8FAFC" + } } }, { - "widgettype": "TabPanel", + "widgettype": "Form", "options": { - "tabs": [ + "title": "Hermes Web CLI Configuration", + "description": "Configure your Hermes Web CLI preferences and default settings.", + "fields": [ { - "title": "服务管理", - "url": "/hermes-web-cli/index.ui" + "name": "default_service", + "label": "Default Service", + "uitype": "select", + "options_url": "/hermes-web-cli/services/list" }, { - "title": "会话历史", - "url": "/hermes-web-cli/sessions.ui" + "name": "auto_save_sessions", + "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);" + } + ] } ] } \ No newline at end of file