wanwu/deer-flow
1
0
Fork 0
mirror of https://gitee.com/wanwujie/deer-flow synced 2026-05-03 18:50:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance auto-play

Browse Source
This commit is contained in:
Li Xin
2025-05-02 17:33:36 +08:00
parent b152e787cc
commit e37c0a755c
1 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/app/landing/components/multi-agent-visualization.tsx
View File

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