LMAIChatbotLoaderScreen

LMAIChatbotLoaderScreen renders the loading state of LikeMinds AI-Chatbot. It covers user-authentication and chatroom loading stage, post which it will be replaced by Chatroom Screen. It accepts the following props.

Props

Property	Type	Description	Optional
loadingScreenAnimatons	JSON	The animations to show during loading.	✔️
previewText	string	The preview text to display.	✔️
showSettingUpChatbotText	boolean	Whether to show the "Setting up chatbot" text.	✔️

CSS Classnames

Classname	Description
lm-chat-ai-bot-container	Container or element for lm chat ai bot container
lm-chat-ai-bot-loader	Container or element for lm chat ai bot loader
lm-chai-ai-bot-label	Container or element for lm chai ai bot label

Example

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

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

Advance Customisations

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