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	Container or element for undo dm blocked lm cursor pointer
lm-chat-card	Container or element for lm chat card
data-pill	Container or element for data pill
lmUserData	Container or element for lmUserData
name	Container or element for name
lm-delete-msg	Container or element for lm delete msg
time	Container or element for time
lm-chat-message-reactions-holder-plate	Container or element for lm chat message reactions holder plate
lm-media	Container or element for lm media
lm-og-tags	Container or element for lm og tags
lm-og-img	Container or element for lm og img
lm-og-content	Container or element for lm og content
lm-og-title	Container or element for lm og title
lm-og-desc	Container or element for lm og desc
lm-reply-wrapper	Container or element for lm reply wrapper
lm-reply-wrapper-content	Container or element for lm reply wrapper content
lm-reply-wrapper-content-name	Container or element for lm reply wrapper content name
lm-reply-wrapper-content-msg	Container or element for lm reply wrapper content msg
msg	Container or element for msg
error-message	Container or element for error message
edited-bullet	Container or element for edited bullet
actions	Container or element for actions
lm-cursor-pointer	Container or element for lm cursor pointer
lm-add-emoji	Container or element for lm add emoji
lm-date-data	Container or element for lm date data
conversation sender	Container or element for conversation sender
dmReqBlock	Container or element for dmReqBlock
dmActions	Container or element for dmActions

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