From 5e2d7eff12f01741061400202526b4a8fb25c21a Mon Sep 17 00:00:00 2001
From: dhairyashil <dhairyashil10101010@gmail.com>
Date: Thu, 16 Jan 2025 02:46:18 +0530
Subject: [PATCH] Feat: Add search instruction to Search Messages sidebar

---
 .../common/MessageAggregator.js               | 17 +++++++-
 .../common/MessageAggregator.styles.js        | 12 +++++-
 .../data/searchMessageNote.js                 | 42 +++++++++++++++++++
 3 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 packages/react/src/views/MessageAggregators/data/searchMessageNote.js

diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
index 44461790a..c819b5baa 100644
--- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
+++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
@@ -18,6 +18,8 @@ import NoMessagesIndicator from './NoMessageIndicator';
 import FileDisplay from '../../FileMessage/FileMessage';
 import useSetExclusiveState from '../../../hooks/useSetExclusiveState';
 import { useRCContext } from '../../../context/RCInstance';
+import searchNote from '../data/searchMessageNote';
+import { Markdown } from '../../Markdown';
 
 export const MessageAggregator = ({
   title,
@@ -33,7 +35,8 @@ export const MessageAggregator = ({
   viewType = 'Sidebar',
 }) => {
   const { theme } = useTheme();
-  const styles = getMessageAggregatorStyles(theme);
+  const { mode } = useTheme();
+  const styles = getMessageAggregatorStyles(theme, mode);
   const setExclusiveState = useSetExclusiveState();
   const { ECOptions } = useRCContext();
   const showRoles = ECOptions?.showRoles;
@@ -109,6 +112,8 @@ export const MessageAggregator = ({
   const noMessages = messageList?.length === 0 || !messageRendered;
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
 
+  const showSearchNote = title === 'Search Messages';
+
   return (
     <ViewComponent
       title={title}
@@ -127,6 +132,16 @@ export const MessageAggregator = ({
           }
         : {})}
     >
+      {showSearchNote && (
+        <Box css={styles.noteStyle}>
+          <Markdown
+            body={searchNote.msg}
+            md={searchNote.md}
+            isReaction={false}
+          />
+        </Box>
+      )}
+
       {fetching || loading ? (
         <LoadingIndicator />
       ) : (
diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
index 1f18222e3..1a03cee34 100644
--- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
+++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
+import { lighten, darken } from '@embeddedchat/ui-elements';
 
-const getMessageAggregatorStyles = () => {
+const getMessageAggregatorStyles = (theme, mode) => {
   const styles = {
     listContainerStyles: css`
       flex: 1;
@@ -21,6 +22,15 @@ const getMessageAggregatorStyles = () => {
       flex-direction: column;
       align-items: center;
     `,
+
+    noteStyle: css`
+      margin-left: 16px;
+      margin-right: 16px;
+      font-size: 0.875rem;
+      color: ${mode === 'light'
+        ? lighten(theme?.colors.foreground, 8)
+        : darken(theme?.colors.foreground, 0.3)};
+    `,
   };
 
   return styles;
diff --git a/packages/react/src/views/MessageAggregators/data/searchMessageNote.js b/packages/react/src/views/MessageAggregators/data/searchMessageNote.js
new file mode 100644
index 000000000..e6d763578
--- /dev/null
+++ b/packages/react/src/views/MessageAggregators/data/searchMessageNote.js
@@ -0,0 +1,42 @@
+const searchNote = {
+  msg: 'You can search using [Regular Expression](https://en.wikipedia.org/wiki/Regular_expression). e.g. `/^text$/i`',
+  md: [
+    {
+      type: 'PARAGRAPH',
+      value: [
+        {
+          type: 'PLAIN_TEXT',
+          value: 'You can search using ',
+        },
+        {
+          type: 'LINK',
+          value: {
+            src: {
+              type: 'PLAIN_TEXT',
+              value: 'https://en.wikipedia.org/wiki/Regular_expression',
+            },
+            label: [
+              {
+                type: 'PLAIN_TEXT',
+                value: 'Regular Expression',
+              },
+            ],
+          },
+        },
+        {
+          type: 'PLAIN_TEXT',
+          value: '. e.g. ',
+        },
+        {
+          type: 'INLINE_CODE',
+          value: {
+            type: 'PLAIN_TEXT',
+            value: '/^text$/i',
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export default searchNote;