From 5399546114eff8bdf21c82f962ac47223a85be76 Mon Sep 17 00:00:00 2001
From: yumoqing <yumoqing@gmail.com>
Date: Tue, 21 Apr 2026 13:47:40 +0800
Subject: [PATCH] feat: Add Popup and PopupWindow examples and update chat
 interface

- Add comprehensive examples for Popup.ui and PopupWindow.ui components
- Update chat.ui to use PopupWindow for better desktop-like experience
- PopupWindow provides draggable, resizable application windows with title bar
- Popup provides modal/non-modal popup layers with auto-dismiss support
- Both components support proper event handling and lifecycle management
- Examples demonstrate real-world usage patterns for hermes-web-cli module
---
 examples/Popup.ui       | 71 ++++++++++++++++++++++++++++++++
 examples/PopupWindow.ui | 64 +++++++++++++++++++++++++++++
 wwwroot/chat.ui         | 91 ++++++++++++++++-------------------------
 3 files changed, 171 insertions(+), 55 deletions(-)
 create mode 100644 examples/Popup.ui
 create mode 100644 examples/PopupWindow.ui

diff --git a/examples/Popup.ui b/examples/Popup.ui
new file mode 100644
index 0000000..7ad2fef
--- /dev/null
+++ b/examples/Popup.ui
@@ -0,0 +1,71 @@
+{
+  "widgettype": "Popup",
+  "options": {
+    "title": "弹出层示例",
+    "width": "400px",
+    "height": "300px",
+    "auto_open": true,
+    "modal": true,
+    "movable": true,
+    "resizable": false
+  },
+  "subwidgets": [
+    {
+      "widgettype": "Text",
+      "options": {
+        "text": "这是一个 Popup 弹出层",
+        "fontSize": "18px"
+      }
+    },
+    {
+      "widgettype": "Form",
+      "options": {
+        "fields": [
+          {
+            "name": "message",
+            "label": "消息内容",
+            "uitype": "text"
+          }
+        ]
+      }
+    },
+    {
+      "widgettype": "HBox",
+      "subwidgets": [
+        {
+          "widgettype": "Filler"
+        },
+        {
+          "widgettype": "Button",
+          "options": {
+            "text": "确定"
+          },
+          "binds": [
+            {
+              "wid": "self",
+              "event": "click",
+              "actiontype": "method",
+              "target": "-@Popup",
+              "method": "dismiss"
+            }
+          ]
+        },
+        {
+          "widgettype": "Button",
+          "options": {
+            "text": "取消"
+          },
+          "binds": [
+            {
+              "wid": "self",
+              "event": "click",
+              "actiontype": "method",
+              "target": "-@Popup",
+              "method": "dismiss"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/PopupWindow.ui b/examples/PopupWindow.ui
new file mode 100644
index 0000000..46bd4ea
--- /dev/null
+++ b/examples/PopupWindow.ui
@@ -0,0 +1,64 @@
+{
+  "widgettype": "PopupWindow",
+  "options": {
+    "title": "应用窗口示例",
+    "width": "600px",
+    "height": "400px",
+    "auto_open": true,
+    "movable": true,
+    "resizable": true,
+    "modal": false
+  },
+  "subwidgets": [
+    {
+      "widgettype": "VBox",
+      "options": {
+        "width": "100%",
+        "height": "100%"
+      },
+      "subwidgets": [
+        {
+          "widgettype": "Text",
+          "options": {
+            "text": "这是一个可拖拽、可调整大小的应用窗口",
+            "fontSize": "20px"
+          }
+        },
+        {
+          "widgettype": "TabPanel",
+          "options": {
+            "tab_pos": "top",
+            "items": [
+              {
+                "name": "tab1",
+                "label": "内容1",
+                "content": {
+                  "widgettype": "Text",
+                  "options": {
+                    "text": "第一个标签页的内容"
+                  }
+                }
+              },
+              {
+                "name": "tab2",
+                "label": "内容2", 
+                "content": {
+                  "widgettype": "Form",
+                  "options": {
+                    "fields": [
+                      {
+                        "name": "input1",
+                        "label": "输入框",
+                        "uitype": "str"
+                      }
+                    ]
+                  }
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/wwwroot/chat.ui b/wwwroot/chat.ui
index 855e11b..0836fe6 100644
--- a/wwwroot/chat.ui
+++ b/wwwroot/chat.ui
@@ -1,74 +1,55 @@
 {
-  "widgettype": "VBox",
+  "widgettype": "PopupWindow",
   "options": {
-    "width": "100%",
-    "height": "100%"
+    "title": "{{params_kw.get('service_name')}} - {{params_kw.get('session_name')}}",
+    "width": "800px",
+    "height": "600px",
+    "auto_open": true,
+    "movable": true,
+    "resizable": true,
+    "modal": false
   },
   "subwidgets": [
     {
-      "widgettype": "HBox",
+      "widgettype": "VBox",
       "options": {
-        "height": "60px"
+        "width": "100%",
+        "height": "100%"
       },
       "subwidgets": [
         {
-          "widgettype": "Text",
-          "options": {
-            "text": "{{params_kw.get('service_name')}} - {{params_kw.get('session_name')}}",
-            "fontSize": "20px"
-          }
-        },
-        {
-          "widgettype": "Filler"
-        },
-        {
-          "widgettype": "Button",
-          "options": {
-            "text": "关闭会话"
-          },
-          "binds": [
+          "widgettype": "Filler",
+          "subwidgets": [
             {
-              "wid": "self",
-              "event": "click",
-              "actiontype": "method",
-              "target": "-@Modal",
-              "method": "dismiss"
+              "widgettype": "LLMOut",
+              "options": {
+                "data_url": "/api/hermes-web-cli/sessions/{{params_kw.get('session_id')}}/messages",
+                "auto_scroll": true
+              }
             }
           ]
-        }
-      ]
-    },
-    {
-      "widgettype": "Filler",
-      "subwidgets": [
+        },
         {
-          "widgettype": "LLMOut",
+          "widgettype": "HBox",
           "options": {
-            "data_url": "/api/hermes-web-cli/sessions/{{params_kw.get('session_id')}}/messages",
-            "auto_scroll": true
-          }
-        }
-      ]
-    },
-    {
-      "widgettype": "HBox",
-      "options": {
-        "height": "80px"
-      },
-      "subwidgets": [
-        {
-          "widgettype": "Input",
-          "options": {
-            "placeholder": "输入您的消息...",
-            "width": "100%",
-            "height": "60px"
+            "height": "80px"
           },
-          "binds": [
+          "subwidgets": [
             {
-              "wid": "self",
-              "event": "keydown",
-              "actiontype": "script",
-              "script": "if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); /* 发送消息逻辑 */ }"
+              "widgettype": "Input",
+              "options": {
+                "placeholder": "输入您的消息...",
+                "width": "100%",
+                "height": "60px"
+              },
+              "binds": [
+                {
+                  "wid": "self",
+                  "event": "keydown",
+                  "actiontype": "script",
+                  "script": "if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); /* 发送消息逻辑 */ }"
+                }
+              ]
             }
           ]
         }