tweak(platform): Add primary action buttons (#8161)

autogpt_platform/frontend/src/components/Flow.tsx

@@ -39,7 +39,6 @@ import {
   IconUndo2,
   IconRedo2,
   IconSquare,
-  IconOutput,
 } from "@/components/ui/icons";
 import { startTutorial } from "./tutorial";
 import useAgentGraph from "@/hooks/useAgentGraph";
@@ -49,6 +48,7 @@ import { LogOut } from "lucide-react";
 import RunnerUIWrapper, {
   RunnerUIWrapperRef,
 } from "@/components/RunnerUIWrapper";
+import PrimaryActionBar from "@/components/PrimaryActionButton";
 
 // This is for the history, this is the minimum distance a block must move before it is logged
 // It helps to prevent spamming the history with small movements especially when pressing on a input in a block
@@ -557,23 +557,6 @@ const FlowEditor: React.FC<{
       icon: <IconRedo2 />,
       onClick: handleRedo,
     },
-    {
-      label: !savedAgent
-        ? "Please save the agent to run"
-        : !isRunning
-          ? "Run"
-          : "Stop",
-      icon: !isRunning ? <IconPlay /> : <IconSquare />,
-      onClick: !isRunning
-        ? () => runnerUIRef.current?.runOrOpenInput()
-        : requestStopRun,
-      disabled: !savedAgent,
-    },
-    {
-      label: "Runner Output",
-      icon: <LogOut size={18} strokeWidth={1.8} />,
-      onClick: () => runnerUIRef.current?.openRunnerOutput(),
-    },
   ];
 
   return (
@@ -614,6 +597,31 @@ const FlowEditor: React.FC<{
               onNameChange={setAgentName}
             />
           </ControlPanel>
+          <PrimaryActionBar
+            onClickAgentOutputs={() => runnerUIRef.current?.openRunnerOutput()}
+            onClickRunAgent={() => {
+              if (!savedAgent) {
+                alert(
+                  "Please save the agent to run, by clicking the save button in the left sidebar.",
+                );
+                return;
+              }
+              if (!isRunning) {
+                runnerUIRef.current?.runOrOpenInput();
+              } else {
+                requestStopRun();
+              }
+            }}
+            isRunning={isRunning}
+            requestStopRun={requestStopRun}
+            runAgentTooltip={
+              !savedAgent
+                ? "Please save the agent to run"
+                : !isRunning
+                  ? "Run Agent"
+                  : "Stop Agent"
+            }
+          />
         </ReactFlow>
       </div>
       <RunnerUIWrapper

autogpt_platform/frontend/src/components/PrimaryActionButton.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { Button } from "./ui/button";
+import { LogOut } from "lucide-react";
+import { IconPlay, IconSquare } from "@/components/ui/icons";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface PrimaryActionBarProps {
+  onClickAgentOutputs: () => void;
+  onClickRunAgent: () => void;
+  isRunning: boolean;
+  requestStopRun: () => void;
+  runAgentTooltip: string;
+}
+
+const PrimaryActionBar: React.FC<PrimaryActionBarProps> = ({
+  onClickAgentOutputs,
+  onClickRunAgent,
+  isRunning,
+  requestStopRun,
+  runAgentTooltip,
+}) => {
+  const runButtonLabel = !isRunning ? "Run" : "Stop";
+
+  const runButtonIcon = !isRunning ? <IconPlay /> : <IconSquare />;
+
+  const runButtonOnClick = !isRunning ? onClickRunAgent : requestStopRun;
+
+  return (
+    <div className="absolute bottom-0 left-0 right-0 z-50 flex items-center justify-center p-4">
+      <div className={`flex gap-4`}>
+        <Tooltip key="ViewOutputs" delayDuration={500}>
+          <TooltipTrigger asChild>
+            <Button
+              className="flex items-center gap-2"
+              onClick={onClickAgentOutputs}
+              size="primary"
+              variant="outline"
+            >
+              <LogOut className="h-5 w-5" />
+              <span className="text-lg font-medium">Agent Outputs </span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>View agent outputs</p>
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip key="RunAgent" delayDuration={500}>
+          <TooltipTrigger asChild>
+            <Button
+              className="flex items-center gap-2"
+              onClick={runButtonOnClick}
+              size="primary"
+              style={{
+                background: isRunning ? "#FFB3BA" : "#7544DF",
+                opacity: 1,
+              }}
+            >
+              {runButtonIcon}
+              <span className="text-lg font-medium">{runButtonLabel}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{runAgentTooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default PrimaryActionBar;

autogpt_platform/frontend/src/components/ui/button.tsx

@@ -25,6 +25,7 @@ const buttonVariants = cva(
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
+        primary: "h-14 w-44 rounded-2xl",
         icon: "h-9 w-9",
       },
     },