# Chat · MIAN

Message bubbles for conversations and assistants, with avatars, timestamps and a typing state.

- Id: `chat` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/chat
- Use for: chat, messages, ai assistant conversation, support chat, message bubbles.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-chat`: The conversation.
- `mn-chat-msg · mn-chat-end`: A message; mn-chat-end for the current user.
- `mn-chat-bubble`: The text. Accepts colour roles.
- `mn-chat-meta`: Name, time or status.
- `mn-chat-typing`: 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

### Conversation

```html
<div class="mn-chat" role="log" aria-label="Conversation" style="max-width:32rem">
  <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>
  <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>
  <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>
  <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>
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/chat/source