Tencent Cloud Chat UIKit Message Component

Welcome to the Message component of the Tencent Cloud Chat UIKit. This component is engineered to enrich your chat applications with a comprehensive messaging experience, offering both essential and advanced chat functionalities.

The Message component is composed of several key elements, including a header for displaying conversation information, a message list view for showcasing message history, and a message input for facilitating message sending. To elevate the user experience, it comes packed with rich animations and interactive details.

At its foundation, the component provides essential chat functionalities such as sending, receiving, copying, forwarding, previewing, and deleting messages, ensuring a seamless chat experience.

To accommodate diverse user needs, it also includes advanced features. Such as message context menu, marking messages as read, displaying group read receipt details, and supporting emoji reactions, to facilitating precise navigation to specific messages, enabling message multi-selection, and offering extensive customization capabilities.

When used in conjunction with the tencent_cloud_chat_conversation and tencent_cloud_chat_contact components, the Message component enables seamless navigation, eliminating the need for manual navigation implementation. Furthermore, when integrated with the tencent_calls_uikit, it provides the ability to initiate voice/video calls, thus enhancing the overall communication experience.

In essence, the Message component empowers you to create engaging, feature-rich chat applications that cater to various user requirements and deliver a delightful user experience.

Getting Started

Import and Declare

To begin, add the tencent_cloud_chat_message UI module to your project.

Once installed, you'll need to register this UI component within the usedComponentsRegister parameter of the TencentCloudChat.controller.initUIKit method's components. Here's an example:

    await TencentCloudChat.controller.initUIKit(
      components: TencentCloudChatInitComponentsRelated(
        usedComponentsRegister: [
          TencentCloudChatMessageManager.register, /// Add this line
          /// ...
        ],
      /// ...
      ),
      /// ...
    );

If your project incorporates modular components like tencent_cloud_chat_conversation or tencent_cloud_chat_contact for displaying conversation, contact, or group lists, they will automatically navigate to the Message component from those lists.

If navigation is only required from these built-in components and not from your custom pages, the Message component integration is complete with this single step. The UIKit handles navigation transitions internally, eliminating the need for manual coding.

For projects that require navigation from custom pages, refer to the following steps.

Before navigating, prepare a TencentCloudChatMessageOptions instance to specify the conversation for the chat:

final messageOptions = TencentCloudChatMessageOptions(
      // Provide either userID or groupID, indicating the conversation for the chat.
      userID: "", // For one-on-one chats, provide the other user's userID
      groupID: "", // For group chats, provide the groupID
    );

Easy Navigation with One Line of Code

Simply call the navigateToMessage method to navigate to the Message component effortlessly:

/// Use the messageOptions constructed above
navigateToMessage(context: context, options: messageOptions);

Manual Navigation

If you need to manually handle navigation, wrap the component within your custom page, or utilize custom features such as TencentCloudChatMessageController, start by instantiating a TencentCloudChatMessage component.

This provides you with greater control and flexibility when integrating the Message component into your application:

// If you need to use the controller, maintain a TencentCloudChatMessageController instance.
final TencentCloudChatMessageController messageController = TencentCloudChatMessageController();

final message = TencentCloudChatMessage(
      // Be sure to provide options. Use the messageOptions constructed above.
      options: messageOptions,

      // If you need to use the controller, provide a controller instance.
      controller: messageController,

      // Other parameters, such as builders, can be specified globally or passed in statically here, depending on your requirements. For detailed usage, refer to the parameter and method comments.
    );

You can place this instantiated component in the build method of a separate page or use it directly for navigation like using Navigator.push.

If you use TencentCloudChatMessageController, it is recommended to maintain it within the State of a StatefulWidget, using a single instance to control the component. For specific usage, refer to the internal comments.

Customizing Details

You can use builders and config to customize various aspects of the Message component. Both options provide different levels of customization, allowing you to tailor the component to your specific needs.

Using config

For simple and basic configurations, you can use the config parameter. The config for the Message component is provided by the TencentCloudChatMessageConfig class.

It includes control options for various data types such as booleans, integers, and custom parameters. Each control option is a method T Function({String? userID, String? groupID}) that provides the current conversation's userID or groupID information. You can use these fields to return the appropriate configuration values.

