How to customize the message bubble max width in the Conversation

[AhyoungRyu]

Versions

Summary

This guide explains how to customize the maximum width of message bubbles in the conversation view.

Guide & Snippet

iOS

Header

• Description

   // code block

Android

Header

• Description

   // code block

JS

Steps to Customize the Message Bubble Max Width

1. Understanding the default behavior

By default, message bubbles have a maximum width of 244px in normal view and 640px in expanded view. You can customize this behavior by overriding the MessageBody component using the IncomingMessageLayout and OutgoingMessageLayout systems.

1. Simple Approach (Recommended)

The easiest way to customize the message bubble max width is to use the maxBodyWidth prop on the default MessageBody components:

import {
  FixedMessenger,
  IncomingMessageLayout,
  OutgoingMessageLayout,
  type IncomingMessageProps,
  type OutgoingMessageProps
} from '@sendbird/ai-agent-messenger-react';

// Custom Incoming MessageBody with max width
const CustomIncomingMessageBody = (props: IncomingMessageProps) => {
  return (
    <IncomingMessageLayout.defaults.components.MessageBody
      {...props}
      maxBodyWidth={440} // Set your custom max width here
    />
  );
};

// Custom Outgoing MessageBody with max width
const CustomOutgoingMessageBody = (props: OutgoingMessageProps) => {
  return (
    <OutgoingMessageLayout.defaults.components.MessageBody
      {...props}
      maxBodyWidth={440} // Set your custom max width here
    />
  );
};

// Apply the custom components
function App() {
  return (
    <FixedMessenger
      appId="YOUR_APP_ID"
      aiAgentId="YOUR_AI_AGENT_ID"
    >
      <IncomingMessageLayout.MessageBody component={CustomIncomingMessageBody} />
      <OutgoingMessageLayout.MessageBody component={CustomOutgoingMessageBody} />
    </AIAgentMessenger>
  );
}

2. Full Customization of MessageBody

If you need more control over the message bubble styling beyond just the max width, you can create fully custom MessageBody components:

// Fully custom MessageBody with complete control
const AdvancedCustomMessageBody = (props: IncomingMessageProps) => {
  return (
    <div
      style={{
        maxWidth: '500px', // Custom max width
        background: '#f3f4f6',
        borderRadius: '12px',
        padding: '12px 16px',
        wordWrap: 'break-word',
      }}
    >
      {props.message}
    </div>
  );
};

Reference

No response

Screenshots

No response