Text Messages

Do

• Ensure that text messages appear on the appropriate side along with their respective color depending on the sender (left from Joule, right from user). This is vital for a cognitive understanding of the conversation.
• Adjust the shape of the text messages dynamically. This helps group related information. See the position variants section for more details.

Don't

• 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. See the Joule Layout guidelines for more information.

A. Bubble

The bubble contains the text message content. Its position and spacing is determined by other elements within the Joule panel.

B. Text Message

Depending on the sender, the text message displays either what was sent by the user or responses from Joule.

C. Arm

The arm indicates the sender of the message and the position of the bubble relative to other elements in the Joule panel.

Text message anatomy

Text Message from Joule

Text messages sent by Joule are left-aligned and in a grey bubble.

Text Message from User

Text messages sent by the user are right-aligned and in a purple bubble.

Text messages from Joule (top) and text messages from the user (bottom)

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)

Max Width

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)