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/history-block/history-block-replacement-block.tsx

@@ -0,0 +1,61 @@
+import {
+  useCallback,
+  useEffect,
+} from 'react'
+import { $applyNodeReplacement } from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { decoratorTransform } from '../../utils'
+import { HISTORY_PLACEHOLDER_TEXT } from '../../constants'
+import type { HistoryBlockType } from '../../types'
+import {
+  $createHistoryBlockNode,
+  HistoryBlockNode,
+} from '../history-block/node'
+import { CustomTextNode } from '../custom-text/node'
+
+const REGEX = new RegExp(HISTORY_PLACEHOLDER_TEXT)
+
+const HistoryBlockReplacementBlock = ({
+  history = { user: '', assistant: '' },
+  onEditRole = () => {},
+  onInsert,
+}: HistoryBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([HistoryBlockNode]))
+      throw new Error('HistoryBlockNodePlugin: HistoryBlockNode not registered on editor')
+  }, [editor])
+
+  const createHistoryBlockNode = useCallback((): HistoryBlockNode => {
+    if (onInsert)
+      onInsert()
+    return $applyNodeReplacement($createHistoryBlockNode(history, onEditRole))
+  }, [history, onEditRole, onInsert])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + HISTORY_PLACEHOLDER_TEXT.length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createHistoryBlockNode)),
+    )
+  }, [])
+
+  return null
+}
+
+export default HistoryBlockReplacementBlock

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

@@ -1,5 +1,7 @@
-import type { FC } from 'react'
-import { useEffect } from 'react'
+import {
+  memo,
+  useEffect,
+} from 'react'
 import {
   $insertNodes,
   COMMAND_PRIORITY_EDITOR,
@@ -7,6 +9,7 @@ import {
 } from 'lexical'
 import { mergeRegister } from '@lexical/utils'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import type { HistoryBlockType } from '../../types'
 import {
   $createHistoryBlockNode,
   HistoryBlockNode,
@@ -27,12 +30,12 @@ export type HistoryBlockProps = {
   onDelete?: () => void
 }
 
-const HistoryBlock: FC<HistoryBlockProps> = ({
-  roleName,
-  onEditRole,
+const HistoryBlock = memo(({
+  history = { user: '', assistant: '' },
+  onEditRole = () => {},
   onInsert,
   onDelete,
-}) => {
+}: HistoryBlockType) => {
   const [editor] = useLexicalComposerContext()
 
   useEffect(() => {
@@ -43,7 +46,7 @@ const HistoryBlock: FC<HistoryBlockProps> = ({
       editor.registerCommand(
         INSERT_HISTORY_BLOCK_COMMAND,
         () => {
-          const historyBlockNode = $createHistoryBlockNode(roleName, onEditRole)
+          const historyBlockNode = $createHistoryBlockNode(history, onEditRole)
 
           $insertNodes([historyBlockNode])
 
@@ -65,9 +68,12 @@ const HistoryBlock: FC<HistoryBlockProps> = ({
         COMMAND_PRIORITY_EDITOR,
       ),
     )
-  }, [editor, roleName, onEditRole, onInsert, onDelete])
+  }, [editor, history, onEditRole, onInsert, onDelete])
 
   return null
-}
+})
+HistoryBlock.displayName = 'HistoryBlock'
 
-export default HistoryBlock
+export { HistoryBlock }
+export { HistoryBlockNode } from './node'
+export { default as HistoryBlockReplacementBlock } from './history-block-replacement-block'