How to customize the font style of sender name

[AhyoungRyu]

Versions

Summary

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

Guide & Snippet

iOS

Header

• Description

   // code block

Android

Customizing the Font Style or Color

This guide explains how to customize the appearance and layout of message bubbles in the Sendbird 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

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)
    )
}

JS

Customizing IncomingMessage SenderName Font Styles

This guide explains how to customize the font style of sender names displayed in IncomingMessage components in the Sendbird 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:

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

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

Step 2: Apply Custom Component

// src/App.tsx
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>
  );
}

Common Font Customizations

Here are some examples of different font style customizations you can apply:

// Bold and larger font
<div style={{ fontWeight: 'bold', fontSize: '16px' }}>
  {sender.nickname}
</div>

// Custom font family
<div style={{ fontFamily: 'Georgia, serif', fontSize: '14px' }}>
  {sender.nickname}
</div>

// Uppercase with letter spacing
<div style={{ textTransform: 'uppercase', letterSpacing: '1px', fontSize: '12px' }}>
  {sender.nickname}
</div>

Reference

No response

Screenshots

No response