FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

web/app/components/base/prompt-editor/index.tsx

@@ -17,27 +17,42 @@ import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
 // import TreeView from './plugins/tree-view'
 import Placeholder from './plugins/placeholder'
-import ComponentPicker from './plugins/component-picker'
-import VariablePicker from './plugins/variable-picker'
-import ContextBlock from './plugins/context-block'
-import { ContextBlockNode } from './plugins/context-block/node'
-import ContextBlockReplacementBlock from './plugins/context-block-replacement-block'
-import HistoryBlock from './plugins/history-block'
-import { HistoryBlockNode } from './plugins/history-block/node'
-import HistoryBlockReplacementBlock from './plugins/history-block-replacement-block'
-import QueryBlock from './plugins/query-block'
-import { QueryBlockNode } from './plugins/query-block/node'
-import QueryBlockReplacementBlock from './plugins/query-block-replacement-block'
+import ComponentPickerBlock from './plugins/component-picker-block'
+import {
+  ContextBlock,
+  ContextBlockNode,
+  ContextBlockReplacementBlock,
+} from './plugins/context-block'
+import {
+  QueryBlock,
+  QueryBlockNode,
+  QueryBlockReplacementBlock,
+} from './plugins/query-block'
+import {
+  HistoryBlock,
+  HistoryBlockNode,
+  HistoryBlockReplacementBlock,
+} from './plugins/history-block'
+import {
+  WorkflowVariableBlock,
+  WorkflowVariableBlockNode,
+  WorkflowVariableBlockReplacementBlock,
+} from './plugins/workflow-variable-block'
 import VariableBlock from './plugins/variable-block'
 import VariableValueBlock from './plugins/variable-value-block'
 import { VariableValueBlockNode } from './plugins/variable-value-block/node'
 import { CustomTextNode } from './plugins/custom-text/node'
-import OnBlurBlock from './plugins/on-blur-block'
+import OnBlurBlock from './plugins/on-blur-or-focus-block'
 import UpdateBlock from './plugins/update-block'
 import { textToEditorState } from './utils'
