{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "chat",
  "name": "Chat",
  "category": "Data display",
  "description": "Message bubbles for conversations and assistants, with avatars, timestamps and a typing state.",
  "tags": [
    "chat",
    "message",
    "bubble",
    "conversation",
    "assistant",
    "ai chat",
    "messenger"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "chat",
      "messages",
      "ai assistant conversation",
      "support chat",
      "message bubbles"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/chat",
  "markdownUrl": "https://mian.ro/ai/components/chat.md",
  "classes": [
    {
      "name": "mn-chat",
      "description": "The conversation."
    },
    {
      "name": "mn-chat-msg · mn-chat-end",
      "description": "A message; mn-chat-end for the current user."
    },
    {
      "name": "mn-chat-bubble",
      "description": "The text. Accepts colour roles."
    },
    {
      "name": "mn-chat-meta",
      "description": "Name, time or status."
    },
    {
      "name": "mn-chat-typing",
      "description": "A bubble holding mn-dots."
    }
  ],
  "accessibility": [
    "Use role=\"log\" with aria-live=\"polite\" for a live conversation so new messages are read out.",
    "Say who sent each message in text (the meta line or a visually hidden span), not only through position or colour."
  ],
  "examples": [
    {
      "title": "Conversation",
      "description": null,
      "html": "<div class=\"mn-chat\" role=\"log\" aria-label=\"Conversation\" style=\"max-width:32rem\">\n  <div class=\"mn-chat-msg\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">面</span><div class=\"mn-chat-bubble\">Which noodle fits a finance dashboard?</div><div class=\"mn-chat-meta\">Mian assistant · 09:41</div></div>\n  <div class=\"mn-chat-msg mn-chat-end\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">AP</span><div class=\"mn-chat-bubble\">Something calm and precise.</div><div class=\"mn-chat-meta\">You · 09:42</div></div>\n  <div class=\"mn-chat-msg\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">面</span><div class=\"mn-chat-bubble\">Try Kalguksu: a strict grid, tabular numbers, one green accent.</div><div class=\"mn-chat-meta\">Mian assistant · 09:42</div></div>\n  <div class=\"mn-chat-msg\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">面</span><div class=\"mn-chat-bubble mn-chat-typing\" aria-label=\"Typing\"><span class=\"mn-dots\"><span></span><span></span><span></span></span></div></div>\n</div>"
    }
  ],
  "css": ".mn-chat { display: grid; gap: .75rem; }\n.mn-chat-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: end; max-width: min(34rem, 88%); }\n.mn-chat-msg > .mn-avatar { grid-row: span 2; align-self: end; }\n.mn-chat-end { justify-self: end; grid-template-columns: minmax(0, 1fr) auto; }\n.mn-chat-end > .mn-avatar { grid-column: 2; grid-row: 1 / span 2; }\n.mn-chat-end > :not(.mn-avatar) { grid-column: 1; justify-self: end; }\n.mn-chat-bubble {\n  padding: .6rem .85rem; max-width: 100%;\n  border-radius: calc(var(--mn-radius-box) + 2px) calc(var(--mn-radius-box) + 2px) calc(var(--mn-radius-box) + 2px) 4px;\n  background: var(--mn-surface-2); color: var(--mn-fg);\n  font-size: var(--mn-text-sm); line-height: 1.5; overflow-wrap: anywhere;\n}\n.mn-chat-end .mn-chat-bubble { border-radius: calc(var(--mn-radius-box) + 2px) calc(var(--mn-radius-box) + 2px) 4px calc(var(--mn-radius-box) + 2px); background: var(--_c, var(--mn-primary)); color: var(--_cf, var(--mn-primary-fg)); }\n.mn-chat-meta { margin-top: .25rem; font-size: .6875rem; color: var(--mn-muted); }\n.mn-chat-typing { display: inline-flex; gap: 3px; padding: .75rem .85rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/chat.json"
  }
}