AI chat¶

AI chat enables users to interact with the product using natural language. It supports tasks that benefit from suggestions, step-by-step help, or open-ended input.

Usage ---¶

AI chat is useful when users describe tasks in their own words and expect structured responses or guidance.

When to use¶

• For tasks that are complex, open-ended, or benefit from iteration.
• When natural language input improves user experience.
• When users need help without navigating multiple UI elements.

Best practices¶

• Refer to conversational design guidelines.
• Always allow users to review, edit, or retry.
• Keep the conversation focused, avoid unnecessary messages.
• Place the AI in a clearly defined visual space.
• Output can be styled as needed using the typography system.

Design ---¶

Elements¶

1. Chat input
2. AI message
3. User message

Layouts¶

Full page layout¶

Use it when AI is the main feature. Typically triggered from a dedicated navigation item, this layout makes AI functionality easily accessible as a primary experience.

The chat content area has a maximum width of 720px. It scales fluidly on smaller screens and remains centered on larger ones to maintain readability and visual balance.

Side panel layout¶

Use it when AI supports tasks within the current view. In this case, the AI appears as an on-demand assistant without disrupting the workflow in a side panel.

• When the AI feature is globally accessible, the side panel can be triggered from the application header, ensuring consistent entry across all screens.
• For contextual use, place the trigger near the related feature or content.

Initial screen¶

Before the first message, show an initial screen to set expectations and explain what the AI can do. As soon as the user prompts a message, the initial screen should dissapear.

1. AI icon
2. Salutation: A brief, welcoming message that sets a conversational tone.
3. Prompt categories (optional): When suggestions exceed a manageable number, group them by topic or function using summary chips
4. Prompt suggestions (optional): Curated prompts or example questions that reflect common or relevant actions.
5. Chat input

Errors and AI limitations¶

System errors, such as timeouts or backend crashes, occur outside the AI’s reasoning. These should be represented with inline notifications, placed above the input prompt.

When the AI cannot complete a task due to a known limitation, it should respond within the conversation. These are not treated as errors and do not require a separate notification.