feat(frontend): add reusable component for new block menu (#10687)

In this project, I’ve added all the reusable, non-reactive components
that will be used in the new block menu. I’ve also included a new
library called `react-timeago` that helps us find related times.

### Checklist 📋

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Everything works perfectly locally

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/AiBlock.tsx

@@ -0,0 +1,63 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Plus } from "lucide-react";
+import { ButtonHTMLAttributes } from "react";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  title?: string;
+  description?: string;
+  ai_name?: string;
+}
+
+export const AiBlock: React.FC<Props> = ({
+  title,
+  description,
+  className,
+  ai_name,
+  ...rest
+}) => {
+  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",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="flex flex-1 flex-col items-start gap-1.5">
+        <div className="space-y-0.5">
+          <span
+            className={cn(
+              "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-700 group-disabled:text-zinc-400",
+            )}
+          >
+            {title}
+          </span>
+          <span
+            className={cn(
+              "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+            )}
+          >
+            {description}
+          </span>
+        </div>
+
+        <span
+          className={cn(
+            "rounded-[0.75rem] bg-zinc-200 px-[0.5rem] font-sans text-xs leading-[1.25rem] text-zinc-500",
+          )}
+        >
+          Supports {ai_name}
+        </span>
+      </div>
+      <div
+        className={cn(
+          "flex h-7 w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+        )}
+      >
+        <Plus className="h-5 w-5 text-zinc-50" strokeWidth={2} />
+      </div>
+    </Button>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/Block.tsx

@@ -0,0 +1,77 @@
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { beautifyString, cn } from "@/lib/utils";
+import { Plus } from "lucide-react";
+import React, { ButtonHTMLAttributes } from "react";import { highlightText } from "./helpers";
+;
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  title?: string;
+  description?: string;
+  highlightedText?: string;
+}
+
+interface BlockComponent extends React.FC<Props> {
+  Skeleton: React.FC<{ className?: string }>;
+}
+
+export const Block: BlockComponent = ({
+  title,
+  description,
+  highlightedText,
+  className,
+  ...rest
+}) => {
+  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:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:cursor-not-allowed",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="flex flex-1 flex-col items-start gap-0.5">
+        {title && (
+          <span
+            className={cn(
+              "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
+            )}
+          >
+            {highlightText(beautifyString(title), highlightedText)}
+          </span>
+        )}
+        {description && (
+          <span
+            className={cn(
+              "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+            )}
+          >
+            {highlightText(description, highlightedText)}
+          </span>
+        )}
+      </div>
+      <div
+        className={cn(
+          "flex h-7 w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+        )}
+      >
+        <Plus className="h-5 w-5 text-zinc-50" strokeWidth={2} />
+      </div>
+    </Button>
+  );
+};
+
+const BlockSkeleton = () => {
+  return (
+    <Skeleton className="flex h-16 w-full min-w-[7.5rem] animate-pulse items-center justify-start space-x-3 rounded-[0.75rem] bg-zinc-100 px-[0.875rem] py-[0.625rem]">
+      <div className="flex flex-1 flex-col items-start gap-0.5">
+        <Skeleton className="h-[1.375rem] w-24 rounded bg-zinc-200" />
+        <Skeleton className="h-5 w-32 rounded bg-zinc-200" />
+      </div>
+      <Skeleton className="h-7 w-7 rounded-[0.5rem] bg-zinc-200" />
+    </Skeleton>
+  );
+};
+
+Block.Skeleton = BlockSkeleton;

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/BlockMenu/BlockMenu.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/components/ui/popover";
 import { ToyBrick } from "lucide-react";
 import { BlockMenuContent } from "../BlockMenuContent/BlockMenuContent";
-import { ControlPanelButton } from "../ControlButton/ControlPanelButton";
+import { ControlPanelButton } from "../ControlPanelButton";
 import { useBlockMenu } from "./useBlockMenu";
 
 interface BlockMenuProps {

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/FilterChip.tsx

@@ -0,0 +1,54 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { X } from "lucide-react";
+import React, { ButtonHTMLAttributes } from "react";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean;
+  number?: number;
+  name?: string;
+}
+
+export const FilterChip: React.FC<Props> = ({
+  selected = false,
+  number,
+  name,
+  className,
+  ...rest
+}) => {
+  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-transform duration-300 ease-in-out",
+        "hover:border-violet-500 hover:bg-transparent focus:ring-0 disabled:cursor-not-allowed",
+        selected && "border-0 bg-violet-700 hover:border",
+        className,
+      )}
+      {...rest}
+    >
+      <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 && (
+        <>
+          <span className="flex h-4 w-4 items-center justify-center rounded-full bg-zinc-50 transition-all duration-300 ease-in-out group-hover:hidden">
+            <X
+              className="h-3 w-3 rounded-full text-violet-700"
+              strokeWidth={2}
+            />
+          </span>
+          {number !== undefined && (
+            <span className="hidden 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 group-hover:flex">
+              {number > 100 ? "100+" : number}
+            </span>
+          )}
+        </>
+      )}
+    </Button>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/Integration.tsx

@@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { beautifyString, cn } from "@/lib/utils";
+import Image from "next/image";
+import React, { ButtonHTMLAttributes } from "react";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  title?: string;
+  description?: string;
+  icon_url?: string;
+  number_of_blocks?: number;
+}
+
+interface IntegrationComponent extends React.FC<Props> {
+  Skeleton: React.FC<{ className?: string }>;
+}
+
+export const Integration: IntegrationComponent = ({
+  title,
+  icon_url,
+  description,
+  className,
+  number_of_blocks,
+  ...rest
+}) => {
+  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:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-50 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="relative h-[2.625rem] w-[2.625rem] overflow-hidden rounded-[0.5rem] bg-white">
+        {icon_url && (
+          <Image
+            src={icon_url}
+            alt="integration-icon"
+            fill
+            sizes="2.25rem"
+            className="w-full rounded-[0.5rem] object-contain group-disabled:opacity-50"
+          />
+        )}
+      </div>
+
+      <div className="w-full">
+        <div className="flex items-center justify-between gap-2">
+          {title && (
+            <p className="line-clamp-1 flex-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-700 group-disabled:text-zinc-400">
+              {beautifyString(title)}
+            </p>
+          )}
+          <span className="flex h-[1.375rem] w-[1.6875rem] items-center justify-center rounded-[1.25rem] bg-[#f0f0f0] p-1.5 font-sans text-sm leading-[1.375rem] text-zinc-500 group-disabled:text-zinc-400">
+            {number_of_blocks}
+          </span>
+        </div>
+        <span className="line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400">
+          {description}
+        </span>
+      </div>
+    </Button>
+  );
+};
+
+const IntegrationSkeleton: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  return (
+    <Skeleton
+      className={cn(
+        "flex h-16 w-full min-w-[7.5rem] animate-pulse items-center justify-start space-x-3 rounded-[0.75rem] bg-zinc-100 px-[0.875rem] py-[0.625rem]",
+        className,
+      )}
+    >
+      <Skeleton className="h-[2.625rem] w-[2.625rem] rounded-[0.5rem] bg-zinc-200" />
+      <div className="flex flex-1 flex-col items-start gap-0.5">
+        <div className="flex w-full items-center justify-between">
+          <Skeleton className="h-[1.375rem] w-24 rounded bg-zinc-200" />
+          <Skeleton className="h-[1.375rem] w-[1.6875rem] rounded-[1.25rem] bg-zinc-200" />
+        </div>
+        <Skeleton className="h-5 w-[80%] rounded bg-zinc-200" />
+      </div>
+    </Skeleton>
+  );
+};
+
+Integration.Skeleton = IntegrationSkeleton;

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/IntegrationChip.tsx

@@ -0,0 +1,60 @@
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { beautifyString, cn } from "@/lib/utils";
+import Image from "next/image";
+import React, { ButtonHTMLAttributes } from "react";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  name?: string;
+  icon_url?: string;
+}
+
+interface IntegrationChipComponent extends React.FC<Props> {
+  Skeleton: React.FC;
+}
+
+export const IntegrationChip: IntegrationChipComponent = ({
+  icon_url,
+  name,
+  className,
+  ...rest
+}) => {
+  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:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="relative h-9 w-9 rounded-[0.5rem] bg-transparent">
+        {icon_url && (
+          <Image
+            src={icon_url}
+            alt="integration-icon"
+            fill
+            sizes="2.25rem"
+            className="w-full object-contain"
+          />
+        )}
+      </div>
+      {name && (
+        <span className="truncate font-sans text-sm font-normal leading-[1.375rem] text-zinc-800">
+          {beautifyString(name)}
+        </span>
+      )}
+    </Button>
+  );
+};
+
+const IntegrationChipSkeleton: React.FC = () => {
+  return (
+    <Skeleton className="flex h-[3.25rem] w-full min-w-[7.5rem] gap-2 rounded-[0.5rem] bg-zinc-100 p-2 pr-3">
+      <Skeleton className="h-9 w-12 rounded-[0.5rem] bg-zinc-200" />
+      <Skeleton className="h-5 w-24 self-center rounded-sm bg-zinc-200" />
+    </Skeleton>
+  );
+};
+
+IntegrationChip.Skeleton = IntegrationChipSkeleton;

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/IntergrationBlock.tsx

