# UI Components

## StreamingMessageView

The `StreamingMessageView` component comes already integrated within the SDK. It is rendered instead of the `MessageText` component if the [`isMessageAIGenerated` function](/chat/docs/sdk/react-native/v6/core-components/chat/#ismessageaigenerated) recognizes provided message object as AI generated.

It will display the message using a typewriter animation (similar to how ChatGPT does it) and it will automatically manage the rendering of the UI for you.

The component is overridable through the `StreamingMessageView` prop on the `Channel` component.

### Example usage

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

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

The above example will make sure that all the messages with a custom field `ai_generated` equal to `true` will be rendered with `StreamingMessageView`.

## AITypingIndicatorView

The component is not rendered by any other SDK component and thus needs to be imported and rendered by the integrators as a direct or indirect child of the `Channel` component. It is responsible for adding an indicator of the current AI state, and it will display if it is one of the following:

- `AI_STATE_GENERATING`
- `AI_STATE_THINKING`

### Example usage

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

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

The above example will make the indicator show right above the `MessageInput` component when the AI state matches one of the stated above.

## StopMessageStreamingButton

The purpose of the component is to allow a user to stop the AI response generation prematurely. It is rendered instead of `SendMessage` button if the AI state is one of the following:

- `AI_STATE_GENERATING`
- `AI_STATE_THINKING`

The component is overridable through the `StopMessageStreamingButton` prop on the `Channel` component.

<admonition type="note">

If you want to prevent rendering of the component altogether you can set the `StopMessageStreamingButton` to `null`.

</admonition>


---

This page was last updated at 2026-05-14T12:22:48.380Z.

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