<a href="/wiki/display/CPDesign/AI+Quick+Reply">AI Quick Reply</a>
Component Owner: BTP
Designer Responsible: Milanov, Kalin
Specification Status: IN REVIEW
Table of Contents
Overview
Look and Feel
<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>HCB</div> <div>HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-quick-reply/media1_16288b39b8d6bc073a3ac44edee627a5919e6db03.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_16288b39b8d6bc073a3ac44edee627a5919e6db03.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_16288b39b8d6bc073a3ac44edee627a5919e6db03.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-quick-reply/media%5C_16288b39b8d6bc073a3ac44edee627a5919e6db03.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-quick-reply/media_16288b39b8d6bc073a3ac44edee627a5919e6db03.png?width=750&format=png&optimize=medium</a>" width="430" height="740"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-quick-reply/media1_141c145af48c164b467972d8f9ff574a52da16e04.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_141c145af48c164b467972d8f9ff574a52da16e04.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_141c145af48c164b467972d8f9ff574a52da16e04.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-quick-reply/media%5C_141c145af48c164b467972d8f9ff574a52da16e04.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-quick-reply/media_141c145af48c164b467972d8f9ff574a52da16e04.png?width=750&format=png&optimize=medium</a>" width="430" height="740"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-quick-reply/media1_1e9d3930b5f9acb142af342d4f8010e933cbec7c6.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1e9d3930b5f9acb142af342d4f8010e933cbec7c6.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1e9d3930b5f9acb142af342d4f8010e933cbec7c6.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-quick-reply/media%5C_1e9d3930b5f9acb142af342d4f8010e933cbec7c6.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-quick-reply/media_1e9d3930b5f9acb142af342d4f8010e933cbec7c6.png?width=750&format=png&optimize=medium</a>" width="430" height="740"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-quick-reply/media1_17eeacdaa9e436605d7c9610b8300271aa7acd67f.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_17eeacdaa9e436605d7c9610b8300271aa7acd67f.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_17eeacdaa9e436605d7c9610b8300271aa7acd67f.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-quick-reply/media%5C_17eeacdaa9e436605d7c9610b8300271aa7acd67f.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-quick-reply/media_17eeacdaa9e436605d7c9610b8300271aa7acd67f.png?width=750&format=png&optimize=medium</a>" width="430" height="740"> </picture> </div> </div></p>
Anatomy
<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Visual Button</div> <div>padding: 0.3125rem 0.625rem; (results in 26px height)<br>border-radius: 0.375rem;<br>border-width: 0.0625rem;<br>border-style: solid;</div> </div> <div> <div>B</div> <div>Text</div> <div>font-family: var(--sapFontFamily);<br>font-size: var(--sapFontSize);</div> </div>
Desktop Specification (Compact Mode)
The visual design specification for the Quick Reply button is identical to the Secondary AI Button specifications.
Interaction States
Tablet Specification (Cozy Mode)
<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Visual Button</div> <div>padding: 0.625rem 0.75rem;</div> </div> <div> <div>B</div> <div>Text</div> <div>No deltas</div> </div>
Phone Specification (Cozy Mode)
Identical to tablet specification.
Quick Reply Bar
Overview
Anatomy (Desktop and Mobile)
The Quick Reply Bar is the container that holds the AI Quick Prompts. The items are arranged horizontally and when there is not enough horizontal space, they wrap into multiple lines.
<div> <div></div> <div>Desktop</div> <div>Mobile</div> </div> <div> <div><strong>Vertical Spacing</strong></div> <div>0.375rem</div> <div>0.5rem</div> </div> <div> <div><strong>Horizontal Spacing</strong></div> <div>0.375rem</div> <div>0.5rem</div> </div>
Keyboard Handling
The keyboard handling for the AI Chat Bubble 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 Interaction
ARROW KEYS
Move the focus to the element in the direction of the arrow
If the focus is on the rightmost element in a row, the RIGHT ARROW moves the focus to the next row
If the focus is on the last element the RIGHT ARROW does noting
If the focus is on the leftmost element in a row, the LEFT ARROW moves the focus to the previous row
If the focus is on the first element the LEFT ARROW nothing
ENTER or SPACE
Submit the selected quick reply for processing. The focus is moved to the new response being generated.
TAB or F6
Moves the focus to the AI Prompt
Screen Reader
The screen reader for the AI Quick Reply Bar is based on the screen reader of the Button and Toolbar. Refer to Fiori Screen Reader Specification for full specifications.
Button - p.11
Toolbar - p.135
Development Requirement
The accessibility team recommends to implement this list of quick replies as an unordered list.
Sample Code Reference
<ul> <li> <button>Open weather.com</button> </li> </ul>
