chore: single run to base panel

web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx

@@ -24,7 +24,7 @@ import SpecialResultPanel from '@/app/components/workflow/run/special-result-pan
 
 const i18nPrefix = 'workflow.singleRun'
 
-type BeforeRunFormProps = {
+export type BeforeRunFormProps = {
   nodeName: string
   nodeType?: BlockEnum
   toolIcon?: string | Emoji
@@ -139,7 +139,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
     onRun(submitData)
   }, [forms, onRun, t])
   return (
-    <div className='absolute inset-0 z-10 rounded-2xl bg-background-overlay-alt pt-10'>
+    <div className='absolute inset-0 z-10 rounded-2xl bg-background-overlay-alt'>
       <div className='flex h-full flex-col rounded-2xl bg-components-panel-bg'>
         <div className='flex h-8 shrink-0 items-center justify-between pl-4 pr-3 pt-3'>
           <div className='truncate text-base font-semibold text-text-primary'>

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -6,6 +6,7 @@ import {
   cloneElement,
   memo,
   useCallback,
+  useRef,
   useState,
 } from 'react'
 import {
@@ -49,6 +50,9 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { useStore } from '@/app/components/workflow/store'
 import Tab, { TabType } from './tab'
 import LastRun from './last-run'
+import useOneStepRun from '../../hooks/use-one-step-run'
+import type { PanelExposedType } from '@/types/workflow'
+import BeforeRunForm from '../before-run-form'
 
 type BasePanelProps = {
   children: ReactNode
@@ -105,8 +109,30 @@ const BasePanel: FC<BasePanelProps> = ({
     saveStateToHistory(WorkflowHistoryEvent.NodeDescriptionChange)
   }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory])
 
+  const isSupportSingleRun = canRunBySingle(data.type)
+  const {
+    isShowSingleRun,
+    showSingleRun,
+    hideSingleRun,
+    toVarInputs,
+    runningStatus,
+    handleRun,
+    handleStop,
+    runInputData,
+    setRunInputData,
+    runResult,
+    getInputVars,
+  } = useOneStepRun<typeof data>({
+    id,
+    data,
+    defaultRunInputData: {},
+  })
+  const childPanelRef = useRef<PanelExposedType>(null)
+  const [singleRunParams, setSingleRunParams] = useState<PanelExposedType['singleRunParams'] | undefined>(undefined)
+
   const [tabType, setTabType] = useState<TabType>(TabType.settings)
   const hasLastRunData = true // TODO: add disabled logic
+
   return (
     <div className={cn(
       'relative mr-2 h-full',
@@ -138,7 +164,7 @@ const BasePanel: FC<BasePanelProps> = ({
             />
             <div className='flex shrink-0 items-center text-text-tertiary'>
               {
-                canRunBySingle(data.type) && !nodesReadOnly && (
+                isSupportSingleRun && !nodesReadOnly && (
                   <Tooltip
                     popupContent={t('workflow.panel.runThisStep')}
                     popupClassName='mr-1'
@@ -146,7 +172,13 @@ const BasePanel: FC<BasePanelProps> = ({
                     <div
                       className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
                       onClick={() => {
-                        handleNodeDataUpdate({ id, data: { _isSingleRun: true } })
+                        if (!childPanelRef.current?.singleRunParams) {
+                          // handleNodeDataUpdate({ id, data: { _isSingleRun: true } })
+                          console.error('childPanelRef is not set')
+                          return
+                        }
+                        setSingleRunParams(childPanelRef.current?.singleRunParams)
+                        showSingleRun()
                         handleSyncWorkflowDraft(true)
                       }}
                     >
@@ -185,7 +217,7 @@ const BasePanel: FC<BasePanelProps> = ({
         {tabType === TabType.settings && (
           <>
             <div>
-              {cloneElement(children as any, { id, data })}
+              {cloneElement(children as any, { id, data, ref: childPanelRef })}
             </div>
             <Split />
             {
@@ -223,6 +255,21 @@ const BasePanel: FC<BasePanelProps> = ({
         {tabType === TabType.lastRun && (
           <LastRun appId={id} />
         )}
+
+        {
+          isShowSingleRun && (
+            <BeforeRunForm
+              nodeName={data.title}
+              nodeType={data.type}
+              onHide={hideSingleRun}
+              runningStatus={runningStatus}
+              onRun={handleRun}
+              onStop={handleStop}
+              {...singleRunParams!}
+              result={<div>xxx</div>}
+            />
+          )
+        }
       </div>
     </div>
   )

web/app/components/workflow/nodes/agent/panel.tsx

@@ -1,5 +1,4 @@
-import type { FC } from 'react'
-import { memo, useMemo } from 'react'
+import { forwardRef, memo, useImperativeHandle, useMemo } from 'react'
 import type { NodePanelProps } from '../../types'
 import { AgentFeature, type AgentNodeType } from './types'
 import Field from '../_base/components/field'
@@ -9,8 +8,6 @@ import { useTranslation } from 'react-i18next'
 import OutputVars, { VarItem } from '../_base/components/output-vars'
 import type { StrategyParamItem } from '@/app/components/plugins/types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
-import ResultPanel from '@/app/components/workflow/run/result-panel'
 import formatTracing from '@/app/components/workflow/run/utils/format-log'
 import { useLogs } from '@/app/components/workflow/run/hooks'
 import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
@@ -18,7 +15,7 @@ import { toType } from '@/app/components/tools/utils/to-form-schema'
 import { useStore } from '../../store'
 import Split from '../_base/components/split'
 import MemoryConfig from '../_base/components/memory-config'
-
+import type { PanelExposedType } from '@/types/workflow'
 const i18nPrefix = 'workflow.nodes.agent'
 
 export function strategyParamToCredientialForm(param: StrategyParamItem): CredentialFormSchema {
@@ -30,7 +27,7 @@ export function strategyParamToCredientialForm(param: StrategyParamItem): Creden
   }
 }
 
-const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
+const AgentPanel = forwardRef<PanelExposedType, NodePanelProps<AgentNodeType>>((props, ref) => {
   const {
     inputs,
     setInputs,
@@ -41,11 +38,6 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
     availableNodesWithParent,
     availableVars,
     readOnly,
-    isShowSingleRun,
-    hideSingleRun,
-    runningStatus,
-    handleRun,
-    handleStop,
     runResult,
     runInputData,
     setRunInputData,
@@ -79,6 +71,13 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
 
   const resetEditor = useStore(s => s.setControlPromptEditorRerenderKey)
 
+  useImperativeHandle(ref, () => ({
+    singleRunParams: {
+      forms: singleRunForms,
+      logsParams,
+    },
+  }))
+
   return <div className='my-2'>
     <Field title={t('workflow.nodes.agent.strategy.label')} className='px-4 py-2' tooltip={t('workflow.nodes.agent.strategy.tooltip')} >
       <AgentStrategy
@@ -150,23 +149,8 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
         ))}
       </OutputVars>
     </div>
-    {
-      isShowSingleRun && (
-        <BeforeRunForm
-          nodeName={inputs.title}
-          nodeType={inputs.type}
-          onHide={hideSingleRun}
-          forms={singleRunForms}
-          runningStatus={runningStatus}
-          onRun={handleRun}
-          onStop={handleStop}
-          {...logsParams}
-          result={<ResultPanel {...runResult} nodeInfo={nodeInfo} showSteps={false} {...logsParams} />}
-        />
-      )
-    }
   </div>
-}
+})
 
 AgentPanel.displayName = 'AgentPanel'
 

web/types/workflow.ts

@@ -2,6 +2,8 @@ import type { Viewport } from 'reactflow'
 import type { BlockEnum, ConversationVariable, Edge, EnvironmentVariable, Node } from '@/app/components/workflow/types'
 import type { TransferMethod } from '@/types/app'
 import type { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
+import type { BeforeRunFormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form'
+import type { SpecialResultPanelProps } from '@/app/components/workflow/run/special-result-panel'
 
 export type AgentLogItem = {
   node_execution_id: string,
@@ -351,3 +353,7 @@ export type UpdateWorkflowParams = {
   title: string
   releaseNotes: string
 }
+
+export type PanelExposedType = {
+  singleRunParams: Pick<BeforeRunFormProps, 'forms'> & Partial<SpecialResultPanelProps>
+}