<a href="/wiki/display/CPDesign/AI+Container">AI Container</a>

• Created by Milanov, Kalin, last modified on Feb 14, 2024

Component Owner: BTP

Designer Responsible: Milanov, Kalin

Specification Status: IN REVIEW

Table of Contents

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.

Look and Feel

Anatomy

Desktop Specification (Compact Mode)

Tablet Specification (Cozy Mode)

The tablet specification contains only deltas from the desktop specification. All reference components take their touch-optimized sizes and behaviors.

Phone Specification (Cozy Mode)

There are no deltas between the tablet and phone specifications.

Keyboard Handling

The keyboard handling for the AI Container is based on the keyboard handling of the Button, Input Field, and Toolbar components. Refer to Fiori Keyboard Interaction for full specifications about each of these components.

• Input Field - p.205
• Toolbar - p. 275
• Button - p.171
• See AI Prompt for full specifications.
• See AI Chat Bubble for full specifications.

AI Container

Keyboard Interaction:

• F6

  • On enter, move the focus to the AI Prompt
  • On focus present, move the focus to the next element in the component's tab chain
  • On leave, move the focus to the next element in the tab chain after the AI Container

• SHIFT+ F6

  • On enter, move the focus to the AI Prompt
  • On focus present, move the focus to the previous element in the component's tab chain
  • On leave, move the focus to the previous element in the tab chain before the AI Container

• F11

  • Toggle maximize for the whole AI Container window

• ALT+ENTER

  • Toggle fullscreen for the whole AI Container window

Header

• ARROW KEYS
  • Move the AI Container in the direction of the arrow key.
• SHIFT+ARROW KEYS
  • Resize the AI Container in the direction of the arrow key.
• F2
  • Moves the focus between the Header and the first interactive element in the header. Once the focus is on the first element the keyboard interaction follows the rules for a toolbar.

Content Area

The keyboard handling of the content area elements is inspired by the behavior of the Feed List. Refer to Fiori Keyboard Interaction for full specifications about each of these components.

• Feed List - p.283

Keyboard Interaction:

• TAB

  • On enter, move the focus to the last element and bring it into the viewport.
  • On leave, move the focus to the next element in the AI Container's tab chain

• SHIFT+TAB

  • On enter, move the focus to the last element and bring it into the viewport.
  • On leave, move the focus to the previous element in the AI Container's tab chain

• UP

  • If the focus is on an element, move the focus to the previous element above.
  • If the focused element is the topmost element within the content area, do nothing.
  • If the newly focused element is outside the visible area, scroll the visible area accordingly.
  • If the focus is within a list item (on a link, a button, or any element that does not react on arrow key usage) transfer the focus back onto the list item level and move focus according to the key used.

• DOWN

  • If the focus is on an element, move the focus to the next element below.
  • If the focused element is the bottommost element within the content area, do nothing.
  • If the newly focused element is outside the visible area, scroll the visible area accordingly.
  • If the focus is within a list item (on a link, a button, or any element that does not react on arrow key usage) transfer the focus back onto the list item level and move focus according to the key used.

• SHIFT+UP

  • Scroll the viewport up by 1 rem

• SHIFT+DOWN

  • Scroll the viewport down by 1 rem

• CTRL+UP

  • Move the focus up to the previous AI Context Separator
  • If the newly focused element is outside the visible area, scroll the visible area accordingly.
  • If the focused element is the topmost element within the content area, do nothing.

• CTRL+DOWN

  • Move the focus down to the next AI Context Separator
  • If the newly focused element is outside the visible area, scroll the visible area accordingly.
  • If the focused element is the bottommost element within the content area, do nothing.

• HOME

  • Move focus up to the very first element.
  • If the newly focused element is outside the visible area, scroll the visible area accordingly.

• END

  • Move focus up to the very last element.
  • If the newly focused element is outside the visible area, scroll the visible area accordingly.

• PAGE UP

  • Move the focus up to the first element which is not fully displayed in the viewport and bring it into view.
  • If the focused element is the first element in the view do nothing.

• PAGE DOWN

  • Move the focus down to the first element which is not fully displayed in the viewport and bring it into view.
  • If the focused element is the last element in the view do nothing.

• CTRL+V

  • If the pasteboard contains files, the pasteboard data is transformed into a single or multi-file upload (the process is similar to drag and drop).

• CTRL+SHIFT+V

  • If the pasteboard contains files, open the upload file selector with the given files selected.

Screen Reader

The screen reader for the AI Container is based on the screen reader of the Page Layouts and Floorplans. Refer to Fiori Screen Reader Specification for full specifications.

• Page Layouts and Floorplans - p.192

AI Container

• When docked use Region.
• When floating use Dialog.
• Provide a way to turn the speech output on or off.

Header

Content Area

See AI Chat Bubble for full specifications.

AI Prompt

See AI Prompt for full specifications.