dify

dify/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx

@@ -0,0 +1,40 @@
+import { type FC, useEffect } from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useSelectOrDelete } from '../../hooks'
+import { DELETE_LAST_RUN_COMMAND, LastRunBlockNode } from '.'
+import cn from '@/utils/classnames'
+import { Variable02 } from '../../../icons/src/vender/solid/development'
+
+type Props = {
+  nodeKey: string
+}
+
+const LastRunBlockComponent: FC<Props> = ({
+  nodeKey,
+}) => {
+  const [editor] = useLexicalComposerContext()
+  const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_LAST_RUN_COMMAND)
+
+  useEffect(() => {
+    if (!editor.hasNodes([LastRunBlockNode]))
+      throw new Error('WorkflowVariableBlockPlugin: WorkflowVariableBlock not registered on editor')
+  }, [editor])
+
+  return (
+    <div
+      className={cn(
+        'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border pl-0.5 pr-[3px] text-text-accent hover:border-state-accent-solid hover:bg-state-accent-hover',
+        isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
+      )}
+      onClick={(e) => {
+        e.stopPropagation()
+      }}
+      ref={ref}
+    >
+      <Variable02 className='mr-0.5 h-[14px] w-[14px]' />
+      <div className='text-xs font-medium'>last_run</div>
+    </div>
+  )
+}
+
+export default LastRunBlockComponent

dify/web/app/components/base/prompt-editor/plugins/last-run-block/index.tsx

@@ -0,0 +1,65 @@
+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 { LastRunBlockType } from '../../types'
+import {
+  $createLastRunBlockNode,
+  LastRunBlockNode,
+} from './node'
+
+export const INSERT_LAST_RUN_BLOCK_COMMAND = createCommand('INSERT_LAST_RUN_BLOCK_COMMAND')
+export const DELETE_LAST_RUN_COMMAND = createCommand('DELETE_LAST_RUN_COMMAND')
+
+const LastRunBlock = memo(({
+  onInsert,
+  onDelete,
+}: LastRunBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([LastRunBlockNode]))
+      throw new Error('Last_RunBlockPlugin: Last_RunBlock not registered on editor')
+
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_LAST_RUN_BLOCK_COMMAND,
+        () => {
+          const Node = $createLastRunBlockNode()
+
+          $insertNodes([Node])
+
+          if (onInsert)
+            onInsert()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        DELETE_LAST_RUN_COMMAND,
+        () => {
+          if (onDelete)
+            onDelete()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor, onDelete, onInsert])
+
+  return null
+})
+LastRunBlock.displayName = 'LastRunBlock'
+
+export { LastRunBlock }
+export { LastRunBlockNode } from './node'
+export { default as LastRunReplacementBlock } from './last-run-block-replacement-block'

dify/web/app/components/base/prompt-editor/plugins/last-run-block/last-run-block-replacement-block.tsx

@@ -0,0 +1,60 @@
+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 { LAST_RUN_PLACEHOLDER_TEXT } from '../../constants'
+import type { LastRunBlockType } from '../../types'
+import {
+  $createLastRunBlockNode,
+  LastRunBlockNode,
+} from './node'
+import { CustomTextNode } from '../custom-text/node'
+
+const REGEX = new RegExp(LAST_RUN_PLACEHOLDER_TEXT)
+
+const LastRunReplacementBlock = ({
+  onInsert,
+}: LastRunBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([LastRunBlockNode]))
+      throw new Error('LastRunMessageBlockNodePlugin: LastRunMessageBlockNode not registered on editor')
+  }, [editor])
+
+  const createLastRunBlockNode = useCallback((): LastRunBlockNode => {
+    if (onInsert)
+      onInsert()
+    return $applyNodeReplacement($createLastRunBlockNode())
+  }, [onInsert])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + LAST_RUN_PLACEHOLDER_TEXT.length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createLastRunBlockNode)),
+    )
+  }, [])
+
+  return null
+}
+
+export default memo(LastRunReplacementBlock)

dify/web/app/components/base/prompt-editor/plugins/last-run-block/node.tsx

@@ -0,0 +1,67 @@
+import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
+import { DecoratorNode } from 'lexical'
+import LastRunBlockComponent from './component'
+
+export type SerializedNode = SerializedLexicalNode
+
+export class LastRunBlockNode extends DecoratorNode<React.JSX.Element> {
+  static getType(): string {
+    return 'last-run-block'
+  }
+
+  static clone(node: LastRunBlockNode): LastRunBlockNode {
+    return new LastRunBlockNode(node.getKey())
+  }
+
+  isInline(): boolean {
+    return true
+  }
+
+  constructor(key?: NodeKey) {
+    super(key)
+  }
+
+  createDOM(): HTMLElement {
+    const div = document.createElement('div')
+    div.classList.add('inline-flex', 'items-center', 'align-middle')
+    return div
+  }
+
+  updateDOM(): false {
+    return false
+  }
+
+  decorate(): React.JSX.Element {
+    return (
+      <LastRunBlockComponent
+        nodeKey={this.getKey()}
+      />
+    )
+  }
+
+  static importJSON(): LastRunBlockNode {
+    const node = $createLastRunBlockNode()
+
+    return node
+  }
+
+  exportJSON(): SerializedNode {
+    return {
+      type: 'last-run-block',
+      version: 1,
+    }
+  }
+
+  getTextContent(): string {
+    return '{{#last_run#}}'
+  }
+}
+export function $createLastRunBlockNode(): LastRunBlockNode {
+  return new LastRunBlockNode()
+}
+
+export function $isLastRunBlockNode(
+  node: LastRunBlockNode | LexicalNode | null | undefined,
+): boolean {
+  return node instanceof LastRunBlockNode
+}