LMChatAiChatbotHeader

LMChatAiChatbotHeader renders the header component of LikeMinds AI-Chatbot. It accepts the following props.

Props

Property	Type	Description	Optional
closeAIChatbot	() => void	Function to close the AI chatbot.	✔️
isClearChatOptionEnabled	boolean	Whether the clear chat option is enabled.

CSS Classnames

Classname	Description
lm-channel-header	Channel header container
lm-header-left	Left section of header
lm-channel-img	Channel image styling
lm-channel-desc	Channel description text
lm-channel-title	Channel title text
refresh-ai-bot icon	Refresh button styling
close-ai-chatbot	Close button styling

Example

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

.lm-channel-title {
  font-size: 18px;
  color: "red";
}

Advance Customisations

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. This will offer you the flexibility to customise the behaviour or other logic according to your needs. You can use the below contexts to customise the component.

Contexts Used

• LMChatroomContext.md
• LMGlobalClientProviderContext.md
• LMUserProviderContext.md

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