Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. Read about intended use and customization.
Experimental: The AI extension and its component APIs may change in the future. Please give us feedback on your experience with them.
Properties#
| Type | Description | |
|---|---|---|
from | "user" "assistant" | (optional) Who wrote the message. User messages are placed on the right. Defaults to assistant. |
id | string | (optional) Unique DOM id used by the conversation scrolling and visibility hooks. |
variant | "bubble" "plain" | (optional) Show the content in a bubble, or as plain content without background. |
name | React.ReactNode | (optional) Name shown in the header, e.g. You or the name of the assistant. |
timestamp | React.ReactNode | (optional) Time shown in the header after the name, e.g. 15:23. |
avatar | React.ReactNode | (optional) Decorative avatar shown beside the bubble, e.g. an Avatar with hasLabel. Provide the sender name in the message or its accessible label; the avatar is hidden from screen readers. |
grouped | boolean | (optional) Continues the previous sender group. Retains avatar alignment while hiding the repeated avatar. |
aiGenerated | boolean | (optional) Show a tag telling that the content is generated by AI. |
actions | React.ReactNode | (optional) Content shown below the message, e.g. Ai.Actions. |
children | React.ReactNode | (optional) The content of the message. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Translations#
| Key | nb-NO | en-GB | sv-SE | da-DK |
|---|---|---|---|---|
aiGenerated | KI-generert | AI-generated | AI-genererat | AI-genereret |