Message Footer

Overview

MessageFooter is a React component that serves as a footer for chat messages. It typically includes UI elements that enhance message interaction, such as options for replying, forwarding, or reacting to messages. The component is designed to improve user engagement by providing easy access to these functionalities directly beneath each message in a chat interface.

GitHub File:

• MessageFooter

Customisations

The MessageFooter customisations can be done using chatBubbleStyles

Usage Example

• In your app, create a CustomChatroomScreen file, wrap it with the ChatRoom context provider.
• Now, you can pass your own message footer component as prop to the ChatRoom context provider

import {
  ChatRoom,
  ChatroomHeader,
  MessageList,
  MessageInput,
  useChatroomContext,
  useMessageListContext,

  ChatroomTopic,
  STYLES
} from "@likeminds.community/chat-rn-core";
import {InputBoxContextProvider} from '@likeminds.community/chat-rn-core/ChatSX/context/InputBoxContext';
import {ChatroomContextValues} from '@likeminds.community/chat-rn-core/ChatSX/context/ChatroomContext';
import MessageInputBox from "@likeminds.community/chat-rn-core/ChatSX/components/InputBox";

export function CustomChatroomScreen() {

  const {
    chatroomID,
    chatroomWithUser,
    currentChatroomTopic,
    chatroomType,
    replyChatID,
    isEditable,
    chatroomName,
    isSecret,
    refInput,
    chatroomDBDetails,
    chatRequestState,
    setIsEditable,
    handleFileUpload,
    joinSecretChatroom,
    onTapToUndo,
  }: ChatroomContextValues = useChatroomContext();

  return (
    <ChatRoom 
      customMessageFooter={<"CUSTOM_MESSAGE_FOOTER_COMPONENT">}
    >

      {/* ChatroomHeader */}
      <ChatroomHeader />

      {/* ChatroomTopic */}
      <ChatroomTopic />

      {/* MessageList */}
      <MessageList />

      {/* Input Box Flow */}
      <InputBoxContextProvider
        chatroomName={chatroomName}
        chatroomWithUser={chatroomWithUser}
        replyChatID={replyChatID}
        chatroomID={chatroomID}
        isUploadScreen={false}
        myRef={refInput}
        handleFileUpload={handleFileUpload}
        isEditable={isEditable}
        setIsEditable={(value: boolean) => {
          setIsEditable(value);
        }}
        isSecret={isSecret}
        chatroomType={chatroomType}
        currentChatroomTopic={currentChatroomTopic}
        isPrivateMember={chatroomDBDetails.isPrivateMember}
        chatRequestState={chatRequestState}>
        <MessageInput>
          <MessageInputBox />
        </MessageInput>
      </InputBoxContextProvider>
    </ChatRoom>
  );
}