Overview

Prompt Input

The AI Prompt Input component is the primary means for users to input queries or prompts into an AI interface. This field is automatically growing and may display additional actions in a toolbar. The AI Prompt is primarily used inside the AI Container but can be placed in the Tool Header toolbars, dialogs, and popovers.

The Prompt Toolbar is a multifunctional toolset that enhances the prompt input experience. Users can perform additional actions, such as uploading files, refining the prompt, or utilizing speech-to-text functionality. Additionally, the toolbar provides real-time information on the remaining number of characters or AI units and offers insights into their input constraints.

AI Prompt with a toolbar in an AI Container

When to Use

Prompt Input

The Prompt Input component is utilized whenever a user intends to communicate with the AI. This includes scenarios where users want to generate text, ask questions, or request specific information from the language model. The component allows users to express their input in a natural language format, allowing the AI to comprehend and generate contextually relevant responses.

The primary function of the Prompt Toolbar is to house a set of additional actions that users can perform in conjunction with the primary prompt. These actions are carefully curated to streamline the user's workflow, providing quick access to commonly used features. It also acts as an information center, displaying relevant details about the current prompt. This includes essential information such as the number of characters remaining, helping users stay aware of their input limits.

false

Recommended

Use the correct icon for the action described in UXC-019 Icons and the Actions and Icons guideline.
Use only prompt-related actions.
Use an overflow button if more than four actions are needed.
Use icon-only buttons.

dont

false

Not Recommended

Avoid using action and text or text-only buttons.
Avoid using non-button components (ex. Inputs, Switches, etc.).
Avoid using non-AI-related actions (ex. Global Settings, etc.).

Anatomy

General

38.17; 7.00

Input Field

The area where the user writes the prompt/request.

60.31; 6.80

Action Items

Area for possible actions that are related to the prompt.

73.88; 67.80

Additional Info (Optional)

If needed, additional information can be shown here. An icon should be used to replace a written label.

73.17; 80.80

Characters Count

The remaining characters are shown next to the submit button if the user gets near the maximum amount.

60.31; 92.20

Submit Button

Sends the request to the AI.

Interaction States

Interaction States without toolbar

Interaction States with toolbar

Behavior

Submit the Prompt

Users can initiate prompt processing by clicking the designated submit button. This straightforward method ensures a clear call to action and is particularly useful for users who prefer a visual interface. Alternatively , users can press the " Enter " key on their keyboard to submit the prompt. This option caters to users who prefer keyboard-centric interactions. To facilitate a seamless writing experience, users can employ the " Shift " + " Enter " keyboard shortcut to create a new text line within their prompt.

Input Overflow

The input field is initially configured with the height of a single line of text. When writing a longer prompt, the area is dynamically extended and offers space for up to five lines of text. Beyond this threshold, a scrollbar will automatically manifest, enabling seamless navigation through additional content.

Behavior_Grow

Character Count

Not near Maximum

If the user starts writing the prompt, the character count isn't displayed since the information is currently not relevant to the user.

Getting near Maximum

When approaching the maximum permitted character limit, which should be 75% of the total, the information on the number of characters becomes visible. The first indicates the number of characters already used, while the second represents the defined maximum limit.

Maximum almost reached

The first number changes color when 95% of the maximum allowed characters are reached. To make the user aware of this. If the user reaches the limit, no further input is possible.

Over Maximum

This scenario can occur when a user copies and pastes a command prompt from another source. The inserted text will be cut off at the maximum amount of possible characters.

Behavior_CharacterCount

Up to four icons can be placed on the first visible level in the toolbar area for additional actions. Should the need for further actions arise, the overflow icon seamlessly replaces the last icon. Users can conveniently access all excess actions via a menu, maintaining accessibility and clarity of navigation.

Behavior_Actions