Develop

Styles

A thread is a .tng-chat-messages wrapper holding .tng-user-message and .tng-bot-message children — each self-aligns, so you never set alignment yourself. Place the thread on a subtle surface (here background-subtle) so the user bubble reads in the default scheme. Message text is the Body 5 style (tng-text-body is-5).

<div
  class="tng-chat-messages"
  role="log"
  aria-live="polite"
  aria-atomic="false"
>
  <div class="tng-user-message">
    <p class="tng-text-body is-5">
      Hi, I'm deciding between the Lexus UX and the LBX. Can you help
      me compare them?
    </p>
  </div>
  <div class="tng-bot-message">
    <p class="tng-text-body is-5">
      <i class="tng-icon icon-ai-sparkle" aria-hidden="true"></i>
      Can I clarify the size of the pram so that I can give you a more
      precise recommendation?
    </p>
    <ul class="tng-bot-message-options">
      <li>
        <button type="button" class="tng-chip is-suggestion">
          <span>
            What are the different grades available for the Lexus LBX?
          </span>
          <i
            class="tng-icon icon-ui-arrow-right"
            aria-hidden="true"
          ></i>
        </button>
      </li>
      <li>
        <button type="button" class="tng-chip is-suggestion">
          <span>How do the running costs compare?</span>
          <i
            class="tng-icon icon-ui-arrow-right"
            aria-hidden="true"
          ></i>
        </button>
      </li>
    </ul>
  </div>
</div>

Default
Contrast

Hi, I'm deciding between the Lexus UX and the LBX. Can you help me compare them?

Can I clarify the size of the pram so that I can give you a more precise recommendation?

User message

A bubble aligned to the end of the thread. The surface and text colour ride the scheme; the bottom corner on the user’s side is squared to anchor the bubble.

<div class="tng-chat-messages">
  <div class="tng-user-message">
    <p class="tng-text-body is-5">
      Hi, I'm deciding between the Lexus UX and the LBX. Can you help
      me compare them?
    </p>
  </div>
</div>

Hi, I'm deciding between the Lexus UX and the LBX. Can you help me compare them?

Bot message

Open text aligned to the start, preceded by the decorative sparkle. No bubble.

<div class="tng-chat-messages">
  <div class="tng-bot-message">
    <p class="tng-text-body is-5">
      <i class="tng-icon icon-ai-sparkle" aria-hidden="true"></i>
      Can I clarify the size of the pram so that I can give you a more
      precise recommendation?
    </p>
  </div>
</div>

Can I clarify the size of the pram so that I can give you a more precise recommendation?

Suggestions

Follow a bot message with a .tng-bot-message-options list of Chip buttons. Each is a real <button>, so it’s keyboard-focusable and announced as part of a list.

<div class="tng-chat-messages">
  <div class="tng-bot-message">
    <p class="tng-text-body is-5">
      <i class="tng-icon icon-ai-sparkle" aria-hidden="true"></i>
      Here are a few things I can help with.
    </p>
    <ul class="tng-bot-message-options">
      <li>
        <button type="button" class="tng-chip is-suggestion">
          <span>Compare the UX and the LBX</span>
          <i
            class="tng-icon icon-ui-arrow-right"
            aria-hidden="true"
          ></i>
        </button>
      </li>
      <li>
        <button type="button" class="tng-chip is-suggestion">
          <span>Book a test drive</span>
          <i
            class="tng-icon icon-ui-arrow-right"
            aria-hidden="true"
          ></i>
        </button>
      </li>
      <li>
        <button type="button" class="tng-chip is-suggestion">
          <span>See current offers</span>
          <i
            class="tng-icon icon-ui-arrow-right"
            aria-hidden="true"
          ></i>
        </button>
      </li>
    </ul>
  </div>
</div>

Here are a few things I can help with.