# UI Components

## StreamingMessageView

`StreamingMessageView` is integrated into the SDK. It replaces `MessageText` when [`isMessageAIGenerated`](https://getstream.io/chat/docs/sdk/react-native/v8/core-components/chat/#ismessageaigenerated) marks a message as AI-generated.

It renders the message with a typewriter animation and manages the UI for you.

Override via the `StreamingMessageView` prop on `Channel`.

## Best Practices

- Use `isMessageAIGenerated` to gate AI rendering explicitly.
- Keep AI UI components in predictable locations to avoid layout jumps.
- Render `AITypingIndicatorView` only when AI is active.
- Provide a stop action (`StopMessageStreamingButton`) for long generations.
- Use `null` for `StopMessageStreamingButton` only if you also provide another stop control.

### Example usage

```tsx
const isMessageAIGenerated = (message) => !!message.ai_generated;

const App = ({ children }) => (
  <Chat client={client} isMessageAIGenerated={isMessageAIGenerated}>
    {children}
  </Chat>
);
```

This renders any message with `ai_generated: true` using `StreamingMessageView`.

## AITypingIndicatorView

`AITypingIndicatorView` is not rendered automatically. Import and render it as a child of `Channel`. It shows when AI state is:

- `AI_STATE_GENERATING`
- `AI_STATE_THINKING`

### Example usage

```tsx
const isMessageAIGenerated = (message) => !!message.ai_generated;

const App = () => (
  <Chat client={client} isMessageAIGenerated={isMessageAIGenerated}>
    <Channel channel={channel}>
      <MessageList />
      <AITypingIndicatorView />
      <MessageInput />
    </Channel>
  </Chat>
);
```

This shows the indicator above `MessageInput` when the AI state matches.

## StopMessageStreamingButton

`StopMessageStreamingButton` lets users stop AI generation. It replaces the `SendMessage` button when AI state is:

- `AI_STATE_GENERATING`
- `AI_STATE_THINKING`

Override via the `StopMessageStreamingButton` prop on `Channel`.

<Admonition type="note">

To hide it entirely, set `StopMessageStreamingButton` to `null`.

</Admonition>


---

This page was last updated at 2026-08-24T16:04:58.707Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/ai/ui-components/](https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/ai/ui-components/).