# Chat

> A chat shows a conversation as a column of message bubbles. Use it for direct messages, support conversations, or comments on a record.

Build a conversation view with message bubbles, sender info, and a typing indicator.

Source: https://docs.tabler.io/ui/components/chat

---

## Overview

Wrap the conversation in `chat`, and put each message row in `chat-bubbles`. A message itself is a `chat-bubble`, with `chat-bubble-title` for the sender's name and time, and `chat-bubble-body` for the text.

Add `chat-bubble-me` to bubbles the current user sent. Tabler tints them, and you place them on the other side of the row to tell them apart from replies.

```html
<div class="chat">
  <div class="chat-bubbles">
    <div>
      <div class="row align-items-end">
        <div class="col-auto">
          <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
        </div>
        <div class="col-auto">
          <div class="chat-bubble">
            <div class="chat-bubble-title">
              <div class="row">
                <div class="col chat-bubble-author">Alice Marlin</div>
                <div class="col-auto chat-bubble-date">10:24</div>
              </div>
            </div>
            <div class="chat-bubble-body">
              <p>Hey, are you free for a quick call?</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="row align-items-end justify-content-end">
        <div class="col-auto">
          <div class="chat-bubble chat-bubble-me">
            <div class="chat-bubble-title">
              <div class="row">
                <div class="col chat-bubble-author">You</div>
                <div class="col-auto chat-bubble-date">10:26</div>
              </div>
            </div>
            <div class="chat-bubble-body">
              <p>Sure, give me five minutes.</p>
            </div>
          </div>
        </div>
        <div class="col-auto">
          <span class="avatar" style="background-image: url(/static/avatars/002m.jpg)"></span>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Usage

### Message order

Put the avatar and the bubble in the order you want them to read: avatar first for messages from other people, bubble first for `chat-bubble-me` messages. Add `justify-content-end` to the row for `chat-bubble-me`, so the bubble and avatar move to the far side.

### Typing indicator

While you wait for a reply, show a bubble with `animated-dots` after the text - it types itself out and loops.

```html
<div class="chat-bubble">
  <div class="chat-bubble-body">
    <p class="text-secondary fst-italic mb-0">Alice is typing <span class="animated-dots"></span>
    </p>
  </div>
</div>
```

### Image or GIF in a message

Add an image inside `chat-bubble-body`, below the text.

```html
<div class="chat">
  <div class="chat-bubble">
    <div class="chat-bubble-body">
      <p>Check this out</p>
      <div class="mt-2">
        <img src="/static/photos/cup-of-coffee-and-an-open-book.jpg" alt class="rounded img-fluid" />
      </div>
    </div>
  </div>
</div>
```

## Examples

### Chat window

A card with a scrollable message list and a message input in the footer.

```html
<div class="card" style="max-width: 28rem;">
  <div class="card-header">
    <div class="row align-items-center flex-fill">
      <div class="col-auto">
        <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
      </div>
      <div class="col">
        <div>Alice Marlin</div>
        <div class="text-secondary">Online</div>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="chat">
      <div class="chat-bubbles">
        <div>
          <div class="row align-items-end">
            <div class="col-auto">
              <span class="avatar avatar-xs" style="background-image: url(/static/avatars/016f.jpg)"></span>
            </div>
            <div class="col-auto">
              <div class="chat-bubble">
                <div class="chat-bubble-body">
                  <p>Hey, are you free for a quick call?</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="row align-items-end justify-content-end">
            <div class="col-auto">
              <div class="chat-bubble chat-bubble-me">
                <div class="chat-bubble-body">
                  <p>Sure, give me five minutes.</p>
                </div>
              </div>
            </div>
            <div class="col-auto">
              <span class="avatar avatar-xs" style="background-image: url(/static/avatars/002m.jpg)"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <div class="input-group input-group-flat">
      <input type="text" class="form-control" placeholder="Type message" />
      <span class="input-group-text">
        <button type="button" class="btn btn-icon" aria-label="Send message">
          <!-- Download SVG icon from http://tabler.io/icons/icon/send -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M10 14l11 -11" />
            <path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5" />
          </svg>
        </button>
      </span>
    </div>
  </div>
</div>
```

## Accessibility

- Keep messages in reading order in the markup. Screen reader users go through the conversation top to bottom, the same as sighted users see it top to bottom.
- Do not rely on bubble color or side alone to show who sent a message - keep `chat-bubble-title` with the sender's name, or repeat it for assistive technology with a visually hidden label.
- Label icon-only controls in the message input, for example the send button, with `aria-label`.
- The typing indicator is an animated "…" - pair it with real text such as "Alice is typing", so the state does not depend on the animation alone.