feat: add error message

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

@@ -4,6 +4,7 @@ export const CONTEXT_PLACEHOLDER_TEXT = '{{#context#}}'
 export const HISTORY_PLACEHOLDER_TEXT = '{{#histories#}}'
 export const QUERY_PLACEHOLDER_TEXT = '{{#query#}}'
 export const CURRENT_PLACEHOLDER_TEXT = '{{#current#}}'
+export const ERROR_MESSAGE_PLACEHOLDER_TEXT = '{{#error_message#}}'
 
 export const PRE_PROMPT_PLACEHOLDER_TEXT = '{{#pre_prompt#}}'
 export const UPDATE_DATASETS_EVENT_EMITTER = 'prompt-editor-context-block-update-datasets'

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

@@ -44,6 +44,11 @@ import {
   CurrentBlockNode,
   CurrentBlockReplacementBlock,
 } from './plugins/current-block'
+import {
+  ErrorMessageBlock,
+  ErrorMessageBlockNode,
+  ErrorMessageBlockReplacementBlock,
+} from './plugins/error-message-block'
 import VariableBlock from './plugins/variable-block'
 import VariableValueBlock from './plugins/variable-value-block'
 import { VariableValueBlockNode } from './plugins/variable-value-block/node'
@@ -54,6 +59,7 @@ import { textToEditorState } from './utils'
 import type {
   ContextBlockType,
   CurrentBlockType,
+  ErrorMessageBlockType,
   ExternalToolBlockType,
   HistoryBlockType,
   QueryBlockType,
@@ -88,6 +94,7 @@ export type PromptEditorProps = {
   externalToolBlock?: ExternalToolBlockType
   workflowVariableBlock?: WorkflowVariableBlockType
   currentBlock?: CurrentBlockType
+  errorMessageBlock?: ErrorMessageBlockType
   isSupportFileVar?: boolean
 }
 
@@ -114,6 +121,9 @@ const PromptEditor: FC<PromptEditorProps> = ({
     show: true,
     generatorType: GeneratorType.code,
   },
+  errorMessageBlock = {
+    show: true,
+  },
   isSupportFileVar,
 }) => {
   const { eventEmitter } = useEventEmitterContextContext()
@@ -132,6 +142,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
       WorkflowVariableBlockNode,
       VariableValueBlockNode,
       CurrentBlockNode,
+      ErrorMessageBlockNode,
     ],
     editorState: textToEditorState(value || ''),
     onError: (error: Error) => {
@@ -192,6 +203,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           externalToolBlock={externalToolBlock}
           workflowVariableBlock={workflowVariableBlock}
           currentBlock={currentBlock}
+          errorMessageBlock={errorMessageBlock}
           isSupportFileVar={isSupportFileVar}
         />
         <ComponentPickerBlock
@@ -203,6 +215,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           externalToolBlock={externalToolBlock}
           workflowVariableBlock={workflowVariableBlock}
           currentBlock={currentBlock}
+          errorMessageBlock={errorMessageBlock}
           isSupportFileVar={isSupportFileVar}
         />
         {
@@ -253,6 +266,14 @@ const PromptEditor: FC<PromptEditorProps> = ({
             </>
           )
         }
+        {
+          errorMessageBlock?.show && (
+            <>
+              <ErrorMessageBlock {...errorMessageBlock} />
+              <ErrorMessageBlockReplacementBlock {...errorMessageBlock} />
+            </>
+          )
+        }
         {
           isSupportFileVar && (
             <VariableValueBlock />

web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx

@@ -5,6 +5,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import type {
   ContextBlockType,
   CurrentBlockType,
+  ErrorMessageBlockType,
   ExternalToolBlockType,
   HistoryBlockType,
   QueryBlockType,
@@ -270,6 +271,7 @@ export const useOptions = (
   externalToolBlockType?: ExternalToolBlockType,
   workflowVariableBlockType?: WorkflowVariableBlockType,
   currentBlockType?: CurrentBlockType,
+  errorMessageBlockType?: ErrorMessageBlockType,
   queryString?: string,
 ) => {
   const promptOptions = usePromptOptions(contextBlock, queryBlock, historyBlock)
@@ -280,6 +282,19 @@ export const useOptions = (
     if (!workflowVariableBlockType?.show)
       return []
     const res = workflowVariableBlockType.variables || []
+    if(errorMessageBlockType?.show && res.findIndex(v => v.nodeId === 'error_message') === -1) {
+      res.unshift({
+        nodeId: 'error_message',
+        title: 'error_message',
+        isFlat: true,
+        vars: [
+          {
+            variable: 'error_message',
+            type: VarType.string,
+          },
+        ],
+      })
+    }
     if(currentBlockType?.show && res.findIndex(v => v.nodeId === 'current') === -1) {
       const title = currentBlockType.generatorType === 'prompt' ? 'current_prompt' : 'current_code'
       res.unshift({
@@ -295,7 +310,7 @@ export const useOptions = (
       })
     }
     return res
-  }, [workflowVariableBlockType, currentBlockType])
+  }, [workflowVariableBlockType?.show, workflowVariableBlockType?.variables, errorMessageBlockType?.show, currentBlockType?.show, currentBlockType?.generatorType])
 
   return useMemo(() => {
     return {

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

@@ -18,6 +18,7 @@ import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuP
 import type {
   ContextBlockType,
   CurrentBlockType,
+  ErrorMessageBlockType,
   ExternalToolBlockType,
   HistoryBlockType,
   QueryBlockType,
@@ -35,6 +36,7 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { KEY_ESCAPE_COMMAND } from 'lexical'
 import { INSERT_CURRENT_BLOCK_COMMAND } from '../current-block'
 import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
+import { INSERT_ERROR_MESSAGE_BLOCK_COMMAND } from '../error-message-block'
 
 type ComponentPickerProps = {
   triggerString: string
@@ -45,6 +47,7 @@ type ComponentPickerProps = {
   externalToolBlock?: ExternalToolBlockType
   workflowVariableBlock?: WorkflowVariableBlockType
   currentBlock?: CurrentBlockType
+  errorMessageBlock?: ErrorMessageBlockType
   isSupportFileVar?: boolean
 }
 const ComponentPicker = ({
@@ -56,6 +59,7 @@ const ComponentPicker = ({
   externalToolBlock,
   workflowVariableBlock,
   currentBlock,
+  errorMessageBlock,
   isSupportFileVar,
 }: ComponentPickerProps) => {
   const { eventEmitter } = useEventEmitterContextContext()
@@ -93,6 +97,7 @@ const ComponentPicker = ({
     externalToolBlock,
     workflowVariableBlock,
     currentBlock,
+    errorMessageBlock,
   )
 
   const onSelectOption = useCallback(
@@ -122,6 +127,8 @@ const ComponentPicker = ({
     if(isFlat) {
       if(variables[0] === 'current')
         editor.dispatchCommand(INSERT_CURRENT_BLOCK_COMMAND, currentBlock?.generatorType)
+      else if (variables[0] === 'error_message')
+        editor.dispatchCommand(INSERT_ERROR_MESSAGE_BLOCK_COMMAND, null)
     }
     else if (variables[1] === 'sys.query' || variables[1] === 'sys.files') {
       editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, [variables[1]])

web/app/components/base/prompt-editor/plugins/current-block/component.tsx

@@ -36,7 +36,7 @@ const CurrentBlockComponent: FC<CurrentBlockComponentProps> = ({
       ref={ref}
     >
       <Icon className='mr-0.5 h-[14px] w-[14px]' />
-      <div className='mr-1 text-xs font-medium'>{generatorType === GeneratorType.prompt ? 'current_prompt' : 'current_code'}</div>
+      <div className='text-xs font-medium'>{generatorType === GeneratorType.prompt ? 'current_prompt' : 'current_code'}</div>
     </div>
   )
 }

web/app/components/base/prompt-editor/plugins/error-message-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_ERROR_MESSAGE_COMMAND, ErrorMessageBlockNode } from '.'
+import cn from '@/utils/classnames'
+import { Variable02 } from '../../../icons/src/vender/solid/development'
+
+type Props = {
+  nodeKey: string
+}
+
+const ErrorMessageBlockComponent: FC<Props> = ({
+  nodeKey,
+}) => {
+  const [editor] = useLexicalComposerContext()
+  const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_ERROR_MESSAGE_COMMAND)
+
+  useEffect(() => {
+      if (!editor.hasNodes([ErrorMessageBlockNode]))
+        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-util-colors-orange-dark-orange-dark-600 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'>error_message</div>
+    </div>
+  )
+}
+
+export default ErrorMessageBlockComponent

web/app/components/base/prompt-editor/plugins/error-message-block/error-message-block-replacement-block.tsx

@@ -0,0 +1,61 @@
+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 { ERROR_MESSAGE_PLACEHOLDER_TEXT } from '../../constants'
+import type { ErrorMessageBlockType } from '../../types'
+import {
+  $createErrorMessageBlockNode,
+  ErrorMessageBlockNode,
+} from './node'
+import { CustomTextNode } from '../custom-text/node'
+
+const REGEX = new RegExp(ERROR_MESSAGE_PLACEHOLDER_TEXT)
+
+const ErrorMessageBlockReplacementBlock = ({
+  onInsert,
+}: ErrorMessageBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([ErrorMessageBlockNode]))
+      throw new Error('ErrorMessageBlockNodePlugin: ErrorMessageBlockNode not registered on editor')
+  }, [editor])
+
+  const createErrorMessageBlockNode = useCallback((): ErrorMessageBlockNode => {
+    if (onInsert)
+      onInsert()
+    return $applyNodeReplacement($createErrorMessageBlockNode())
+  }, [onInsert])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + ERROR_MESSAGE_PLACEHOLDER_TEXT.length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createErrorMessageBlockNode)),
+    )
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return null
+}
+
+export default memo(ErrorMessageBlockReplacementBlock)

web/app/components/base/prompt-editor/plugins/error-message-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 { ErrorMessageBlockType } from '../../types'
+import {
+  $createErrorMessageBlockNode,
+  ErrorMessageBlockNode,
+} from './node'
+
+export const INSERT_ERROR_MESSAGE_BLOCK_COMMAND = createCommand('INSERT_ERROR_MESSAGE_BLOCK_COMMAND')
+export const DELETE_ERROR_MESSAGE_COMMAND = createCommand('DELETE_ERROR_MESSAGE_COMMAND')
+
+const ErrorMessageBlock = memo(({
+  onInsert,
+  onDelete,
+}: ErrorMessageBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([ErrorMessageBlockNode]))
+      throw new Error('ERROR_MESSAGEBlockPlugin: ERROR_MESSAGEBlock not registered on editor')
+
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_ERROR_MESSAGE_BLOCK_COMMAND,
+        () => {
+          const Node = $createErrorMessageBlockNode()
+
+          $insertNodes([Node])
+
+          if (onInsert)
+            onInsert()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        DELETE_ERROR_MESSAGE_COMMAND,
+        () => {
+          if (onDelete)
+            onDelete()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor, onDelete, onInsert])
+
+  return null
+})
+ErrorMessageBlock.displayName = 'ErrorMessageBlock'
+
+export { ErrorMessageBlock }
+export { ErrorMessageBlockNode } from './node'
+export { default as ErrorMessageBlockReplacementBlock } from './error-message-block-replacement-block'

web/app/components/base/prompt-editor/plugins/error-message-block/node.tsx

@@ -0,0 +1,67 @@
+import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
+import { DecoratorNode } from 'lexical'
+import ErrorMessageBlockComponent from './component'
+
+export type SerializedNode = SerializedLexicalNode
+
+export class ErrorMessageBlockNode extends DecoratorNode<React.JSX.Element> {
+  static getType(): string {
+    return 'error-message-block'
+  }
+
+  static clone(node: ErrorMessageBlockNode): ErrorMessageBlockNode {
+    return new ErrorMessageBlockNode(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 (
+      <ErrorMessageBlockComponent
+        nodeKey={this.getKey()}
+      />
+    )
+  }
+
+  static importJSON(): ErrorMessageBlockNode {
+    const node = $createErrorMessageBlockNode()
+
+    return node
+  }
+
+  exportJSON(): SerializedNode {
+    return {
+      type: 'error-message-block',
+      version: 1,
+    }
+  }
+
+  getTextContent(): string {
+    return '{{#error_message#}}'
+  }
+}
+export function $createErrorMessageBlockNode(): ErrorMessageBlockNode {
+  return new ErrorMessageBlockNode()
+}
+
+export function $isErrorMessageBlockNode(
+  node: ErrorMessageBlockNode | LexicalNode | null | undefined,
+): boolean {
+  return node instanceof ErrorMessageBlockNode
+}

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

@@ -41,8 +41,6 @@ const WorkflowVariableBlockReplacementBlock = ({
     if (matchArr === null)
       return null
 
-    console.log(matchArr)
-
     const startOffset = matchArr.index
     const endOffset = startOffset + matchArr[0].length
     return {

web/app/components/base/prompt-editor/types.ts

@@ -83,3 +83,9 @@ export type CurrentBlockType = {
   onInsert?: () => void
   onDelete?: () => void
 }
+
+export type ErrorMessageBlockType = {
+  show?: boolean
+  onInsert?: () => void
+  onDelete?: () => void
+}

web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx

@@ -83,6 +83,8 @@ const Item: FC<ItemProps> = ({
       case 'current':
         Icon = isInCodeGeneratorInstructionEditor ? CodeAssistant : MagicEdit
         return <Icon className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />
+      case 'error_message':
+        return <Variable02 className='h-3.5 w-3.5 shrink-0 text-util-colors-orange-dark-orange-dark-600' />
     }
   }, [isFlat, isInCodeGeneratorInstructionEditor, itemData.variable])