Overview

The AI Divider assists users in distinguishing the context of different parts of the conversation. This feature is designed to be generated automatically, making it seamlessly appear as users transition between products or navigate within them.

Overview

Overview

When to use

The divider should be employed in a conversational AI panel if it is, e.g., seamlessly implemented among different products. This provides users with the ability to trace individual conversations and clearly identify which part belongs to each context.

2
do
false

Recommended

  • Show product name when switching between products.
  • Show the page name when navigating within the same product.
  • Show conversation name when switching between conversations.
  • Show context name when switching between contexts on the same page.
dont
false

Not Recommended

  • Avoid displaying hierarchies or breadcrumbs in the title.
  • Avoid displaying dividers if there are no requests or responses associated with the context.

Anatomy

Image
1
43.11; 15.38
The lines on each side serve as visual separator. They change their width according to the length of the label.
2
40.97; 67.13
Displays the current context of the conversation, which can be the product or a specific section within it.

Behavior

The AI Divider component appears automatically when a user initiates a conversation or switches between different contexts within the interface. This feature ensures that users are immediately aware of the transition and can quickly identify the beginning of a new context within the conversation.

As the conversation progresses and potentially extends beyond the initial viewport, the AI Divider component adapts its position to remain visible and easily accessible to the user. Specifically, the divider sticks to the top of the chat panel, ensuring that it remains within the user's field of view. This behavior allows users to reference the context of the ongoing conversation quickly.

Scroll (1)

Responsiveness

To ensure good readability, the text within the divider should not exceed two lines. In the case of very long labels, these are truncated at the end.

In addition, the line to the right and left of the text should have a minimum width of 6% of the total width of the container to ensure that the divider is recognizable as such.

Responsiveness_02

References