fix small optimisation and DX issue

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

@@ -25,7 +25,8 @@ const Block: BlockComponent = ({
   return (
     <Button
       className={cn(
-        "group flex h-16 w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
+        "group flex h-16 w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none",
+        "hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
       )}
       {...rest}
     >

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

@@ -1,6 +1,6 @@
 // BLOCK MENU TODO: Currently when i click on the control panel button, if it is already open, then it needs to close, currently its not happening
 
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import {
   Popover,
   PopoverContent,
@@ -31,19 +31,18 @@ export const BlockMenu: React.FC<BlockMenuProps> = ({
   setBlockMenuSelected,
 }) => {
   const [open, setOpen] = useState(false);
-
-  const handlingOnOpen = (newOpen: boolean) => {
-    if (!pinBlocksPopover) {
-      setOpen(newOpen);
-      setBlockMenuSelected(newOpen ? "block" : "");
-    }
-  };
+  const onOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!pinBlocksPopover) {
+        setOpen(newOpen);
+        setBlockMenuSelected(newOpen ? "block" : "");
+      }
+    },
+    [pinBlocksPopover, setOpen, setBlockMenuSelected],
+  );
 
   return (
-    <Popover
-      open={pinBlocksPopover ? true : open}
-      onOpenChange={handlingOnOpen}
-    >
+    <Popover open={pinBlocksPopover ? true : open} onOpenChange={onOpen}>
       <PopoverTrigger className="hover:cursor-pointer">
         <ControlPanelButton
           data-id="blocks-control-popover-trigger"

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

@@ -30,7 +30,8 @@ const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
         }}
         placeholder={"Blocks, Agents, Integrations or Keywords..."}
         className={cn(
-          "m-0 border-none p-0 font-sans text-base font-normal text-zinc-800 shadow-none outline-none placeholder:text-zinc-400 focus:shadow-none focus:outline-none focus:ring-0",
+          "m-0 border-none p-0 font-sans text-base font-normal text-zinc-800 shadow-none outline-none",
+          "placeholder:text-zinc-400 focus:shadow-none focus:outline-none focus:ring-0",
         )}
       />
     </div>

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

@@ -1,6 +1,5 @@
 // BLOCK MENU TODO: We need a disable state in this, currently it's not in design.
 
-// Using div instead of button, because it's only for design purposes. We will use this to give design to PopoverTrigger.
 import { cn } from "@/lib/utils";
 import React from "react";
 
@@ -18,6 +17,7 @@ const ControlPanelButton: React.FC<Props> = ({
   ...rest
 }) => {
   return (
+    // Using div instead of button, because it's only for design purposes. We will use this to give design to PopoverTrigger.
     <div
       className={cn(
         "flex h-[4.25rem] w-[4.25rem] items-center justify-center whitespace-normal bg-white p-[1.38rem] text-zinc-800 shadow-none hover:cursor-pointer hover:bg-zinc-100 hover:text-zinc-950 focus:ring-0",

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

@@ -22,7 +22,8 @@ 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-all duration-300 ease-in-out",
+        "hover:bg-zinc-100 focus:ring-0 disabled:pointer-events-none",
       )}
       {...rest}
       onMouseEnter={() => setIsHovering(true)}

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

@@ -26,7 +26,8 @@ const Integration: IntegrationComponent = ({
   return (
     <Button
       className={cn(
-        "group flex h-16 w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none hover:bg-zinc-100 focus:ring-0 active:bg-zinc-50 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
+        "group flex h-16 w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none",
+        "hover:bg-zinc-100 focus:ring-0 active:bg-zinc-50 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
         className,
       )}
       {...rest}

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

@@ -44,7 +44,8 @@ const IntegrationBlock: IntegrationBlockComponent = ({
   return (
     <Button
       className={cn(
-        "group flex h-16 w-full min-w-[7.5rem] items-center justify-start gap-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
+        "group flex h-16 w-full min-w-[7.5rem] items-center justify-start gap-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none",
+        "hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
       )}
       {...rest}
     >

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

@@ -22,7 +22,8 @@ const IntegrationChip: IntegrationChipComponent = ({
   return (
     <Button
       className={cn(
-        "flex h-[3.25rem] w-full min-w-[7.5rem] justify-start gap-2 whitespace-normal rounded-[0.5rem] bg-zinc-50 p-2 pr-3 shadow-none hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300",
+        "flex h-[3.25rem] w-full min-w-[7.5rem] justify-start gap-2 whitespace-normal rounded-[0.5rem] bg-zinc-50 p-2 pr-3 shadow-none",
+        "hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300",
         className,
       )}
       {...rest}

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

@@ -30,7 +30,8 @@ const MarketplaceAgentBlock: MarketplaceAgentBlockComponent = ({
   return (
     <Button
       className={cn(
-        "group flex h-[4.375rem] w-full min-w-[7.5rem] items-center justify-start gap-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 p-[0.625rem] pr-[0.875rem] text-start shadow-none hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
+        "group flex h-[4.375rem] w-full min-w-[7.5rem] items-center justify-start gap-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 p-[0.625rem] pr-[0.875rem] text-start shadow-none",
+        "hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
         className,
       )}
       {...rest}

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

@@ -20,7 +20,8 @@ const MenuItem: React.FC<Props> = ({
   return (
     <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",
+        "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",
         className,
       )}

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

@@ -20,7 +20,8 @@ const SearchHistoryChip: SearchHistoryChipComponent = ({
   return (
     <Button
       className={cn(
-        "my-[1px] h-[2.25rem] space-x-1 rounded-[1.5rem] bg-zinc-50 p-[0.375rem] pr-[0.625rem] shadow-none hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300",
+        "my-[1px] h-[2.25rem] space-x-1 rounded-[1.5rem] bg-zinc-50 p-[0.375rem] pr-[0.625rem] shadow-none",
+        "hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300",
         className,
       )}
       {...rest}

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

@@ -30,7 +30,8 @@ const UGCAgentBlock: UGCAgentBlockComponent = ({
   return (
     <Button
       className={cn(
-        "group flex h-[4.375rem] w-full min-w-[7.5rem] items-center justify-start gap-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 p-[0.625rem] pr-[0.875rem] text-start shadow-none hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
+        "group flex h-[4.375rem] w-full min-w-[7.5rem] items-center justify-start gap-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 p-[0.625rem] pr-[0.875rem] text-start shadow-none",
+        "hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
         className,
       )}
       {...rest}

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

@@ -19,7 +19,8 @@ const AiBlock: React.FC<Props> = ({
   return (
     <Button
       className={cn(
-        "group flex h-[5.625rem] w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
+        "group flex h-[5.625rem] w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none",
+        "hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
       )}
       {...rest}
     >

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

@@ -1,6 +1,6 @@
 import React from "react";
 import FiltersList from "./FiltersList";
-import SearchList from "./SearchList.";
+import SearchList from "./SearchList";
 import { useBlockMenuContext } from "../block-menu-provider";
 
 const BlockMenuSearch: React.FC = ({}) => {

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

@@ -1,7 +1,5 @@
-// Used v0 for this component, so review it very carefully
-
 import FilterChip from "../FilterChip";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -27,7 +25,6 @@ export default function FilterSheet({
   useEffect(() => {
     if (isOpen) {
       setIsSheetVisible(true);
-      // Reset local filters to current filters when opening
       setLocalFilters(filters);
     } else {
       const timer = setTimeout(() => {
@@ -37,33 +34,35 @@ export default function FilterSheet({
     }
   }, [isOpen, filters]);
 
-  const onCategoryChange = (category: CategoryKey) => {
-    setLocalFilters({
-      ...localFilters,
+  const onCategoryChange = useCallback((category: CategoryKey) => {
+    setLocalFilters((prev) => ({
+      ...prev,
       categories: {
-        ...localFilters.categories,
-        [category]: !localFilters.categories[category],
+        ...prev.categories,
+        [category]: !prev.categories[category],
       },
+    }));
+  }, []);
+
+  const onCreatorChange = useCallback((creator: string) => {
+    setLocalFilters((prev) => {
+      const updatedCreators = prev.createdBy.includes(creator)
+        ? prev.createdBy.filter((c) => c !== creator)
+        : [...prev.createdBy, creator];
+
+      return {
+        ...prev,
+        createdBy: updatedCreators,
+      };
     });
-  };
+  }, []);
 
-  const onCreatorChange = (creator: string) => {
-    const updatedCreators = localFilters.createdBy.includes(creator)
-      ? localFilters.createdBy.filter((c) => c !== creator)
-      : [...localFilters.createdBy, creator];
-
-    setLocalFilters({
-      ...localFilters,
-      createdBy: updatedCreators,
-    });
-  };
-
-  const handleApplyFilters = () => {
+  const handleApplyFilters = useCallback(() => {
     setFilters(localFilters);
     setIsOpen(false);
-  };
+  }, [localFilters, setFilters]);
 
-  const handleClearFilters = () => {
+  const handleClearFilters = useCallback(() => {
     const clearedFilters: Filters = {
       categories: {
         blocks: false,
@@ -76,19 +75,16 @@ export default function FilterSheet({
     };
     setFilters(clearedFilters);
     setIsOpen(false);
-  };
+  }, [setFilters]);
 
-  // Check if any filters are active
-  const hasActiveFilters = () => {
-    // Check if any category is selected
+  const hasActiveFilters = useCallback(() => {
     const hasCategoryFilter = Object.values(localFilters.categories).some(
       (value) => value,
     );
-    // Check if any creator is selected
     const hasCreatorFilter = localFilters.createdBy.length > 0;
 
     return hasCategoryFilter || hasCreatorFilter;
-  };
+  }, [localFilters]);
 
   return (
     <div className="m-0 ml-4 inline w-fit p-0">

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import FilterChip from "../FilterChip";
 import FilterSheet from "./FilterSheet";
 import { CategoryKey, useBlockMenuContext } from "../block-menu-provider";
@@ -29,16 +29,19 @@ const FiltersList = () => {
     });
   };
 
-  const handleCreatorFilter = (creator: string) => {
-    const updatedCreators = filters.createdBy.includes(creator)
-      ? filters.createdBy.filter((c) => c !== creator)
-      : [...filters.createdBy, creator];
+  const handleCreatorFilter = useCallback(
+    (creator: string) => {
+      const updatedCreators = filters.createdBy.includes(creator)
+        ? filters.createdBy.filter((c) => c !== creator)
+        : [...filters.createdBy, creator];
 
-    setFilters({
-      ...filters,
-      createdBy: updatedCreators,
-    });
-  };
+      setFilters({
+        ...filters,
+        createdBy: updatedCreators,
+      });
+    },
+    [filters, setFilters],
+  );
 
   return (
     <div className="flex flex-nowrap gap-3 overflow-x-auto scrollbar-hide">