From e37c0a755c535138b7a3f66c521df04c09bbc74c Mon Sep 17 00:00:00 2001
From: Li Xin <lixin.henry@bytedance.com>
Date: Fri, 2 May 2025 17:33:36 +0800
Subject: [PATCH] feat: enhance auto-play

---
 .../components/multi-agent-visualization.tsx  | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/web/src/app/landing/components/multi-agent-visualization.tsx b/web/src/app/landing/components/multi-agent-visualization.tsx
index 5a4297b..7fca037 100644
--- a/web/src/app/landing/components/multi-agent-visualization.tsx
+++ b/web/src/app/landing/components/multi-agent-visualization.tsx
@@ -54,12 +54,14 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
   } = useMAVStore((state) => state);
   const flowRef = useRef<ReactFlowInstance<GraphNode, Edge>>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const [hasPlayed, setHasPlayed] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
   const { ref: anchorRef } = useIntersectionObserver({
     rootMargin: "0%",
     threshold: 0,
     onChange: (isIntersecting) => {
-      if (isIntersecting && !playing) {
+      if (isIntersecting && !playing && !hasPlayed) {
+        setHasPlayed(true);
         void play();
       }
     },
@@ -132,7 +134,13 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
             </Button>
           </Tooltip>
           <Tooltip title="Move to the next step">
-            <Button variant="ghost" onClick={nextStep}>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                setHasPlayed(true);
+                nextStep();
+              }}
+            >
               <ChevronRight className="size-5" />
             </Button>
           </Tooltip>
@@ -144,13 +152,20 @@ export function MultiAgentVisualization({ className }: { className?: string }) {
               step={1}
               value={[activeStepIndex >= 0 ? activeStepIndex : 0]}
               onValueChange={([value]) => {
-                console.info("jump", value);
+                setHasPlayed(true);
                 activateStep(value!);
               }}
             />
           </div>
           <Tooltip title="Toggle fullscreen">
-            <Button variant="ghost" size="icon" onClick={toggleFullscreen}>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => {
+                setHasPlayed(true);
+                void toggleFullscreen();
+              }}
+            >
               {fullscreen ? (
                 <Minimize className="size-5" />
               ) : (