LMMessage

LMMessage renders the message UI. It internally segregates the UI depending of the conversation state.

CSS Classnames

Classname	Description
undo-dm-blocked lm-cursor-pointer	Undo DM blocked cursor pointer element
lm-chat-card	Chat card container
data-pill	Data pill element
lmUserData	User data container
name	Name element
lm-delete-msg	Delete message button
time	Time element
lm-chat-message-reactions-holder-plate	Message reactions container
lm-media	Media container
lm-og-tags	Open graph tags container
lm-og-img	Open graph image element
lm-og-content	Open graph content container
lm-og-title	Open graph title element
lm-og-desc	Open graph description element
lm-reply-wrapper	Reply wrapper container
lm-reply-wrapper-content	Reply content container
lm-reply-wrapper-content-name	Reply sender name element
lm-reply-wrapper-content-msg	Reply message content element
msg	Message text element
error-message	Error message element
edited-bullet	Edited indicator element
actions	Message actions container
lm-cursor-pointer	Cursor pointer element
lm-add-emoji	Add emoji button
lm-date-data	Date data element
conversation sender	Conversation sender element
dmReqBlock	DM request block element
dmActions	DM actions container

Example

To customise the component with their classnames, Open your base css file and override the styles using the classname

.msg {
  font-size: 18px;
  color: "red";
}

Advance Customisations

Hooks Used

• useMessageOptions

Contexts Used

• LMChatroomContext.md
• LMGlobalClientProviderContext.md
• LMMessageContext.md
• LMMessageListContext.md
• LMUserProviderContext.md

You can customise different component for different types of conversation, infact you can provide your own customisation of each of the conversation types. Internally we use contexts such as LMMessageContext, UserProviderContext and many to get the message and other vitals informations which you might need to display the information. You can take a look at the reference file below to know more. Also you can checkout the Hooks and Contexts sections to know the information returned by them.

Customising LMMessage is a fair 2 simple step process.

• First you create your own custom component using the hooks and contexts made available by LikeMinds. The will be responsible for fetching data, you might want to process. For example you can get the conversation details using the context LMMessageContext. Here you will get the conversation object which you will need to create your view.

• Then you just have to pass it as a prop to LMClientOverlayProvider.

Here is a sample custom component implementation

Customising LMMessage

With this customisation you will be taking direct control over all the different conversation object rendered by the SDK. You will be responsible for rendering the views for all the conversation state. This might be usefull if you want to limit your views or would want to customise many different types of conversation in a single go.

• Step 1: First create your own custom LMMessageComponent.

// Custom Component for LMMessage

const CustomLMMessage = () => {

  // Getting the message object
  const { message } = useContext(LMMessageContext);
  // Getting the current user object
  const { currentUser } = useContext(UserProviderContext);

  return (
    // Your Custom View. You can use the information fethed from above to render your views
  );
};

• Step 2: Pass your Custom View to LMClientOverlayProvider

Customising LMMessage component

import {
  LMClientOverlayProvider,
  LMChannel,
  initiateLMClient,
  LMChatTheme,
} from "@likeminds.community/likeminds-chat-reactjs";

// Custom Component for LMMessage
const CustomLMMessage = () => {

  // Getting the message object
  const { message } = useContext(LMMessageContext);
  // Getting the current user object
  const { currentUser } = useContext(UserProviderContext);

  return (
    // Your Custom View. You can use the information fethed from above to render your views
  );
};

const App = () => {
  const lmChatClient = initiateLMClient();
  return (
    <LMClientOverlayProvider
      client={lmChatClient}
      userDetails={userDetails}
      lmChatTheme={LMChatTheme.COMMUNITY_CHAT}
      customComponents={{
        groupChatChannelList: <CustomLMMessage />,
      }}
    >
      <LMChannel />
    </LMClientOverlayProvider>
  );
};
export default App;

You can also provide custom component for other different conversation types. Check out the full list of customisations available from here. Use different props available under messageBubbles to customise that particular conversation view.

Reference

For reference checkout this file