From 2f8ce320ae2234658a5b550dd9d11c29579bb683 Mon Sep 17 00:00:00 2001
From: ArturBekhDEV <102412173+ArturBekhDEV@users.noreply.github.com>
Date: Sat, 9 Sep 2023 20:24:58 +0300
Subject: [PATCH 1/5] fixed conflicts

---
 .../icons-with-counter/IconsWithCounter.tsx   | 41 ++++++++++++---
 src/components/message/Message.styles.ts      | 10 ++++
 src/components/message/Message.tsx            | 43 ++++++++++++---
 .../search-by-message/SearchByMessage.tsx     | 41 +++++++++++++--
 .../chat/chat-header/ChatHeader.styles.ts     |  6 ++-
 .../chat/chat-header/ChatHeader.tsx           | 52 ++++++++++++++-----
 src/pages/chat/Chat.tsx                       | 15 ++++++
 .../IconsWithCounter.spec.jsx                 | 12 ++++-
 .../unit/components/message/Message.spec.jsx  |  8 ++-
 .../SearchByMessage.spec.jsx                  | 39 +++++++++++++-
 10 files changed, 228 insertions(+), 39 deletions(-)

diff --git a/src/components/icons-with-counter/IconsWithCounter.tsx b/src/components/icons-with-counter/IconsWithCounter.tsx
index 5ed784363..775345bb9 100644
--- a/src/components/icons-with-counter/IconsWithCounter.tsx
+++ b/src/components/icons-with-counter/IconsWithCounter.tsx
@@ -1,4 +1,4 @@
-import { useState, FC } from 'react'
+import { useState, FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import Box from '@mui/material/Box'
@@ -11,20 +11,45 @@ import { styles } from '~/components/icons-with-counter/IconsWithCounter.style'
 
 interface IconsWithCounterProps {
   maxValue: number
+  onFilteredIndexChange: (index: number) => void
 }
 
-const IconsWithCounter: FC<IconsWithCounterProps> = ({ maxValue }) => {
+const IconsWithCounter: FC<IconsWithCounterProps> = ({
+  maxValue,
+  onFilteredIndexChange
+}) => {
   const [possibleValue, setPossibleValue] = useState<number>(0)
+  const [realIndex, setRealIndex] = useState<number>(0)
+
   const { t } = useTranslation()
 
+  useEffect(() => {
+    if (!maxValue) {
+      setPossibleValue(0)
+      setRealIndex(0)
+    }
+
+    onFilteredIndexChange(realIndex)
+  }, [realIndex, onFilteredIndexChange, maxValue])
+
   const handleIncrement = () => {
-    setPossibleValue((prev) => (prev % maxValue) + 1)
+    if (maxValue !== 0) {
+      setPossibleValue((prev) => {
+        const newValue = (prev + 1) % maxValue
+        setRealIndex(newValue)
+        return newValue
+      })
+    }
   }
 
   const handleDecrement = () => {
-    possibleValue > 1
-      ? setPossibleValue((prev) => prev - 1)
-      : setPossibleValue(maxValue)
+    if (maxValue !== 0) {
+      setPossibleValue((prev) => {
+        const newValue = prev > 0 ? prev - 1 : maxValue - 1
+        setRealIndex(newValue)
+        return newValue
+      })
+    }
   }
 
   return (
@@ -33,7 +58,9 @@ const IconsWithCounter: FC<IconsWithCounterProps> = ({ maxValue }) => {
         <KeyboardArrowUpIcon />
       </IconButton>
       <Typography sx={styles.typography}>
-        {possibleValue} {t('common.of')} {maxValue}
+        {maxValue
+          ? `${possibleValue + 1} ${t('common.of')} ${maxValue}`
+          : `${possibleValue}  ${t('common.of')} ${maxValue}`}
       </Typography>
       <IconButton data-testid='IconDown' onClick={handleDecrement}>
         <KeyboardArrowDownIcon />
diff --git a/src/components/message/Message.styles.ts b/src/components/message/Message.styles.ts
index b02ed0066..a6c03e16a 100644
--- a/src/components/message/Message.styles.ts
+++ b/src/components/message/Message.styles.ts
@@ -13,6 +13,16 @@ export const styles = {
     height: '44px',
     '&:hover': { transform: 'scale(1.1)' }
   },
+
+  findMessageCard: {
+    backgroundColor: 'primary.700',
+    borderRadius: '10px',
+    padding: '2px 4px',
+    display: 'inline',
+    color: 'white',
+    typography: TypographyVariantEnum.Body1,
+    p: '8px 16px'
+  },
   messageCard: (isMyMessage: boolean) => ({
     boxSizing: 'border-box',
     maxWidth: '520px',
diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
index 6e1d213a0..7659823e2 100644
--- a/src/components/message/Message.tsx
+++ b/src/components/message/Message.tsx
@@ -1,4 +1,4 @@
-import { FC, MouseEvent } from 'react'
+import { FC, MouseEvent, useRef, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
@@ -23,18 +23,24 @@ interface MessageProps {
   sx?: {
     avatar?: SxProps
   }
+  filteredMessages: string[]
+  filteredIndex: number
 }
 
-const Message: FC<MessageProps> = ({ message, prevMessage, sx = {} }) => {
+const Message: FC<MessageProps> = ({
+  message,
+  prevMessage,
+  sx = {},
+  filteredMessages,
+  filteredIndex
+}) => {
   const { userId: myId } = useAppSelector((state) => state.appMain)
-
   const { author, text, authorRole, createdAt } = message
   const { _id, photo } = author
   const { path } = authRoutes.userProfile
   const isMyMessage = myId === _id
   const isSameAuthor = prevMessage?.author._id === _id
   const pathToProfile = createUrlPath(path, _id, { authorRole })
-
   const timeDifference = prevMessage
     ? new Date(createdAt).getTime() - new Date(prevMessage.createdAt).getTime()
     : Infinity
@@ -46,11 +52,27 @@ const Message: FC<MessageProps> = ({ message, prevMessage, sx = {} }) => {
     e.stopPropagation()
   }
 
+  const messageRef = useRef<HTMLDivElement>(null)
+  const isTextFiltered = filteredMessages.some(
+    (filteredMessage) => filteredMessage.toLowerCase() === text.toLowerCase()
+  )
+  useEffect(() => {
+    if (filteredIndex >= 0 && filteredIndex < filteredMessages.length) {
+      const messageToScrollTo = filteredMessages[filteredIndex]
+
+      if (messageToScrollTo === text) {
+        messageRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        })
+      }
+    }
+  }, [filteredIndex, filteredMessages, text])
+
   const date = getFormattedDate({
     date: createdAt,
     options: { hour: '2-digit', minute: '2-digit' }
   })
-
   const avatar = !isMyMessage && isAvatarVisible && (
     <Link onClick={handleLinkClick} to={pathToProfile}>
       <Avatar
@@ -59,11 +81,16 @@ const Message: FC<MessageProps> = ({ message, prevMessage, sx = {} }) => {
       />
     </Link>
   )
-
   return (
-    <Box sx={styles.root(isMyMessage, isAvatarVisible)}>
+    <Box ref={messageRef} sx={styles.root(isMyMessage, isAvatarVisible)}>
       {avatar}
-      <AppCard sx={styles.messageCard(isMyMessage)}>
+      <AppCard
+        sx={
+          isTextFiltered
+            ? styles.findMessageCard
+            : styles.messageCard(isMyMessage)
+        }
+      >
         {text}
         <Typography sx={styles.date(isMyMessage)}>{date}</Typography>
       </AppCard>
diff --git a/src/components/search-by-message/SearchByMessage.tsx b/src/components/search-by-message/SearchByMessage.tsx
index 136f25a82..da52de2da 100644
--- a/src/components/search-by-message/SearchByMessage.tsx
+++ b/src/components/search-by-message/SearchByMessage.tsx
@@ -1,31 +1,62 @@
-import { useState, ChangeEvent, FC } from 'react'
+import { useState, ChangeEvent, useEffect, FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 import IconsWithCounter from '~/components/icons-with-counter/IconsWithCounter'
+import { useDebounce } from '~/hooks/use-debounce'
 
 import { styles } from '~/components/search-by-message/SearchByMessage.styles'
 
 interface SearchByMessageProps {
-  maxValue: number
+  messages: { text: string }[]
+  onFilteredMessagesChange: (filteredMessages: string[]) => void
+  onFilteredIndexChange: (filteredIndex: number) => void
 }
 
-const SearchByMessage: FC<SearchByMessageProps> = ({ maxValue = 10 }) => {
+const SearchByMessage: FC<SearchByMessageProps> = ({
+  messages,
+  onFilteredMessagesChange,
+  onFilteredIndexChange
+}) => {
   const { t } = useTranslation()
   const [search, setSearch] = useState<string>('')
+  const [findMessage, setFindMessage] = useState<string[]>([])
 
+  const debouncedOnFilteredMessagesChange = useDebounce(
+    (filteredMessages: string[]) => {
+      onFilteredMessagesChange(filteredMessages)
+    },
+    1500
+  )
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSearch(event.target.value)
   }
+  useEffect(() => {
+    if (search) {
+      const filtered = messages.filter((message) =>
+        message.text.toLowerCase().includes(search.toLowerCase())
+      )
+      const filteredMessages = filtered.map((item) => item.text)
+
+      debouncedOnFilteredMessagesChange(filteredMessages)
+      setFindMessage(filteredMessages)
+    } else {
+      onFilteredMessagesChange([])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [search, messages])
 
   const onClear = () => {
     setSearch('')
+    setFindMessage([])
   }
-
   return (
     <Box sx={styles.container}>
-      <IconsWithCounter maxValue={maxValue} />
+      <IconsWithCounter
+        maxValue={findMessage.length}
+        onFilteredIndexChange={onFilteredIndexChange}
+      />
       <InputWithIcon
         onChange={onChange}
         onClear={onClear}
diff --git a/src/containers/chat/chat-header/ChatHeader.styles.ts b/src/containers/chat/chat-header/ChatHeader.styles.ts
index 56572cc58..4f2d62464 100644
--- a/src/containers/chat/chat-header/ChatHeader.styles.ts
+++ b/src/containers/chat/chat-header/ChatHeader.styles.ts
@@ -26,5 +26,9 @@ export const styles = {
     columnGap: '5px',
     right: '24px'
   },
-  icon: { color: 'primary.700' }
+  icon: { color: 'primary.700' },
+  searchContainer: {
+    p: 0,
+    mt: '10px'
+  }
 }
diff --git a/src/containers/chat/chat-header/ChatHeader.tsx b/src/containers/chat/chat-header/ChatHeader.tsx
index 8d6bba5b5..94c51177d 100644
--- a/src/containers/chat/chat-header/ChatHeader.tsx
+++ b/src/containers/chat/chat-header/ChatHeader.tsx
@@ -1,4 +1,4 @@
-import { FC, MouseEvent } from 'react'
+import { FC, MouseEvent, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
@@ -10,6 +10,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert'
 import useBreakpoints from '~/hooks/use-breakpoints'
 import AppCard from '~/components/app-card/AppCard'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
+import SearchByMessage from '~/components/search-by-message/SearchByMessage'
 
 import { styles } from '~/containers/chat/chat-header/ChatHeader.styles'
 import { UserResponse } from '~/types'
@@ -18,14 +19,26 @@ interface ChatHeaderProps {
   onClick: () => void
   onMenuClick: (e: MouseEvent<HTMLButtonElement>) => void
   user: Pick<UserResponse, '_id' | 'firstName' | 'lastName' | 'photo'>
+  messages: { text: string }[]
+  onFilteredMessagesChange: (filteredMessages: string[]) => void
+  onFilteredIndexChange: (filteredIndex: number) => void
 }
 
-const ChatHeader: FC<ChatHeaderProps> = ({ onClick, onMenuClick, user }) => {
+const ChatHeader: FC<ChatHeaderProps> = ({
+  onClick,
+  user,
+  onMenuClick,
+  messages,
+  onFilteredMessagesChange,
+  onFilteredIndexChange
+}) => {
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
   const { t } = useTranslation()
   const { isMobile } = useBreakpoints()
 
   const handleOnClick = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
+    setIsSearchOpen(!isSearchOpen)
   }
 
   const iconButtons = [
@@ -47,19 +60,30 @@ const ChatHeader: FC<ChatHeaderProps> = ({ onClick, onMenuClick, user }) => {
   )
 
   return (
-    <AppCard onClick={onClick} sx={styles.container}>
-      {isMobile && (
-        <IconButton onClick={onMenuClick} sx={styles.menuIconBtn}>
-          <MenuIcon />
-        </IconButton>
+    <>
+      <AppCard onClick={onClick} sx={styles.container}>
+        {isMobile && (
+          <IconButton onClick={onMenuClick} sx={styles.menuIconBtn}>
+            <MenuIcon />
+          </IconButton>
+        )}
+        <TitleWithDescription
+          description={status}
+          style={styles.titleWithDescription}
+          title={`${user.firstName} ${user.lastName}`}
+        />
+        <Box sx={styles.actions}>{icons}</Box>
+      </AppCard>
+      {isSearchOpen && (
+        <Box sx={styles.searchContainer}>
+          <SearchByMessage
+            messages={messages}
+            onFilteredIndexChange={onFilteredIndexChange}
+            onFilteredMessagesChange={onFilteredMessagesChange}
+          />
+        </Box>
       )}
-      <TitleWithDescription
-        description={status}
-        style={styles.titleWithDescription}
-        title={`${user.firstName} ${user.lastName}`}
-      />
-      <Box sx={styles.actions}>{icons}</Box>
-    </AppCard>
+    </>
   )
 }
 
diff --git a/src/pages/chat/Chat.tsx b/src/pages/chat/Chat.tsx
index dc3bb8e5b..40e3c4d7b 100644
--- a/src/pages/chat/Chat.tsx
+++ b/src/pages/chat/Chat.tsx
@@ -46,6 +46,8 @@ const Chat = () => {
   const [selectedChat, setSelectedChat] = useState<ChatResponse | null>(null)
   const [messages, setMessages] = useState<MessageInterface[]>([])
   const [textAreaValue, setTextAreaValue] = useState<string>('')
+  const [filteredMessages, setFilteredMessages] = useState<string[]>([])
+  const [filteredIndex, setFilteredIndex] = useState<number>(0)
   const scrollRef = useRef<HTMLDivElement | null>(null)
 
   const groupedMessages = getGroupedByDate(messages, getIsNewDay)
@@ -124,6 +126,8 @@ const Chat = () => {
       <ChatDate date={group.date} />
       {group.items.map((item, index) => (
         <Message
+          filteredIndex={filteredIndex}
+          filteredMessages={filteredMessages}
           key={item._id}
           message={item}
           prevMessage={index ? group.items[index - 1] : null}
@@ -164,6 +168,14 @@ const Chat = () => {
     </AppChip>
   )
 
+  const handleFilteredMessage = (filteredMessages: string[]) => {
+    setFilteredMessages(filteredMessages.reverse())
+  }
+
+  const hadleIndexMessage = (filteredIndex: number) => {
+    setFilteredIndex(filteredIndex)
+  }
+
   return (
     <PageWrapper sx={styles.root}>
       {isMobile && (
@@ -197,7 +209,10 @@ const Chat = () => {
             ) : (
               <>
                 <ChatHeader
+                  messages={messages}
                   onClick={() => onSidebarHandler(true)}
+                  onFilteredIndexChange={hadleIndexMessage}
+                  onFilteredMessagesChange={handleFilteredMessage}
                   onMenuClick={openChatsHandler}
                   user={selectedChat.members[0].user}
                 />
diff --git a/tests/unit/components/icons-with-counter/IconsWithCounter.spec.jsx b/tests/unit/components/icons-with-counter/IconsWithCounter.spec.jsx
index 0a8272e0a..f78c57247 100644
--- a/tests/unit/components/icons-with-counter/IconsWithCounter.spec.jsx
+++ b/tests/unit/components/icons-with-counter/IconsWithCounter.spec.jsx
@@ -1,18 +1,26 @@
+import { vi } from 'vitest'
 import { fireEvent, render, screen } from '@testing-library/react'
 
 import IconsWithCounter from '~/components/icons-with-counter/IconsWithCounter'
 
 describe('IconWithCounter test', () => {
   const testValue = 10
+  const mockOnFilteredIndexChange = vi.fn()
   beforeEach(() => {
-    render(<IconsWithCounter maxValue={testValue} />)
+    render(
+      <IconsWithCounter
+        maxValue={testValue}
+        onFilteredIndexChange={mockOnFilteredIndexChange}
+      />
+    )
   })
 
   it('should increment data', () => {
     const buttonIncrement = screen.getByTestId('IconUp')
 
     fireEvent.click(buttonIncrement)
-    expect(screen.getByText('1 common.of 10')).toBeTruthy()
+    expect(screen.getByText('2 common.of 10')).toBeTruthy()
+    expect(mockOnFilteredIndexChange).toHaveBeenCalledWith(1)
   })
 
   it('should decrement data', () => {
diff --git a/tests/unit/components/message/Message.spec.jsx b/tests/unit/components/message/Message.spec.jsx
index db190e988..68e58a1a2 100644
--- a/tests/unit/components/message/Message.spec.jsx
+++ b/tests/unit/components/message/Message.spec.jsx
@@ -10,7 +10,13 @@ const messageMock = messagesMock[0]
 
 describe('Message component', () => {
   beforeEach(() => {
-    renderWithProviders(<Message message={messageMock} />)
+    renderWithProviders(
+      <Message
+        filteredIndex={1}
+        filteredMessages={['Some text']}
+        message={messageMock}
+      />
+    )
   })
 
   it('should render the author name and message content', () => {
diff --git a/tests/unit/components/search-by-message/SearchByMessage.spec.jsx b/tests/unit/components/search-by-message/SearchByMessage.spec.jsx
index 3eafca8e6..cf35e01a9 100644
--- a/tests/unit/components/search-by-message/SearchByMessage.spec.jsx
+++ b/tests/unit/components/search-by-message/SearchByMessage.spec.jsx
@@ -1,11 +1,48 @@
+import { vi } from 'vitest'
 import { fireEvent, render, screen } from '@testing-library/react'
 
 import SearchByMessage from '~/components/search-by-message/SearchByMessage'
 
 describe('SearchByMessage', () => {
+  const onFilteredMessagesChange = vi.fn()
+  const onFilteredIndexChange = vi.fn()
+  const mockMessage = [
+    {
+      _id: '64ee0a2f6ae3b95ececb05b5',
+      author: {
+        _id: '6421d9833cdf38b706756dff'
+      },
+      authorRole: 'student',
+      text: 'Hello from there!',
+      isRead: false,
+      chat: '64a543b5afb24d9c76bfdef1',
+      createdAt: '2023-07-03T08:55:53.812Z',
+      updatedAt: '2023-07-03T08:55:53.812Z'
+    },
+    {
+      _id: '64ee0de96ae3b95ececb05bb',
+      author: {
+        _id: '6494128829631adbaf5cf615',
+        photo: '1687425744398-ITA wallpapers-19.png'
+      },
+      authorRole: 'tutor',
+      text: 'Hello from tutor!',
+      isRead: false,
+      chat: '64a543b5afb24d9c76bfdef1',
+      createdAt: '2023-07-03T08:55:53.812Z',
+      updatedAt: '2023-07-03T08:55:53.812Z'
+    }
+  ]
+
   const testValue = 'test data'
   beforeEach(() => {
-    render(<SearchByMessage maxValue={10} />)
+    render(
+      <SearchByMessage
+        messages={mockMessage}
+        onFilteredIndexChange={onFilteredIndexChange}
+        onFilteredMessagesChange={onFilteredMessagesChange}
+      />
+    )
   })
 
   it('should change and clear input value', () => {

From 16a431bb5245a290cd7a6d552c016648cd3815c2 Mon Sep 17 00:00:00 2001
From: ArturBekhDEV <102412173+ArturBekhDEV@users.noreply.github.com>
Date: Thu, 7 Sep 2023 10:53:54 +0300
Subject: [PATCH 2/5] fixed some tests

---
 src/components/message/Message.tsx             | 2 +-
 tests/unit/components/message/Message.spec.jsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
index 7659823e2..fbb7434a2 100644
--- a/src/components/message/Message.tsx
+++ b/src/components/message/Message.tsx
@@ -31,7 +31,7 @@ const Message: FC<MessageProps> = ({
   message,
   prevMessage,
   sx = {},
-  filteredMessages,
+  filteredMessages = [],
   filteredIndex
 }) => {
   const { userId: myId } = useAppSelector((state) => state.appMain)
diff --git a/tests/unit/components/message/Message.spec.jsx b/tests/unit/components/message/Message.spec.jsx
index 68e58a1a2..4988126d3 100644
--- a/tests/unit/components/message/Message.spec.jsx
+++ b/tests/unit/components/message/Message.spec.jsx
@@ -7,13 +7,13 @@ import { getFormattedDate } from '~/utils/helper-functions'
 import { messagesMock } from '~tests/unit/containers/chat/list-of-users-with-search/MockChat.spec.constants'
 
 const messageMock = messagesMock[0]
-
+const filteredMessageMock = ['Some text']
 describe('Message component', () => {
   beforeEach(() => {
     renderWithProviders(
       <Message
         filteredIndex={1}
-        filteredMessages={['Some text']}
+        filteredMessages={filteredMessageMock}
         message={messageMock}
       />
     )

From 961c2674f88c6f618a8374a8b93ad89854067029 Mon Sep 17 00:00:00 2001
From: ArturBekhDEV <102412173+ArturBekhDEV@users.noreply.github.com>
Date: Tue, 19 Sep 2023 14:05:29 +0300
Subject: [PATCH 3/5] fix conflicts

---
 .../icons-with-counter/IconsWithCounter.tsx   |  8 ++---
 src/components/message/Message.styles.ts      | 11 +++---
 src/components/message/Message.tsx            |  6 ++--
 .../SearchByMessage.styles.ts                 |  2 +-
 .../search-by-message/SearchByMessage.tsx     | 15 ++++----
 .../chat/chat-header/ChatHeader.styles.ts     | 10 ++++--
 .../chat/chat-header/ChatHeader.tsx           | 35 ++++++++++---------
 src/styles/app-theme/app.pallete.ts           |  3 +-
 8 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/src/components/icons-with-counter/IconsWithCounter.tsx b/src/components/icons-with-counter/IconsWithCounter.tsx
index 775345bb9..25ac65344 100644
--- a/src/components/icons-with-counter/IconsWithCounter.tsx
+++ b/src/components/icons-with-counter/IconsWithCounter.tsx
@@ -19,24 +19,21 @@ const IconsWithCounter: FC<IconsWithCounterProps> = ({
   onFilteredIndexChange
 }) => {
   const [possibleValue, setPossibleValue] = useState<number>(0)
-  const [realIndex, setRealIndex] = useState<number>(0)
 
   const { t } = useTranslation()
 
   useEffect(() => {
     if (!maxValue) {
       setPossibleValue(0)
-      setRealIndex(0)
     }
 
-    onFilteredIndexChange(realIndex)
-  }, [realIndex, onFilteredIndexChange, maxValue])
+    onFilteredIndexChange(possibleValue)
+  }, [onFilteredIndexChange, maxValue, possibleValue])
 
   const handleIncrement = () => {
     if (maxValue !== 0) {
       setPossibleValue((prev) => {
         const newValue = (prev + 1) % maxValue
-        setRealIndex(newValue)
         return newValue
       })
     }
@@ -46,7 +43,6 @@ const IconsWithCounter: FC<IconsWithCounterProps> = ({
     if (maxValue !== 0) {
       setPossibleValue((prev) => {
         const newValue = prev > 0 ? prev - 1 : maxValue - 1
-        setRealIndex(newValue)
         return newValue
       })
     }
diff --git a/src/components/message/Message.styles.ts b/src/components/message/Message.styles.ts
index a6c03e16a..5a8755b8f 100644
--- a/src/components/message/Message.styles.ts
+++ b/src/components/message/Message.styles.ts
@@ -15,11 +15,10 @@ export const styles = {
   },
 
   findMessageCard: {
-    backgroundColor: 'primary.700',
+    backgroundColor: 'basic.turquoiseChat',
     borderRadius: '10px',
-    padding: '2px 4px',
     display: 'inline',
-    color: 'white',
+    color: 'primary.900',
     typography: TypographyVariantEnum.Body1,
     p: '8px 16px'
   },
@@ -34,9 +33,11 @@ export const styles = {
     typography: TypographyVariantEnum.Body1,
     p: '8px 16px'
   }),
-  date: (isMyMessage: boolean) => ({
+  date: (isMyMessage: boolean, isTextFiltered: boolean) => ({
     typography: TypographyVariantEnum.Caption,
-    color: `primary.${isMyMessage ? 100 : 500}`,
+    color: isTextFiltered
+      ? 'primary.500'
+      : `primary.${isMyMessage ? 100 : 500}`,
     float: 'right',
     userSelect: 'none',
     m: '4px 0 0 8px'
diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
index fbb7434a2..868c3c5fc 100644
--- a/src/components/message/Message.tsx
+++ b/src/components/message/Message.tsx
@@ -23,7 +23,7 @@ interface MessageProps {
   sx?: {
     avatar?: SxProps
   }
-  filteredMessages: string[]
+  filteredMessages?: string[]
   filteredIndex: number
 }
 
@@ -92,7 +92,9 @@ const Message: FC<MessageProps> = ({
         }
       >
         {text}
-        <Typography sx={styles.date(isMyMessage)}>{date}</Typography>
+        <Typography sx={styles.date(isMyMessage, isTextFiltered)}>
+          {date}
+        </Typography>
       </AppCard>
     </Box>
   )
diff --git a/src/components/search-by-message/SearchByMessage.styles.ts b/src/components/search-by-message/SearchByMessage.styles.ts
index 88c2333ab..ea0c1ab0a 100644
--- a/src/components/search-by-message/SearchByMessage.styles.ts
+++ b/src/components/search-by-message/SearchByMessage.styles.ts
@@ -6,7 +6,7 @@ export const styles = {
     justifyContent: 'space-between',
     py: '8px',
     backgroundColor: 'basic.white',
-    borderRadius: ' 0 0 6px 6px'
+    borderRadius: ' 0 0 12px 12px'
   },
   input: {
     width: '90%'
diff --git a/src/components/search-by-message/SearchByMessage.tsx b/src/components/search-by-message/SearchByMessage.tsx
index da52de2da..506fbe394 100644
--- a/src/components/search-by-message/SearchByMessage.tsx
+++ b/src/components/search-by-message/SearchByMessage.tsx
@@ -12,12 +12,14 @@ interface SearchByMessageProps {
   messages: { text: string }[]
   onFilteredMessagesChange: (filteredMessages: string[]) => void
   onFilteredIndexChange: (filteredIndex: number) => void
+  isCloseSearch: () => void
 }
 
 const SearchByMessage: FC<SearchByMessageProps> = ({
   messages,
   onFilteredMessagesChange,
-  onFilteredIndexChange
+  onFilteredIndexChange,
+  isCloseSearch
 }) => {
   const { t } = useTranslation()
   const [search, setSearch] = useState<string>('')
@@ -27,7 +29,7 @@ const SearchByMessage: FC<SearchByMessageProps> = ({
     (filteredMessages: string[]) => {
       onFilteredMessagesChange(filteredMessages)
     },
-    1500
+    500
   )
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSearch(event.target.value)
@@ -44,12 +46,13 @@ const SearchByMessage: FC<SearchByMessageProps> = ({
     } else {
       onFilteredMessagesChange([])
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [search, messages])
 
-  const onClear = () => {
-    setSearch('')
-    setFindMessage([])
+  const onClose = () => {
+    isCloseSearch()
+    onFilteredMessagesChange([])
   }
   return (
     <Box sx={styles.container}>
@@ -59,7 +62,7 @@ const SearchByMessage: FC<SearchByMessageProps> = ({
       />
       <InputWithIcon
         onChange={onChange}
-        onClear={onClear}
+        onClear={onClose}
         placeholder={`${t('common.search')}...`}
         sx={styles.input}
         value={search}
diff --git a/src/containers/chat/chat-header/ChatHeader.styles.ts b/src/containers/chat/chat-header/ChatHeader.styles.ts
index 4f2d62464..8c0219607 100644
--- a/src/containers/chat/chat-header/ChatHeader.styles.ts
+++ b/src/containers/chat/chat-header/ChatHeader.styles.ts
@@ -1,4 +1,5 @@
 import { TypographyVariantEnum } from '~/types'
+import { mainShadow } from '~/styles/app-theme/custom-shadows'
 
 export const styles = {
   container: { position: 'relative', alignItems: 'center', p: '14px 24px' },
@@ -28,7 +29,12 @@ export const styles = {
   },
   icon: { color: 'primary.700' },
   searchContainer: {
-    p: 0,
-    mt: '10px'
+    width: '100%',
+    position: 'absolute',
+    zIndex: '1',
+    top: '75px',
+    left: '0px',
+    pt: '10px',
+    boxShadow: mainShadow
   }
 }
diff --git a/src/containers/chat/chat-header/ChatHeader.tsx b/src/containers/chat/chat-header/ChatHeader.tsx
index 94c51177d..1f38be512 100644
--- a/src/containers/chat/chat-header/ChatHeader.tsx
+++ b/src/containers/chat/chat-header/ChatHeader.tsx
@@ -32,7 +32,7 @@ const ChatHeader: FC<ChatHeaderProps> = ({
   onFilteredMessagesChange,
   onFilteredIndexChange
 }) => {
-  const [isSearchOpen, setIsSearchOpen] = useState(false)
+  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false)
   const { t } = useTranslation()
   const { isMobile } = useBreakpoints()
 
@@ -45,7 +45,9 @@ const ChatHeader: FC<ChatHeaderProps> = ({
     { _id: 1, icon: <SearchIcon />, handleOnClick },
     { _id: 2, icon: <MoreVertIcon />, handleOnClick }
   ]
-
+  const closeSearch = () => {
+    setIsSearchOpen(false)
+  }
   const icons = iconButtons.map(({ _id, icon, handleOnClick }) => (
     <IconButton key={_id} onClick={handleOnClick} sx={styles.icon}>
       {icon}
@@ -60,30 +62,29 @@ const ChatHeader: FC<ChatHeaderProps> = ({
   )
 
   return (
-    <>
-      <AppCard onClick={onClick} sx={styles.container}>
-        {isMobile && (
-          <IconButton onClick={onMenuClick} sx={styles.menuIconBtn}>
-            <MenuIcon />
-          </IconButton>
-        )}
-        <TitleWithDescription
-          description={status}
-          style={styles.titleWithDescription}
-          title={`${user.firstName} ${user.lastName}`}
-        />
-        <Box sx={styles.actions}>{icons}</Box>
-      </AppCard>
+    <AppCard onClick={onClick} sx={styles.container}>
+      {isMobile && (
+        <IconButton onClick={onMenuClick} sx={styles.menuIconBtn}>
+          <MenuIcon />
+        </IconButton>
+      )}
+      <TitleWithDescription
+        description={status}
+        style={styles.titleWithDescription}
+        title={`${user.firstName} ${user.lastName}`}
+      />
+      <Box sx={styles.actions}>{icons}</Box>
       {isSearchOpen && (
         <Box sx={styles.searchContainer}>
           <SearchByMessage
+            isCloseSearch={closeSearch}
             messages={messages}
             onFilteredIndexChange={onFilteredIndexChange}
             onFilteredMessagesChange={onFilteredMessagesChange}
           />
         </Box>
       )}
-    </>
+    </AppCard>
   )
 }
 
diff --git a/src/styles/app-theme/app.pallete.ts b/src/styles/app-theme/app.pallete.ts
index f44b327bb..4c9fd639e 100644
--- a/src/styles/app-theme/app.pallete.ts
+++ b/src/styles/app-theme/app.pallete.ts
@@ -18,7 +18,8 @@ const palette = {
     orientalHerbs: '#12A03A',
     lime: '#99CC00',
     turquoise: '#489DA0',
-    turquoiseDark: '#3B8587'
+    turquoiseDark: '#3B8587',
+    turquoiseChat: '#A0F0F2'
   },
   companyBlue: 'rgba(0, 167, 167, 0.2)',
   error: {

From 8e8cca1255dd63c27bf4f77ac030c2d6612bf302 Mon Sep 17 00:00:00 2001
From: ArturBekhDEV <102412173+ArturBekhDEV@users.noreply.github.com>
Date: Sat, 9 Sep 2023 21:23:30 +0300
Subject: [PATCH 4/5] fix some bugs in search

---
 .../search-by-message/SearchByMessage.tsx           |  2 +-
 src/containers/chat/chat-header/ChatHeader.tsx      | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/search-by-message/SearchByMessage.tsx b/src/components/search-by-message/SearchByMessage.tsx
index 506fbe394..a27f466d3 100644
--- a/src/components/search-by-message/SearchByMessage.tsx
+++ b/src/components/search-by-message/SearchByMessage.tsx
@@ -55,7 +55,7 @@ const SearchByMessage: FC<SearchByMessageProps> = ({
     onFilteredMessagesChange([])
   }
   return (
-    <Box sx={styles.container}>
+    <Box onClick={(e) => e.stopPropagation()} sx={styles.container}>
       <IconsWithCounter
         maxValue={findMessage.length}
         onFilteredIndexChange={onFilteredIndexChange}
diff --git a/src/containers/chat/chat-header/ChatHeader.tsx b/src/containers/chat/chat-header/ChatHeader.tsx
index 1f38be512..01f5f1b59 100644
--- a/src/containers/chat/chat-header/ChatHeader.tsx
+++ b/src/containers/chat/chat-header/ChatHeader.tsx
@@ -38,22 +38,27 @@ const ChatHeader: FC<ChatHeaderProps> = ({
 
   const handleOnClick = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
+  }
+  const handleSearch = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
     setIsSearchOpen(!isSearchOpen)
   }
 
   const iconButtons = [
-    { _id: 1, icon: <SearchIcon />, handleOnClick },
+    { _id: 1, icon: <SearchIcon />, handleOnClick: handleSearch },
     { _id: 2, icon: <MoreVertIcon />, handleOnClick }
   ]
-  const closeSearch = () => {
-    setIsSearchOpen(false)
-  }
+
   const icons = iconButtons.map(({ _id, icon, handleOnClick }) => (
     <IconButton key={_id} onClick={handleOnClick} sx={styles.icon}>
       {icon}
     </IconButton>
   ))
 
+  const closeSearch = () => {
+    setIsSearchOpen(false)
+  }
+
   const status = (
     <>
       <Typography sx={styles.statusBadge} />

From aafc104fb086d468a4074aae79f1839dcb094eba Mon Sep 17 00:00:00 2001
From: ArturBekhDEV <102412173+ArturBekhDEV@users.noreply.github.com>
Date: Sat, 9 Sep 2023 21:37:54 +0300
Subject: [PATCH 5/5] fixed tests

---
 src/components/search-by-message/SearchByMessage.tsx            | 1 +
 .../unit/components/search-by-message/SearchByMessage.spec.jsx  | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/components/search-by-message/SearchByMessage.tsx b/src/components/search-by-message/SearchByMessage.tsx
index a27f466d3..6cd029cc7 100644
--- a/src/components/search-by-message/SearchByMessage.tsx
+++ b/src/components/search-by-message/SearchByMessage.tsx
@@ -51,6 +51,7 @@ const SearchByMessage: FC<SearchByMessageProps> = ({
   }, [search, messages])
 
   const onClose = () => {
+    setSearch('')
     isCloseSearch()
     onFilteredMessagesChange([])
   }
diff --git a/tests/unit/components/search-by-message/SearchByMessage.spec.jsx b/tests/unit/components/search-by-message/SearchByMessage.spec.jsx
index cf35e01a9..600a11784 100644
--- a/tests/unit/components/search-by-message/SearchByMessage.spec.jsx
+++ b/tests/unit/components/search-by-message/SearchByMessage.spec.jsx
@@ -6,6 +6,7 @@ import SearchByMessage from '~/components/search-by-message/SearchByMessage'
 describe('SearchByMessage', () => {
   const onFilteredMessagesChange = vi.fn()
   const onFilteredIndexChange = vi.fn()
+  const isCloseSearch = vi.fn()
   const mockMessage = [
     {
       _id: '64ee0a2f6ae3b95ececb05b5',
@@ -38,6 +39,7 @@ describe('SearchByMessage', () => {
   beforeEach(() => {
     render(
       <SearchByMessage
+        isCloseSearch={isCloseSearch}
         messages={mockMessage}
         onFilteredIndexChange={onFilteredIndexChange}
         onFilteredMessagesChange={onFilteredMessagesChange}