Feature：Add a loading status to the agent canvas page. (#11733)

### What problem does this PR solve? Feature：Add a loading status to the agent canvas page. ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-06 07:19:03 +08:00 · 2025-12-04 13:40:49 +08:00
parent fa7b857aa9
commit 751a13fb64
22 changed files with 244 additions and 71 deletions
--- a/web/src/components/json-edit/index.tsx
+++ b/web/src/components/json-edit/index.tsx
@@ -1,8 +1,9 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import './css/cloud9_night.less';
 import './css/index.less';
 import { JsonEditorOptions, JsonEditorProps } from './interface';
+
 const defaultConfig: JsonEditorOptions = {
  mode: 'code',
  modes: ['tree', 'code'],
@@ -14,6 +15,7 @@ const defaultConfig: JsonEditorOptions = {
  enableTransform: false,
  indentation: 2,
 };
+
 const JsonEditor: React.FC<JsonEditorProps> = ({
  value,
  onChange,
@@ -25,43 +27,62 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
  const editorRef = useRef<any>(null);
  const { i18n } = useTranslation();
  const currentLanguageRef = useRef<string>(i18n.language);
+  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const JSONEditor = require('jsoneditor');
-      import('jsoneditor/dist/jsoneditor.min.css');
+    let isMounted = true;

-      if (containerRef.current) {
-        // Default configuration options
-        const defaultOptions: JsonEditorOptions = {
-          ...defaultConfig,
-          language: i18n.language === 'zh' ? 'zh-CN' : 'en',
-          onChange: () => {
-            if (editorRef.current && onChange) {
-              try {
-                const updatedJson = editorRef.current.get();
-                onChange(updatedJson);
-              } catch (err) {
-                // Do not trigger onChange when parsing error occurs
-                console.error(err);
-              }
+    const initEditor = async () => {
+      if (typeof window !== 'undefined') {
+        try {
+          const JSONEditorModule = await import('jsoneditor');
+          const JSONEditor = JSONEditorModule.default || JSONEditorModule;
+
+          await import('jsoneditor/dist/jsoneditor.min.css');
+
+          if (isMounted && containerRef.current) {
+            // Default configuration options
+            const defaultOptions: JsonEditorOptions = {
+              ...defaultConfig,
+              language: i18n.language === 'zh' ? 'zh-CN' : 'en',
+              onChange: () => {
+                if (editorRef.current && onChange) {
+                  try {
+                    const updatedJson = editorRef.current.get();
+                    onChange(updatedJson);
+                  } catch (err) {
+                    // Do not trigger onChange when parsing error occurs
+                    console.error(err);
+                  }
+                }
+              },
+              ...options, // Merge user provided options with defaults
+            };
+
+            editorRef.current = new JSONEditor(
+              containerRef.current,
+              defaultOptions,
+            );
+
+            if (value) {
+              editorRef.current.set(value);
            }
-          },
-          ...options, // Merge user provided options with defaults
-        };

-        editorRef.current = new JSONEditor(
-          containerRef.current,
-          defaultOptions,
-        );
-
-        if (value) {
-          editorRef.current.set(value);
+            setIsLoading(false);
+          }
+        } catch (error) {
+          console.error('Failed to load jsoneditor:', error);
+          if (isMounted) {
+            setIsLoading(false);
+          }
        }
      }
-    }
+    };
+
+    initEditor();

    return () => {
+      isMounted = false;
      if (editorRef.current) {
        if (typeof editorRef.current.destroy === 'function') {
          editorRef.current.destroy();
@@ -92,26 +113,38 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
      }

      // Recreate the editor with new language
-      const JSONEditor = require('jsoneditor');
+      const initEditorWithNewLanguage = async () => {
+        try {
+          const JSONEditorModule = await import('jsoneditor');
+          const JSONEditor = JSONEditorModule.default || JSONEditorModule;

-      const newOptions: JsonEditorOptions = {
-        ...defaultConfig,
-        language: i18n.language === 'zh' ? 'zh-CN' : 'en',
-        onChange: () => {
-          if (editorRef.current && onChange) {
-            try {
-              const updatedJson = editorRef.current.get();
-              onChange(updatedJson);
-            } catch (err) {
-              // Do not trigger onChange when parsing error occurs
-            }
-          }
-        },
-        ...options, // Merge user provided options with defaults
+          const newOptions: JsonEditorOptions = {
+            ...defaultConfig,
+            language: i18n.language === 'zh' ? 'zh-CN' : 'en',
+            onChange: () => {
+              if (editorRef.current && onChange) {
+                try {
+                  const updatedJson = editorRef.current.get();
+                  onChange(updatedJson);
+                } catch (err) {
+                  // Do not trigger onChange when parsing error occurs
+                }
+              }
+            },
+            ...options, // Merge user provided options with defaults
+          };
+
+          editorRef.current = new JSONEditor(containerRef.current, newOptions);
+          editorRef.current.set(currentData);
+        } catch (error) {
+          console.error(
+            'Failed to reload jsoneditor with new language:',
+            error,
+          );
+        }
      };

-      editorRef.current = new JSONEditor(containerRef.current, newOptions);
-      editorRef.current.set(currentData);
+      initEditorWithNewLanguage();
    }
  }, [i18n.language, value, onChange, options]);

@@ -135,7 +168,13 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
      ref={containerRef}
      style={{ height }}
      className={`ace-tomorrow-night w-full border border-border-button rounded-lg overflow-hidden bg-bg-input ${className} `}
-    />
+    >
+      {isLoading && (
+        <div className="flex items-center justify-center h-full">
+          <div className="text-text-secondary">Loading editor...</div>
+        </div>
+      )}
+    </div>
  );
 };

--- a/web/src/custom.d.ts
+++ b/web/src/custom.d.ts
@@ -2,3 +2,9 @@ declare module '*.md' {
  const content: string;
  export default content;
 }
+
+declare module 'jsoneditor' {
+  const JSONEditor: any;
+  export default JSONEditor;
+  export = JSONEditor;
+}
--- a/web/src/pages/agent/canvas/index.tsx
+++ b/web/src/pages/agent/canvas/index.tsx
@@ -40,6 +40,7 @@ import { useDropdownManager } from './context';

 import { AgentBackground } from '@/components/canvas/background';
 import Spotlight from '@/components/spotlight';
+import { useNodeLoading } from '../hooks/use-node-loading';
 import {
  useHideFormSheetOnNodeDeletion,
  useShowDrawer,
@@ -166,6 +167,8 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
  });
  const [lastSendLoading, setLastSendLoading] = useState(false);

+  const [currentSendLoading, setCurrentSendLoading] = useState(false);
+
  const { handleBeforeDelete } = useBeforeDelete();

  const { addCanvasNode, addNoteNode } = useAddNode(reactFlowInstance);
@@ -182,6 +185,7 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
  }, [chatVisible, clearEventList, currentTaskId, stopMessage]);

  const setLastSendLoadingFunc = (loading: boolean, messageId: string) => {
+    setCurrentSendLoading(!!loading);
    if (messageId === currentMessageId) {
      setLastSendLoading(loading);
    } else {
@@ -249,7 +253,10 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
    clearActiveDropdown,
    removePlaceholderNode,
  ]);
-
+  const { lastNode, setDerivedMessages, startButNotFinishedNodeIds } =
+    useNodeLoading({
+      currentEventListWithoutMessageById,
+    });
  return (
    <div className={cn(styles.canvasWrapper, 'px-5 pb-5')}>
      <svg
@@ -285,7 +292,15 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
          </marker>
        </defs>
      </svg>
-      <AgentInstanceContext.Provider value={{ addCanvasNode, showFormDrawer }}>
+      <AgentInstanceContext.Provider
+        value={{
+          addCanvasNode,
+          showFormDrawer,
+          lastNode,
+          currentSendLoading,
+          startButNotFinishedNodeIds,
+        }}
+      >
        <ReactFlow
          connectionMode={ConnectionMode.Loose}
          nodes={nodes}
@@ -380,9 +395,10 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
          ></FormSheet>
        </AgentInstanceContext.Provider>
      )}
