How to Customize the Sender Name Font Style

This guide shows how to customize the font style of sender names displayed in incoming message bubbles.

You can customize the sender name font by subclassing SBAUserNameView and overriding the setupStyles() method.

Step 1: Create a Custom User Name View

Create a subclass and override the setupStyles() method to change the font:

import SendbirdAIAgentMessenger
import UIKit

class CustomUserNameView: SBAUserNameView {
    override func setupStyles() {
        super.setupStyles()

        // Define custom font (bold, size 16)
        let customFont = UIFont.systemFont(ofSize: 16, weight: .bold)

        // Change sender name button font
        self.nameButton.titleLabel?.font = customFont

        // Optional: Also change color if needed
        // self.nameButton.setTitleColor(UIColor.systemBlue, for: .normal)
    }
}

Step 2: Register the Custom User Name View

Register your custom view before presenting the conversation view:

SBAModuleSet.ConversationModule.List.Cell.UserNameView = CustomUserNameView.self

Notes:

• The setupStyles() method is called when the view is configured
• nameButton is the button that displays the sender name
• You can customize both font and color properties
• Changes apply to all incoming message sender names
• Use UIFont system fonts or custom fonts loaded in your app

Customizing the Font Style or Color

This guide explains how to customize the appearance and layout of message bubbles in the Delight AI Agent Android SDK, including sender name styling.

Overview

The AI Agent SDK provides message containers that handle by message alignments:

• OtherMessageContainer: Messages from other members (left-aligned)

The container provides overridable methods to customize individual UI components.

Message Container Types

Step 1: OtherMessageContainer (Left-aligned)
Used for messages from other participants in the conversation.

Available customization methods:

• drawNickname(textView: TextView, message: BaseMessage, messageUIParams: MessageUIParams)

Implementation Guide

Step 1: Create Custom Message Container

Create a custom container class that extends the appropriate base container:

class CustomOtherMessageContainer(context: Context) : OtherMessageContainer(context) {
    private val appContext = context

    override fun drawNickname(textView: TextView, message: BaseMessage, messageUIParams: MessageUIParams) {
        super.drawNickname(textView, message, messageUIParams)

        // Apply custom font
        val customFont = ResourcesCompat.getFont(appContext, R.font.custom_korean)
        textView.typeface = customFont

        // Set custom text color
        textView.setTextColor(Color.RED)
    }
}

Step 2: Create Custom Message Container Generator

Implement a custom generator to use your custom containers:

class CustomMessageContainerGenerator(
    private val generator: MessageContainerGenerator
) : MessageContainerGenerator {

    override fun generate(context: Context, containerType: MessageContainerType): MessageContainerContract {
        return when (containerType) {
            MessageContainerType.LEFT -> CustomOtherMessageContainer(context)
            else -> generator.generate(context, containerType)
        }
    }
}

Step 3: Apply Custom Generator

Apply your custom generator to the conversation adapter:

// In your activity or fragment
AIAgentAdapterProviders.conversation = ConversationAdapterProvider { channel, uiParams, generator ->
    ConversationMessageListAdapter(
        channel,
        uiParams,
        CustomMessageContainerGenerator(generator)
    )
}

Customizing IncomingMessage SenderName Font Styles

This guide explains how to customize the font style of sender names displayed in IncomingMessage components in the Delight AI Agent React SDK.

Overview

While global typography customization is possible through the theme system, the recommended approach for customizing sender names is to create a custom SenderName component to avoid unintended side effects on other components.

Step 1: Create Custom Component

Create a custom component for precise control over sender name font styling:

import type { IncomingMessageProps } from '@sendbird/ai-agent-messenger-react';

export const CustomIncomingSenderName = ({ sender }: Pick<IncomingMessageProps, 'sender'>) => {
  return (
    <div
      style={{
        // Custom font styling
        width: '100%',
        fontWeight: 600,
        fontSize: '14px',
        lineHeight: '18px',
        color: '#aaa',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      }}
    >
      {sender.nickname}
    </div>
  );
};

Step 2: Apply Custom Component

import { FixedMessenger, IncomingMessageLayout } from '@sendbird/ai-agent-messenger-react';
import { CustomIncomingSenderName } from './components/CustomIncomingSenderName';

function App() {
  return (
    <FixedMessenger
      appId={'YOUR_APP_ID'}
      aiAgentId={'YOUR_AI_AGENT_ID'}
    >
      <IncomingMessageLayout.SenderName component={CustomIncomingSenderName} />
    </FixedMessenger>
  );
}

Notes:

• The default sender name truncates long names with ellipsis. Keep similar truncation styles in a custom component unless you intentionally want wrapping.

Customizing IncomingMessage SenderName Font Styles

This guide explains how to customize the font style of sender names displayed in IncomingMessage components in the Delight AI Agent React Native SDK.

Overview

While global typography customization is possible through the theme.typography prop, the recommended approach for customizing sender names is to create a custom SenderName component to avoid unintended side effects on other components.

Step 1: Create Custom Component

import { Text, View } from 'react-native';
import type { IncomingMessageProps } from '@sendbird/ai-agent-messenger-react-native';

export const CustomIncomingSenderName = ({ sender }: Pick<IncomingMessageProps, 'sender'>) => {
  return (
    <View style={{ flex: 1, paddingVertical: 5, paddingEnd: 7, alignItems: 'flex-start' }}>
      <Text
        numberOfLines={1}
        style={{
          fontWeight: '600',
          fontSize: 14,
          lineHeight: 18,
          color: '#AAAAAA',
        }}
      >
        {sender.nickname}
      </Text>
    </View>
  );
};

Step 2: Apply Custom Component

import { createMMKV } from 'react-native-mmkv';
import {
  AIAgentProviderContainer,
  AnonymousSessionInfo,
  FixedMessenger,
  IncomingMessageLayout,
} from '@sendbird/ai-agent-messenger-react-native';

import { CustomIncomingSenderName } from './components/CustomIncomingSenderName';

const nativeModules = {
  mmkv: createMMKV(),
};

function App() {
  return (
    <AIAgentProviderContainer
      appId={'YOUR_APP_ID'}
      aiAgentId={'YOUR_AI_AGENT_ID'}
      nativeModules={nativeModules}
      userSessionInfo={new AnonymousSessionInfo()}
    >
      <IncomingMessageLayout.SenderName component={CustomIncomingSenderName} />

      <FixedMessenger windowMode={'floating'} />
    </AIAgentProviderContainer>
  );
}

Notes:

• The default sender name truncates long names with numberOfLines={1}. Keep the same setting in a custom component unless you intentionally want wrapping.
• To change the font globally instead, pass theme.typography to AIAgentProviderContainer. The default sender name uses the caption1 variant.
• Custom fonts must be linked in your app before you can reference them by fontFamily.