fix(platform): UI fixes; Fix disabled Run/Stop button (#8171)

* fix(platform): UI fixes; Fix disabled Run/Stop button

* fix(platform): UI fixes; Fix disabled Run/Stop button

---------

Co-authored-by: Swifty <craigswift13@gmail.com>

autogpt_platform/frontend/src/components/Flow.tsx

@@ -34,21 +34,16 @@ import ConnectionLine from "./ConnectionLine";
 import { Control, ControlPanel } from "@/components/edit/control/ControlPanel";
 import { SaveControl } from "@/components/edit/control/SaveControl";
 import { BlocksControl } from "@/components/edit/control/BlocksControl";
-import {
-  IconPlay,
-  IconUndo2,
-  IconRedo2,
-  IconSquare,
-} from "@/components/ui/icons";
+import { IconUndo2, IconRedo2 } from "@/components/ui/icons";
 import { startTutorial } from "./tutorial";
 import useAgentGraph from "@/hooks/useAgentGraph";
 import { v4 as uuidv4 } from "uuid";
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
-import { LogOut } from "lucide-react";
+import { useRouter, usePathname } from "next/navigation";
 import RunnerUIWrapper, {
   RunnerUIWrapperRef,
 } from "@/components/RunnerUIWrapper";
 import PrimaryActionBar from "@/components/PrimaryActionButton";
+import { useToast } from "@/components/ui/use-toast";
 
 // 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
@@ -108,6 +103,8 @@ const FlowEditor: React.FC<{
 
   const runnerUIRef = useRef<RunnerUIWrapperRef>(null);
 
+  const { toast } = useToast();
+
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
 
@@ -601,9 +598,10 @@ const FlowEditor: React.FC<{
             onClickAgentOutputs={() => runnerUIRef.current?.openRunnerOutput()}
             onClickRunAgent={() => {
               if (!savedAgent) {
-                alert(
-                  "Please save the agent to run, by clicking the save button in the left sidebar.",
-                );
+                toast({
+                  title: `Please save the agent using the button in the left sidebar before running it.`,
+                  duration: 2000,
+                });
                 return;
               }
               if (!isRunning) {
@@ -612,15 +610,10 @@ const FlowEditor: React.FC<{
                 requestStopRun();
               }
             }}
+            isDisabled={!savedAgent}
             isRunning={isRunning}
             requestStopRun={requestStopRun}
-            runAgentTooltip={
-              !savedAgent
-                ? "Please save the agent to run"
-                : !isRunning
-                  ? "Run Agent"
-                  : "Stop Agent"
-            }
+            runAgentTooltip={!isRunning ? "Run Agent" : "Stop Agent"}
           />
         </ReactFlow>
       </div>

autogpt_platform/frontend/src/components/PrimaryActionButton.tsx

@@ -12,6 +12,7 @@ interface PrimaryActionBarProps {
   onClickAgentOutputs: () => void;
   onClickRunAgent: () => void;
   isRunning: boolean;
+  isDisabled: boolean;
   requestStopRun: () => void;
   runAgentTooltip: string;
 }
@@ -20,6 +21,7 @@ const PrimaryActionBar: React.FC<PrimaryActionBarProps> = ({
   onClickAgentOutputs,
   onClickRunAgent,
   isRunning,
+  isDisabled,
   requestStopRun,
   runAgentTooltip,
 }) => {
@@ -56,7 +58,7 @@ const PrimaryActionBar: React.FC<PrimaryActionBarProps> = ({
               size="primary"
               style={{
                 background: isRunning ? "#FFB3BA" : "#7544DF",
-                opacity: 1,
+                opacity: isDisabled ? 0.5 : 1,
               }}
             >
               {runButtonIcon}