Feat: Add RunSheet component #3221 (#8045)

### What problem does this PR solve?

Feat: Add RunSheet component #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/index.tsx

@@ -12,14 +12,19 @@ import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { ReactFlowProvider } from '@xyflow/react';
 import { CodeXml, EllipsisVertical, Forward, Import, Key } from 'lucide-react';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AgentSidebar } from './agent-sidebar';
-import FlowCanvas from './canvas';
+import AgentCanvas from './canvas';
 import { useHandleExportOrImportJsonFile } from './hooks/use-export-json';
 import { useFetchDataOnMount } from './hooks/use-fetch-data';
+import { useGetBeginNodeDataQuery } from './hooks/use-get-begin-query';
 import { useOpenDocument } from './hooks/use-open-document';
-import { useSaveGraph } from './hooks/use-save-graph';
+import {
+  useSaveGraph,
+  useSaveGraphBeforeOpeningDebugDrawer,
+} from './hooks/use-save-graph';
+import { BeginQuery } from './interface';
 import { UploadAgentDialog } from './upload-agent-dialog';
 
 function AgentDropdownMenuItem({
@@ -52,6 +57,18 @@ export default function Agent() {
   const { saveGraph, loading } = useSaveGraph();
 
   const { flowDetail } = useFetchDataOnMount();
+  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+
+  const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
+
+  const handleRunAgent = useCallback(() => {
+    const query: BeginQuery[] = getBeginNodeDataQuery();
+    if (query.length > 0) {
+      showChatDrawer();
+    } else {
+      handleRun();
+    }
+  }, [getBeginNodeDataQuery, handleRun, showChatDrawer]);
 
   return (
     <section>
@@ -64,7 +81,9 @@ export default function Agent() {
           >
             Save
           </ButtonLoading>
-          <Button variant={'outline'}>Run app</Button>
+          <Button variant={'outline'} onClick={handleRunAgent}>
+            Run app
+          </Button>
           <Button variant={'outline'}>Publish</Button>
 
           <DropdownMenu>
@@ -104,10 +123,10 @@ export default function Agent() {
             <div className="w-full">
               <SidebarTrigger />
               <div className="w-full h-full">
-                <FlowCanvas
+                <AgentCanvas
                   drawerVisible={chatDrawerVisible}
                   hideDrawer={hideChatDrawer}
-                ></FlowCanvas>
+                ></AgentCanvas>
               </div>
             </div>
           </SidebarProvider>