LMChatbotAIBotInputAttachmentSelector

LMChatbotAIBotInputAttachmentSelector renders the attachment selection menu for the LikeMinds AI-Chatbot. It is the same as LMAttachmentsSelector component but specifically for LikeMinds AI-Chatbot.

CSS Classnames

Classname	Description
lm-chat-input-attachment-label	Label for attachment input
title	Title text element
lm-input-attachments-menu-sheet-wrapper	Wrapper for attachments menu sheet
lm-input-attachments-menu-sheet	Menu sheet for attachments
lm-chat-ai-bot-input-attachment-selecter-wrapper	Wrapper for AI bot attachment selector
lm-cursor-pointer	Element with pointer cursor

Example

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

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

Advance Customisations

In a scenario where you would like to create your own custom chatroom input attachments selector for AI-Chatbot. You can just create your Custom Component and pass it to LMChatAIButton as a custom component. The default screen will be replaced by your custom component.

You can do so in 2 simple steps

• Step 1 Create your custom ChatroomInputAttachmentsSelector component

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

// Your custom chatroom header component
const CustomChatroomInputAttachmentsSelector = () => {
  return (
    // Your Custom Code
  );
};

• 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={{
        input: {
          chatroomInputAttachmentsSelector: CustomChatroomInputAttachmentsSelector,
        },
      }}
    />
  );
};
export default App;

Reference

For reference checkout this file