Conversational bubbles
Chat inputs and outputs enable conversations between two entities, for example a user and a generative AI assistant.
On this page
Did this page help you?
Tell us more - optional
Building blocks
![Conversational bubbles building blocks](/__images/yvlrib0vb3vb/1cVTyCfodMHbJ6GJzAQivm/b5fa7840b583e4bead9380d35cd5fb42/patterns--gen-ai--conversational-bubbles--building-blocks--vr-light.png)
![Conversational bubbles building blocks](/__images/yvlrib0vb3vb/5szeS8LANm6N7x8vetXWh3/ff8b8abf9ca977ffdce9600120c6ebcb/patterns--gen-ai--conversational-bubbles--building-blocks--vr-dark.png)
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
oriconSvg
.
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
Follow the guidelines for popover.
Error
Follow the guidelines for error messages.