{
  "name": "ai-streaming-response",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/v050-agent-blocks/v050-agent-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section>\n    <row-ui gap=\"3\" align=\"start\">\n      <avatar-ui text=\"AI\" size=\"md\"></avatar-ui>\n      <col-ui gap=\"2\">\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\">\n              <text-ui>Based on the v0.4.9 corpus, the auto-engine routes intents through three retrieval tiers in sequence: zettel verbatim, free-form composition, and monolithic-pro generation.</text-ui>\n              <text-ui>Each tier has a different cost-latency-coverage profile<text-ui color=\"accent\">|</text-ui></text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <row-ui gap=\"2\" align=\"center\" wrap>\n          <text-ui size=\"sm\" color=\"subtle\">Sources:</text-ui>\n          <tag-ui text=\"auto-engine.md\" interactive size=\"sm\"></tag-ui>\n          <tag-ui text=\"v0.5.0 changelog\" interactive size=\"sm\"></tag-ui>\n          <tag-ui text=\"generator-adapter.js:614\" interactive size=\"sm\"></tag-ui>\n        </row-ui>\n      </col-ui>\n    </row-ui>\n  </section>",
  "source": "catalog/ui-patterns/v050-agent-blocks/v050-agent-blocks.contents.html",
  "metadata": {
    "domain": "agent",
    "description": "AI assistant message bubble with streaming text indicator + assistant avatar + cited sources strip.",
    "keywords": [
      "ai",
      "streaming",
      "response",
      "message",
      "bubble",
      "assistant",
      "chat",
      "llm",
      "typing",
      "tokens",
      "stream",
      "citations"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "avatar",
      "component": "Avatar",
      "size": "md",
      "text": "AI"
    },
    {
      "id": "text",
      "component": "Text",
      "textContent": "Based on the v0.4.9 corpus, the auto-engine routes intents through three retrieval tiers in sequence: zettel verbatim, free-form composition, and monolithic-pro generation."
    },
    {
      "id": "text-3",
      "component": "Text",
      "color": "accent",
      "textContent": "|"
    },
    {
      "id": "text-2",
      "component": "Text",
      "textContent": "Each tier has a different cost-latency-coverage profile",
      "children": [
        "text-3"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "2",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Sources:"
    },
    {
      "id": "tag",
      "component": "Tag",
      "size": "sm",
      "text": "auto-engine.md"
    },
    {
      "id": "tag-2",
      "component": "Tag",
      "size": "sm",
      "text": "v0.5.0 changelog"
    },
    {
      "id": "tag-3",
      "component": "Tag",
      "size": "sm",
      "text": "generator-adapter.js:614"
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "wrap": true,
      "children": [
        "text-4",
        "tag",
        "tag-2",
        "tag-3"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "2",
      "children": [
        "card",
        "row-2"
      ]
    },
    {
      "id": "row",
      "component": "Row",
      "align": "start",
      "gap": "3",
      "children": [
        "avatar",
        "column"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "row"
      ]
    }
  ]
}