Address comments

autogpt_platform/frontend/src/components/CustomNode.tsx

@@ -572,9 +572,13 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
       ),
     );
 
+  const LineSeparator = () => (
+    <Separator.Root className="h-[2px] w-full bg-gray-200"></Separator.Root>
+  );
+
   return (
     <div
-      className={`${data.uiType === BlockUIType.NOTE ? "w-[300px]" : "w-[500px]"} border-1 ${blockClasses} ${errorClass} ${statusClass} ${data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : "bg-white"}`}
+      className={`${data.uiType === BlockUIType.NOTE ? "w-[300px]" : "w-[500px]"} ${blockClasses} ${errorClass} ${statusClass} ${data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : "bg-white"}`}
       onMouseEnter={handleHovered}
       onMouseLeave={handleMouseLeave}
       data-id={`custom-node-${id}`}
@@ -662,7 +666,7 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
         {/* Advanced Settings */}
         {data.uiType !== BlockUIType.NOTE && hasAdvancedFields && (
           <>
-            <Separator.Root className="h-[2px] w-full bg-gray-200"></Separator.Root>
+            <LineSeparator />
             <div className="mt-2.5 flex items-center justify-between pb-4">
               <span className="">Advanced</span>
               <Switch
@@ -673,9 +677,9 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
           </>
         )}
         {/* Output Handles */}
-        {data.uiType !== BlockUIType.NOTE ? (
+        {data.uiType !== BlockUIType.NOTE && (
           <>
-            <Separator.Root className="h-[2px] w-full bg-gray-200"></Separator.Root>
+            <LineSeparator />
 
             <div className="mt-2 flex items-start justify-end rounded-b-xl pr-2">
               <div className="flex-none">
@@ -684,8 +688,6 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
               </div>
             </div>
           </>
-        ) : (
-          <></>
         )}
       </div>
       {/* End Body */}
@@ -702,7 +704,7 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
           >
             {(data.executionResults?.length ?? 0) > 0 ? (
               <div className="mt-0 rounded-b-xl bg-gray-100">
-                <Separator.Root className="h-[2px] w-full bg-gray-200"></Separator.Root>
+                <LineSeparator />
                 <NodeOutputs
                   title="Latest Output"
                   truncateLongData

autogpt_platform/frontend/src/components/Flow.tsx

@@ -432,7 +432,7 @@ const FlowEditor: React.FC<{
 
       history.push({
         type: "ADD_NODE",
-        payload: { node: newNode.data },
+        payload: { node: { ...newNode, ...newNode.data } },
         undo: () => deleteElements({ nodes: [{ id: newNode.id }] }),
         redo: () => addNodes(newNode),
       });

autogpt_platform/frontend/src/components/NodeHandle.tsx

@@ -42,17 +42,16 @@ const NodeHandle: FC<HandleProps> = ({
     </div>
   );
 
-  const left_dot = (
-    <div
-      className={`m-1 -ml-2 mr-2 h-4 w-4 border-2 bg-white ${isConnected ? getTypeBgColor(schema.type || "any") : "border-gray-300"} rounded-full transition-colors duration-100 group-hover:bg-gray-300`}
-    />
-  );
-
-  const right_dot = (
-    <div
-      className={`m-1 h-4 w-4 border-2 bg-white ${isConnected ? getTypeBgColor(schema.type || "any") : "border-gray-300"} rounded-full transition-colors duration-100 group-hover:bg-gray-300`}
-    />
-  );
+  const Dot = ({ className = "" }) => {
+    const color = isConnected
+      ? getTypeBgColor(schema.type || "any")
+      : "border-gray-300";
+    return (
+      <div
+        className={`${className} ${color} m-1 h-4 w-4 rounded-full border-2 bg-white transition-colors duration-100 group-hover:bg-gray-300`}
+      />
+    );
+  };
 
   if (side === "left") {
     return (
@@ -61,10 +60,10 @@ const NodeHandle: FC<HandleProps> = ({
           type="target"
           position={Position.Left}
           id={keyName}
-          className="background-color: white; border: 2px solid black; width: 15px; height: 15px; border-radius: 50%; bottom: 0px; left: 20%; group -ml-[26px]"
+          className="-ml-[26px]"
         >
           <div className="pointer-events-none flex items-center">
-            {left_dot}
+            <Dot className={`-ml-2 mr-2`} />
             {label}
           </div>
         </Handle>
@@ -82,7 +81,7 @@ const NodeHandle: FC<HandleProps> = ({
         >
           <div className="pointer-events-none flex items-center">
             {label}
-            {right_dot}
+            <Dot />
           </div>
         </Handle>
       </div>

autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
-import { ToyBrick } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { beautifyString } from "@/lib/utils";
@@ -12,9 +11,8 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Block } from "@/lib/autogpt-server-api";
-import { PlusIcon } from "@radix-ui/react-icons";
+import { MagnifyingGlassIcon, PlusIcon } from "@radix-ui/react-icons";
 import { IconToyBrick } from "@/components/ui/icons";
-import SchemaTooltip from "@/components/SchemaTooltip";
 import { getPrimaryCategoryColor } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -55,9 +53,10 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
 
   // Extract unique categories from blocks
   const categories = Array.from(
-    new Set(
-      blocks.flatMap((block) => block.categories.map((cat) => cat.category)),
-    ),
+    new Set([
+      "",
+      ...blocks.flatMap((block) => block.categories.map((cat) => cat.category)),
+    ]),
   );
 
   React.useEffect(() => {
@@ -100,45 +99,57 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
         className="w-[30rem] p-0"
         data-id="blocks-control-popover-content"
       >
-        <Card className="border-none shadow-md">
-          <CardHeader className="flex flex-col gap-x-8 gap-y-2 p-3 px-2">
+        <Card className="border-none p-3 pb-0 shadow-md">
+          <CardHeader className="flex flex-col gap-x-8 gap-y-1 p-3 px-2">
             <div className="items-center justify-between">
               <Label
                 htmlFor="search-blocks"
-                className="whitespace-nowrap border-b-2 border-violet-500 text-base font-semibold text-black 2xl:text-xl"
+                className="whitespace-nowrap text-base font-bold text-black 2xl:text-xl"
                 data-id="blocks-control-label"
               >
                 Blocks
               </Label>
             </div>
-            <Input
-              id="search-blocks"
-              type="text"
-              placeholder="Search blocks..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              data-id="blocks-control-search-input"
-            />
+            <div className="relative flex items-center">
+              <MagnifyingGlassIcon className="absolute m-2 h-5 w-5 text-gray-500" />
+              <Input
+                id="search-blocks"
+                type="text"
+                placeholder="Search blocks"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="rounded-lg px-8 py-5"
+                data-id="blocks-control-search-input"
+              />
+            </div>
             <div className="mt-2 flex flex-wrap gap-2">
-              {categories.map((category) => (
-                <Badge
-                  key={category}
-                  variant={
-                    selectedCategory === category ? "default" : "outline"
-                  }
-                  className={`cursor-pointer ${getPrimaryCategoryColor([{ category, description: "" }])}`}
-                  onClick={() =>
-                    setSelectedCategory(
-                      selectedCategory === category ? null : category,
-                    )
-                  }
-                >
-                  {beautifyString(category)}
-                </Badge>
-              ))}
+              {categories.map((category) => {
+                const color = getPrimaryCategoryColor([
+                  { category, description: "" },
+                ]);
+                const colorClass =
+                  selectedCategory === category ? `${color}` : "";
+                return (
+                  <div
+                    key={category}
+                    className={`cursor-pointer rounded-xl border px-2 py-2 text-xs font-medium ${colorClass}`}
+                    onClick={() =>
+                      setSelectedCategory(
+                        selectedCategory === category ? null : category,
+                      )
+                    }
+                  >
+                    {beautifyString(
+                      category.length > 3
+                        ? category.toLowerCase()
+                        : category || "All",
+                    )}
+                  </div>
+                );
+              })}
             </div>
           </CardHeader>
-          <CardContent className="border-t px-1 py-0">
+          <CardContent className="border-t p-0">
             <ScrollArea
               className="h-[60vh]"
               data-id="blocks-control-scroll-area"
@@ -146,7 +157,8 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
               {filteredBlocks.map((block) => (
                 <Card
                   key={block.id}
-                  className="m-2 my-4 flex h-20 border hover:cursor-pointer"
+                  // add hover effect to the card
+                  className="m-2 my-4 flex h-20 cursor-pointer border hover:shadow-lg"
                   data-id={`block-card-${block.id}`}
                   onClick={() => addBlock(block.id, block.name)}
                 >
@@ -156,14 +168,14 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                   ></div>
 
                   <div className="mx-3 flex flex-1 items-center justify-between">
-                    <div className="mr-2 min-w-0 flex-1">
+                    <div className="mr-2 min-w-0">
                       <span
-                        className="block truncate text-base font-semibold"
+                        className="block truncate pb-1 text-sm font-semibold"
                         data-id={`block-name-${block.id}`}
                       >
-                        {beautifyString(block.name)}
+                        {beautifyString(block.name).replace(/ Block$/, "")}
                       </span>
-                      <span className="block break-words text-sm font-normal text-gray-500">
+                      <span className="block break-words text-xs font-normal text-gray-500">
                         {block.description}
                       </span>
                     </div>
@@ -171,6 +183,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                       className="flex flex-shrink-0 items-center gap-1"
                       data-id={`block-tooltip-${block.id}`}
                     ></div>
+                    <PlusIcon className="h-6 w-6 rounded-lg bg-gray-200 stroke-black stroke-[0.5px] p-1" />
                   </div>
                 </Card>
               ))}

autogpt_platform/frontend/src/components/node-input-components.tsx

@@ -446,7 +446,7 @@ const NodeKeyValueInput: FC<{
           </div>
         ))}
         <Button
-          className="w-[183p] rounded-xl bg-gray-200 font-normal text-black hover:text-white"
+          className="rounded-xl bg-gray-200 font-normal text-black hover:text-white"
           onClick={() =>
             updateKeyValuePairs(keyValuePairs.concat({ key: "", value: "" }))
           }