github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor(block-menu): export components in Block, BlockMenu, BlockMenuContent, and related files for improved modularity

Browse Source
This commit is contained in:
Abhimanyu Yadav
2025-06-12 06:32:44 +05:30
parent 5c264c253c
commit 478f31141d
22 changed files with 55 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,7 @@ interface BlockComponent extends React.FC<Props> {
Skeleton: React.FC<{ className?: string }>;
}
const Block: BlockComponent = ({
export const Block: BlockComponent = ({
title,
description,
highlightedText,
@@ -74,5 +74,3 @@ const BlockSkeleton = () => {
};
Block.Skeleton = BlockSkeleton;
export default Block;

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

@@ -4,9 +4,9 @@ import {
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import ControlPanelButton from "@/components/builder/block-menu/ControlPanelButton";
import { ControlPanelButton } from "@/components/builder/block-menu/ControlPanelButton";
import { ToyBrick } from "lucide-react";
import BlockMenuContent from "./BlockMenuContent";
import { BlockMenuContent } from "./BlockMenuContent";
import { BlockMenuStateProvider } from "./block-menu-provider";
import { Block } from "@/lib/autogpt-server-api";

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

@@ -1,12 +1,12 @@
"use client";
import React from "react";
import BlockMenuSearchBar from "./BlockMenuSearchBar";
import BlockMenuSearch from "./search-and-filter//BlockMenuSearch";
import BlockMenuDefault from "./default/BlockMenuDefault";
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 = () => {
export const BlockMenuContent: React.FC = () => {
const { searchQuery } = useBlockMenuContext();
return (
<div className="flex h-full w-full flex-col">
@@ -16,5 +16,3 @@ const BlockMenuContent: React.FC = () => {
</div>
);
};
export default BlockMenuContent;

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

@@ -10,7 +10,7 @@ interface BlockMenuSearchBarProps {
className?: string;
}
const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
export const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
className = "",
}) => {
const inputRef = useRef<HTMLInputElement>(null);
@@ -90,4 +90,4 @@ const BlockMenuSearchBar: React.FC<BlockMenuSearchBarProps> = ({
);
};
export default BlockMenuSearchBar;

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

@@ -9,7 +9,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
disabled?: boolean;
}
const ControlPanelButton: React.FC<Props> = ({
export const ControlPanelButton: React.FC<Props> = ({
selected = false,
children,
disabled,
@@ -32,4 +32,4 @@ const ControlPanelButton: React.FC<Props> = ({
);
};
export default ControlPanelButton;

4
autogpt_platform/frontend/src/components/builder/block-menu/ErrorState.tsx
View File

@@ -13,7 +13,7 @@ interface ErrorStateProps {
showIcon?: boolean;
}
const ErrorState: React.FC<ErrorStateProps> = ({
export const ErrorState: React.FC<ErrorStateProps> = ({
title = "Something went wrong",
message,
error,
@@ -55,4 +55,4 @@ const ErrorState: React.FC<ErrorStateProps> = ({
);
};
export default ErrorState;

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

@@ -9,7 +9,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
name?: string;
}
const FilterChip: React.FC<Props> = ({
export const FilterChip: React.FC<Props> = ({
selected = false,
number,
name,
@@ -53,4 +53,4 @@ const FilterChip: React.FC<Props> = ({
);
};
export default FilterChip;

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

@@ -15,7 +15,7 @@ interface IntegrationComponent extends React.FC<Props> {
Skeleton: React.FC<{ className?: string }>;
}
const Integration: IntegrationComponent = ({
export const Integration: IntegrationComponent = ({
title,
icon_url,
description,
@@ -86,5 +86,3 @@ const IntegrationSkeleton: React.FC<{ className?: string }> = ({
};
Integration.Skeleton = IntegrationSkeleton;
export default Integration;

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

@@ -33,7 +33,7 @@ export const highlightText = (
);
};
const IntegrationBlock: IntegrationBlockComponent = ({
export const IntegrationBlock: IntegrationBlockComponent = ({
title,
icon_url,
description,
@@ -110,5 +110,3 @@ const IntegrationBlockSkeleton = ({ className }: { className?: string }) => {
};
IntegrationBlock.Skeleton = IntegrationBlockSkeleton;
export default IntegrationBlock;

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

@@ -13,7 +13,7 @@ interface IntegrationChipComponent extends React.FC<Props> {
Skeleton: React.FC;
}
const IntegrationChip: IntegrationChipComponent = ({
export const IntegrationChip: IntegrationChipComponent = ({
icon_url,
name,
className,
@@ -58,5 +58,3 @@ const IntegrationChipSkeleton: React.FC = () => {
};
IntegrationChip.Skeleton = IntegrationChipSkeleton;
export default IntegrationChip;

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

@@ -21,7 +21,7 @@ interface MarketplaceAgentBlockComponent extends React.FC<Props> {
Skeleton: React.FC<{ className?: string }>;
}
const MarketplaceAgentBlock: MarketplaceAgentBlockComponent = ({
export const MarketplaceAgentBlock: MarketplaceAgentBlockComponent = ({
title,
image_url,
creator_name,
@@ -133,5 +133,3 @@ const MarketplaceAgentBlockSkeleton: React.FC<{ className?: string }> = ({
};
MarketplaceAgentBlock.Skeleton = MarketplaceAgentBlockSkeleton;
export default MarketplaceAgentBlock;

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

@@ -10,7 +10,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
name?: string;
}
const MenuItem: React.FC<Props> = ({
export const MenuItem: React.FC<Props> = ({
selected = false,
number,
name,
@@ -39,4 +39,4 @@ const MenuItem: React.FC<Props> = ({
);
};
export default MenuItem;

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

@@ -12,7 +12,7 @@ interface SearchHistoryChipComponent extends React.FC<Props> {
Skeleton: React.FC<{ className?: string }>;
}
const SearchHistoryChip: SearchHistoryChipComponent = ({
export const SearchHistoryChip: SearchHistoryChipComponent = ({
content,
className,
...rest
@@ -45,5 +45,3 @@ const SearchHistoryChipSkeleton: React.FC<{ className?: string }> = ({
};
SearchHistoryChip.Skeleton = SearchHistoryChipSkeleton;
export default SearchHistoryChip;

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

@@ -19,7 +19,7 @@ interface UGCAgentBlockComponent extends React.FC<Props> {
Skeleton: React.FC<{ className?: string }>;
}
const UGCAgentBlock: UGCAgentBlockComponent = ({
export const UGCAgentBlock: UGCAgentBlockComponent = ({
title,
image_url,
edited_time,
@@ -115,5 +115,3 @@ const UGCAgentBlockSkeleton: React.FC<{ className?: string }> = ({
};
UGCAgentBlock.Skeleton = UGCAgentBlockSkeleton;
export default UGCAgentBlock;

6
autogpt_platform/frontend/src/components/builder/block-menu/default/ActionBlocksContent.tsx
View File

@@ -1,8 +1,6 @@
import React from "react";
import PaginatedBlocksContent from "./PaginatedBlocksContent";
import { PaginatedBlocksContent } from "./PaginatedBlocksContent";
const ActionBlocksContent: React.FC = () => {
export const ActionBlocksContent: React.FC = () => {
return <PaginatedBlocksContent blockRequest={{ type: "action" }} />;
};
export default ActionBlocksContent;

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

@@ -1,15 +1,15 @@
import React, { useState, useEffect, Fragment, useCallback } from "react";
import Block from "../Block";
import { Block } from "../Block";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton";
import { useBackendAPI } from "@/lib/autogpt-server-api/context";
import { BlockCategoryResponse } from "@/lib/autogpt-server-api";
import { useBlockMenuContext } from "../block-menu-provider";
import ErrorState from "../ErrorState";
import { ErrorState } from "../ErrorState";
import { beautifyString } from "@/lib/utils";
const AllBlocksContent: React.FC = () => {
export const AllBlocksContent: React.FC = () => {
const { addNode } = useBlockMenuContext();
const [categories, setCategories] = useState<BlockCategoryResponse[]>([]);
const [loading, setLoading] = useState(true);
@@ -160,4 +160,4 @@ const AllBlocksContent: React.FC = () => {
);
};
export default AllBlocksContent;

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

@@ -1,9 +1,9 @@
import React from "react";
import BlockMenuSidebar from "./BlockMenuSidebar";
import { BlockMenuSidebar } from "./BlockMenuSidebar";
import { Separator } from "@/components/ui/separator";
import BlockMenuDefaultContent from "./BlockMenuDefaultContent";
import { BlockMenuDefaultContent } from "./BlockMenuDefaultContent";
const BlockMenuDefault: React.FC = () => {
export const BlockMenuDefault: React.FC = () => {
return (
<div className="flex flex-1 overflow-y-auto">
<BlockMenuSidebar />
@@ -13,4 +13,4 @@ const BlockMenuDefault: React.FC = () => {
);
};
export default BlockMenuDefault;

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

@@ -1,12 +1,12 @@
import React from "react";
import SuggestionContent from "./SuggestionContent";
import AllBlocksContent from "./AllBlocksContent";
import IntegrationsContent from "./IntegrationsContent";
import MarketplaceAgentsContent from "./MarketplaceAgentsContent";
import MyAgentsContent from "./MyAgentsContent";
import ActionBlocksContent from "./ActionBlocksContent";
import InputBlocksContent from "./InputBlocksContent";
import OutputBlocksContent from "./OutputBlocksContent";
import { SuggestionContent } from "./SuggestionContent";
import { AllBlocksContent } from "./AllBlocksContent";
import { IntegrationsContent } from "./IntegrationsContent";
import { MarketplaceAgentsContent } from "./MarketplaceAgentsContent";
import { MyAgentsContent } from "./MyAgentsContent";
import { ActionBlocksContent } from "./ActionBlocksContent";
import { InputBlocksContent } from "./InputBlocksContent";
import { OutputBlocksContent } from "./OutputBlocksContent";
import { useBlockMenuContext } from "../block-menu-provider";
export interface ActionBlock {
@@ -21,7 +21,7 @@ export interface BlockListType {
description: string;
}
const BlockMenuDefaultContent: React.FC = ({}) => {
export const BlockMenuDefaultContent: React.FC = ({}) => {
const { defaultState } = useBlockMenuContext();
return (
@@ -38,4 +38,4 @@ const BlockMenuDefaultContent: React.FC = ({}) => {
);
};
export default BlockMenuDefaultContent;

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

@@ -1,10 +1,10 @@
import React, { useEffect, useState } from "react";
import MenuItem from "../MenuItem";
import { MenuItem } from "../MenuItem";
import { DefaultStateType, useBlockMenuContext } from "../block-menu-provider";
import { useBackendAPI } from "@/lib/autogpt-server-api/context";
import { CountResponse } from "@/lib/autogpt-server-api";
const BlockMenuSidebar: React.FC = ({}) => {
export const BlockMenuSidebar: React.FC = ({}) => {
const { defaultState, setDefaultState, setIntegration } =
useBlockMenuContext();
const [blockCounts, setBlockCounts] = useState<CountResponse | undefined>(
@@ -116,4 +116,4 @@ const BlockMenuSidebar: React.FC = ({}) => {
);
};
export default BlockMenuSidebar;

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

@@ -1,5 +1,5 @@
import React from "react";
import Block from "../Block";
import { Block } from "../Block";
import { Block as BlockType } from "@/lib/autogpt-server-api";
import { useBlockMenuContext } from "../block-menu-provider";
@@ -8,7 +8,7 @@ interface BlocksListProps {
loading?: boolean;
}
const BlocksList: React.FC<BlocksListProps> = ({ blocks, loading = false }) => {
export const BlocksList: React.FC<BlocksListProps> = ({ blocks, loading = false }) => {
const { addNode } = useBlockMenuContext();
return (
<div className="w-full space-y-3 px-4 pb-4">
@@ -30,4 +30,4 @@ const BlocksList: React.FC<BlocksListProps> = ({ blocks, loading = false }) => {
);
};
export default BlocksList;

6
autogpt_platform/frontend/src/components/builder/block-menu/default/InputBlocksContent.tsx
View File

@@ -1,8 +1,6 @@
import React from "react";
import PaginatedBlocksContent from "./PaginatedBlocksContent";
import { PaginatedBlocksContent } from "./PaginatedBlocksContent";
const InputBlocksContent: React.FC = () => {
export const InputBlocksContent: React.FC = () => {
return <PaginatedBlocksContent blockRequest={{ type: "input" }} />;
};
export default InputBlocksContent;

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

@@ -1,13 +1,13 @@
import { Button } from "@/components/ui/button";
import React, { useState, useEffect, Fragment, useCallback } from "react";
import IntegrationBlock from "../IntegrationBlock";
import { IntegrationBlock } from "../IntegrationBlock";
import { useBlockMenuContext } from "../block-menu-provider";
import { useBackendAPI } from "@/lib/autogpt-server-api/context";
import { Block } from "@/lib/autogpt-server-api";
import ErrorState from "../ErrorState";
import { ErrorState } from "../ErrorState";
import { Skeleton } from "@/components/ui/skeleton";
const IntegrationBlocks: React.FC = ({}) => {
export const IntegrationBlocks: React.FC = ({}) => {
const { integration, setIntegration, addNode } = useBlockMenuContext();
const [blocks, setBlocks] = useState<Block[]>([]);
const [loading, setLoading] = useState(true);
@@ -109,4 +109,4 @@ const IntegrationBlocks: React.FC = ({}) => {
);
};
export default IntegrationBlocks;