Skip to main content

How to Customise Long Press on a Message?

Introduction​

This guide explains how to customize the long press behavior on chat bubbles using the LikeMinds Chat Flutter SDK. By implementing a custom builder delegate, you can add your own logic when users long press on sent or received messages in a chatroom.

Prerequisites​

Before you begin, ensure the following:

  • LikeMinds Chat Flutter SDK: The SDK must be properly installed in your Flutter project. Refer to the installation guide if needed.
  • Basic Understanding of Flutter: Familiarity with Flutter widgets and state management.

Steps to Customise Long Press on a Message​

Step 1: Create a Custom Chatroom Builder Delegate​

Create a class that extends LMChatroomBuilderDelegate to customize the chat bubble behavior:

class CustomBuilder extends LMChatroomBuilderDelegate {
  @override
  Widget sentChatBubbleBuilder(
    BuildContext context,
    LMChatConversationViewData conversation,
    LMChatBubble bubble,
  ) {
    return bubble.copyWith(
      onLongPress: (isSelected, state) {
        debugPrint("Long pressed");
        // Add your custom logic here
        bubble.onLongPress?.call(isSelected, state);
      },
    );
  }

  @override
  Widget receivedChatBubbleBuilder(
    BuildContext context,
    LMChatConversationViewData conversation,
    LMChatBubble bubble,
  ) {
    return bubble.copyWith(
      onLongPress: (isSelected, state) {
        debugPrint("Long pressed");
        // Add your custom logic here
        bubble.onLongPress?.call(isSelected, state);
      },
    );
  }
}

The onLongPress callback provides two parameters:

  • isSelected: Boolean indicating if the message is currently selected
  • state: The state object of the chat bubble widget

Step 2: Initialize SDK with the Custom Chatroom Builder​

When initializing the SDK, configure it to use your custom chatroom builder:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await LMChatCore.instance.initialize(
    config: LMChatConfig(
      chatRoomConfig: LMChatroomConfig(
        builder: CustomBuilder(),
      ),
    ),
  );
  
  runApp(const YourApp());
}

Steps to Customise the Reaction Bar on Long Press of a Message​

Step 1: Extend the Reaction Bar Builder​

Pass the reactionBarBuilder parameter in the custom builder's chat bubble builder to build a custom reaction dialog.

To know more about the LMChatReactionBar widget, you can refer to the Reaction Bar widget documentation.

class CustomBuilder extends LMChatroomBuilderDelegate {
  @override
  Widget sentChatBubbleBuilder(BuildContext context, LMChatConversationViewData conversation, LMChatBubble bubble) {
    return bubble.copyWith(
      reactionBarBuilder: (reactionBar) {
        final onTap = reactionBar.onReaction; // This is the callback for the reaction tap
        return Container(); // Your custom reaction dialog widget
      },
    );
  }
}

Step 2: Initialize SDK with the Custom Chatroom Builder​

When initializing the SDK, configure it to use your custom chatroom builder:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await LMChatCore.instance.initialize(
    config: LMChatConfig(
      chatRoomConfig: LMChatroomConfig(
        builder: CustomBuilder(),
      ),
    ),
  );
  
  runApp(const YourApp());
}

Steps to Customise the Actions on Long Press of a Message​

Step 1: Define the Selection Type​

In the configuration class, you can also define how you want to show the message actions of a chat bubble. Our defualt implementation is showing the actions in the AppBar of the Chatroom screen. You can choose either that or the floating action dialog.

To do this, use the LMSelectionType enum, and pass its value in the settings of the LMChatroomConfig.

The LMChatSelectionType enum specifies how selection actions are displayed in a chatroom:

  • appbar: Selection actions appear in the app bar
  • floating: Selection actions appear in a floating action button
  • bottomsheet: Selection actions appear in a bottom sheet

Step 2: Initialize SDK with the Custom Chatroom Settings​

When initializing the SDK, configure it to use your custom chatroom settings:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await LMChatCore.instance.initialize(
    config: LMChatConfig(
      chatRoomConfig: LMChatroomConfig(
         setting: const LMChatroomSetting(
          selectionType: LMChatSelectionType.floating,
        ),
      ),
    ),
  );
  
  runApp(const YourApp());
}

This completes the setup for customizing long press behavior on chat bubbles within the SDK.