Conversational bubbles

Chat inputs and outputs enable conversations between two entities, for example a user and a generative AI assistant.

Get design library

On this page

Building blocks

Conversational bubbles building blocksConversational bubbles building blocks

A.
Outgoing user message

The message that users send to the conversation from the input field. Use an outgoing chat bubble to display a user input message.

B.
Incoming response from generative AI

The message that users receive from generative AI while conversing with it. Use an incoming chat bubble to display a generative AI output message.

C.
Avatar

Visual representation of the author's identity engaged in the conversation. Use the avatar to represent both the user and generative AI:

  • Use default avatar to represent the user. If your product supports user profiles, you can display user initials in the Avatar instead.

  • Use generative AI avatar to represent generative AI. To display a product specific icon for generative AI, provide the iconURL or iconSvg.

D.
Popover - optional

A popover can be used to display citations to sources inline.

E.
Expandable section - optional

A generative AI output can include sources and citations. Sources are general references and can be listed in an expandable section at the bottom of the content area in a chat bubble. Citations are direct quotations displayed inline, and can provide a link to the source link directly on the citation, or via popover.

States

Generating a response

Follow the guidelines for generative AI loading states.

Error

When users encounter an error display an error alert and include an action to recover, for example, try again. Types of error that can occur are, for example, access denied, server side error, connection error. Follow the guidelines for error messages.

General guidelines

Do

  • We recommend to align the conversational bubbles to the left of the respective container.

Writing guidelines

General writing guidelines

  • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

  • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

  • Use present-tense verbs and active voice.

  • Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.

  • Avoid directional language.

    • For example: use previous not above, use following not below.

  • Use device-independent language.

    • For example: use choose or select not click.

Component-specific guidelines

Terminology

  • Introducing the AI: generative AI assistant is the approved term for introducing and referring to the AI, and generative AI to refer to the experience.

  • User queries: use submit as the label or reference term when a user is making a choice, query, or request.

  • AI replies: refer to AI replies as responses, not answers.

Popover

Error