Overview

Conversational style is the most common way of interacting with Generative AI. The conversation is a series of requests made by the person and responses made by the AI. Like many chat apps, this conversational style is often represented in chat bubbles.

AI Chat Bubbles

When to Use

Using Chat Bubbles is not always required when interacting with Generative AI. Direct contextualized "Magic Buttons" or prompts that affect the product canvas are often suitable alternatives.

false

Recommended

Use to facilitate a conversation with the AI.
Use to prompt engineer the AI to contextualize the AI interaction.
Use to refine AI-generated responses or objects.
Use to keep a history of the conversations.

dont

false

Not Recommended

Avoid using when the AI prompt is highly contextualized. Use "Magic Button" instead.
Avoid using when triggering a response form a "Magic Button".
Avoid using when generated objects are directly placed and connected to product canvas.

Anatomy

8.60; 80.28

Request

The command that was sent to the AI for execution.

13.06; 66.73

Response

The response of the AI, typically received in a textual form.

50.20; 77.29

Generated Object Response

Often the Generative AI can create an object as part of its response. This may include: lists, tables, data, images, code, charts, etc.

72.99; 66.93

Error Response

Although unlikely errors do occur and a proper response with accessible error handling is needed.

83.13; 44.82

Busy State Response

Sometimes, especially when generating objects there is a need to show a busy state to indicate the system is working.

89.78; 32.87

Quick Replies Bar

The AI can predict the next user action and can suggest quick prompts in the form of action buttons.

Behavior

Requests

Requests are the chat bubbles that appear as a result of user interaction. Examples of such interactions are typing text in the AI prompt, uploading a file, pasting a link, and selecting from a pre-generated quick reply list. In all of these cases, a visualization is required.

Requests

false

Recommended

Use in conversational style AI interactions.
Show a request every time the user interacts with AI container.
Show a request when selecting a pre-defined quick reply.
Show links in text form.
Show uploaded files in an Object Container.

In addition, requests can span the entire width of the AI container when uploading files. This is done to allow maximum space available to display the uploaded content.

Request Width

Responses

Responses are the chat bubbles that appear when the AI provides an answer. Answers can come in various forms: texts, images, tables, lists, charts, code, etc. Most often, the response comes in the form of a streaming text. Much as with requests, the responses can take the total width to show generated content.

Response

false

Recommended

Use in conversational style AI interactions.
Quote sources (if available) in the byline.

dont

false

Not Recommended

Avoid using when working with content generated by "Magic Buttons".

Generated Objects

When using AI to generate objects, code, data, or any other actionable artifact, use the Generated Object pattern to display it. The design contains a Title Bar with an action toolbar to provide a name and contextual actions for the object. Below is an object container that allows both display of the generated content and drag and drop it on the product canvas.

Response - Generated Object

Busy State

Generating a response can take some time, especially when the request is to create a complicated object. In those cases, the chat bubble can show a busy indicator. If possible, offer a short status that updates as the system is active. If the generating operation takes longer, provide an estimated or elapsed time to inform the user that the system is working. After a while, offer the option to cancel the generation.

Response - Busy State

Error State

Response - Error State

Responsiveness

Chat Bubbles are content containers. Therefore, the chat bubble works effortlessly and similarly for desktop and mobile devices. Still, the content inside the chat bubble must be presented in its touch-optimized mode when displaying on mobile devices.