Ai.ActivityText#

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

Demos#

Assistant activity#

Looking up your transactions …

<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.

Ready

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 />)

Suggest an edit