LMAIChatbotInput

LMAIChatbotInput is responsible for rendering the input-field for LikeMinds AI-Chatbot. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.

• LMCarousel
• LMChatbotAIBotInputAttachmentSelector

CSS Classnames

Classname	Description
disabled-state	Input field in disabled state
lm-channel-icon send lm-cursor-pointer	Send button with pointer cursor
lm-post-conversation	Container for post conversation
lm-channel-icon lm-cursor-pointer	Channel icon with pointer cursor
lm-channel-footer-wrapper	Wrapper for channel footer
lm-channel-footer	Footer section of the channel

Example

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

.lm-post-conversation {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

Customising AI Chatbot Chatroom Input TextArea

You can also pass your custom component to replace the default view for chatroom input textarea.

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

• First you create your own custom component. 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 ChatroomInputTextArea
const CustomChatroomInputTextArea = () => {
  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={{
        input: {
          chatroomInputTextArea: CustomChatroomInputTextArea,
        },
      }}
    />
  );
};
export default App;

Reference

For reference checkout this file