How to customize the font style of SentTime in message bubbles

[AhyoungRyu]

Versions

Summary

This guide describes how to apply custom font styles to the SentTime (timestamp) in chat 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 sent time styling.

Overview

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

• OtherMessageContainer: Messages from other members (left-aligned)
• MyMessageContainer: Messages from current user (right-aligned)

Each 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:

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

2. MyMessageContainer (Right-aligned)

Used for messages sent by the current user.

Available customization methods:

• drawSentAt(textView: TextView, message: BaseMessage, messageUIParams: MessageUIParams)
  ConversationMessageListUIParams)`

Available customization methods:

• initialize(contentView: View, eventListeners: MessageEventListeners, messageListUIParams: ConversationMessageListUIParams, messageType: MessageType)
• draw(channel: GroupChannel, message: BaseMessage, messageUIParams: MessageUIParams, messageListUIParams: ConversationMessageListUIParams)

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 drawSentAt(textView: TextView, message: BaseMessage, messageUIParams: MessageUIParams) {
        super.drawSentAt(textView, message, messageUIParams)

        // Customize sent time appearance
        textView.setTextColor(Color.BLUE)
        textView.textSize = 12f
    }
}

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)
            MessageContainerType.RIGHT -> CustomMyMessageContainer(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 the Font Style of SentTime (Outgoing & Incoming)

This guide explains how to customize the font style of the SentTime (timestamp) component for both outgoing and incoming message bubbles in the Sendbird AI Agent React SDK.

Overview

The SentTime component is rendered as part of both outgoing and incoming message layouts. To customize its font style, you can override the default component with your own custom implementation.

Step 1: Create a Custom SentTime Component

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

type SentTimeProps = Pick<OutgoingMessageProps, 'createdAt'> | Pick<IncomingMessageProps, 'createdAt'>;

export function CustomSentTime({ createdAt }: SentTimeProps) {

  if (!createdAt) return null;

  // Format the timestamp as needed
  const timeString = new Date(createdAt).toLocaleTimeString([], { 
    hour: '2-digit', 
    minute: '2-digit' 
  });

  return (
    <div
      style={{
        // Custom font styling
        fontFamily: 'Fira Mono, monospace',
        fontSize: '11px',
        fontWeight: 500,
        color: '#FF9500',
        letterSpacing: '0.02em',
        lineHeight: 1.2,
        textAlign: 'right',
        padding: '2px 0',
      }}
    >
      {timeString}
    </div>
  );
}

Step 2: Apply the Custom SentTime Component

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

function App() {
  return (
    <FixedMessenger
      appId="YOUR_APP_ID"
      aiAgentId="YOUR_AI_AGENT_ID"
    >
      <OutgoingMessageLayout.SentTime component={CustomSentTime} />
      <IncomingMessageLayout.SentTime component={CustomSentTime} />
    </AIAgentMessenger>
  );
}

Reference

No response

Screenshots

No response