{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat",
  "type": "registry:ui",
  "title": "Chat (MIAN)",
  "description": "Message bubbles for conversations and assistants, with avatars, timestamps and a typing state.",
  "categories": [
    "data display",
    "chat",
    "message",
    "bubble",
    "conversation"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/chat.css",
      "type": "registry:file",
      "target": "mian/components/chat.css",
      "content": ".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; }"
    },
    {
      "path": "mian/examples/chat.html",
      "type": "registry:file",
      "target": "mian/examples/chat.html",
      "content": "<!-- Conversation -->\n<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>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/chat",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-chat",
        "mn-chat-msg · mn-chat-end",
        "mn-chat-bubble",
        "mn-chat-meta",
        "mn-chat-typing"
      ],
      "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."
      ],
      "intents": [
        "chat",
        "messages",
        "ai assistant conversation",
        "support chat",
        "message bubbles"
      ]
    }
  }
}