Add More Files View

Overview

The AddMoreFilesView component provides a user interface for uploading additional files, such as images or documents, during a chat. It integrates with the InputBoxContext to manage states such as file types, upload screens, and restrictions based on chatroom types (e.g., chatbot interactions).

UI Components

The AddMoreFilesView includes the following elements:

• Add Image Button: A button that allows users to select images from their gallery.
• Add Document Button: A button for selecting documents for upload.

Props

Property	Type	Description	Optional
handleGalleryProp	Function	Custom callback triggered when the "Add Image" button is pressed. If not provided, the default selectGallery function is used.	✔️
handleDocumentProp	Function	Custom callback triggered when the "Add Document" button is pressed. If not provided, the default selectDoc function is used.	✔️

Features

1. Dynamic Button Display:

   • Shows appropriate buttons based on the context (e.g., whether it's an upload screen or a chatbot interaction).

2. Customizable Actions:

   • Supports custom callbacks for both gallery and document selection, allowing for tailored upload workflows.

3. Contextual State Management:

   • Integrates with InputBoxContext to check file types (isDoc, isGif), screen state (isUploadScreen), and chatroom type (chatroomType).

Usage Example

To Customise Callbacks

Define custom callbacks for gallery and document selection, and pass them to the handleGalleryProp and handleDocumentProp of the <AddMoreFilesView /> component.

import React from "react";
import { View } from "react-native";
import {
  AddFilesView,
  AddMoreFilesView,
  EditBox,
  InputBoxView,
  InputWrapper,
  InputWrapperLeftSection,
  LinkPreviewInputView,
  ReplyBoxView,
  SelectFilesModal,
  SendDMRequestModal,
  TextInputWrapper,
  useInputBoxContext,
  VoiceNoteRecordToast,
  UserTaggingList,
  RecordSendInputFabView,
} from "@likeminds.community/chat-rn-core";

const CustomMessageInputBox = () => {
  const { hideDMSentAlert, message, DMSentAlertModalVisible, onSend } =
    useInputBoxContext();

  // Custom callback for gallery selection
  const handleGallerySelection = () => {
    console.log("Gallery button clicked");
  };

  // Custom callback for document selection
  const handleDocumentSelection = () => {
    console.log("Document button clicked");
  };

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          <LinkPreviewInputView />
          <EditBox />

          <TextInputWrapper>
            {/* Add AddMoreFilesView component like this*/}
            <AddMoreFilesView
              handleGalleryProp={handleGallerySelection}
              handleDocumentProp={handleDocumentSelection}
            />
            <InputBoxView />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        <RecordSendInputFabView />
      </InputWrapper>

      <SelectFilesModal />
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;

Customise <AddMoreFilesView /> UI Component

• Create a new component CustomAddMoreFilesView, referencing the AddMoreFilesView component.
• Perform your UI customizations in the new component.

import React from "react";
import { View } from "react-native";
import {
  AddFilesView,
  AddMoreFilesView,
  EditBox,
  InputBoxView,
  InputWrapper,
  InputWrapperLeftSection,
  LinkPreviewInputView,
  ReplyBoxView,
  SelectFilesModal,
  SendDMRequestModal,
  TextInputWrapper,
  useInputBoxContext,
  VoiceNoteRecordToast,
  UserTaggingList,
  RecordSendInputFabView,
} from "@likeminds.community/chat-rn-core";
import CustomAddMoreFilesView from "<path_to_custom_add_more_files_view_component>";

const CustomMessageInputBox = () => {
  const { hideDMSentAlert, message, DMSentAlertModalVisible, onSend } =
    useInputBoxContext();

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          <LinkPreviewInputView />
          <EditBox />

          <TextInputWrapper>
            {/* Add CustomAddMoreFilesView component like this */}
            <CustomAddMoreFilesView />
            <InputBoxView />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        <RecordSendInputFabView />
      </InputWrapper>

      <SelectFilesModal />
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;

• Use the CustomMessageInputBox component as a child of the MessageInput component in the relevant screens:
  • Chatroom Screen
  • File Upload Screen