Overview
Providing a Generative AI with feedback about the usefulness of the generated content and requesting an additional regeneration is part of the UX interaction. Those interactions typically differ based on whether the user interacts with a request or response. Regardless of the case, a small AI Chat Toolbar appears when hovering over a chat bubble to provide options for interaction. This bubble, while helpful, is entirely optional.
AI Toolbar shown while hovering a Chat Bubble
When to Use
Recommended
- Typical actions for requests: Edit
- Typical actions for responses: Thumbs Up, Thumbs Down, Re-Generate, Show Thoughts
- Use icons for action notation
Not Recommended
- Avoid placing quick replies as actions
- Avoid using generated object actions as toolbar actions (ex. Add to canvas, Copy, etc.)
- Avoid using other components other than buttons in the toolbar
Anatomy
Behavior
Action Direction
The direction of actions in the AI Chat Toolbar is the opposite of the reading direction. For Left-to-Right languages, the actions are right-aligned. The opposite is true for right-to-left languages.
Toolbar Placement
The toolbar is placed at the end section of the Chat Bubble. As the AI Chat Toolbar is floating over the bubble, it must respect the boundaries of the AI Container and align to the beginning of the bubble when the bubble is narrower than the toolbar.
AI Toolbar placement for different size chat bubbles
Response: Thumbs Up
When working with an AI, it is essential to provide it with feedback about the generated responses. In a conversational style, this is typically done naturally in the conversation prompt. The AI Chat Toolbar provides a more structured approach to giving feedback. The most common of which is the Thumbs Up.
Thumbs Up Response Flow
- Provide options for feedback on all responses
- Show the byline to indicate the Thumbs Up
- Don't allow multiple Thumbs Up or Down
- Don't ask for additional feedback on Thumbs Up
Clicking on the Thumbs Up button in the AI Chat Toolbar will immediately inform the AI that it did an excellent job generating the requested content. Once the action is performed, the button is disabled. Note that the Thumbs Down button is enabled if the Thumbs Up one was clicked by mistake. AI considers only the last feedback it receives.
Response: Thumbs Down
Providing more details on why the response is not great helps the AI generate better content in current and future interactions. Such feedback can be provided via the AI prompt or by clicking the Thumbs Down button in the AI Chat Toolbar.
Thumbs Down Response Flow
- Provide options for feedback on all responses
- Ask for additional feedback on Thumbs Up
- Show the byline to indicate the Thumbs Down
- Don't allow multiple Thumbs Up or Down
After clicking the Thumbs Down button, the AI Chat Toolbar will show a dialog that allows the user to write additional information. Filling that information is optional. Upon clicking the Send button of the dialog, the feedback is sent, the dialog is closed, and the Thumbs Down button is disabled. The Thumbs Up button is still active if a mistake is made. AI considers only the last feedback it receives.
Response: Re-Generation
As good as the AI responses are, sometimes there is a need to sent the same prompt and ask it to generate a new answer. While this is definitely possible to do that by retyping the prompt the AI toolbar provides a shortcut for that operation in the form of a Re-Generate button.
Re-Generate a Response
- Hide this option by default
- Provide only if the contextualization is low
- Provide only if re-generation adds value
- Provide the option only on the last response
- Show the byline to indicate the re-generation
- Don't show in highly contextualized AI
- Don't offer more than five re-generations
When clicked the Re-Generate button will automatically prompt the AI to create a different response using the same prompt. The system will do its best given the constraints and contextualization. The higher the contextualization, the higher the specificity of the response and the lower the likelihood of getting a different result. Once a result is generated the Thums Up and Thumbs down button also serve the function of telling the system that the new result is better to worse than the last.
Response: Show Thoughts
In rare cases (ex., analytical tasks), displaying AI thoughts can be helpful. However, showing thoughts is the rule's exception and should be turned off by default. In general, showing thoughts should be avoided.
Show / Hide AI Thoughts
- This option is OFF by default.
- Display thoughts differently (ex., in Label color)
- Don't show thoughts option if the thoughts content do not add value
When the Show Thoughts button is toggled, the AI thoughts are displayed less visually than the response. Thoughts are also separated from the actual response to easier content identification. Un-toggle the button to hide the thoughts.
Request: Edit
It is rare, but it happens. Editing a prompt can be helpful if a mistake is made, and it is easier to correct the prompt than retyping it. Retyping the prompt means the previously wrong prompt will also be considered in the response generation. Edting bypasses that issue. This is why editing the last prompt can be provided as an option.
Edit Request Flow
- Provide editing of the last prompt by default
- Provide the prompt text in the edit dialog
- Show the byline to indicate the edit
- Don't allow editing of old prompts
- Don't provide editing of uploads
- Don't provide editing while AI is generating a response. Cancel generation first.
When clicking the Edit button on the last prompt, a dialog containing the prompt text. When the new text is created clicking send will save the text and send it as a revised prompt. A byline saying Edited is dislpayed under the prompt.
Responsiveness
AI Toolbar responsiveness
The AI Chat Toolbar has a touch-optimized size that grows as the Nested Buttons inside it go to cozy mode on mobile devices.