{
  "widgettype": "VBox",
  "options": {
    "width": "100%",
    "height": "100%",
    "padding": "20px"
  },
  "subwidgets": [
    {
      "widgettype": "Text",
      "options": {
        "text": "Session Details",
        "fontSize": "24px",
        "fontWeight": "bold",
        "marginBottom": "20px",
        "color": "#F8FAFC"
      }
    },
    {
      "widgettype": "DataViewer",
      "id": "session-messages",
      "options": {
        "data_url": "/hermes-web-cli/session_messages/?session_id={{query.session_id}}",
        "page_rows": 50,
        "row_options": {
          "fields": [
            {
              "name": "role",
              "label": "Role",
              "uitype": "str"
            },
            {
              "name": "content",
              "label": "Message",
              "uitype": "str"
            },
            {
              "name": "timestamp",
              "label": "Time",
              "uitype": "date"
            }
          ]
        }
      }
    },
    {
      "widgettype": "Form",
      "id": "message-form",
      "options": {
        "fields": [
          {
            "name": "message",
            "label": "Send Message",
            "uitype": "textarea",
            "placeholder": "Type your message here..."
          }
        ],
        "marginTop": "20px"
      }
    },
    {
      "widgettype": "HBox",
      "options": {
        "width": "100%",
        "height": "auto",
        "marginTop": "10px",
        "gap": "10px"
      },
      "subwidgets": [
        {
          "widgettype": "Button",
          "options": {
            "icon": "fa fa-paper-plane",
            "backgroundColor": "#22C55E",
            "color": "#FFFFFF",
            "border": "none",
            "borderRadius": "6px",
            "padding": "10px 20px",
            "label": "Send"
          },
          "binds": [
            {
              "wid": "self",
              "event": "click",
              "actiontype": "script",
              "script": "const formData = bricks.app.get_widget('message-form').get_data(); const sessionId = '{{query.session_id}}'; if (formData.message) { fetch(`/hermes-web-cli/session_messages/?session_id=${sessionId}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: formData.message }) }).then(() => { bricks.app.get_widget('session-messages').refresh(); bricks.app.get_widget('message-form').clear(); }); }"
            }
          ]
        },
        {
          "widgettype": "Button",
          "options": {
            "backgroundColor": "#64748B",
            "color": "#FFFFFF",
            "border": "none",
            "borderRadius": "6px",
            "padding": "10px 20px",
            "label": "Back to Sessions"
          },
          "binds": [
            {
              "wid": "self",
              "event": "click",
              "actiontype": "urlwidget",
              "target": "main-content",
              "options": {
                "url": "{{entire_url('sessions.ui')}}"
              },
              "mode": "replace"
            }
          ]
        }
      ]
    }
  ]
}