metabuilder/packages/irc_webchat/seed/layout.json

{
  "id": "irc_webchat_layout",
  "type": "Card",
  "props": {
    "className": "h-[500px] flex flex-col"
  },
  "children": [
    {
      "id": "header",
      "type": "CardHeader",
      "props": {
        "className": "border-b pb-3"
      },
      "children": [
        {
          "id": "title_row",
          "type": "Flex",
          "props": {
            "className": "items-center justify-between"
          },
          "children": [
            {
              "id": "channel_title",
              "type": "Typography",
              "props": {
                "variant": "h6",
                "text": "#{channelName}"
              }
            },
            {
              "id": "user_count",
              "type": "Badge",
              "props": {
                "variant": "secondary",
                "text": "{onlineUsersCount} online"
              }
            }
          ]
        }
      ]
    },
    {
      "id": "messages_area",
      "type": "ScrollArea",
      "props": {
        "className": "flex-1 p-4"
      },
      "children": [
        {
          "id": "message_list",
          "type": "Stack",
          "props": {
            "spacing": 1,
            "dataSource": "messages"
          },
          "itemTemplate": {
            "id": "message_item",
            "type": "Box",
            "props": {
              "className": "font-mono text-sm"
            },
            "children": [
              {
                "id": "timestamp",
                "type": "Typography",
                "props": {
                  "variant": "caption",
                  "color": "text.secondary",
                  "text": "[{formattedTime}]"
                }
              },
              {
                "id": "username",
                "type": "Typography",
                "props": {
                  "variant": "body2",
                  "component": "span",
                  "fontWeight": "bold",
                  "text": " <{username}> "
                }
              },
              {
                "id": "message_text",
                "type": "Typography",
                "props": {
                  "variant": "body2",
                  "component": "span",
                  "text": "{message}"
                }
              }
            ]
          }
        }
      ]
    },
    {
      "id": "input_area",
      "type": "Box",
      "props": {
        "className": "border-t p-4"
      },
      "children": [
        {
          "id": "input_row",
          "type": "Flex",
          "props": {
            "gap": 2
          },
          "children": [
            {
              "id": "message_input",
              "type": "TextField",
              "props": {
                "fullWidth": true,
                "size": "small",
                "placeholder": "Type a message... (/help for commands)",
                "value": "{inputMessage}",
                "onKeyPress": "handleKeyPress",
                "onChange": "updateInputMessage"
              }
            },
            {
              "id": "send_button",
              "type": "Button",
              "props": {
                "variant": "contained",
                "onClick": "handleSendMessage",
                "text": "Send"
              }
            }
          ]
        }
      ]
    }
  ]
}