Feature:Add a loading status to the agent canvas page.

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,
@@ -172,6 +173,8 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
   });
   const [lastSendLoading, setLastSendLoading] = useState(false);
 
+  const [currentSendLoading, setCurrentSendLoading] = useState(false);
+
   const { handleBeforeDelete } = useBeforeDelete();
 
   const { addCanvasNode, addNoteNode } = useAddNode(reactFlowInstance);
@@ -188,6 +191,7 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
   }, [chatVisible, clearEventList, currentTaskId, stopMessage]);
 
   const setLastSendLoadingFunc = (loading: boolean, messageId: string) => {
+    setCurrentSendLoading(!!loading);
     if (messageId === currentMessageId) {
       setLastSendLoading(loading);
     } else {
@@ -255,7 +259,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
@@ -291,7 +298,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}
@@ -386,9 +401,10 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
           ></FormSheet>
         </AgentInstanceContext.Provider>
       )}
+
       {chatVisible && (
         <AgentChatContext.Provider
-          value={{ showLogSheet, setLastSendLoadingFunc }}
+          value={{ showLogSheet, setLastSendLoadingFunc, setDerivedMessages }}
         >
           <AgentChatLogContext.Provider
             value={{ addEventList, setCurrentMessageId }}

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>

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}

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>

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>

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}

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"

web/src/pages/agent/canvas/node/message-node.tsx

@@ -14,7 +14,7 @@ function InnerMessageNode({ id, data, selected }: NodeProps<IMessageNode>) {
   const messages: string[] = get(data, 'form.messages', []);
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper selected={selected}>
+      <NodeWrapper selected={selected} id={id}>
         <LeftEndHandle></LeftEndHandle>
         {/* <CommonHandle
           type="source"

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>
   );

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"

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}

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"

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">

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"

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"

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']> =

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,

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}
       >

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,
+  };
+};

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>