fix menu item hover state and add a clear button at the end of searchbar

autogpt_platform/frontend/src/components/builder/block-menu/BlockMenuSearchBar.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils";
 import { Search, X } from "lucide-react";
-import React, { useRef, useState, useCallback, useEffect } from "react";
+import React, { useRef, useState, useEffect, useMemo } from "react";
 import { useBlockMenuContext } from "./block-menu-provider";
 import { Button } from "@/components/ui/button";
 import debounce from "lodash/debounce";
@@ -18,15 +18,16 @@ const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
   const { searchQuery, setSearchQuery, searchId, setSearchId } =
     useBlockMenuContext();
 
-  const debouncedSetSearchQuery = useCallback(
-    debounce((value: string) => {
-      setSearchQuery(value);
-      if (value.length === 0) {
-        setSearchId(undefined);
-      } else if (!searchId) {
-        setSearchId(crypto.randomUUID());
-      }
-    }, 500),
+  const debouncedSetSearchQuery = useMemo(
+    () =>
+      debounce((value: string) => {
+        setSearchQuery(value);
+        if (value.length === 0) {
+          setSearchId(undefined);
+        } else if (!searchId) {
+          setSearchId(crypto.randomUUID());
+        }
+      }, 500),
     [setSearchQuery, setSearchId, searchId],
   );
 
@@ -36,6 +37,13 @@ const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
     };
   }, [debouncedSetSearchQuery]);
 
+  const handleClear = () => {
+    setLocalQuery("");
+    setSearchQuery("");
+    setSearchId(undefined);
+    debouncedSetSearchQuery.cancel();
+  };
+
   return (
     <div
       className={cn(
@@ -58,6 +66,16 @@ const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
           "placeholder:text-zinc-400 focus:shadow-none focus:outline-none focus:ring-0",
         )}
       />
+      {localQuery.length > 0 && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleClear}
+          className="h-6 w-6 p-0 hover:bg-zinc-100"
+        >
+          <X className="h-4 w-4 text-zinc-500" />
+        </Button>
+      )}
     </div>
   );
 };

autogpt_platform/frontend/src/components/builder/block-menu/MenuItem.tsx

@@ -21,8 +21,8 @@ const MenuItem: React.FC<Props> = ({
     <Button
       className={cn(
         "flex h-[2.375rem] w-[12.875rem] justify-between whitespace-normal rounded-[0.5rem] bg-transparent p-2 pl-3 shadow-none",
-        "hover:cursor-pointer hover:bg-transparent focus:ring-0",
-        selected && "bg-zinc-100 hover:bg-zinc-100",
+        "hover:cursor-default hover:bg-zinc-100 focus:ring-0",
+        selected && "bg-zinc-100",
         className,
       )}
       {...rest}

autogpt_platform/frontend/src/components/builder/block-menu/search-and-filter/BlockMenuSearch.tsx

@@ -81,7 +81,15 @@ const BlockMenuSearch: React.FC = ({}) => {
         setLoadingMore(false);
       }
     },
-    [searchQuery, searchId, filters, api, setSearchData, pageSize],
+    [
+      searchQuery,
+      searchId,
+      filters,
+      api,
+      setCategoryCounts,
+      setSearchData,
+      pageSize,
+    ],
   );
 
   const handleScroll = useCallback(() => {
@@ -120,7 +128,7 @@ const BlockMenuSearch: React.FC = ({}) => {
   return (
     <div
       ref={scrollRef}
-      className="scrollbar-thumb-rounded h-full space-y-4 overflow-y-auto py-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200 transition-all duration-200"
+      className="scrollbar-thumb-rounded h-full space-y-4 overflow-y-auto py-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200"
     >
       {searchData.length !== 0 && <FiltersList />}
       <SearchList