fix(frontend): resolve the inbox flickering search issue

frontend/src/components/inbox/index.tsx

@@ -6,12 +6,13 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { MainContainer, Search, Sidebar } from "@chatscope/chat-ui-kit-react";
+import { MainContainer, Sidebar } from "@chatscope/chat-ui-kit-react";
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 import { Grid, MenuItem } from "@mui/material";
 import { useState } from "react";
 
 import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
+import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import { Input } from "@/app-components/inputs/Input";
 import { useSearch } from "@/hooks/useSearch";
 import { useTranslate } from "@/hooks/useTranslate";
@@ -26,7 +27,7 @@ import { AssignedTo } from "./types";
 
 export const Inbox = () => {
   const { t } = useTranslate();
-  const { onSearch, searchPayload, searchText } = useSearch<ISubscriber>({
+  const { searchPayload, textFieldProps } = useSearch<ISubscriber>({
     $or: ["first_name", "last_name"],
   });
   const [channels, setChannels] = useState<string[]>([]);
@@ -46,14 +47,8 @@ export const Inbox = () => {
         <Grid item width="100%" height="100%" overflow="hidden">
           <MainContainer style={{ height: "100%" }}>
             <Sidebar position="left">
-              <Grid paddingX={1} paddingTop={1}>
-                <Search
-                  value={searchText}
-                  onClearClick={() => onSearch("")}
-                  className="changeColor"
-                  onChange={(v) => onSearch(v)}
-                  placeholder="Search..."
-                />
+              <Grid paddingX={1} pt={2} pb={1} mx={1}>
+                <FilterTextfield placeholder="Search..." {...textFieldProps} />
               </Grid>
               <Grid
                 display="flex"

frontend/src/hooks/useSearch.tsx

@@ -57,34 +57,32 @@ export const useSearch = <T,>(params: TParamItem<T>) => {
   const [searchText, setSearchText] = useState<string>(
     (router.query.search as string) || "",
   );
-
-  useEffect(() => {
-    if (router.query.search !== searchText) {
-      setSearchText((router.query.search as string) || "");
-    }
-  }, [router.query.search]);
-
+  const [isActive, setIsActive] = useState(false);
   const updateQueryParams = useCallback(
-    debounce(async (newSearchText: string) => {
-      await router.replace(
+    async (newSearchText: string) => {
+      const { search, ...rest } = { ...router.query, search: newSearchText };
+
+      await router.push(
         {
-          pathname: router.pathname,
-          query: { ...router.query, search: newSearchText || undefined },
+          query: newSearchText ? { ...rest, search } : rest,
         },
         undefined,
         { shallow: true },
       );
-    }, 300),
+    },
     [router],
   );
-  const onSearch = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string,
-  ) => {
-    const newSearchText = typeof e === "string" ? e : e.target.value;
+  const onSearch = debounce(
+    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string) => {
+      setSearchText(typeof e === "string" ? e : e.target.value);
+    },
+    300,
+  );
+
+  useEffect(() => {
+    updateQueryParams(searchText);
+  }, [searchText]);
 
-    setSearchText(newSearchText);
-    updateQueryParams(newSearchText);
-  };
   const {
     $eq: eqInitialParams,
     $iLike: iLikeParams,
@@ -105,5 +103,15 @@ export const useSearch = <T,>(params: TParamItem<T>) => {
         }),
       },
     },
+    textFieldProps: {
+      value: isActive ? undefined : searchText,
+      onChange: onSearch,
+      onMouseOver: () => {
+        setIsActive(true);
+      },
+      onMouseLeave: () => {
+        setIsActive(false);
+      },
+    },
   };
 };