Skip to main content

LMAIChatbot

LMAIChatbot set's up LikeMinds AI Chatbot. It is the entry level component for AI-Chatbot. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.

Props

PropertyTypeDescriptionOptional
buttonTextstringThe text displayed on the AI chatbot button.✔️
loadingScreenAnimatonsJSONJSON object for loading screen animations.✔️
previewTextstringPreview text for the chatbot.✔️
closeAIChatbot() => voidFunction to close the AI chatbot screen.✔️
showSettingUpChatbotTextbooleanWhether to show the setup text for the chatbot.✔️
isClearChatOptionEnabledbooleanIndicates if the option to clear chat is enabled.

CSS Classnames

ClassnameDescription
lm-chat-ai-bot-containerContainer for the chatbot UI.
lm-chat-ai-bot-channelArea where bot interactions take place.

Example

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

.lm-chat-ai-bot-channel {
font-size: 18px;
color: "red";
}

Advance Customisations

Customising AI Chatbot Loader Screen

In a scenario where you would like to create your own custom loading screen for AI-Chatbot. You can just create your Custom Component and pass it to LMChatAIButton as a custom component. The default screen will be replaced by your custom component.

You can do so in 2 simple steps

  • Step 1 Create your custom LoaderScreen component

Create a Custom Loader Screen. You can take a reference from the below provided references.

// Your custom loader component
const CustomAiChatbotLoaderScreen = () => {
return (
// Your Custom Code
);
};
  • Step 2 Pass Custom Component to LMChatAIButton

The next step is passing your newly created custom component to LMChatAIButton. Below snippet shows how you can do it.

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

const App = () => {
const lmChatClient = initiateLMClient();
return (
<LMChatAIButton
client={lmChatClient}
userDetails={userDetails}
lmChatTheme={LMChatTheme.NETWORKING_CHAT}
customComponents={{
aiChatbotLoaderScreen: <CustomAiChatbotLoaderScreen />,
}}
/>
);
};
export default App;

Reference

For reference checkout this file