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,
+ }}
+ >
+
+
+
)}
);