<a href="/wiki/display/CPDesign/AI+Drag+and+Drop">AI Drag and Drop</a>

Created by Kirichev, Alexander, last modified by Milanov, Kalin 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>HCB</div> <div>HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media1_1dccd381e8928d5f7346e92f46870ac0f0d147490.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1dccd381e8928d5f7346e92f46870ac0f0d147490.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1dccd381e8928d5f7346e92f46870ac0f0d147490.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-drag-and-drop/media%5C_1dccd381e8928d5f7346e92f46870ac0f0d147490.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media_1dccd381e8928d5f7346e92f46870ac0f0d147490.png?width=750&format=png&optimize=medium</a>" width="1004" height="844"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media1_1100493ea2da1a7d326ad2aaf3f1576154f49e46e.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1100493ea2da1a7d326ad2aaf3f1576154f49e46e.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1100493ea2da1a7d326ad2aaf3f1576154f49e46e.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-drag-and-drop/media%5C_1100493ea2da1a7d326ad2aaf3f1576154f49e46e.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media_1100493ea2da1a7d326ad2aaf3f1576154f49e46e.png?width=750&format=png&optimize=medium</a>" width="1004" height="844"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media1_1b680d040d1469667396f99ab7f131b38532156ac.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1b680d040d1469667396f99ab7f131b38532156ac.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1b680d040d1469667396f99ab7f131b38532156ac.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-drag-and-drop/media%5C_1b680d040d1469667396f99ab7f131b38532156ac.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media_1b680d040d1469667396f99ab7f131b38532156ac.png?width=750&format=png&optimize=medium</a>" width="1004" height="844"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media1_1ed591107827e14bf728c5af677835ec02be48771.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1ed591107827e14bf728c5af677835ec02be48771.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1ed591107827e14bf728c5af677835ec02be48771.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-drag-and-drop/media%5C_1ed591107827e14bf728c5af677835ec02be48771.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media_1ed591107827e14bf728c5af677835ec02be48771.png?width=750&format=png&optimize=medium</a>" width="1004" height="844"> </picture> </div> </div></p>

Anatomy

Dragging to the AI Container

<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Container</div> <div> <p>margin: 0.5rem;<br>background: var(--sapGroup_ContentBackground);<br>border-radius: 0.375rem;</p> <p><strong>Normal</strong><br>border: dashed 0.0625rem var(--sapAIGroup_ContentBorderColor);</p> <p><strong>Hover</strong><br>border: none;<br>outline: solid 0.125rem var(--sapAIContent_FocusColor);</p> </div> </div> <div> <div>B</div> <div>Icon</div> <div> <p>size: 3rem;</p> <p><strong>Normal</strong><br>color: var(–sapAITextColor);</p> <p><strong>Hover / Drag Over</strong><br>color: var(--sapAIContent_FocusColor);</p> </div> </div> <div> <div>C</div> <div>Title</div> <div> <p>Use H6 from the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTypography">Typography</a></p> <p>margin-top: 0.5rem;<br>color: var(--sapContent_LabelColor);</p> </div> </div>

Dragging from the AI Container

Hover State 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-drag-and-drop/media1_155d75e5b7064447790e4db47d624473368daee31.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_155d75e5b7064447790e4db47d624473368daee31.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_155d75e5b7064447790e4db47d624473368daee31.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-drag-and-drop/media%5C_155d75e5b7064447790e4db47d624473368daee31.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media_155d75e5b7064447790e4db47d624473368daee31.png?width=750&format=png&optimize=medium</a>" width="640" height="1146"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media1_15a2a18a6040fd4f3e43c5a6744bdd39d8d1458bd.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_15a2a18a6040fd4f3e43c5a6744bdd39d8d1458bd.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_15a2a18a6040fd4f3e43c5a6744bdd39d8d1458bd.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-drag-and-drop/media%5C_15a2a18a6040fd4f3e43c5a6744bdd39d8d1458bd.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media_15a2a18a6040fd4f3e43c5a6744bdd39d8d1458bd.png?width=750&format=png&optimize=medium</a>" width="640" height="1146"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media1_145d4b3bf9fe4b6600ff678347e6c97fdbf5fa6ed.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_145d4b3bf9fe4b6600ff678347e6c97fdbf5fa6ed.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_145d4b3bf9fe4b6600ff678347e6c97fdbf5fa6ed.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-drag-and-drop/media%5C_145d4b3bf9fe4b6600ff678347e6c97fdbf5fa6ed.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media_145d4b3bf9fe4b6600ff678347e6c97fdbf5fa6ed.png?width=750&format=png&optimize=medium</a>" width="640" height="1146"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media1_153c77a45f38973dae5a2e3f05789f188b5e2e06c.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_153c77a45f38973dae5a2e3f05789f188b5e2e06c.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_153c77a45f38973dae5a2e3f05789f188b5e2e06c.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-drag-and-drop/media%5C_153c77a45f38973dae5a2e3f05789f188b5e2e06c.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-drag-and-drop/media_153c77a45f38973dae5a2e3f05789f188b5e2e06c.png?width=750&format=png&optimize=medium</a>" width="640" height="1146"> </picture> </div> </div></p>

See AI Chat Bubble for full specifications on Generated Object visual states.

Keyboard Handling

The AI Drag and Drop is an over-style for AI. Refer to Fiori Keyboard Interaction for full specifications.

Drag and Drop - p.139

Refer to Fiori Screen Reader Specification for full specifications.

Drop Area Triggers

When dragging an object over the AI Container's content area or the AI Promot
When pasting an object while the focus is on any element in the AI Container's content area or the AI Prompt
- After an object is pasted: the screen reader will read the invisible message as shown below.