How to customize the position of senderName, sentTime, and senderAvatar in message bubbles

[AhyoungRyu]

Versions

Summary

This guide explains how to change the position and order of the sender name, sent time, and sender avatar in message bubbles.

Guide & Snippet

iOS

Header

• Description

   // code block

Android

Layout Customization

Overview

You can customize the position and layout of message components by overriding the XML layout files in your application. Each message container has its own layout file that can be customized.

Layout Files

The SDK provides three main layout files for message containers:

• aa_view_other_message.xml: Layout for messages from other participants (LEFT container type)
• aa_view_my_message.xml: Layout for messages from current user (RIGHT container type)
• aa_view_admin_message.xml: Layout for admin/system messages (PLAIN container type)

How to Override Layouts

Step 1: Create Layout Files in Your App

Create layout files with exactly the same name in your app's res/layout/ directory:

your-app/
├── src/main/res/layout/
│   ├── aa_view_other_message.xml
│   ├── aa_view_my_message.xml
│   └── aa_view_admin_message.xml

Step 2: Customize Layout Structure

You can modify the position, size, and arrangement of views in these layouts:

Important Requirements

1. Keep Required View IDs

All views must maintain their original IDs for SDK functionality:

• ivProfile: Profile image view
• tvNickname: Nickname text view
• tvSentAt: Sent time text view
• contentPanel: Content container
• statusContainer: Status container (MyMessage only)
• statusView: Status view (MyMessage only)
• messageTemplateView: Message template view (OtherMessage only)
• suggestedRepliesViewStub: Suggested replies view stub (OtherMessage only)

2. Don't Remove Views

Never remove views from the layout XML. If you want to hide a view, use the Container class methods to control visibility:

class CustomOtherMessageContainer(context: Context) : OtherMessageContainer(context) {
    
    override fun drawProfile(profileView: ImageView, message: BaseMessage, messageUIParams: MessageUIParams) {
        // Hide profile image
        profileView.visibility = View.GONE
    }
    
    override fun drawNickname(textView: TextView, message: BaseMessage, messageUIParams: MessageUIParams) {
        // Hide nickname
        textView.visibility = View.GONE
    }
    
    override fun drawSentAt(textView: TextView, message: BaseMessage, messageUIParams: MessageUIParams) {
        // Hide sent time
        textView.visibility = View.GONE
    }
}

JS

Customizing the Layout and Components of Message Bubbles

This guide explains how to customize the position and appearance of elements like senderName, sentTime, and senderAvatar in message bubbles using the Sendbird AI Agent React SDK.

Customizing the Entire Layout (Custom Template)

You can fully control the arrangement and structure of message bubble elements by providing your own template to the existing layout system.

Step 1: Create a Custom Message Template

// src/components/CustomIncomingMessageTemplate.tsx
import React from 'react';
import { IncomingMessageLayout } from '@sendbird/ai-agent-messenger-react';
import type { IncomingMessageProps } from '@sendbird/ai-agent-messenger-react';

export function CustomIncomingMessageTemplate(props: IncomingMessageProps) {
  const { components } = IncomingMessageLayout.useContext();
  
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
      {/* Top row: Sender name and time */}
      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }}>
        <components.SenderName {...props} />
        <components.SentTime {...props} />
      </div>
      
      {/* Middle row: Avatar and message body */}
      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '8px' }}>
        <components.SenderAvatar {...props} />
        <components.MessageBody {...props} />
      </div>
    </div>
  );
}

Step 2: Apply the Custom Template

// src/App.tsx
import { FixedMessenger, IncomingMessageLayout } from '@sendbird/ai-agent-messenger-react';
import { CustomIncomingMessageTemplate } from './components/CustomIncomingMessageTemplate';

function App() {
  return (
    <FixedMessenger appId="YOUR_APP_ID" aiAgentId="YOUR_AI_AGENT_ID">
      <IncomingMessageLayout.Template template={CustomIncomingMessageTemplate} />
    </FixedMessenger>
  );
}

Reference

No response

Screenshots

No response