Customize message long-click menu

Chat UI SDK displays a context menu when you long-press a message in the channel screen. The menu options vary by message type and channel type. You can customize the display name and order of menu options, and add or remove options.

Figure 1: Long-click message menu

Figure 2: Message delete confirmation

Customize long-click menu options

1. Listen for the long-press message event (onMessageLongClick) on the channel screen.

   Java

   NCChatUIConfig.channelConfig().setChannelClickListener(
       new ChannelClickListener() {
           @Override
           public boolean onUserPortraitClick(
                   Context context,
                   ChannelType conversationType,
                   UserInfo user,
                   String targetId) {
               return false;
           }
   
           @Override
           public boolean onUserPortraitLongClick(
                   Context context,
                   ChannelType conversationType,
                   UserInfo user,
                   String targetId) {
               return false;
           }
   
           @Override
           public boolean onMessageClick(
                   Context context, View view, Message message) {
               return false;
           }
   
           @Override
           public boolean onMessageLongClick(
                   Context context, View view, Message message) {
               return false;
           }
   
           @Override
           public boolean onMessageLinkClick(
                   Context context, String link, Message message) {
               return false;
           }
   
           @Override
           public boolean onReadReceiptStateClick(
                   Context context, Message message) {
               return false;
           }
       });

2. Extend ChannelFragment and override onSetupLongClickItems() to customize the long-click menu items (MessageLongClickItem) on the channel screen. You can add items to the default list, remove items from the default list, or return a fully custom list. The order of the returned list determines the menu order.

   caution

   If you return a new list without calling super.onSetupLongClickItems(), you fully replace the SDK default menu. Default actions such as copy, edit, delete, reference, and multi-select are removed unless you add them back yourself. If you only need to add or remove one action, start from super.onSetupLongClickItems() and modify that list.

   Java

   public class MyChannelFragment extends ChannelFragment {
       @Override
       protected List<MessageLongClickItem> onSetupLongClickItems() {
           List<MessageLongClickItem> items = super.onSetupLongClickItems();
           Iterator<MessageLongClickItem> iterator = items.iterator();
           while (iterator.hasNext()) {
               MessageLongClickItem item = iterator.next();
               if (item instanceof MessageLongClickDeleteItem) {
                   iterator.remove();
                   break;
               }
           }
           items.add(new MyLongClickItem());
           return items;
       }
   }

   The MessageLongClickItem interface provides the following methods.

   Method	Return type	Description
   getTitle(Context context)	String	Menu item title.
   getTitle(Context context, UiMessage message)	String	Menu item title for a specific message. By default, it calls getTitle(Context).
   getIconAttrResId()	int	Attribute resource ID for the menu item icon. Return 0 to hide the icon.
   isEnabled(UiMessage message)	boolean	Whether to show the item for the current message.
   onAction(Context context, UiMessage message)	boolean	Action to run when the user taps the item. Return true if the action is consumed.

3. Use the custom ChannelFragment in your channel page. You can either add the fragment to your own channel Activity and register that Activity with RouteUtils, or override ChatUIFragmentFactory#newChannelFragment(Bundle) and register the factory with NCChatUI.setFragmentFactory(...). For details, see Channel screen.

Customize multi-select operation menu

When you select More from the long-click menu, the SDK enters multi-select mode. By default, multi-select mode provides forward and delete buttons. You can add or remove buttons, or add custom buttons.

1. Implement the IClickActions interface.

   Java

   public class CustomClickActions implements IClickActions {
       /**
        * Get the icon for the click button
        *
        * @param context Context
        * @return Image Drawable. For highlight or gray state, return a selector type that displays the drawable for enabled or disabled state
        */
       @Override
       public Drawable obtainDrawable(Context context) {
           return null;
       }
       /**
        * Icon button click event
        *
        * @param curFragment Current Fragment. Do not hold a reference to this fragment to avoid memory leaks.
        */
       @Override
       public void onClick(Fragment curFragment) {
   
       }
       /**
        * Whether to filter. You can filter out this button in certain channels based on business scenarios, so it is not displayed.
        * @param message Message
        * @return Return true to filter out this item, so it is not displayed on the page.
        */
       @Override
       public boolean filter(UiMessage message) {
           return false;
       }
   }

2. Configure the custom button in the SDK.

   Java

   NCChatUIConfig.channelConfig().addMoreClickAction(0, new CustomClickAction());

3. Remove a built-in button if needed. The following example removes the forward button.

   Java

   List<IClickActions> clickActions = NCChatUIConfig.channelConfig().getMoreClickActions();
   List<IClickActions> removeActions = new ArrayList<>();
   for (IClickActions action : clickActions){
       if (action instanceof ForwardClickActions){
           NCChatUIConfig.channelConfig().removeMoreClickAction(action);
       }
   }
   tip

   Removing the forward button only takes effect when the Chat UI combined forward feature is disabled.

Control multi-select state programmatically

You can control the multi-select state or retrieve data in multi-select mode.

Enter multi-select state:

Java

ChannelViewModel channelViewModel = ViewModelProviders.of(fragment).get(ChannelViewModel.class);
channelViewModel.enterEditState();

Exit multi-select state:

Java

ChannelViewModel channelViewModel = ViewModelProviders.of(fragment).get(ChannelViewModel.class);
channelViewModel.quitEditMode();

Get selected messages:

Java

ChannelViewModel channelViewModel = ViewModelProviders.of(fragment).get(ChannelViewModel.class);
List<UiMessage> selectedMessages = channelViewModel.getSelectedUiMessages();

Listen for multi-select state changes:

Get the multi-select state LiveData from ChannelViewModel to listen for state changes.

Java

ChannelViewModel channelViewModel = ViewModelProviders.of(fragment).get(ChannelViewModel.class);
channelViewModel.IsEditStatusLiveData().observe(this, new Observer<Boolean>() {
  @Override
  public void onChanged(Boolean aBoolean) {
    // Update UI based on business needs.
  }
});