fetching creator list from searchList

Moves the `getBlockType` function from the SearchList component to the
`utils.ts` file to make it more reusable. Also removes the unused
`creators` state and `setCreators` function from the
BlockMenuContext and instead calculates the creators list dynamically
within the FilterSheet component based on the available search data.

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

@@ -56,8 +56,6 @@ interface BlockMenuContextType {
   setSearchId: React.Dispatch<React.SetStateAction<string | undefined>>;
   filters: Filters;
   setFilters: React.Dispatch<React.SetStateAction<Filters>>;
-  creators: string[];
-  setCreators: React.Dispatch<React.SetStateAction<string[]>>;
   searchData: SearchItem[];
   setSearchData: React.Dispatch<React.SetStateAction<SearchItem[]>>;
   categoryCounts: CategoryCounts;
@@ -104,8 +102,6 @@ export function BlockMenuStateProvider({
   });
   const [searchData, setSearchData] = useState<SearchItem[]>([]);
 
-  const [creators, setCreators] = useState<string[]>([]);
-
   const [searchId, setSearchId] = useState<string | undefined>(undefined);
 
   const [categoryCounts, setCategoryCounts] = useState<CategoryCounts>({
@@ -162,8 +158,6 @@ export function BlockMenuStateProvider({
         setSearchQuery,
         searchId,
         setSearchId,
-        creators,
-        setCreators,
         filters,
         setFilters,
         searchData,

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

@@ -2,7 +2,7 @@ import FilterChip from "../FilterChip";
 import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { X } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn, getBlockType } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -10,29 +10,41 @@ import {
   Filters,
   useBlockMenuContext,
 } from "../block-menu-provider";
+import { StoreAgent } from "@/lib/autogpt-server-api";
 
 export default function FilterSheet({
   categories,
 }: {
   categories: Array<{ key: CategoryKey; name: string }>;
 }) {
-  const { filters, creators, setFilters } = useBlockMenuContext();
+  const { filters, setFilters, searchData } = useBlockMenuContext();
   const [isOpen, setIsOpen] = useState(false);
   const [isSheetVisible, setIsSheetVisible] = useState(false);
   const [localFilters, setLocalFilters] = useState<Filters>(filters);
 
-  // Animation
+  const [creators, setCreators] = useState<string[]>([]);
+
   useEffect(() => {
     if (isOpen) {
       setIsSheetVisible(true);
       setLocalFilters(filters);
+
+      const marketplaceAgents = (searchData?.filter(
+        (item) => getBlockType(item) === "store_agent",
+      ) || []) as StoreAgent[];
+
+      const uniqueCreators = Array.from(
+        new Set(marketplaceAgents.map((agent) => agent.creator)),
+      );
+
+      setCreators(uniqueCreators);
     } else {
       const timer = setTimeout(() => {
         setIsSheetVisible(false);
       }, 300);
       return () => clearTimeout(timer);
     }
-  }, [isOpen, filters]);
+  }, [isOpen, filters, searchData]);
 
   const onCategoryChange = useCallback((category: CategoryKey) => {
     setLocalFilters((prev) => ({
@@ -173,7 +185,7 @@ export default function FilterSheet({
                       id={`creator-${creator}`}
                       checked={localFilters.createdBy.includes(creator)}
                       onCheckedChange={() => onCreatorChange(creator)}
-                      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={`creator-${creator}`}
@@ -184,12 +196,14 @@ export default function FilterSheet({
                   </div>
                 ))}
               </div>
-              <Button
-                variant={"link"}
-                className="m-0 p-0 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 underline hover:text-zinc-600"
-              >
-                More
-              </Button>
+              {creators.length > 5 && (
+                <Button
+                  variant={"link"}
+                  className="m-0 p-0 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 underline hover:text-zinc-600"
+                >
+                  More
+                </Button>
+              )}
             </div>
 
             {/* Footer buttons */}

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

@@ -7,7 +7,7 @@ import IntegrationBlock from "../IntegrationBlock";
 import { SearchItem, useBlockMenuContext } from "../block-menu-provider";
 import NoSearchResult from "./NoSearchResult";
 import { Button } from "@/components/ui/button";
-import { convertLibraryAgentIntoBlock } from "@/lib/utils";
+import { convertLibraryAgentIntoBlock, getBlockType } from "@/lib/utils";
 
 interface SearchListProps {
   isLoading: boolean;
@@ -27,23 +27,6 @@ const SearchList: React.FC<SearchListProps> = ({
   const { searchQuery, addNode, loadingSlug, searchData, handleAddStoreAgent } =
     useBlockMenuContext();
 
-  // Need to change it once, we got provider blocks
-  const getBlockType = (item: any) => {
-    if (item.id && item.name && item.inputSchema && item.outputSchema) {
-      return "block";
-    }
-    if (item.name && typeof item.integration_count === "number") {
-      return "provider";
-    }
-    if (item.id && item.graph_id && item.status) {
-      return "library_agent";
-    }
-    if (item.slug && item.agent_name && item.runs !== undefined) {
-      return "store_agent";
-    }
-    return null;
-  };
-
   if (isLoading) {
     return (
       <div className="space-y-2.5 px-4">

autogpt_platform/frontend/src/lib/utils.ts

@@ -428,3 +428,20 @@ export const convertLibraryAgentIntoBlock = (agent: LibraryAgent) => {
 
   return block;
 };
+
+// Need to change it once, we got provider blocks
+export const getBlockType = (item: any) => {
+  if (item.id && item.name && item.inputSchema && item.outputSchema) {
+    return "block";
+  }
+  if (item.name && typeof item.integration_count === "number") {
+    return "provider";
+  }
+  if (item.id && item.graph_id && item.status) {
+    return "library_agent";
+  }
+  if (item.slug && item.agent_name && item.runs !== undefined) {
+    return "store_agent";
+  }
+  return null;
+};