-import type { Dataset } from './plugins/context-block'
-import type { RoleName } from './plugins/history-block'
-import type { ExternalToolOption, Option } from './plugins/variable-picker'
+import type {
+  ContextBlockType,
+  ExternalToolBlockType,
+  HistoryBlockType,
+  QueryBlockType,
+  VariableBlockType,
+  WorkflowVariableBlockType,
+} from './types'
 import {
   UPDATE_DATASETS_EVENT_EMITTER,
   UPDATE_HISTORY_EVENT_EMITTER,
@@ -45,75 +60,43 @@ import {
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 
 export type PromptEditorProps = {
+  instanceId?: string
+  compact?: boolean
   className?: string
+  placeholder?: string
+  placeholderClassName?: string
+  style?: React.CSSProperties
   value?: string
   editable?: boolean
   onChange?: (text: string) => void
   onBlur?: () => void
-  contextBlock?: {
-    show?: boolean
-    selectable?: boolean
-    datasets: Dataset[]
-    onInsert?: () => void
-    onDelete?: () => void
-    onAddContext: () => void
-  }
-  variableBlock?: {
-    selectable?: boolean
-    variables: Option[]
-    externalTools?: ExternalToolOption[]
-    onAddExternalTool?: () => void
-  }
-  historyBlock?: {
-    show?: boolean
-    selectable?: boolean
-    history: RoleName
-    onInsert?: () => void
-    onDelete?: () => void
-    onEditRole: () => void
-  }
-  queryBlock?: {
-    show?: boolean
-    selectable?: boolean
-    onInsert?: () => void
-    onDelete?: () => void
-  }
+  onFocus?: () => void
+  contextBlock?: ContextBlockType
+  queryBlock?: QueryBlockType
+  historyBlock?: HistoryBlockType
+  variableBlock?: VariableBlockType
+  externalToolBlock?: ExternalToolBlockType
+  workflowVariableBlock?: WorkflowVariableBlockType
 }
 
 const PromptEditor: FC<PromptEditorProps> = ({
+  instanceId,
+  compact,
   className,
+  placeholder,
+  placeholderClassName,
+  style,
   value,
   editable = true,
   onChange,
   onBlur,
-  contextBlock = {
-    show: true,
-    selectable: true,
-    datasets: [],
-    onAddContext: () => {},
-    onInsert: () => {},
-    onDelete: () => {},
-  },
-  historyBlock = {
-    show: true,
-    selectable: true,
-    history: {
-      user: '',
-      assistant: '',
-    },
-    onEditRole: () => {},
-    onInsert: () => {},
-    onDelete: () => {},
-  },
-  variableBlock = {
-    variables: [],
-  },
-  queryBlock = {
-    show: true,
-    selectable: true,
-    onInsert: () => {},
-    onDelete: () => {},
-  },
+  onFocus,
+  contextBlock,
+  queryBlock,
+  historyBlock,
+  variableBlock,
+  externalToolBlock,
+  workflowVariableBlock,
 }) => {
   const { eventEmitter } = useEventEmitterContextContext()
   const initialConfig = {
@@ -128,6 +111,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
       ContextBlockNode,
       HistoryBlockNode,
       QueryBlockNode,
+      WorkflowVariableBlockNode,
       VariableValueBlockNode,
     ],
     editorState: value ? textToEditorState(value as string) : null,
@@ -145,87 +129,85 @@ const PromptEditor: FC<PromptEditorProps> = ({
   useEffect(() => {
     eventEmitter?.emit({
       type: UPDATE_DATASETS_EVENT_EMITTER,
-      payload: contextBlock.datasets,
+      payload: contextBlock?.datasets,
     } as any)
-  }, [eventEmitter, contextBlock.datasets])
+  }, [eventEmitter, contextBlock?.datasets])
   useEffect(() => {
     eventEmitter?.emit({
       type: UPDATE_HISTORY_EVENT_EMITTER,
-      payload: historyBlock.history,
+      payload: historyBlock?.history,
     } as any)
-  }, [eventEmitter, historyBlock.history])
+  }, [eventEmitter, historyBlock?.history])
 
   return (
     <LexicalComposer initialConfig={{ ...initialConfig, editable }}>
       <div className='relative'>
         <RichTextPlugin
-          contentEditable={<ContentEditable className={`${className} outline-none text-sm text-gray-700 leading-6`} />}
-          placeholder={<Placeholder />}
+          contentEditable={<ContentEditable className={`${className} outline-none ${compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm'} text-gray-700`} style={style || {}} />}
+          placeholder={<Placeholder value={placeholder} className={placeholderClassName} compact={compact} />}
           ErrorBoundary={LexicalErrorBoundary}
         />
-        <ComponentPicker
-          contextDisabled={!contextBlock.selectable}
-          contextShow={contextBlock.show}
-          historyDisabled={!historyBlock.selectable}
-          historyShow={historyBlock.show}
-          queryDisabled={!queryBlock.selectable}
-          queryShow={queryBlock.show}
+        <ComponentPickerBlock
+          triggerString='/'
+          contextBlock={contextBlock}
+          historyBlock={historyBlock}
+          queryBlock={queryBlock}
+          variableBlock={variableBlock}
+          externalToolBlock={externalToolBlock}
+          workflowVariableBlock={workflowVariableBlock}
         />
-        <VariablePicker
-          items={variableBlock.variables}
-          externalTools={variableBlock.externalTools}
-          onAddExternalTool={variableBlock.onAddExternalTool}
+        <ComponentPickerBlock
+          triggerString='{'
+          contextBlock={contextBlock}
+          historyBlock={historyBlock}
+          queryBlock={queryBlock}
+          variableBlock={variableBlock}
+          externalToolBlock={externalToolBlock}
+          workflowVariableBlock={workflowVariableBlock}
         />
         {
-          contextBlock.show && (
+          contextBlock?.show && (
             <>
-              <ContextBlock
-                datasets={contextBlock.datasets}
-                onAddContext={contextBlock.onAddContext}
-                onInsert={contextBlock.onInsert}
-                onDelete={contextBlock.onDelete}
-              />
-              <ContextBlockReplacementBlock
-                datasets={contextBlock.datasets}
-                onAddContext={contextBlock.onAddContext}
-                onInsert={contextBlock.onInsert}
-              />
-            </>
-          )
-        }
-        <VariableBlock />
-        {
-          historyBlock.show && (
-            <>
-              <HistoryBlock
-                roleName={historyBlock.history}
-                onEditRole={historyBlock.onEditRole}
-                onInsert={historyBlock.onInsert}
-                onDelete={historyBlock.onDelete}
-              />
-              <HistoryBlockReplacementBlock
-                roleName={historyBlock.history}
-                onEditRole={historyBlock.onEditRole}
-                onInsert={historyBlock.onInsert}
-              />
+              <ContextBlock {...contextBlock} />
+              <ContextBlockReplacementBlock {...contextBlock} />
             </>
           )
         }
         {
-          queryBlock.show && (
+          queryBlock?.show && (
             <>
-              <QueryBlock
-                onInsert={queryBlock.onInsert}
-                onDelete={queryBlock.onDelete}
-              />
+              <QueryBlock {...queryBlock} />
               <QueryBlockReplacementBlock />
             </>
           )
         }
-        <VariableValueBlock />
+        {
+          historyBlock?.show && (
+            <>
+              <HistoryBlock {...historyBlock} />
+              <HistoryBlockReplacementBlock {...historyBlock} />
+            </>
+          )
+        }
+        {
+          (variableBlock?.show || externalToolBlock?.show) && (
+            <>
+              <VariableBlock />
+              <VariableValueBlock />
+            </>
+          )
+        }
+        {
+          workflowVariableBlock?.show && (
+            <>
+              <WorkflowVariableBlock {...workflowVariableBlock} />
+              <WorkflowVariableBlockReplacementBlock {...workflowVariableBlock} />
+            </>
+          )
+        }
         <OnChangePlugin onChange={handleEditorChange} />
-        <OnBlurBlock onBlur={onBlur} />
-        <UpdateBlock />
+        <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
+        <UpdateBlock instanceId={instanceId} />
         {/* <TreeView /> */}
       </div>
     </LexicalComposer>