How to customize the typing indicator in the conversation #79

How to Customize the Typing Indicator Dot Color

This guide shows how to customize the typing indicator appearance by changing the dot color displayed when the AI agent or user is typing.

You can customize the typing indicator by subclassing SBATypingIndicatorMessageCell and overriding the layoutContents(with:) method.

Step 1: Create a Custom Typing Indicator Cell

Create a subclass and override the layoutContents() method to replace the default typing indicator with a custom label:

import SendbirdAIAgentMessenger
import UIKit

class CustomTypingIndicatorMessageCell: SBATypingIndicatorMessageCell {
    private lazy var customTypingLabel: UILabel = {
        let label = UILabel()
        label.text = "✍️ Typing..."
        label.font = UIFont.systemFont(ofSize: 14, weight: .medium)
        label.textColor = UIColor(hex: "#7A50F2")
        label.backgroundColor = UIColor(hex: "#7A50F2").withAlphaComponent(0.1)
        label.layer.cornerRadius = 17
        label.layer.masksToBounds = true
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        label.widthAnchor.constraint(equalToConstant: 100).isActive = true
        label.heightAnchor.constraint(equalToConstant: 34).isActive = true
        return label
    }()

    override func layoutContents(with configuration: SBABaseMessageCellParams) -> UIView {
        SBALinearLayout.vStack(alignment: .left) {
            SBALinearLayout.hStack(alignment: .center) {
                self.profileView?.set(padding: .init(left: 12, bottom: messageTopSpacing))
                self.userNameView?.set(padding: .init(left: 8, bottom: messageTopSpacing))
                SBASpacer()
            }
            SBALinearLayout.hStack {
                self.bubbleLayoutSlot
                    .set(view: self.customTypingLabel)
                    .set(margin: .init(left: 38))
                SBASpacer()
            }
        }
    }
}

// MARK: - UIColor Extension (Hex Support)
extension UIColor {
    convenience init(hex: String) {
        var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)
        hexSanitized = hexSanitized.replacingOccurrences(of: "#", with: "")

        var rgb: UInt64 = 0
        Scanner(string: hexSanitized).scanHexInt64(&rgb)

        let red = CGFloat((rgb & 0xFF0000) >> 16) / 255.0
        let green = CGFloat((rgb & 0x00FF00) >> 8) / 255.0
        let blue = CGFloat(rgb & 0x0000FF) / 255.0

        self.init(red: red, green: green, blue: blue, alpha: 1.0)
    }
}

Step 2: Register the Custom Typing Indicator Cell

Register your custom cell before presenting the conversation view:

SBAModuleSet.ConversationModule.List.TypingIndicatorMessageCell = CustomTypingIndicatorMessageCell.self

Notes:

• The layoutContents(with:) method is called when the cell's layout is configured
• Override layoutContents(with:) to replace the default typing bubble with a custom view
• The typing indicator appears at the bottom of the conversation when someone is typing

Steps to Customize the Typing Indicator

Step 1: Create a custom view that represents the typing indicator

You should create a view (CustomTyingIndicator) that visually represents the typing state.
This view will be used in your custom ViewHolder.

val customTypingView = CustomTyingIndicator(context)

Step 2: Create a ViewHolder that wraps the custom view

Extend MessageViewHolder and bind your custom view for the typing indicator.

class CustomTypingIndicatorViewHolder(
    layout: View,
    messageListUIParams: ConversationMessageListUIParams
) : MessageViewHolder(layout, messageListUIParams) {
    override fun bind(channel: GroupChannel, message: BaseMessage, messageUIParams: MessageUIParams) {
        // Optional: implement custom binding logic if needed
    }
}

Step 3: Extend ConversationMessageListAdapter and return your custom ViewHolder

Override onCreateViewHolder to detect VIEW_TYPE_TYPING_INDICATOR and return the custom ViewHolder.

class CustomConversationAdapter(
    channel: GroupChannel,
    private val messageListUIParams: ConversationMessageListUIParams,
    containerGenerator: MessageContainerGenerator
) : ConversationMessageListAdapter(channel, messageListUIParams, containerGenerator) {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MessageViewHolder {
        if (viewType == MessageType.VIEW_TYPE_TYPING_INDICATOR.value) {
            return CustomTypingIndicatorViewHolder(
                CustomTyingIndicator(parent.context),
                messageListUIParams
            )
        }
        return super.onCreateViewHolder(parent, viewType)
    }
}

Step 4: Register your custom adapter using AIAgentAdapterProviders

Finally, inject the adapter into your AI Agent configuration:

AIAgentAdapterProviders.conversation =
    ConversationAdapterProvider { channel, uiParams, containerGenerator ->
        CustomConversationAdapter(channel, uiParams, containerGenerator)
    }

How to customize the typing indicator appearance in the conversation

You can customize the typing indicator by replacing the TypingIndicator component using IncomingMessageLayout.

Step 1: Create a Custom TypingIndicator Component

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

const CustomTypingIndicator = ({ thinkingMessage }: IncomingMessageProps) => {
  if (thinkingMessage) {
    return (
      <div style={{
        padding: '12px',
        color: '#7C3AED',
      }}>
        {thinkingMessage}
      </div>
    );
  }

  return (
    <div style={{
      backgroundColor: '#F3E8FF',
      padding: '12px',
      borderRadius: '12px',
      color: '#7C3AED',
    }}>
      ✍️ Typing...
    </div>
  );
};

Step 2: Register the Custom Component

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

function App() {
  return (
    <AgentProviderContainer
      appId={'YOUR_APP_ID'}
      aiAgentId={'YOUR_AI_AGENT_ID'}
    >
      <IncomingMessageLayout.TypingIndicator component={CustomTypingIndicator} />

      <Conversation />
    </AgentProviderContainer>
  );
}

Notes:

• The TypingIndicator component is part of IncomingMessageLayout
• The default typing indicator shows three animated dots

How to customize the typing indicator appearance in the conversation

You can customize the typing indicator by replacing the TypingIndicator component using IncomingMessageLayout.

Step 1: Create a Custom TypingIndicator Component

The slot receives a containerStyle that carries the message row's start padding. Apply it to your outermost view so the indicator stays aligned with the message bubbles.

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

type CustomTypingIndicatorProps = IncomingMessageProps & {
  containerStyle?: ViewStyle;
};

const CustomTypingIndicator = ({ thinkingMessage, containerStyle }: CustomTypingIndicatorProps) => {
  if (thinkingMessage) {
    return (
      <View style={containerStyle}>
        <Text style={{ paddingVertical: 12, color: '#7C3AED' }}>{thinkingMessage}</Text>
      </View>
    );
  }

  return (
    <View style={containerStyle}>
      <View
        style={{
          alignSelf: 'flex-start',
          backgroundColor: '#F3E8FF',
          paddingHorizontal: 12,
          paddingVertical: 8,
          borderRadius: 12,
        }}
      >
        <Text style={{ color: '#7C3AED' }}>{'Typing...'}</Text>
      </View>
    </View>
  );
};

Step 2: Register the Custom Component

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

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

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

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

Notes:

• The TypingIndicator component is part of IncomingMessageLayout.
• The default typing indicator shows three animated dots, and switches to the agent's thinkingMessage text with a shimmer effect when one is provided. Handle both cases if you want to keep that behavior.
• The default indicator stops animating when the device has "Reduce Motion" enabled. Consider the same when adding your own animation.