How to Handle Link Taps in Conversation Message View

[damon-v2]

Versions

Summary

This guide explains how to customize the behavior when a user taps a link inside a message in the conversation view.

Guide & Snippet

iOS

Customizing Link Tap Action in Message

• You can override the default action when a link inside a message is tapped by subclassing SBAConversationViewController and handling the .didTapMessageLink event.

Step 1: Subclass SBAConversationViewController

import SendbirdAIAgentMessenger

final class CustomConversationController: SBAConversationViewController {
    override func conversationModule(
        _ listComponent: SBAConversationModule.List,
        event: SBAConversationModule.List.DelegateEvent
    ) {
        switch event {
        case .didTapMessageLink(let message, let url):
            // You can handle the URL here (e.g., open in Safari, route internally, etc.)
            debugPrint("handle link url: \(url.absoluteString)")
        default:
            super.conversationModule(listComponent, event: event)
        }
    }
}

Step 2: Register the Custom Controller

• Assign your custom class to SBAViewControllerSet.ConversationViewController before presenting the messenger.

SBAViewControllerSet.ConversationViewController = CustomConversationController.self

Android

Steps to Handle Link Taps

Step 1: Create a Custom ConversationMessageListAdapter

Extend ConversationMessageListAdapter and override the onMarkdownLinkClickListener to implement your own logic.

class CustomConversationListAdapter(
    channel: GroupChannel,
    messageListUIParams: ConversationMessageListUIParams,
    containerGenerator: MessageContainerGenerator
) : ConversationMessageListAdapter(channel, messageListUIParams, containerGenerator) {

    init {
        eventListeners.apply {
            onMarkdownLinkClickListener = object : OnMessageClickListener<String> {
                override fun onItemClick(view: View, data: String, type: MessageClickTarget) {
                    // Handle markdown link click
                    Log.v("Markdown", "Clicked link: $data, type: $type")
                    // You can handle custom schemes like tel:, mailto:, or in-app deep links here
                }
            }
        }
    }
}

Step 2: Register the Custom Adapter with AIAgentAdapterProviders

You must register your custom adapter before launching the messenger UI:

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

React

How to handle link clicks in conversation messages

Currently, links in messages automatically open in a new tab with target="_blank". To customize link behavior, you need to create a custom MessageBody component that handles link clicks.

Step 1: Create a Custom MessageBody with Link Handler

import { IncomingMessageProps } from '@sendbird/ai-agent-messenger-react';
import { useEffect, useRef } from 'react';

const CustomMessageBodyWithLinkHandler = (props: IncomingMessageProps) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const handleClick = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (target.tagName === 'A') {
        e.preventDefault();
        const href = target.getAttribute('href');
        if (href) {
          console.log('Link clicked:', href);

          // Custom logic here (e.g., handle deep links)
          if (href.startsWith('tel:')) {
            // Handle phone number links
            window.location.href = href;
          } else if (href.startsWith('mailto:')) {
            // Handle email links
            window.location.href = href;
          } else {
            window.open(href, '_blank');
          }
        }
      }
    };

    container.addEventListener('click', handleClick);
    return () => container.removeEventListener('click', handleClick);
  }, []);

  return (
    <div ref={containerRef}>
      {props.message}
    </div>
  );
};

Step 2: Register the Custom Component

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

function App() {
  return (
    <AgentProviderContainer
      applicationId="YOUR_APP_ID"
      aiAgentId="YOUR_AI_AGENT_ID"
    >
      <IncomingMessageLayout.Template>
        <IncomingMessageLayout.MessageBody component={CustomMessageBodyWithLinkHandler} />
      </IncomingMessageLayout.Template>

      <Conversation />
    </AgentProviderContainer>
  );
}

Notes:

• By default, all links open in a new tab with target="_blank" and rel="noopener noreferrer"
• Custom link handling requires replacing the MessageBody component
• The message content is rendered as Markdown, so links are automatically converted to <a> tags
• Consider security implications when handling custom URL schemes

Reference

No response

Screenshots

No response