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.

2. React Component Customization

Create custom MessageBody components for both incoming and outgoing messages, then override them using the layout systems:

import { 
  AgentProviderContainer, 
  Conversation, 
  IncomingMessageLayout,
  OutgoingMessageLayout,
  IncomingMessageProps,
  OutgoingMessageProps 
} from '@sendbird/ai-agent-messenger-react';
import '@sendbird/ai-agent-messenger-react/index.css';

// Custom Incoming MessageBody component with custom max width
const CustomIncomingMessageBody = (props: IncomingMessageProps) => {
  return (
    <div
      style={{
        maxWidth: '350px', // Custom max width for incoming messages
        background: '#f3f4f6',
        borderRadius: '12px',
        padding: '12px 16px',
        wordWrap: 'break-word',
        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
      }}
    >
      {props.messageType === 'file' && props.file ? (
        <div>
          {props.file.type?.startsWith('image/') ? (
            <img
              src={props.file.url}
              alt={props.file.name || 'Image'}
              style={{ maxWidth: '300px', borderRadius: '8px' }}
            />
          ) : (
            <div style={{ padding: '8px', background: '#e5e7eb', borderRadius: '4px' }}>
              📎 {props.file.name || 'File'}
            </div>
          )}
          {props.message && (
            <div style={{ marginTop: '8px', color: '#374151' }}>
              {props.message}
            </div>
          )}
        </div>
      ) : (
        <div style={{ color: '#374151', lineHeight: '1.5' }}>
          {props.message}
        </div>
      )}
    </div>
  );
};

// Custom Outgoing MessageBody component with custom max width
const CustomOutgoingMessageBody = (props: OutgoingMessageProps) => {
  return (
    <div
      style={{
        maxWidth: '350px', // Custom max width for outgoing messages
        background: '#3b82f6',
        color: 'white',
        borderRadius: '12px',
        padding: '12px 16px',
        wordWrap: 'break-word',
        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
        marginLeft: 'auto', // Align to right
      }}
    >
      {props.messageType === 'file' && props.file ? (
        <div>
          {props.file.type?.startsWith('image/') ? (
            <img
              src={props.file.url}
              alt={props.file.name || 'Image'}
              style={{ maxWidth: '300px', borderRadius: '8px' }}
            />
          ) : (
            <div style={{ padding: '8px', background: 'rgba(255,255,255,0.2)', borderRadius: '4px' }}>
              📎 {props.file.name || 'File'}
            </div>
          )}
          {props.message && (
            <div style={{ marginTop: '8px' }}>
              {props.message}
            </div>
          )}
        </div>
      ) : (
        <div style={{ lineHeight: '1.5' }}>
          {props.message}
        </div>
      )}
    </div>
  );
};

function App() {
  return (
    <div style={{ width: '400px', height: '600px', border: '1px solid #ccc' }}>
      <AgentProviderContainer
        appId="YOUR_APP_ID"
        aiAgentId="YOUR_AI_AGENT_ID"
      >
        {/* Override both incoming and outgoing MessageBody components */}
        <IncomingMessageLayout.MessageBody component={CustomIncomingMessageBody} />
        <OutgoingMessageLayout.MessageBody component={CustomOutgoingMessageBody} />
        <Conversation />
      </AgentProviderContainer>
    </div>
  );
}

3. Dynamic Width Based on Content

Create adaptive bubble widths that change based on message content for both message types:

const AdaptiveIncomingMessageBody = (props: IncomingMessageProps) => {
  const getMaxWidth = (messageLength: number) => {
    if (messageLength < 50) return '200px';
    if (messageLength < 150) return '300px';
    if (messageLength < 300) return '400px';
    return '500px';
  };

  const maxWidth = getMaxWidth(props.message?.length || 0);

  return (
    <div
      style={{
        maxWidth,
        background: '#f8fafc',
        border: '1px solid #e2e8f0',
        borderRadius: '12px',
        padding: '12px 16px',
        wordWrap: 'break-word',
        transition: 'max-width 0.2s ease',
      }}
    >
      <div style={{ color: '#1f2937', lineHeight: '1.5' }}>
        {props.message}
      </div>
    </div>
  );
};

const AdaptiveOutgoingMessageBody = (props: OutgoingMessageProps) => {
  const getMaxWidth = (messageLength: number) => {
    if (messageLength < 50) return '200px';
    if (messageLength < 150) return '300px';
    if (messageLength < 300) return '400px';
    return '500px';
  };

  const maxWidth = getMaxWidth(props.message?.length || 0);

  return (
    <div
      style={{
        maxWidth,
        background: '#3b82f6',
        color: 'white',
        borderRadius: '12px',
        padding: '12px 16px',
        wordWrap: 'break-word',
        transition: 'max-width 0.2s ease',
        marginLeft: 'auto',
      }}
    >
      <div style={{ lineHeight: '1.5' }}>
        {props.message}
      </div>
    </div>
  );
};

// Use with both layouts
<AgentProviderContainer appId="YOUR_APP_ID" aiAgentId="YOUR_AI_AGENT_ID">
  <IncomingMessageLayout.MessageBody component={AdaptiveIncomingMessageBody} />
  <OutgoingMessageLayout.MessageBody component={AdaptiveOutgoingMessageBody} />
  <Conversation />
</AgentProviderContainer>

Important Notes

• You must use AgentProviderContainer instead of FixedMessenger when customizing message layouts
• Always test your custom widths on different screen sizes to ensure responsiveness
• Consider the overall conversation layout and readability when setting custom widths
• Both incoming and outgoing messages can be customized independently
• The marginLeft: 'auto' style is important for outgoing messages to maintain right alignment

Reference

No response

Screenshots

No response