Overview

This article covers the drag and drop interactions with the Generative AI. The drag and drop works in both ways - it is possible to drop files into the Generative AI prompt or to drag files from the AI response.

From the AI Container

Some of the generated responses can be dragged to the host application/environment. Those items get highlighted on mouse hover to indicate that they can be dragged from the AI Container.

Image
1
40.59; 61.33
Visual Indication
The elements from the AI Container that are enabled to be dragged from the container get visual cue on hover.
2
58.36; 41.93
Mouse cursor
The mouse pointer changes to "move" when the cursor hovers a draggable element.
3
2.94; 97.61

Interaction States

Drag and Drop - From the AI Container.png

On Mouse Hover

Dragged Element.png

On Mouse Drag

When you drag the generated content, it appears as a disabled element.

2
do
false

Recommended

  • Ensure the generated content that can be dragged has an appropriate visual indication
dont
false

Not recommended

  • Avoid making all visual elements in the AI Container draggable.

Into the AI Container

Image
1
21.49; 64.24
Drop area
The drag and drop area appears when the users drag a file over the browser window. It covers the existing contents of the AI Container to indicate the drop enabled area.

Interaction States

Drop area - Normal.png

Normal State

Drop area - Hover.png

Hover State

2
do
false

Recommended

  • Highlight only the areas that accept file uploads.
  • Change the mouse cursor when dragging files
dont
false

Not recommended

  • Avoid the area that accepts file uploads has an appropriate size.

Resources

Design

AI Drag and Drop - Visual Design Specification

Code Samples

UI5 Demo Kit

Web Components

Fundamental Styles