This approach allows you to define a global TencentCloudChatMessageConfig class that will be effective during the automatic navigation process, without the need to manually instantiate a TencentCloudChatMessage instance and pass it in. This is because, in most cases, different types of conversations require different configuration parameters.

Here's an example:

    final messageConfig = TencentCloudChatMessageConfig(
        // Demonstrating one configuration option.
        // Whether to show other users' avatars in the message list.
        showOthersAvatar: ({userID, groupID}){
          if(userID!=null&&userID.isNotEmpty){
            // If it's a one-on-one chat, don't show the other user's avatar since it's already in the header.
            return false;
          }
          // If it's a group chat, show other users' avatars.
          return true;
        }
    );

Using builders

For more in-depth UI customization, you can use custom builders. The builders for the Message component are provided by the TencentCloudChatMessageBuilders class.

The Message component provides an overall MessageLayoutBuilder, which is further divided into three main builders: MessageListViewBuilder for displaying the message list, MessageInputBuilder for displaying the message input area, and MessageHeaderBuilder for displaying the top area. They all basically expose the String? userID and String? groupID parameters, helping you determine different UI styles based on the conversation type during the automatic navigation process same as config.

In addition to these, there are more granular builders to help you customize finer details, such as message rendering and message layout.

Additionally, each builder comes with the required parameters and methods, making data and logic layer methods readily available for use. For example, the messageInputBuilder exposes various parameters such as methods for sending different types of messages, current conversation details, group member lists, and more. This allows you to focus on the input area's UI development and directly call the methods we provide for sending messages, speeding up your development process.

Conclusion

We hope this documentation provides you with a comprehensive understanding of the Message component within the Tencent Cloud Chat UIKit.

By leveraging the customization options and features available, you can create a tailored chat experience that meets your specific requirements.

Should you have any questions or need additional information, please feel free to reach out us.

Libraries

