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
Property | Type | Description | Optional |
---|---|---|---|
buttonText | string | The text displayed on the AI chatbot button. | ✔️ |
loadingScreenAnimatons | JSON | JSON object for loading screen animations. | ✔️ |
previewText | string | Preview text for the chatbot. | ✔️ |
closeAIChatbot | () => void | Function to close the AI chatbot screen. | ✔️ |
showSettingUpChatbotText | boolean | Whether to show the setup text for the chatbot. | ✔️ |
isClearChatOptionEnabled | boolean | Indicates if the option to clear chat is enabled. |
CSS Classnames
Classname | Description |
---|---|
lm-chat-ai-bot-container | Container for the chatbot UI. |
lm-chat-ai-bot-channel | Area 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