Clears all filters when the search input is cleared and redesign filter based on new design.

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

@@ -15,7 +15,7 @@ const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [localQuery, setLocalQuery] = useState("");
-  const { searchQuery, setSearchQuery, searchId, setSearchId } =
+  const { searchQuery, setSearchQuery, searchId, setSearchId, setFilters } =
     useBlockMenuContext();
 
   const debouncedSetSearchQuery = useMemo(
@@ -41,6 +41,16 @@ const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
     setLocalQuery("");
     setSearchQuery("");
     setSearchId(undefined);
+    setFilters({
+      categories: {
+        blocks: false,
+        integrations: false,
+        marketplace_agents: false,
+        my_agents: false,
+        providers: false,
+      },
+      createdBy: [],
+    });
     debouncedSetSearchQuery.cancel();
   };
 

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

@@ -6,7 +6,6 @@ import React, { ButtonHTMLAttributes, useState } from "react";
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   selected?: boolean;
   number?: number;
-  needHover?: boolean;
   name?: string;
 }
 
@@ -14,7 +13,6 @@ const FilterChip: React.FC<Props> = ({
   selected = false,
   number,
   name,
-  needHover,
   className,
   ...rest
 }) => {
@@ -22,24 +20,33 @@ const FilterChip: React.FC<Props> = ({
   return (
     <Button
       className={cn(
-        "group w-fit space-x-1 rounded-[1.5rem] border border-zinc-300 bg-transparent px-[0.625rem] py-[0.375rem] shadow-none transition-all duration-300 ease-in-out",
-        "hover:bg-zinc-100 focus:ring-0 disabled:pointer-events-none",
+        "group w-fit space-x-1 rounded-[1.5rem] border border-zinc-300 bg-transparent px-[0.625rem] py-[0.375rem] shadow-none transition-transform duration-300 ease-in-out",
+        "hover:border-violet-500 hover:bg-transparent focus:ring-0 disabled:pointer-events-none",
+        selected && "border-0 bg-violet-700 hover:border",
       )}
       {...rest}
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
     >
-      <span className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-600 group-disabled:text-zinc-400">
+      <span
+        className={cn(
+          "font-sans text-sm font-medium leading-[1.375rem] text-zinc-600 group-hover:text-zinc-600 group-disabled:text-zinc-400",
+          selected && "text-zinc-50",
+        )}
+      >
         {name}
       </span>
       {selected &&
-        (needHover && isHovering && number ? (
+        (isHovering && number !== undefined ? (
           <span className="flex h-[1.375rem] items-center rounded-[1.25rem] bg-violet-700 p-[0.375rem] text-zinc-50 transition-all duration-300 ease-in-out animate-in fade-in zoom-in">
             {number > 100 ? "100+" : number}
           </span>
         ) : (
-          <span className="flex h-4 w-4 items-center justify-center rounded-full bg-zinc-600 transition-all duration-300 ease-in-out">
-            <X className="h-3 w-3 rounded-full text-white" strokeWidth={2} />
+          <span className="flex h-4 w-4 items-center justify-center rounded-full bg-zinc-50 transition-all duration-300 ease-in-out">
+            <X
+              className="h-3 w-3 rounded-full text-violet-700"
+              strokeWidth={2}
+            />
           </span>
         ))}
     </Button>

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

@@ -36,7 +36,6 @@ const BlockMenuSearch: React.FC = ({}) => {
         const activeCategories = Object.entries(filters.categories)
           .filter(([_, isActive]) => isActive)
           .map(([category, _]) => category)
-          .filter((category) => category !== "templates") // API doesn't support templates filter
           .map(
             (category) =>
               category as

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

@@ -100,7 +100,9 @@ export default function FilterSheet({
         variant={"link"}
         className="m-0 p-0 hover:no-underline"
       >
-        <FilterChip name="All filters" />
+        <FilterChip
+          name={hasActiveFilters() ? "Edit filters" : "All filters"}
+        />
       </Button>
 
       {isSheetVisible && (
@@ -143,7 +145,7 @@ export default function FilterSheet({
                       id={category.key}
                       checked={localFilters.categories[category.key]}
                       onCheckedChange={() => onCategoryChange(category.key)}
-                      className="border border-[#D4D4D4] shadow-none data-[state=checked]:border-none data-[state=checked]:bg-zinc-500 data-[state=checked]:text-white"
+                      className="border border-[#D4D4D4] shadow-none data-[state=checked]:border-none data-[state=checked]:bg-violet-700 data-[state=checked]:text-white"
                     />
                     <label
                       htmlFor={category.key}

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

@@ -61,10 +61,6 @@ const FiltersList = () => {
         <FilterChip
           key={category.key}
           name={category.name}
-          needHover={
-            Object.values(filters.categories).filter(Boolean).length === 1 &&
-            filters.categories[category.key]
-          }
           number={categoryCounts[category.key]}
           selected={filters.categories[category.key]}
           onClick={() => handleCategoryFilter(category.key)}