Fix: Fixed the issue that variables defined in the begin operator cannot be referenced in the switch operator. #3221 (#8950)

### What problem does this PR solve?

Fix: Fixed the issue that variables defined in the begin operator cannot
be referenced in the switch operator. #3221
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/agent/canvas/index.tsx

@@ -5,7 +5,6 @@ import {
 } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import {
-  Background,
   ConnectionMode,
   ControlButton,
   Controls,
@@ -17,6 +16,7 @@ import { NotebookPen } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChatSheet } from '../chat/chat-sheet';
+import { AgentBackground } from '../components/background';
 import {
   AgentChatContext,
   AgentChatLogContext,
@@ -210,7 +210,7 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
           deleteKeyCode={['Delete', 'Backspace']}
           onBeforeDelete={handleBeforeDelete}
         >
-          <Background />
+          <AgentBackground></AgentBackground>
           <Controls position={'bottom-center'} orientation="horizontal">
             <ControlButton>
               <Tooltip>

web/src/pages/agent/chat/hooks.ts

@@ -25,7 +25,7 @@ import { v4 as uuid } from 'uuid';
 import { BeginId } from '../constant';
 import { AgentChatLogContext } from '../context';
 import { transferInputsArrayToObject } from '../form/begin-form/use-watch-change';
-import { useGetBeginNodeDataQuery } from '../hooks/use-get-begin-query';
+import { useSelectBeginNodeDataInputs } from '../hooks/use-get-begin-query';
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
 import { receiveMessageError } from '../utils';
@@ -146,7 +146,7 @@ export const useSendNextMessage = () => {
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
   const { refetch } = useFetchAgent();
   const { addEventList } = useContext(AgentChatLogContext);
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+  const inputs = useSelectBeginNodeDataInputs();
   const [messageEndEventList, setMessageEndEventList] = useState<
     IMessageEndEvent[]
   >([]);
@@ -167,7 +167,7 @@ export const useSendNextMessage = () => {
         defaultValue: 'is running...🕞',
       });
       if (message.content) {
-        const query = getBeginNodeDataQuery();
+        const query = inputs;
 
         params.query = message.content;
         // params.message_id = message.id;
@@ -185,14 +185,7 @@ export const useSendNextMessage = () => {
         refetch(); // pull the message list after sending the message successfully
       }
     },
-    [
+    [agentId, send, inputs, setValue, removeLatestMessage, refetch],
-      agentId,
-      send,
-      getBeginNodeDataQuery,
-      setValue,
-      removeLatestMessage,
-      refetch,
-    ],
   );
 
   const handleSendMessage = useCallback(

web/src/pages/agent/components/background.tsx

@@ -0,0 +1,7 @@
+import { Background } from '@xyflow/react';
+
+export function AgentBackground() {
+  return (
+    <Background color="rgba(255,255,255,0.15)" bgColor="rgba(22, 22, 24, 1)" />
+  );
+}

web/src/pages/agent/hooks/use-get-begin-query.tsx

@@ -12,6 +12,14 @@ import { buildBeginInputListFromObject } from '../form/begin-form/utils';
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
 
+export function useSelectBeginNodeDataInputs() {
+  const getNode = useGraphStore((state) => state.getNode);
+
+  return buildBeginInputListFromObject(
+    getNode(BeginId)?.data?.form?.inputs ?? {},
+  );
+}
+
 export const useGetBeginNodeDataQuery = () => {
   const getNode = useGraphStore((state) => state.getNode);
 
@@ -39,14 +47,14 @@ export const useGetBeginNodeDataInputs = () => {
 export const useGetBeginNodeDataQueryIsSafe = () => {
   const [isBeginNodeDataQuerySafe, setIsBeginNodeDataQuerySafe] =
     useState(false);
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+  const inputs = useSelectBeginNodeDataInputs();
   const nodes = useGraphStore((state) => state.nodes);
 
   useEffect(() => {
-    const query: BeginQuery[] = getBeginNodeDataQuery();
+    const query: BeginQuery[] = inputs;
     const isSafe = !query.some((q) => !q.optional && q.type === 'file');
     setIsBeginNodeDataQuerySafe(isSafe);
-  }, [getBeginNodeDataQuery, nodes]);
+  }, [inputs, nodes]);
 
   return isBeginNodeDataQuerySafe;
 };
@@ -132,22 +140,21 @@ function transferToVariableType(type: string) {
 }
 
 export function useBuildBeginVariableOptions() {
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+  const inputs = useSelectBeginNodeDataInputs();
 
   const options = useMemo(() => {
-    const query: BeginQuery[] = getBeginNodeDataQuery();
     return [
       {
         label: <span>Begin Input</span>,
         title: 'Begin Input',
-        options: query.map((x) => ({
+        options: inputs.map((x) => ({
           label: x.name,
           value: `begin@${x.key}`,
           type: transferToVariableType(x.type),
         })),
       },
     ];
-  }, [getBeginNodeDataQuery]);
+  }, [inputs]);
 
   return options;
 }

web/src/pages/agent/hooks/use-show-drawer.tsx

@@ -3,10 +3,9 @@ import { Node, NodeMouseHandler } from '@xyflow/react';
 import get from 'lodash/get';
 import { useCallback, useEffect } from 'react';
 import { Operator } from '../constant';
-import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
 import { useCacheChatLog } from './use-cache-chat-log';
-import { useGetBeginNodeDataQuery } from './use-get-begin-query';
+import { useGetBeginNodeDataInputs } from './use-get-begin-query';
 import { useSaveGraph } from './use-save-graph';
 
 export const useShowFormDrawer = () => {
@@ -83,12 +82,11 @@ export function useShowDrawer({
   } = useShowSingleDebugDrawer();
   const { formDrawerVisible, hideFormDrawer, showFormDrawer, clickedNode } =
     useShowFormDrawer();
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+  const inputs = useGetBeginNodeDataInputs();
 
   useEffect(() => {
     if (drawerVisible) {
-      const query: BeginQuery[] = getBeginNodeDataQuery();
+      if (inputs.length > 0) {
-      if (query.length > 0) {
         showRunModal();
         hideChatModal();
       } else {
@@ -102,7 +100,7 @@ export function useShowDrawer({
     showChatModal,
     showRunModal,
     drawerVisible,
-    getBeginNodeDataQuery,
+    inputs,
   ]);
 
   const hideRunOrChatDrawer = useCallback(() => {

web/src/pages/agent/index.tsx

@@ -29,14 +29,13 @@ import AgentCanvas from './canvas';
 import EmbedDialog from './embed-dialog';
 import { useHandleExportOrImportJsonFile } from './hooks/use-export-json';
 import { useFetchDataOnMount } from './hooks/use-fetch-data';
-import { useGetBeginNodeDataQuery } from './hooks/use-get-begin-query';
+import { useGetBeginNodeDataInputs } from './hooks/use-get-begin-query';
 import { useOpenDocument } from './hooks/use-open-document';
 import {
   useSaveGraph,
   useSaveGraphBeforeOpeningDebugDrawer,
 } from './hooks/use-save-graph';
 import { useShowEmbedModal } from './hooks/use-show-dialog';
-import { BeginQuery } from './interface';
 import { UploadAgentDialog } from './upload-agent-dialog';
 import { VersionDialog } from './version-dialog';
 
@@ -70,16 +69,15 @@ export default function Agent() {
   } = useHandleExportOrImportJsonFile();
   const { saveGraph, loading } = useSaveGraph();
   const { flowDetail } = useFetchDataOnMount();
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+  const inputs = useGetBeginNodeDataInputs();
   const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
   const handleRunAgent = useCallback(() => {
-    const query: BeginQuery[] = getBeginNodeDataQuery();
+    if (inputs.length > 0) {
-    if (query.length > 0) {
       showChatDrawer();
     } else {
       handleRun();
     }
-  }, [getBeginNodeDataQuery, handleRun, showChatDrawer]);
+  }, [handleRun, inputs, showChatDrawer]);
   const {
     visible: versionDialogVisible,
     hideModal: hideVersionDialog,

web/src/pages/agent/run-sheet/index.tsx

@@ -10,7 +10,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BeginId } from '../constant';
 import DebugContent from '../debug-content';
-import { useGetBeginNodeDataQuery } from '../hooks/use-get-begin-query';
+import { useGetBeginNodeDataInputs } from '../hooks/use-get-begin-query';
 import { useSaveGraphBeforeOpeningDebugDrawer } from '../hooks/use-save-graph';
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
@@ -23,8 +23,7 @@ const RunSheet = ({
   const { t } = useTranslation();
   const { updateNodeForm, getNode } = useGraphStore((state) => state);
 
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+  const inputs = useGetBeginNodeDataInputs();
-  const query: BeginQuery[] = getBeginNodeDataQuery();
 
   const { handleRun, loading } = useSaveGraphBeforeOpeningDebugDrawer(
     showChatModal!,
@@ -58,7 +57,7 @@ const RunSheet = ({
           <SheetTitle>{t('flow.testRun')}</SheetTitle>
           <DebugContent
             ok={onOk}
-            parameters={query}
+            parameters={inputs}
             loading={loading}
           ></DebugContent>
         </SheetHeader>

web/src/pages/agent/version-dialog/index.tsx

@@ -17,16 +17,12 @@ import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
 import { formatDate } from '@/utils/date';
 import { downloadJsonFile } from '@/utils/file-util';
-import {
+import { ConnectionMode, ReactFlow, ReactFlowProvider } from '@xyflow/react';
-  Background,
-  ConnectionMode,
-  ReactFlow,
-  ReactFlowProvider,
-} from '@xyflow/react';
 import { ArrowDownToLine } from 'lucide-react';
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { nodeTypes } from '../canvas';
+import { AgentBackground } from '../components/background';
 
 export function VersionDialog({
   hideModal,
@@ -123,9 +119,8 @@ export function VersionDialog({
                         zoomOnDoubleClick={false}
                         preventScrolling={true}
                         minZoom={0.1}
-                        className="!bg-background-agent"
                       >
-                        <Background />
+                        <AgentBackground></AgentBackground>
                       </ReactFlow>
                     </ReactFlowProvider>
                   </section>