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

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

Component Owner: BTP

Designer Responsible: Milanov, Kalin

Specification Status: IN REVIEW

Overview

All of the conversation style

Look and Feel

<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-chat-bubble/media1_1669414767521ee0133c26daae0dbb80b1ad3d2ba.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1669414767521ee0133c26daae0dbb80b1ad3d2ba.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1669414767521ee0133c26daae0dbb80b1ad3d2ba.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-bubble/media%5C_1669414767521ee0133c26daae0dbb80b1ad3d2ba.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-bubble/media_1669414767521ee0133c26daae0dbb80b1ad3d2ba.png?width=750&format=png&optimize=medium</a>" width="640" height="2090"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-chat-bubble/media1_17c56ddad53fb3187e8562431aa1446aba5939a26.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_17c56ddad53fb3187e8562431aa1446aba5939a26.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_17c56ddad53fb3187e8562431aa1446aba5939a26.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-bubble/media%5C_17c56ddad53fb3187e8562431aa1446aba5939a26.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-bubble/media_17c56ddad53fb3187e8562431aa1446aba5939a26.png?width=750&format=png&optimize=medium</a>" width="640" height="2090"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-chat-bubble/media1_1d3808d1fd8f6eb34404b5c2d43776fb05995d200.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1d3808d1fd8f6eb34404b5c2d43776fb05995d200.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1d3808d1fd8f6eb34404b5c2d43776fb05995d200.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-bubble/media%5C_1d3808d1fd8f6eb34404b5c2d43776fb05995d200.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-bubble/media_1d3808d1fd8f6eb34404b5c2d43776fb05995d200.png?width=750&format=png&optimize=medium</a>" width="640" height="2090"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-chat-bubble/media1_1dd82487ad94392095dc42918ea39cb2aa30a8094.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1dd82487ad94392095dc42918ea39cb2aa30a8094.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1dd82487ad94392095dc42918ea39cb2aa30a8094.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-bubble/media%5C_1dd82487ad94392095dc42918ea39cb2aa30a8094.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-bubble/media_1dd82487ad94392095dc42918ea39cb2aa30a8094.png?width=750&format=png&optimize=medium</a>" width="640" height="2090"> </picture> </div> </div></p>

Anatomy

<div> <div></div> <div>UI Element</div> <div>Description</div> </div> <div> <div>A</div> <div>Chat Bubble</div> <div>The chant bubble container and AI request or response.</div> </div> <div> <div>B</div> <div>Generated AI Object Title</div> <div>The title of the generated AI Object. Optional. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTitle%2BBar">Title Bar</a> for full specifications.</div> </div> <div> <div>C</div> <div>Generated AI Object</div> <div>The container of the generated AI object.</div> </div> <div> <div>D</div> <div>Chat Byline / Status</div> <div>A secondary information or message associated with the chat bubble.</div> </div>

Desktop Specification (Compact Mode)

Request

<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Chat Bubble Container</div> <div> <p>padding-left: 4rem;<br>min-height: 2.375rem;</p> <p>gap: 0.25rem;</p> </div> </div> <div> <div>A1</div> <div>Chat Bubble</div> <div> <p>border-radius: 0.5rem 0.5rem 0rem 0.5rem;</p> <p><strong>Small Size</strong><br>display: flex;<br>max-width: 15rem;<br>padding: 0.5rem 0.75rem;<br>flex-direction: column;<br>align-items: flex-end;</p> <p><strong>Medium Size</strong><br>max-width: 25rem;<br>padding: 0.5rem 0.75rem;</p> <p><strong>Large Size</strong><br>max-width: 40rem;<br>padding: 0.5rem 1rem;</p> <p><strong>Normal State</strong><br>background: var(--sapAIRequestColor);</p> <p><strong>Focus State</strong><br>outline: solid var(--sapContent_FocusWidth) var(–sapAIContent_FocusColor);</p> </div> </div> <div> <div>A2</div> <div>Chat Text</div> <div> <p>color: var(--sapTextColor);<br>font-family: var(--sapFontFamily);<br>font-size: var(--sapFontSize);<br>line-height: 1.25rem;<br>text-align: left;</p> <p><strong>Large Size</strong><br>font-size: var(--sapFontLargeSize);<br>line-height: 1.375rem;</p> </div> </div> <div> <div>D</div> <div>Chat Byline</div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698914064">Label (Horizon)</a> for full specifications.</p> <p><strong>Over-Style</strong><br>font-size: 0.0625rem;</p> </div> </div>

Error State

The error state specification only contained the deltas from the regular state of the request.

<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>A1</div> <div>Chat Bubble</div> <div>border: 1px solid var(--sapErrorBorderColor);<br>background: var(--sapErrorBackground);</div> </div> <div> <div>D</div> <div>Chat Byline</div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698914064">Label (Horizon)</a> for full specifications.<br>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2823064653">Message and Status Icons (Horizon)</a> for full specifications.</p> <p><strong>Over-Style</strong><br>font-size: 0.0625rem;</p> <p><strong>Icon</strong><br>width: 0.75rem;<br>height: 0.75rem;</p> </div> </div>

