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/plugins/workflow-variable-block/component.tsx

@@ -0,0 +1,109 @@
+import {
+  memo,
+  useEffect,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  COMMAND_PRIORITY_EDITOR,
+} from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useSelectOrDelete } from '../../hooks'
+import type { WorkflowNodesMap } from './node'
+import { WorkflowVariableBlockNode } from './node'
+import {
+  DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND,
+  UPDATE_WORKFLOW_NODES_MAP,
+} from './index'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import { VarBlockIcon } from '@/app/components/workflow/block-icon'
+import { Line3 } from '@/app/components/base/icons/src/public/common'
+import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+
+type WorkflowVariableBlockComponentProps = {
+  nodeKey: string
+  variables: string[]
+  workflowNodesMap: WorkflowNodesMap
+}
+
+const WorkflowVariableBlockComponent = ({
+  nodeKey,
+  variables,
+  workflowNodesMap = {},
+}: WorkflowVariableBlockComponentProps) => {
+  const { t } = useTranslation()
+  const [editor] = useLexicalComposerContext()
+  const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND)
+  const variablesLength = variables.length
+  const lastVariable = isSystemVar(variables) ? variables.join('.') : variables[variablesLength - 1]
+  const [localWorkflowNodesMap, setLocalWorkflowNodesMap] = useState<WorkflowNodesMap>(workflowNodesMap)
+  const node = localWorkflowNodesMap![variables[0]]
+
+  useEffect(() => {
+    if (!editor.hasNodes([WorkflowVariableBlockNode]))
+      throw new Error('WorkflowVariableBlockPlugin: WorkflowVariableBlock not registered on editor')
+
+    return mergeRegister(
+      editor.registerCommand(
+        UPDATE_WORKFLOW_NODES_MAP,
+        (workflowNodesMap: WorkflowNodesMap) => {
+          setLocalWorkflowNodesMap(workflowNodesMap)
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor])
+
+  const Item = (
+    <div
+      className={`
+        mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border
+        ${isSelected ? ' border-[#84ADFF] bg-[#F5F8FF]' : ' border-black/5 bg-white'}
+        ${!node && '!border-[#F04438] !bg-[#FEF3F2]'}
+      `}
+      ref={ref}
+    >
+      <div className='flex items-center'>
+        {
+          node?.type && (
+            <div className='p-[1px]'>
+              <VarBlockIcon
+                className='!text-gray-500'
+                type={node?.type}
+              />
+            </div>
+          )
+        }
+        <div className='shrink-0 mx-0.5 text-xs font-medium text-gray-500 truncate' title={node?.title} style={{
+        }}>{node?.title}</div>
+        <Line3 className='mr-0.5 text-gray-300'></Line3>
+      </div>
+      <div className='flex items-center text-primary-600'>
+        <Variable02 className='w-3.5 h-3.5' />
+        <div className='shrink-0 ml-0.5 text-xs font-medium truncate' title={lastVariable}>{lastVariable}</div>
+        {
+          !node && (
+            <AlertCircle className='ml-0.5 w-3 h-3 text-[#D92D20]' />
+          )
+        }
+      </div>
+    </div>
+  )
+
+  if (!node) {
+    return (
+      <TooltipPlus popupContent={t('workflow.errorMsg.invalidVariable')}>
+        {Item}
+      </TooltipPlus>
+    )
+  }
+
+  return Item
+}
+
+export default memo(WorkflowVariableBlockComponent)

web/app/components/base/prompt-editor/plugins/workflow-variable-block/index.tsx

@@ -0,0 +1,80 @@
+import {
+  memo,
+  useEffect,
+} from 'react'
+import {
+  $insertNodes,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+} from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import type { WorkflowVariableBlockType } from '../../types'
+import {
+  $createWorkflowVariableBlockNode,
+  WorkflowVariableBlockNode,
+} from './node'
+import type { Node } from '@/app/components/workflow/types'
+
+export const INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND = createCommand('INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND')
+export const DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND = createCommand('DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND')
+export const CLEAR_HIDE_MENU_TIMEOUT = createCommand('CLEAR_HIDE_MENU_TIMEOUT')
+export const UPDATE_WORKFLOW_NODES_MAP = createCommand('UPDATE_WORKFLOW_NODES_MAP')
+
+export type WorkflowVariableBlockProps = {
+  getWorkflowNode: (nodeId: string) => Node
+  onInsert?: () => void
+  onDelete?: () => void
+}
+const WorkflowVariableBlock = memo(({
+  workflowNodesMap,
+  onInsert,
+  onDelete,
+}: WorkflowVariableBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    editor.update(() => {
+      editor.dispatchCommand(UPDATE_WORKFLOW_NODES_MAP, workflowNodesMap)
+    })
+  }, [editor, workflowNodesMap])
+
+  useEffect(() => {
+    if (!editor.hasNodes([WorkflowVariableBlockNode]))
+      throw new Error('WorkflowVariableBlockPlugin: WorkflowVariableBlock not registered on editor')
+
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND,
+        (variables: string[]) => {
+          editor.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, undefined)
+          const workflowVariableBlockNode = $createWorkflowVariableBlockNode(variables, workflowNodesMap)
+
+          $insertNodes([workflowVariableBlockNode])
+          if (onInsert)
+            onInsert()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND,
+        () => {
+          if (onDelete)
+            onDelete()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor, onInsert, onDelete, workflowNodesMap])
+
+  return null
+})
+WorkflowVariableBlock.displayName = 'WorkflowVariableBlock'
+
+export { WorkflowVariableBlock }
+export { WorkflowVariableBlockNode } from './node'
+export { default as WorkflowVariableBlockReplacementBlock } from './workflow-variable-block-replacement-block'

web/app/components/base/prompt-editor/plugins/workflow-variable-block/node.tsx

@@ -0,0 +1,92 @@
+import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
+import { DecoratorNode } from 'lexical'
+import type { WorkflowVariableBlockType } from '../../types'
+import WorkflowVariableBlockComponent from './component'
+
+export type WorkflowNodesMap = WorkflowVariableBlockType['workflowNodesMap']
+export type SerializedNode = SerializedLexicalNode & {
+  variables: string[]
+  workflowNodesMap: WorkflowNodesMap
+}
+
+export class WorkflowVariableBlockNode extends DecoratorNode<JSX.Element> {
+  __variables: string[]
+  __workflowNodesMap: WorkflowNodesMap
+
+  static getType(): string {
+    return 'workflow-variable-block'
+  }
+
+  static clone(node: WorkflowVariableBlockNode): WorkflowVariableBlockNode {
+    return new WorkflowVariableBlockNode(node.__variables, node.__workflowNodesMap)
+  }
+
+  isInline(): boolean {
+    return true
+  }
+
+  constructor(variables: string[], workflowNodesMap: WorkflowNodesMap, key?: NodeKey) {
+    super(key)
+
+    this.__variables = variables
+    this.__workflowNodesMap = workflowNodesMap
+  }
+
+  createDOM(): HTMLElement {
+    const div = document.createElement('div')
+    div.classList.add('inline-flex', 'items-center', 'align-middle')
+    return div
+  }
+
+  updateDOM(): false {
+    return false
+  }
+
+  decorate(): JSX.Element {
+    return (
+      <WorkflowVariableBlockComponent
+        nodeKey={this.getKey()}
+        variables={this.__variables}
+        workflowNodesMap={this.__workflowNodesMap}
+      />
+    )
+  }
+
+  static importJSON(serializedNode: SerializedNode): WorkflowVariableBlockNode {
+    const node = $createWorkflowVariableBlockNode(serializedNode.variables, serializedNode.workflowNodesMap)
+
+    return node
+  }
+
+  exportJSON(): SerializedNode {
+    return {
+      type: 'workflow-variable-block',
+      version: 1,
+      variables: this.getVariables(),
+      workflowNodesMap: this.getWorkflowNodesMap(),
+    }
+  }
+
+  getVariables(): string[] {
+    const self = this.getLatest()
+    return self.__variables
+  }
+
+  getWorkflowNodesMap(): WorkflowNodesMap {
+    const self = this.getLatest()
+    return self.__workflowNodesMap
+  }
+
+  getTextContent(): string {
+    return `{{#${this.getVariables().join('.')}#}}`
+  }
+}
+export function $createWorkflowVariableBlockNode(variables: string[], workflowNodesMap: WorkflowNodesMap): WorkflowVariableBlockNode {
+  return new WorkflowVariableBlockNode(variables, workflowNodesMap)
+}
+
+export function $isWorkflowVariableBlockNode(
+  node: WorkflowVariableBlockNode | LexicalNode | null | undefined,
+): node is WorkflowVariableBlockNode {
+  return node instanceof WorkflowVariableBlockNode
+}

web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx

@@ -0,0 +1,64 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+} from 'react'
+import type { TextNode } from 'lexical'
+import { $applyNodeReplacement } from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { decoratorTransform } from '../../utils'
+import type { WorkflowVariableBlockType } from '../../types'
+import { CustomTextNode } from '../custom-text/node'
+import { $createWorkflowVariableBlockNode } from './node'
+import { WorkflowVariableBlockNode } from './index'
+import { VAR_REGEX as REGEX } from '@/config'
+
+const WorkflowVariableBlockReplacementBlock = ({
+  workflowNodesMap,
+  onInsert,
+}: WorkflowVariableBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([WorkflowVariableBlockNode]))
+      throw new Error('WorkflowVariableBlockNodePlugin: WorkflowVariableBlockNode not registered on editor')
+  }, [editor])
+
+  const createWorkflowVariableBlockNode = useCallback((textNode: TextNode): WorkflowVariableBlockNode => {
+    if (onInsert)
+      onInsert()
+
+    const nodePathString = textNode.getTextContent().slice(3, -3)
+    return $applyNodeReplacement($createWorkflowVariableBlockNode(nodePathString.split('.'), workflowNodesMap))
+  }, [onInsert, workflowNodesMap])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + matchArr[0].length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  const transformListener = useCallback((textNode: any) => {
+    return decoratorTransform(textNode, getMatch, createWorkflowVariableBlockNode)
+  }, [createWorkflowVariableBlockNode, getMatch])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, transformListener),
+    )
+  }, [])
+
+  return null
+}
+
+export default memo(WorkflowVariableBlockReplacementBlock)