Chat.ActivityText#

Experimental: The Chat 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/chat'
import '@dnb/eufemia/extensions/chat/style'
render(<ActivityText>Searching …</ActivityText>)

Description#

Chat.ActivityText describes an ongoing activity in the conversation, such as “Searching” or “Preparing your answer”. The activity can be performed by a person, an AI assistant or the application. 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 Chat.MessageIndicator to indicate that a reply is being prepared before its content arrives. Use Chat.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 />)