please select
  • UIKit
  • SDK
  • Server APIs
Chat/
SDK/
React Native/
Message/
SDK
  • Run Demo
  • SDK Integration
  • Initialization
  • Login and Logout
  • Message
    • Message Overview
    • Sending Message
    • Receiving Message
    • Historical Message
    • Forwarding Message
    • Modifying Message
    • Message Inserting
    • Deleting Message
    • Clearing Messages
    • Recalling Message
    • Online Message
    • Read Receipt
    • Querying Message
    • Group @ Message
    • Targeted Group Message
    • Notification Muting
    • Message Extension
  • Group
    • Overview
    • Group Management
    • Group Profile
    • Group Member Management
    • Group Member Profile
    • Custom Group Attribute
    • Community Management
  • User
    • User Profile
    • Friend Management
    • Friend List
    • Blocklist
  • Offline Push
    • Offline Push
  • Local Search
    • Searching for Message
    • Searching for Friend
    • Searching Group
    • Searching for Group Member
  • Signaling
    • Signaling Management
  • Changelog
  • Guideline for Beginners
  • Console Guide
    • Creating and Upgrading an Application
    • Basic Configuration
    • Feature Configuration
    • Account Management
    • Group Management
    • Webhook Configuration
  • Product Introduction
    • Message Management
      • One-to-One Message
      • Message Storage
      • Offline Push
      • Group Message
      • Message Formats
    • Account System
      • Login Authentication
      • Online Status Management
    • Group Related
      • Group System
      • Group Management
    • User Profile and Relationship Chain
      • Profile Management
      • Relationship Chain Management
  • Purchase Guide
    • Billing Overview
    • Pricing
  • Error Codes
Docs Overview/
Chat/
SDK/
React Native/
Message/
Group @ Message/

Group @ Message

Feature Description

The sender listens for the characters in the input box. When the sender enters @, the group member selection UI will pop up. After the target group members are selected, the message will be displayed in the input box in the format of "@A @B @C......", which can be further edited before sent. In the group chat list of the receiver's conversation UI, the identifier "someone@me" or "@all" will be displayed to remind the user that the user was mentioned by someone in the group chat.
Note:
Currently, only text @ messages are supported.

Feature Demonstration

Listening for the @ character for selection of group members
Editing and sending the group @ message
Receiving the group @ message



Figure 1: When the @ character is detected in the input box on the chat UI, the user is redirected to the group member selection UI to select the target group members. Figure 2: After selecting the target group members, the user goes back to the chat UI to edit and send the group @ message. Figure 3: If the user is mentioned, the user receives the conversation update, and the "someone@me" information is displayed in the conversation Cell.

Sending a Group @ Message

1. The sender listens for the text input box on the chat UI and launches the group member selection UI. After group members are selected, the ID and nickname information of the members is called back. The ID is used to create the V2TimMessage object, while the nickname is to be displayed in the text box.
2. The sender calls the createTextAtMessage API (Details) to create a text @ message, get the V2TIMMessage object, and specify the target group members.
3. The sender calls the sendMessage API (Details) to send the created @ message.
Below is the sample code:
const text = "123";
const atUserList = ['user1','user2','all'];

// Create a group @ message
const atMsgRes = await TencentImSDKPlugin.v2TIMManager.getMessageManager().createTextAtMessage(text, atUserList);
// Send the group @ message
TencentImSDKPlugin.v2TIMManager.getMessageManager().sendMessage(
          id: atMsgRes.data.id,
          receiver: "",
          groupID: "",
);

Receiving a Group @ Message

1. When the conversation is loaded and updated, call the groupAtInfolist API (Details) of V2TimConversation to get the @ data list of the conversation.
2. Call the atType API (Details) of the V2TimGroupAtInfo object in the list to get the @ data type and update it to the @ information of the conversation.
Below is the sample code:
const nextSeq = "";
const count = 10;
const getConversationList = await TencentImSDKPlugin.v2TIMManager
  .getConversationManager()
  .getConversationList(nextSeq, count);
if (getConversationList.code == 0) {
  getConversationList.data.conversationList.forEach((element) => {
    element.groupAtInfoList.forEach((element) => {
      if (element.atType == 0) {
        // @me
      }
      if (element.atType == 1) {
        // @all
      }
      if (element.atType == 2) {
        // @all and @me
      }
    });
  });
}