fix(frontend): the GET microagents API is called multiple times, and the Available Microagents modal loads for an extended period if the conversation is connecting to an agent. (#9517)

2026-03-22 13:47:19 +08:00 · 2025-07-07 21:08:26 +07:00
parent 2053e72474
commit 97e3310dd5
3 changed files with 127 additions and 80 deletions
--- a/frontend/tests/components/modals/microagents/microagent-modal.test.tsx
+++ b/frontend/tests/components/modals/microagents/microagent-modal.test.tsx
@@ -4,6 +4,20 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { renderWithProviders } from "test-utils";
 import { MicroagentsModal } from "#/components/features/conversation-panel/microagents-modal";
 import OpenHands from "#/api/open-hands";
+import { AgentState } from "#/types/agent-state";
+
+vi.mock("react-redux", async () => {
+  const actual = await vi.importActual("react-redux");
+  return {
+    ...actual,
+    useDispatch: () => vi.fn(),
+    useSelector: () => ({
+      agent: {
+        curAgentState: AgentState.AWAITING_USER_INPUT,
+      },
+    }),
+  };
+});

 describe("MicroagentsModal - Refresh Button", () => {
  const mockOnClose = vi.fn();
--- a/frontend/src/components/features/conversation-panel/microagents-modal.tsx
+++ b/frontend/src/components/features/conversation-panel/microagents-modal.tsx
@@ -1,11 +1,14 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
 import { ChevronDown, ChevronRight, RefreshCw } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import { ModalBody } from "#/components/shared/modals/modal-body";
 import { I18nKey } from "#/i18n/declaration";
 import { useConversationMicroagents } from "#/hooks/query/use-conversation-microagents";
+import { RootState } from "#/store";
+import { AgentState } from "#/types/agent-state";
 import { BrandButton } from "../settings/brand-button";

 interface MicroagentsModalProps {
@@ -18,6 +21,7 @@ export function MicroagentsModal({
  conversationId,
 }: MicroagentsModalProps) {
  const { t } = useTranslation();
+  const { curAgentState } = useSelector((state: RootState) => state.agent);
  const [expandedAgents, setExpandedAgents] = useState<Record<string, boolean>>(
    {},
  );
@@ -28,6 +32,7 @@ export function MicroagentsModal({
    refetch,
    isRefetching,
  } = useConversationMicroagents({
+    agentState: curAgentState,
    conversationId,
    enabled: true,
  });
@@ -39,6 +44,10 @@ export function MicroagentsModal({
    }));
  };

+  const isAgentReady = ![AgentState.LOADING, AgentState.INIT].includes(
+    curAgentState,
+  );
+
  return (
    <ModalBackdrop onClose={onClose}>
      <ModalBody
@@ -49,28 +58,38 @@ export function MicroagentsModal({
        <div className="flex flex-col gap-6 w-full">
          <div className="flex items-center justify-between w-full">
            <BaseModalTitle title={t(I18nKey.MICROAGENTS_MODAL$TITLE)} />
-            <BrandButton
-              testId="refresh-microagents"
-              type="button"
-              variant="primary"
-              className="flex items-center gap-2"
-              onClick={refetch}
-              isDisabled={isLoading || isRefetching}
-            >
-              <RefreshCw
-                size={16}
-                className={`${isRefetching ? "animate-spin" : ""}`}
-              />
-              {t(I18nKey.BUTTON$REFRESH)}
-            </BrandButton>
+            {isAgentReady && (
+              <BrandButton
+                testId="refresh-microagents"
+                type="button"
+                variant="primary"
+                className="flex items-center gap-2"
+                onClick={refetch}
+                isDisabled={isLoading || isRefetching}
+              >
+                <RefreshCw
+                  size={16}
+                  className={`${isRefetching ? "animate-spin" : ""}`}
+                />
+                {t(I18nKey.BUTTON$REFRESH)}
+              </BrandButton>
+            )}
          </div>
        </div>

-        <span className="text-sm text-gray-400">
-          {t(I18nKey.MICROAGENTS_MODAL$WARNING)}
-        </span>
+        {isAgentReady && (
+          <span className="text-sm text-gray-400">
+            {t(I18nKey.MICROAGENTS_MODAL$WARNING)}
+          </span>
+        )}

        <div className="w-full h-[60vh] overflow-auto rounded-md">
+          {!isAgentReady && (
+            <div className="w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light">
+              {t(I18nKey.DIFF_VIEWER$WAITING_FOR_RUNTIME)}
+            </div>
+          )}
+
          {isLoading && (
            <div className="flex justify-center items-center py-8">
              <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary" />
@@ -78,6 +97,7 @@ export function MicroagentsModal({
          )}

          {!isLoading &&
+            isAgentReady &&
            (isError || !microagents || microagents.length === 0) && (
              <div className="flex items-center justify-center h-full p-4">
                <p className="text-gray-400">
@@ -88,75 +108,81 @@ export function MicroagentsModal({
              </div>
            )}

-          {!isLoading && microagents && microagents.length > 0 && (
-            <div className="p-2 space-y-3">
-              {microagents.map((agent) => {
-                const isExpanded = expandedAgents[agent.name] || false;
+          {!isLoading &&
+            isAgentReady &&
+            microagents &&
+            microagents.length > 0 && (
+              <div className="p-2 space-y-3">
+                {microagents.map((agent) => {
+                  const isExpanded = expandedAgents[agent.name] || false;

-                return (
-                  <div key={agent.name} className="rounded-md overflow-hidden">
-                    <button
-                      type="button"
-                      onClick={() => toggleAgent(agent.name)}
-                      className="w-full py-3 px-2 text-left flex items-center justify-between hover:bg-gray-700 transition-colors"
+                  return (
+                    <div
+                      key={agent.name}
+                      className="rounded-md overflow-hidden"
                    >
-                      <div className="flex items-center">
-                        <h3 className="font-bold text-gray-100">
-                          {agent.name}
-                        </h3>
-                      </div>
-                      <div className="flex items-center">
-                        <span className="px-2 py-1 text-xs rounded-full bg-gray-800 mr-2">
-                          {agent.type === "repo" ? "Repository" : "Knowledge"}
-                        </span>
-                        <span className="text-gray-300">
-                          {isExpanded ? (
-                            <ChevronDown size={18} />
-                          ) : (
-                            <ChevronRight size={18} />
-                          )}
-                        </span>
-                      </div>
-                    </button>
+                      <button
+                        type="button"
+                        onClick={() => toggleAgent(agent.name)}
+                        className="w-full py-3 px-2 text-left flex items-center justify-between hover:bg-gray-700 transition-colors"
+                      >
+                        <div className="flex items-center">
+                          <h3 className="font-bold text-gray-100">
+                            {agent.name}
+                          </h3>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="px-2 py-1 text-xs rounded-full bg-gray-800 mr-2">
+                            {agent.type === "repo" ? "Repository" : "Knowledge"}
+                          </span>
+                          <span className="text-gray-300">
+                            {isExpanded ? (
+                              <ChevronDown size={18} />
+                            ) : (
+                              <ChevronRight size={18} />
+                            )}
+                          </span>
+                        </div>
+                      </button>

-                    {isExpanded && (
-                      <div className="px-2 pb-3 pt-1">
-                        {agent.triggers && agent.triggers.length > 0 && (
-                          <div className="mt-2 mb-3">
+                      {isExpanded && (
+                        <div className="px-2 pb-3 pt-1">
+                          {agent.triggers && agent.triggers.length > 0 && (
+                            <div className="mt-2 mb-3">
+                              <h4 className="text-sm font-semibold text-gray-300 mb-2">
+                                {t(I18nKey.MICROAGENTS_MODAL$TRIGGERS)}
+                              </h4>
+                              <div className="flex flex-wrap gap-1">
+                                {agent.triggers.map((trigger) => (
+                                  <span
+                                    key={trigger}
+                                    className="px-2 py-1 text-xs rounded-full bg-blue-900"
+                                  >
+                                    {trigger}
+                                  </span>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+
+                          <div className="mt-2">
                            <h4 className="text-sm font-semibold text-gray-300 mb-2">
-                              {t(I18nKey.MICROAGENTS_MODAL$TRIGGERS)}
+                              {t(I18nKey.MICROAGENTS_MODAL$CONTENT)}
                            </h4>
-                            <div className="flex flex-wrap gap-1">
-                              {agent.triggers.map((trigger) => (
-                                <span
-                                  key={trigger}
-                                  className="px-2 py-1 text-xs rounded-full bg-blue-900"
-                                >
-                                  {trigger}
-                                </span>
-                              ))}
+                            <div className="text-sm mt-2 p-3 bg-gray-900 rounded-md overflow-auto text-gray-300 max-h-[400px] shadow-inner">
+                              <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed">
+                                {agent.content ||
+                                  t(I18nKey.MICROAGENTS_MODAL$NO_CONTENT)}
+                              </pre>
                            </div>
                          </div>
-                        )}
-
-                        <div className="mt-2">
-                          <h4 className="text-sm font-semibold text-gray-300 mb-2">
-                            {t(I18nKey.MICROAGENTS_MODAL$CONTENT)}
-                          </h4>
-                          <div className="text-sm mt-2 p-3 bg-gray-900 rounded-md overflow-auto text-gray-300 max-h-[400px] shadow-inner">
-                            <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed">
-                              {agent.content ||
-                                t(I18nKey.MICROAGENTS_MODAL$NO_CONTENT)}
-                            </pre>
-                          </div>
                        </div>
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          )}
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
        </div>
      </ModalBody>
    </ModalBackdrop>
--- a/frontend/src/hooks/query/use-conversation-microagents.ts
+++ b/frontend/src/hooks/query/use-conversation-microagents.ts
@@ -1,12 +1,15 @@
 import { useQuery } from "@tanstack/react-query";
 import OpenHands from "#/api/open-hands";
+import { AgentState } from "#/types/agent-state";

 interface UseConversationMicroagentsOptions {
+  agentState?: AgentState;
  conversationId: string | undefined;
  enabled?: boolean;
 }

 export const useConversationMicroagents = ({
+  agentState,
  conversationId,
  enabled = true,
 }: UseConversationMicroagentsOptions) =>
@@ -19,7 +22,11 @@ export const useConversationMicroagents = ({
      const data = await OpenHands.getMicroagents(conversationId);
      return data.microagents;
    },
-    enabled: !!conversationId && enabled,
+    enabled:
+      !!conversationId &&
+      enabled &&
+      agentState !== AgentState.LOADING &&
+      agentState !== AgentState.INIT,
    staleTime: 1000 * 60 * 5, // 5 minutes
    gcTime: 1000 * 60 * 15, // 15 minutes
  });