<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-prompt/media1_13288d335dd8ec64cbcaabf70c7fca91bf6a73096.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_13288d335dd8ec64cbcaabf70c7fca91bf6a73096.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_13288d335dd8ec64cbcaabf70c7fca91bf6a73096.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-prompt/media%5C_13288d335dd8ec64cbcaabf70c7fca91bf6a73096.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-prompt/media_13288d335dd8ec64cbcaabf70c7fca91bf6a73096.png?width=750&format=png&optimize=medium</a>" width="768" height="1272"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-prompt/media1_1d05c33de7a57a69ac3413646b00d27dc65d3bc75.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1d05c33de7a57a69ac3413646b00d27dc65d3bc75.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1d05c33de7a57a69ac3413646b00d27dc65d3bc75.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-prompt/media%5C_1d05c33de7a57a69ac3413646b00d27dc65d3bc75.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-prompt/media_1d05c33de7a57a69ac3413646b00d27dc65d3bc75.png?width=750&format=png&optimize=medium</a>" width="768" height="1272"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-prompt/media1_13430be9ffc0df1911bd22879dd442b1bd6f8869b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_13430be9ffc0df1911bd22879dd442b1bd6f8869b.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_13430be9ffc0df1911bd22879dd442b1bd6f8869b.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-prompt/media%5C_13430be9ffc0df1911bd22879dd442b1bd6f8869b.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-prompt/media_13430be9ffc0df1911bd22879dd442b1bd6f8869b.png?width=750&format=png&optimize=medium</a>" width="768" height="1272"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-prompt/media1_13d08f4967d763db3cee687b5649d6e1ff08f41dc.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_13d08f4967d763db3cee687b5649d6e1ff08f41dc.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_13d08f4967d763db3cee687b5649d6e1ff08f41dc.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-prompt/media%5C_13d08f4967d763db3cee687b5649d6e1ff08f41dc.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-prompt/media_13d08f4967d763db3cee687b5649d6e1ff08f41dc.png?width=750&format=png&optimize=medium</a>" width="768" height="1272"> </picture> </div> </div></p>

<div> <div></div> <div>UI Element</div> <div>Description</div> </div> <div> <div>A</div> <div><strong>Prompt Container</strong></div> <div>Container which holds the area of the prompt and also actions and additional information.</div> </div> <div> <div>B</div> <div>Prompt Area</div> <div>The area where the user writes the prompt/request.</div> </div> <div> <div>C</div> <div>Scrollbar</div> <div>If the prompt exceeds five lines of the text a scrollbar will be shown. For full specifications see <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915083">Scrollbar (Horizon)</a></div> </div> <div> <div>D</div> <div>Toolbar Container</div> <div>Container which includes all actions and information related to the prompt.</div> </div> <div> <div>E</div> <div>Actions</div> <div>Area for possible actions that are related to the prompt. For action see <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</div> </div> <div> <div>F</div> <div>Indicators</div> <div>If needed, additional information can be shown here. An icon should be used to replace a written label.</div> </div> <div> <div>G</div> <div>Characters Count</div> <div>The remaining characters are shown next to the submit button if the user gets near the maximum amount.</div> </div> <div> <div>H</div> <div>Send Button</div> <div>Sends the request to the AI. For action see <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</div> </div>

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Prompt Container</div> <div> <p><strong>Layout</strong><br>display: flex;width: auto;<br>min-width: 16rem;<br>min-height: 2rem;<br>padding: 0.1875rem 0.0625rem;<br>flex-direction: column;<br>align-items: flex-start;<br>gap: 0.125rem;</p> <p><strong>Style</strong> border-radius: 0.375rem;</p> <p><strong>Normal State</strong><br>background-color: var(--sapField_Background);<br>border-bottom: var(–sapAIPropmt_UnderlineColor);<br>box-shadow: inset 0 0 0.0625rem 0 var(–sapAIPrompt_BorderColor);</p> <p><strong>Normal State</strong><br>background-color: var(--sapField_Hover_Background);<br>border-bottom: none;<br>box-shadow: inset 0 0 0.0625rem 0 var(–sapAIPrompt_Hover_BorderColor);</p> <p><strong>Focus State</strong><br>border-bottom: none;<br>box-shadow: none;<br>outline: solid 0.125rem var(--sapAIContent_FocusColor);</p> <p><strong>Disabled State</strong><br>opacity: var(--sapContent_DisabledOpacity);</p> </div> </div> <div> <div>B</div> <div>Prompt Area</div> <div> <p><strong>Layout</strong> display: flex;<br>padding: 0.1875rem 0.5rem;<br>align-self: stretch;-webkit-line-clamp: 5;</p> <p><strong>Font</strong> font-family: var(--sapFontFamily);<br>font-size: var(--sapFontSize);<br>line-height: 1.25rem;</p> <p><strong>Placeholder text</strong><br>color: var(–sapField_PlaceholderTextColor);</p> <p><strong>Input Text</strong><br>color: var(--sapField_TextColor);</p> </div> </div> <div> <div>C</div> <div>Scrollbar</div> <div>The scrollbar appears at the rightmost end of the field. Follow <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915083">Scrollbar (Horizon)</a> for detailed specifications.</div> </div>

<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>High Contrast Black</div> <div>High Contrast White</div> </div> <div> <div><strong>A</strong></div> <div><strong>Toolbar Container</strong></div> <div><strong>Layout</strong> display: flex;<br>padding: 0rem 0.125rem;<br>align-items: left;<br>gap: 0.125rem;<br>align-self: stretch;</div> </div> <div> <div><strong>B</strong></div> <div><strong>Actions Container</strong></div> <div><strong>Layout</strong> display: flex;<br>align-items: center;<br>gap: 0.125rem;</div> </div> <div> <div><strong>B1</strong></div> <div><strong>Actions</strong></div> <div>For action see <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Indicators Container</strong></div> <div><strong>Layout</strong> display: flex;<br>align-items: center;<br>gap: 0.5rem;</div> </div> <div> <div><strong>C1</strong></div> <div><strong>Indicator</strong></div> <div> <p><strong>Layout</strong><br>display: flex;<br>align-items: center;<br>gap: 0.125rem;</p> <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.625rem;</p> <p><strong>Icon</strong> width: 0.75rem;height: 0.75rem;color: --sapContent_LabelColor;</p> </div> </div> <div> <div><strong>C2</strong></div> <div><strong>Characters Count</strong></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> <div> <div><strong>D</strong></div> <div><strong>Send Button</strong></div> <div>For action see <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</div> </div> <div> <div><strong>E</strong></div> <div><strong>Area Spacing</strong></div> <div>flex: 1 0 0;<br>align-self: stretch;</div> </div>

<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>High Contrast Black</div> <div>High Contrast White</div> </div> <div> <div><strong>A</strong></div> <div><strong>Prompt Container</strong></div> <div><strong>Layout</strong><br>padding: 0.4375rem 0.3125rem;</div> </div>