Chat.MessageIndicator#

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

Import#

import { MessageIndicator } from '@dnb/eufemia/extensions/chat'
import '@dnb/eufemia/extensions/chat/style'
render(<MessageIndicator />)

Description#

Chat.MessageIndicator indicates that a reply is being prepared or another participant is typing. For human chats, show it only while your application receives a typing signal and provide a label such as "Customer support is typing". For an AI reply, it can indicate the wait before content arrives. It has the same header as Chat.Message, and screen readers announce a translated text. Remove it when the response starts or the request ends.

Use Chat.ActivityText when you want to describe a specific activity, such as “Searching” or “Preparing your answer”.

Demos#

Waiting for a message#

<MessageIndicator
  name="Aino"
  avatar={
    <Avatar variant="secondary" hasLabel>
      A
    </Avatar>
  }
/>