diff --git a/packages/react/src/components/ChatBody/ChatBody.js b/packages/react/src/components/ChatBody/ChatBody.js
index 94ea86199..eef092f41 100644
--- a/packages/react/src/components/ChatBody/ChatBody.js
+++ b/packages/react/src/components/ChatBody/ChatBody.js
@@ -3,7 +3,18 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/react';
import RCContext from '../../context/RCInstance';
-import { useMessageStore, useUserStore, useChannelStore } from '../../store';
+import {
+ useMessageStore,
+ useUserStore,
+ useChannelStore,
+ usePinnedMessageStore,
+ useStarredMessageStore,
+ useSearchMessageStore,
+ useFileStore,
+ useMentionsStore,
+ useThreadsMessageStore,
+ useMemberStore,
+} from '../../store';
import MessageList from '../MessageList';
import TotpModal from '../TotpModal/TwoFactorTotpModal';
import { Box } from '../Box';
@@ -14,6 +25,14 @@ import ModalBlock from '../uiKit/blocks/ModalBlock';
import useComponentOverrides from '../../theme/useComponentOverrides';
import RecentMessageButton from './RecentMessageButton';
import useFetchChatData from '../../hooks/useFetchChatData';
+import RoomMembers from '../RoomMembers/RoomMember';
+import UserMentions from '../UserMentions/UserMentions';
+import AllThreads from '../AllThreads/AllThreads';
+import PinnedMessages from '../PinnedMessages/PinnedMessages';
+import StarredMessages from '../StarredMessages/StarredMessages';
+import SearchMessage from '../SearchMessage/SearchMessage';
+import Roominfo from '../RoomInformation/RoomInformation';
+import { Files } from '../Files';
const ChatBody = ({
height,
@@ -63,6 +82,18 @@ const ChatBody = ({
const removeMessage = useMessageStore((state) => state.removeMessage);
const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
+ 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 [isThreadOpen, threadMainMessage] = useMessageStore((state) => [
state.isThreadOpen,
state.threadMainMessage,
@@ -268,6 +299,15 @@ const ChatBody = ({
onClick={handlePopupClick}
/>
)}
+
+ {showMembers && }
+ {showSearch && }
+ {showChannelinfo && }
+ {showAllThreads && }
+ {showAllFiles && }
+ {showMentions && }
+ {showPinned && }
+ {showStarred && }
>
);
};
diff --git a/packages/react/src/components/MessageList/MessageList.js b/packages/react/src/components/MessageList/MessageList.js
index c33f80555..83efca855 100644
--- a/packages/react/src/components/MessageList/MessageList.js
+++ b/packages/react/src/components/MessageList/MessageList.js
@@ -1,47 +1,18 @@
import React from 'react';
import PropTypes from 'prop-types';
import { isSameDay } from 'date-fns';
-import {
- useMessageStore,
- useMemberStore,
- useSearchMessageStore,
- useChannelStore,
- useUserStore,
- useFileStore,
- useMentionsStore,
- useThreadsMessageStore,
- usePinnedMessageStore,
- useStarredMessageStore,
-} from '../../store';
-import RoomMembers from '../RoomMembers/RoomMember';
+import { useMessageStore, useUserStore } from '../../store';
import MessageReportWindow from '../ReportMessage/MessageReportWindow';
import isMessageSequential from '../../lib/isMessageSequential';
-import UserMentions from '../UserMentions/UserMentions';
-import SearchMessage from '../SearchMessage/SearchMessage';
-import Roominfo from '../RoomInformation/RoomInformation';
-import AllThreads from '../AllThreads/AllThreads';
-import { Files } from '../Files';
import { Message } from '../Message';
-import PinnedMessages from '../PinnedMessages/PinnedMessages';
-import StarredMessages from '../StarredMessages/StarredMessages';
+
import { Icon } from '../Icon';
const MessageList = ({ messages }) => {
- 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 showReportMessage = useMessageStore((state) => state.showReportMessage);
const messageToReport = useMessageStore((state) => state.messageToReport);
const showAvatar = useUserStore((state) => state.showAvatar);
const headerTitle = useMessageStore((state) => state.headerTitle);
- 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 isMessageNewDay = (current, previous) =>
!previous || !isSameDay(new Date(current.ts), new Date(previous.ts));
@@ -85,15 +56,7 @@ const MessageList = ({ messages }) => {
);
})}
- {showMembers && }
{showReportMessage && }
- {showSearch && }
- {showChannelinfo && }
- {showAllThreads && }
- {showAllFiles && }
- {showMentions && }
- {showPinned && }
- {showStarred && }
>
);
};