From 915c180ba78645d628b422301a68df981b1c6ed3 Mon Sep 17 00:00:00 2001
From: Hiep Le <69354317+hieptl@users.noreply.github.com>
Date: Wed, 12 Nov 2025 00:46:12 +0700
Subject: [PATCH] feat(frontend): disable change agent button while agent is
 running (#11691)

---
 .../features/chat/change-agent-button.tsx     | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/features/chat/change-agent-button.tsx b/frontend/src/components/features/chat/change-agent-button.tsx
index eaaa02b9c7..706f582b59 100644
--- a/frontend/src/components/features/chat/change-agent-button.tsx
+++ b/frontend/src/components/features/chat/change-agent-button.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Typography } from "#/ui/typography";
 import { I18nKey } from "#/i18n/declaration";
@@ -9,6 +9,8 @@ import { useConversationStore } from "#/state/conversation-store";
 import { ChangeAgentContextMenu } from "./change-agent-context-menu";
 import { cn } from "#/utils/utils";
 import { USE_PLANNING_AGENT } from "#/utils/feature-flags";
+import { useAgentState } from "#/hooks/use-agent-state";
+import { AgentState } from "#/types/agent-state";
 
 export function ChangeAgentButton() {
   const { t } = useTranslation();
@@ -24,6 +26,17 @@ export function ChangeAgentButton() {
 
   const shouldUsePlanningAgent = USE_PLANNING_AGENT();
 
+  const { curAgentState } = useAgentState();
+
+  const isAgentRunning = curAgentState === AgentState.RUNNING;
+
+  // Close context menu when agent starts running
+  useEffect(() => {
+    if (isAgentRunning && contextMenuOpen) {
+      setContextMenuOpen(false);
+    }
+  }, [isAgentRunning, contextMenuOpen]);
+
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     event.stopPropagation();
@@ -67,9 +80,13 @@ export function ChangeAgentButton() {
       <button
         type="button"
         onClick={handleButtonClick}
+        disabled={isAgentRunning}
         className={cn(
-          "flex items-center border border-[#4B505F] rounded-[100px] cursor-pointer hover:opacity-80",
+          "flex items-center border border-[#4B505F] rounded-[100px] transition-opacity",
           !isExecutionAgent && "border-[#597FF4] bg-[#4A67BD]",
+          isAgentRunning
+            ? "opacity-50 cursor-not-allowed"
+            : "cursor-pointer hover:opacity-80",
         )}
       >
         <div className="flex items-center gap-1 pl-1.5">