feat: single run modal

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

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { InputVar } from '../../../../types'
+
+export type Props = {
+  inputs: InputVar[]
+}
+
+const Form: FC<Props> = () => {
+  return (
+    <div>
+    </div>
+  )
+}
+export default React.memo(Form)

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

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import type { Props } from './form'
+import Form from './form'
+import Button from '@/app/components/base/button'
+import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
+import { Loading02, XClose } from '@/app/components/base/icons/src/vender/line/general'
+
+const i18nPrefix = 'workflow.singleRun'
+
+type BeforeRunFormProps = Props & {
+  nodeName: string
+  onHide: () => void
+  onRun: () => void
+  onStop: () => void
+  runningStatus: string // todo: wait for enum
+  result?: JSX.Element
+}
+const BeforeRunForm: FC<BeforeRunFormProps> = ({
+  nodeName,
+  onHide,
+  onRun,
+  onStop,
+  runningStatus,
+  result,
+  ...formProps
+}) => {
+  const { t } = useTranslation()
+
+  const isFinished = runningStatus === 'finished'
+  const isRunning = runningStatus === 'running'
+  return (
+    <div className='absolute inset-0 z-10 rounded-2xl pt-10' style={{
+      backgroundColor: 'rgba(16, 24, 40, 0.20)',
+    }}>
+      <div className='h-full rounded-2xl bg-white'>
+        <div className='flex justify-between items-center h-8 pl-4 pr-3 pt-3'>
+          <div className='text-base font-semibold text-gray-900 truncate'>
+            {t(`${i18nPrefix}.testRun`)} {nodeName}
+          </div>
+          <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
+            <XClose className='w-4 h-4 text-gray-500 ' />
+          </div>
+        </div>
+
+        <div className='px-4'>
+          <Form {...formProps} />
+        </div>
+
+        <div className='mt-4 flex justify-between space-x-2 px-4' >
+          {isRunning && (
+            <div
+              className='p-2 rounded-lg border border-gray-200 bg-white shadow-xs cursor-pointer'
+              onClick={onStop}
+            >
+              <StopCircle className='w-4 h-4 text-gray-500' />
+            </div>
+          )}
+          <Button disabled={isRunning} type='primary' className='w-0 grow !h-8 flex items-center space-x-2' onClick={onRun}>
+            {isRunning && <Loading02 className='animate-spin w-4 h-4 text-white' />}
+            <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
+          </Button>
+        </div>
+
+        {isFinished && (
+          <div className='px-4'>
+            {result}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(BeforeRunForm)

web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts

+import { useState } from 'react'
+import { useWorkflow } from '@/app/components/workflow/hooks'
+import type { CommonNodeType, InputVar, Variable } from '@/app/components/workflow/types'
+import { InputVarType } from '@/app/components/workflow/types'
+
+type Params<T> = {
+  id: string
+  data: CommonNodeType<T>
+}
+
+const useOneStepRun = <T>({ id, data }: Params<T>) => {
+  const { handleNodeDataUpdate } = useWorkflow()
+  const isShowSingleRun = data._isSingleRun
+  const hideSingleRun = () => {
+    handleNodeDataUpdate({
+      id,
+      data: {
+        ...data,
+        _isSingleRun: false,
+      },
+    })
+  }
+
+  const [runningStatus, setRunningStatus] = useState('un started')
+
+  const toVarInputs = (variables: Variable[]): InputVar[] => {
+    if (!variables)
+      return []
+
+    const varInputs = variables.map((item) => {
+      return {
+        label: item.variable,
+        variable: item.variable,
+        type: InputVarType.textInput, // TODO: dynamic get var type
+        required: true, // TODO
+        options: [], // TODO
+      }
+    })
+
+    return varInputs
+  }
+
+  return {
+    isShowSingleRun,
+    hideSingleRun,
+    toVarInputs,
+    runningStatus,
+    setRunningStatus,
+  }
+}
+
+export default useOneStepRun

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

@@ -15,6 +15,7 @@ import ModelParameterModal from '@/app/components/header/account-setting/model-p
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import { Resolution } from '@/types/app'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
 
 const i18nPrefix = 'workflow.nodes.llm'
 
@@ -38,6 +39,12 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
     handlePromptChange,
     handleMemoryChange,
     handleVisionResolutionChange,
+    isShowSingleRun,
+    hideSingleRun,
+    runningStatus,
+    handleRun,
+    handleStop,
+    varInputs,
   } = useConfig(id, data)
 
   const isChatApp = true // TODO: get from app context
@@ -148,6 +155,17 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
           </>
         </OutputVars>
       </div>
+      {isShowSingleRun && (
+        <BeforeRunForm
+          nodeName={inputs.title}
+          onHide={hideSingleRun}
+          inputs={varInputs}
+          runningStatus={runningStatus}
+          onRun={handleRun}
+          onStop={handleStop}
+        />
+      )}
+
     </div>
   )
 }

web/app/components/workflow/nodes/llm/use-config.ts

@@ -7,6 +7,7 @@ import { Resolution } from '@/types/app'
 import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
 import type { PromptItem } from '@/models/debug'
 
 const useConfig = (id: string, payload: LLMNodeType) => {
@@ -87,6 +88,26 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  // single run
+  const {
+    isShowSingleRun,
+    hideSingleRun,
+    toVarInputs,
+    runningStatus,
+    setRunningStatus,
+  } = useOneStepRun<LLMNodeType>({
+    id,
+    data: inputs,
+  })
+  const varInputs = toVarInputs(inputs.variables)
+  const handleRun = () => {
+    setRunningStatus('running')
+  }
+
+  const handleStop = () => {
+    setRunningStatus('not started')
+  }
+
   return {
     inputs,
     isChatModel,
@@ -100,6 +121,12 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     handlePromptChange,
     handleMemoryChange,
     handleVisionResolutionChange,
+    isShowSingleRun,
+    hideSingleRun,
+    varInputs,
+    runningStatus,
+    handleRun,
+    handleStop,
   }
 }
 

web/app/components/workflow/types.ts

@@ -59,6 +59,11 @@ export type Variable = {
   value_selector: ValueSelector
 }
 
+export type VariableWithValue = {
+  key: string
+  value: string
+}
+
 export enum InputVarType {
   textInput = 'text-input',
   paragraph = 'paragraph',

web/i18n/en-US/workflow.ts

@@ -22,6 +22,11 @@ const translation = {
     latestPublished: 'Latest Published',
     restore: 'Restore',
   },
+  singleRun: {
+    testRun: 'Test Run ',
+    startRun: 'Start Run',
+    running: 'Running',
+  },
   tabs: {
     'searchBlock': 'Search block',
     'blocks': 'Blocks',

web/i18n/zh-Hans/workflow.ts

@@ -22,6 +22,11 @@ const translation = {
     latestPublished: '最新发布',
     restore: '恢复',
   },
+  singleRun: {
+    testRun: '测试运行 ',
+    startRun: '开始运行',
+    running: '运行中',
+  },
   tabs: {
     'searchBlock': '搜索节点',
     'blocks': '节点',