+
      {chatVisible && (
        <AgentChatContext.Provider
-          value={{ showLogSheet, setLastSendLoadingFunc }}
+          value={{ showLogSheet, setLastSendLoadingFunc, setDerivedMessages }}
        >
          <AgentChatLogContext.Provider
            value={{ addEventList, setCurrentMessageId }}
--- a/web/src/pages/agent/canvas/node/agent-node.tsx
+++ b/web/src/pages/agent/canvas/node/agent-node.tsx
@@ -44,7 +44,7 @@ function InnerAgentNode({

  return (
    <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper selected={selected}>
+      <NodeWrapper selected={selected} id={id}>
        {isHeadAgent && (
          <>
            <LeftEndHandle></LeftEndHandle>
--- a/web/src/pages/agent/canvas/node/begin-node.tsx
+++ b/web/src/pages/agent/canvas/node/begin-node.tsx
@@ -24,7 +24,7 @@ function InnerBeginNode({ data, id, selected }: NodeProps<IBeginNode>) {
  const inputs: Record<string, BeginQuery> = get(data, 'form.inputs', {});

  return (
-    <NodeWrapper selected={selected}>
+    <NodeWrapper selected={selected} id={id}>
      <CommonHandle
        type="source"
        position={Position.Right}
--- a/web/src/pages/agent/canvas/node/categorize-node.tsx
+++ b/web/src/pages/agent/canvas/node/categorize-node.tsx
@@ -18,7 +18,7 @@ export function InnerCategorizeNode({
  const { positions } = useBuildCategorizeHandlePositions({ data, id });
  return (
    <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper selected={selected}>
+      <NodeWrapper selected={selected} id={id}>
        <LeftEndHandle></LeftEndHandle>

        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
--- a/web/src/pages/agent/canvas/node/exit-loop-node.tsx
+++ b/web/src/pages/agent/canvas/node/exit-loop-node.tsx
@@ -14,7 +14,7 @@ export function ExitLoopNode({ id, data, selected }: NodeProps<BaseNode<any>>) {
      showRun={false}
      showCopy={false}
    >
-      <NodeWrapper selected={selected}>
+      <NodeWrapper selected={selected} id={id}>
        <LeftEndHandle></LeftEndHandle>
        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
      </NodeWrapper>
--- a/web/src/pages/agent/canvas/node/file-node.tsx
+++ b/web/src/pages/agent/canvas/node/file-node.tsx
@@ -23,7 +23,7 @@ function InnerFileNode({ data, id, selected }: NodeProps<IBeginNode>) {
  const inputs: Record<string, BeginQuery> = get(data, 'form.inputs', {});

  return (
-    <NodeWrapper selected={selected}>
+    <NodeWrapper selected={selected} id={id}>
      <CommonHandle
        type="source"
        position={Position.Right}
--- a/web/src/pages/agent/canvas/node/index.tsx
+++ b/web/src/pages/agent/canvas/node/index.tsx
@@ -26,7 +26,7 @@ function InnerRagNode({
      showRun={needsSingleStepDebugging(data.label)}
      showCopy={showCopyIcon(data.label)}
    >
-      <NodeWrapper selected={selected}>
+      <NodeWrapper selected={selected} id={id}>
        <LeftEndHandle></LeftEndHandle>
        <CommonHandle
          type="source"
--- a/web/src/pages/agent/canvas/node/message-node.tsx
+++ b/web/src/pages/agent/canvas/node/message-node.tsx
@@ -16,7 +16,7 @@ function InnerMessageNode({ id, data, selected }: NodeProps<IMessageNode>) {
  const messages: string[] = get(data, 'form.content', []);
  return (
    <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper selected={selected}>
+      <NodeWrapper selected={selected} id={id}>
        <LeftEndHandle></LeftEndHandle>
        <NodeHeader
          id={id}
--- a/web/src/pages/agent/canvas/node/node-wrapper.tsx
+++ b/web/src/pages/agent/canvas/node/node-wrapper.tsx
@@ -1,9 +1,13 @@
 import { cn } from '@/lib/utils';
-import { HTMLAttributes } from 'react';
+import { Loader } from 'lucide-react';
+import { HTMLAttributes, useContext } from 'react';
+import { AgentInstanceContext } from '../../context';

 type IProps = HTMLAttributes<HTMLDivElement> & { selected?: boolean };

-export function NodeWrapper({ children, className, selected }: IProps) {
+export function NodeWrapper({ children, className, selected, id }: IProps) {
+  const { currentSendLoading, startButNotFinishedNodeIds = [] } =
+    useContext(AgentInstanceContext);
  return (
    <section
      className={cn(
@@ -12,6 +16,13 @@ export function NodeWrapper({ children, className, selected }: IProps) {
        className,
      )}
    >
+      {id &&
+        startButNotFinishedNodeIds.indexOf(id as string) > -1 &&
+        currentSendLoading && (
+          <div className=" absolute right-0 left-0 top-0 flex items-start justify-end p-2">
+            <Loader size={12} className=" animate-spin" />
+          </div>
+        )}
      {children}
    </section>
  );
--- a/web/src/pages/agent/canvas/node/parser-node.tsx
+++ b/web/src/pages/agent/canvas/node/parser-node.tsx
@@ -19,7 +19,7 @@ function ParserNode({
 }: NodeProps<BaseNode<ParserFormSchemaType>>) {
  const { t } = useTranslation();
  return (
-    <NodeWrapper selected={selected}>
+    <NodeWrapper selected={selected} id={id}>
      <CommonHandle
        id={NodeHandleId.End}
        type="target"
--- a/web/src/pages/agent/canvas/node/retrieval-node.tsx
+++ b/web/src/pages/agent/canvas/node/retrieval-node.tsx
@@ -27,7 +27,7 @@ function InnerRetrievalNode({

  return (
    <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper selected={selected}>
+      <NodeWrapper selected={selected} id={id}>
        <LeftEndHandle></LeftEndHandle>
        <CommonHandle
          id={NodeHandleId.Start}
--- a/web/src/pages/agent/canvas/node/splitter-node.tsx
+++ b/web/src/pages/agent/canvas/node/splitter-node.tsx
@@ -25,7 +25,7 @@ function InnerSplitterNode({
      showCopy={false}
      showRun={false}
    >
-      <NodeWrapper selected={selected}>
+      <NodeWrapper selected={selected} id={id}>
        <CommonHandle
          id={NodeHandleId.End}
          type="target"
--- a/web/src/pages/agent/canvas/node/switch-node.tsx
+++ b/web/src/pages/agent/canvas/node/switch-node.tsx
@@ -65,7 +65,7 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
  const { positions } = useBuildSwitchHandlePositions({ data, id });
  return (
    <ToolBar selected={selected} id={id} label={data.label} showRun={false}>
-      <NodeWrapper selected={selected}>
+      <NodeWrapper selected={selected} id={id}>
        <LeftEndHandle></LeftEndHandle>
        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
        <section className="gap-2.5 flex flex-col">
--- a/web/src/pages/agent/canvas/node/tokenizer-node.tsx
+++ b/web/src/pages/agent/canvas/node/tokenizer-node.tsx
@@ -27,7 +27,7 @@ function TokenizerNode({
      showRun={false}
      showCopy={false}
    >
-      <NodeWrapper selected={selected}>
+      <NodeWrapper selected={selected} id={id}>
        <CommonHandle
          id={NodeHandleId.End}
          type="target"
--- a/web/src/pages/agent/canvas/node/tool-node.tsx
+++ b/web/src/pages/agent/canvas/node/tool-node.tsx
@@ -44,7 +44,7 @@ function InnerToolNode({
  );

  return (
-    <NodeWrapper selected={selected}>
+    <NodeWrapper selected={selected} id={id}>
      <Handle
        id={NodeHandleId.End}
        type="target"
--- a/web/src/pages/agent/chat/box.tsx
+++ b/web/src/pages/agent/chat/box.tsx
@@ -13,8 +13,9 @@ import {
 } from '@/hooks/use-agent-request';
 import { useFetchUserInfo } from '@/hooks/use-user-setting-request';
 import { buildMessageUuidWithRole } from '@/utils/chat';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useContext } from 'react';
 import { useParams } from 'umi';
+import { AgentChatContext } from '../context';
 import DebugContent from '../debug-content';
 import { useAwaitCompentData } from '../hooks/use-chat-logic';
 import { useIsTaskMode } from '../hooks/use-get-begin-query';
@@ -49,6 +50,9 @@ function AgentChatBox() {
    canvasId: canvasId as string,
  });

+  const { setDerivedMessages } = useContext(AgentChatContext);
+  setDerivedMessages?.(derivedMessages);
+
  const isTaskMode = useIsTaskMode();

  const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
--- a/web/src/pages/agent/context.ts
+++ b/web/src/pages/agent/context.ts
@@ -1,6 +1,8 @@
+import { INodeEvent } from '@/hooks/use-send-message';
+import { IMessage } from '@/interfaces/database/chat';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { HandleType, Position } from '@xyflow/react';
-import { createContext } from 'react';
+import { Dispatch, SetStateAction, createContext } from 'react';
 import { useAddNode } from './hooks/use-add-node';
 import { useCacheChatLog } from './hooks/use-cache-chat-log';
 import { useShowFormDrawer, useShowLogSheet } from './hooks/use-show-drawer';
@@ -13,7 +15,11 @@ type AgentInstanceContextType = Pick<
  ReturnType<typeof useAddNode>,
  'addCanvasNode'
 > &
-  Pick<ReturnType<typeof useShowFormDrawer>, 'showFormDrawer'>;
+  Pick<ReturnType<typeof useShowFormDrawer>, 'showFormDrawer'> & {
+    lastNode: INodeEvent | null;
+    currentSendLoading: boolean;
+    startButNotFinishedNodeIds: string[];
+  };

 export const AgentInstanceContext = createContext<AgentInstanceContextType>(
  {} as AgentInstanceContextType,
@@ -22,7 +28,10 @@ export const AgentInstanceContext = createContext<AgentInstanceContextType>(
 type AgentChatContextType = Pick<
  ReturnType<typeof useShowLogSheet>,
  'showLogSheet'
-> & { setLastSendLoadingFunc: (loading: boolean, messageId: string) => void };
+> & {
+  setLastSendLoadingFunc: (loading: boolean, messageId: string) => void;
+  setDerivedMessages: Dispatch<SetStateAction<IMessage[] | undefined>>;
+};

 export const AgentChatContext = createContext<AgentChatContextType>(
  {} as AgentChatContextType,
--- a/web/src/pages/agent/form-sheet/next.tsx
+++ b/web/src/pages/agent/form-sheet/next.tsx
@@ -55,7 +55,7 @@ const FormSheet = ({
    <Sheet open={visible} modal={false}>
      <SheetContent
        className={cn('top-20 p-0 flex flex-col pb-20', {
-          'right-[620px]': chatVisible,
+          'right-[clamp(0px,34%,620px)]': chatVisible,
        })}
        closeIcon={false}
      >
--- a/web/src/pages/agent/hooks/use-node-loading.ts
+++ b/web/src/pages/agent/hooks/use-node-loading.ts
@@ -0,0 +1,88 @@
+import {
+  INodeData,
+  INodeEvent,
+  MessageEventType,
+} from '@/hooks/use-send-message';
+import { IMessage } from '@/interfaces/database/chat';
+import { useCallback, useMemo, useState } from 'react';
+
+export const useNodeLoading = ({
+  currentEventListWithoutMessageById,
+}: {
+  currentEventListWithoutMessageById: (messageId: string) => INodeEvent[];
+}) => {
+  const [derivedMessages, setDerivedMessages] = useState<IMessage[]>();
+
+  const lastMessageId = useMemo(() => {
+    return derivedMessages?.[derivedMessages?.length - 1]?.id;
+  }, [derivedMessages]);
+
+  const currentEventListWithoutMessage = useMemo(() => {
+    if (!lastMessageId) {
+      return [];
+    }
+    return currentEventListWithoutMessageById(lastMessageId);
+  }, [currentEventListWithoutMessageById, lastMessageId]);
+
+  const startedNodeList = useMemo(() => {
+    const duplicateList = currentEventListWithoutMessage?.filter(
+      (x) => x.event === MessageEventType.NodeStarted,
+    ) as INodeEvent[];
+
+    // Remove duplicate nodes
+    return duplicateList?.reduce<Array<INodeEvent>>((pre, cur) => {
+      if (pre.every((x) => x.data.component_id !== cur.data.component_id)) {
+        pre.push(cur);
+      }
+      return pre;
+    }, []);
+  }, [currentEventListWithoutMessage]);
+
+  const filterFinishedNodeList = useCallback(() => {
+    const nodeEventList = currentEventListWithoutMessage
+      .filter(
+        (x) => x.event === MessageEventType.NodeFinished,
+        // x.event === MessageEventType.NodeFinished &&
+        // (x.data as INodeData)?.component_id === componentId,
+      )
+      .map((x) => x.data);
+
+    return nodeEventList;
+  }, [currentEventListWithoutMessage]);
+
+  const lastNode = useMemo(() => {
+    if (!startedNodeList) {
+      return null;
+    }
+    return startedNodeList[startedNodeList.length - 1];
+  }, [startedNodeList]);
+
+  const startNodeIds = useMemo(() => {
+    if (!startedNodeList) {
+      return [];
+    }
+    return startedNodeList.map((x) => x.data.component_id);
+  }, [startedNodeList]);
+
+  const finishNodeIds = useMemo(() => {
+    if (!lastNode) {
+      return [];
+    }
+    const nodeDataList = filterFinishedNodeList();
+    const finishNodeIdsTemp = nodeDataList.map(
+      (x: INodeData) => x.component_id,
+    );
+    return Array.from(new Set(finishNodeIdsTemp));
+  }, [lastNode, filterFinishedNodeList]);
+
+  const startButNotFinishedNodeIds = useMemo(() => {
+    return startNodeIds.filter((x) => !finishNodeIds.includes(x));
+  }, [finishNodeIds, startNodeIds]);
+
+  return {
+    lastNode,
+    startButNotFinishedNodeIds,
+    filterFinishedNodeList,
+    setDerivedMessages,
+  };
+};
--- a/web/src/pages/agent/log-sheet/index.tsx
+++ b/web/src/pages/agent/log-sheet/index.tsx
@@ -26,7 +26,7 @@ export function LogSheet({
  return (
    <Sheet open onOpenChange={hideModal} modal={false}>
      <SheetContent
-        className={cn('top-20 right-[620px]')}
+        className={cn('top-20 right-[clamp(0px,34%,620px)]')}
        onInteractOutside={(e) => e.preventDefault()}
      >
        <SheetHeader>