UI Components

StreamingMessageView

StreamingMessageView is integrated into the SDK. It replaces MessageText when isMessageAIGenerated marks a message as AI-generated.

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

To override it, provide your own component through WithComponents:

import { WithComponents } from "stream-chat-react-native";

<WithComponents overrides={{ StreamingMessageView: MyStreamingMessageView }}>
  <Channel channel={channel}>{/* ... */}</Channel>
</WithComponents>;

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

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

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

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

This shows the indicator above MessageComposer when the AI state matches.

Props

StopMessageStreamingButton

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

• AI_STATE_GENERATING
• AI_STATE_THINKING

To override it, provide your own component through WithComponents:

import { WithComponents } from "stream-chat-react-native";

<WithComponents overrides={{ StopMessageStreamingButton: MyStopButton }}>
  <Channel channel={channel}>{/* ... */}</Channel>
</WithComponents>;