LMChatAIButton

LMChatAIButton renders the button for LikeMinds 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 button.	✔️
`loadingScreenAnimatons`	`JSON`	The animations used during loading.	✔️
`previewText`	`string`	The preview text shown before interaction.	✔️
`closeAIChatbot`	`() => void`	Function to close the AI chatbot.	✔️
`showSettingUpChatbotText`	`boolean`	Whether to show a chatbot setup message.	✔️
`isClearChatOptionEnabled`	`boolean`	Whether the clear chat option is enabled.

CSS Classnames

Classname	Description
lm-chat-ai-bot-fab-button close	Close button for AI chat bot
lm-chat-ai-bot-fab-title	Title text for AI chat bot
lm-chat-ai-bot-fab-button open	Open button for AI chat bot
lm-chat-ai-bot-fab-container	Main container for AI chat bot

Example

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

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

Advanced Customisation

Customising AI Chatbot Loader Screen

You can also pass your custom component to replace the default view for chatroom loader Screen. This will just be a static screen.

Below is an example for customising the view for chatroom loader and rendering your own view. It is fairly a 2 simple step process

First you create your own custom component. For this particular component you don't need to use any hook or context, since this is just a static screen
Then you just have to pass it as a prop to LMChatAIButton.
Step 1: Create your own custom view.

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

// Custom Component for AiChatbotLoaderScreen
const CustomAiChatbotLoaderScreen = () => {
  return (
    // Your Custom Code
  );
};

Step 2: Pass your Custom View to LMChatAIButton

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

LMChatAIButton

Props​

CSS Classnames​

Example​

Advanced Customisation​

Customising AI Chatbot Loader Screen​

Reference​