How to send metadata in a message to render custom UI?

The LikeMinds Chat SDK enables developers to send custom JSON data within a message, allowing for enhanced functionality and tailored features to meet the specific needs of your application.

To send custom JSON data with a message, you can create a custom message list screen and pass it to the SDK's component registry. This gives you full control over how messages are created and displayed, enabling the attachment of custom data.

In this guide, we will walk you through the process of setting up a custom message list screen and sending custom data along with your messages.

Prerequisites

Before you begin, ensure the following:

• LikeMinds Chat Flutter SDK: The SDK must be properly installed and initialized in your Flutter project. Refer to the installation guide if needed.

How to enable Custom Widget?

Enable Custom Widgets using Dashboard: Before moving forward, you need to login into the LikeMinds Dashboard and enable the Custom Widget feature for your community.

1. Open your LikeMinds Admin Dashboard.
2. Navigate to the Chat Settings Section.
3. Enable Custom Widget in Chat Setting.

How to send custom data using custom widget?

Sending custom data in messages enables developers to enhance the functionality and interactivity of their chat application. The LikeMinds Chat SDK provides the flexibility to attach metadata: (Map<String,dynamic>) to messages, allowing you to define custom widgets or features that suit your application's specific requirements.

By using LMChatConversationBloc and utilizing the LMChatPostConversationEvent, you can seamlessly pass custom data with each message.

Steps to send Custom Data in a message

Step 1: Create an instance of LMChatPostConversationEvent

First, create an instance of LMChatPostConversationEvent and pass the necessary parameters, including the metadata: (Map<String,dynamic>).

LMChatPostConversationEvent postConversationEvent = LMChatPostConversationEvent(
    chatroomId: LMChatConversationBloc.currentChatroomId, // Replace with the chatroomId you need to post the conversation in
    text: "YOUR_TEXT_MESSAGE",
    metadata: const {
      "key": "value",
    },
);

info

To get the chatroomId of the current chatroom, use LMChatConversationBloc.currentChatroomId.

Step 2: Add the event to LMChatConversationBloc

Next, get the instance of LMChatConversationBloc and add the event with the metadata.

LMChatConversationBloc.instance.add(postConversationEvent);

Step 3: Listen to LMChatConversationBloc State Updates [Optional]

Use a BlocListener to listen for changes in the LMChatConversationBloc. Whenever you add a LMChatPostConversationEvent, the bloc will emit different states throughout the flow of posting a message. Here is a minimal example:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:likeminds_chat_fl/likeminds_chat_fl.dart'; // or your correct import for the Bloc classes

class CustomChatScreen extends StatelessWidget {
  const CustomChatScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocListener<LMChatConversationBloc, LMChatConversationState>(
      bloc: LMChatConversationBloc.instance, // Reference the bloc instance
      listener: (context, state) {
        // Handle each state accordingly
        if (state is LMChatLocalConversationState) {
          // This state is emitted when a temporary/local message is created
          // (e.g., to show an immediate message bubble before posting).
          debugPrint("Local Conversation State: ${state.conversation.text}");
        } else if (state is LMChatConversationPostedState) {
          // This state is emitted when the conversation has successfully posted.
          // You can update the UI, show success, or refresh the conversation list.
          debugPrint("Conversation Posted: ${state.conversation.text}");
        } else if (state is LMChatConversationErrorState) {
          // This state is emitted if there's an error during posting.
          debugPrint("Error: ${state.errorMessage} for TempId: ${state.tempId}");
          // You can show an error snack bar or message to the user.
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(state.errorMessage)),
          );
        }
      },
      child: Scaffold(
        appBar: AppBar(title: const Text('Custom Chat Screen')),
        body: const Center(
          child: Text('Your chat UI goes here'),
        ),
      ),
    );
  }
}

info

Without this step, conversations will still post successfully. This listener only provides a mechanism for additional client-side analytics or event handling.

States Emitted by postConversationEventHandler

1. LMChatLocalConversationState

   • Emitted when a local/temporary message object is created and added to the UI immediately (before the actual network call completes).
   • Use this to show a "pending" message bubble in your chat interface.

2. LMChatConversationPostedState

   • Emitted when the message has been successfully posted to the server and a final conversationViewData is returned.
   • You can update the temporary message with the final server response (e.g., real message ID, timestamp).

3. LMChatConversationErrorState

   • Emitted when posting the message fails due to network errors, server errors, or any exceptions.
   • Typically handle this by showing an error message or updating the local message state to indicate failure.

---

How to render the custom data in message?

Rendering custom views for messages allows you to create personalized and dynamic messaging experiences tailored to your application's needs. By extending the LikeMinds Chat SDK, you can use metadata to attach additional data to messages and render custom UI elements based on this data. This approach enables developers to go beyond default message templates

In this guide, we will walk you through rendering custom views for messages containing metadata. By extending the LMChatroomBuilderDelegate class, you can define custom layouts and behavior to dynamically render data specific to each message.

Steps to Render Custom Data in a message

1. Implement a Custom Builder Delegate

The LMChatroomBuilderDelegate allows you to override specific builders used by the SDK. By overriding customChatBubbleBuilder, you can inject your custom widget wherever the SDK detects custom metadata in a conversation.

1. Create a new Dart file (e.g., custom_builder_delegate.dart).
2. Extend LMChatroomBuilderDelegate.
3. Override customChatBubbleBuilder to return your newly created custom widget.

custom_builder_delegate.dart

import 'package:flutter/material.dart';
import 'package:likeminds_chat_fl/likeminds_chat_fl.dart';
import 'custom_chat_bubble.dart';

class CustomChatroomBuilderDelegate extends LMChatroomBuilderDelegate {
  /// This method is called whenever a conversation has a custom widget
  /// or needs a custom bubble.
  @override
  Widget customChatBubbleBuilder(
    BuildContext context,
    LMChatConversationViewData conversation,
    int chatroomId,
  ) {
    // Return your custom chat bubble widget
    return CustomChatBubble(conversation: conversation);
  }
}

info

To access Custom Widget associated with a Conversation model, use the conversation.widget variable.

---

2. Replace the Default Chat Bubble Builder

In your app’s entry point (often main.dart), configure LMChatCore with a custom LMChatroomBuilderDelegate to replace the default chat bubble builder.

main.dart

import 'package:flutter/material.dart';
import 'package:likeminds_chat_fl/likeminds_chat_fl.dart';
import 'custom_builder_delegate.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize any other services or plugins here, e.g.:
  // setupNotifications();

  // Initialize LMChatCore with your builder delegate
  await LMChatCore.instance.initialize(
    config: LMChatConfig(
      chatRoomConfig: LMChatroomConfig(
        builder: CustomChatroomBuilderDelegate(),
      ),
    ),
  );

  // ...
}

---

Conclusion

By following this guide, you can create custom widgets for messages and render them dynamically using metadata. This approach provides flexibility to tailor the messaging experience to your application's specific requirements.