github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2025-12-26 05:48:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): disable change-agent button until WebSocket connection is ready (#11781)

Browse Source
This commit is contained in:
Hiep Le 2025-11-20 01:28:17 +07:00 committed by GitHub
parent 9538c7bd89
commit 151c2895e0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/features/chat/change-agent-button.tsx
View File

@ -14,6 +14,7 @@ import { AgentState } from "#/types/agent-state";
import { useActiveConversation } from "#/hooks/query/use-active-conversation";
import { useCreateConversation } from "#/hooks/mutation/use-create-conversation";
import { displaySuccessToast } from "#/utils/custom-toast-handlers";
import { useUnifiedWebSocketStatus } from "#/hooks/use-unified-websocket-status";
export function ChangeAgentButton() {
const [contextMenuOpen, setContextMenuOpen] = useState<boolean>(false);
@ -26,6 +27,10 @@ export function ChangeAgentButton() {
(state) => state.setConversationMode,
);
const webSocketStatus = useUnifiedWebSocketStatus();
const isWebSocketConnected = webSocketStatus === "CONNECTED";
const shouldUsePlanningAgent = USE_PLANNING_AGENT();
const { curAgentState } = useAgentState();
@ -40,10 +45,10 @@ export function ChangeAgentButton() {
// Close context menu when agent starts running
useEffect(() => {
if (isAgentRunning && contextMenuOpen) {
if ((isAgentRunning || !isWebSocketConnected) && contextMenuOpen) {
setContextMenuOpen(false);
}
}, [isAgentRunning, contextMenuOpen]);
}, [isAgentRunning, contextMenuOpen, isWebSocketConnected]);
const handlePlanClick = (
event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent,
@ -79,9 +84,15 @@ export function ChangeAgentButton() {
);
};
const isButtonDisabled =
isAgentRunning ||
isCreatingConversation ||
!isWebSocketConnected ||
!shouldUsePlanningAgent;
// Handle Shift + Tab keyboard shortcut to cycle through modes
useEffect(() => {
if (!shouldUsePlanningAgent || isAgentRunning) {
if (isButtonDisabled) {
return undefined;
}
@ -108,10 +119,10 @@ export function ChangeAgentButton() {
document.removeEventListener("keydown", handleKeyDown);
};
}, [
shouldUsePlanningAgent,
isAgentRunning,
isButtonDisabled,
conversationMode,
setConversationMode,
handlePlanClick,
]);
const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@ -142,8 +153,6 @@ export function ChangeAgentButton() {
return <LessonPlanIcon width={18} height={18} color="#ffffff" />;
}, [isExecutionAgent]);
const isButtonDisabled = isAgentRunning || isCreatingConversation;
if (!shouldUsePlanningAgent) {
return null;
}