Response

<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Chat Bubble Container</div> <div> <p>padding-right: 4rem;<br>min-height: 2.375rem;</p> <p>gap: 0.25rem;</p> <p><strong>Full Width</strong><br>padding-right: 0;</p> </div> </div> <div> <div>A1</div> <div>Chat Bubble</div> <div> <p>border-radius: 0.5rem 0.5rem 0.5rem 0rem;</p> <p><strong>Small Size</strong><br>display: flex;<br>max-width: 15rem; // max-width: none; (<strong>Full Width</strong>)<br>padding: 0.5rem 0.75rem;<br>flex-direction: column;<br>align-items: flex-start;</p> <p><strong>Medium Size</strong><br>max-width: 25rem; // max-width: none; (<strong>Full Width</strong>)<br>padding: 0.5rem 0.75rem;</p> <p><strong>Large Size</strong><br>max-width: 40rem; // max-width: none; (<strong>Full Width</strong>)<br>padding: 0.5rem 1rem;</p> <p><strong>Normal State</strong><br>background: var(--sapAIResponseColor);</p> <p><strong>Focus State</strong><br>outline: solid var(--sapContent_FocusWidth) var(–sapAIContent_FocusColor);</p> </div> </div> <div> <div>A2</div> <div>Chat Text</div> <div>Identical to <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Fbtp%2Fpatterns%2Fgenerative-ai%2Fai-chat-bubble%2Fstyle%23AIChatBubble-Request">Request</a> above.</div> </div> <div> <div>D</div> <div>Chat Byline</div> <div>Identical to <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Fbtp%2Fpatterns%2Fgenerative-ai%2Fai-chat-bubble%2Fstyle%23AIChatBubble-Request">Request</a> above.</div> </div>

Generated Object

<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>C</div> <div>Generated AI Object</div> <div> <p>border-radius: 0.25rem;</p> <p>background: var(–sapGroup_ContentBackground);<br>border: solid 0.0625rem var(--sapAIGroup_ContentBorderColor);</p> <p><strong>Hover State</strong><br>border: solid 0.0625rem var(--sapAIGroup_Hover_ContentBorderColor);</p> <p><strong>Hover State (when Drag Enabled)</strong><br>border: solid 0.0625rem var(--sapGroup_ContentBackground);<br>outline: solid 0.125rem var(–sapAIContent_FocusColor);<br>cursor: grab;</p> </div> </div> <div> <div></div> <div>Drag Enabled Generated AI Object</div> <div>For the Drag Enabled Generated AI Object, please follow the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FAI%2BDrag%2Band%2BDrop%23AIDragandDrop-DraggingfromtheAIContainer">AI Drag and Drop</a> specification.</div> </div>

Error Sate

The error state specification only contained the deltas from the regular state of the request.

Busy State

<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Chat Bubble Container</div> <div>padding-right: 0;<br>min-height: 2.375rem;</div> </div> <div> <div>A1</div> <div>Chat Bubble</div> <div> <p>Identical to <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Fbtp%2Fpatterns%2Fgenerative-ai%2Fai-chat-bubble%2Fstyle%23AIChatBubble-Response">Response</a> above.</p> <p>gap: 0.5rem;</p> <p><strong>Large Sizes</strong><br>padding: 0.5rem 0.75rem;</p> </div> </div> <div> <div>A2</div> <div>Chat Text</div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698914064">Label (Horizon)</a> for full specification.</p> <p>font-size: sapFontSmallSize;</p> </div> </div> <div> <div>D</div> <div>Chat Byline</div> <div>Identical to <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Fbtp%2Fpatterns%2Fgenerative-ai%2Fai-chat-bubble%2Fstyle%23AIChatBubble-Request">Request</a> above.</div> </div>

Tablet Specification (Cozy Mode)

Identical to desktop specification.

Phone Specification (Cozy Mode)

Identical to tablet specification

Keyboard Handling

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

Toolbar - p. 275
Button - p.171
List - p.286

The AI Chat Bubbles behave similarly to List Items. In some cases, the bubbles provide embedded actions. Navigating between container items (incl. AI Chat Bubble) is covered in the AI Container specifications.

Keyboard Interaction:

When the AI Chat Bubble is focused the following keyboard interactions are possible.

F2
- Move the focus between the chat bubble and the first interactive element inside the chat bubble
F7
- Move the focus between the chat bubble and the first editable element inside the chat bubble
SHIFT+F10
- Show / Hide the AI Chat Toolbar
- When showing the toolbar, move the focus to the first interactive element in the toolbar
- When hiding the toolbar move the focus back to the chat bubble

When the focus is on the generated object

CTRL+C
- Copies the generated object to the clipboard. The paste destination of the copied object is defined by the application. To paste use CTRL+V or CTRL+SHIFT+V if applicable.

The screen reader for the AI Chat Bubble is based on the screen reader of the Feed and Notes. Refer to Fiori Screen Reader Specification for full specifications.

Feed and Notes - p.23

In Error State

Link aria-errormessage to the contents of the object status byline (no internet connection)