diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js index 079582e86..58fccff3c 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js @@ -1,10 +1,17 @@ import React, { useState, useMemo } from 'react'; import { isSameDay, format } from 'date-fns'; -import { Box, Sidebar, Popup, useTheme } from '@embeddedchat/ui-elements'; +import { + Box, + Sidebar, + Popup, + useTheme, + ActionButton, + Icon, +} from '@embeddedchat/ui-elements'; import { MessageDivider } from '../../Message/MessageDivider'; import Message from '../../Message/Message'; import getMessageAggregatorStyles from './MessageAggregator.styles'; -import { useMessageStore } from '../../../store'; +import { useMessageStore, useSidebarStore } from '../../../store'; import { useSetMessageList } from '../../../hooks/useSetMessageList'; import LoadingIndicator from './LoadingIndicator'; import NoMessagesIndicator from './NoMessageIndicator'; @@ -37,6 +44,17 @@ export const MessageAggregator = ({ shouldRender ); + const setShowSidebar = useSidebarStore((state) => state.setShowSidebar); + const setJumpToMessage = (msgId) => { + if (msgId) { + const element = document.getElementById(`ec-message-body-${msgId}`); + if (element) { + setShowSidebar(false); + element.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + } + }; + const isMessageNewDay = (current, previous) => !previous || !shouldRender(previous) || @@ -90,20 +108,38 @@ export const MessageAggregator = ({ fileMessage={msg} /> ) : ( - + > + + + setJumpToMessage(msg._id)} + css={{ + position: 'relative', + zIndex: 10, + }} + > + + + )} );