How to change the alignment of the center content Areas in the Conversation HeaderView

[tezpark]

Versions

Summary

How to change the alignment of the center content Areas in the Conversation HeaderView

Guide & Snippet

iOS

Changing titleView alignment in Conversation Header

This guide explains how to change the alignment of the titleView in the Conversation Header in the conversation message list.

• You can set the alignment of the conversation header titleView using the contentAlignment property in the AIAgentMessenger.config.conversation.header.

Example:

AIAgentMessenger.config.conversation.header.contentAlignment = .center

Explanation:

• contentAlignment = .leading → Leading-aligns the titleView in the header (default).
• contentAlignment = .center → Center-aligns the titleView in the header.
• contentAlignment = .trailing → Trailing-aligns the titleView in the header.

Android

Steps to Customize Conversation Header content Gravity

The following steps show how to change only the Conversation header's gravity (alignment) while keeping the rest of the UI/behavior intact. Unlike title customization, no subclass is required—just set the gravity on the provided component.

Step 1: Register a ConversationModule with header gravity

Call the provider and set the header gravity using setContentGravity(...).

AIAgentModuleProviders.conversation = ConversationModuleProvider { context, currentTheme, currentThemeMode, settings, args ->
    ConversationModule(context, currentTheme, currentThemeMode, settings, args,
        headerComponent = ConversationHeaderComponent(
            context,
            currentTheme,
            currentThemeMode,
            settings,
            args
        ).apply {
            // Choose one: Gravity.START, Gravity.CENTER, or Gravity.END
            setContentGravity(Gravity.CENTER)
        }
    )
}

Important: This registration must be done before calling MessengerLauncher.attach() or launching MessengerActivity.
The provider must be ready before the screen is created in order for the custom component to take effect.

React

Changing titleView alignment in Conversation Header

This guide explains how to change the alignment of the titleView in the Conversation Header in the conversation message list.

You can set the alignment of the conversation header titleView using the titleAlign property in the ConversationHeaderLayout template.

Example:

import { AgentProviderContainer, ConversationHeaderLayout } from '@sendbird/ai-agent-messenger-react';

const CustomTemplate = () => {
  return <ConversationHeaderLayout.defaults.template titleAlign={'center'} />;
};

export const App = () => {
  return (
    <AgentProviderContainer>
      <ConversationHeaderLayout.Template template={CustomTemplate} />
    </AgentProviderContainer>
  );
};

Explanation:

• titleAlign={'start'} - Left-aligns the titleView in the header
• titleAlign={'center'} - Center-aligns the titleView in the header
• titleAlign={'end'} - Right-aligns the titleView in the header

Reference

No response

Screenshots

Leading	Center	Trailing