Skip to content

Design

Chat messages facilitate the exchange of information between an AI assistant and a user in a structured, readable format. The thread distinguishes the two speakers by side and treatment: the user’s input sits in a bubble at the end, while the assistant’s reply is open text at the start, marked by a sparkle and optionally followed by suggestions.

Anatomy

Section titled “Anatomy”

Can you help me compare the UX and the LBX?

Sure — what matters most to you?

  1. Chat Messages
  2. User message
  3. Bot message
  4. AI icon
  5. Suggestions

When to use it

Section titled “When to use it”

Use chat messages when:

  • You’re building a chatbot or virtual-assistant interface.
  • You need to display a real-time dialogue between the system and the user.
  • The assistant presents information, recommendations, or follow-up questions, and may offer the user a few ready-made replies.

Avoid chat messages when:

  • The content is a static block of copy with no back-and-forth — use the content or list components.
  • You need a form or a single prompt-and-response — a field with a label is clearer than a faked conversation.

Properties

Section titled “Properties”

Type

Two types, set by which class you reach for. The user message is a bubble aligned to the end of the thread; the bot message is open text aligned to the start. The thread container aligns each automatically — there is no alignment modifier to set.

AI icon

A bot message is preceded by a decorative sparkle icon that identifies the content as AI-generated. It is purely visual — it carries no text and is hidden from assistive technology.

Suggestions

A bot message can be followed by a short list of Chip suggestions — ready-made replies the user can pick to continue the conversation. Keep the list short; they’re a shortcut, not a menu.

Platform considerations

Section titled “Platform considerations”

Desktop

Messages cap at a readable line length (≈ 558px) and never span the full width of a wide panel, so long replies stay scannable. Place the thread inside a panel with a subtle surface so the user bubble reads.

Tablet

The same width cap applies. Suggestions wrap onto two lines as the thread narrows — that’s expected; don’t truncate them.

Mobile

Messages narrow with the thread and keep a margin on the far side so the user / bot sides stay legible. The bubble’s squared corner stays on the user side, mirroring in right-to-left layouts.

Best practices

Section titled “Best practices”

The thread is transparent — it inherits the surface it’s placed on. Give it a subtle background (a chat panel) so the user bubble separates from the page in the default scheme.

Do

Keep messages short and front-load the answer. Use a handful of suggestions at most, phrased as the user would say them. Let the thread sit on a subtle surface so the bubbles read.

Don't

Don’t place the thread directly on a pure-white page in the default scheme — the white user bubble disappears. Don’t pad the thread with dozens of suggestions, and don’t use it for one-shot prompts where a form field fits better.

Content guidelines

Section titled “Content guidelines”

Chat copy should feel conversational, efficient, and human, even when it comes from a bot.

  • Tone and voice: Be human, not robotic — use natural language and active voice. Instead of “Processing request”, say “Give me a moment while I look that up.”
  • Clarity: Front-load the most important information or the answer at the beginning of the message. Keep messages short; break long explanations into separate bubbles.
  • Punctuation: Avoid ALL CAPS (use bolding for emphasis), limit emoji, and skip multiple exclamation or question marks.
  • Perspective: The bot refers to itself as “I” and the user as “you”.