diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx index 237bea2ab0..de56bb46b8 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx @@ -16,6 +16,7 @@ import { SheetTitle, SheetTrigger, } from "@/components/__legacy__/ui/sheet"; +import { Button } from "@/components/atoms/Button/Button"; import { Tooltip, TooltipContent, @@ -25,7 +26,6 @@ import { import { BookOpenIcon } from "@phosphor-icons/react"; import { useMemo } from "react"; import { useShallow } from "zustand/react/shallow"; -import { BuilderActionButton } from "../BuilderActionButton"; export const AgentOutputs = ({ flowID }: { flowID: string | null }) => { const hasOutputs = useGraphStore(useShallow((state) => state.hasOutputs)); @@ -76,9 +76,13 @@ export const AgentOutputs = ({ flowID }: { flowID: string | null }) => { - - - + diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/BuilderActionButton.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/BuilderActionButton.tsx deleted file mode 100644 index 549b432a38..0000000000 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/BuilderActionButton.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Button } from "@/components/atoms/Button/Button"; -import { ButtonProps } from "@/components/atoms/Button/helpers"; -import { cn } from "@/lib/utils"; -import { CircleNotchIcon } from "@phosphor-icons/react"; - -export const BuilderActionButton = ({ - children, - className, - isLoading, - ...props -}: ButtonProps & { isLoading?: boolean }) => { - return ( - - ); -}; diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/PublishToMarketplace/PublishToMarketplace.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/PublishToMarketplace/PublishToMarketplace.tsx index 500b8f0b47..e7381b7d52 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/PublishToMarketplace/PublishToMarketplace.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/PublishToMarketplace/PublishToMarketplace.tsx @@ -1,12 +1,12 @@ -import { ShareIcon } from "@phosphor-icons/react"; -import { BuilderActionButton } from "../BuilderActionButton"; +import { Button } from "@/components/atoms/Button/Button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/atoms/Tooltip/BaseTooltip"; -import { usePublishToMarketplace } from "./usePublishToMarketplace"; import { PublishAgentModal } from "@/components/contextual/PublishAgentModal/PublishAgentModal"; +import { ShareIcon } from "@phosphor-icons/react"; +import { usePublishToMarketplace } from "./usePublishToMarketplace"; export const PublishToMarketplace = ({ flowID }: { flowID: string | null }) => { const { handlePublishToMarketplace, publishState, handleStateChange } = @@ -16,12 +16,14 @@ export const PublishToMarketplace = ({ flowID }: { flowID: string | null }) => { <> - - - + + Publish to Marketplace diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/RunGraph.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/RunGraph.tsx index f4c1a7331f..7ee00ec285 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/RunGraph.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/RunGraph.tsx @@ -1,15 +1,14 @@ -import { useRunGraph } from "./useRunGraph"; import { useGraphStore } from "@/app/(platform)/build/stores/graphStore"; -import { useShallow } from "zustand/react/shallow"; -import { PlayIcon, StopIcon } from "@phosphor-icons/react"; -import { cn } from "@/lib/utils"; -import { RunInputDialog } from "../RunInputDialog/RunInputDialog"; +import { Button } from "@/components/atoms/Button/Button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/atoms/Tooltip/BaseTooltip"; -import { BuilderActionButton } from "../BuilderActionButton"; +import { PlayIcon, StopIcon } from "@phosphor-icons/react"; +import { useShallow } from "zustand/react/shallow"; +import { RunInputDialog } from "../RunInputDialog/RunInputDialog"; +import { useRunGraph } from "./useRunGraph"; export const RunGraph = ({ flowID }: { flowID: string | null }) => { const { @@ -29,21 +28,19 @@ export const RunGraph = ({ flowID }: { flowID: string | null }) => { <> - {!isGraphRunning ? ( - + ) : ( - + )} - + {isGraphRunning ? "Stop agent" : "Run agent"} diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/ScheduleGraph/ScheduleGraph.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/ScheduleGraph/ScheduleGraph.tsx index be588fa9e7..5cc8538de1 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/ScheduleGraph/ScheduleGraph.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/ScheduleGraph/ScheduleGraph.tsx @@ -1,14 +1,14 @@ -import { ClockIcon } from "@phosphor-icons/react"; -import { RunInputDialog } from "../RunInputDialog/RunInputDialog"; -import { useScheduleGraph } from "./useScheduleGraph"; +import { Button } from "@/components/atoms/Button/Button"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/atoms/Tooltip/BaseTooltip"; +import { ClockIcon } from "@phosphor-icons/react"; import { CronSchedulerDialog } from "../CronSchedulerDialog/CronSchedulerDialog"; -import { BuilderActionButton } from "../BuilderActionButton"; +import { RunInputDialog } from "../RunInputDialog/RunInputDialog"; +import { useScheduleGraph } from "./useScheduleGraph"; export const ScheduleGraph = ({ flowID }: { flowID: string | null }) => { const { @@ -23,12 +23,14 @@ export const ScheduleGraph = ({ flowID }: { flowID: string | null }) => { - - - + +

Schedule Graph

diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/ControlPanelButton.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/ControlPanelButton.tsx index b176a002a7..36834becf6 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/ControlPanelButton.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/ControlPanelButton.tsx @@ -24,7 +24,7 @@ export const ControlPanelButton: React.FC = ({ role={as === "div" ? "button" : undefined} disabled={as === "button" ? disabled : undefined} 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", + "flex w-auto items-center justify-center whitespace-normal bg-white px-4 py-4 text-zinc-800 shadow-none hover:cursor-pointer hover:bg-zinc-100 hover:text-zinc-950 focus:ring-0", selected && "bg-violet-50 text-violet-700 hover:cursor-default hover:bg-violet-50 hover:text-violet-700 active:bg-violet-50 active:text-violet-700", disabled && "cursor-not-allowed opacity-50 hover:cursor-not-allowed", diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenu/BlockMenu.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenu/BlockMenu.tsx index bbaf410296..7533f501df 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenu/BlockMenu.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenu/BlockMenu.tsx @@ -1,18 +1,17 @@ -import React from "react"; +import { useControlPanelStore } from "@/app/(platform)/build/stores/controlPanelStore"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/__legacy__/ui/popover"; -import { BlockMenuContent } from "../BlockMenuContent/BlockMenuContent"; -import { ControlPanelButton } from "../../ControlPanelButton"; -import { LegoIcon } from "@phosphor-icons/react"; -import { useControlPanelStore } from "@/app/(platform)/build/stores/controlPanelStore"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/atoms/Tooltip/BaseTooltip"; +import { LegoIcon } from "@phosphor-icons/react"; +import { ControlPanelButton } from "../../ControlPanelButton"; +import { BlockMenuContent } from "../BlockMenuContent/BlockMenuContent"; export const BlockMenu = () => { const { blockMenuOpen, setBlockMenuOpen } = useControlPanelStore(); @@ -28,7 +27,7 @@ export const BlockMenu = () => { selected={blockMenuOpen} className="rounded-none" > - + diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewControlPanel.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewControlPanel.tsx index 4828a73af4..8c8bbf1842 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewControlPanel.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewControlPanel.tsx @@ -7,10 +7,10 @@ import { useNewControlPanel } from "./useNewControlPanel"; import { GraphExecutionID } from "@/lib/autogpt-server-api"; // import { ControlPanelButton } from "../ControlPanelButton"; // import { GraphSearchMenu } from "../GraphMenu/GraphMenu"; -import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag"; import { Separator } from "@/components/__legacy__/ui/separator"; -import { NewSaveControl } from "./NewSaveControl/NewSaveControl"; +import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag"; import { CustomNode } from "../FlowEditor/nodes/CustomNode/CustomNode"; +import { NewSaveControl } from "./NewSaveControl/NewSaveControl"; import { UndoRedoButtons } from "./UndoRedoButtons"; export type Control = { @@ -56,7 +56,7 @@ export const NewControlPanel = memo( return (
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSaveControl/NewSaveControl.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSaveControl/NewSaveControl.tsx index beae5c1705..cbf06af1c6 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSaveControl/NewSaveControl.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSaveControl/NewSaveControl.tsx @@ -1,22 +1,21 @@ -import React from "react"; +import { Card, CardContent, CardFooter } from "@/components/__legacy__/ui/card"; +import { Form, FormField } from "@/components/__legacy__/ui/form"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/__legacy__/ui/popover"; -import { Card, CardContent, CardFooter } from "@/components/__legacy__/ui/card"; +import { Button } from "@/components/atoms/Button/Button"; +import { Input } from "@/components/atoms/Input/Input"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/atoms/Tooltip/BaseTooltip"; -import { useNewSaveControl } from "./useNewSaveControl"; -import { Form, FormField } from "@/components/__legacy__/ui/form"; -import { ControlPanelButton } from "../ControlPanelButton"; -import { useControlPanelStore } from "../../../stores/controlPanelStore"; import { FloppyDiskIcon } from "@phosphor-icons/react"; -import { Input } from "@/components/atoms/Input/Input"; -import { Button } from "@/components/atoms/Button/Button"; +import { useControlPanelStore } from "../../../stores/controlPanelStore"; +import { ControlPanelButton } from "../ControlPanelButton"; +import { useNewSaveControl } from "./useNewSaveControl"; export const NewSaveControl = () => { const { form, isSaving, graphVersion, handleSave } = useNewSaveControl(); @@ -33,7 +32,7 @@ export const NewSaveControl = () => { selected={saveControlOpen} className="rounded-none" > - + diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/GraphMenu.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/GraphMenu.tsx index c886919642..8ff96a598b 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/GraphMenu.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/GraphMenu.tsx @@ -1,13 +1,13 @@ -import React from "react"; +import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/__legacy__/ui/popover"; import { MagnifyingGlassIcon } from "@phosphor-icons/react"; -import { GraphSearchContent } from "../GraphMenuContent/GraphContent"; +import React from "react"; import { ControlPanelButton } from "../../ControlPanelButton"; -import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode"; +import { GraphSearchContent } from "../GraphMenuContent/GraphContent"; import { useGraphMenu } from "./useGraphMenu"; interface GraphSearchMenuProps { @@ -50,7 +50,7 @@ export const GraphSearchMenu: React.FC = ({ selected={blockMenuSelected === "search"} className="rounded-none" > - + diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/UndoRedoButtons.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/UndoRedoButtons.tsx index 6f134056c8..5510335104 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/UndoRedoButtons.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/UndoRedoButtons.tsx @@ -1,12 +1,12 @@ import { Separator } from "@/components/__legacy__/ui/separator"; -import { ControlPanelButton } from "./ControlPanelButton"; -import { ArrowUUpLeftIcon, ArrowUUpRightIcon } from "@phosphor-icons/react"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/atoms/Tooltip/BaseTooltip"; +import { ArrowUUpLeftIcon, ArrowUUpRightIcon } from "@phosphor-icons/react"; import { useHistoryStore } from "../../stores/historyStore"; +import { ControlPanelButton } from "./ControlPanelButton"; import { useEffect } from "react"; @@ -43,7 +43,7 @@ export const UndoRedoButtons = () => { - + Undo @@ -52,7 +52,7 @@ export const UndoRedoButtons = () => { - + Redo diff --git a/autogpt_platform/frontend/src/app/(platform)/build/page.tsx b/autogpt_platform/frontend/src/app/(platform)/build/page.tsx index f60c863657..f1d62ee5fb 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/page.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/page.tsx @@ -8,8 +8,8 @@ import { ReactFlowProvider } from "@xyflow/react"; import { useSearchParams } from "next/navigation"; import { useEffect } from "react"; import { BuilderViewTabs } from "./components/BuilderViewTabs/BuilderViewTabs"; -import { useBuilderView } from "./components/BuilderViewTabs/useBuilderViewTabs"; import { Flow } from "./components/FlowEditor/Flow/Flow"; +import { useBuilderView } from "./useBuilderView"; function BuilderContent() { const query = useSearchParams(); diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/useBuilderViewTabs.ts b/autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts similarity index 95% rename from autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/useBuilderViewTabs.ts rename to autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts index ac02becca5..e0e524ddf8 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/useBuilderViewTabs.ts +++ b/autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts @@ -1,7 +1,7 @@ import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { useEffect, useMemo } from "react"; -import { BuilderView } from "./BuilderViewTabs"; +import { BuilderView } from "./components/BuilderViewTabs/BuilderViewTabs"; export function useBuilderView() { const isNewFlowEditorEnabled = useGetFlag(Flag.NEW_FLOW_EDITOR); diff --git a/autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts b/autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts index f05d7c68a4..64b69895f3 100644 --- a/autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts +++ b/autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts @@ -56,7 +56,7 @@ export function useGetFlag(flag: T): FlagValues[T] | null { const envEnabled = process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true"; const clientId = process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID; - const isLaunchDarklyConfigured = envEnabled && clientId; + const isLaunchDarklyConfigured = envEnabled && Boolean(clientId); if (!isLaunchDarklyConfigured || isPwMockEnabled) { return mockFlags[flag];