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 | |
|---|---|---|
label | string | (optional) Label of the conversation for screen readers. Defaults to a translated text. |
scrollBehavior | "turn" "end" | (optional) Use turn to scroll a new message from the user near the top, and let the reply stream in below it. Use end to follow the end of the conversation while the reply streams in. |
id | string | (optional) Identifier used to scroll the conversation from elsewhere with Ai.useConversation(id). |
children | React.ReactNode | (optional) The messages of the conversation. |
items | Array<AiConversationItem> | (optional) Data-driven messages with stable unique IDs, optional from and keepMounted, and a render callback. Takes precedence over children. The wrapper owns the DOM ID. |
renderDriver | AiConversationDriver | (optional) Opt-in rendering driver. Import createConversationVirtualization separately from @dnb/eufemia/extensions/ai/Virtualization. Requires items. The virtualized log leaves announcements to the application. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Ai.useConversation#
Ai.useConversation(id) returns these functions. Without an id, it uses the conversation it is inside.
| Type | Description | |
|---|---|---|
scrollToEnd | function | (optional) Scroll to the end and follow new content. |
scrollToStart | function | (optional) Scroll to the start of the conversation. |
scrollToMessage | function | (optional) Scroll to the message with the given id. Returns false when the message is not found. |
Ai.useConversationVisibility#
Ai.useConversationVisibility(id) returns these values. Without an id, it uses the conversation it is inside. The messages are only tracked while the hook is used.
| Type | Description | |
|---|---|---|
currentTurnId | string null | (optional) The id of the message from the user that starts the turn the user is reading. Stays set when the message is scrolled above the view. |
visibleMessageIds | Array<string> | (optional) The ids of the messages that are visible, in the order they are shown. |
Ai.useConversationScrollState#
Ai.useConversationScrollState(id) returns these values. Without an id, it uses the conversation it is inside.
| Type | Description | |
|---|---|---|
isAtStart | boolean | (optional) true when the conversation is scrolled to the start. |
isAtEnd | boolean | (optional) true when the conversation is scrolled to the end. |
hasUnreadMessages | boolean | (optional) true when new incoming messages arrived while reading older history. Clears at the end. |
Translations#
| Key | nb-NO | en-GB | sv-SE | da-DK |
|---|---|---|---|---|
conversationLabel | Samtale | Conversation | Konversation | Samtale |
scrollToBottom | Gå til siste melding | Go to latest message | Gå till senaste meddelandet | Gå til seneste besked |
newMessage | Ny melding | New message | Nytt meddelande | Ny besked |