{
"name": "chat-page-shell",
"kind": "page",
"primary": "article",
"page": "/catalog/page-shells/app/chat-page/chat-page.contents.html",
"slots": [
{
"name": "sidebar",
"tagName": "aside",
"html": "\n \n \n \n \n Engineering\n 12 messages\n \n \n \n \n \n \n "
},
{
"name": "header",
"tagName": "header",
"html": "#engineering\n \n \n \n "
},
{
"name": "messages",
"tagName": "section",
"html": "\n \n \n \n \n Hey team, the deploy is ready for review.\n \n \n \n \n \n \n On it — checking the staging logs now.\n \n \n \n \n "
},
{
"name": "input",
"tagName": "footer",
"html": "\n \n \n \n "
}
],
"nested": [],
"attrs": {},
"html": "\n \n\n \n \n #engineering\n \n \n \n \n \n\n \n \n \n \n \n \n Hey team, the deploy is ready for review.\n \n \n \n \n \n \n On it — checking the staging logs now.\n \n \n \n \n \n \n\n \n \n",
"source": "catalog/page-shells/app/chat-page/chat-page.contents.html",
"metadata": {
"domain": "agent",
"description": "Chat application page layout — sidebar (conversation list) + main chat thread + footer input.",
"keywords": [
"chat",
"page",
"conversation",
"thread",
"sidebar",
"messages",
"bubbles",
"agent",
"assistant",
"ai",
"chatbot"
]
},
"captured_at": "2026-06-07T19:28:13.657Z",
"template": [
{
"id": "text",
"component": "Text",
"size": "lg",
"strong": true,
"textContent": "Conversations"
},
{
"id": "header",
"component": "Header",
"children": [
"text"
]
},
{
"id": "text-2",
"component": "Text",
"strong": true,
"textContent": "Engineering"
},
{
"id": "text-3",
"component": "Text",
"color": "subtle",
"size": "sm",
"textContent": "12 messages"
},
{
"id": "section-2",
"component": "Section",
"children": [
"column"
]
},
{
"id": "column",
"component": "Column",
"children": [
"text-2",
"text-3"
]
},
{
"id": "card",
"component": "Card",
"padding": "sm",
"variant": "soft",
"children": [
"section-2"
]
},
{
"id": "text-4",
"component": "Text",
"strong": true,
"textContent": "Design"
},
{
"id": "text-5",
"component": "Text",
"color": "subtle",
"size": "sm",
"textContent": "5 messages"
},
{
"id": "section-3",
"component": "Section",
"children": [
"column-2"
]
},
{
"id": "column-2",
"component": "Column",
"children": [
"text-4",
"text-5"
]
},
{
"id": "card-2",
"component": "Card",
"padding": "sm",
"variant": "soft",
"children": [
"section-3"
]
},
{
"id": "stack",
"component": "Stack",
"children": [
"card",
"card-2"
]
},
{
"id": "section",
"component": "Section",
"children": [
"stack"
]
},
{
"id": "sidebar",
"component": "Sidebar",
"data-chunk-slot": "sidebar",
"children": [
"header",
"section"
]
},
{
"id": "text-6",
"component": "Text",
"size": "lg",
"strong": true,
"textContent": "#engineering"
},
{
"id": "search",
"component": "Button",
"aria-label": "Search",
"icon": "search",
"size": "sm",
"variant": "ghost"
},
{
"id": "settings",
"component": "Button",
"aria-label": "Settings",
"icon": "gear",
"size": "sm",
"variant": "ghost"
},
{
"id": "row",
"component": "Row",
"gap": "2",
"children": [
"search",
"settings"
]
},
{
"id": "header-2",
"component": "Header",
"data-chunk-slot": "header",
"children": [
"text-6",
"row"
]
},
{
"id": "avatar",
"component": "Avatar",
"size": "sm",
"src": "/avatar-1.png"
},
{
"id": "text-7",
"component": "Text",
"textContent": "Hey team, the deploy is ready for review."
},
{
"id": "section-6",
"component": "Section",
"children": [
"column-3"
]
},
{
"id": "column-3",
"component": "Column",
"children": [
"text-7"
]
},
{
"id": "card-3",
"component": "Card",
"padding": "sm",
"variant": "soft",
"children": [
"section-6"
]
},
{
"id": "row-2",
"component": "Row",
"align": "start",
"gap": "2",
"children": [
"avatar",
"card-3"
]
},
{
"id": "text-8",
"component": "Text",
"textContent": "On it — checking the staging logs now."
},
{
"id": "section-7",
"component": "Section",
"children": [
"column-4"
]
},
{
"id": "column-4",
"component": "Column",
"children": [
"text-8"
]
},
{
"id": "card-4",
"component": "Card",
"padding": "sm",
"variant": "primary",
"children": [
"section-7"
]
},
{
"id": "avatar-2",
"component": "Avatar",
"size": "sm",
"src": "/avatar-2.png"
},
{
"id": "row-3",
"component": "Row",
"align": "start",
"gap": "2",
"justify": "end",
"children": [
"card-4",
"avatar-2"
]
},
{
"id": "stack-2",
"component": "Stack",
"children": [
"row-2",
"row-3"
]
},
{
"id": "section-5",
"component": "Section",
"data-chunk-slot": "messages",
"children": [
"stack-2"
]
},
{
"id": "add-attachment",
"component": "Button",
"aria-label": "Add attachment",
"icon": "plus",
"variant": "ghost"
},
{
"id": "input",
"component": "Input",
"placeholder": "Type a message…"
},
{
"id": "send-message",
"component": "Button",
"aria-label": "Send message",
"icon": "paper-plane",
"variant": "primary"
},
{
"id": "row-4",
"component": "Row",
"align": "center",
"gap": "2",
"children": [
"add-attachment",
"input",
"send-message"
]
},
{
"id": "footer",
"component": "Footer",
"data-chunk-slot": "input",
"children": [
"row-4"
]
},
{
"id": "section-4",
"component": "Section",
"children": [
"header-2",
"section-5",
"footer"
]
},
{
"id": "column-5",
"component": "Column",
"children": [
"sidebar",
"section-4"
]
},
{
"id": "section-8",
"component": "Section",
"children": [
"column-5"
]
},
{
"id": "root",
"component": "Card",
"children": [
"section-8"
]
}
]
}