common/for_desktop/file_tools
common/for_desktop/image_tools
common/message_reaction/reaction_list/tencent_cloud_chat_message_reaction_list_item
common/message_reaction/reaction_list/tencent_cloud_chat_message_reaction_list_item_container
common/text_compiler/tencent_cloud_chat_message_text_compiler
data/tencent_cloud_chat_message_data_tools
data/tencent_cloud_chat_message_separate_data
data/tencent_cloud_chat_message_separate_data_notifier
tencent_cloud_chat_message
tencent_cloud_chat_message_builders
tencent_cloud_chat_message_controller
tencent_cloud_chat_message_header/tencent_cloud_chat_message_header
tencent_cloud_chat_message_header/tencent_cloud_chat_message_header_actions
tencent_cloud_chat_message_header/tencent_cloud_chat_message_header_container
tencent_cloud_chat_message_header/tencent_cloud_chat_message_header_info
tencent_cloud_chat_message_header/tencent_cloud_chat_message_header_profile_image
tencent_cloud_chat_message_header/tencent_cloud_chat_message_header_select_mode
tencent_cloud_chat_message_info/tencent_cloud_chat_message_info
tencent_cloud_chat_message_info/tencent_cloud_chat_message_info_options
tencent_cloud_chat_message_input/desktop/tencent_cloud_chat_message_input_desktop
tencent_cloud_chat_message_input/desktop/tencent_cloud_chat_message_input_member_mention_panel
tencent_cloud_chat_message_input/desktop/tencent_cloud_chat_message_input_sticker_panel
tencent_cloud_chat_message_input/forward/tencent_cloud_chat_message_forward
tencent_cloud_chat_message_input/forward/tencent_cloud_chat_message_forward_container
tencent_cloud_chat_message_input/message_reply/tencent_cloud_chat_message_input_reply
tencent_cloud_chat_message_input/message_reply/tencent_cloud_chat_message_input_reply_container
tencent_cloud_chat_message_input/mobile/tencent_cloud_chat_message_attachment_options
tencent_cloud_chat_message_input/mobile/tencent_cloud_chat_message_camera
tencent_cloud_chat_message_input/mobile/tencent_cloud_chat_message_input_mobile
tencent_cloud_chat_message_input/mobile/tencent_cloud_chat_message_input_recording
tencent_cloud_chat_message_input/select_mode/tencent_cloud_chat_message_input_select_mode
tencent_cloud_chat_message_input/select_mode/tencent_cloud_chat_message_input_select_mode_container
tencent_cloud_chat_message_input/tencent_cloud_chat_message_input
tencent_cloud_chat_message_input/tencent_cloud_chat_message_input_container
tencent_cloud_chat_message_layout/special_case/tencent_cloud_chat_message_drop_target
tencent_cloud_chat_message_layout/special_case/tencent_cloud_chat_message_no_chat
tencent_cloud_chat_message_layout/tencent_cloud_chat_message_layout
tencent_cloud_chat_message_layout/tencent_cloud_chat_message_layout_container
tencent_cloud_chat_message_list_view/dynamic_button/tencent_cloud_chat_dynamic_button
tencent_cloud_chat_message_list_view/message_list/default_builder
tencent_cloud_chat_message_list_view/message_list/message_list
tencent_cloud_chat_message_list_view/message_list/message_list_controller
tencent_cloud_chat_message_list_view/message_list/position
tencent_cloud_chat_message_list_view/message_row/tencent_cloud_chat_message_row
tencent_cloud_chat_message_list_view/message_row/tencent_cloud_chat_message_row_container
tencent_cloud_chat_message_list_view/message_row/tencent_cloud_chat_message_row_message_sender_avatar
tencent_cloud_chat_message_list_view/message_row/tencent_cloud_chat_message_row_message_sender_name
tencent_cloud_chat_message_list_view/tencent_cloud_chat_message_list_view
tencent_cloud_chat_message_list_view/tencent_cloud_chat_message_list_view_container
tencent_cloud_chat_message_sticker/default_sticker_set
tencent_cloud_chat_message_sticker/tencent_cloud_chat_message_sticker_data
tencent_cloud_chat_message_sticker/tencent_cloud_chat_message_sticker_panel
tencent_cloud_chat_message_viewer/tencent_cloud_chat_message_videoplayer
tencent_cloud_chat_message_viewer/tencent_cloud_chat_message_viewer
tencent_cloud_chat_message_widgets/menu/selection_area/tencent_platform_selectable_region_context_menu_io
tencent_cloud_chat_message_widgets/menu/selection_area/tencent_platform_selectable_region_context_menu_web
tencent_cloud_chat_message_widgets/menu/selection_area/tencent_selectable_region
tencent_cloud_chat_message_widgets/menu/selection_area/tencent_selection_area
tencent_cloud_chat_message_widgets/menu/tencent_cloud_chat_message_item_with_menu
tencent_cloud_chat_message_widgets/menu/tencent_cloud_chat_message_item_with_menu_container
tencent_cloud_chat_message_widgets/message_type_builders/tencent_cloud_chat_message_custom
tencent_cloud_chat_message_widgets/message_type_builders/tencent_cloud_chat_message_file
tencent_cloud_chat_message_widgets/message_type_builders/tencent_cloud_chat_message_image
tencent_cloud_chat_message_widgets/message_type_builders/tencent_cloud_chat_message_merge
tencent_cloud_chat_message_widgets/message_type_builders/tencent_cloud_chat_message_merge_detail
tencent_cloud_chat_message_widgets/message_type_builders/tencent_cloud_chat_message_sound
tencent_cloud_chat_message_widgets/message_type_builders/tencent_cloud_chat_message_sticker
tencent_cloud_chat_message_widgets/message_type_builders/tencent_cloud_chat_message_text
tencent_cloud_chat_message_widgets/message_type_builders/tencent_cloud_chat_message_tips_common
tencent_cloud_chat_message_widgets/message_type_builders/tencent_cloud_chat_message_video
tencent_cloud_chat_message_widgets/tencent_cloud_chat_message_item
tencent_cloud_chat_message_widgets/tencent_cloud_chat_message_item_builders
tencent_cloud_chat_message_widgets/tencent_cloud_chat_message_item_container
tencent_cloud_chat_message_widgets/tencent_cloud_chat_message_reply_view