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>
2024-04-08 18:51:46 +08:00
parent 2fb9850af5
commit 7753ba2d37
1161 changed files with 103836 additions and 10327 deletions
--- a/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
@@ -18,12 +18,14 @@ type ContextBlockComponentProps = {
  nodeKey: string
  datasets?: Dataset[]
  onAddContext: () => void
+  canNotAddContext?: boolean
 }

 const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
  nodeKey,
  datasets = [],
  onAddContext,
+  canNotAddContext,
 }) => {
  const { t } = useTranslation()
  const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_CONTEXT_BLOCK_COMMAND)
@@ -44,52 +46,55 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
    `} ref={ref}>
      <File05 className='mr-1 w-[14px] h-[14px]' />
      <div className='mr-1 text-xs font-medium'>{t('common.promptEditor.context.item.title')}</div>
-      <PortalToFollowElem
-        open={open}
-        onOpenChange={setOpen}
-        placement='bottom-end'
-        offset={{
-          mainAxis: 3,
-          alignmentAxis: -147,
-        }}
-      >
-        <PortalToFollowElemTrigger ref={triggerRef}>
-          <div className={`
+      {!canNotAddContext && (
+        <PortalToFollowElem
+          open={open}
+          onOpenChange={setOpen}
+          placement='bottom-end'
+          offset={{
+            mainAxis: 3,
+            alignmentAxis: -147,
+          }}
+        >
+          <PortalToFollowElemTrigger ref={triggerRef}>
+            <div className={`
            flex items-center justify-center w-[18px] h-[18px] text-[11px] font-semibold rounded cursor-pointer
            ${open ? 'bg-[#6938EF] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
          `}>{localDatasets.length}</div>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent style={{ zIndex: 100 }}>
-          <div className='w-[360px] bg-white rounded-xl shadow-lg'>
-            <div className='p-4'>
-              <div className='mb-2 text-xs font-medium text-gray-500'>
-                {t('common.promptEditor.context.modal.title', { num: localDatasets.length })}
-              </div>
-              <div className='max-h-[270px] overflow-y-auto'>
-                {
-                  localDatasets.map(dataset => (
-                    <div key={dataset.id} className='flex items-center h-8'>
-                      <div className='flex items-center justify-center shrink-0 mr-2 w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#EAECF5]'>
-                        <Folder className='w-4 h-4 text-[#444CE7]' />
-                      </div>
-                      <div className='text-sm text-gray-800 truncate' title=''>{dataset.name}</div>
-                    </div>
-                  ))
-                }
-              </div>
-              <div className='flex items-center h-8 text-[#155EEF] cursor-pointer' onClick={onAddContext}>
-                <div className='shrink-0 flex justify-center items-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-gray-100'>
-                  <Plus className='w-[14px] h-[14px]' />
+          </PortalToFollowElemTrigger>
+          <PortalToFollowElemContent style={{ zIndex: 100 }}>
+            <div className='w-[360px] bg-white rounded-xl shadow-lg'>
+              <div className='p-4'>
+                <div className='mb-2 text-xs font-medium text-gray-500'>
+                  {t('common.promptEditor.context.modal.title', { num: localDatasets.length })}
                </div>
-                <div className='text-[13px] font-medium' title=''>{t('common.promptEditor.context.modal.add')}</div>
+                <div className='max-h-[270px] overflow-y-auto'>
+                  {
+                    localDatasets.map(dataset => (
+                      <div key={dataset.id} className='flex items-center h-8'>
+                        <div className='flex items-center justify-center shrink-0 mr-2 w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#EAECF5]'>
+                          <Folder className='w-4 h-4 text-[#444CE7]' />
+                        </div>
+                        <div className='text-sm text-gray-800 truncate' title=''>{dataset.name}</div>
+                      </div>
+                    ))
+                  }
+                </div>
+                <div className='flex items-center h-8 text-[#155EEF] cursor-pointer' onClick={onAddContext}>
+                  <div className='shrink-0 flex justify-center items-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-gray-100'>
+                    <Plus className='w-[14px] h-[14px]' />
+                  </div>
+                  <div className='text-[13px] font-medium' title=''>{t('common.promptEditor.context.modal.add')}</div>
+                </div>
+              </div>
+              <div className='px-4 py-3 text-xs text-gray-500 bg-gray-50 border-t-[0.5px] border-gray-50 rounded-b-xl'>
+                {t('common.promptEditor.context.modal.footer')}
              </div>
            </div>
-            <div className='px-4 py-3 text-xs text-gray-500 bg-gray-50 border-t-[0.5px] border-gray-50 rounded-b-xl'>
-              {t('common.promptEditor.context.modal.footer')}
-            </div>
-          </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+          </PortalToFollowElemContent>
+        </PortalToFollowElem>
+      )}
+
    </div>
  )
 }
