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

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

Component Owner: BTP

Designer Responsible: Milanov, Kalin

Specification Status: IN REVIEW

Overview

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-toolbar/media1_1c14e1c007be2464ddfdc169495025c46591c041e.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1c14e1c007be2464ddfdc169495025c46591c041e.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1c14e1c007be2464ddfdc169495025c46591c041e.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-toolbar/media%5C_1c14e1c007be2464ddfdc169495025c46591c041e.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-toolbar/media_1c14e1c007be2464ddfdc169495025c46591c041e.png?width=750&format=png&optimize=medium</a>" width="300" height="151"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-chat-toolbar/media1_1bf6667257bcf0342901c37038a9dcbdb8b1d7143.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1bf6667257bcf0342901c37038a9dcbdb8b1d7143.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1bf6667257bcf0342901c37038a9dcbdb8b1d7143.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-toolbar/media%5C_1bf6667257bcf0342901c37038a9dcbdb8b1d7143.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-toolbar/media_1bf6667257bcf0342901c37038a9dcbdb8b1d7143.png?width=750&format=png&optimize=medium</a>" width="300" height="151"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-chat-toolbar/media1_1c514f07cb7311e8ff46b647d502c11b30485be07.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1c514f07cb7311e8ff46b647d502c11b30485be07.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1c514f07cb7311e8ff46b647d502c11b30485be07.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-toolbar/media%5C_1c514f07cb7311e8ff46b647d502c11b30485be07.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-toolbar/media_1c514f07cb7311e8ff46b647d502c11b30485be07.png?width=750&format=png&optimize=medium</a>" width="300" height="151"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-chat-toolbar/media1_15fca0cafe67eb4586192456979291e5b890720d8.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_15fca0cafe67eb4586192456979291e5b890720d8.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_15fca0cafe67eb4586192456979291e5b890720d8.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-toolbar/media%5C_15fca0cafe67eb4586192456979291e5b890720d8.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-chat-toolbar/media_15fca0cafe67eb4586192456979291e5b890720d8.png?width=750&format=png&optimize=medium</a>" width="300" height="151"> </picture> </div> </div></p>

Anatomy

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div>A</div> <div>Container</div> <div>The container that holds the actions.</div> </div> <div> <div>B</div> <div>Actions</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</div> </div>

Desktop Specification (Compact Mode)

General Specification

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Container</div> <div> <p>display: flex;<br>justify-content: flex-end;<br>align-items: center;</p> <p><strong>Both request and response</strong><br>position: absolute;<br>right: 0rem;<br>top: -1.4375rem;</p> <p><strong>When response content is smaller than the toolbar</strong><br>left: 0rem;</p> <p>border-radius: 1.625rem;<br>background: var(--sapGroup_ContentBackground);<br>box-shadow: var(--sapContainer_Shadow1);</p> </div> </div>

Tablet Specification (Cozy Mode)

Tablet specification depicts deltas from desktop specification

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Container</div> <div>border-radius: 2.5rem;</div> </div>

Phone Specification (Cozy Mode)

Identical to tablet specification.

Keyboard Handling

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

Toolbar - p. 275
Button - p.171

Keyboard handling of Focusing in and out of the toolbar is described in the AI Chat Bubble specifications.

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

Toolbar - p.135