LMChatAIButton

LMChatAIButton renders the button for LikeMinds AI-Chatbot. This is a standalone component and accepts the following set of props.

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	Container or element for lm chat ai bot fab button close
lm-chat-ai-bot-fab-title	Container or element for lm chat ai bot fab title
lm-chat-ai-bot-fab-button open	Container or element for lm chat ai bot fab button open
lm-chat-ai-bot-fab-container	Container or element for lm chat ai bot fab container

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 LMClientOverlayProvider

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​