---
title: 'Ai.MessageIndicator'
description: 'Indicates that an assistant message is being prepared.'
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.092Z
checksum: 6142d6c8667f079caa941e661e1aa02d5b6cbfb777dfccff1b58db6c4824ec9d
---

# Ai.MessageIndicator

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

## Import

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

## Description

`Ai.MessageIndicator` indicates that an assistant message is being prepared, for example after the user sends a message and before the first response arrives. It has the same header as [Ai.Message](/web/patterns-and-extensions/ai/Message/), and screen readers announce a translated text. Remove it when the response starts or the request ends.

Use [Ai.ActivityText](/web/patterns-and-extensions/ai/ActivityText/) when you want to describe a specific activity, such as “Searching” or “Preparing your answer”.


## Demos

### Waiting for a message


```tsx
render(<MessageIndicator name="Aino" avatar={<Avatar variant="secondary" hasLabel>
            A
          </Avatar>} />)
```

<!-- eufemia-properties-usage:start -->
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](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "label": {
      "doc": "Text for screen readers while waiting for the reply. Defaults to a translated text.",
      "type": "string",
      "status": "optional"
    },
    "variant": {
      "doc": "Show the content in a bubble, or as plain content without background.",
      "type": [
        "\"bubble\"",
        "\"plain\""
      ],
      "defaultValue": "\"bubble\"",
      "status": "optional"
    },
    "name": {
      "doc": "Name shown in the header, e.g. `You` or the name of the assistant.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "avatar": {
      "doc": "Decorative avatar shown beside the bubble, e.g. an [Avatar](/uilib/components/avatar/) with `hasLabel`. Provide the sender name in the message or its accessible label; the avatar is hidden from screen readers.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "timestamp": {
      "doc": "Time shown in the header after the name, e.g. `15:23`.",
      "type": "React.ReactNode",
      "status": "optional"
    }
  },
  "usageGuidance": "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](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```


## Translations

| Key       | nb-NO          | en-GB             | sv-SE          | da-DK          |
| --------- | -------------- | ----------------- | -------------- | -------------- |
| `loading` | Skriver svar … | Writing a reply … | Skriver svar … | Skriver svar … |