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.

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

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 />
      <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.