Text Messages
Joule / Components / Text Messages
Intro
Text messages display the conversation held between Joule and the user. They are categorized into messages from Joule and the user.
Text messages in compact Joule panel (left) and regular Joule panel (right)
Usage
Do
Use text messages to deliver most Joule-generated content, especially follow-up questions and simple information that doesn’t require visuals.
Don't
Don’t use text messages for complex information like objects, statuses, and tags. Use in-chat components like Object Cards instead.
- Ensure that user text messages appear on the appropriate side of the conversation and are appropriately aligned within their containers (right aligned within the conversation and container for LTR devices). This is vital for a cognitive understanding of the conversation.
- Adjust the shape of the user text messages dynamically. This helps group related text messages.
- Don’t use colors other than those defined in the Joule Foundations library. These colors distinguish between text messages from Joule and the user and are consistent with Joule branding.
- Don’t change the positioning, spacing, or expansion behavior of the text messages. These details are purposefully restricted.
Anatomy
Text Message from Joule
Text messages sent by Joule are left-aligned (for LTR devices) and are not contained in bubbles.
Anatomy of user text message
Text Message from User
Text messages sent by the user are right-aligned (for LTR devices) and contained in bubbles.
A. Bubble
The bubble contains the user text message content. Its position and spacing is determined by other elements within the Joule panel.
B. Text Message
Displays the user text message content.
C. Arm
The arm indicates the position of the user text message relative to other elements within the Joule panel.
Text messages from Joule (top) and text messages from the user (bottom)
Behavior and Interaction
Text Message Position
The text message position is relative to other elements in the Joule panel and influences the dynamic arm placement.
A. Single Text Message
For single text messages, no arm is shown.
B. Starting Message
For starting messages that are the first of a group of text messages, the arm is shown at the bottom of the bubble.
C. Center Message
For messages between other text messages, the arm is shown at the top and bottom of the bubble.
D. Ending Message
For ending messages that are the last in a group of text messages, the arm is shown at the top of the bubble.
Standalone text messages (left) and grouped text messages with arms (right)
Adaptive Design
Max Height
Text messages are limited to a maximum size to ensure readability across devices. However, to accommodate narrower screens, a minimum padding is maintained on Joule (right padding) and user (left padding) messages. This preserves the distinction between senders by preventing messages from spanning the full width of the device.
Maximum width text messages in narrow Joule panel (left) and expanded Joule panel (right)
Resources
Joule for Android: Text Messages
Joule for Web: Joule Web UI Kit Guidelines
Related Components/Patterns: Joule Layout, Input Field