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.
User input message

The message that users send to the conversation from the input field.

B.
Generative AI output response

The message that users receive from generative AI while conversing with it.

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

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 conversation 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

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

  • Always provide visual distinction between conversation bubbles for user input and generative AI output messages.
  • Add avatars to support content readability, and differentiate entities in a conversational exchange.
  • Conversational bubbles can expand to the full width of the corresponding container, or wrap based on text length. Choose the best representation depending on your use-case.
  • We recommend to align the conversational bubbles to the left of the respective container.
  • To show that generative AI is generating a response, follow generative AI loading states guidelines.

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