Intro

The text message is a primary user interface component for the user to interact with the digital assistant. The text area displays requests from the user and responses from the digital assistant.

Text Message in Light Theme
Text Message in Light Theme
Text Message in Dark Theme
Text Message in Dark Theme

Usage

These are some best practices when using text messages in the digital assistant.

Dos

  • Follow the guidelines for creating appropriate messages.
  • Match the user’s request (utterance) to the corresponding digital assistant’s intent.

Don’ts

  • Don’t use this the text message if you have a hierarchyin the digital assistant’s response. Instead, use the Formatted Text component for this purpose.

Variations

Text messages in the conversation stream are: Messages from the User or from Messages from the Digital Assistant.

A. Messages from the User

The chat bubble represents the user user’s request or response. The user can type in text or use voice input. The user can delete their message from the conversation stream.

B. Messages from the Digital Assistant

The message from digital assistant is generated from artificial intelligence. The digital assistant’s message is based on the current context and the user’s request.

Text Message from User and Digital Assistant
Text Message from User and Digital Assistant


Layout

Text Messages from the user are always on the on the right in a blue chat bubble. Text Messages from the digital assistant are usually on the left. The text content is left-aligned.

Text Message Layout
Text Message Layout


Behavior and Interactions

These are best practices for a text message in the digital assistant.

Error Handling

When there is a problem and the user is disconnected from the digital assistant, a message displays to let the user know there is a connection problem. There are two types of errors: a connection error and a fail to send error.

Connection Error

A connection error happens when the digital assistant client fails to reach the server. When this happens, the digital assistant:

  • “Reconnecting”: displays this message while it tries to reconnect to the server. During this time, the user can’t interact with the digital assistant.
  • “Failed to reconnect Try again”: displays this message if it can’t reconnect.


Digital Assistant Tries to Reconnect to Server
Digital Assistant Tries to Reconnect to Server
Digital Assistant Can't Reconnect to Server
Digital Assistant Can't Reconnect to Server


Fail to Send Error

Fail to Send happens when a user sent a message but the system could not receive or process the message for some reason. In this case, the message will rebound, and an option to resend it will appear.

User's Message Can't be Sent
User's Message Can't be Sent


Delete Message

When the user hovers over one of their text messages, the user can delete their message to the digital assistant. The deleted message is deleted from conversation stream.

User Deletes Message
User Deletes Message


Specifications

These specifications apply to the text message.



Responsiveness

Text message width is proportional to the panel width and it can expand until it reaches the maximum width. The same rules apply to both user messages and system messages. These are the sizing specifications for screen sizes:

A. For XL, L, M sizes (<600px)

  • max-width: 28rem (448px)

B. For S size (<600px)

  • max-width: (current panel width – layout margin*2)*0.75
A. For XL, L, M sizes (>600px)
A. For XL, L, M sizes (>600px)
B. For S size (<600px)
B. For S size (<600px)


A. For XL, L, M sizes (>600px)
A. For XL, L, M sizes (>600px)
B. For S size (<600px)
B. For S size (<600px)


Spacing

Text Message is considered as one individual component which means that each Text Message has the same spacing in between.

A. Padding and margin between text messages

This is the padding and margin between the text messages. Follow the message guidlelines for Fiori 3.

B. Padding between system message and card

This padding between a system message and any kind of card (media card, carousel, object card, etc.) is 0.75 rem.



Padding and Margin Between Text Messages
Padding and Margin Between Text Messages
Padding Between System Message and Card
Padding Between System Message and Card


Colors

These color specifications apply to the text message.

Color Specifications for Message Text
Color Specifications for Message Text