add context api for block menu

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

@@ -9,6 +9,7 @@ import {
 import ControlPanelButton from "@/components/builder/block-menu/ControlPanelButton";
 import { ToyBrick } from "lucide-react";
 import BlockMenuContent from "./BlockMenuContent";
+import { BlockMenuStateProvider } from "./block-menu-provider";
 
 interface BlockMenuProps {
   addBlock: (
@@ -61,7 +62,9 @@ export const BlockMenu: React.FC<BlockMenuProps> = ({
         className="absolute h-[75vh] w-[46.625rem] overflow-hidden rounded-[1rem] border-none p-0 shadow-[0_2px_6px_0_rgba(0,0,0,0.05)]"
         data-id="blocks-control-popover-content"
       >
-        <BlockMenuContent />
+        <BlockMenuStateProvider>
+          <BlockMenuContent />
+        </BlockMenuStateProvider>
       </PopoverContent>
     </Popover>
   );

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

@@ -4,25 +4,19 @@ import BlockMenuSearchBar from "./BlockMenuSearchBar";
 import BlockMenuSearch from "./search-and-filter//BlockMenuSearch";
 import BlockMenuDefault from "./default/BlockMenuDefault";
 import { Separator } from "@/components/ui/separator";
+import { useBlockMenuContext } from "./block-menu-provider";
 
 const BlockMenuContent: React.FC = () => {
-  const [searchQuery, setSearchQuery] = useState("");
+  const { searchQuery } = useBlockMenuContext();
   return (
     <div className="flex h-full w-full flex-col">
       {/* Search Bar */}
-      <BlockMenuSearchBar
-        searchQuery={searchQuery}
-        setSearchQuery={setSearchQuery}
-      />
+      <BlockMenuSearchBar />
 
       <Separator className="h-[1px] w-full text-zinc-300" />
 
       {/* Content */}
-      {searchQuery ? (
-        <BlockMenuSearch searchQuery={searchQuery} />
-      ) : (
-        <BlockMenuDefault setSearchQuery={setSearchQuery} />
-      )}
+      {searchQuery ? <BlockMenuSearch /> : <BlockMenuDefault />}
     </div>
   );
 };

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

@@ -2,19 +2,17 @@ import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 import { Search } from "lucide-react";
 import React, { useRef } from "react";
+import { useBlockMenuContext } from "./block-menu-provider";
 
 interface BlockMenuSearchBarProps {
-  setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
-  searchQuery: string;
   className?: string;
 }
 
 const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
-  searchQuery,
-  setSearchQuery,
   className = "",
 }) => {
   const inputRef = useRef(null);
+  const { searchQuery, setSearchQuery } = useBlockMenuContext();
   return (
     <div
       className={cn(

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

@@ -0,0 +1,94 @@
+"use client";
+
+import { createContext, ReactNode, useContext, useState } from "react";
+
+export type DefaultStateType =
+  | "suggestion"
+  | "all_blocks"
+  | "input_blocks"
+  | "action_blocks"
+  | "output_blocks"
+  | "integrations"
+  | "marketplace_agents"
+  | "my_agents";
+
+export type CategoryKey =
+  | "blocks"
+  | "integrations"
+  | "marketplace_agents"
+  | "my_agents"
+  | "templates";
+
+export interface Filters {
+  categories: {
+    blocks: boolean;
+    integrations: boolean;
+    marketplace_agents: boolean;
+    my_agents: boolean;
+    templates: boolean;
+  };
+  createdBy: string[];
+}
+
+interface BlockMenuContextType {
+  defaultState: DefaultStateType;
+  setDefaultState: React.Dispatch<React.SetStateAction<DefaultStateType>>;
+  integration: string;
+  setIntegration: React.Dispatch<React.SetStateAction<string>>;
+  searchQuery: string;
+  setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+  filters: Filters;
+  setFilters: React.Dispatch<React.SetStateAction<Filters>>;
+  creators: string[];
+  setCreators: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+export const BlockMenuContext = createContext<BlockMenuContextType>(
+  {} as BlockMenuContextType,
+);
+
+export function BlockMenuStateProvider({ children }: { children: ReactNode }) {
+  const [defaultState, setDefaultState] =
+    useState<DefaultStateType>("suggestion");
+  const [integration, setIntegration] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filters, setFilters] = useState<Filters>({
+    categories: {
+      blocks: false,
+      integrations: false,
+      marketplace_agents: false,
+      my_agents: false,
+      templates: false,
+    },
+    createdBy: [],
+  });
+
+  const [creators, setCreators] = useState<string[]>([]);
+
+  return (
+    <BlockMenuContext.Provider
+      value={{
+        defaultState,
+        setDefaultState,
+        integration,
+        setIntegration,
+        searchQuery,
+        setSearchQuery,
+        creators,
+        setCreators,
+        filters,
+        setFilters,
+      }}
+    >
+      {children}
+    </BlockMenuContext.Provider>
+  );
+}
+
+export function useBlockMenuContext(): BlockMenuContextType {
+  const context = useContext(BlockMenuContext);
+  if (!context) {
+    throw new Error("Error in context of Block");
+  }
+  return context;
+}

autogpt_platform/frontend/src/components/builder/block-menu/default/AllBlocksContent.tsx

@@ -51,7 +51,7 @@ const AllBlocksContent: React.FC = () => {
   }
 
   return (
-    <div className="scrollbar-thumb-rounded h-full overflow-y-scroll pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
+    <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
       <div className="w-full space-y-3 px-4 pb-4">
         {categories.map((category, index) => (
           <Fragment key={category.name}>

autogpt_platform/frontend/src/components/builder/block-menu/default/BlockMenuDefault.tsx

@@ -1,47 +1,16 @@
-import React, { useState } from "react";
+import React from "react";
 import BlockMenuSidebar from "./BlockMenuSidebar";
 import { Separator } from "@/components/ui/separator";
 import BlockMenuDefaultContent from "./BlockMenuDefaultContent";
 
-export type DefaultStateType =
-  | "suggestion"
-  | "all_blocks"
-  | "input_blocks"
-  | "action_blocks"
-  | "output_blocks"
-  | "integrations"
-  | "marketplace_agents"
-  | "my_agents";
-
-interface BlockMenuDefaultProps {
-  setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
-}
-
-const BlockMenuDefault: React.FC<BlockMenuDefaultProps> = ({
-  setSearchQuery,
-}) => {
-  const [defaultState, setDefaultState] =
-    useState<DefaultStateType>("suggestion");
-  const [integration, setIntegration] = useState("");
-
+const BlockMenuDefault: React.FC = () => {
   return (
     <div className="flex flex-1 overflow-y-auto">
-      {/* Left sidebar */}
-      <BlockMenuSidebar
-        defaultState={defaultState}
-        setDefaultState={setDefaultState}
-        setIntegration={setIntegration}
-      />
+      <BlockMenuSidebar />
 
       <Separator className="h-full w-[1px] text-zinc-300" />
 
-      <BlockMenuDefaultContent
-        defaultState={defaultState}
-        setSearchQuery={setSearchQuery}
-        setDefaultState={setDefaultState}
-        setIntegration={setIntegration}
-        integration={integration}
-      />
+      <BlockMenuDefaultContent />
     </div>
   );
 };

autogpt_platform/frontend/src/components/builder/block-menu/default/BlockMenuDefaultContent.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { DefaultStateType } from "./BlockMenuDefault";
 import SuggestionContent from "./SuggestionContent";
 import AllBlocksContent from "./AllBlocksContent";
 import IntegrationsContent from "./IntegrationsContent";
@@ -8,14 +7,7 @@ import MyAgentsContent from "./MyAgentsContent";
 import ActionBlocksContent from "./ActionBlocksContent";
 import InputBlocksContent from "./InputBlocksContent";
 import OutputBlocksContent from "./OutputBlocksContent";
-
-interface BlockMenuDefaultContentProps {
-  defaultState: DefaultStateType;
-  setDefaultState: React.Dispatch<React.SetStateAction<DefaultStateType>>;
-  integration: string;
-  setIntegration: React.Dispatch<React.SetStateAction<string>>;
-  setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
-}
+import { useBlockMenuContext } from "../block-menu-provider";
 
 export interface ActionBlock {
   id: number;
@@ -29,32 +21,17 @@ export interface BlockListType {
   description: string;
 }
 
-const BlockMenuDefaultContent: React.FC<BlockMenuDefaultContentProps> = ({
-  defaultState,
-  setDefaultState,
-  integration,
-  setSearchQuery,
-  setIntegration,
-}) => {
+const BlockMenuDefaultContent: React.FC = ({}) => {
+  const { defaultState } = useBlockMenuContext();
+
   return (
     <div className="h-full flex-1 overflow-hidden">
-      {defaultState == "suggestion" && (
-        <SuggestionContent
-          setIntegration={setIntegration}
-          setSearchQuery={setSearchQuery}
-          setDefaultState={setDefaultState}
-        />
-      )}
+      {defaultState == "suggestion" && <SuggestionContent />}
       {defaultState == "all_blocks" && <AllBlocksContent />}
       {defaultState == "input_blocks" && <InputBlocksContent />}
       {defaultState == "action_blocks" && <ActionBlocksContent />}
       {defaultState == "output_blocks" && <OutputBlocksContent />}
-      {defaultState == "integrations" && (
-        <IntegrationsContent
-          integration={integration}
-          setIntegration={setIntegration}
-        />
-      )}
+      {defaultState == "integrations" && <IntegrationsContent />}
       {defaultState == "marketplace_agents" && <MarketplaceAgentsContent />}
       {defaultState == "my_agents" && <MyAgentsContent />}
     </div>

autogpt_platform/frontend/src/components/builder/block-menu/default/BlockMenuSidebar.tsx

@@ -1,18 +1,11 @@
 import React from "react";
 import MenuItem from "../MenuItem";
-import { DefaultStateType } from "./BlockMenuDefault";
+import { DefaultStateType, useBlockMenuContext } from "../block-menu-provider";
 
-interface BlockMenuSidebarProps {
-  defaultState: DefaultStateType;
-  setDefaultState: React.Dispatch<React.SetStateAction<DefaultStateType>>;
-  setIntegration: React.Dispatch<React.SetStateAction<string>>;
-}
+const BlockMenuSidebar: React.FC = ({}) => {
+  const { defaultState, setDefaultState, setIntegration } =
+    useBlockMenuContext();
 
-const BlockMenuSidebar: React.FC<BlockMenuSidebarProps> = ({
-  defaultState,
-  setDefaultState,
-  setIntegration,
-}) => {
   // TEMPORARY FETCHING
   const topLevelMenuItems = [
     {

autogpt_platform/frontend/src/components/builder/block-menu/default/BlocksList.tsx

@@ -9,7 +9,7 @@ interface BlocksListProps {
 
 const BlocksList: React.FC<BlocksListProps> = ({ blocks, loading = false }) => {
   return (
-    <div className="scrollbar-thumb-rounded h-full overflow-y-scroll pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
+    <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
       <div className="w-full space-y-3 px-4 pb-4">
         {loading
           ? Array.from({ length: 7 }).map((_, index) => (

autogpt_platform/frontend/src/components/builder/block-menu/default/IntegrationBlocks.tsx

@@ -5,6 +5,7 @@ import {
   integrationBlocksData,
   integrationsListData,
 } from "../../testing_data";
+import { useBlockMenuContext } from "../block-menu-provider";
 
 export interface IntegrationBlockData {
   title: string;
@@ -12,15 +13,8 @@ export interface IntegrationBlockData {
   icon_url: string;
 }
 
-interface IntegrationBlocksProps {
-  integration: string;
-  setIntegration: React.Dispatch<React.SetStateAction<string>>;
-}
-
-const IntegrationBlocks: React.FC<IntegrationBlocksProps> = ({
-  integration,
-  setIntegration,
-}) => {
+const IntegrationBlocks: React.FC = ({}) => {
+  const { integration, setIntegration } = useBlockMenuContext();
   const [blocks, setBlocks] = useState<IntegrationBlockData[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 

autogpt_platform/frontend/src/components/builder/block-menu/default/IntegrationList.tsx

@@ -1,10 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Integration from "../Integration";
 import { integrationsListData } from "../../testing_data";
-
-interface IntegrationListProps {
-  setIntegration: React.Dispatch<React.SetStateAction<string>>;
-}
+import { useBlockMenuContext } from "../block-menu-provider";
 
 export interface IntegrationData {
   title: string;
@@ -13,9 +10,8 @@ export interface IntegrationData {
   number_of_blocks: number;
 }
 
-const IntegrationList: React.FC<IntegrationListProps> = ({
-  setIntegration,
-}) => {
+const IntegrationList: React.FC = ({}) => {
+  const { setIntegration } = useBlockMenuContext();
   const [integrations, setIntegrations] = useState<IntegrationData[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 

autogpt_platform/frontend/src/components/builder/block-menu/default/IntegrationsContent.tsx

@@ -1,27 +1,14 @@
 import React from "react";
 import IntegrationList from "./IntegrationList";
 import IntegrationBlocks from "./IntegrationBlocks";
+import { useBlockMenuContext } from "../block-menu-provider";
 
-interface IntegrationsContentProps {
-  integration: string;
-  setIntegration: React.Dispatch<React.SetStateAction<string>>;
-}
-
-const IntegrationsContent: React.FC<IntegrationsContentProps> = ({
-  integration,
-  setIntegration,
-}) => {
+const IntegrationsContent: React.FC = () => {
+  const { integration } = useBlockMenuContext();
   return (
-    <div className="scrollbar-thumb-rounded h-full overflow-y-scroll pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
+    <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
       <div className="w-full px-4 pb-4">
-        {integration == "" ? (
-          <IntegrationList setIntegration={setIntegration} />
-        ) : (
-          <IntegrationBlocks
-            integration={integration}
-            setIntegration={setIntegration}
-          />
-        )}
+        {integration == "" ? <IntegrationList /> : <IntegrationBlocks />}
       </div>
     </div>
   );

autogpt_platform/frontend/src/components/builder/block-menu/default/MarketplaceAgentsContent.tsx

@@ -42,7 +42,7 @@ const MarketplaceAgentsContent: React.FC = () => {
   }
 
   return (
-    <div className="scrollbar-thumb-rounded h-full overflow-y-scroll pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
+    <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
       <div className="w-full space-y-3 px-4 pb-4">
         {agents.map((agent) => (
           <MarketplaceAgentBlock

autogpt_platform/frontend/src/components/builder/block-menu/default/MyAgentsContent.tsx

@@ -42,7 +42,7 @@ const MyAgentsContent: React.FC = () => {
   }
 
   return (
-    <div className="scrollbar-thumb-rounded h-full overflow-y-scroll pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
+    <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
       <div className="w-full space-y-3 px-4 pb-4">
         {agents.map((agent) => (
           <UGCAgentBlock

autogpt_platform/frontend/src/components/builder/block-menu/default/SuggestionContent.tsx

@@ -2,24 +2,18 @@ import React, { useEffect, useState } from "react";
 import SearchHistoryChip from "../SearchHistoryChip";
 import IntegrationChip from "../IntegrationChip";
 import Block from "../Block";
-import { DefaultStateType } from "./BlockMenuDefault";
+
 import {
   integrationsData,
   topBlocksData,
   recentSearchesData,
 } from "../../testing_data";
+import { useBlockMenuContext } from "../block-menu-provider";
 
-interface SuggestionContentProps {
-  setIntegration: React.Dispatch<React.SetStateAction<string>>;
-  setDefaultState: React.Dispatch<React.SetStateAction<DefaultStateType>>;
-  setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
-}
+const SuggestionContent: React.FC = () => {
+  const { setIntegration, setDefaultState, setSearchQuery } =
+    useBlockMenuContext();
 
-const SuggestionContent: React.FC<SuggestionContentProps> = ({
-  setIntegration,
-  setDefaultState,
-  setSearchQuery,
-}) => {
   const [recentSearches, setRecentSearches] = useState<string[] | null>(null);
   const [integrations, setIntegrations] = useState<
     { icon_url: string; name: string }[] | null
@@ -73,7 +67,7 @@ const SuggestionContent: React.FC<SuggestionContentProps> = ({
   }, []);
 
   return (
-    <div className="scrollbar-thumb-rounded h-full overflow-y-scroll pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
+    <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
       <div className="w-full space-y-6 pb-4">
         {/* Recent Searches */}
         <div className="space-y-2.5">

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

@@ -2,13 +2,11 @@ import React from "react";
 import FiltersList from "./FiltersList";
 import SearchList from "./SearchList.";
 
-const BlockMenuSearch: React.FC<{ searchQuery: string }> = ({
-  searchQuery,
-}) => {
+const BlockMenuSearch: React.FC = ({}) => {
   return (
-    <div className="scrollbar-thumb-rounded h-full space-y-4 overflow-y-scroll p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
+    <div className="scrollbar-thumb-rounded h-full space-y-4 overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-200">
       <FiltersList />
-      <SearchList searchQuery={searchQuery} />
+      <SearchList />
     </div>
   );
 };

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

@@ -6,20 +6,19 @@ import { Button } from "@/components/ui/button";
 import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
-import { CategoryKey, Filters } from "./FiltersList";
 import { Checkbox } from "@/components/ui/checkbox";
+import {
+  CategoryKey,
+  Filters,
+  useBlockMenuContext,
+} from "../block-menu-provider";
 
 export default function FilterSheet({
-  filters,
-  creators,
-  setFilters,
   categories,
 }: {
-  filters: Filters;
-  creators: string[];
-  setFilters: Dispatch<SetStateAction<Filters>>;
   categories: Array<{ key: CategoryKey; name: string }>;
 }) {
+  const { filters, creators, setFilters } = useBlockMenuContext();
   const [isOpen, setIsOpen] = useState(false);
   const [isSheetVisible, setIsSheetVisible] = useState(false);
   const [localFilters, setLocalFilters] = useState<Filters>(filters);

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

@@ -1,39 +1,10 @@
 import { useState, useEffect } from "react";
 import FilterChip from "../FilterChip";
 import FilterSheet from "./FilterSheet";
-
-export type CategoryKey =
-  | "blocks"
-  | "integrations"
-  | "marketplace_agents"
-  | "my_agents"
-  | "templates";
-
-export interface Filters {
-  categories: {
-    blocks: boolean;
-    integrations: boolean;
-    marketplace_agents: boolean;
-    my_agents: boolean;
-    templates: boolean;
-  };
-  createdBy: string[];
-}
+import { CategoryKey, useBlockMenuContext } from "../block-menu-provider";
 
 const FiltersList = () => {
-  const [filters, setFilters] = useState<Filters>({
-    categories: {
-      blocks: false,
-      integrations: false,
-      marketplace_agents: false,
-      my_agents: false,
-      templates: false,
-    },
-    createdBy: [],
-  });
-
-  const [creators, setCreators] = useState<string[]>([]);
-
+  const { setCreators, filters, setFilters } = useBlockMenuContext();
   const categories: Array<{ key: CategoryKey; name: string }> = [
     { key: "blocks", name: "Blocks" },
     { key: "integrations", name: "Integrations" },
@@ -45,9 +16,8 @@ const FiltersList = () => {
   // TEMPORARY FETCHING
   useEffect(() => {
     const mockCreators = ["Abhi", "Abhi 1", "Abhi 2", "Abhi 3", "Abhi 4"];
-
     setCreators(mockCreators);
-  }, []);
+  }, [setCreators]);
 
   const handleCategoryFilter = (category: CategoryKey) => {
     setFilters({
@@ -72,12 +42,7 @@ const FiltersList = () => {
 
   return (
     <div className="flex flex-wrap gap-3">
-      <FilterSheet
-        filters={filters}
-        creators={creators}
-        categories={categories}
-        setFilters={setFilters}
-      />
+      <FilterSheet categories={categories} />
 
       {filters.createdBy.map((creator) => (
         <FilterChip

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

@@ -5,6 +5,7 @@ import Block from "../Block";
 import UGCAgentBlock from "../UGCAgentBlock";
 import AiBlock from "./AiBlock";
 import IntegrationBlock from "../IntegrationBlock";
+import { useBlockMenuContext } from "../block-menu-provider";
 
 interface BaseSearchItem {
   type: "marketing_agent" | "integration_block" | "block" | "my_agent" | "ai";
@@ -54,7 +55,8 @@ export type SearchItem =
   | IntegrationItem
   | MyAgentItem;
 
-const SearchList = ({ searchQuery }: { searchQuery: string }) => {
+const SearchList = () => {
+  const { searchQuery } = useBlockMenuContext();
   const [searchData, setSearchData] = useState<SearchItem[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);