How to render Custom Message UI with custom JSON?

The LikeMinds Chat SDK provides users with the ability to render custom message UI. You can parse custom metadata as per your requirement.

This guide will help you customized the message UI in the Chatroom Screen.

Creating a Custom Message UI

​Let’s create a simple custom message UI by defining a React UI component.

info

All the conversation (messages) should be wrapped with LMMessageContext so that it has the relevant context of that conversation.

import { LMMessageContext } from "@likeminds.community/likeminds-reactjs-chat";
export default function CustomMessageUI() {
  // Access the LMMessageContext with useContext
  const { message } = useContext(LMMessageContext);
  //   Render the View
  return <div>This the a Custom Message UI {message.answer}</div>;
}

To update the UI, you need to pass the CustomMessageUI to the LMClientOverlayProvider as props for customComponents in the App.tsx.

Code implementation:

You can check out the Getting Started guide to have a reference to this component

import { LMClientOverlayProvider } from "@likeminds.community/likeminds-reactjs-chat";

<LMClientOverlayProvider
  // Other required props
  customComponents={{
    messageBubbles: {
      // Passing in the Custom Widget you created above
      customWidget: CustomMessageUI,
    },
  }}
>
  {/* Other Child Components */}
</LMClientOverlayProvider>;

To enable the custom widget functionality in the chatroom screen you need to add actions to create a message with the custom metadata

Create message with Custom Metadata

To create a message with custom metadata you need to implement a callback InputCustomCallback.

The InputCustomCallback provides you with following parameters:

1. inputDefaultActions: From here you can access all the default actions including the postMessage method.
2. applicationGeneralDataContext: From here you can access the details of current user, the current application.
3. inputDataStore: This will provide access to all the states and general data of the input store. You can use this to access information for different states which might be helpful in defining your custom action. List of all the state and data can be found here.
4. router: This will give you access to the underlying router actions like a navigation function and details for current location of the page.

Let’s create postMessage custom method from inputDefaultActions to define the custom flow.

The postMessage default method accepts an optional argument. You can pass the metadata to this action and it will send your message with that metadata.

function customMessageAction(
  inputDefaultActions,
  applicationGeneralDataContext,
  inputDataStore,
  router
) {
  // create your meta-data object
  const metadata: Record<string, any> = {};
  //   send message with the newly created metadata
  inputDefaultActions.postMessage(metadata);
}

Now that you have created your customMessageAction, you need to pass it to the LMInput components exposed by the SDK. You can check out the Getting Started guide to have a reference to this component.

// Other SDK Components
<LMClientOverlayProvider>
<LMInput
  inputCustomActions={{
    // Passing in the customMessageAction created above
    onPostMessage: customMessageAction,
  }}
/>
// Other SDK Components

{/* Other Child Components */}
</LMClientOverlayProvider>

info

Send metadata conditionally in the message by invoking postMessage method without any argument, to implement default behaviour of conversation UI.