--- a/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
@@ -0,0 +1,63 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+} from 'react'
+import { $applyNodeReplacement } from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { decoratorTransform } from '../../utils'
+import { CONTEXT_PLACEHOLDER_TEXT } from '../../constants'
+import type { ContextBlockType } from '../../types'
+import {
+  $createContextBlockNode,
+  ContextBlockNode,
+} from '../context-block/node'
+import { CustomTextNode } from '../custom-text/node'
+
+const REGEX = new RegExp(CONTEXT_PLACEHOLDER_TEXT)
+
+const ContextBlockReplacementBlock = ({
+  datasets = [],
+  onAddContext = () => {},
+  onInsert,
+  canNotAddContext,
+}: ContextBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([ContextBlockNode]))
+      throw new Error('ContextBlockNodePlugin: ContextBlockNode not registered on editor')
+  }, [editor])
+
+  const createContextBlockNode = useCallback((): ContextBlockNode => {
+    if (onInsert)
+      onInsert()
+    return $applyNodeReplacement($createContextBlockNode(datasets, onAddContext, canNotAddContext))
+  }, [datasets, onAddContext, onInsert, canNotAddContext])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + CONTEXT_PLACEHOLDER_TEXT.length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createContextBlockNode)),
+    )
+  }, [])
+
+  return null
+}
+
+export default memo(ContextBlockReplacementBlock)
--- a/web/app/components/base/prompt-editor/plugins/context-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-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 { ContextBlockType } from '../../types'
 import {
  $createContextBlockNode,
  ContextBlockNode,
@@ -21,18 +24,13 @@ export type Dataset = {
  type: string
 }

-export type ContextBlockProps = {
-  datasets: Dataset[]
-  onAddContext: () => void
-  onInsert?: () => void
-  onDelete?: () => void
-}
-const ContextBlock: FC<ContextBlockProps> = ({
-  datasets,
-  onAddContext,
+const ContextBlock = memo(({
+  datasets = [],
+  onAddContext = () => {},
  onInsert,
  onDelete,
-}) => {
+  canNotAddContext,
+}: ContextBlockType) => {
  const [editor] = useLexicalComposerContext()

  useEffect(() => {
@@ -43,7 +41,7 @@ const ContextBlock: FC<ContextBlockProps> = ({
      editor.registerCommand(
        INSERT_CONTEXT_BLOCK_COMMAND,
        () => {
-          const contextBlockNode = $createContextBlockNode(datasets, onAddContext)
+          const contextBlockNode = $createContextBlockNode(datasets, onAddContext, canNotAddContext)

          $insertNodes([contextBlockNode])

@@ -65,9 +63,12 @@ const ContextBlock: FC<ContextBlockProps> = ({
        COMMAND_PRIORITY_EDITOR,
      ),
    )
-  }, [editor, datasets, onAddContext, onInsert, onDelete])
+  }, [editor, datasets, onAddContext, onInsert, onDelete, canNotAddContext])

  return null
-}
+})
+ContextBlock.displayName = 'ContextBlock'

-export default ContextBlock
+export { ContextBlock }
+export { ContextBlockNode } from './node'
+export { default as ContextBlockReplacementBlock } from './context-block-replacement-block'
--- a/web/app/components/base/prompt-editor/plugins/context-block/node.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-block/node.tsx
@@ -3,29 +3,31 @@ import { DecoratorNode } from 'lexical'
 import ContextBlockComponent from './component'
 import type { Dataset } from './index'

-export type SerializedNode = SerializedLexicalNode & { datasets: Dataset[]; onAddContext: () => void }
+export type SerializedNode = SerializedLexicalNode & { datasets: Dataset[]; onAddContext: () => void; canNotAddContext: boolean }

 export class ContextBlockNode extends DecoratorNode<JSX.Element> {
  __datasets: Dataset[]
  __onAddContext: () => void
+  __canNotAddContext: boolean

  static getType(): string {
    return 'context-block'
  }

  static clone(node: ContextBlockNode): ContextBlockNode {
-    return new ContextBlockNode(node.__datasets, node.__onAddContext)
+    return new ContextBlockNode(node.__datasets, node.__onAddContext, node.getKey(), node.__canNotAddContext)
  }

  isInline(): boolean {
    return true
  }

-  constructor(datasets: Dataset[], onAddContext: () => void, key?: NodeKey) {
+  constructor(datasets: Dataset[], onAddContext: () => void, key?: NodeKey, canNotAddContext?: boolean) {
    super(key)

    this.__datasets = datasets
    this.__onAddContext = onAddContext
+    this.__canNotAddContext = canNotAddContext || false
  }

  createDOM(): HTMLElement {
@@ -44,6 +46,7 @@ export class ContextBlockNode extends DecoratorNode<JSX.Element> {
        nodeKey={this.getKey()}
        datasets={this.getDatasets()}
        onAddContext={this.getOnAddContext()}
+        canNotAddContext={this.getCanNotAddContext()}
      />
    )
  }
@@ -60,8 +63,14 @@ export class ContextBlockNode extends DecoratorNode<JSX.Element> {
    return self.__onAddContext
  }

+  getCanNotAddContext(): boolean {
+    const self = this.getLatest()
+
+    return self.__canNotAddContext
+  }
+
  static importJSON(serializedNode: SerializedNode): ContextBlockNode {
-    const node = $createContextBlockNode(serializedNode.datasets, serializedNode.onAddContext)
+    const node = $createContextBlockNode(serializedNode.datasets, serializedNode.onAddContext, serializedNode.canNotAddContext)

    return node
  }
@@ -72,6 +81,7 @@ export class ContextBlockNode extends DecoratorNode<JSX.Element> {
      version: 1,
      datasets: this.getDatasets(),
      onAddContext: this.getOnAddContext(),
+      canNotAddContext: this.getCanNotAddContext(),
    }
  }

@@ -79,8 +89,8 @@ export class ContextBlockNode extends DecoratorNode<JSX.Element> {
    return '{{#context#}}'
  }
 }
-export function $createContextBlockNode(datasets: Dataset[], onAddContext: () => void): ContextBlockNode {
-  return new ContextBlockNode(datasets, onAddContext)
+export function $createContextBlockNode(datasets: Dataset[], onAddContext: () => void, canNotAddContext?: boolean): ContextBlockNode {
+  return new ContextBlockNode(datasets, onAddContext, undefined, canNotAddContext)
 }

 export function $isContextBlockNode(