ChatLayout.js

import React, { useEffect, useRef, useCallback } from 'react';
import { Box, useComponentOverrides } from '@embeddedchat/ui-elements';
import styles from './ChatLayout.styles';
import {
  useChannelStore,
  useUserStore,
  usePinnedMessageStore,
  useStarredMessageStore,
  useSearchMessageStore,
  useFileStore,
  useMentionsStore,
  useThreadsMessageStore,
  useMemberStore,
  useSidebarStore,
} from '../../store';

import RoomMembers from '../RoomMembers/RoomMember';
import MentionedMessages from '../MessageAggregators/MentionedMessages';
import ThreadedMessages from '../MessageAggregators/ThreadedMessages';
import StarredMessages from '../MessageAggregators/StarredMessages';
import PinnedMessages from '../MessageAggregators/PinnedMessages';
import SearchMessages from '../MessageAggregators/SearchMessages';
import FileGallery from '../MessageAggregators/FileGallery';
import Roominfo from '../RoomInformation/RoomInformation';
import UserInformation from '../UserInformation/UserInformation';
import ChatBody from '../ChatBody/ChatBody';
import ChatInput from '../ChatInput/ChatInput';
import useDropBox from '../../hooks/useDropBox';
import AttachmentPreview from '../AttachmentPreview/AttachmentPreview';
import useAttachmentWindowStore from '../../store/attachmentwindow';
import CheckPreviewType from '../AttachmentPreview/CheckPreviewType';
import { useRCContext } from '../../context/RCInstance';
import UiKitContextualBar from '../ContextualBarBlock/uiKit/UiKitContextualBar';
import useUiKitStore from '../../store/uiKitStore';
import { MessageNavigationProvider } from '../../context/MessageNavigationContext';

const ChatLayout = () => {
  const messageListRef = useRef(null);
  const jumpToMessageRef = useRef(null);
  const clearUnreadDividerRef = useRef(null);
  const { classNames, styleOverrides } = useComponentOverrides('ChatBody');
  const { RCInstance, ECOptions } = useRCContext();
  const anonymousMode = ECOptions?.anonymousMode;
  const showRoles = ECOptions?.showRoles;
  const setStarredMessages = useStarredMessageStore(
    (state) => state.setStarredMessages
  );
  const starredMessages = useStarredMessageStore(
    (state) => state.starredMessages
  );
  const showSidebar = useSidebarStore((state) => state.showSidebar);
  const showMentions = useMentionsStore((state) => state.showMentions);
  const showAllFiles = useFileStore((state) => state.showAllFiles);
  const showAllThreads = useThreadsMessageStore(
    (state) => state.showAllThreads
  );
  const showPinned = usePinnedMessageStore((state) => state.showPinned);
  const showStarred = useStarredMessageStore((state) => state.showStarred);
  const showSearch = useSearchMessageStore((state) => state.showSearch);
  const showChannelinfo = useChannelStore((state) => state.showChannelinfo);
  const showMembers = useMemberStore((state) => state.showMembers);
  const members = useMemberStore((state) => state.members);
  const showCurrentUserInfo = useUserStore(
    (state) => state.showCurrentUserInfo
  );
  const attachmentWindowOpen = useAttachmentWindowStore(
    (state) => state.attachmentWindowOpen
  );
  const isUserAuthenticated = useUserStore(
    (state) => state.isUserAuthenticated
  );
  const { data, handleDrag, handleDragDrop } = useDropBox();
  const { uiKitContextualBarOpen, uiKitContextualBarData } = useUiKitStore(
    (state) => ({
      uiKitContextualBarOpen: state.uiKitContextualBarOpen,
      uiKitContextualBarData: state.uiKitContextualBarData,
    })
  );

  const scrollToBottom = () => {
    if (messageListRef && messageListRef.current) {
      requestAnimationFrame(() => {
        messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
      });
    }
  };
  const getStarredMessages = useCallback(async () => {
    if (isUserAuthenticated) {
      try {
        if (!isUserAuthenticated && !anonymousMode) {
          return;
        }
        const { messages } = await RCInstance.getStarredMessages();
        setStarredMessages(messages);
      } catch (e) {
        console.error(e);
      }
    }
  }, [isUserAuthenticated, anonymousMode, RCInstance]);
  useEffect(() => {
    getStarredMessages();
  }, [showSidebar]);
  const registerJumpToMessage = useCallback((fn) => {
    jumpToMessageRef.current = fn;
  }, []);

  return (
    <MessageNavigationProvider
      value={{
        jumpToMessage: (messageOrId) => {
          const messageId =
            typeof messageOrId === 'string' ? messageOrId : messageOrId?._id;
          if (!messageId) return;
          return jumpToMessageRef.current?.(messageId);
        },
      }}
    >
      <Box
        css={styles.layout}
        style={{
          ...styleOverrides,
        }}
        className={`ec-chat-layout ${classNames}`}
        onDragOver={(e) => handleDrag(e)}
        onDrop={(e) => handleDragDrop(e)}
      >
        <Box css={styles.chatMain}>
          <ChatBody
            anonymousMode={anonymousMode}
            showRoles={showRoles}
            messageListRef={messageListRef}
            scrollToBottom={scrollToBottom}
            onRegisterJump={registerJumpToMessage}
          />
          <ChatInput scrollToBottom={scrollToBottom} />
          <div id="emoji-popup" />
      <Box css={styles.chatMain}>
        <ChatBody
          anonymousMode={anonymousMode}
          showRoles={showRoles}
          messageListRef={messageListRef}
          scrollToBottom={scrollToBottom}
          clearUnreadDividerRef={clearUnreadDividerRef}
        />
        <ChatInput
          scrollToBottom={scrollToBottom}
          clearUnreadDividerRef={clearUnreadDividerRef}
        />
        <div id="emoji-popup" />
      </Box>

      {showSidebar && (
        <Box className="ec-sidebar-view">
          {showMembers && <RoomMembers members={members} />}
          {showSearch && <SearchMessages />}
          {showChannelinfo && <Roominfo />}
          {showAllThreads && <ThreadedMessages />}
          {showAllFiles && <FileGallery />}
          {showMentions && <MentionedMessages />}
          {showPinned && <PinnedMessages />}
          {showStarred && <StarredMessages />}
          {showCurrentUserInfo && <UserInformation />}
          {uiKitContextualBarOpen && (
            <UiKitContextualBar
              key={Math.random()}
              initialView={uiKitContextualBarData}
            />
          )}
        </Box>

        {showSidebar && (
          <Box className="ec-sidebar-view">
            {showMembers && <RoomMembers members={members} />}
            {showSearch && <SearchMessages />}
            {showChannelinfo && <Roominfo />}
            {showAllThreads && <ThreadedMessages />}
            {showAllFiles && <FileGallery />}
            {showMentions && <MentionedMessages />}
            {showPinned && <PinnedMessages />}
            {showStarred && <StarredMessages />}
            {showCurrentUserInfo && <UserInformation />}
            {uiKitContextualBarOpen && (
              <UiKitContextualBar
                key={Math.random()}
                initialView={uiKitContextualBarData}
              />
            )}
          </Box>
        )}

        {attachmentWindowOpen ? (
          data ? (
            <>
              <AttachmentPreview />
            </>
          ) : (
            <CheckPreviewType data={data} />
          )
        ) : null}
      </Box>
    </MessageNavigationProvider>
  );
};

export default ChatLayout;