Shortcut menus
Use shortcut menus to help users modify behavior, add context, and execute quick actions.
Use shortcut menus to help users modify behavior, add context, and execute quick actions.
Shortcut menus can be invoked through typing special characters or selecting icon buttons. Providing shortcut menu access through both keystrokes and buttons supports both discoverability for new users through visible buttons and efficiency for power users through keystrokes. For example, the prompt input secondary actions slot can display a group of buttons that, when clicked, invoke a menu. Additionally, typing special characters like @ or / in the text area can trigger menus.
Users interact with generative AI tools like code assistants or content generators through natural language prompts. Shortcut menus can enhance these prompts by allowing users to complete actions like specifying a mode and inserting references to provide additional context while maintaining the flow of their text input. For example, a developer might activate /code mode when asking for code analysis, or a content creator might reference specific documentation while requesting a text summary.
Actions help users modify system behavior or execute common tasks. By typing / or using an icon button, users can access different types of actions like setting modes ( which sets the framework for how the system should process and respond to user input) or using quick commands (like clearing context or getting help). For example, a user might set a mode to specify how their prompts should be interpreted, or execute a quick action to start a new conversation.
References are interactive shortcuts that let users add context to their prompts. Users can select files, code snippets, and other data sources without manually copying file paths. This functionality creates a more efficient way to enhance prompts without disrupting the natural flow of conversation or requiring technical knowledge of file systems and paths.
Shortcuts open specific menu types. This helps users by showing only relevant options like modes when they need to change behavior, or references when they need to add context. For example, typing / opens a menu of modes or quick actions, while typing @ opens a menu for items that can be referenced within a prompt.
Symbol | Use | Example |
|---|---|---|
/ | Performing quick actions | In a prompt input, a user enacts a quick action through a forward slash like /clear to remove all references, files and context currently in the prompt input. |
@ | References for inserting files, usernames, or other resources | In a prompt input, a user requests a cost analysis and provides the system with additional context by referencing a .csv file in their prompt via a shortcut menu. |
Quick actions provide users with access to helpful commands. They reduce the need to manually type out common commands like help or clear. Quick actions appear alongside modes in the shortcut menu when using the / command or button, making them easy to discover and execute. Common quick actions include clearing the conversation or prompt input, accessing help documentation, or starting a new chat.
Setting a mode tells the system how to interpret user input entered in a prompt input. For example, selecting /dev for technical, development-related prompts. Users can set a mode with the prompt input with keystrokes or icon buttons. Typing / at the beginning of a prompt will invoke a shortcut menu for setting modes. Alternatively a user can set a mode at any time through an icon button.
Users can add additional context to a prompt by inserting references to relevant data sources that the system is connected to, either by using a keystroke like @ or by clicking an icon button.
Users can highlight the placeholder variable in their inserted prompt template and use @ to replace them with actual references. For example, when a template contains <dataset>, users can swap it with a specific data reference through the reference menu, customizing the template while maintaining the inserted template’s structure.
Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.
Use end punctuation, except in headers and buttons. Don’t use exclamation points.
Use present-tense verbs and active voice.
Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.
Avoid directional language.
For example: use previous not above, use following not below.
Use device-independent language.
For example: use choose or select not click.
Use descriptive names for categories of reference types within suggestion groups to help users select relevant items within shortcut menus.
For example: a shortcut menu triggered by a / may have both quick actions and modes labeled as Modes and Quick actions.
Describe the special characters and the shortcut menus they invoke separated by commas.
For example: Use / to set a mode and quick actions, @ to add context.
Match the label to the keyboard character that triggers the same menu.
For example: / button for modes and actions menu, @ button for references menu.
Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.
Make sure to define ARIA labels aligned with the language context of your application.
Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.
Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.