Ai.ActivityText#

Experimental: The AI extension and its component APIs may change in the future. Please give us feedback on your experience with them.

Import#

import { ActivityText } from '@dnb/eufemia/extensions/ai'
import '@dnb/eufemia/extensions/ai/style'
render(<ActivityText>Searching …</ActivityText>)

Description#

Ai.ActivityText describes the assistant's current activity, such as “Thinking”, “Searching” or “Preparing your answer”. Provide the activity text as children. It inherits the surrounding text color.

The current visual treatment uses a moving highlight. When the user prefers reduced motion, the text is shown without animation.

Use Ai.MessageIndicator to indicate that an assistant message is being prepared before its content arrives. Use Ai.ActivityText when you have a specific activity to describe.

ActivityText only provides presentation. It does not create a live region or announce text changes. When the activity needs to be announced, place it in AriaLive with variant="content" and atomic. Keep that region mounted while its text changes, and avoid nesting it in another live region.

Demos#

Assistant activity#

<ActivityText>Looking up your transactions …</ActivityText>

Announced activity#

Use AriaLive when activity changes should be announced. Keep the region mounted and update the activity text.

const Activity = () => {
  const [text, setText] = useState('Ready')
  return (
    <>
      <AriaLive variant="content" atomic>
        <ActivityText>{text}</ActivityText>
      </AriaLive>
      <Button
        top
        onClick={() =>
          setText(
            text === 'Ready' ? 'Looking up your transactions …' : 'Ready'
          )
        }
      >
        Change activity
      </Button>
    </>
  )
}
render(<Activity />)