@@ -0,0 +1,99 @@
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { beautifyString, cn } from "@/lib/utils";
+import { Plus } from "lucide-react";
+import Image from "next/image";
+import React, { ButtonHTMLAttributes } from "react";
+import { highlightText } from "./helpers";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  title?: string;
+  description?: string;
+  icon_url?: string;
+  highlightedText?: string;
+}
+
+interface IntegrationBlockComponent extends React.FC<Props> {
+  Skeleton: React.FC<{ className?: string }>;
+}
+
+
+
+export const IntegrationBlock: IntegrationBlockComponent = ({
+  title,
+  icon_url,
+  description,
+  className,
+  highlightedText,
+  ...rest
+}) => {
+  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:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:cursor-not-allowed",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="relative h-[2.625rem] w-[2.625rem] rounded-[0.5rem] bg-white">
+        {icon_url && (
+          <Image
+            src={icon_url}
+            alt="integration-icon"
+            fill
+            sizes="2.25rem"
+            className="w-full object-contain group-disabled:opacity-50"
+          />
+        )}
+      </div>
+      <div className="flex flex-1 flex-col items-start gap-0.5">
+        {title && (
+          <span
+            className={cn(
+              "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
+            )}
+          >
+            {highlightText(beautifyString(title), highlightedText)}
+          </span>
+        )}
+        {description && (
+          <span
+            className={cn(
+              "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+            )}
+          >
+            {highlightText(description, highlightedText)}
+          </span>
+        )}
+      </div>
+      <div
+        className={cn(
+          "flex h-7 w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+        )}
+      >
+        <Plus className="h-5 w-5 text-zinc-50" strokeWidth={2} />
+      </div>
+    </Button>
+  );
+};
+
+const IntegrationBlockSkeleton = ({ className }: { className?: string }) => {
+  return (
+    <Skeleton
+      className={cn(
+        "flex h-16 w-full min-w-[7.5rem] animate-pulse items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-100 px-[0.875rem] py-[0.625rem]",
+        className,
+      )}
+    >
+      <Skeleton className="h-[2.625rem] w-[2.625rem] rounded-[0.5rem] bg-zinc-200" />
+      <div className="flex flex-1 flex-col items-start gap-0.5">
+        <Skeleton className="h-[1.375rem] w-24 rounded bg-zinc-200" />
+        <Skeleton className="h-5 w-32 rounded bg-zinc-200" />
+      </div>
+      <Skeleton className="h-7 w-7 rounded-[0.5rem] bg-zinc-200" />
+    </Skeleton>
+  );
+};
+
+IntegrationBlock.Skeleton = IntegrationBlockSkeleton;

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/MarketplaceAgentBlock.tsx

@@ -0,0 +1,135 @@
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { ExternalLink, Loader2, Plus } from "lucide-react";
+import Image from "next/image";
+import React, { ButtonHTMLAttributes } from "react";
+import Link from "next/link";
+import { highlightText } from "./helpers";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  title?: string;
+  creator_name?: string;
+  number_of_runs?: number;
+  image_url?: string;
+  highlightedText?: string;
+  slug: string;
+  loading: boolean;
+}
+
+interface MarketplaceAgentBlockComponent extends React.FC<Props> {
+  Skeleton: React.FC<{ className?: string }>;
+}
+
+export const MarketplaceAgentBlock: MarketplaceAgentBlockComponent = ({
+  title,
+  image_url,
+  creator_name,
+  number_of_runs,
+  className,
+  loading,
+  highlightedText,
+  slug,
+  ...rest
+}) => {
+  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:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:pointer-events-none",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="relative h-[3.125rem] w-[5.625rem] overflow-hidden rounded-[0.375rem] bg-white">
+        {image_url && (
+          <Image
+            src={image_url}
+            alt="integration-icon"
+            fill
+            sizes="5.625rem"
+            className="w-full object-contain group-disabled:opacity-50"
+          />
+        )}
+      </div>
+      <div className="flex flex-1 flex-col items-start gap-0.5">
+        {title && (
+          <span
+            className={cn(
+              "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
+            )}
+          >
+            {highlightText(title, highlightedText)}
+          </span>
+        )}
+        <div className="flex items-center space-x-2.5">
+          <span
+            className={cn(
+              "truncate font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+            )}
+          >
+            By {creator_name}
+          </span>
+
+          <span className="font-sans text-zinc-400">•</span>
+
+          <span
+            className={cn(
+              "truncate font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+            )}
+          >
+            {number_of_runs} runs
+          </span>
+          <span className="font-sans text-zinc-400">•</span>
+          <Link
+            href={`/marketplace/agent/${creator_name}/${slug}`}
+            className="flex gap-0.5 truncate"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span className="font-sans text-xs leading-5 text-blue-700 underline">
+              Agent page
+            </span>
+            <ExternalLink className="h-4 w-4 text-blue-700" strokeWidth={1} />
+          </Link>
+        </div>
+      </div>
+      <div
+        className={cn(
+          "flex h-7 min-w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+        )}
+      >
+        {!loading ? (
+          <Plus className="h-5 w-5 text-zinc-50" strokeWidth={2} />
+        ) : (
+          <Loader2 className="h-5 w-5 animate-spin" />
+        )}
+      </div>
+    </Button>
+  );
+};
+
+const MarketplaceAgentBlockSkeleton: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  return (
+    <Skeleton
+      className={cn(
+        "flex h-[4.375rem] w-full min-w-[7.5rem] animate-pulse items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-100 p-[0.625rem] pr-[0.875rem]",
+        className,
+      )}
+    >
+      <Skeleton className="h-[3.125rem] w-[5.625rem] rounded-[0.375rem] bg-zinc-200" />
+      <div className="flex flex-1 flex-col items-start gap-0.5">
+        <Skeleton className="h-[1.375rem] w-24 rounded bg-zinc-200" />
+        <div className="flex items-center gap-1">
+          <Skeleton className="h-5 w-16 rounded bg-zinc-200" />
+
+          <Skeleton className="h-5 w-16 rounded bg-zinc-200" />
+        </div>
+      </div>
+      <Skeleton className="h-7 w-7 rounded-[0.5rem] bg-zinc-200" />
+    </Skeleton>
+  );
+};
+
+MarketplaceAgentBlock.Skeleton = MarketplaceAgentBlockSkeleton;

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/MenuItem.tsx

@@ -0,0 +1,40 @@
+// BLOCK MENU TODO: We need to add a better hover state to it; currently it's not in the design either.
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import React, { ButtonHTMLAttributes } from "react";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean;
+  number?: number;
+  name?: string;
+}
+
+export const MenuItem: React.FC<Props> = ({
+  selected = false,
+  number,
+  name,
+  className,
+  ...rest
+}) => {
+  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-default hover:bg-zinc-100 focus:ring-0",
+        selected && "bg-zinc-100",
+        className,
+      )}
+      {...rest}
+    >
+      <span className="truncate font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+        {name}
+      </span>
+      {number && (
+        <span className="font-sans text-sm font-normal leading-[1.375rem] text-zinc-600">
+          {number > 100 ? "100+" : number}
+        </span>
+      )}
+    </Button>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/NewControlPanel/NewControlPanel.tsx

@@ -6,7 +6,7 @@ import { useNewControlPanel } from "./useNewControlPanel";
 import { NewSaveControl } from "../SaveControl/NewSaveControl";
 import { GraphExecutionID } from "@/lib/autogpt-server-api";
 import { history } from "@/components/history";
-import { ControlPanelButton } from "../ControlButton/ControlPanelButton";
+import { ControlPanelButton } from "../ControlPanelButton";
 import { ArrowUUpLeftIcon, ArrowUUpRightIcon } from "@phosphor-icons/react";
 
 export type Control = {

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/NoSearchResult.tsx

@@ -0,0 +1,17 @@
+import { SmileySadIcon } from "@phosphor-icons/react";
+
+export const NoSearchResult = () => {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center text-center">
+      <SmileySadIcon size={64} className="mb-10 text-zinc-400" />
+      <div className="space-y-1">
+        <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+          No match found
+        </p>
+        <p className="font-sans text-sm font-normal leading-[1.375rem] text-zinc-600">
+          Try adjusting your search terms
+        </p>
+      </div>
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/SaveControl/NewSaveControl.tsx

@@ -11,7 +11,7 @@ import { GraphMeta } from "@/lib/autogpt-server-api";
 import { Label } from "@/components/ui/label";
 import { IconSave } from "@/components/ui/icons";
 import { useToast } from "@/components/molecules/Toast/use-toast";
-import { ControlPanelButton } from "../ControlButton/ControlPanelButton";
+import { ControlPanelButton } from "../ControlPanelButton";
 
 interface SaveControlProps {
   agentMeta: GraphMeta | null;

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/SearchHistoryChip.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { ArrowUpRight } from "lucide-react";
+import React, { ButtonHTMLAttributes } from "react";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  content?: string;
+}
+
+interface SearchHistoryChipComponent extends React.FC<Props> {
+  Skeleton: React.FC<{ className?: string }>;
+}
+
+export const SearchHistoryChip: SearchHistoryChipComponent = ({
+  content,
+  className,
+  ...rest
+}) => {
+  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:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300",
+        className,
+      )}
+      {...rest}
+    >
+      <ArrowUpRight className="h-6 w-6 text-zinc-500" strokeWidth={1.25} />
+      <span className="font-sans text-sm font-normal leading-[1.375rem] text-zinc-800">
+        {content}
+      </span>
+    </Button>
+  );
+};
+
+const SearchHistoryChipSkeleton: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  return (
+    <Skeleton
+      className={cn("h-[2.25rem] w-32 rounded-[1.5rem] bg-zinc-100", className)}
+    />
+  );
+};
+
+SearchHistoryChip.Skeleton = SearchHistoryChipSkeleton;

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/UGCAgentBlock.tsx

@@ -0,0 +1,117 @@
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { Plus } from "lucide-react";
+import Image from "next/image";
+import React, { ButtonHTMLAttributes } from "react";
+import { highlightText } from "./helpers";
+import { formatTimeAgo } from "@/lib/utils/time";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  title?: string;
+  edited_time?: Date;
+  version?: number;
+  image_url?: string;
+  highlightedText?: string;
+}
+
+interface UGCAgentBlockComponent extends React.FC<Props> {
+  Skeleton: React.FC<{ className?: string }>;
+}
+
+export const UGCAgentBlock: UGCAgentBlockComponent = ({
+  title,
+  image_url,
+  edited_time = new Date(),
+  version,
+  className,
+  highlightedText,
+  ...rest
+}) => {
+  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:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:cursor-not-allowed",
+        className,
+      )}
+      {...rest}
+    >
+      {image_url && (
+        <div className="relative h-[3.125rem] w-[5.625rem] overflow-hidden rounded-[0.375rem] bg-white">
+          <Image
+            src={image_url}
+            alt="integration-icon"
+            fill
+            sizes="5.625rem"
+            className="w-full object-contain group-disabled:opacity-50"
+          />
+        </div>
+      )}
+      <div className="flex flex-1 flex-col items-start gap-0.5">
+        {title && (
+          <span
+            className={cn(
+              "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
+            )}
+          >
+            {highlightText(title, highlightedText)}
+          </span>
+        )}
+        <div className="flex items-center space-x-1.5">
+          {edited_time && (
+            <span
+              className={cn(
+                "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+              )}
+            >
+              Edited {formatTimeAgo(edited_time.toISOString())}
+            </span>
+          )}
+
+          <span className="font-sans text-zinc-400">•</span>
+
+          <span
+            className={cn(
+              "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+            )}
+          >
+            Version {version}
+          </span>
+        </div>
+      </div>
+      <div
+        className={cn(
+          "flex h-7 w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+        )}
+      >
+        <Plus className="h-5 w-5 text-zinc-50" strokeWidth={2} />
+      </div>
+    </Button>
+  );
+};
+
+const UGCAgentBlockSkeleton: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  return (
+    <Skeleton
+      className={cn(
+        "flex h-[4.375rem] w-full min-w-[7.5rem] animate-pulse items-center justify-start gap-3 rounded-[0.75rem] bg-zinc-100 p-[0.625rem] pr-[0.875rem]",
+        className,
+      )}
+    >
+      <Skeleton className="h-[3.125rem] w-[5.625rem] rounded-[0.375rem] bg-zinc-200" />
+      <div className="flex flex-1 flex-col items-start gap-0.5">
+        <Skeleton className="h-[1.375rem] w-24 rounded bg-zinc-200" />
+        <div className="flex items-center gap-1">
+          <Skeleton className="h-5 w-16 rounded bg-zinc-200" />
+          <Skeleton className="h-5 w-16 rounded bg-zinc-200" />
+        </div>
+      </div>
+      <Skeleton className="h-7 w-7 rounded-[0.5rem] bg-zinc-200" />
+    </Skeleton>
+  );
+};
+
+UGCAgentBlock.Skeleton = UGCAgentBlockSkeleton;

autogpt_platform/frontend/src/app/(platform)/build/components/NewBlockMenu/helpers.tsx

@@ -0,0 +1,22 @@
+export const highlightText = (
+    text: string | undefined,
+    highlight: string | undefined,
+  ) => {
+    if (!text || !highlight) return text;
+  
+    function escapeRegExp(s: string) {
+      return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    }
+  
+    const escaped = escapeRegExp(highlight);
+    const parts = text.split(new RegExp(`(${escaped})`, "gi"));
+    return parts.map((part, i) =>
+      part.toLowerCase() === highlight?.toLowerCase() ? (
+        <mark key={i} className="bg-transparent font-bold">
+          {part}
+        </mark>
+      ) : (
+        part
+      ),
+    );
+  };

autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityItem.tsx

@@ -11,8 +11,9 @@ import {
   CircleDashed,
 } from "@phosphor-icons/react";
 import type { AgentExecutionWithInfo } from "../helpers";
-import { formatTimeAgo, getExecutionDuration } from "../helpers";
+import { getExecutionDuration } from "../helpers";
 import Link from "next/link";
+import { formatTimeAgo } from "@/lib/utils/time";
 
 interface Props {
   execution: AgentExecutionWithInfo;

autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/helpers.tsx

@@ -13,20 +13,6 @@ const MILLISECONDS_PER_72_HOURS = 72 * MILLISECONDS_PER_HOUR;
 const SHORT_DURATION_THRESHOLD_SECONDS = 5;
 const MAX_EXECUTIONS_CAP = 1000;
 
-export function formatTimeAgo(dateStr: string): string {
-  const date = new Date(dateStr);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / MILLISECONDS_PER_MINUTE);
-
-  if (diffMins < 1) return "just now";
-  if (diffMins < SECONDS_PER_MINUTE) return `${diffMins}m ago`;
-  const diffHours = Math.floor(diffMins / MINUTES_PER_HOUR);
-  if (diffHours < 24) return `${diffHours}h ago`;
-  const diffDays = Math.floor(diffHours / 24);
-  return `${diffDays}d ago`;
-}
-
 export function getExecutionDuration(
   execution: GeneratedGraphExecutionMeta,
 ): string {

autogpt_platform/frontend/src/lib/utils/time.ts

@@ -0,0 +1,19 @@
+const MILLISECONDS_PER_SECOND = 1000;
+const SECONDS_PER_MINUTE = 60;
+const MINUTES_PER_HOUR = 60;
+const HOURS_PER_DAY = 24;
+const MILLISECONDS_PER_MINUTE = SECONDS_PER_MINUTE * MILLISECONDS_PER_SECOND;
+
+export function formatTimeAgo(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / MILLISECONDS_PER_MINUTE);
+
+  if (diffMins < 1) return "just now";
+  if (diffMins < SECONDS_PER_MINUTE) return `${diffMins}m ago`;
+  const diffHours = Math.floor(diffMins / MINUTES_PER_HOUR);
+  if (diffHours < HOURS_PER_DAY) return `${diffHours}h ago`;
+  const diffDays = Math.floor(diffHours / HOURS_PER_DAY);
+  return `${diffDays}d ago`;
+}