LMAIBotScreen

LMAIBotScreen is a wrapper component to render the chatroom of the AI Chatbot. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.

Props

Property	Type	Description	Optional
`aiChatbotChatroomId`	`number`	The unique identifier for the AI chatbot's chatroom.
`closeAIChatbot`	`() => void`	Function to close the AI chatbot screen.	✔️
`isClearChatOptionEnabled`	`boolean`	Indicates if the option to clear chat is enabled.

CSS Classnames

Classname	Description
lm-chat-ai-bot-container	Main container for AI chatbot interface
lm-chat-ai-bot-channel	Channel container for AI chatbot

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 Chatroom Header

In a scenario where you would like to create your own custom chatroom header for AI-Chatbot. You can just create your Custom Component and pass it to LMChatAIButton as a custom component. You can use the below contexts to customise the component.

Contexts Used

You can do so in 2 simple steps

Step 1 Create your custom chatroomHeader component

Create a Custom Chatroom Header. You can take a reference from the below provided references.

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

// Your custom chatroom header component
const CustomChatroomHeader = () => {
  const { chatroomDetails } = useContext(LMChatroomContext);
  const { currentUser } = useContext(UserProviderContext);

  return (
    // Your Custom Code for rendering the header
  );
};

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={{
        chatroomHeader: <CustomChatroomHeader />,
      }}
    />
  )
}
export default App

Reference

For reference checkout this file

LMAIBotScreen

Props​

CSS Classnames​

Example​

Advance Customisations​

Customising Chatroom Header​

Contexts Used​

Reference​