Overview

Almost all Generative AI interactions are comprised of a prompt and a response. In some cases, multiple prompts are needed to refine the AI response. In such cases, the need for an AI container is also required. It holds the entire conversation, valuable interactions, and the AI prompt.

AI Container - Look and Feel

Anatomy

9.67; 40.84

Header (Mandator)

The top element of the AI Conversational Container. Main carrier of AI brand.

16.17; 30.88

Name (Mandatory)

The name of the AI tool. For SAP the name is Joule.

16.00; 71.12

Header Actions

A set of actions available for the AI such as Close, Personalize, Expand/Collapse, Maximize/Restore, etc.

52.50; 51.00

Content Container

86.00; 48.41

Footer

Holds the AI Prompt.

In the cases of conversational-style AI interactions, a header to the AI container is needed. The title carries the branding of the AI interaction and provides access to actions that can enhance the experience. Such activities include Close, Expand/Collapse, Maximize/Minimize, Personalize, etc. The header doubles as a drag area if the user wants to reposition the AI container to another part of the screen.

Visual states of the AI header buttons

The visual design of the AI is slightly different than the overall Fiori Horizon style. Therefore some over-styling for the header and the buttons is needed.

Content

The content area of the AI is an empty container that can host the onboarding experience, chant bubbles, generated content, quick replies, tools for interacting with the content and so much more.

Behavior

Interaction

There are several basic interactions for the AI container that are very similar to the Side Panel ones. By default, the AI container is displayed in its Floating placement. When floating the container can have the following interactions:

Resizing - by dragging any of its edges
Repositioning - via drag and drop by dragging its header
Expand and Collapse - by clicking the arrow button
Maximize and Restore - by clicking the maximize button
Close - by clicking the close button

Floating AI container variants

Style

Depending on the placement the AI container has slight changes in its visual style and recommended interaction options. For example when the container is Docked to the side of the product there is no bottom roundness and the shadow is lighter compared to the floating style. This is to account for the Horizon Shadow Level Concept which has a direct impact on container visibility and accessibility.

Different container styles according to placement

Flow Direction and Scroll Position

When working with the Generative AI in a conversational mode, the conversation flows from top to bottom. When the conversion reaches the bottom of the container, it overflows and starts scrolling. In this case, the scroll position is kept at the bottom, and new requests and responses appear at the bottom and are always brought into view.

Flow Direction and Scroll Position

Responsiveness

As with any pattern, the AI container supports touch interactions and supports both Compact (Desktop) and Cozy (Mobile) visual modes. In practice, the header buttons and the AI prompt switch to Touch Optimized sizes.