From 7d80cb6d9593188b2f8e764cef5a244d8c0217f9 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 16 Jul 2025 11:24:10 +0800
Subject: [PATCH 01/36] feat: current block

---
 .../configuration/config/automatic/types.ts   |  4 +
 .../base/prompt-editor/constants.tsx          |  2 +
 .../plugins/current-block/component.tsx       | 24 ++++++
 .../current-block-replacement-block.tsx       | 62 +++++++++++++++
 .../plugins/current-block/index.tsx           | 66 ++++++++++++++++
 .../plugins/current-block/node.tsx            | 78 +++++++++++++++++++
 .../components/base/prompt-editor/types.ts    |  8 ++
 7 files changed, 244 insertions(+)
 create mode 100644 web/app/components/app/configuration/config/automatic/types.ts
 create mode 100644 web/app/components/base/prompt-editor/plugins/current-block/component.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/current-block/current-block-replacement-block.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/current-block/index.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/current-block/node.tsx

diff --git a/web/app/components/app/configuration/config/automatic/types.ts b/web/app/components/app/configuration/config/automatic/types.ts
new file mode 100644
index 0000000000..cc97569499
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/types.ts
@@ -0,0 +1,4 @@
+export enum GeneratorType {
+  prompt = 'prompt',
+  code = 'code',
+}
diff --git a/web/app/components/base/prompt-editor/constants.tsx b/web/app/components/base/prompt-editor/constants.tsx
index 31fbc0abb4..d694cab2de 100644
--- a/web/app/components/base/prompt-editor/constants.tsx
+++ b/web/app/components/base/prompt-editor/constants.tsx
@@ -3,6 +3,8 @@ import { SupportUploadFileTypes, type ValueSelector } from '../../workflow/types
 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 PRE_PROMPT_PLACEHOLDER_TEXT = '{{#pre_prompt#}}'
 export const UPDATE_DATASETS_EVENT_EMITTER = 'prompt-editor-context-block-update-datasets'
 export const UPDATE_HISTORY_EVENT_EMITTER = 'prompt-editor-history-block-update-role'
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
new file mode 100644
index 0000000000..2c4b678d0d
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
@@ -0,0 +1,24 @@
+import type { FC } from 'react'
+import { File05 } from '@/app/components/base/icons/src/vender/solid/files'
+import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
+
+type CurrentBlockComponentProps = {
+  nodeKey: string
+  generatorType: GeneratorType
+}
+
+const CurrentBlockComponent: FC<CurrentBlockComponentProps> = ({
+  generatorType,
+}) => {
+  return (
+    <div className={`
+      group inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#F4F3FF] pl-1 pr-0.5 text-[#6938EF] hover:bg-[#EBE9FE]
+      ${'bg-[#F4F3FF]'}
+    `}>
+      <File05 className='mr-1 h-[14px] w-[14px]' />
+      <div className='mr-1 text-xs font-medium'>{generatorType === GeneratorType.prompt ? 'current_prompt' : 'current_code'}</div>
+    </div>
+  )
+}
+
+export default CurrentBlockComponent
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/current-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/current-block/current-block-replacement-block.tsx
new file mode 100644
index 0000000000..8ca56b0cf4
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/current-block/current-block-replacement-block.tsx
@@ -0,0 +1,62 @@
+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 { CURRENT_PLACEHOLDER_TEXT } from '../../constants'
+import type { CurrentBlockType } from '../../types'
+import {
+  $createCurrentBlockNode,
+  CurrentBlockNode,
+} from './node'
+import { CustomTextNode } from '../custom-text/node'
+
+const REGEX = new RegExp(CURRENT_PLACEHOLDER_TEXT)
+
+const CurrentBlockReplacementBlock = ({
+  generatorType,
+  onInsert,
+}: CurrentBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([CurrentBlockNode]))
+      throw new Error('CurrentBlockNodePlugin: CurrentBlockNode not registered on editor')
+  }, [editor])
+
+  const createCurrentBlockNode = useCallback((): CurrentBlockNode => {
+    if (onInsert)
+      onInsert()
+    return $applyNodeReplacement($createCurrentBlockNode(generatorType))
+  }, [onInsert, generatorType])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + CURRENT_PLACEHOLDER_TEXT.length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createCurrentBlockNode)),
+    )
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return null
+}
+
+export default memo(CurrentBlockReplacementBlock)
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/index.tsx b/web/app/components/base/prompt-editor/plugins/current-block/index.tsx
new file mode 100644
index 0000000000..0b9ed6c5a4
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/current-block/index.tsx
@@ -0,0 +1,66 @@
+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 { CurrentBlockType } from '../../types'
+import {
+  $createCurrentBlockNode,
+  CurrentBlockNode,
+} from './node'
+
+export const INSERT_CURRENT_BLOCK_COMMAND = createCommand('INSERT_CURRENT_BLOCK_COMMAND')
+export const DELETE_CURRENT_BLOCK_COMMAND = createCommand('DELETE_CURRENT_BLOCK_COMMAND')
+
+const CurrentBlock = memo(({
+  generatorType,
+  onInsert,
+  onDelete,
+}: CurrentBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([CurrentBlockNode]))
+      throw new Error('CURRENTBlockPlugin: CURRENTBlock not registered on editor')
+
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_CURRENT_BLOCK_COMMAND,
+        () => {
+          const currentBlockNode = $createCurrentBlockNode(generatorType)
+
+          $insertNodes([currentBlockNode])
+
+          if (onInsert)
+            onInsert()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        DELETE_CURRENT_BLOCK_COMMAND,
+        () => {
+          if (onDelete)
+            onDelete()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor, generatorType, onDelete, onInsert])
+
+  return null
+})
+CurrentBlock.displayName = 'CurrentBlock'
+
+export { CurrentBlock }
+export { CurrentBlockNode } from './node'
+export { default as CurrentBlockReplacementBlock } from './current-block-replacement-block'
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/node.tsx b/web/app/components/base/prompt-editor/plugins/current-block/node.tsx
new file mode 100644
index 0000000000..6f2a3a1751
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/current-block/node.tsx
@@ -0,0 +1,78 @@
+import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
+import { DecoratorNode } from 'lexical'
+import CurrentBlockComponent from './component'
+import type { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
+
+export type SerializedNode = SerializedLexicalNode & { generatorType: GeneratorType; }
+
+export class CurrentBlockNode extends DecoratorNode<React.JSX.Element> {
+  __generatorType: GeneratorType
+  static getType(): string {
+    return 'current-block'
+  }
+
+  static clone(node: CurrentBlockNode): CurrentBlockNode {
+    return new CurrentBlockNode(node.__generatorType)
+  }
+
+  isInline(): boolean {
+    return true
+  }
+
+  constructor(generatorType: GeneratorType, key?: NodeKey) {
+    super(key)
+
+    this.__generatorType = generatorType
+  }
+
+  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 (
+      <CurrentBlockComponent
+        nodeKey={this.getKey()}
+        generatorType={this.getGeneratorType()}
+      />
+    )
+  }
+
+  getGeneratorType(): GeneratorType {
+    const self = this.getLatest()
+    return self.__generatorType
+  }
+
+  static importJSON(serializedNode: SerializedNode): CurrentBlockNode {
+    const node = $createCurrentBlockNode(serializedNode.generatorType)
+
+    return node
+  }
+
+  exportJSON(): SerializedNode {
+    return {
+      type: 'current-block',
+      version: 1,
+      generatorType: this.getGeneratorType(),
+    }
+  }
+
+  getTextContent(): string {
+    return '{{#current#}}'
+  }
+}
+export function $createCurrentBlockNode(type: GeneratorType): CurrentBlockNode {
+  return new CurrentBlockNode(type)
+}
+
+export function $isCurrentBlockNode(
+  node: CurrentBlockNode | LexicalNode | null | undefined,
+): boolean {
+  return node instanceof CurrentBlockNode
+}
diff --git a/web/app/components/base/prompt-editor/types.ts b/web/app/components/base/prompt-editor/types.ts
index e82ec1da16..88ae5fc3ab 100644
--- a/web/app/components/base/prompt-editor/types.ts
+++ b/web/app/components/base/prompt-editor/types.ts
@@ -1,3 +1,4 @@
+import type { GeneratorType } from '../../app/configuration/config/automatic/types'
 import type { Type } from '../../workflow/nodes/llm/types'
 import type { Dataset } from './plugins/context-block'
 import type { RoleName } from './plugins/history-block'
@@ -75,3 +76,10 @@ export type MenuTextMatch = {
   matchingString: string
   replaceableString: string
 }
+
+export type CurrentBlockType = {
+  show?: boolean
+  generatorType: GeneratorType
+  onInsert?: () => void
+  onDelete?: () => void
+}

From 6075ca5f5958378e64053252f69d51422ae95597 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 16 Jul 2025 16:09:07 +0800
Subject: [PATCH 02/36] feat: can choose current and show current

---
 .../vender/line/general/code-assistant.svg    |  6 ++
 .../assets/vender/line/general/magic-edit.svg |  6 ++
 .../vender/line/general/CodeAssistant.json    | 53 ++++++++++++++++++
 .../src/vender/line/general/CodeAssistant.tsx | 20 +++++++
 .../src/vender/line/general/MagicEdit.json    | 55 +++++++++++++++++++
 .../src/vender/line/general/MagicEdit.tsx     | 20 +++++++
 .../icons/src/vender/line/general/index.ts    |  2 +
 .../components/base/prompt-editor/index.tsx   | 28 ++++++++++
 .../plugins/component-picker-block/hooks.tsx  | 24 +++++++-
 .../plugins/component-picker-block/index.tsx  | 21 +++++--
 .../plugins/current-block/component.tsx       | 34 +++++++++---
 .../plugins/current-block/node.tsx            |  2 +-
 ...kflow-variable-block-replacement-block.tsx |  2 +
 .../variable/var-reference-vars.tsx           | 38 +++++++++++--
 web/app/components/workflow/types.ts          |  1 +
 15 files changed, 291 insertions(+), 21 deletions(-)
 create mode 100644 web/app/components/base/icons/assets/vender/line/general/code-assistant.svg
 create mode 100644 web/app/components/base/icons/assets/vender/line/general/magic-edit.svg
 create mode 100644 web/app/components/base/icons/src/vender/line/general/CodeAssistant.json
 create mode 100644 web/app/components/base/icons/src/vender/line/general/CodeAssistant.tsx
 create mode 100644 web/app/components/base/icons/src/vender/line/general/MagicEdit.json
 create mode 100644 web/app/components/base/icons/src/vender/line/general/MagicEdit.tsx

diff --git a/web/app/components/base/icons/assets/vender/line/general/code-assistant.svg b/web/app/components/base/icons/assets/vender/line/general/code-assistant.svg
new file mode 100644
index 0000000000..0051dfc271
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/line/general/code-assistant.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3C12.5523 3 13 3.44772 13 4C13 4.55228 12.5523 5 12 5H5.59962C5.30336 5 5.14096 5.00122 5.02443 5.01074C5.01998 5.01111 5.01573 5.01135 5.01173 5.01172C5.01136 5.01572 5.01112 5.01996 5.01076 5.02441C5.00124 5.14095 5.00001 5.30334 5.00001 5.59961V18.4004C5.00001 18.6967 5.00124 18.8591 5.01076 18.9756C5.01109 18.9797 5.01139 18.9836 5.01173 18.9873C5.01575 18.9877 5.01995 18.9889 5.02443 18.9893C5.14096 18.9988 5.30336 19 5.59962 19H18.4004C18.6967 19 18.8591 18.9988 18.9756 18.9893C18.9797 18.9889 18.9836 18.9876 18.9873 18.9873C18.9877 18.9836 18.9889 18.9797 18.9893 18.9756C18.9988 18.8591 19 18.6967 19 18.4004V12C19 11.4477 19.4477 11 20 11C20.5523 11 21 11.4477 21 12V18.4004C21 18.6638 21.0011 18.9219 20.9834 19.1387C20.9647 19.3672 20.9205 19.6369 20.7822 19.9082C20.5905 20.2845 20.2845 20.5905 19.9082 20.7822C19.6369 20.9205 19.3672 20.9647 19.1387 20.9834C18.9219 21.0011 18.6638 21 18.4004 21H5.59962C5.33625 21 5.07815 21.0011 4.86134 20.9834C4.63284 20.9647 4.36307 20.9204 4.09181 20.7822C3.71579 20.5906 3.40963 20.2847 3.21779 19.9082C3.07958 19.6369 3.03531 19.3672 3.01662 19.1387C2.9989 18.9219 3.00001 18.6638 3.00001 18.4004V5.59961C3.00001 5.33623 2.9989 5.07814 3.01662 4.86133C3.03531 4.63283 3.07958 4.36305 3.21779 4.0918C3.40953 3.71555 3.71557 3.40952 4.09181 3.21777C4.36306 3.07957 4.63285 3.0353 4.86134 3.0166C5.07815 2.99889 5.33624 3 5.59962 3H12Z" fill="black"/>
+<path d="M13.293 9.29297C13.6835 8.90244 14.3165 8.90244 14.707 9.29297L16.707 11.293C17.0975 11.6835 17.0975 12.3165 16.707 12.707L14.707 14.707C14.3165 15.0975 13.6835 15.0975 13.293 14.707C12.9025 14.3165 12.9025 13.6835 13.293 13.293L14.586 12L13.293 10.707C12.9025 10.3165 12.9025 9.68349 13.293 9.29297Z" fill="black"/>
+<path d="M9.29298 9.29297C9.68351 8.90244 10.3165 8.90244 10.707 9.29297C11.0975 9.6835 11.0975 10.3165 10.707 10.707L9.41408 12L10.707 13.293L10.7754 13.3691C11.0957 13.7619 11.0731 14.3409 10.707 14.707C10.341 15.0731 9.76192 15.0957 9.36915 14.7754L9.29298 14.707L7.29298 12.707C6.90246 12.3165 6.90246 11.6835 7.29298 11.293L9.29298 9.29297Z" fill="black"/>
+<path d="M18.501 2C18.7487 2.00048 18.9564 2.18654 18.9844 2.43262C19.1561 3.94883 20.0165 4.87694 21.5557 5.01367C21.8075 5.03614 22.0003 5.24816 22 5.50098C21.9995 5.75356 21.8063 5.96437 21.5547 5.98633C20.0372 6.11768 19.1176 7.03726 18.9863 8.55469C18.9644 8.80629 18.7536 8.99948 18.501 9C18.2483 9.00028 18.0362 8.80743 18.0137 8.55566C17.877 7.01647 16.9488 6.15613 15.4326 5.98438C15.1866 5.95634 15.0006 5.74863 15 5.50098C14.9997 5.25311 15.1855 5.04417 15.4317 5.01563C16.9697 4.83823 17.8382 3.96966 18.0156 2.43164C18.0442 2.18545 18.2531 1.99975 18.501 2Z" fill="black"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/line/general/magic-edit.svg b/web/app/components/base/icons/assets/vender/line/general/magic-edit.svg
new file mode 100644
index 0000000000..9bc82f4853
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/line/general/magic-edit.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3691 3.22448C15.7619 2.90422 16.3409 2.92682 16.707 3.29284L20.707 7.29284C21.0975 7.68334 21.0975 8.31637 20.707 8.7069L8.70703 20.7069C8.5195 20.8944 8.26521 20.9999 8 20.9999H4C3.44771 20.9999 3 20.5522 3 19.9999V15.9999L3.00488 15.9012C3.0276 15.6723 3.12886 15.4569 3.29297 15.2928L15.293 3.29284L15.3691 3.22448ZM5 16.4139V18.9999H7.58593L18.5859 7.99987L16 5.41394L5 16.4139Z" fill="black"/>
+<path d="M18.2451 15.1581C18.3502 14.9478 18.6498 14.9478 18.7549 15.1581L19.4082 16.4637C19.4358 16.5189 19.4809 16.5641 19.5361 16.5917L20.8428 17.245C21.0525 17.3502 21.0524 17.6495 20.8428 17.7548L19.5361 18.4081C19.4809 18.4357 19.4358 18.4808 19.4082 18.536L18.7549 19.8426C18.6497 20.0525 18.3503 20.0525 18.2451 19.8426L17.5918 18.536C17.5642 18.4808 17.5191 18.4357 17.4639 18.4081L16.1572 17.7548C15.9476 17.6495 15.9475 17.3502 16.1572 17.245L17.4639 16.5917C17.5191 16.5641 17.5642 16.5189 17.5918 16.4637L18.2451 15.1581Z" fill="black"/>
+<path d="M4.24511 5.15808C4.35024 4.94783 4.64975 4.94783 4.75488 5.15808L5.4082 6.46374C5.4358 6.51895 5.48092 6.56406 5.53613 6.59167L6.84277 7.24499C7.05248 7.3502 7.05238 7.64946 6.84277 7.75476L5.53613 8.40808C5.48092 8.43568 5.4358 8.4808 5.4082 8.53601L4.75488 9.84265C4.64966 10.0525 4.35033 10.0525 4.24511 9.84265L3.59179 8.53601C3.56418 8.4808 3.51907 8.43568 3.46386 8.40808L2.15722 7.75476C1.94764 7.64945 1.94755 7.35021 2.15722 7.24499L3.46386 6.59167C3.51907 6.56406 3.56418 6.51895 3.59179 6.46374L4.24511 5.15808Z" fill="black"/>
+<path d="M8.73535 2.16394C8.84432 1.94601 9.15568 1.94601 9.26465 2.16394L9.74414 3.12292C9.77275 3.18014 9.81973 3.22712 9.87695 3.25573L10.8369 3.73522C11.0546 3.84424 11.0545 4.15544 10.8369 4.26452L9.87695 4.74401C9.81973 4.77262 9.77275 4.81961 9.74414 4.87683L9.26465 5.83679C9.15565 6.05458 8.84435 6.05457 8.73535 5.83679L8.25586 4.87683C8.22725 4.81961 8.18026 4.77262 8.12304 4.74401L7.16308 4.26452C6.94547 4.15546 6.94539 3.84422 7.16308 3.73522L8.12304 3.25573C8.18026 3.22712 8.22725 3.18014 8.25586 3.12292L8.73535 2.16394Z" fill="black"/>
+</svg>
diff --git a/web/app/components/base/icons/src/vender/line/general/CodeAssistant.json b/web/app/components/base/icons/src/vender/line/general/CodeAssistant.json
new file mode 100644
index 0000000000..03dca1bd11
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/line/general/CodeAssistant.json
@@ -0,0 +1,53 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M12 3C12.5523 3 13 3.44772 13 4C13 4.55228 12.5523 5 12 5H5.59962C5.30336 5 5.14096 5.00122 5.02443 5.01074C5.01998 5.01111 5.01573 5.01135 5.01173 5.01172C5.01136 5.01572 5.01112 5.01996 5.01076 5.02441C5.00124 5.14095 5.00001 5.30334 5.00001 5.59961V18.4004C5.00001 18.6967 5.00124 18.8591 5.01076 18.9756C5.01109 18.9797 5.01139 18.9836 5.01173 18.9873C5.01575 18.9877 5.01995 18.9889 5.02443 18.9893C5.14096 18.9988 5.30336 19 5.59962 19H18.4004C18.6967 19 18.8591 18.9988 18.9756 18.9893C18.9797 18.9889 18.9836 18.9876 18.9873 18.9873C18.9877 18.9836 18.9889 18.9797 18.9893 18.9756C18.9988 18.8591 19 18.6967 19 18.4004V12C19 11.4477 19.4477 11 20 11C20.5523 11 21 11.4477 21 12V18.4004C21 18.6638 21.0011 18.9219 20.9834 19.1387C20.9647 19.3672 20.9205 19.6369 20.7822 19.9082C20.5905 20.2845 20.2845 20.5905 19.9082 20.7822C19.6369 20.9205 19.3672 20.9647 19.1387 20.9834C18.9219 21.0011 18.6638 21 18.4004 21H5.59962C5.33625 21 5.07815 21.0011 4.86134 20.9834C4.63284 20.9647 4.36307 20.9204 4.09181 20.7822C3.71579 20.5906 3.40963 20.2847 3.21779 19.9082C3.07958 19.6369 3.03531 19.3672 3.01662 19.1387C2.9989 18.9219 3.00001 18.6638 3.00001 18.4004V5.59961C3.00001 5.33623 2.9989 5.07814 3.01662 4.86133C3.03531 4.63283 3.07958 4.36305 3.21779 4.0918C3.40953 3.71555 3.71557 3.40952 4.09181 3.21777C4.36306 3.07957 4.63285 3.0353 4.86134 3.0166C5.07815 2.99889 5.33624 3 5.59962 3H12Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M13.293 9.29297C13.6835 8.90244 14.3165 8.90244 14.707 9.29297L16.707 11.293C17.0975 11.6835 17.0975 12.3165 16.707 12.707L14.707 14.707C14.3165 15.0975 13.6835 15.0975 13.293 14.707C12.9025 14.3165 12.9025 13.6835 13.293 13.293L14.586 12L13.293 10.707C12.9025 10.3165 12.9025 9.68349 13.293 9.29297Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M9.29298 9.29297C9.68351 8.90244 10.3165 8.90244 10.707 9.29297C11.0975 9.6835 11.0975 10.3165 10.707 10.707L9.41408 12L10.707 13.293L10.7754 13.3691C11.0957 13.7619 11.0731 14.3409 10.707 14.707C10.341 15.0731 9.76192 15.0957 9.36915 14.7754L9.29298 14.707L7.29298 12.707C6.90246 12.3165 6.90246 11.6835 7.29298 11.293L9.29298 9.29297Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M18.501 2C18.7487 2.00048 18.9564 2.18654 18.9844 2.43262C19.1561 3.94883 20.0165 4.87694 21.5557 5.01367C21.8075 5.03614 22.0003 5.24816 22 5.50098C21.9995 5.75356 21.8063 5.96437 21.5547 5.98633C20.0372 6.11768 19.1176 7.03726 18.9863 8.55469C18.9644 8.80629 18.7536 8.99948 18.501 9C18.2483 9.00028 18.0362 8.80743 18.0137 8.55566C17.877 7.01647 16.9488 6.15613 15.4326 5.98438C15.1866 5.95634 15.0006 5.74863 15 5.50098C14.9997 5.25311 15.1855 5.04417 15.4317 5.01563C16.9697 4.83823 17.8382 3.96966 18.0156 2.43164C18.0442 2.18545 18.2531 1.99975 18.501 2Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "CodeAssistant"
+}
diff --git a/web/app/components/base/icons/src/vender/line/general/CodeAssistant.tsx b/web/app/components/base/icons/src/vender/line/general/CodeAssistant.tsx
new file mode 100644
index 0000000000..71adb145fb
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/line/general/CodeAssistant.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './CodeAssistant.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'CodeAssistant'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/MagicEdit.json b/web/app/components/base/icons/src/vender/line/general/MagicEdit.json
new file mode 100644
index 0000000000..3c2be09743
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/line/general/MagicEdit.json
@@ -0,0 +1,55 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"fill-rule": "evenodd",
+					"clip-rule": "evenodd",
+					"d": "M15.3691 3.22448C15.7619 2.90422 16.3409 2.92682 16.707 3.29284L20.707 7.29284C21.0975 7.68334 21.0975 8.31637 20.707 8.7069L8.70703 20.7069C8.5195 20.8944 8.26521 20.9999 8 20.9999H4C3.44771 20.9999 3 20.5522 3 19.9999V15.9999L3.00488 15.9012C3.0276 15.6723 3.12886 15.4569 3.29297 15.2928L15.293 3.29284L15.3691 3.22448ZM5 16.4139V18.9999H7.58593L18.5859 7.99987L16 5.41394L5 16.4139Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M18.2451 15.1581C18.3502 14.9478 18.6498 14.9478 18.7549 15.1581L19.4082 16.4637C19.4358 16.5189 19.4809 16.5641 19.5361 16.5917L20.8428 17.245C21.0525 17.3502 21.0524 17.6495 20.8428 17.7548L19.5361 18.4081C19.4809 18.4357 19.4358 18.4808 19.4082 18.536L18.7549 19.8426C18.6497 20.0525 18.3503 20.0525 18.2451 19.8426L17.5918 18.536C17.5642 18.4808 17.5191 18.4357 17.4639 18.4081L16.1572 17.7548C15.9476 17.6495 15.9475 17.3502 16.1572 17.245L17.4639 16.5917C17.5191 16.5641 17.5642 16.5189 17.5918 16.4637L18.2451 15.1581Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M4.24511 5.15808C4.35024 4.94783 4.64975 4.94783 4.75488 5.15808L5.4082 6.46374C5.4358 6.51895 5.48092 6.56406 5.53613 6.59167L6.84277 7.24499C7.05248 7.3502 7.05238 7.64946 6.84277 7.75476L5.53613 8.40808C5.48092 8.43568 5.4358 8.4808 5.4082 8.53601L4.75488 9.84265C4.64966 10.0525 4.35033 10.0525 4.24511 9.84265L3.59179 8.53601C3.56418 8.4808 3.51907 8.43568 3.46386 8.40808L2.15722 7.75476C1.94764 7.64945 1.94755 7.35021 2.15722 7.24499L3.46386 6.59167C3.51907 6.56406 3.56418 6.51895 3.59179 6.46374L4.24511 5.15808Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M8.73535 2.16394C8.84432 1.94601 9.15568 1.94601 9.26465 2.16394L9.74414 3.12292C9.77275 3.18014 9.81973 3.22712 9.87695 3.25573L10.8369 3.73522C11.0546 3.84424 11.0545 4.15544 10.8369 4.26452L9.87695 4.74401C9.81973 4.77262 9.77275 4.81961 9.74414 4.87683L9.26465 5.83679C9.15565 6.05458 8.84435 6.05457 8.73535 5.83679L8.25586 4.87683C8.22725 4.81961 8.18026 4.77262 8.12304 4.74401L7.16308 4.26452C6.94547 4.15546 6.94539 3.84422 7.16308 3.73522L8.12304 3.25573C8.18026 3.22712 8.22725 3.18014 8.25586 3.12292L8.73535 2.16394Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "MagicEdit"
+}
diff --git a/web/app/components/base/icons/src/vender/line/general/MagicEdit.tsx b/web/app/components/base/icons/src/vender/line/general/MagicEdit.tsx
new file mode 100644
index 0000000000..4e49c55277
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/line/general/MagicEdit.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './MagicEdit.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'MagicEdit'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/index.ts b/web/app/components/base/icons/src/vender/line/general/index.ts
index b5c7a7bbc1..f0ee776c60 100644
--- a/web/app/components/base/icons/src/vender/line/general/index.ts
+++ b/web/app/components/base/icons/src/vender/line/general/index.ts
@@ -3,6 +3,7 @@ export { default as Bookmark } from './Bookmark'
 export { default as CheckDone01 } from './CheckDone01'
 export { default as Check } from './Check'
 export { default as ChecklistSquare } from './ChecklistSquare'
+export { default as CodeAssistant } from './CodeAssistant'
 export { default as DotsGrid } from './DotsGrid'
 export { default as Edit02 } from './Edit02'
 export { default as Edit04 } from './Edit04'
@@ -14,6 +15,7 @@ export { default as LinkExternal02 } from './LinkExternal02'
 export { default as LogIn04 } from './LogIn04'
 export { default as LogOut01 } from './LogOut01'
 export { default as LogOut04 } from './LogOut04'
+export { default as MagicEdit } from './MagicEdit'
 export { default as Menu01 } from './Menu01'
 export { default as Pin01 } from './Pin01'
 export { default as Pin02 } from './Pin02'
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index a87a51cd50..4288ad1e26 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -39,6 +39,11 @@ import {
   WorkflowVariableBlockNode,
   WorkflowVariableBlockReplacementBlock,
 } from './plugins/workflow-variable-block'
+import {
+  CurrentBlock,
+  CurrentBlockNode,
+  CurrentBlockReplacementBlock,
+} from './plugins/current-block'
 import VariableBlock from './plugins/variable-block'
 import VariableValueBlock from './plugins/variable-value-block'
 import { VariableValueBlockNode } from './plugins/variable-value-block/node'
@@ -48,6 +53,7 @@ import UpdateBlock from './plugins/update-block'
 import { textToEditorState } from './utils'
 import type {
   ContextBlockType,
+  CurrentBlockType,
   ExternalToolBlockType,
   HistoryBlockType,
   QueryBlockType,
@@ -60,6 +66,7 @@ import {
 } from './constants'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import cn from '@/utils/classnames'
+import { GeneratorType } from '../../app/configuration/config/automatic/types'
 
 export type PromptEditorProps = {
   instanceId?: string
@@ -80,6 +87,7 @@ export type PromptEditorProps = {
   variableBlock?: VariableBlockType
   externalToolBlock?: ExternalToolBlockType
   workflowVariableBlock?: WorkflowVariableBlockType
+  currentBlock?: CurrentBlockType
   isSupportFileVar?: boolean
 }
 
@@ -102,6 +110,10 @@ const PromptEditor: FC<PromptEditorProps> = ({
   variableBlock,
   externalToolBlock,
   workflowVariableBlock,
+  currentBlock = {
+    show: true,
+    generatorType: GeneratorType.prompt,
+  },
   isSupportFileVar,
 }) => {
   const { eventEmitter } = useEventEmitterContextContext()
@@ -119,6 +131,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
       QueryBlockNode,
       WorkflowVariableBlockNode,
       VariableValueBlockNode,
+      CurrentBlockNode,
     ],
     editorState: textToEditorState(value || ''),
     onError: (error: Error) => {
@@ -178,6 +191,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           variableBlock={variableBlock}
           externalToolBlock={externalToolBlock}
           workflowVariableBlock={workflowVariableBlock}
+          currentBlock={currentBlock}
           isSupportFileVar={isSupportFileVar}
         />
         <ComponentPickerBlock
@@ -188,6 +202,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           variableBlock={variableBlock}
           externalToolBlock={externalToolBlock}
           workflowVariableBlock={workflowVariableBlock}
+          currentBlock={currentBlock}
           isSupportFileVar={isSupportFileVar}
         />
         {
@@ -230,6 +245,19 @@ const PromptEditor: FC<PromptEditorProps> = ({
             </>
           )
         }
+        {
+          currentBlock?.show && (
+            <>
+              <CurrentBlock {...currentBlock} />
+              <CurrentBlockReplacementBlock {...currentBlock} />
+            </>
+          )
+        }
+        {
+          isSupportFileVar && (
+            <VariableValueBlock />
+          )
+        }
         <OnChangePlugin onChange={handleEditorChange} />
         <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
         <UpdateBlock instanceId={instanceId} />
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
index 7332a0d39b..818f850bd2 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
@@ -4,6 +4,7 @@ import { $insertNodes } from 'lexical'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import type {
   ContextBlockType,
+  CurrentBlockType,
   ExternalToolBlockType,
   HistoryBlockType,
   QueryBlockType,
@@ -27,6 +28,7 @@ import { BracketsX } from '@/app/components/base/icons/src/vender/line/developme
 import { UserEdit02 } from '@/app/components/base/icons/src/vender/solid/users'
 import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import AppIcon from '@/app/components/base/app-icon'
+import { VarType } from '@/app/components/workflow/types'
 
 export const usePromptOptions = (
   contextBlock?: ContextBlockType,
@@ -267,17 +269,33 @@ export const useOptions = (
   variableBlock?: VariableBlockType,
   externalToolBlockType?: ExternalToolBlockType,
   workflowVariableBlockType?: WorkflowVariableBlockType,
+  currentBlockType?: CurrentBlockType,
   queryString?: string,
 ) => {
   const promptOptions = usePromptOptions(contextBlock, queryBlock, historyBlock)
   const variableOptions = useVariableOptions(variableBlock, queryString)
   const externalToolOptions = useExternalToolOptions(externalToolBlockType, queryString)
+
   const workflowVariableOptions = useMemo(() => {
     if (!workflowVariableBlockType?.show)
       return []
-
-    return workflowVariableBlockType.variables || []
-  }, [workflowVariableBlockType])
+    const res = workflowVariableBlockType.variables || []
+    if(currentBlockType?.show && res.findIndex(v => v.nodeId === 'current') === -1) {
+      const title = currentBlockType.generatorType === 'prompt' ? 'current_prompt' : 'current_code'
+      res.unshift({
+        nodeId: 'current',
+        title,
+        isFlat: true,
+        vars: [
+          {
+            variable: 'current',
+            type: VarType.string,
+          },
+        ],
+      })
+    }
+    return res
+  }, [workflowVariableBlockType, currentBlockType])
 
   return useMemo(() => {
     return {
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
index bffcdc60d2..f55db95fb3 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
@@ -17,6 +17,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin'
 import type {
   ContextBlockType,
+  CurrentBlockType,
   ExternalToolBlockType,
   HistoryBlockType,
   QueryBlockType,
@@ -32,6 +33,8 @@ import type { PickerBlockMenuOption } from './menu'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 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'
 
 type ComponentPickerProps = {
   triggerString: string
@@ -41,6 +44,7 @@ type ComponentPickerProps = {
   variableBlock?: VariableBlockType
   externalToolBlock?: ExternalToolBlockType
   workflowVariableBlock?: WorkflowVariableBlockType
+  currentBlock?: CurrentBlockType
   isSupportFileVar?: boolean
 }
 const ComponentPicker = ({
@@ -51,6 +55,7 @@ const ComponentPicker = ({
   variableBlock,
   externalToolBlock,
   workflowVariableBlock,
+  currentBlock,
   isSupportFileVar,
 }: ComponentPickerProps) => {
   const { eventEmitter } = useEventEmitterContextContext()
@@ -87,6 +92,7 @@ const ComponentPicker = ({
     variableBlock,
     externalToolBlock,
     workflowVariableBlock,
+    currentBlock,
   )
 
   const onSelectOption = useCallback(
@@ -112,12 +118,18 @@ const ComponentPicker = ({
       if (needRemove)
         needRemove.remove()
     })
-
-    if (variables[1] === 'sys.query' || variables[1] === 'sys.files')
+    const isFlat = variables.length === 1
+    if(isFlat) {
+      if(variables[0] === 'current')
+        editor.dispatchCommand(INSERT_CURRENT_BLOCK_COMMAND, currentBlock?.generatorType)
+    }
+    else if (variables[1] === 'sys.query' || variables[1] === 'sys.files') {
       editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, [variables[1]])
-    else
+    }
+    else {
       editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, variables)
-  }, [editor, checkForTriggerMatch, triggerString])
+    }
+  }, [editor, currentBlock?.generatorType, checkForTriggerMatch, triggerString])
 
   const handleClose = useCallback(() => {
     const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' })
@@ -166,6 +178,7 @@ const ComponentPicker = ({
                         onClose={handleClose}
                         onBlur={handleClose}
                         autoFocus={false}
+                        isInCodeGeneratorInstructionEditor={currentBlock?.generatorType === GeneratorType.code}
                       />
                     </div>
                   )
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
index 2c4b678d0d..788c5fd6c3 100644
--- a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
@@ -1,6 +1,10 @@
-import type { FC } from 'react'
-import { File05 } from '@/app/components/base/icons/src/vender/solid/files'
+import { type FC, useEffect } from 'react'
 import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useSelectOrDelete } from '../../hooks'
+import { CurrentBlockNode, DELETE_CURRENT_BLOCK_COMMAND } from '.'
+import cn from '@/utils/classnames'
+import { CodeAssistant, MagicEdit } from '../../../icons/src/vender/line/general'
 
 type CurrentBlockComponentProps = {
   nodeKey: string
@@ -8,14 +12,30 @@ type CurrentBlockComponentProps = {
 }
 
 const CurrentBlockComponent: FC<CurrentBlockComponentProps> = ({
+  nodeKey,
   generatorType,
 }) => {
+  const [editor] = useLexicalComposerContext()
+  const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_CURRENT_BLOCK_COMMAND)
+
+  const Icon = generatorType === GeneratorType.prompt ? MagicEdit : CodeAssistant
+  useEffect(() => {
+      if (!editor.hasNodes([CurrentBlockNode]))
+        throw new Error('WorkflowVariableBlockPlugin: WorkflowVariableBlock not registered on editor')
+    }, [editor])
+
   return (
-    <div className={`
-      group inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#F4F3FF] pl-1 pr-0.5 text-[#6938EF] hover:bg-[#EBE9FE]
-      ${'bg-[#F4F3FF]'}
-    `}>
-      <File05 className='mr-1 h-[14px] w-[14px]' />
+    <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-violet-violet-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}
+    >
+      <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>
   )
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/node.tsx b/web/app/components/base/prompt-editor/plugins/current-block/node.tsx
index 6f2a3a1751..eb0239f613 100644
--- a/web/app/components/base/prompt-editor/plugins/current-block/node.tsx
+++ b/web/app/components/base/prompt-editor/plugins/current-block/node.tsx
@@ -12,7 +12,7 @@ export class CurrentBlockNode extends DecoratorNode<React.JSX.Element> {
   }
 
   static clone(node: CurrentBlockNode): CurrentBlockNode {
-    return new CurrentBlockNode(node.__generatorType)
+    return new CurrentBlockNode(node.__generatorType, node.getKey())
   }
 
   isInline(): boolean {
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx
index 4d0c80f10f..85f0cb8e09 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx
@@ -41,6 +41,8 @@ const WorkflowVariableBlockReplacementBlock = ({
     if (matchArr === null)
       return null
 
+    console.log(matchArr)
+
     const startOffset = matchArr.index
     const endOffset = startOffset + matchArr[0].length
     return {
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 303840d8e7..3414903318 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -23,6 +23,7 @@ import type { Field } from '@/app/components/workflow/nodes/llm/types'
 import { FILE_STRUCT } from '@/app/components/workflow/constants'
 import { Loop } from '@/app/components/base/icons/src/vender/workflow'
 import { noop } from 'lodash-es'
+import { CodeAssistant, MagicEdit } from '@/app/components/base/icons/src/vender/line/general'
 
 type ObjectChildrenProps = {
   nodeId: string
@@ -46,6 +47,8 @@ type ItemProps = {
   isSupportFileVar?: boolean
   isException?: boolean
   isLoopVar?: boolean
+  isFlat?: boolean
+  isInCodeGeneratorInstructionEditor?: boolean
   zIndex?: number
 }
 
@@ -61,6 +64,8 @@ const Item: FC<ItemProps> = ({
   isSupportFileVar,
   isException,
   isLoopVar,
+  isFlat,
+  isInCodeGeneratorInstructionEditor,
   zIndex,
 }) => {
   const isStructureOutput = itemData.type === VarType.object && (itemData.children as StructuredOutput)?.schema?.properties
@@ -69,6 +74,17 @@ const Item: FC<ItemProps> = ({
   const isSys = itemData.variable.startsWith('sys.')
   const isEnv = itemData.variable.startsWith('env.')
   const isChatVar = itemData.variable.startsWith('conversation.')
+  const flatVarIcon = useMemo(() => {
+    if(!isFlat)
+      return null
+    const variable = itemData.variable
+    let Icon
+    switch (variable) {
+      case 'current':
+        Icon = isInCodeGeneratorInstructionEditor ? CodeAssistant : MagicEdit
+        return <Icon className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />
+    }
+  }, [isFlat, isInCodeGeneratorInstructionEditor, itemData.variable])
 
   const objStructuredOutput: StructuredOutput | null = useMemo(() => {
     if (!isObj) return null
@@ -125,7 +141,10 @@ const Item: FC<ItemProps> = ({
     if (!isSupportFileVar && isFile)
       return
 
-    if (isSys || isEnv || isChatVar) { // system variable | environment variable | conversation variable
+    if(isFlat) {
+      onChange([itemData.variable], itemData)
+    }
+    else if (isSys || isEnv || isChatVar) { // system variable | environment variable | conversation variable
       onChange([...objPath, ...itemData.variable.split('.')], itemData)
     }
     else {
@@ -150,10 +169,11 @@ const Item: FC<ItemProps> = ({
           onMouseDown={e => e.preventDefault()}
         >
           <div className='flex w-0 grow items-center'>
-            {!isEnv && !isChatVar && !isLoopVar && <Variable02 className={cn('h-3.5 w-3.5 shrink-0 text-text-accent', isException && 'text-text-warning')} />}
+            {!isFlat && !isEnv && !isChatVar && !isLoopVar && <Variable02 className={cn('h-3.5 w-3.5 shrink-0 text-text-accent', isException && 'text-text-warning')} />}
             {isEnv && <Env className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
             {isChatVar && <BubbleX className='h-3.5 w-3.5 shrink-0 text-util-colors-teal-teal-700' />}
             {isLoopVar && <Loop className='h-3.5 w-3.5 shrink-0 text-util-colors-cyan-cyan-500' />}
+            {isFlat && flatVarIcon}
             {!isEnv && !isChatVar && (
               <div title={itemData.variable} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{itemData.variable}</div>
             )}
@@ -263,6 +283,7 @@ type Props = {
   onClose?: () => void
   onBlur?: () => void
   zIndex?: number
+  isInCodeGeneratorInstructionEditor?: boolean
   autoFocus?: boolean
 }
 const VarReferenceVars: FC<Props> = ({
@@ -276,6 +297,7 @@ const VarReferenceVars: FC<Props> = ({
   onClose,
   onBlur,
   zIndex,
+  isInCodeGeneratorInstructionEditor,
   autoFocus = true,
 }) => {
   const { t } = useTranslation()
@@ -345,10 +367,12 @@ const VarReferenceVars: FC<Props> = ({
           {
             filteredVars.map((item, i) => (
               <div key={i}>
-                <div
-                  className='system-xs-medium-uppercase truncate px-3 leading-[22px] text-text-tertiary'
-                  title={item.title}
-                >{item.title}</div>
+                {!item.isFlat && (
+                  <div
+                    className='system-xs-medium-uppercase truncate px-3 leading-[22px] text-text-tertiary'
+                    title={item.title}
+                  >{item.title}</div>
+                )}
                 {item.vars.map((v, j) => (
                   <Item
                     key={j}
@@ -361,6 +385,8 @@ const VarReferenceVars: FC<Props> = ({
                     isSupportFileVar={isSupportFileVar}
                     isException={v.isException}
                     isLoopVar={item.isLoop}
+                    isFlat={item.isFlat}
+                    isInCodeGeneratorInstructionEditor={isInCodeGeneratorInstructionEditor}
                     zIndex={zIndex}
                   />
                 ))}
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index 507d494c74..2592759351 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -293,6 +293,7 @@ export type NodeOutPutVar = {
   vars: Var[]
   isStartNode?: boolean
   isLoop?: boolean
+  isFlat?: boolean
 }
 
 export type Block = {

From da560e595033fe7ca410400e94a14bce3c1c9391 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 16 Jul 2025 16:16:30 +0800
Subject: [PATCH 03/36] chore: current ui fix

---
 web/app/components/base/prompt-editor/index.tsx        |  2 +-
 .../_base/components/variable/var-reference-vars.tsx   | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 4288ad1e26..7d70f2b10e 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -112,7 +112,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
   workflowVariableBlock,
   currentBlock = {
     show: true,
-    generatorType: GeneratorType.prompt,
+    generatorType: GeneratorType.code,
   },
   isSupportFileVar,
 }) => {
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 3414903318..8575aca247 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -86,6 +86,14 @@ const Item: FC<ItemProps> = ({
     }
   }, [isFlat, isInCodeGeneratorInstructionEditor, itemData.variable])
 
+  const varName = useMemo(() => {
+    if(!isFlat)
+      return itemData.variable
+    if (itemData.variable === 'current')
+      return isInCodeGeneratorInstructionEditor ? 'current_code' : 'current_prompt'
+    return itemData.variable
+  }, [isFlat, isInCodeGeneratorInstructionEditor, itemData.variable])
+
   const objStructuredOutput: StructuredOutput | null = useMemo(() => {
     if (!isObj) return null
     const properties: Record<string, Field> = {};
@@ -175,7 +183,7 @@ const Item: FC<ItemProps> = ({
             {isLoopVar && <Loop className='h-3.5 w-3.5 shrink-0 text-util-colors-cyan-cyan-500' />}
             {isFlat && flatVarIcon}
             {!isEnv && !isChatVar && (
-              <div title={itemData.variable} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{itemData.variable}</div>
+              <div title={itemData.variable} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{varName}</div>
             )}
             {isEnv && (
               <div title={itemData.variable} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{itemData.variable.replace('env.', '')}</div>

From 3160e5e5629d554904266204a5235ab1263f8dd1 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 16 Jul 2025 17:52:11 +0800
Subject: [PATCH 04/36] feat: add error message

---
 .../base/prompt-editor/constants.tsx          |  1 +
 .../components/base/prompt-editor/index.tsx   | 21 ++++++
 .../plugins/component-picker-block/hooks.tsx  | 17 ++++-
 .../plugins/component-picker-block/index.tsx  |  7 ++
 .../plugins/current-block/component.tsx       |  2 +-
 .../plugins/error-message-block/component.tsx | 40 +++++++++++
 .../error-message-block-replacement-block.tsx | 61 +++++++++++++++++
 .../plugins/error-message-block/index.tsx     | 65 ++++++++++++++++++
 .../plugins/error-message-block/node.tsx      | 67 +++++++++++++++++++
 ...kflow-variable-block-replacement-block.tsx |  2 -
 .../components/base/prompt-editor/types.ts    |  6 ++
 .../variable/var-reference-vars.tsx           |  2 +
 12 files changed, 287 insertions(+), 4 deletions(-)
 create mode 100644 web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/error-message-block/error-message-block-replacement-block.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/error-message-block/index.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/error-message-block/node.tsx

diff --git a/web/app/components/base/prompt-editor/constants.tsx b/web/app/components/base/prompt-editor/constants.tsx
index d694cab2de..2fd0a62e95 100644
--- a/web/app/components/base/prompt-editor/constants.tsx
+++ b/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'
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 7d70f2b10e..0a21587bc6 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/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 />
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
index 818f850bd2..51689e1790 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
+++ b/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 {
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
index f55db95fb3..73b81f957f 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
+++ b/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]])
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
index 788c5fd6c3..7e56ffa6cc 100644
--- a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
+++ b/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>
   )
 }
diff --git a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
new file mode 100644
index 0000000000..e5d113f680
--- /dev/null
+++ b/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
diff --git a/web/app/components/base/prompt-editor/plugins/error-message-block/error-message-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/error-message-block/error-message-block-replacement-block.tsx
new file mode 100644
index 0000000000..80c89c7325
--- /dev/null
+++ b/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)
diff --git a/web/app/components/base/prompt-editor/plugins/error-message-block/index.tsx b/web/app/components/base/prompt-editor/plugins/error-message-block/index.tsx
new file mode 100644
index 0000000000..25bb55c3f0
--- /dev/null
+++ b/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'
diff --git a/web/app/components/base/prompt-editor/plugins/error-message-block/node.tsx b/web/app/components/base/prompt-editor/plugins/error-message-block/node.tsx
new file mode 100644
index 0000000000..b8042e5e54
--- /dev/null
+++ b/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
+}
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx
index 85f0cb8e09..4d0c80f10f 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx
+++ b/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 {
diff --git a/web/app/components/base/prompt-editor/types.ts b/web/app/components/base/prompt-editor/types.ts
index 88ae5fc3ab..939d8afd89 100644
--- a/web/app/components/base/prompt-editor/types.ts
+++ b/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
+}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 8575aca247..0bdcd529fb 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/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])
 

From 4c76a5f57bc85b682acc6a5aea9de3ff4dba34f4 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 16 Jul 2025 18:23:59 +0800
Subject: [PATCH 05/36] feat: support choose last run

---
 .../base/prompt-editor/constants.tsx          |  1 +
 .../components/base/prompt-editor/index.tsx   | 22 ++++++
 .../plugins/component-picker-block/hooks.tsx  | 17 ++++-
 .../plugins/component-picker-block/index.tsx  | 14 +++-
 .../plugins/last-run-block/component.tsx      | 40 +++++++++++
 .../plugins/last-run-block/index.tsx          | 65 ++++++++++++++++++
 .../last-run-block-replacement-block.tsx      | 61 +++++++++++++++++
 .../plugins/last-run-block/node.tsx           | 67 +++++++++++++++++++
 .../components/base/prompt-editor/types.ts    |  6 ++
 .../variable/var-reference-vars.tsx           |  2 +
 10 files changed, 291 insertions(+), 4 deletions(-)
 create mode 100644 web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/last-run-block/index.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/last-run-block/last-run-block-replacement-block.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/last-run-block/node.tsx

diff --git a/web/app/components/base/prompt-editor/constants.tsx b/web/app/components/base/prompt-editor/constants.tsx
index 2fd0a62e95..c3313ba406 100644
--- a/web/app/components/base/prompt-editor/constants.tsx
+++ b/web/app/components/base/prompt-editor/constants.tsx
@@ -5,6 +5,7 @@ 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 LAST_RUN_PLACEHOLDER_TEXT = '{{#last_run#}}'
 
 export const PRE_PROMPT_PLACEHOLDER_TEXT = '{{#pre_prompt#}}'
 export const UPDATE_DATASETS_EVENT_EMITTER = 'prompt-editor-context-block-update-datasets'
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 0a21587bc6..de83a29f7f 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -49,6 +49,12 @@ import {
   ErrorMessageBlockNode,
   ErrorMessageBlockReplacementBlock,
 } from './plugins/error-message-block'
+import {
+  LastRunBlock,
+  LastRunBlockNode,
+  LastRunReplacementBlock,
+} from './plugins/last-run-block'
+
 import VariableBlock from './plugins/variable-block'
 import VariableValueBlock from './plugins/variable-value-block'
 import { VariableValueBlockNode } from './plugins/variable-value-block/node'
@@ -62,6 +68,7 @@ import type {
   ErrorMessageBlockType,
   ExternalToolBlockType,
   HistoryBlockType,
+  LastRunBlockType,
   QueryBlockType,
   VariableBlockType,
   WorkflowVariableBlockType,
@@ -95,6 +102,7 @@ export type PromptEditorProps = {
   workflowVariableBlock?: WorkflowVariableBlockType
   currentBlock?: CurrentBlockType
   errorMessageBlock?: ErrorMessageBlockType
+  lastRunBlock?: LastRunBlockType
   isSupportFileVar?: boolean
 }
 
@@ -124,6 +132,9 @@ const PromptEditor: FC<PromptEditorProps> = ({
   errorMessageBlock = {
     show: true,
   },
+  lastRunBlock = {
+    show: true,
+  },
   isSupportFileVar,
 }) => {
   const { eventEmitter } = useEventEmitterContextContext()
@@ -143,6 +154,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
       VariableValueBlockNode,
       CurrentBlockNode,
       ErrorMessageBlockNode,
+      LastRunBlockNode, // LastRunBlockNode is used for error message block replacement
     ],
     editorState: textToEditorState(value || ''),
     onError: (error: Error) => {
@@ -204,6 +216,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           workflowVariableBlock={workflowVariableBlock}
           currentBlock={currentBlock}
           errorMessageBlock={errorMessageBlock}
+          lastRunBlock={lastRunBlock}
           isSupportFileVar={isSupportFileVar}
         />
         <ComponentPickerBlock
@@ -216,6 +229,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           workflowVariableBlock={workflowVariableBlock}
           currentBlock={currentBlock}
           errorMessageBlock={errorMessageBlock}
+          lastRunBlock={lastRunBlock}
           isSupportFileVar={isSupportFileVar}
         />
         {
@@ -274,6 +288,14 @@ const PromptEditor: FC<PromptEditorProps> = ({
             </>
           )
         }
+        {
+          lastRunBlock?.show && (
+            <>
+              <LastRunBlock {...lastRunBlock} />
+              <LastRunReplacementBlock {...lastRunBlock} />
+            </>
+          )
+        }
         {
           isSupportFileVar && (
             <VariableValueBlock />
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
index 51689e1790..2032f22ce9 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
@@ -8,6 +8,7 @@ import type {
   ErrorMessageBlockType,
   ExternalToolBlockType,
   HistoryBlockType,
+  LastRunBlockType,
   QueryBlockType,
   VariableBlockType,
   WorkflowVariableBlockType,
@@ -272,6 +273,7 @@ export const useOptions = (
   workflowVariableBlockType?: WorkflowVariableBlockType,
   currentBlockType?: CurrentBlockType,
   errorMessageBlockType?: ErrorMessageBlockType,
+  lastRunBlockType?: LastRunBlockType,
   queryString?: string,
 ) => {
   const promptOptions = usePromptOptions(contextBlock, queryBlock, historyBlock)
@@ -295,6 +297,19 @@ export const useOptions = (
         ],
       })
     }
+    if(lastRunBlockType?.show && res.findIndex(v => v.nodeId === 'last_run') === -1) {
+      res.unshift({
+        nodeId: 'last_run',
+        title: 'last_run',
+        isFlat: true,
+        vars: [
+          {
+            variable: 'last_run',
+            type: VarType.object,
+          },
+        ],
+      })
+    }
     if(currentBlockType?.show && res.findIndex(v => v.nodeId === 'current') === -1) {
       const title = currentBlockType.generatorType === 'prompt' ? 'current_prompt' : 'current_code'
       res.unshift({
@@ -310,7 +325,7 @@ export const useOptions = (
       })
     }
     return res
-  }, [workflowVariableBlockType?.show, workflowVariableBlockType?.variables, errorMessageBlockType?.show, currentBlockType?.show, currentBlockType?.generatorType])
+  }, [workflowVariableBlockType?.show, workflowVariableBlockType?.variables, errorMessageBlockType?.show, lastRunBlockType?.show, currentBlockType?.show, currentBlockType?.generatorType])
 
   return useMemo(() => {
     return {
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
index 73b81f957f..cffb2762c2 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
@@ -21,6 +21,7 @@ import type {
   ErrorMessageBlockType,
   ExternalToolBlockType,
   HistoryBlockType,
+  LastRunBlockType,
   QueryBlockType,
   VariableBlockType,
   WorkflowVariableBlockType,
@@ -37,6 +38,7 @@ 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'
+import { INSERT_LAST_RUN_BLOCK_COMMAND } from '../last-run-block'
 
 type ComponentPickerProps = {
   triggerString: string
@@ -48,6 +50,7 @@ type ComponentPickerProps = {
   workflowVariableBlock?: WorkflowVariableBlockType
   currentBlock?: CurrentBlockType
   errorMessageBlock?: ErrorMessageBlockType
+  lastRunBlock?: LastRunBlockType
   isSupportFileVar?: boolean
 }
 const ComponentPicker = ({
@@ -60,6 +63,7 @@ const ComponentPicker = ({
   workflowVariableBlock,
   currentBlock,
   errorMessageBlock,
+  lastRunBlock,
   isSupportFileVar,
 }: ComponentPickerProps) => {
   const { eventEmitter } = useEventEmitterContextContext()
@@ -98,6 +102,7 @@ const ComponentPicker = ({
     workflowVariableBlock,
     currentBlock,
     errorMessageBlock,
+    lastRunBlock,
   )
 
   const onSelectOption = useCallback(
@@ -125,10 +130,13 @@ const ComponentPicker = ({
     })
     const isFlat = variables.length === 1
     if(isFlat) {
-      if(variables[0] === 'current')
+      const varName = variables[0]
+      if(varName === 'current')
         editor.dispatchCommand(INSERT_CURRENT_BLOCK_COMMAND, currentBlock?.generatorType)
-      else if (variables[0] === 'error_message')
+      else if (varName === 'error_message')
         editor.dispatchCommand(INSERT_ERROR_MESSAGE_BLOCK_COMMAND, null)
+      else if (varName === 'last_run')
+        editor.dispatchCommand(INSERT_LAST_RUN_BLOCK_COMMAND, null)
     }
     else if (variables[1] === 'sys.query' || variables[1] === 'sys.files') {
       editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, [variables[1]])
@@ -226,7 +234,7 @@ const ComponentPicker = ({
         }
       </>
     )
-  }, [allFlattenOptions.length, workflowVariableBlock?.show, refs, isPositioned, floatingStyles, queryString, workflowVariableOptions, handleSelectWorkflowVariable, handleClose, isSupportFileVar])
+  }, [allFlattenOptions.length, workflowVariableBlock?.show, floatingStyles, isPositioned, refs, workflowVariableOptions, isSupportFileVar, handleClose, currentBlock?.generatorType, handleSelectWorkflowVariable, queryString])
 
   return (
     <LexicalTypeaheadMenuPlugin
diff --git a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
new file mode 100644
index 0000000000..748a66e5a8
--- /dev/null
+++ b/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
diff --git a/web/app/components/base/prompt-editor/plugins/last-run-block/index.tsx b/web/app/components/base/prompt-editor/plugins/last-run-block/index.tsx
new file mode 100644
index 0000000000..8bbbb8d4dd
--- /dev/null
+++ b/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'
diff --git a/web/app/components/base/prompt-editor/plugins/last-run-block/last-run-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/last-run-block/last-run-block-replacement-block.tsx
new file mode 100644
index 0000000000..9d28828016
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/last-run-block/last-run-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 { 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)),
+    )
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return null
+}
+
+export default memo(LastRunReplacementBlock)
diff --git a/web/app/components/base/prompt-editor/plugins/last-run-block/node.tsx b/web/app/components/base/prompt-editor/plugins/last-run-block/node.tsx
new file mode 100644
index 0000000000..5f61c3138b
--- /dev/null
+++ b/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
+}
diff --git a/web/app/components/base/prompt-editor/types.ts b/web/app/components/base/prompt-editor/types.ts
index 939d8afd89..45ae2e2af7 100644
--- a/web/app/components/base/prompt-editor/types.ts
+++ b/web/app/components/base/prompt-editor/types.ts
@@ -89,3 +89,9 @@ export type ErrorMessageBlockType = {
   onInsert?: () => void
   onDelete?: () => void
 }
+
+export type LastRunBlockType = {
+  show?: boolean
+  onInsert?: () => void
+  onDelete?: () => void
+}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 0bdcd529fb..688ffc6f9e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -85,6 +85,8 @@ const Item: FC<ItemProps> = ({
         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' />
+      default:
+        return <Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />
     }
   }, [isFlat, isInCodeGeneratorInstructionEditor, itemData.variable])
 

From 5d232ac1bc330c4f567d279a3ca56643a1cb10b5 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 17 Jul 2025 14:39:00 +0800
Subject: [PATCH 06/36] chore: last run divide

---
 .../_base/components/variable/var-reference-vars.tsx | 12 ++++++++++--
 web/i18n/en-US/workflow.ts                           |  1 +
 web/i18n/zh-Hans/workflow.ts                         |  1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 688ffc6f9e..e828d86b6f 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -175,7 +175,8 @@ const Item: FC<ItemProps> = ({
           className={cn(
             (isObj || isStructureOutput) ? ' pr-1' : 'pr-[18px]',
             isHovering && ((isObj || isStructureOutput) ? 'bg-components-panel-on-panel-item-bg-hover' : 'bg-state-base-hover'),
-            'relative flex h-6 w-full cursor-pointer items-center  rounded-md pl-3')
+            'relative flex h-6 w-full cursor-pointer items-center  rounded-md pl-3',
+          )
           }
           onClick={handleChosen}
           onMouseDown={e => e.preventDefault()}
@@ -378,7 +379,7 @@ const VarReferenceVars: FC<Props> = ({
 
           {
             filteredVars.map((item, i) => (
-              <div key={i}>
+              <div key={i} className={cn(!item.isFlat && 'mt-3')}>
                 {!item.isFlat && (
                   <div
                     className='system-xs-medium-uppercase truncate px-3 leading-[22px] text-text-tertiary'
@@ -402,6 +403,13 @@ const VarReferenceVars: FC<Props> = ({
                     zIndex={zIndex}
                   />
                 ))}
+                {item.isFlat && !filteredVars[i + 1]?.isFlat && (
+                  <div className='relative mt-[14px] flex  items-center space-x-1'>
+                    <div className='h-0 w-3 shrink-0 border border-divider-subtle'></div>
+                    <div className='system-2xs-semibold-uppercase text-text-tertiary'>{t('workflow.debug.lastOutput')}</div>
+                    <div className='h-0  shrink-0 grow border border-divider-subtle'></div>
+                  </div>
+                )}
               </div>))
           }
         </div>
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index c56b497ac2..23fd382acf 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -965,6 +965,7 @@ const translation = {
       chatNode: 'Conversation',
       systemNode: 'System',
     },
+    lastOutput: 'Last Output',
   },
 }
 
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 6bd202d58f..d6eeac13b6 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -966,6 +966,7 @@ const translation = {
       chatNode: '会话变量',
       systemNode: '系统变量',
     },
+    lastOutput: '上次输出',
   },
 }
 

From 7907235124c6d805f6899b423a947a18fc7cea9f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 17 Jul 2025 16:43:56 +0800
Subject: [PATCH 07/36] feat: gener instrument left

---
 .../config-prompt/simple-prompt-input.tsx     |   3 +
 .../config/automatic/get-automatic-res.tsx    | 108 ++++++++++++------
 .../config/automatic/instruction-editor.tsx   |  94 +++++++++++++++
 .../components/base/prompt-editor/index.tsx   |  14 +--
 .../workflow/hooks/use-workflow-variables.ts  |   3 +-
 .../nodes/_base/components/prompt/editor.tsx  |   8 +-
 .../llm/components/prompt-generator-btn.tsx   |  11 +-
 7 files changed, 191 insertions(+), 50 deletions(-)
 create mode 100644 web/app/components/app/configuration/config/automatic/instruction-editor.tsx

diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index eb0f524386..51fa0c173d 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -27,6 +27,7 @@ import { PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER } from '@/app/components/ba
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { noop } from 'lodash-es'
+import { GeneratorType } from '../config/automatic/types'
 
 export type ISimplePromptInput = {
   mode: AppType
@@ -276,6 +277,8 @@ const Prompt: FC<ISimplePromptInput> = ({
           isShow={showAutomatic}
           onClose={showAutomaticFalse}
           onFinished={handleAutomaticRes}
+          isBasicMode
+          generatorType={GeneratorType.prompt}
         />
       )}
     </div>
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index aacaa81ac2..c8f801663a 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -39,13 +39,20 @@ import { ModelTypeEnum } from '@/app/components/header/account-setting/model-pro
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import type { ModelModeType } from '@/types/app'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import InstructionEditor from './instruction-editor'
+import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
+import type { GeneratorType } from './types'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 
 export type IGetAutomaticResProps = {
   mode: AppType
   isShow: boolean
   onClose: () => void
   onFinished: (res: AutomaticRes) => void
-  isInLLMNode?: boolean
+  nodesOutputVars?: NodeOutPutVar[]
+  availableNodes?: Node[]
+  generatorType: GeneratorType
+  isBasicMode?: boolean
 }
 
 const TryLabel: FC<{
@@ -68,7 +75,10 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   mode,
   isShow,
   onClose,
-  isInLLMNode,
+  nodesOutputVars,
+  availableNodes,
+  generatorType,
+  isBasicMode,
   onFinished,
 }) => {
   const { t } = useTranslation()
@@ -124,6 +134,11 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   ]
 
   const [instruction, setInstruction] = useState<string>('')
+  const [ideaOutput, setIdeaOutput] = useState<string>('')
+  const [isFoldIdeaOutput, {
+    toggle: toggleFoldIdeaOutput,
+  }] = useBoolean(true)
+
   const handleChooseTemplate = useCallback((key: string) => {
     return () => {
       const template = t(`appDebug.generate.template.${key}.instruction`)
@@ -210,7 +225,6 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
       const { error, ...res } = await generateRule({
         instruction,
         model_config: model,
-        no_variable: !!isInLLMNode,
       })
       setRes(res)
       if (error) {
@@ -240,11 +254,11 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     >
       <div className='flex h-[680px] flex-wrap'>
         <div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6'>
-          <div className='mb-8'>
+          <div className='mb-4'>
             <div className={`text-lg font-bold leading-[28px] ${s.textGradient}`}>{t('appDebug.generate.title')}</div>
             <div className='mt-1 text-[13px] font-normal text-text-tertiary'>{t('appDebug.generate.description')}</div>
           </div>
-          <div className='mb-8'>
+          <div>
             <ModelParameterModal
               popupClassName='!w-[520px]'
               portalToFollowElemContentClassName='z-[1000]'
@@ -258,36 +272,60 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
               hideDebugWithMultipleModel
             />
           </div>
-          <div >
-            <div className='flex items-center'>
-              <div className='mr-3 shrink-0 text-xs font-semibold uppercase leading-[18px] text-text-tertiary'>{t('appDebug.generate.tryIt')}</div>
-              <div className='h-px grow' style={{
-                background: 'linear-gradient(to right, rgba(243, 244, 246, 1), rgba(243, 244, 246, 0))',
-              }}></div>
-            </div>
-            <div className='flex flex-wrap'>
-              {tryList.map(item => (
-                <TryLabel
-                  key={item.key}
-                  Icon={item.icon}
-                  text={t(`appDebug.generate.template.${item.key}.name`)}
-                  onClick={handleChooseTemplate(item.key)}
-                />
-              ))}
+          {isBasicMode && (
+            <div className='mt-4'>
+              <div className='flex items-center'>
+                <div className='mr-3 shrink-0 text-xs font-semibold uppercase leading-[18px] text-text-tertiary'>{t('appDebug.generate.tryIt')}</div>
+                <div className='h-px grow' style={{
+                  background: 'linear-gradient(to right, rgba(243, 244, 246, 1), rgba(243, 244, 246, 0))',
+                }}></div>
+              </div>
+              <div className='flex flex-wrap'>
+                {tryList.map(item => (
+                  <TryLabel
+                    key={item.key}
+                    Icon={item.icon}
+                    text={t(`appDebug.generate.template.${item.key}.name`)}
+                    onClick={handleChooseTemplate(item.key)}
+                  />
+                ))}
+              </div>
             </div>
-          </div>
+          )}
+
           {/* inputs */}
-          <div className='mt-6'>
-            <div className='text-[0px]'>
-              <div className='mb-2 text-sm font-medium leading-5 text-text-primary'>{t('appDebug.generate.instruction')}</div>
-              <Textarea
-                className="h-[200px] resize-none"
-                placeholder={t('appDebug.generate.instructionPlaceHolder') as string}
+          <div className='mt-4'>
+            <div>
+              <div className='system-sm-semibold-uppercase mb-1.5 text-text-secondary'>{t('appDebug.generate.instruction')}</div>
+              <InstructionEditor
                 value={instruction}
-                onChange={e => setInstruction(e.target.value)} />
+                onChange={setInstruction}
+                nodesOutputVars={nodesOutputVars}
+                availableNodes={availableNodes}
+                generatorType={generatorType}
+              />
+            </div>
+            <div className='mt-4 text-[0px]'>
+              <div
+                className='mb-1.5 flex  cursor-pointer items-center text-sm font-medium leading-5 text-text-primary'
+                onClick={toggleFoldIdeaOutput}
+              >
+                <div className='system-sm-semibold-uppercase mr-1 text-text-secondary'>Idea output</div>
+                <div className='system-xs-regular text-text-tertiary'>(option)</div>
+                <ArrowDownRoundFill className={cn('size text-text-quaternary', isFoldIdeaOutput && 'relative top-[1px] rotate-[-90deg]')} />
+              </div>
+              { !isFoldIdeaOutput && (
+                <Textarea
+                  className="h-[80px]"
+                  placeholder={'Describe your ideal response format, length, tone, and content requirements...'}
+                  value={ideaOutput}
+                  onChange={e => setIdeaOutput(e.target.value)}
+                />
+              )}
             </div>
 
-            <div className='mt-5 flex justify-end'>
+            <div className='mt-7 flex justify-end space-x-2'>
+              <Button>Dismiss(i18n)</Button>
               <Button
                 className='flex space-x-1'
                 variant='primary'
@@ -304,18 +342,18 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         {(!isLoading && res) && (
           <div className='h-full w-0 grow p-6 pb-0'>
             <div className='mb-3 shrink-0 text-base font-semibold leading-[160%] text-text-secondary'>{t('appDebug.generate.resTitle')}</div>
-            <div className={cn('max-h-[555px] overflow-y-auto', !isInLLMNode && 'pb-2')}>
+            <div className={cn('max-h-[555px] overflow-y-auto', isBasicMode && 'pb-2')}>
               <ConfigPrompt
                 mode={mode}
                 promptTemplate={res?.prompt || ''}
                 promptVariables={[]}
                 readonly
-                noTitle={isInLLMNode}
+                noTitle={!isBasicMode}
                 gradientBorder
-                editorHeight={isInLLMNode ? 524 : 0}
-                noResize={isInLLMNode}
+                editorHeight={!isBasicMode ? 524 : 0}
+                noResize={!isBasicMode}
               />
-              {!isInLLMNode && (
+              {isBasicMode && (
                 <>
                   {(res?.variables?.length && res?.variables?.length > 0)
                     ? (
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
new file mode 100644
index 0000000000..95615d1d8a
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -0,0 +1,94 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import PromptEditor from '@/app/components/base/prompt-editor'
+import type { GeneratorType } from './types'
+import cn from '@/utils/classnames'
+import { useStore } from '@/app/components/workflow/store'
+import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { useWorkflowVariableType } from '@/app/components/workflow/hooks'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  value: string
+  onChange: (text: string) => void
+  nodesOutputVars?: NodeOutPutVar[]
+  availableNodes?: Node[]
+  generatorType: GeneratorType
+}
+
+const placeholder = `
+
+`
+
+const InstructionEditor: FC<Props> = ({
+  generatorType,
+  nodesOutputVars = [],
+  availableNodes = [],
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const controlPromptEditorRerenderKey = useStore(s => s.controlPromptEditorRerenderKey)
+  const getVarType = useWorkflowVariableType()
+  const placeholder = (
+    <div className='system-sm-regular  text-text-placeholder'>
+      <div className='leading-6'>Describe how you would like to improve this Prompt. For example:</div>
+      <div className='mt-2'>
+        <div>Make the output more concise, retaining the core points.</div>
+        <div>The output format is incorrect, please strictly follow the JSON format.</div>
+        <div>The tone is too harsh, please make it more friendly.</div>
+      </div>
+    </div>
+  )
+
+  return (
+    <div>
+      <PromptEditor
+        wrapperClassName='border !border-components-input-bg-normal bg-components-input-bg-normal hover:!border-components-input-bg-hover rounded-[10px] px-4 pt-3'
+        key={controlPromptEditorRerenderKey}
+        placeholder={placeholder}
+        placeholderClassName='px-4 pt-3'
+        // compact
+        className={cn('min-h-[240px] ')}
+        value={value}
+        workflowVariableBlock={{
+          show: true,
+          variables: nodesOutputVars,
+          getVarType,
+          workflowNodesMap: availableNodes.reduce((acc, node) => {
+            acc[node.id] = {
+              title: node.data.title,
+              type: node.data.type,
+              width: node.width,
+              height: node.height,
+              position: node.position,
+            }
+            if (node.data.type === BlockEnum.Start) {
+              acc.sys = {
+                title: t('workflow.blocks.start'),
+                type: BlockEnum.Start,
+              }
+            }
+            return acc
+          }, {} as any),
+        }}
+        currentBlock = {{
+          show: true,
+          generatorType,
+        }}
+        errorMessageBlock = {{
+          show: true,
+        }}
+        lastRunBlock = {{
+          show: true,
+        }}
+        onChange={onChange}
+        editable
+        isSupportFileVar={false}
+      />
+    </div>
+  )
+}
+export default React.memo(InstructionEditor)
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index de83a29f7f..f8e43941f2 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -79,7 +79,6 @@ import {
 } from './constants'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import cn from '@/utils/classnames'
-import { GeneratorType } from '../../app/configuration/config/automatic/types'
 
 export type PromptEditorProps = {
   instanceId?: string
@@ -125,16 +124,9 @@ const PromptEditor: FC<PromptEditorProps> = ({
   variableBlock,
   externalToolBlock,
   workflowVariableBlock,
-  currentBlock = {
-    show: true,
-    generatorType: GeneratorType.code,
-  },
-  errorMessageBlock = {
-    show: true,
-  },
-  lastRunBlock = {
-    show: true,
-  },
+  currentBlock,
+  errorMessageBlock,
+  lastRunBlock,
   isSupportFileVar,
 }) => {
   const { eventEmitter } = useEventEmitterContextContext()
diff --git a/web/app/components/workflow/hooks/use-workflow-variables.ts b/web/app/components/workflow/hooks/use-workflow-variables.ts
index 35637bc775..6b0e4411d5 100644
--- a/web/app/components/workflow/hooks/use-workflow-variables.ts
+++ b/web/app/components/workflow/hooks/use-workflow-variables.ts
@@ -10,6 +10,7 @@ import type {
 } from '@/app/components/workflow/types'
 import { useIsChatMode } from './use-workflow'
 import { useStoreApi } from 'reactflow'
+import type { Type } from '../nodes/llm/types'
 
 export const useWorkflowVariables = () => {
   const { t } = useTranslation()
@@ -106,7 +107,7 @@ export const useWorkflowVariableType = () => {
       isChatMode,
       isConstant: false,
     })
-    return type
+    return type as unknown as Type
   }
 
   return getVarType
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 0a7ebc2a09..3796cb19bf 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -159,7 +159,13 @@ const Editor: FC<Props> = ({
             <div className='flex items-center'>
               <div className='text-xs font-medium leading-[18px] text-text-tertiary'>{value?.length || 0}</div>
               {isSupportPromptGenerator && (
-                <PromptGeneratorBtn className='ml-[5px]' onGenerated={onGenerated} modelConfig={modelConfig} />
+                <PromptGeneratorBtn
+                  className='ml-[5px]'
+                  onGenerated={onGenerated}
+                  modelConfig={modelConfig}
+                  nodesOutputVars={nodesOutputVars}
+                  availableNodes={availableNodes}
+                />
               )}
 
               <div className='ml-2 mr-2 h-3 w-px bg-divider-regular'></div>
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index f58a749684..ec1456e92c 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -8,17 +8,22 @@ import { ActionButton } from '@/app/components/base/action-button'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
 import { AppType } from '@/types/app'
 import type { AutomaticRes } from '@/service/debug'
-import type { ModelConfig } from '@/app/components/workflow/types'
+import type { ModelConfig, Node, NodeOutPutVar } from '@/app/components/workflow/types'
+import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
 
 type Props = {
   className?: string
   onGenerated?: (prompt: string) => void
   modelConfig?: ModelConfig
+  nodesOutputVars?: NodeOutPutVar[]
+  availableNodes?: Node[]
 }
 
 const PromptGeneratorBtn: FC<Props> = ({
   className,
   onGenerated,
+  nodesOutputVars,
+  availableNodes,
 }) => {
   const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
   const handleAutomaticRes = useCallback((res: AutomaticRes) => {
@@ -38,7 +43,9 @@ const PromptGeneratorBtn: FC<Props> = ({
           isShow={showAutomatic}
           onClose={showAutomaticFalse}
           onFinished={handleAutomaticRes}
-          isInLLMNode
+          generatorType={GeneratorType.prompt}
+          nodesOutputVars={nodesOutputVars}
+          availableNodes={availableNodes}
         />
       )}
     </div>

From d82abbef234142970659bf7211131d01661e6180 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 17 Jul 2025 17:10:04 +0800
Subject: [PATCH 08/36] chore: 18n

---
 .../config/automatic/get-automatic-res.tsx          |  9 +++++----
 .../config/automatic/instruction-editor.tsx         | 13 +++++--------
 web/i18n/en-US/app-debug.ts                         |  9 ++++++++-
 web/i18n/zh-Hans/app-debug.ts                       |  9 ++++++++-
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index c8f801663a..ef828b4ea7 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -44,6 +44,7 @@ import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
 import type { GeneratorType } from './types'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 
+const i18nPrefix = 'appDebug.generate'
 export type IGetAutomaticResProps = {
   mode: AppType
   isShow: boolean
@@ -310,14 +311,14 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                 className='mb-1.5 flex  cursor-pointer items-center text-sm font-medium leading-5 text-text-primary'
                 onClick={toggleFoldIdeaOutput}
               >
-                <div className='system-sm-semibold-uppercase mr-1 text-text-secondary'>Idea output</div>
-                <div className='system-xs-regular text-text-tertiary'>(option)</div>
+                <div className='system-sm-semibold-uppercase mr-1 text-text-secondary'>{t(`${i18nPrefix}.ideaOutput`)}</div>
+                <div className='system-xs-regular text-text-tertiary'>({t(`${i18nPrefix}.optional`)})</div>
                 <ArrowDownRoundFill className={cn('size text-text-quaternary', isFoldIdeaOutput && 'relative top-[1px] rotate-[-90deg]')} />
               </div>
               { !isFoldIdeaOutput && (
                 <Textarea
                   className="h-[80px]"
-                  placeholder={'Describe your ideal response format, length, tone, and content requirements...'}
+                  placeholder={t(`${i18nPrefix}.ideaOutputPlaceholder`)}
                   value={ideaOutput}
                   onChange={e => setIdeaOutput(e.target.value)}
                 />
@@ -325,7 +326,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
             </div>
 
             <div className='mt-7 flex justify-end space-x-2'>
-              <Button>Dismiss(i18n)</Button>
+              <Button onClick={onClose}>{t(`${i18nPrefix}.dismiss`)}</Button>
               <Button
                 className='flex space-x-1'
                 variant='primary'
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index 95615d1d8a..0cc0c3cd49 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -18,9 +18,7 @@ type Props = {
   generatorType: GeneratorType
 }
 
-const placeholder = `
-
-`
+const i18nPrefix = 'appDebug.generate'
 
 const InstructionEditor: FC<Props> = ({
   generatorType,
@@ -34,11 +32,11 @@ const InstructionEditor: FC<Props> = ({
   const getVarType = useWorkflowVariableType()
   const placeholder = (
     <div className='system-sm-regular  text-text-placeholder'>
-      <div className='leading-6'>Describe how you would like to improve this Prompt. For example:</div>
+      <div className='leading-6'>{t(`${i18nPrefix}.instructionPlaceHolderTitle`)}</div>
       <div className='mt-2'>
-        <div>Make the output more concise, retaining the core points.</div>
-        <div>The output format is incorrect, please strictly follow the JSON format.</div>
-        <div>The tone is too harsh, please make it more friendly.</div>
+        <div>{t(`${i18nPrefix}.instructionPlaceHolderLine1`)}</div>
+        <div>{t(`${i18nPrefix}.instructionPlaceHolderLine2`)}</div>
+        <div>{t(`${i18nPrefix}.instructionPlaceHolderLine3`)}</div>
       </div>
     </div>
   )
@@ -50,7 +48,6 @@ const InstructionEditor: FC<Props> = ({
         key={controlPromptEditorRerenderKey}
         placeholder={placeholder}
         placeholderClassName='px-4 pt-3'
-        // compact
         className={cn('min-h-[240px] ')}
         value={value}
         workflowVariableBlock={{
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index 938cb27c12..092eeba10b 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -248,7 +248,14 @@ const translation = {
     description: 'The Prompt Generator uses the configured model to optimize prompts for higher quality and better structure. Please write clear and detailed instructions.',
     tryIt: 'Try it',
     instruction: 'Instructions',
-    instructionPlaceHolder: 'Write clear and specific instructions.',
+    instructionPlaceHolderTitle: 'Describe how you would like to improve this Prompt. For example:',
+    instructionPlaceHolderLine1: 'Make the output more concise, retaining the core points.',
+    instructionPlaceHolderLine2: 'The output format is incorrect, please strictly follow the JSON format.',
+    instructionPlaceHolderLine3: 'The tone is too harsh, please make it more friendly.',
+    ideaOutput: 'Idea Output',
+    ideaOutputPlaceholder: 'Describe your ideal response format, length, tone, and content requirements...',
+    optional: 'Optional',
+    dismiss: 'Dismiss',
     generate: 'Generate',
     resTitle: 'Generated Prompt',
     noDataLine1: 'Describe your use case on the left,',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index 3728d86e58..a7bccfe36c 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -244,7 +244,14 @@ const translation = {
     description: '提示词生成器使用配置的模型来优化提示词，以获得更高的质量和更好的结构。请写出清晰详细的说明。',
     tryIt: '试一试',
     instruction: '指令',
-    instructionPlaceHolder: '写下清晰、具体的说明。',
+    instructionPlaceHolderTitle: '描述您希望如何改进此提示词。例如：',
+    instructionPlaceHolderLine1: '使输出更简洁，保留核心要点。',
+    instructionPlaceHolderLine2: '输出格式不正确，请严格遵循 JSON 格式。',
+    instructionPlaceHolderLine3: '语气过于生硬，请使其更友好。',
+    ideaOutput: '想法输出',
+    ideaOutputPlaceholder: '描述您想法的回复格式、长度、语气和内容要求……',
+    optional: '可选',
+    dismiss: '取消',
     generate: '生成',
     resTitle: '生成的提示词',
     noDataLine1: '在左侧描述您的用例，',

From 424a56305514d55d759d8cc2bf48f186fea3c76d Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 17 Jul 2025 17:38:16 +0800
Subject: [PATCH 09/36] chore: i18n

---
 .../app/configuration/config/automatic/get-automatic-res.tsx | 5 +++--
 web/i18n/en-US/app-debug.ts                                  | 4 ++--
 web/i18n/zh-Hans/app-debug.ts                                | 2 ++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index ef828b4ea7..e88d59ac39 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -43,6 +43,7 @@ import InstructionEditor from './instruction-editor'
 import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
 import type { GeneratorType } from './types'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
+import Link from 'next/link'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetAutomaticResProps = {
@@ -190,8 +191,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
       <Generator className='h-14 w-14 text-text-tertiary' />
       <div className='text-center text-[13px] font-normal leading-5 text-text-tertiary'>
-        <div>{t('appDebug.generate.noDataLine1')}</div>
-        <div>{t('appDebug.generate.noDataLine2')}</div>
+        <div>{t('appDebug.generate.newNoDataLine1')}</div>
+        <Link className='text-text-accent' href='//todo' target='_blank'>{t('appDebug.generate.newNoDataLine2')}</Link>
       </div>
     </div>
   )
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index 092eeba10b..e9be6d2caf 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -258,8 +258,8 @@ const translation = {
     dismiss: 'Dismiss',
     generate: 'Generate',
     resTitle: 'Generated Prompt',
-    noDataLine1: 'Describe your use case on the left,',
-    noDataLine2: 'the orchestration preview will show here.',
+    newNoDataLine1: 'Write a instruction in the left column, and click Generate to see response. ',
+    newNoDataLine2: 'Learn about prompt design',
     apply: 'Apply',
     loading: 'Orchestrating the application for you...',
     overwriteTitle: 'Override existing configuration?',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index a7bccfe36c..a818caabeb 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -236,6 +236,8 @@ const translation = {
     apply: '应用',
     applyChanges: '应用更改',
     resTitle: '生成的代码',
+    newNoDataLine1: '在左侧描述您的用例，点击生成查看响应。',
+    newNoDataLine2: '了解提示词设计',
     overwriteConfirmTitle: '是否覆盖现有代码？',
     overwriteConfirmMessage: '此操作将覆盖现有代码。您确定要继续吗？',
   },

From 945a424fa8ddd2a2a11813238448337179af7d9c Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 17 Jul 2025 18:34:18 +0800
Subject: [PATCH 10/36] feat: new result

---
 .../config/automatic/get-automatic-res.tsx    | 90 +++++--------------
 .../config/automatic/prompt-toast.tsx         | 34 +++++++
 .../configuration/config/automatic/result.tsx | 47 ++++++++++
 3 files changed, 105 insertions(+), 66 deletions(-)
 create mode 100644 web/app/components/app/configuration/config/automatic/prompt-toast.tsx
 create mode 100644 web/app/components/app/configuration/config/automatic/result.tsx

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index e88d59ac39..4df37bbcbb 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -21,14 +21,10 @@ import Button from '@/app/components/base/button'
 import Textarea from '@/app/components/base/textarea'
 import Toast from '@/app/components/base/toast'
 import { generateRule } from '@/service/debug'
-import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
 import type { CompletionParams, Model } from '@/types/app'
-import { AppType } from '@/types/app'
-import ConfigVar from '@/app/components/app/configuration/config-var'
-import GroupName from '@/app/components/app/configuration/base/group-name'
+import type { AppType } from '@/types/app'
 import Loading from '@/app/components/base/loading'
 import Confirm from '@/app/components/base/confirm'
-import { LoveMessage } from '@/app/components/base/icons/src/vender/features'
 
 // type
 import type { AutomaticRes } from '@/service/debug'
@@ -44,6 +40,7 @@ import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
 import type { GeneratorType } from './types'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import Link from 'next/link'
+import Result from './result'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetAutomaticResProps = {
@@ -54,6 +51,8 @@ export type IGetAutomaticResProps = {
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
   generatorType: GeneratorType
+  flowId: string
+  nodeId?: string
   isBasicMode?: boolean
 }
 
@@ -80,6 +79,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   nodesOutputVars,
   availableNodes,
   generatorType,
+  flowId,
+  nodeId,
   isBasicMode,
   onFinished,
 }) => {
@@ -189,7 +190,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
 
   const renderNoData = (
     <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
-      <Generator className='h-14 w-14 text-text-tertiary' />
+      <Generator className='size-8 text-text-quaternary' />
       <div className='text-center text-[13px] font-normal leading-5 text-text-tertiary'>
         <div>{t('appDebug.generate.newNoDataLine1')}</div>
         <Link className='text-text-accent' href='//todo' target='_blank'>{t('appDebug.generate.newNoDataLine2')}</Link>
@@ -241,7 +242,10 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     }
   }
 
-  const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false)
+  const [isShowConfirmOverwrite, {
+    setTrue: showConfirmOverwrite,
+    setFalse: hideShowConfirmOverwrite,
+  }] = useBoolean(false)
 
   const isShowAutoPromptResPlaceholder = () => {
     return !isLoading && !res
@@ -252,7 +256,6 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
       isShow={isShow}
       onClose={onClose}
       className='min-w-[1140px] !p-0'
-      closable
     >
       <div className='flex h-[680px] flex-wrap'>
         <div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6'>
@@ -341,73 +344,28 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           </div>
         </div>
 
-        {(!isLoading && res) && (
+        {/* {(!isLoading && res) && ( */}
+        {
           <div className='h-full w-0 grow p-6 pb-0'>
-            <div className='mb-3 shrink-0 text-base font-semibold leading-[160%] text-text-secondary'>{t('appDebug.generate.resTitle')}</div>
-            <div className={cn('max-h-[555px] overflow-y-auto', isBasicMode && 'pb-2')}>
-              <ConfigPrompt
-                mode={mode}
-                promptTemplate={res?.prompt || ''}
-                promptVariables={[]}
-                readonly
-                noTitle={!isBasicMode}
-                gradientBorder
-                editorHeight={!isBasicMode ? 524 : 0}
-                noResize={!isBasicMode}
-              />
-              {isBasicMode && (
-                <>
-                  {(res?.variables?.length && res?.variables?.length > 0)
-                    ? (
-                      <ConfigVar
-                        promptVariables={res?.variables.map(key => ({ key, name: key, type: 'string', required: true })) || []}
-                        readonly
-                      />
-                    )
-                    : ''}
-
-                  {(mode !== AppType.completion && res?.opening_statement) && (
-                    <div className='mt-7'>
-                      <GroupName name={t('appDebug.feature.groupChat.title')} />
-                      <div
-                        className='mb-1 rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn p-3'
-                      >
-                        <div className='mb-2 flex items-center gap-2'>
-                          <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
-                            <LoveMessage className='h-4 w-4 text-text-primary-on-surface' />
-                          </div>
-                          <div className='system-sm-semibold flex grow items-center text-text-secondary'>
-                            {t('appDebug.feature.conversationOpener.title')}
-                          </div>
-                        </div>
-                        <div className='system-xs-regular min-h-8 text-text-tertiary'>{res.opening_statement}</div>
-                      </div>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-
-            <div className='flex justify-end bg-background-default py-4'>
-              <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
-              <Button variant='primary' className='ml-2' onClick={() => {
-                setShowConfirmOverwrite(true)
-              }}>{t('appDebug.generate.apply')}</Button>
-            </div>
+            <Result
+              storageKey={`${flowId}${isBasicMode ? '' : `-${nodeId}`}`}
+              onApply={showConfirmOverwrite}
+              generatorType={generatorType}
+            />
           </div>
-        )}
+        }
         {isLoading && renderLoading}
-        {isShowAutoPromptResPlaceholder() && renderNoData}
-        {showConfirmOverwrite && (
+        {isShowAutoPromptResPlaceholder() && !renderNoData}
+        {isShowConfirmOverwrite && (
           <Confirm
             title={t('appDebug.generate.overwriteTitle')}
             content={t('appDebug.generate.overwriteMessage')}
-            isShow={showConfirmOverwrite}
+            isShow
             onConfirm={() => {
-              setShowConfirmOverwrite(false)
+              hideShowConfirmOverwrite()
               onFinished(res!)
             }}
-            onCancel={() => setShowConfirmOverwrite(false)}
+            onCancel={hideShowConfirmOverwrite}
           />
         )}
       </div>
diff --git a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
new file mode 100644
index 0000000000..c94d62d2fb
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
@@ -0,0 +1,34 @@
+import { RiCloseLine, RiInformation2Fill } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import React from 'react'
+import cn from '@/utils/classnames'
+type Props = {
+  className?: string
+}
+const PromptToast = ({
+  className,
+}: Props) => {
+  const [isHide, {
+    setTrue: hide,
+  }] = useBoolean(false)
+  if(isHide)
+    return
+  return (
+    <div className={cn('relative flex h-10 items-center p-2 ', className)}>
+      {/* Background Effect */}
+      <div className="pointer-events-none absolute inset-0 rounded-lg bg-[linear-gradient(92deg,rgba(11,165,236,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40 shadow-md"></div>
+      <div className='relative flex h-full w-full items-center justify-between'>
+        <div className="flex h-full items-center gap-1">
+          <RiInformation2Fill className="size-4 text-text-accent" />
+          <p className="text-sm text-gray-700">This is the modified prompt with added context.</p>
+        </div>
+
+        <div className='cursor-pointer p-0.5' onClick={hide}>
+          <RiCloseLine className='size-5 text-text-tertiary' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PromptToast
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
new file mode 100644
index 0000000000..f8e7a5350d
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -0,0 +1,47 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { GeneratorType } from './types'
+import PromptToast from './prompt-toast'
+import Button from '@/app/components/base/button'
+
+type Props = {
+  storageKey: string
+  onApply: (result: string) => void
+  generatorType: GeneratorType
+}
+
+const Result: FC<Props> = ({
+  storageKey,
+  onApply,
+  generatorType,
+}) => {
+  const { t } = useTranslation()
+  const isGeneratorPrompt = generatorType === GeneratorType.prompt
+  const handleApply = useCallback(() => {
+    onApply('xxx')
+  }, [onApply])
+
+  // todo current version and version list
+  const current = 'xxxx'
+  return (
+    <div>
+      <div className='mb-3  flex items-center justify-between'>
+        <div className='shrink-0 text-base font-semibold leading-[160%] text-text-secondary'>{t('appDebug.generate.resTitle')}</div>
+        <div className='flex space-x-2'>
+          <Button variant='primary' onClick={handleApply}>
+            {t('appDebug.generate.apply')}
+          </Button>
+        </div>
+      </div>
+      {
+        isGeneratorPrompt && (
+          <PromptToast className='mt-4' />
+        )
+      }
+      <div className='mt-3'>{current}</div>
+    </div>
+  )
+}
+export default React.memo(Result)

From f14678a0d8cf7eb5c1827137b37a57f0bf0b2970 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 18 Jul 2025 11:08:05 +0800
Subject: [PATCH 11/36] feat: call gen api

---
 .../configuration/config/automatic/get-automatic-res.tsx | 9 +++++++--
 web/app/components/workflow-app/hooks/use-configs-map.ts | 1 +
 .../components/workflow-app/hooks/use-workflow-run.ts    | 1 -
 web/app/components/workflow/hooks-store/store.ts         | 1 +
 .../workflow/nodes/_base/components/agent-strategy.tsx   | 1 +
 .../workflow/nodes/_base/components/prompt/editor.tsx    | 3 +++
 .../workflow/nodes/llm/components/config-prompt-item.tsx | 1 +
 .../nodes/llm/components/prompt-generator-btn.tsx        | 6 ++++++
 web/service/debug.ts                                     | 2 +-
 9 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 4df37bbcbb..20e25ac850 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -136,8 +136,9 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     },
   ]
 
-  const [instruction, setInstruction] = useState<string>('')
-  const [ideaOutput, setIdeaOutput] = useState<string>('')
+  const [instruction, setInstruction] = useState<string>('The travel plan to Anshun of Guizhou Province in China') // TODO: test value
+  const [ideaOutput, setIdeaOutput] = useState<string>('use json format to output the result. Content in result uses Chinese. Format: {"summary: "summary content", "result": "result content"}')
+  const [currentPrompt, setCurrentPrompt] = useState<string>('')
   const [isFoldIdeaOutput, {
     toggle: toggleFoldIdeaOutput,
   }] = useBoolean(true)
@@ -226,7 +227,11 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     setLoadingTrue()
     try {
       const { error, ...res } = await generateRule({
+        flow_id: flowId,
+        node_id: nodeId,
+        current: currentPrompt,
         instruction,
+        idea_output: ideaOutput,
         model_config: model,
       })
       setRes(res)
diff --git a/web/app/components/workflow-app/hooks/use-configs-map.ts b/web/app/components/workflow-app/hooks/use-configs-map.ts
index 0db4f77856..628a1d1d73 100644
--- a/web/app/components/workflow-app/hooks/use-configs-map.ts
+++ b/web/app/components/workflow-app/hooks/use-configs-map.ts
@@ -5,6 +5,7 @@ export const useConfigsMap = () => {
   const appId = useStore(s => s.appId)
   return useMemo(() => {
     return {
+      flowId: appId,
       conversationVarsUrl: `apps/${appId}/workflows/draft/conversation-variables`,
       systemVarsUrl: `apps/${appId}/workflows/draft/system-variables`,
     }
diff --git a/web/app/components/workflow-app/hooks/use-workflow-run.ts b/web/app/components/workflow-app/hooks/use-workflow-run.ts
index c303211715..10155f6128 100644
--- a/web/app/components/workflow-app/hooks/use-workflow-run.ts
+++ b/web/app/components/workflow-app/hooks/use-workflow-run.ts
@@ -35,7 +35,6 @@ export const useWorkflowRun = () => {
   const invalidAllLastRun = useInvalidAllLastRun(appId as string)
   const configsMap = useConfigsMap()
   const { fetchInspectVars } = useSetWorkflowVarsWithValue({
-    flowId: appId as string,
     ...configsMap,
   })
 
diff --git a/web/app/components/workflow/hooks-store/store.ts b/web/app/components/workflow/hooks-store/store.ts
index 4e8f74c774..7e7358d9d6 100644
--- a/web/app/components/workflow/hooks-store/store.ts
+++ b/web/app/components/workflow/hooks-store/store.ts
@@ -49,6 +49,7 @@ type CommonHooksFnMap = {
   resetConversationVar: (varId: string) => Promise<void>
   invalidateConversationVarValues: () => void
   configsMap?: {
+    flowId: string
     conversationVarsUrl: string
     systemVarsUrl: string
   }
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
index ce9fbb77e1..3b5b81ed1f 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -87,6 +87,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
             headerClassName='bg-transparent px-0 text-text-secondary system-sm-semibold-uppercase'
             containerBackgroundClassName='bg-transparent'
             gradientBorder={false}
+            nodeId={nodeId}
             isSupportPromptGenerator={!!def.auto_generate?.type}
             titleTooltip={schema.tooltip && renderI18nObject(schema.tooltip)}
             editorContainerClassName='px-0'
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 3796cb19bf..ac9020ebe2 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -41,6 +41,7 @@ type Props = {
   className?: string
   headerClassName?: string
   instanceId?: string
+  nodeId?: string
   title: string | React.JSX.Element
   value: string
   onChange: (value: string) => void
@@ -83,6 +84,7 @@ const Editor: FC<Props> = ({
   className,
   headerClassName,
   instanceId,
+  nodeId,
   title,
   value,
   onChange,
@@ -160,6 +162,7 @@ const Editor: FC<Props> = ({
               <div className='text-xs font-medium leading-[18px] text-text-tertiary'>{value?.length || 0}</div>
               {isSupportPromptGenerator && (
                 <PromptGeneratorBtn
+                  nodeId={nodeId!}
                   className='ml-[5px]'
                   onGenerated={onGenerated}
                   modelConfig={modelConfig}
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
index 0e6ceda6af..91e25a2436 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
@@ -136,6 +136,7 @@ const ConfigPromptItem: FC<Props> = ({
       hasSetBlockStatus={hasSetBlockStatus}
       nodesOutputVars={availableVars}
       availableNodes={availableNodes}
+      nodeId={id}
       isSupportPromptGenerator={payload.role === PromptRole.system}
       onGenerated={handleGenerated}
       modelConfig={modelConfig}
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index ec1456e92c..a866f7397f 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -10,11 +10,13 @@ import { AppType } from '@/types/app'
 import type { AutomaticRes } from '@/service/debug'
 import type { ModelConfig, Node, NodeOutPutVar } from '@/app/components/workflow/types'
 import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
+import { useHooksStore } from '../../../hooks-store'
 
 type Props = {
   className?: string
   onGenerated?: (prompt: string) => void
   modelConfig?: ModelConfig
+  nodeId: string
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
 }
@@ -22,6 +24,7 @@ type Props = {
 const PromptGeneratorBtn: FC<Props> = ({
   className,
   onGenerated,
+  nodeId,
   nodesOutputVars,
   availableNodes,
 }) => {
@@ -30,6 +33,7 @@ const PromptGeneratorBtn: FC<Props> = ({
     onGenerated?.(res.prompt)
     showAutomaticFalse()
   }, [onGenerated, showAutomaticFalse])
+  const configsMap = useHooksStore(s => s.configsMap)
   return (
     <div className={cn(className)}>
       <ActionButton
@@ -46,6 +50,8 @@ const PromptGeneratorBtn: FC<Props> = ({
           generatorType={GeneratorType.prompt}
           nodesOutputVars={nodesOutputVars}
           availableNodes={availableNodes}
+          flowId={configsMap?.flowId || ''}
+          nodeId={nodeId}
         />
       )}
     </div>
diff --git a/web/service/debug.ts b/web/service/debug.ts
index 3770c4d398..fea64fc30b 100644
--- a/web/service/debug.ts
+++ b/web/service/debug.ts
@@ -72,7 +72,7 @@ export const fetchConversationMessages = (appId: string, conversation_id: string
 }
 
 export const generateRule = (body: Record<string, any>) => {
-  return post<AutomaticRes>('/rule-generate', {
+  return post<AutomaticRes>('/instruction-generate', {
     body,
   })
 }

From 677716346a6feceb74e5ba568c54422823187804 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 18 Jul 2025 11:47:46 +0800
Subject: [PATCH 12/36] chore: change currentprompt

---
 .../app/configuration/config/automatic/get-automatic-res.tsx   | 3 ++-
 .../workflow/nodes/_base/components/prompt/editor.tsx          | 1 +
 .../workflow/nodes/llm/components/prompt-generator-btn.tsx     | 3 +++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 20e25ac850..830a37997a 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -53,6 +53,7 @@ export type IGetAutomaticResProps = {
   generatorType: GeneratorType
   flowId: string
   nodeId?: string
+  currentPrompt?: string
   isBasicMode?: boolean
 }
 
@@ -81,6 +82,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   generatorType,
   flowId,
   nodeId,
+  currentPrompt,
   isBasicMode,
   onFinished,
 }) => {
@@ -138,7 +140,6 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
 
   const [instruction, setInstruction] = useState<string>('The travel plan to Anshun of Guizhou Province in China') // TODO: test value
   const [ideaOutput, setIdeaOutput] = useState<string>('use json format to output the result. Content in result uses Chinese. Format: {"summary: "summary content", "result": "result content"}')
-  const [currentPrompt, setCurrentPrompt] = useState<string>('')
   const [isFoldIdeaOutput, {
     toggle: toggleFoldIdeaOutput,
   }] = useBoolean(true)
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index ac9020ebe2..debcafd437 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -168,6 +168,7 @@ const Editor: FC<Props> = ({
                   modelConfig={modelConfig}
                   nodesOutputVars={nodesOutputVars}
                   availableNodes={availableNodes}
+                  currentPrompt={value}
                 />
               )}
 
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index a866f7397f..16a1ba4217 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -19,6 +19,7 @@ type Props = {
   nodeId: string
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
+  currentPrompt?: string
 }
 
 const PromptGeneratorBtn: FC<Props> = ({
@@ -27,6 +28,7 @@ const PromptGeneratorBtn: FC<Props> = ({
   nodeId,
   nodesOutputVars,
   availableNodes,
+  currentPrompt,
 }) => {
   const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
   const handleAutomaticRes = useCallback((res: AutomaticRes) => {
@@ -52,6 +54,7 @@ const PromptGeneratorBtn: FC<Props> = ({
           availableNodes={availableNodes}
           flowId={configsMap?.flowId || ''}
           nodeId={nodeId}
+          currentPrompt={currentPrompt}
         />
       )}
     </div>

From a85908386efa439eb28fb49177231cebcc50c0ea Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 18 Jul 2025 16:39:22 +0800
Subject: [PATCH 13/36] feat: version select picker and versions storage

---
 .../config-prompt/simple-prompt-input.tsx     | 12 +--
 .../config/automatic/get-automatic-res.tsx    | 77 +++++++++++-----
 .../configuration/config/automatic/result.tsx | 27 ++++--
 .../config/automatic/use-gen-data.ts          | 36 ++++++++
 .../config/automatic/version-selector.tsx     | 91 +++++++++++++++++++
 .../llm/components/prompt-generator-btn.tsx   |  6 +-
 web/service/debug.ts                          | 19 +++-
 7 files changed, 225 insertions(+), 43 deletions(-)
 create mode 100644 web/app/components/app/configuration/config/automatic/use-gen-data.ts
 create mode 100644 web/app/components/app/configuration/config/automatic/version-selector.tsx

diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 51fa0c173d..68c08efb10 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -13,7 +13,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import { AppType } from '@/types/app'
 import { getNewVar, getVars } from '@/utils/var'
 import AutomaticBtn from '@/app/components/app/configuration/config/automatic/automatic-btn'
-import type { AutomaticRes } from '@/service/debug'
+import type { GenRes } from '@/service/debug'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import ConfigContext from '@/context/debug-configuration'
@@ -140,21 +140,21 @@ const Prompt: FC<ISimplePromptInput> = ({
   }
 
   const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
-  const handleAutomaticRes = (res: AutomaticRes) => {
+  const handleAutomaticRes = (res: GenRes) => {
     // put eventEmitter in first place to prevent overwrite the configs.prompt_variables.But another problem is that prompt won't hight the prompt_variables.
     eventEmitter?.emit({
       type: PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER,
-      payload: res.prompt,
+      payload: res.modified,
     } as any)
     const newModelConfig = produce(modelConfig, (draft) => {
-      draft.configs.prompt_template = res.prompt
-      draft.configs.prompt_variables = res.variables.map(key => ({ key, name: key, type: 'string', required: true }))
+      draft.configs.prompt_template = res.modified
+      draft.configs.prompt_variables = (res.variables || []).map(key => ({ key, name: key, type: 'string', required: true }))
     })
     setModelConfig(newModelConfig)
     setPrevPromptConfig(modelConfig.configs)
 
     if (mode !== AppType.completion) {
-      setIntroduction(res.opening_statement)
+      setIntroduction(res.opening_statement || '')
       const newFeatures = produce(features, (draft) => {
         draft.opening = {
           ...draft.opening,
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 830a37997a..b9ac9e5ce2 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -20,14 +20,14 @@ import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Textarea from '@/app/components/base/textarea'
 import Toast from '@/app/components/base/toast'
-import { generateRule } from '@/service/debug'
+import { generateBasicAppFistTimeRule, generateRule } from '@/service/debug'
 import type { CompletionParams, Model } from '@/types/app'
 import type { AppType } from '@/types/app'
 import Loading from '@/app/components/base/loading'
 import Confirm from '@/app/components/base/confirm'
 
 // type
-import type { AutomaticRes } from '@/service/debug'
+import type { GenRes } from '@/service/debug'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 
@@ -41,17 +41,18 @@ import type { GeneratorType } from './types'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import Link from 'next/link'
 import Result from './result'
+import useGenData from './use-gen-data'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetAutomaticResProps = {
   mode: AppType
   isShow: boolean
   onClose: () => void
-  onFinished: (res: AutomaticRes) => void
+  onFinished: (res: GenRes) => void
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
   generatorType: GeneratorType
-  flowId: string
+  flowId?: string
   nodeId?: string
   currentPrompt?: string
   isBasicMode?: boolean
@@ -163,7 +164,18 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     return true
   }
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false)
-  const [res, setRes] = useState<AutomaticRes | null>(null)
+  const storageKey = `${flowId}${isBasicMode ? '' : `-${nodeId}`}`
+  const { versions, addVersion, current } = useGenData({
+    storageKey,
+  })
+
+  useEffect(() => {
+    // if (!versions.length) {
+    addVersion({
+      modified: 'ddd',
+    })
+    // }
+  }, [])
 
   useEffect(() => {
     if (defaultModel) {
@@ -227,21 +239,42 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
       return
     setLoadingTrue()
     try {
-      const { error, ...res } = await generateRule({
-        flow_id: flowId,
-        node_id: nodeId,
-        current: currentPrompt,
-        instruction,
-        idea_output: ideaOutput,
-        model_config: model,
-      })
-      setRes(res)
-      if (error) {
-        Toast.notify({
-          type: 'error',
-          message: error,
+      let apiRes: GenRes
+      if (isBasicMode && !currentPrompt) {
+        const { error, ...res } = await generateBasicAppFistTimeRule({
+          instruction,
+          model_config: model,
+          no_varieable: false,
         })
+        apiRes = {
+          ...res,
+          modified: res.prompt,
+        } as GenRes
+        if (error) {
+          Toast.notify({
+            type: 'error',
+            message: error,
+          })
+        }
+      }
+      else {
+        const { error, ...res } = await generateRule({
+          flow_id: flowId,
+          node_id: nodeId,
+          current: currentPrompt,
+          instruction,
+          idea_output: ideaOutput,
+          model_config: model,
+        })
+        apiRes = res
+        if (error) {
+          Toast.notify({
+            type: 'error',
+            message: error,
+          })
+        }
       }
+      addVersion(apiRes)
     }
     finally {
       setLoadingFalse()
@@ -254,7 +287,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   }] = useBoolean(false)
 
   const isShowAutoPromptResPlaceholder = () => {
-    return !isLoading && !res
+    return !isLoading && !current
   }
 
   return (
@@ -325,7 +358,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                 <div className='system-xs-regular text-text-tertiary'>({t(`${i18nPrefix}.optional`)})</div>
                 <ArrowDownRoundFill className={cn('size text-text-quaternary', isFoldIdeaOutput && 'relative top-[1px] rotate-[-90deg]')} />
               </div>
-              { !isFoldIdeaOutput && (
+              {!isFoldIdeaOutput && (
                 <Textarea
                   className="h-[80px]"
                   placeholder={t(`${i18nPrefix}.ideaOutputPlaceholder`)}
@@ -354,7 +387,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         {
           <div className='h-full w-0 grow p-6 pb-0'>
             <Result
-              storageKey={`${flowId}${isBasicMode ? '' : `-${nodeId}`}`}
+              storageKey={storageKey}
               onApply={showConfirmOverwrite}
               generatorType={generatorType}
             />
@@ -369,7 +402,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
             isShow
             onConfirm={() => {
               hideShowConfirmOverwrite()
-              onFinished(res!)
+              onFinished(current!)
             }}
             onCancel={hideShowConfirmOverwrite}
           />
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index f8e7a5350d..262a489311 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -1,14 +1,16 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { GeneratorType } from './types'
 import PromptToast from './prompt-toast'
 import Button from '@/app/components/base/button'
+import useGenData from './use-gen-data'
+import VersionSelector from './version-selector'
 
 type Props = {
   storageKey: string
-  onApply: (result: string) => void
+  onApply: () => void
   generatorType: GeneratorType
 }
 
@@ -19,18 +21,23 @@ const Result: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const isGeneratorPrompt = generatorType === GeneratorType.prompt
-  const handleApply = useCallback(() => {
-    onApply('xxx')
-  }, [onApply])
+  const { current, currentVersionIndex, setCurrentVersionIndex, versions } = useGenData({
+    storageKey,
+  })
 
-  // todo current version and version list
-  const current = 'xxxx'
   return (
     <div>
       <div className='mb-3  flex items-center justify-between'>
-        <div className='shrink-0 text-base font-semibold leading-[160%] text-text-secondary'>{t('appDebug.generate.resTitle')}</div>
+        <div>
+          <div className='shrink-0 text-base font-semibold leading-[160%] text-text-secondary'>{t('appDebug.generate.resTitle')}</div>
+          <VersionSelector
+            versionLen={versions.length}
+            value={currentVersionIndex}
+            onChange={setCurrentVersionIndex}
+          />
+        </div>
         <div className='flex space-x-2'>
-          <Button variant='primary' onClick={handleApply}>
+          <Button variant='primary' onClick={onApply}>
             {t('appDebug.generate.apply')}
           </Button>
         </div>
@@ -40,7 +47,7 @@ const Result: FC<Props> = ({
           <PromptToast className='mt-4' />
         )
       }
-      <div className='mt-3'>{current}</div>
+      <div className='mt-3'>{current?.modified}</div>
     </div>
   )
 }
diff --git a/web/app/components/app/configuration/config/automatic/use-gen-data.ts b/web/app/components/app/configuration/config/automatic/use-gen-data.ts
new file mode 100644
index 0000000000..8da4ba2c6e
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/use-gen-data.ts
@@ -0,0 +1,36 @@
+import type { GenRes } from '@/service/debug'
+import { useSessionStorageState } from 'ahooks'
+import { useCallback } from 'react'
+
+type Params = {
+  storageKey: string
+}
+const keyPrefix = 'gen-data-'
+const useGenData = ({ storageKey }: Params) => {
+  const [versions, setVersions] = useSessionStorageState<GenRes[]>(`${keyPrefix}${storageKey}-versions`, {
+    defaultValue: [],
+  })
+
+  const [currentVersionIndex, setCurrentVersionIndex] = useSessionStorageState<number>(`${keyPrefix}${storageKey}-version-index`, {
+    defaultValue: 0,
+  })
+
+  const current = versions[currentVersionIndex]
+
+  const addVersion = useCallback((version: GenRes) => {
+    setCurrentVersionIndex(() => versions.length)
+    setVersions((prev) => {
+      return [...prev!, version]
+    })
+  }, [setVersions, setCurrentVersionIndex, versions.length])
+
+  return {
+    versions,
+    addVersion,
+    currentVersionIndex,
+    setCurrentVersionIndex,
+    current,
+  }
+}
+
+export default useGenData
diff --git a/web/app/components/app/configuration/config/automatic/version-selector.tsx b/web/app/components/app/configuration/config/automatic/version-selector.tsx
new file mode 100644
index 0000000000..e5e0df0976
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/version-selector.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import { useBoolean } from 'ahooks'
+import cn from '@/utils/classnames'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
+
+type Option = {
+  label: string
+  value: number
+}
+
+type VersionSelectorProps = {
+  versionLen: number;
+  value: number;
+  onChange: (index: number) => void;
+}
+
+const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, onChange }) => {
+  const [isOpen, {
+    setFalse: handleOpenFalse,
+    toggle: handleOpenToggle,
+    set: handleOpenSet,
+  }] = useBoolean(false)
+
+  const versions = Array.from({ length: versionLen }, (_, index) => ({
+    label: `Version ${index + 1}${index === versionLen - 1 ? ' · Latest' : ''}`,
+    value: index,
+  }))
+
+  const isLatest = value === versionLen - 1
+
+  return (
+    <PortalToFollowElem
+      placement={'bottom-start'}
+      offset={{
+        mainAxis: 4,
+        crossAxis: -8,
+      }}
+      open={isOpen}
+      onOpenChange={handleOpenSet}
+    >
+      <PortalToFollowElemTrigger
+        onClick={handleOpenToggle}
+        asChild
+      >
+
+        <div className='system-xs-medium flex cursor-pointer items-center text-text-secondary'>
+          <div>Version {value + 1}{isLatest && ' · Latest'}</div>
+          <RiArrowDownSLine className='size-3 ' />
+        </div>
+      </PortalToFollowElemTrigger >
+      <PortalToFollowElemContent className={cn(
+        'z-[99]',
+      )}>
+        <div
+          className={cn(
+            'w-[208px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg',
+          )}
+        >
+          <div className='system-xs-medium-uppercase flex h-[22px] items-center px-3 pl-3 text-text-tertiary'>
+            Versions
+          </div>
+          {
+            versions.map(option => (
+              <div
+                key={option.value}
+                className={cn(
+                  'system-sm-medium flex h-7 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover',
+                )}
+                title={option.label}
+                onClick={() => {
+                  onChange(option.value)
+                  handleOpenFalse()
+                }}
+              >
+                <div className='mr-1 grow truncate px-1 pl-1'>
+                  {option.label}
+                </div>
+                {
+                  value === option.value && <RiCheckLine className='h-4 w-4 shrink-0 text-text-accent' />
+                }
+              </div>
+            ))
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem >
+  )
+}
+
+export default VersionSelector
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index 16a1ba4217..9d30e48e5e 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -7,7 +7,7 @@ import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { ActionButton } from '@/app/components/base/action-button'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
 import { AppType } from '@/types/app'
-import type { AutomaticRes } from '@/service/debug'
+import type { GenRes } from '@/service/debug'
 import type { ModelConfig, Node, NodeOutPutVar } from '@/app/components/workflow/types'
 import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
 import { useHooksStore } from '../../../hooks-store'
@@ -31,8 +31,8 @@ const PromptGeneratorBtn: FC<Props> = ({
   currentPrompt,
 }) => {
   const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
-  const handleAutomaticRes = useCallback((res: AutomaticRes) => {
-    onGenerated?.(res.prompt)
+  const handleAutomaticRes = useCallback((res: GenRes) => {
+    onGenerated?.(res.modified)
     showAutomaticFalse()
   }, [onGenerated, showAutomaticFalse])
   const configsMap = useHooksStore(s => s.configsMap)
diff --git a/web/service/debug.ts b/web/service/debug.ts
index fea64fc30b..3af53c5615 100644
--- a/web/service/debug.ts
+++ b/web/service/debug.ts
@@ -3,12 +3,21 @@ import type { IOnCompleted, IOnData, IOnError, IOnFile, IOnMessageEnd, IOnMessag
 import type { ChatPromptConfig, CompletionPromptConfig } from '@/models/debug'
 import type { ModelModeType } from '@/types/app'
 import type { ModelParameterRule } from '@/app/components/header/account-setting/model-provider-page/declarations'
-export type AutomaticRes = {
+export type BasicAppFirstRes = {
   prompt: string
   variables: string[]
   opening_statement: string
   error?: string
 }
+
+export type GenRes = {
+  modified: string
+  message?: string // tip for human
+  variables?: string[] // only for basic app first time rule
+  opening_statement?: string // only for basic app first time rule
+  error?: string
+}
+
 export type CodeGenRes = {
   code: string
   language: string[]
@@ -71,8 +80,14 @@ export const fetchConversationMessages = (appId: string, conversation_id: string
   })
 }
 
+export const generateBasicAppFistTimeRule = (body: Record<string, any>) => {
+  return post<BasicAppFirstRes>('/rule-generate', {
+    body,
+  })
+}
+
 export const generateRule = (body: Record<string, any>) => {
-  return post<AutomaticRes>('/instruction-generate', {
+  return post<GenRes>('/instruction-generate', {
     body,
   })
 }

From ed737beb4a0b683de839be7e4c4f8e7086ae93f1 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 18 Jul 2025 17:38:17 +0800
Subject: [PATCH 14/36] chore: can set to value

---
 .../config/automatic/get-automatic-res.tsx    | 21 +++++++++++--------
 .../configuration/config/automatic/result.tsx | 15 +++++++------
 .../config/automatic/use-gen-data.ts          |  6 +++---
 .../llm/components/config-prompt-item.tsx     |  4 +++-
 .../nodes/llm/components/config-prompt.tsx    |  1 +
 5 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index b9ac9e5ce2..7e4cf634b9 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -165,17 +165,17 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   }
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false)
   const storageKey = `${flowId}${isBasicMode ? '' : `-${nodeId}`}`
-  const { versions, addVersion, current } = useGenData({
+  const { addVersion, current, currentVersionIndex, setCurrentVersionIndex, versions } = useGenData({
     storageKey,
   })
 
-  useEffect(() => {
-    // if (!versions.length) {
-    addVersion({
-      modified: 'ddd',
-    })
-    // }
-  }, [])
+  // useEffect(() => {
+  //   // if (!versions.length) {
+  //   addVersion({
+  //     modified: 'ddd',
+  //   })
+  //   // }
+  // }, [])
 
   useEffect(() => {
     if (defaultModel) {
@@ -387,7 +387,10 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         {
           <div className='h-full w-0 grow p-6 pb-0'>
             <Result
-              storageKey={storageKey}
+              current={current!}
+              currentVersionIndex={currentVersionIndex || 0}
+              setCurrentVersionIndex={setCurrentVersionIndex}
+              versions={versions || []}
               onApply={showConfirmOverwrite}
               generatorType={generatorType}
             />
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index 262a489311..858003cdb5 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -5,25 +5,28 @@ import { useTranslation } from 'react-i18next'
 import { GeneratorType } from './types'
 import PromptToast from './prompt-toast'
 import Button from '@/app/components/base/button'
-import useGenData from './use-gen-data'
 import VersionSelector from './version-selector'
+import type { GenRes } from '@/service/debug'
 
 type Props = {
-  storageKey: string
+  current: GenRes
+  currentVersionIndex: number
+  setCurrentVersionIndex: (index: number) => void
+  versions: GenRes[]
   onApply: () => void
   generatorType: GeneratorType
 }
 
 const Result: FC<Props> = ({
-  storageKey,
+  current,
+  currentVersionIndex,
+  setCurrentVersionIndex,
+  versions,
   onApply,
   generatorType,
 }) => {
   const { t } = useTranslation()
   const isGeneratorPrompt = generatorType === GeneratorType.prompt
-  const { current, currentVersionIndex, setCurrentVersionIndex, versions } = useGenData({
-    storageKey,
-  })
 
   return (
     <div>
diff --git a/web/app/components/app/configuration/config/automatic/use-gen-data.ts b/web/app/components/app/configuration/config/automatic/use-gen-data.ts
index 8da4ba2c6e..521d2ad7f0 100644
--- a/web/app/components/app/configuration/config/automatic/use-gen-data.ts
+++ b/web/app/components/app/configuration/config/automatic/use-gen-data.ts
@@ -15,14 +15,14 @@ const useGenData = ({ storageKey }: Params) => {
     defaultValue: 0,
   })
 
-  const current = versions[currentVersionIndex]
+  const current = versions?.[currentVersionIndex || 0]
 
   const addVersion = useCallback((version: GenRes) => {
-    setCurrentVersionIndex(() => versions.length)
+    setCurrentVersionIndex(() => versions?.length || 0)
     setVersions((prev) => {
       return [...prev!, version]
     })
-  }, [setVersions, setCurrentVersionIndex, versions.length])
+  }, [setVersions, setCurrentVersionIndex, versions?.length])
 
   return {
     versions,
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
index 91e25a2436..ff571af9d2 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
@@ -19,6 +19,7 @@ type Props = {
   canNotChooseSystemRole?: boolean
   readOnly: boolean
   id: string
+  nodeId: string
   canRemove: boolean
   isChatModel: boolean
   isChatApp: boolean
@@ -63,6 +64,7 @@ const ConfigPromptItem: FC<Props> = ({
   canNotChooseSystemRole,
   readOnly,
   id,
+  nodeId,
   canRemove,
   handleChatModeMessageRoleChange,
   isChatModel,
@@ -136,7 +138,7 @@ const ConfigPromptItem: FC<Props> = ({
       hasSetBlockStatus={hasSetBlockStatus}
       nodesOutputVars={availableVars}
       availableNodes={availableNodes}
-      nodeId={id}
+      nodeId={nodeId}
       isSupportPromptGenerator={payload.role === PromptRole.system}
       onGenerated={handleGenerated}
       modelConfig={modelConfig}
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index eb14f302e0..b8a68f364f 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -188,6 +188,7 @@ const ConfigPrompt: FC<Props> = ({
                           canRemove={payload.length > 1 && !(index === 0 && item.role === PromptRole.system)}
                           readOnly={readOnly}
                           id={item.id!}
+                          nodeId={nodeId}
                           handleChatModeMessageRoleChange={handleChatModeMessageRoleChange(index)}
                           isChatModel={isChatModel}
                           isChatApp={isChatApp}

From a5653f253a62ea8dd967cf9bf68f118863ed11ae Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 18 Jul 2025 17:56:46 +0800
Subject: [PATCH 15/36] chore: version show

---
 .../config/automatic/version-selector.tsx     | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/version-selector.tsx b/web/app/components/app/configuration/config/automatic/version-selector.tsx
index e5e0df0976..31d9826b31 100644
--- a/web/app/components/app/configuration/config/automatic/version-selector.tsx
+++ b/web/app/components/app/configuration/config/automatic/version-selector.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { useBoolean } from 'ahooks'
 import cn from '@/utils/classnames'
@@ -22,6 +22,16 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
     set: handleOpenSet,
   }] = useBoolean(false)
 
+  const moreThanOneVersion = versionLen > 1
+  const handleOpen = useCallback((value: boolean) => {
+    if (moreThanOneVersion)
+      handleOpenSet(value)
+  }, [moreThanOneVersion, handleOpenToggle])
+  const handleToggle = useCallback(() => {
+    if (moreThanOneVersion)
+      handleOpenToggle()
+  }, [moreThanOneVersion, handleOpenToggle])
+
   const versions = Array.from({ length: versionLen }, (_, index) => ({
     label: `Version ${index + 1}${index === versionLen - 1 ? ' · Latest' : ''}`,
     value: index,
@@ -37,16 +47,16 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
         crossAxis: -8,
       }}
       open={isOpen}
-      onOpenChange={handleOpenSet}
+      onOpenChange={handleOpen}
     >
       <PortalToFollowElemTrigger
-        onClick={handleOpenToggle}
+        onClick={handleToggle}
         asChild
       >
 
-        <div className='system-xs-medium flex cursor-pointer items-center text-text-secondary'>
+        <div className={cn('system-xs-medium flex items-center text-text-secondary', moreThanOneVersion && 'cursor-pointer')}>
           <div>Version {value + 1}{isLatest && ' · Latest'}</div>
-          <RiArrowDownSLine className='size-3 ' />
+          {moreThanOneVersion && <RiArrowDownSLine className='size-3 ' />}
         </div>
       </PortalToFollowElemTrigger >
       <PortalToFollowElemContent className={cn(

From e2512b0af9c1fe62acea39d5d0f7ac0f43f95e96 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 18 Jul 2025 18:15:25 +0800
Subject: [PATCH 16/36] fix: can not choose error message in code gen

---
 .../config/automatic/instruction-editor.tsx         |  9 +++++----
 .../components/variable/var-reference-vars.tsx      | 13 ++++++++-----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index 0cc0c3cd49..7865b3f294 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -30,6 +30,7 @@ const InstructionEditor: FC<Props> = ({
   const { t } = useTranslation()
   const controlPromptEditorRerenderKey = useStore(s => s.controlPromptEditorRerenderKey)
   const getVarType = useWorkflowVariableType()
+  const isCode = generatorType === 'code'
   const placeholder = (
     <div className='system-sm-regular  text-text-placeholder'>
       <div className='leading-6'>{t(`${i18nPrefix}.instructionPlaceHolderTitle`)}</div>
@@ -71,14 +72,14 @@ const InstructionEditor: FC<Props> = ({
             return acc
           }, {} as any),
         }}
-        currentBlock = {{
+        currentBlock={{
           show: true,
           generatorType,
         }}
-        errorMessageBlock = {{
-          show: true,
+        errorMessageBlock={{
+          show: isCode,
         }}
-        lastRunBlock = {{
+        lastRunBlock={{
           show: true,
         }}
         onChange={onChange}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index e828d86b6f..cc7add569e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -50,6 +50,7 @@ type ItemProps = {
   isFlat?: boolean
   isInCodeGeneratorInstructionEditor?: boolean
   zIndex?: number
+  className?: string
 }
 
 const objVarTypes = [VarType.object, VarType.file]
@@ -67,6 +68,7 @@ const Item: FC<ItemProps> = ({
   isFlat,
   isInCodeGeneratorInstructionEditor,
   zIndex,
+  className,
 }) => {
   const isStructureOutput = itemData.type === VarType.object && (itemData.children as StructuredOutput)?.schema?.properties
   const isFile = itemData.type === VarType.file && !isStructureOutput
@@ -75,7 +77,7 @@ const Item: FC<ItemProps> = ({
   const isEnv = itemData.variable.startsWith('env.')
   const isChatVar = itemData.variable.startsWith('conversation.')
   const flatVarIcon = useMemo(() => {
-    if(!isFlat)
+    if (!isFlat)
       return null
     const variable = itemData.variable
     let Icon
@@ -91,7 +93,7 @@ const Item: FC<ItemProps> = ({
   }, [isFlat, isInCodeGeneratorInstructionEditor, itemData.variable])
 
   const varName = useMemo(() => {
-    if(!isFlat)
+    if (!isFlat)
       return itemData.variable
     if (itemData.variable === 'current')
       return isInCodeGeneratorInstructionEditor ? 'current_code' : 'current_prompt'
@@ -153,7 +155,7 @@ const Item: FC<ItemProps> = ({
     if (!isSupportFileVar && isFile)
       return
 
-    if(isFlat) {
+    if (isFlat) {
       onChange([itemData.variable], itemData)
     }
     else if (isSys || isEnv || isChatVar) { // system variable | environment variable | conversation variable
@@ -175,7 +177,8 @@ const Item: FC<ItemProps> = ({
           className={cn(
             (isObj || isStructureOutput) ? ' pr-1' : 'pr-[18px]',
             isHovering && ((isObj || isStructureOutput) ? 'bg-components-panel-on-panel-item-bg-hover' : 'bg-state-base-hover'),
-            'relative flex h-6 w-full cursor-pointer items-center  rounded-md pl-3',
+            'relative flex h-6 w-full cursor-pointer items-center rounded-md pl-3',
+            className,
           )
           }
           onClick={handleChosen}
@@ -379,7 +382,7 @@ const VarReferenceVars: FC<Props> = ({
 
           {
             filteredVars.map((item, i) => (
-              <div key={i} className={cn(!item.isFlat && 'mt-3')}>
+              <div key={i} className={cn(!item.isFlat && 'mt-3', i === 0 && item.isFlat && 'mt-2')}>
                 {!item.isFlat && (
                   <div
                     className='system-xs-medium-uppercase truncate px-3 leading-[22px] text-text-tertiary'

From 635e92d7625bce26c213cdb4bed1b97a8ee627ba Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 18 Jul 2025 18:30:33 +0800
Subject: [PATCH 17/36] chore: copy

---
 .../app/configuration/config/automatic/result.tsx     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index 858003cdb5..c7504d3ea0 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -7,6 +7,9 @@ import PromptToast from './prompt-toast'
 import Button from '@/app/components/base/button'
 import VersionSelector from './version-selector'
 import type { GenRes } from '@/service/debug'
+import { RiClipboardLine } from '@remixicon/react'
+import copy from 'copy-to-clipboard'
+import Toast from '@/app/components/base/toast'
 
 type Props = {
   current: GenRes
@@ -39,7 +42,13 @@ const Result: FC<Props> = ({
             onChange={setCurrentVersionIndex}
           />
         </div>
-        <div className='flex space-x-2'>
+        <div className='flex items-center space-x-2'>
+          <Button className='px-2' onClick={() => {
+            copy(current.modified)
+            Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
+          }}>
+            <RiClipboardLine className='h-4 w-4 text-text-secondary' />
+          </Button>
           <Button variant='primary' onClick={onApply}>
             {t('appDebug.generate.apply')}
           </Button>

From ba8129cf73fbcc1f68470abf7361e744182b3f5a Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 14:01:35 +0800
Subject: [PATCH 18/36] feat: code generate use prompt editor

---
 .../config-prompt/simple-prompt-input.tsx     |  2 -
 .../config/automatic/get-automatic-res.tsx    | 64 +++++++------------
 .../config/automatic/idea-output.tsx          | 48 ++++++++++++++
 .../instruction-editor-in-workflow.tsx        | 48 ++++++++++++++
 .../config/automatic/instruction-editor.tsx   | 26 ++++----
 .../code-generator/get-code-generator-res.tsx | 36 ++++++++---
 .../components/code-generator-button.tsx      |  3 +
 .../nodes/_base/components/editor/base.tsx    | 11 +++-
 .../components/editor/code-editor/index.tsx   |  3 +
 .../nodes/_base/components/prompt/editor.tsx  |  2 -
 .../variable/var-reference-vars.tsx           |  4 +-
 .../nodes/_base/hooks/use-toggle-expend.ts    |  7 +-
 .../components/workflow/nodes/code/panel.tsx  |  1 +
 .../llm/components/prompt-generator-btn.tsx   | 10 +--
 14 files changed, 187 insertions(+), 78 deletions(-)
 create mode 100644 web/app/components/app/configuration/config/automatic/idea-output.tsx
 create mode 100644 web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx

diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 68c08efb10..2fb081366f 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -27,7 +27,6 @@ import { PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER } from '@/app/components/ba
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { noop } from 'lodash-es'
-import { GeneratorType } from '../config/automatic/types'
 
 export type ISimplePromptInput = {
   mode: AppType
@@ -278,7 +277,6 @@ const Prompt: FC<ISimplePromptInput> = ({
           onClose={showAutomaticFalse}
           onFinished={handleAutomaticRes}
           isBasicMode
-          generatorType={GeneratorType.prompt}
         />
       )}
     </div>
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 7e4cf634b9..e14939b935 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -14,11 +14,9 @@ import {
   RiTranslate,
   RiUser2Line,
 } from '@remixicon/react'
-import cn from 'classnames'
 import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
-import Textarea from '@/app/components/base/textarea'
 import Toast from '@/app/components/base/toast'
 import { generateBasicAppFistTimeRule, generateRule } from '@/service/debug'
 import type { CompletionParams, Model } from '@/types/app'
@@ -35,13 +33,13 @@ import { ModelTypeEnum } from '@/app/components/header/account-setting/model-pro
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import type { ModelModeType } from '@/types/app'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import InstructionEditor from './instruction-editor'
-import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
-import type { GeneratorType } from './types'
-import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
+import InstructionEditorInWorkflow from './instruction-editor-in-workflow'
+import InstructionEditorInBasic from './instruction-editor'
+import { GeneratorType } from './types'
 import Link from 'next/link'
 import Result from './result'
 import useGenData from './use-gen-data'
+import IdeaOutput from './idea-output'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetAutomaticResProps = {
@@ -49,9 +47,6 @@ export type IGetAutomaticResProps = {
   isShow: boolean
   onClose: () => void
   onFinished: (res: GenRes) => void
-  nodesOutputVars?: NodeOutPutVar[]
-  availableNodes?: Node[]
-  generatorType: GeneratorType
   flowId?: string
   nodeId?: string
   currentPrompt?: string
@@ -78,9 +73,6 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   mode,
   isShow,
   onClose,
-  nodesOutputVars,
-  availableNodes,
-  generatorType,
   flowId,
   nodeId,
   currentPrompt,
@@ -141,9 +133,6 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
 
   const [instruction, setInstruction] = useState<string>('The travel plan to Anshun of Guizhou Province in China') // TODO: test value
   const [ideaOutput, setIdeaOutput] = useState<string>('use json format to output the result. Content in result uses Chinese. Format: {"summary: "summary content", "result": "result content"}')
-  const [isFoldIdeaOutput, {
-    toggle: toggleFoldIdeaOutput,
-  }] = useBoolean(true)
 
   const handleChooseTemplate = useCallback((key: string) => {
     return () => {
@@ -341,32 +330,27 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           <div className='mt-4'>
             <div>
               <div className='system-sm-semibold-uppercase mb-1.5 text-text-secondary'>{t('appDebug.generate.instruction')}</div>
-              <InstructionEditor
-                value={instruction}
-                onChange={setInstruction}
-                nodesOutputVars={nodesOutputVars}
-                availableNodes={availableNodes}
-                generatorType={generatorType}
-              />
-            </div>
-            <div className='mt-4 text-[0px]'>
-              <div
-                className='mb-1.5 flex  cursor-pointer items-center text-sm font-medium leading-5 text-text-primary'
-                onClick={toggleFoldIdeaOutput}
-              >
-                <div className='system-sm-semibold-uppercase mr-1 text-text-secondary'>{t(`${i18nPrefix}.ideaOutput`)}</div>
-                <div className='system-xs-regular text-text-tertiary'>({t(`${i18nPrefix}.optional`)})</div>
-                <ArrowDownRoundFill className={cn('size text-text-quaternary', isFoldIdeaOutput && 'relative top-[1px] rotate-[-90deg]')} />
-              </div>
-              {!isFoldIdeaOutput && (
-                <Textarea
-                  className="h-[80px]"
-                  placeholder={t(`${i18nPrefix}.ideaOutputPlaceholder`)}
-                  value={ideaOutput}
-                  onChange={e => setIdeaOutput(e.target.value)}
+              {isBasicMode ? (
+                <InstructionEditorInBasic
+                  generatorType={GeneratorType.prompt}
+                  value={instruction}
+                  onChange={setInstruction}
+                  availableVars={[]}
+                  availableNodes={[]}
+                />
+              ) : (
+                <InstructionEditorInWorkflow
+                  generatorType={GeneratorType.prompt}
+                  value={instruction}
+                  onChange={setInstruction}
+                  nodeId={nodeId || ''}
                 />
               )}
             </div>
+            <IdeaOutput
+              value={ideaOutput}
+              onChange={setIdeaOutput}
+            />
 
             <div className='mt-7 flex justify-end space-x-2'>
               <Button onClick={onClose}>{t(`${i18nPrefix}.dismiss`)}</Button>
@@ -377,7 +361,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                 disabled={isLoading}
               >
                 <Generator className='h-4 w-4 text-white' />
-                <span className='text-xs font-semibold text-white'>{t('appDebug.generate.generate')}</span>
+                <span className='text-xs font-semibold'>{t('appDebug.generate.generate')}</span>
               </Button>
             </div>
           </div>
@@ -392,7 +376,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
               setCurrentVersionIndex={setCurrentVersionIndex}
               versions={versions || []}
               onApply={showConfirmOverwrite}
-              generatorType={generatorType}
+              generatorType={GeneratorType.prompt}
             />
           </div>
         }
diff --git a/web/app/components/app/configuration/config/automatic/idea-output.tsx b/web/app/components/app/configuration/config/automatic/idea-output.tsx
new file mode 100644
index 0000000000..373186953a
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/idea-output.tsx
@@ -0,0 +1,48 @@
+'use client'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
+import { useBoolean } from 'ahooks'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+import Textarea from '@/app/components/base/textarea'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'appDebug.generate'
+
+type Props = {
+  value: string
+  onChange: (value: string) => void
+}
+
+const IdeaOutput: FC<Props> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  const [isFoldIdeaOutput, {
+    toggle: toggleFoldIdeaOutput,
+  }] = useBoolean(true)
+
+  return (
+    <div className='mt-4 text-[0px]'>
+      <div
+        className='mb-1.5 flex  cursor-pointer items-center text-sm font-medium leading-5 text-text-primary'
+        onClick={toggleFoldIdeaOutput}
+      >
+        <div className='system-sm-semibold-uppercase mr-1 text-text-secondary'>{t(`${i18nPrefix}.ideaOutput`)}</div>
+        <div className='system-xs-regular text-text-tertiary'>({t(`${i18nPrefix}.optional`)})</div>
+        <ArrowDownRoundFill className={cn('size text-text-quaternary', isFoldIdeaOutput && 'relative top-[1px] rotate-[-90deg]')} />
+      </div>
+      {!isFoldIdeaOutput && (
+        <Textarea
+          className="h-[80px]"
+          placeholder={t(`${i18nPrefix}.ideaOutputPlaceholder`)}
+          value={value}
+          onChange={e => onChange(e.target.value)}
+        />
+      )}
+    </div>
+  )
+}
+export default React.memo(IdeaOutput)
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
new file mode 100644
index 0000000000..288843172f
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
@@ -0,0 +1,48 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import type { GeneratorType } from './types'
+import type { Var } from '@/app/components/workflow/types'
+import { VarType } from '@/app/components/workflow/types'
+import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
+import InstructionEditor from './instruction-editor'
+import { useWorkflowVariableType } from '@/app/components/workflow/hooks'
+
+type Props = {
+  nodeId: string
+  value: string
+  onChange: (text: string) => void
+  generatorType: GeneratorType
+}
+
+const InstructionEditorInWorkflow: FC<Props> = ({
+  nodeId,
+  value,
+  onChange,
+  generatorType,
+}) => {
+  const filterVar = useCallback((payload: Var) => {
+    return payload.type !== VarType.file && payload.type !== VarType.arrayFile
+  }, [])
+  const {
+    availableVars,
+    availableNodes,
+  } = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar,
+  })
+  const getVarType = useWorkflowVariableType()
+
+  console.log(availableVars)
+  return (
+    <InstructionEditor
+      value={value}
+      onChange={onChange}
+      generatorType={generatorType}
+      availableVars={availableVars}
+      availableNodes={availableNodes}
+      getVarType={getVarType}
+    />
+  )
+}
+export default React.memo(InstructionEditorInWorkflow)
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index 7865b3f294..3fbdf61110 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -4,32 +4,36 @@ import React from 'react'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import type { GeneratorType } from './types'
 import cn from '@/utils/classnames'
-import { useStore } from '@/app/components/workflow/store'
-import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
+import type { Node, NodeOutPutVar, ValueSelector } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { useWorkflowVariableType } from '@/app/components/workflow/hooks'
 import { useTranslation } from 'react-i18next'
+import { Type } from '@/app/components/workflow/nodes/llm/types'
 
 type Props = {
   value: string
   onChange: (text: string) => void
-  nodesOutputVars?: NodeOutPutVar[]
-  availableNodes?: Node[]
   generatorType: GeneratorType
+  availableVars: NodeOutPutVar[]
+  availableNodes: Node[]
+  getVarType?: (params: {
+    nodeId: string,
+    valueSelector: ValueSelector,
+  }) => Type
 }
 
 const i18nPrefix = 'appDebug.generate'
 
 const InstructionEditor: FC<Props> = ({
   generatorType,
-  nodesOutputVars = [],
-  availableNodes = [],
   value,
   onChange,
+  availableVars,
+  availableNodes,
+  getVarType = () => Type.string,
 }) => {
   const { t } = useTranslation()
-  const controlPromptEditorRerenderKey = useStore(s => s.controlPromptEditorRerenderKey)
-  const getVarType = useWorkflowVariableType()
+  const isBasicMode = !!getVarType
+  // const [controlPromptEditorRerenderKey] =
   const isCode = generatorType === 'code'
   const placeholder = (
     <div className='system-sm-regular  text-text-placeholder'>
@@ -46,14 +50,14 @@ const InstructionEditor: FC<Props> = ({
     <div>
       <PromptEditor
         wrapperClassName='border !border-components-input-bg-normal bg-components-input-bg-normal hover:!border-components-input-bg-hover rounded-[10px] px-4 pt-3'
-        key={controlPromptEditorRerenderKey}
+        // key={controlPromptEditorRerenderKey}
         placeholder={placeholder}
         placeholderClassName='px-4 pt-3'
         className={cn('min-h-[240px] ')}
         value={value}
         workflowVariableBlock={{
           show: true,
-          variables: nodesOutputVars,
+          variables: availableVars,
           getVarType,
           workflowNodesMap: availableNodes.reduce((acc, node) => {
             acc[node.id] = {
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index c0db0d7213..544c74a356 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import cn from 'classnames'
 import useBoolean from 'ahooks/lib/useBoolean'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +10,6 @@ import type { CodeGenRes } from '@/service/debug'
 import type { ModelModeType } from '@/types/app'
 import type { AppType, CompletionParams, Model } from '@/types/app'
 import Modal from '@/app/components/base/modal'
-import Textarea from '@/app/components/base/textarea'
 import Button from '@/app/components/base/button'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Toast from '@/app/components/base/toast'
@@ -21,8 +20,14 @@ import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/com
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import IdeaOutput from '../automatic/idea-output'
+import { GeneratorType } from '../automatic/types'
+import InstructionEditor from '../automatic/instruction-editor-in-workflow'
 
+const i18nPrefix = 'appDebug.generate'
 export type IGetCodeGeneratorResProps = {
+  // flowId: string
+  nodeId: string
   mode: AppType
   isShow: boolean
   codeLanguages: CodeLanguage
@@ -32,6 +37,7 @@ export type IGetCodeGeneratorResProps = {
 
 export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
   {
+    nodeId,
     mode,
     isShow,
     codeLanguages,
@@ -61,9 +67,12 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
   const {
     defaultModel,
   } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textGeneration)
-  const [instruction, setInstruction] = React.useState<string>('')
+  const [instruction, setInstruction] = useState<string>('')
+  const [ideaOutput, setIdeaOutput] = useState<string>('Write comment in Janpanese')
+
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false)
-  const [res, setRes] = React.useState<CodeGenRes | null>(null)
+  const [res, setRes] = useState<CodeGenRes | null>(null)
+
   const isValid = () => {
     if (instruction.trim() === '') {
       Toast.notify({
@@ -195,23 +204,34 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           <div>
             <div className='text-[0px]'>
               <div className='mb-2 text-sm font-medium leading-5 text-text-primary'>{t('appDebug.codegen.instruction')}</div>
-              <Textarea
+              {/* <Textarea
                 className="h-[200px] resize-none"
                 placeholder={t('appDebug.codegen.instructionPlaceholder') || ''}
                 value={instruction}
                 onChange={e => setInstruction(e.target.value)}
+              /> */}
+              <InstructionEditor
+                value={instruction}
+                onChange={setInstruction}
+                nodeId={nodeId}
+                generatorType={GeneratorType.code}
               />
             </div>
+            <IdeaOutput
+              value={ideaOutput}
+              onChange={setIdeaOutput}
+            />
 
-            <div className='mt-5 flex justify-end'>
+            <div className='mt-7 flex justify-end space-x-2'>
+              <Button onClick={onClose}>{t(`${i18nPrefix}.dismiss`)}</Button>
               <Button
                 className='flex space-x-1'
                 variant='primary'
                 onClick={onGenerate}
                 disabled={isLoading}
               >
-                <Generator className='h-4 w-4 text-white' />
-                <span className='text-xs font-semibold text-white'>{t('appDebug.codegen.generate')}</span>
+                <Generator className='h-4 w-4 ' />
+                <span className='text-xs font-semibold '>{t('appDebug.codegen.generate')}</span>
               </Button>
             </div>
           </div>
diff --git a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
index 42671e6917..ac2fcadd6b 100644
--- a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
@@ -11,12 +11,14 @@ import type { CodeGenRes } from '@/service/debug'
 import { GetCodeGeneratorResModal } from '@/app/components/app/configuration/config/code-generator/get-code-generator-res'
 
 type Props = {
+  nodeId: string
   className?: string
   onGenerated?: (prompt: string) => void
   codeLanguages: CodeLanguage
 }
 
 const CodeGenerateBtn: FC<Props> = ({
+  nodeId,
   className,
   codeLanguages,
   onGenerated,
@@ -40,6 +42,7 @@ const CodeGenerateBtn: FC<Props> = ({
           codeLanguages={codeLanguages}
           onClose={showAutomaticFalse}
           onFinished={handleAutomaticRes}
+          nodeId={nodeId}
         />
       )}
     </div>
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index 284c6c77eb..bdb5249812 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -16,8 +16,10 @@ import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-tog
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import FileListInLog from '@/app/components/base/file-uploader/file-list-in-log'
 import ActionButton from '@/app/components/base/action-button'
+import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
 
 type Props = {
+  nodeId?: string
   className?: string
   title: React.JSX.Element | string
   headerRight?: React.JSX.Element
@@ -35,9 +37,12 @@ type Props = {
   showFileList?: boolean
   showCodeGenerator?: boolean
   tip?: React.JSX.Element
+  nodesOutputVars?: NodeOutPutVar[]
+  availableNodes?: Node[]
 }
 
 const Base: FC<Props> = ({
+  nodeId,
   className,
   title,
   headerRight,
@@ -86,7 +91,11 @@ const Base: FC<Props> = ({
             {headerRight}
             {showCodeGenerator && codeLanguages && (
               <div className='ml-1'>
-                <CodeGeneratorButton onGenerated={onGenerated} codeLanguages={codeLanguages} />
+                <CodeGeneratorButton
+                  onGenerated={onGenerated}
+                  codeLanguages={codeLanguages}
+                  nodeId={nodeId!}
+                />
               </div>
             )}
             <ActionButton className='ml-1' onClick={handleCopy}>
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index 748698747c..36e47a6bfe 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -20,6 +20,7 @@ loader.config({ paths: { vs: `${basePath}/vs` } })
 const CODE_EDITOR_LINE_HEIGHT = 18
 
 export type Props = {
+  nodeId?: string
   value?: string | object
   placeholder?: React.JSX.Element | string
   onChange?: (value: string) => void
@@ -47,6 +48,7 @@ export const languageMap = {
 }
 
 const CodeEditor: FC<Props> = ({
+  nodeId,
   value = '',
   placeholder = '',
   onChange = noop,
@@ -175,6 +177,7 @@ const CodeEditor: FC<Props> = ({
         </div>
         : (
           <Base
+            nodeId={nodeId}
             className='relative'
             title={title}
             value={outPutValue}
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index debcafd437..5a3ce0b196 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -166,8 +166,6 @@ const Editor: FC<Props> = ({
                   className='ml-[5px]'
                   onGenerated={onGenerated}
                   modelConfig={modelConfig}
-                  nodesOutputVars={nodesOutputVars}
-                  availableNodes={availableNodes}
                   currentPrompt={value}
                 />
               )}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index cc7add569e..6fe43c0009 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -356,7 +356,7 @@ const VarReferenceVars: FC<Props> = ({
       {
         !hideSearch && (
           <>
-            <div className={cn('var-search-input-wrapper mx-2 mb-1 mt-2', searchBoxClassName)} onClick={e => e.stopPropagation()}>
+            <div className={cn('var-search-input-wrapper mx-2 mb-2 mt-2', searchBoxClassName)} onClick={e => e.stopPropagation()}>
               <Input
                 className='var-search-input'
                 showLeftIcon
@@ -406,7 +406,7 @@ const VarReferenceVars: FC<Props> = ({
                     zIndex={zIndex}
                   />
                 ))}
-                {item.isFlat && !filteredVars[i + 1]?.isFlat && (
+                {item.isFlat && !filteredVars[i + 1]?.isFlat && !!filteredVars.find(item => !item.isFlat) && (
                   <div className='relative mt-[14px] flex  items-center space-x-1'>
                     <div className='h-0 w-3 shrink-0 border border-divider-subtle'></div>
                     <div className='system-2xs-semibold-uppercase text-text-tertiary'>{t('workflow.debug.lastOutput')}</div>
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts b/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts
index e90f079761..b303116284 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts
@@ -1,18 +1,19 @@
 import { useEffect, useState } from 'react'
 
 type Params = {
-  ref: React.RefObject<HTMLDivElement>
+  ref?: React.RefObject<HTMLDivElement | null>
   hasFooter?: boolean
   isInNode?: boolean
 }
 
 const useToggleExpend = ({ ref, hasFooter = true, isInNode }: Params) => {
   const [isExpand, setIsExpand] = useState(false)
-  const [wrapHeight, setWrapHeight] = useState(ref.current?.clientHeight)
+  const [wrapHeight, setWrapHeight] = useState(ref?.current?.clientHeight)
   const editorExpandHeight = isExpand ? wrapHeight! - (hasFooter ? 56 : 29) : 0
   useEffect(() => {
+    if (!ref?.current) return
     setWrapHeight(ref.current?.clientHeight)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isExpand])
 
   const wrapClassName = (() => {
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index f928c13bd6..afbf293911 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -89,6 +89,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
         </Field>
         <Split />
         <CodeEditor
+          nodeId={id}
           isInNode
           readOnly={readOnly}
           title={
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index 9d30e48e5e..d72067dd2c 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -8,8 +8,7 @@ import { ActionButton } from '@/app/components/base/action-button'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
 import { AppType } from '@/types/app'
 import type { GenRes } from '@/service/debug'
-import type { ModelConfig, Node, NodeOutPutVar } from '@/app/components/workflow/types'
-import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
+import type { ModelConfig } from '@/app/components/workflow/types'
 import { useHooksStore } from '../../../hooks-store'
 
 type Props = {
@@ -17,8 +16,6 @@ type Props = {
   onGenerated?: (prompt: string) => void
   modelConfig?: ModelConfig
   nodeId: string
-  nodesOutputVars?: NodeOutPutVar[]
-  availableNodes?: Node[]
   currentPrompt?: string
 }
 
@@ -26,8 +23,6 @@ const PromptGeneratorBtn: FC<Props> = ({
   className,
   onGenerated,
   nodeId,
-  nodesOutputVars,
-  availableNodes,
   currentPrompt,
 }) => {
   const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
@@ -49,9 +44,6 @@ const PromptGeneratorBtn: FC<Props> = ({
           isShow={showAutomatic}
           onClose={showAutomaticFalse}
           onFinished={handleAutomaticRes}
-          generatorType={GeneratorType.prompt}
-          nodesOutputVars={nodesOutputVars}
-          availableNodes={availableNodes}
           flowId={configsMap?.flowId || ''}
           nodeId={nodeId}
           currentPrompt={currentPrompt}

From f60792bcc750b8174ce56b97f16b1db717444873 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 15:01:29 +0800
Subject: [PATCH 19/36] feat: can generate code

---
 .../config/automatic/get-automatic-res.tsx    |   8 +-
 .../instruction-editor-in-workflow.tsx        |   1 -
 .../config/automatic/prompt-toast.tsx         |  16 ++-
 .../configuration/config/automatic/result.tsx |   4 +-
 .../code-generator/get-code-generator-res.tsx | 130 ++++++++----------
 .../components/base/prompt-editor/index.tsx   |   4 +-
 .../components/code-generator-button.tsx      |  13 +-
 .../nodes/_base/components/editor/base.tsx    |   1 +
 8 files changed, 88 insertions(+), 89 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index e14939b935..fbad952e79 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -229,17 +229,19 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     setLoadingTrue()
     try {
       let apiRes: GenRes
+      let hasError = false
       if (isBasicMode && !currentPrompt) {
         const { error, ...res } = await generateBasicAppFistTimeRule({
           instruction,
           model_config: model,
-          no_varieable: false,
+          no_variable: false,
         })
         apiRes = {
           ...res,
           modified: res.prompt,
         } as GenRes
         if (error) {
+          hasError = true
           Toast.notify({
             type: 'error',
             message: error,
@@ -257,13 +259,15 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         })
         apiRes = res
         if (error) {
+          hasError = true
           Toast.notify({
             type: 'error',
             message: error,
           })
         }
       }
-      addVersion(apiRes)
+      if (!hasError)
+        addVersion(apiRes)
     }
     finally {
       setLoadingFalse()
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
index 288843172f..95933ce794 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
@@ -33,7 +33,6 @@ const InstructionEditorInWorkflow: FC<Props> = ({
   })
   const getVarType = useWorkflowVariableType()
 
-  console.log(availableVars)
   return (
     <InstructionEditor
       value={value}
diff --git a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
index c94d62d2fb..3eaa483c9b 100644
--- a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
+++ b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
@@ -3,27 +3,29 @@ import { useBoolean } from 'ahooks'
 import React from 'react'
 import cn from '@/utils/classnames'
 type Props = {
+  message: string
   className?: string
 }
 const PromptToast = ({
+  message,
   className,
 }: Props) => {
   const [isHide, {
     setTrue: hide,
   }] = useBoolean(false)
-  if(isHide)
+  if (isHide)
     return
   return (
-    <div className={cn('relative flex h-10 items-center p-2 ', className)}>
+    <div className={cn('relative flex items-center p-2 ', className)}>
       {/* Background Effect */}
       <div className="pointer-events-none absolute inset-0 rounded-lg bg-[linear-gradient(92deg,rgba(11,165,236,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40 shadow-md"></div>
-      <div className='relative flex h-full w-full items-center justify-between'>
-        <div className="flex h-full items-center gap-1">
-          <RiInformation2Fill className="size-4 text-text-accent" />
-          <p className="text-sm text-gray-700">This is the modified prompt with added context.</p>
+      <div className='relative flex h-full w-full  justify-between'>
+        <div className="flex h-full w-0 grow gap-1">
+          <RiInformation2Fill className="mt-[3px] size-4 shrink-0 text-text-accent" />
+          <p className="w-0 grow text-sm text-gray-700">{message}</p>
         </div>
 
-        <div className='cursor-pointer p-0.5' onClick={hide}>
+        <div className='relative  top-[-1px] shrink-0 cursor-pointer p-0.5' onClick={hide}>
           <RiCloseLine className='size-5 text-text-tertiary' />
         </div>
       </div>
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index c7504d3ea0..b99988bffb 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -55,8 +55,8 @@ const Result: FC<Props> = ({
         </div>
       </div>
       {
-        isGeneratorPrompt && (
-          <PromptToast className='mt-4' />
+        current?.message && (
+          <PromptToast message={current.message} className='mt-4' />
         )
       }
       <div className='mt-3'>{current?.modified}</div>
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 544c74a356..0bf2f54b28 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -1,12 +1,10 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
-import cn from 'classnames'
 import useBoolean from 'ahooks/lib/useBoolean'
 import { useTranslation } from 'react-i18next'
-import ConfigPrompt from '../../config-prompt'
 import { languageMap } from '../../../../workflow/nodes/_base/components/editor/code-editor/index'
-import { generateRuleCode } from '@/service/debug'
-import type { CodeGenRes } from '@/service/debug'
+import { generateRule } from '@/service/debug'
+import type { GenRes } from '@/service/debug'
 import type { ModelModeType } from '@/types/app'
 import type { AppType, CompletionParams, Model } from '@/types/app'
 import Modal from '@/app/components/base/modal'
@@ -23,21 +21,26 @@ import type { FormValue } from '@/app/components/header/account-setting/model-pr
 import IdeaOutput from '../automatic/idea-output'
 import { GeneratorType } from '../automatic/types'
 import InstructionEditor from '../automatic/instruction-editor-in-workflow'
+import useGenData from '../automatic/use-gen-data'
+import Result from '../automatic/result'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetCodeGeneratorResProps = {
-  // flowId: string
+  flowId: string
   nodeId: string
+  currentCode?: string
   mode: AppType
   isShow: boolean
   codeLanguages: CodeLanguage
   onClose: () => void
-  onFinished: (res: CodeGenRes) => void
+  onFinished: (res: GenRes) => void
 }
 
 export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
   {
+    flowId,
     nodeId,
+    currentCode,
     mode,
     isShow,
     codeLanguages,
@@ -71,7 +74,19 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
   const [ideaOutput, setIdeaOutput] = useState<string>('Write comment in Janpanese')
 
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false)
-  const [res, setRes] = useState<CodeGenRes | null>(null)
+  const storageKey = `${flowId}-${nodeId}}`
+  const { addVersion, current, currentVersionIndex, setCurrentVersionIndex, versions } = useGenData({
+    storageKey,
+  })
+
+  // useEffect(() => {
+  //   if (!versions?.length) {
+  //     addVersion({
+  //       modified: `def main(num1: float, num2: float) -> dict:
+  //   return {'result': num1 + num2}`,
+  //     })
+  //   }
+  // }, [])
 
   const isValid = () => {
     if (instruction.trim() === '') {
@@ -106,7 +121,6 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
     localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
   }, [model, setModel])
 
-  const isInLLMNode = true
   const onGenerate = async () => {
     if (!isValid())
       return
@@ -114,25 +128,35 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
       return
     setLoadingTrue()
     try {
-      const { error, ...res } = await generateRuleCode({
+      const { error, ...res } = await generateRule({
+        flow_id: flowId,
+        node_id: nodeId,
+        current: currentCode,
         instruction,
         model_config: model,
-        no_variable: !!isInLLMNode,
-        code_language: languageMap[codeLanguages] || 'javascript',
+        idea_output: ideaOutput,
+        language: languageMap[codeLanguages] || 'javascript',
       })
-      setRes(res)
+
       if (error) {
         Toast.notify({
           type: 'error',
           message: error,
         })
       }
+ else {
+        addVersion(res)
+      }
     }
     finally {
       setLoadingFalse()
     }
   }
-  const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false)
+
+  const [isShowConfirmOverwrite, {
+    setTrue: showConfirmOverwrite,
+    setFalse: hideShowConfirmOverwrite,
+  }] = useBoolean(false)
 
   useEffect(() => {
     if (defaultModel) {
@@ -179,11 +203,10 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
       isShow={isShow}
       onClose={onClose}
       className='min-w-[1140px] !p-0'
-      closable
     >
       <div className='relative flex h-[680px] flex-wrap'>
-        <div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-8'>
-          <div className='mb-8'>
+        <div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6'>
+          <div className='mb-4'>
             <div className={'text-lg font-bold leading-[28px] text-text-primary'}>{t('appDebug.codegen.title')}</div>
             <div className='mt-1 text-[13px] font-normal text-text-tertiary'>{t('appDebug.codegen.description')}</div>
           </div>
@@ -203,13 +226,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
           <div>
             <div className='text-[0px]'>
-              <div className='mb-2 text-sm font-medium leading-5 text-text-primary'>{t('appDebug.codegen.instruction')}</div>
-              {/* <Textarea
-                className="h-[200px] resize-none"
-                placeholder={t('appDebug.codegen.instructionPlaceholder') || ''}
-                value={instruction}
-                onChange={e => setInstruction(e.target.value)}
-              /> */}
+              <div className='system-sm-semibold-uppercase mb-1.5 text-text-secondary'>{t('appDebug.codegen.instruction')}</div>
               <InstructionEditor
                 value={instruction}
                 onChange={setInstruction}
@@ -237,61 +254,30 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
         </div>
         {isLoading && renderLoading}
-        {!isLoading && !res && renderNoData}
-        {(!isLoading && res) && (
-          <div className='h-full w-0 grow p-6 pb-0'>
-            <div className='mb-3 shrink-0 text-base font-semibold leading-[160%] text-text-secondary'>{t('appDebug.codegen.resTitle')}</div>
-            <div className={cn('max-h-[555px] overflow-y-auto', !isInLLMNode && 'pb-2')}>
-              <ConfigPrompt
-                mode={mode}
-                promptTemplate={res?.code || ''}
-                promptVariables={[]}
-                readonly
-                noTitle={isInLLMNode}
-                gradientBorder
-                editorHeight={isInLLMNode ? 524 : 0}
-                noResize={isInLLMNode}
-              />
-              {!isInLLMNode && (
-                <>
-                  {res?.code && (
-                    <div className='mt-4'>
-                      <h3 className='mb-2 text-sm font-medium text-text-primary'>{t('appDebug.codegen.generatedCode')}</h3>
-                      <pre className='overflow-x-auto rounded-lg bg-gray-50 p-4'>
-                        <code className={`language-${res.language}`}>
-                          {res.code}
-                        </code>
-                      </pre>
-                    </div>
-                  )}
-                  {res?.error && (
-                    <div className='mt-4 rounded-lg bg-red-50 p-4'>
-                      <p className='text-sm text-red-600'>{res.error}</p>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-
-            <div className='flex justify-end bg-background-default py-4'>
-              <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
-              <Button variant='primary' className='ml-2' onClick={() => {
-                setShowConfirmOverwrite(true)
-              }}>{t('appDebug.codegen.apply')}</Button>
-            </div>
-          </div>
-        )}
+        {!isLoading && !current && renderNoData}
+        {/* {(!isLoading && res) && ( */}
+        <div className='h-full w-0 grow p-6 pb-0'>
+          <Result
+            current={current!}
+            currentVersionIndex={currentVersionIndex || 0}
+            setCurrentVersionIndex={setCurrentVersionIndex}
+            versions={versions || []}
+            onApply={showConfirmOverwrite}
+            generatorType={GeneratorType.prompt}
+          />
+        </div>
+        {/* )} */}
       </div>
-      {showConfirmOverwrite && (
+      {isShowConfirmOverwrite && (
         <Confirm
           title={t('appDebug.codegen.overwriteConfirmTitle')}
           content={t('appDebug.codegen.overwriteConfirmMessage')}
-          isShow={showConfirmOverwrite}
+          isShow
           onConfirm={() => {
-            setShowConfirmOverwrite(false)
-            onFinished(res!)
+            hideShowConfirmOverwrite()
+            onFinished(current!)
           }}
-          onCancel={() => setShowConfirmOverwrite(false)}
+          onCancel={hideShowConfirmOverwrite}
         />
       )}
     </Modal>
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index f8e43941f2..7f67abb597 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { FC } from 'react'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 import type {
   EditorState,
 } from 'lexical'
@@ -85,7 +85,7 @@ export type PromptEditorProps = {
   compact?: boolean
   wrapperClassName?: string
   className?: string
-  placeholder?: string | JSX.Element
+  placeholder?: string | React.JSX.Element
   placeholderClassName?: string
   style?: React.CSSProperties
   value?: string
diff --git a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
index ac2fcadd6b..a62ffeb55f 100644
--- a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
@@ -7,11 +7,13 @@ import type { CodeLanguage } from '../../code/types'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { ActionButton } from '@/app/components/base/action-button'
 import { AppType } from '@/types/app'
-import type { CodeGenRes } from '@/service/debug'
+import type { GenRes } from '@/service/debug'
 import { GetCodeGeneratorResModal } from '@/app/components/app/configuration/config/code-generator/get-code-generator-res'
+import { useHooksStore } from '../../../hooks-store'
 
 type Props = {
   nodeId: string
+  currentCode?: string
   className?: string
   onGenerated?: (prompt: string) => void
   codeLanguages: CodeLanguage
@@ -19,15 +21,18 @@ type Props = {
 
 const CodeGenerateBtn: FC<Props> = ({
   nodeId,
+  currentCode,
   className,
   codeLanguages,
   onGenerated,
 }) => {
   const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
-  const handleAutomaticRes = useCallback((res: CodeGenRes) => {
-    onGenerated?.(res.code)
+  const handleAutomaticRes = useCallback((res: GenRes) => {
+    onGenerated?.(res.modified)
     showAutomaticFalse()
   }, [onGenerated, showAutomaticFalse])
+  const configsMap = useHooksStore(s => s.configsMap)
+
   return (
     <div className={cn(className)}>
       <ActionButton
@@ -42,7 +47,9 @@ const CodeGenerateBtn: FC<Props> = ({
           codeLanguages={codeLanguages}
           onClose={showAutomaticFalse}
           onFinished={handleAutomaticRes}
+          flowId={configsMap?.flowId || ''}
           nodeId={nodeId}
+          currentCode={currentCode}
         />
       )}
     </div>
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index bdb5249812..56b2af57ec 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -94,6 +94,7 @@ const Base: FC<Props> = ({
                 <CodeGeneratorButton
                   onGenerated={onGenerated}
                   codeLanguages={codeLanguages}
+                  currentCode={value}
                   nodeId={nodeId!}
                 />
               </div>

From df95b6eba0569ec6d909f90aa6c8a65f26c77f9c Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 15:12:26 +0800
Subject: [PATCH 20/36] chore: remove debug code

---
 .../config/automatic/get-automatic-res.tsx    | 19 +++------
 .../code-generator/get-code-generator-res.tsx | 39 +++++++------------
 2 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index fbad952e79..7c11510399 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -131,8 +131,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     },
   ]
 
-  const [instruction, setInstruction] = useState<string>('The travel plan to Anshun of Guizhou Province in China') // TODO: test value
-  const [ideaOutput, setIdeaOutput] = useState<string>('use json format to output the result. Content in result uses Chinese. Format: {"summary: "summary content", "result": "result content"}')
+  const [instruction, setInstruction] = useState<string>('')
+  const [ideaOutput, setIdeaOutput] = useState<string>('')
 
   const handleChooseTemplate = useCallback((key: string) => {
     return () => {
@@ -158,14 +158,6 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     storageKey,
   })
 
-  // useEffect(() => {
-  //   // if (!versions.length) {
-  //   addVersion({
-  //     modified: 'ddd',
-  //   })
-  //   // }
-  // }, [])
-
   useEffect(() => {
     if (defaultModel) {
       const localModel = localStorage.getItem('auto-gen-model')
@@ -364,15 +356,14 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                 onClick={onGenerate}
                 disabled={isLoading}
               >
-                <Generator className='h-4 w-4 text-white' />
+                <Generator className='h-4 w-4' />
                 <span className='text-xs font-semibold'>{t('appDebug.generate.generate')}</span>
               </Button>
             </div>
           </div>
         </div>
 
-        {/* {(!isLoading && res) && ( */}
-        {
+        {(!isLoading && current) && (
           <div className='h-full w-0 grow p-6 pb-0'>
             <Result
               current={current!}
@@ -383,7 +374,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
               generatorType={GeneratorType.prompt}
             />
           </div>
-        }
+        )}
         {isLoading && renderLoading}
         {isShowAutoPromptResPlaceholder() && !renderNoData}
         {isShowConfirmOverwrite && (
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 0bf2f54b28..066fb774c9 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -71,7 +71,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
     defaultModel,
   } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textGeneration)
   const [instruction, setInstruction] = useState<string>('')
-  const [ideaOutput, setIdeaOutput] = useState<string>('Write comment in Janpanese')
+  const [ideaOutput, setIdeaOutput] = useState<string>('')
 
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false)
   const storageKey = `${flowId}-${nodeId}}`
@@ -79,15 +79,6 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
     storageKey,
   })
 
-  // useEffect(() => {
-  //   if (!versions?.length) {
-  //     addVersion({
-  //       modified: `def main(num1: float, num2: float) -> dict:
-  //   return {'result': num1 + num2}`,
-  //     })
-  //   }
-  // }, [])
-
   const isValid = () => {
     if (instruction.trim() === '') {
       Toast.notify({
@@ -144,7 +135,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           message: error,
         })
       }
- else {
+      else {
         addVersion(res)
       }
     }
@@ -247,7 +238,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                 onClick={onGenerate}
                 disabled={isLoading}
               >
-                <Generator className='h-4 w-4 ' />
+                <Generator className='h-4 w-4' />
                 <span className='text-xs font-semibold '>{t('appDebug.codegen.generate')}</span>
               </Button>
             </div>
@@ -255,18 +246,18 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
         </div>
         {isLoading && renderLoading}
         {!isLoading && !current && renderNoData}
-        {/* {(!isLoading && res) && ( */}
-        <div className='h-full w-0 grow p-6 pb-0'>
-          <Result
-            current={current!}
-            currentVersionIndex={currentVersionIndex || 0}
-            setCurrentVersionIndex={setCurrentVersionIndex}
-            versions={versions || []}
-            onApply={showConfirmOverwrite}
-            generatorType={GeneratorType.prompt}
-          />
-        </div>
-        {/* )} */}
+        {(!isLoading && current) && (
+          <div className='h-full w-0 grow p-6 pb-0'>
+            <Result
+              current={current!}
+              currentVersionIndex={currentVersionIndex || 0}
+              setCurrentVersionIndex={setCurrentVersionIndex}
+              versions={versions || []}
+              onApply={showConfirmOverwrite}
+              generatorType={GeneratorType.prompt}
+            />
+          </div>
+        )}
       </div>
       {isShowConfirmOverwrite && (
         <Confirm

From 219c96aee1fd5579cb0f5893a8bf48bc630019fb Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 15:42:50 +0800
Subject: [PATCH 21/36] feat: code gen result highlight

---
 .../config/automatic/get-automatic-res.tsx    |  2 +-
 .../configuration/config/automatic/result.tsx | 23 +++++++++++++++----
 .../code-generator/get-code-generator-res.tsx |  4 ++--
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 7c11510399..f75cc42433 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -364,7 +364,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         </div>
 
         {(!isLoading && current) && (
-          <div className='h-full w-0 grow p-6 pb-0'>
+          <div className='h-full w-0 grow bg-background-default-subtle p-6 pb-0'>
             <Result
               current={current!}
               currentVersionIndex={currentVersionIndex || 0}
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index b99988bffb..db2c2f8e1e 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -10,6 +10,7 @@ import type { GenRes } from '@/service/debug'
 import { RiClipboardLine } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import Toast from '@/app/components/base/toast'
+import CodeEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor'
 
 type Props = {
   current: GenRes
@@ -32,8 +33,8 @@ const Result: FC<Props> = ({
   const isGeneratorPrompt = generatorType === GeneratorType.prompt
 
   return (
-    <div>
-      <div className='mb-3  flex items-center justify-between'>
+    <div className='flex h-full flex-col'>
+      <div className='mb-3 flex  shrink-0 items-center justify-between'>
         <div>
           <div className='shrink-0 text-base font-semibold leading-[160%] text-text-secondary'>{t('appDebug.generate.resTitle')}</div>
           <VersionSelector
@@ -56,10 +57,24 @@ const Result: FC<Props> = ({
       </div>
       {
         current?.message && (
-          <PromptToast message={current.message} className='mt-4' />
+          <PromptToast message={current.message} className='mt-4 shrink-0' />
         )
       }
-      <div className='mt-3'>{current?.modified}</div>
+      <div className='mt-3 grow'>
+        {isGeneratorPrompt ? (
+          <div>
+            {current?.modified}
+          </div>
+        ) : (
+          <CodeEditor
+            editorWrapperClassName='h-full'
+            className='bg-transparent pt-0'
+            value={current?.modified}
+            readOnly
+            hideTopMenu
+          />
+        )}
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 066fb774c9..f4e5801634 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -247,14 +247,14 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
         {isLoading && renderLoading}
         {!isLoading && !current && renderNoData}
         {(!isLoading && current) && (
-          <div className='h-full w-0 grow p-6 pb-0'>
+          <div className='h-full w-0 grow bg-background-default-subtle p-6 pb-0'>
             <Result
               current={current!}
               currentVersionIndex={currentVersionIndex || 0}
               setCurrentVersionIndex={setCurrentVersionIndex}
               versions={versions || []}
               onApply={showConfirmOverwrite}
-              generatorType={GeneratorType.prompt}
+              generatorType={GeneratorType.code}
             />
           </div>
         )}

From 98c70ff86d19745a3f47610654d62bfea98a6d8a Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 16:11:22 +0800
Subject: [PATCH 22/36] chore: no data placeholder

---
 .../config/automatic/get-automatic-res.tsx    | 14 ++-----------
 .../config/automatic/res-placeholder.tsx      | 20 +++++++++++++++++++
 .../code-generator/get-code-generator-res.tsx | 12 ++---------
 3 files changed, 24 insertions(+), 22 deletions(-)
 create mode 100644 web/app/components/app/configuration/config/automatic/res-placeholder.tsx

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index f75cc42433..606e1da703 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -36,10 +36,10 @@ import type { FormValue } from '@/app/components/header/account-setting/model-pr
 import InstructionEditorInWorkflow from './instruction-editor-in-workflow'
 import InstructionEditorInBasic from './instruction-editor'
 import { GeneratorType } from './types'
-import Link from 'next/link'
 import Result from './result'
 import useGenData from './use-gen-data'
 import IdeaOutput from './idea-output'
+import ResPlaceholder from './res-placeholder'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetAutomaticResProps = {
@@ -183,16 +183,6 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     </div>
   )
 
-  const renderNoData = (
-    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
-      <Generator className='size-8 text-text-quaternary' />
-      <div className='text-center text-[13px] font-normal leading-5 text-text-tertiary'>
-        <div>{t('appDebug.generate.newNoDataLine1')}</div>
-        <Link className='text-text-accent' href='//todo' target='_blank'>{t('appDebug.generate.newNoDataLine2')}</Link>
-      </div>
-    </div>
-  )
-
   const handleModelChange = useCallback((newValue: { modelId: string; provider: string; mode?: string; features?: string[] }) => {
     const newModel = {
       ...model,
@@ -376,7 +366,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           </div>
         )}
         {isLoading && renderLoading}
-        {isShowAutoPromptResPlaceholder() && !renderNoData}
+        {isShowAutoPromptResPlaceholder() && <ResPlaceholder />}
         {isShowConfirmOverwrite && (
           <Confirm
             title={t('appDebug.generate.overwriteTitle')}
diff --git a/web/app/components/app/configuration/config/automatic/res-placeholder.tsx b/web/app/components/app/configuration/config/automatic/res-placeholder.tsx
new file mode 100644
index 0000000000..a6a03aea7b
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/res-placeholder.tsx
@@ -0,0 +1,20 @@
+'use client'
+import { Generator } from '@/app/components/base/icons/src/vender/other'
+import Link from 'next/link'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const ResPlaceholder: FC = () => {
+  const { t } = useTranslation()
+  return (
+    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
+      <Generator className='size-8 text-text-quaternary' />
+      <div className='text-center text-[13px] font-normal leading-5 text-text-tertiary'>
+        <div>{t('appDebug.generate.newNoDataLine1')}</div>
+        <Link className='text-text-accent' href='//todo' target='_blank'>{t('appDebug.generate.newNoDataLine2')}</Link>
+      </div>
+    </div>
+  )
+}
+export default React.memo(ResPlaceholder)
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index f4e5801634..fb69ca0d11 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -23,6 +23,7 @@ import { GeneratorType } from '../automatic/types'
 import InstructionEditor from '../automatic/instruction-editor-in-workflow'
 import useGenData from '../automatic/use-gen-data'
 import Result from '../automatic/result'
+import ResPlaceholder from '../automatic/res-placeholder'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetCodeGeneratorResProps = {
@@ -179,15 +180,6 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
       <div className='text-[13px] text-text-tertiary'>{t('appDebug.codegen.loading')}</div>
     </div>
   )
-  const renderNoData = (
-    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
-      <Generator className='h-14 w-14 text-text-tertiary' />
-      <div className='text-center text-[13px] font-normal leading-5 text-text-tertiary'>
-        <div>{t('appDebug.codegen.noDataLine1')}</div>
-        <div>{t('appDebug.codegen.noDataLine2')}</div>
-      </div>
-    </div>
-  )
 
   return (
     <Modal
@@ -245,7 +237,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
         </div>
         {isLoading && renderLoading}
-        {!isLoading && !current && renderNoData}
+        {!isLoading && !current && <ResPlaceholder />}
         {(!isLoading && current) && (
           <div className='h-full w-0 grow bg-background-default-subtle p-6 pb-0'>
             <Result

From 525e64467de4db1644eb6d2e4ee87e9f0f457d5e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 16:41:08 +0800
Subject: [PATCH 23/36] feat: prompt res

---
 .../config/automatic/get-automatic-res.tsx    |  2 +
 .../automatic/prompt-res-in-workflow.tsx      | 55 +++++++++++++++++++
 .../config/automatic/prompt-res.tsx           | 25 +++++++++
 .../configuration/config/automatic/result.tsx | 20 ++++++-
 4 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 web/app/components/app/configuration/config/automatic/prompt-res-in-workflow.tsx
 create mode 100644 web/app/components/app/configuration/config/automatic/prompt-res.tsx

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 606e1da703..c18300ecfd 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -357,6 +357,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           <div className='h-full w-0 grow bg-background-default-subtle p-6 pb-0'>
             <Result
               current={current!}
+              isBasicMode={isBasicMode}
+              nodeId={nodeId!}
               currentVersionIndex={currentVersionIndex || 0}
               setCurrentVersionIndex={setCurrentVersionIndex}
               versions={versions || []}
diff --git a/web/app/components/app/configuration/config/automatic/prompt-res-in-workflow.tsx b/web/app/components/app/configuration/config/automatic/prompt-res-in-workflow.tsx
new file mode 100644
index 0000000000..c4915a5e60
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/prompt-res-in-workflow.tsx
@@ -0,0 +1,55 @@
+'use client'
+import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
+import type { FC } from 'react'
+import React from 'react'
+import PromptRes from './prompt-res'
+import { Type } from '@/app/components/workflow/nodes/llm/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  value: string
+  nodeId: string
+}
+
+const PromptResInWorkflow: FC<Props> = ({
+  value,
+  nodeId,
+}) => {
+  const { t } = useTranslation()
+  const {
+    availableVars,
+    availableNodes,
+  } = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: _payload => true,
+  })
+  return (
+    <PromptRes
+      value={value}
+      workflowVariableBlock={{
+        show: true,
+        variables: availableVars || [],
+        getVarType: () => Type.string,
+        workflowNodesMap: availableNodes.reduce((acc, node) => {
+          acc[node.id] = {
+            title: node.data.title,
+            type: node.data.type,
+            width: node.width,
+            height: node.height,
+            position: node.position,
+          }
+          if (node.data.type === BlockEnum.Start) {
+            acc.sys = {
+              title: t('workflow.blocks.start'),
+              type: BlockEnum.Start,
+            }
+          }
+          return acc
+        }, {} as any),
+      }}
+    >
+    </PromptRes>
+  )
+}
+export default React.memo(PromptResInWorkflow)
diff --git a/web/app/components/app/configuration/config/automatic/prompt-res.tsx b/web/app/components/app/configuration/config/automatic/prompt-res.tsx
new file mode 100644
index 0000000000..86728bb2bc
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/prompt-res.tsx
@@ -0,0 +1,25 @@
+'use client'
+import PromptEditor from '@/app/components/base/prompt-editor'
+import type { WorkflowVariableBlockType } from '@/app/components/base/prompt-editor/types'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  value: string
+  workflowVariableBlock: WorkflowVariableBlockType
+}
+
+const PromptRes: FC<Props> = ({
+  value,
+  workflowVariableBlock,
+}) => {
+  return (
+    <PromptEditor
+      value={value}
+      editable={false}
+      className='h-full bg-transparent pt-0'
+      workflowVariableBlock={workflowVariableBlock}
+    />
+  )
+}
+export default React.memo(PromptRes)
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index db2c2f8e1e..de51fc1cc4 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -11,8 +11,12 @@ import { RiClipboardLine } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import Toast from '@/app/components/base/toast'
 import CodeEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor'
+import PromptRes from './prompt-res'
+import PromptResInWorkflow from './prompt-res-in-workflow'
 
 type Props = {
+  isBasicMode?: boolean
+  nodeId?: string
   current: GenRes
   currentVersionIndex: number
   setCurrentVersionIndex: (index: number) => void
@@ -22,6 +26,8 @@ type Props = {
 }
 
 const Result: FC<Props> = ({
+  isBasicMode,
+  nodeId,
   current,
   currentVersionIndex,
   setCurrentVersionIndex,
@@ -62,9 +68,17 @@ const Result: FC<Props> = ({
       }
       <div className='mt-3 grow'>
         {isGeneratorPrompt ? (
-          <div>
-            {current?.modified}
-          </div>
+          isBasicMode ? (
+            <PromptRes
+              value={current?.modified}
+              workflowVariableBlock={{
+                show: false,
+              }}
+            />
+          ) : (<PromptResInWorkflow
+            value={current?.modified || ''}
+            nodeId={nodeId!}
+          />)
         ) : (
           <CodeEditor
             editorWrapperClassName='h-full'

From 4e27d2c35f069bfc68357d8ff37924843a2af2d7 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 16:53:33 +0800
Subject: [PATCH 24/36] fix: can set the template value

---
 .../app/configuration/config/automatic/get-automatic-res.tsx  | 4 ++++
 .../config/automatic/instruction-editor-in-workflow.tsx       | 3 +++
 .../app/configuration/config/automatic/instruction-editor.tsx | 4 +++-
 .../config/code-generator/get-code-generator-res.tsx          | 2 +-
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index c18300ecfd..ee77a6d6eb 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -134,10 +134,12 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   const [instruction, setInstruction] = useState<string>('')
   const [ideaOutput, setIdeaOutput] = useState<string>('')
 
+  const [editorKey, setEditorKey] = useState(`${flowId}-0`)
   const handleChooseTemplate = useCallback((key: string) => {
     return () => {
       const template = t(`appDebug.generate.template.${key}.instruction`)
       setInstruction(template)
+      setEditorKey(`${flowId}-${Date.now()}`)
     }
   }, [t])
   const isValid = () => {
@@ -318,6 +320,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
               <div className='system-sm-semibold-uppercase mb-1.5 text-text-secondary'>{t('appDebug.generate.instruction')}</div>
               {isBasicMode ? (
                 <InstructionEditorInBasic
+                  editorKey={editorKey}
                   generatorType={GeneratorType.prompt}
                   value={instruction}
                   onChange={setInstruction}
@@ -326,6 +329,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                 />
               ) : (
                 <InstructionEditorInWorkflow
+                  editorKey={editorKey}
                   generatorType={GeneratorType.prompt}
                   value={instruction}
                   onChange={setInstruction}
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
index 95933ce794..3a24cb042e 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
@@ -11,6 +11,7 @@ import { useWorkflowVariableType } from '@/app/components/workflow/hooks'
 type Props = {
   nodeId: string
   value: string
+  editorKey: string
   onChange: (text: string) => void
   generatorType: GeneratorType
 }
@@ -18,6 +19,7 @@ type Props = {
 const InstructionEditorInWorkflow: FC<Props> = ({
   nodeId,
   value,
+  editorKey,
   onChange,
   generatorType,
 }) => {
@@ -37,6 +39,7 @@ const InstructionEditorInWorkflow: FC<Props> = ({
     <InstructionEditor
       value={value}
       onChange={onChange}
+      editorKey={editorKey}
       generatorType={generatorType}
       availableVars={availableVars}
       availableNodes={availableNodes}
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index 3fbdf61110..2750cc7bfc 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next'
 import { Type } from '@/app/components/workflow/nodes/llm/types'
 
 type Props = {
+  editorKey: string
   value: string
   onChange: (text: string) => void
   generatorType: GeneratorType
@@ -24,6 +25,7 @@ type Props = {
 const i18nPrefix = 'appDebug.generate'
 
 const InstructionEditor: FC<Props> = ({
+  editorKey,
   generatorType,
   value,
   onChange,
@@ -50,7 +52,7 @@ const InstructionEditor: FC<Props> = ({
     <div>
       <PromptEditor
         wrapperClassName='border !border-components-input-bg-normal bg-components-input-bg-normal hover:!border-components-input-bg-hover rounded-[10px] px-4 pt-3'
-        // key={controlPromptEditorRerenderKey}
+        key={editorKey}
         placeholder={placeholder}
         placeholderClassName='px-4 pt-3'
         className={cn('min-h-[240px] ')}
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index fb69ca0d11..c4d0b58862 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -75,7 +75,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
   const [ideaOutput, setIdeaOutput] = useState<string>('')
 
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false)
-  const storageKey = `${flowId}-${nodeId}}`
+  const storageKey = `${flowId}-${nodeId}`
   const { addVersion, current, currentVersionIndex, setCurrentVersionIndex, versions } = useGenData({
     storageKey,
   })

From f438af1aa12e37030238e1f4b0a03c2e27df554f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 18:05:29 +0800
Subject: [PATCH 25/36] fix: cannot choose no value vaiable

---
 .../automatic/instruction-editor-in-workflow.tsx    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
index 3a24cb042e..4927af3673 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
@@ -2,11 +2,12 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import type { GeneratorType } from './types'
-import type { Var } from '@/app/components/workflow/types'
+import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import InstructionEditor from './instruction-editor'
 import { useWorkflowVariableType } from '@/app/components/workflow/hooks'
+import { useWorkflowStore } from '@/app/components/workflow/store'
 
 type Props = {
   nodeId: string
@@ -23,9 +24,13 @@ const InstructionEditorInWorkflow: FC<Props> = ({
   onChange,
   generatorType,
 }) => {
-  const filterVar = useCallback((payload: Var) => {
-    return payload.type !== VarType.file && payload.type !== VarType.arrayFile
-  }, [])
+  const workflowStore = useWorkflowStore()
+
+  const filterVar = useCallback((payload: Var, selector: ValueSelector) => {
+    const { nodesWithInspectVars } = workflowStore.getState()
+    const nodeId = selector?.[0]
+    return !!nodesWithInspectVars.find(node => node.nodeId === nodeId) && payload.type !== VarType.file && payload.type !== VarType.arrayFile
+  }, [workflowStore])
   const {
     availableVars,
     availableNodes,

From 534ece0ad0c329a4bc9eaf2e2ced1e92cebc3a77 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 18:23:58 +0800
Subject: [PATCH 26/36] chore: gen template

---
 .../config/automatic/get-automatic-res.tsx        | 10 ++++++++++
 .../code-generator/get-code-generator-res.tsx     | 10 ++++++++++
 web/service/debug.ts                              |  5 -----
 web/service/use-apps.ts                           | 15 ++++++++++++++-
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index ee77a6d6eb..8f3ff83eca 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -40,6 +40,7 @@ import Result from './result'
 import useGenData from './use-gen-data'
 import IdeaOutput from './idea-output'
 import ResPlaceholder from './res-placeholder'
+import { useGenerateRuleTemplate } from '@/service/use-apps'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetAutomaticResProps = {
@@ -142,6 +143,15 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
       setEditorKey(`${flowId}-${Date.now()}`)
     }
   }, [t])
+
+  const { data: instructionTemplate } = useGenerateRuleTemplate(GeneratorType.prompt)
+  useEffect(() => {
+    if (!instruction && instructionTemplate) {
+      setInstruction(instructionTemplate.data)
+      setEditorKey(`${flowId}-${Date.now()}`)
+    }
+  }, [instructionTemplate])
+
   const isValid = () => {
     if (instruction.trim() === '') {
       Toast.notify({
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index c4d0b58862..049ac7601a 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -24,6 +24,7 @@ import InstructionEditor from '../automatic/instruction-editor-in-workflow'
 import useGenData from '../automatic/use-gen-data'
 import Result from '../automatic/result'
 import ResPlaceholder from '../automatic/res-placeholder'
+import { useGenerateRuleTemplate } from '@/service/use-apps'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetCodeGeneratorResProps = {
@@ -79,6 +80,14 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
   const { addVersion, current, currentVersionIndex, setCurrentVersionIndex, versions } = useGenData({
     storageKey,
   })
+  const [editorKey, setEditorKey] = useState(`${flowId}-0`)
+  const { data: instructionTemplate } = useGenerateRuleTemplate(GeneratorType.code)
+  useEffect(() => {
+    if (!instruction && instructionTemplate) {
+      setInstruction(instructionTemplate.data)
+      setEditorKey(`${flowId}-${Date.now()}`)
+    }
+  }, [instructionTemplate])
 
   const isValid = () => {
     if (instruction.trim() === '') {
@@ -211,6 +220,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
             <div className='text-[0px]'>
               <div className='system-sm-semibold-uppercase mb-1.5 text-text-secondary'>{t('appDebug.codegen.instruction')}</div>
               <InstructionEditor
+                editorKey={editorKey}
                 value={instruction}
                 onChange={setInstruction}
                 nodeId={nodeId}
diff --git a/web/service/debug.ts b/web/service/debug.ts
index 3af53c5615..20a4f0953f 100644
--- a/web/service/debug.ts
+++ b/web/service/debug.ts
@@ -91,11 +91,6 @@ export const generateRule = (body: Record<string, any>) => {
     body,
   })
 }
-export const generateRuleCode = (body: Record<string, any>) => {
-  return post<CodeGenRes>('/rule-code-generate', {
-    body,
-  })
-}
 
 export const fetchModelParams = (providerName: string, modelId: string) => {
   return get(`workspaces/current/model-providers/${providerName}/models/parameter-rules`, {
diff --git a/web/service/use-apps.ts b/web/service/use-apps.ts
index 1a3e9cedbb..0335eb5507 100644
--- a/web/service/use-apps.ts
+++ b/web/service/use-apps.ts
@@ -1,8 +1,9 @@
-import { get } from './base'
+import { get, post } from './base'
 import type { App } from '@/types/app'
 import type { AppListResponse } from '@/models/app'
 import { useInvalid } from './use-base'
 import { useQuery } from '@tanstack/react-query'
+import type { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
 
 const NAME_SPACE = 'apps'
 
@@ -25,3 +26,15 @@ export const useAppDetail = (appID: string) => {
     queryFn: () => get<App>(`/apps/${appID}`),
   })
 }
+
+export const useGenerateRuleTemplate = (type: GeneratorType) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'generate-rule-template', type],
+    queryFn: () => post<{ data: string }>('instruction-generate/template', {
+      body: {
+        type,
+      },
+    }),
+    retry: 0,
+  })
+}

From 71d08d0580016eb23ddd673147c783b9a95ea3e5 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 18:30:47 +0800
Subject: [PATCH 27/36] feat: handle is show current prompt

---
 .../app/configuration/config/automatic/get-automatic-res.tsx  | 2 ++
 .../config/automatic/instruction-editor-in-workflow.tsx       | 3 +++
 .../app/configuration/config/automatic/instruction-editor.tsx | 4 +++-
 .../config/code-generator/get-code-generator-res.tsx          | 1 +
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 8f3ff83eca..62ea35d305 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -336,6 +336,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                   onChange={setInstruction}
                   availableVars={[]}
                   availableNodes={[]}
+                  isShowCurrentBlock={!!currentPrompt}
                 />
               ) : (
                 <InstructionEditorInWorkflow
@@ -344,6 +345,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                   value={instruction}
                   onChange={setInstruction}
                   nodeId={nodeId || ''}
+                  isShowCurrentBlock={!!currentPrompt}
                 />
               )}
             </div>
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
index 4927af3673..b452519d0f 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
@@ -15,6 +15,7 @@ type Props = {
   editorKey: string
   onChange: (text: string) => void
   generatorType: GeneratorType
+  isShowCurrentBlock: boolean
 }
 
 const InstructionEditorInWorkflow: FC<Props> = ({
@@ -23,6 +24,7 @@ const InstructionEditorInWorkflow: FC<Props> = ({
   editorKey,
   onChange,
   generatorType,
+  isShowCurrentBlock,
 }) => {
   const workflowStore = useWorkflowStore()
 
@@ -49,6 +51,7 @@ const InstructionEditorInWorkflow: FC<Props> = ({
       availableVars={availableVars}
       availableNodes={availableNodes}
       getVarType={getVarType}
+      isShowCurrentBlock={isShowCurrentBlock}
     />
   )
 }
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index 2750cc7bfc..4c68424046 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -20,6 +20,7 @@ type Props = {
     nodeId: string,
     valueSelector: ValueSelector,
   }) => Type
+  isShowCurrentBlock: boolean
 }
 
 const i18nPrefix = 'appDebug.generate'
@@ -32,6 +33,7 @@ const InstructionEditor: FC<Props> = ({
   availableVars,
   availableNodes,
   getVarType = () => Type.string,
+  isShowCurrentBlock,
 }) => {
   const { t } = useTranslation()
   const isBasicMode = !!getVarType
@@ -79,7 +81,7 @@ const InstructionEditor: FC<Props> = ({
           }, {} as any),
         }}
         currentBlock={{
-          show: true,
+          show: isShowCurrentBlock,
           generatorType,
         }}
         errorMessageBlock={{
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 049ac7601a..cfdf7b918f 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -225,6 +225,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                 onChange={setInstruction}
                 nodeId={nodeId}
                 generatorType={GeneratorType.code}
+                isShowCurrentBlock={!!currentCode}
               />
             </div>
             <IdeaOutput

From ab45f3ce2632d9d9c7998e3a3e26f1c298d8779b Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 22 Jul 2025 10:38:10 +0800
Subject: [PATCH 28/36] feat: instruction template

---
 .../config-prompt/simple-prompt-input.tsx              |  1 +
 .../config/automatic/get-automatic-res.tsx             |  3 ++-
 .../automatic/instruction-editor-in-workflow.tsx       | 10 +++++++---
 .../config/automatic/instruction-editor.tsx            |  4 +++-
 .../_base/components/variable/var-reference-vars.tsx   |  2 +-
 web/service/use-apps.ts                                |  3 ++-
 6 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 2fb081366f..5be43e6f7a 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -276,6 +276,7 @@ const Prompt: FC<ISimplePromptInput> = ({
           isShow={showAutomatic}
           onClose={showAutomaticFalse}
           onFinished={handleAutomaticRes}
+          currentPrompt={promptTemplate}
           isBasicMode
         />
       )}
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 62ea35d305..c8f19ffb81 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -144,7 +144,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     }
   }, [t])
 
-  const { data: instructionTemplate } = useGenerateRuleTemplate(GeneratorType.prompt)
+  const { data: instructionTemplate } = useGenerateRuleTemplate(GeneratorType.prompt, isBasicMode)
   useEffect(() => {
     if (!instruction && instructionTemplate) {
       setInstruction(instructionTemplate.data)
@@ -337,6 +337,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                   availableVars={[]}
                   availableNodes={[]}
                   isShowCurrentBlock={!!currentPrompt}
+                  isShowLastRunBlock={false}
                 />
               ) : (
                 <InstructionEditorInWorkflow
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
index b452519d0f..a6e922f39f 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import type { GeneratorType } from './types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import InstructionEditor from './instruction-editor'
 import { useWorkflowVariableType } from '@/app/components/workflow/hooks'
-import { useWorkflowStore } from '@/app/components/workflow/store'
+import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 
 type Props = {
   nodeId: string
@@ -27,7 +27,10 @@ const InstructionEditorInWorkflow: FC<Props> = ({
   isShowCurrentBlock,
 }) => {
   const workflowStore = useWorkflowStore()
-
+  const nodesWithInspectVars = useStore(s => s.nodesWithInspectVars)
+  const isShowLastRunBlock = useMemo(() => {
+    return !!nodesWithInspectVars.find(node => node.nodeId === nodeId)
+  }, [nodesWithInspectVars])
   const filterVar = useCallback((payload: Var, selector: ValueSelector) => {
     const { nodesWithInspectVars } = workflowStore.getState()
     const nodeId = selector?.[0]
@@ -52,6 +55,7 @@ const InstructionEditorInWorkflow: FC<Props> = ({
       availableNodes={availableNodes}
       getVarType={getVarType}
       isShowCurrentBlock={isShowCurrentBlock}
+      isShowLastRunBlock
     />
   )
 }
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index 4c68424046..aeb8399620 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -21,6 +21,7 @@ type Props = {
     valueSelector: ValueSelector,
   }) => Type
   isShowCurrentBlock: boolean
+  isShowLastRunBlock: boolean
 }
 
 const i18nPrefix = 'appDebug.generate'
@@ -34,6 +35,7 @@ const InstructionEditor: FC<Props> = ({
   availableNodes,
   getVarType = () => Type.string,
   isShowCurrentBlock,
+  isShowLastRunBlock,
 }) => {
   const { t } = useTranslation()
   const isBasicMode = !!getVarType
@@ -88,7 +90,7 @@ const InstructionEditor: FC<Props> = ({
           show: isCode,
         }}
         lastRunBlock={{
-          show: true,
+          show: isShowLastRunBlock,
         }}
         onChange={onChange}
         editable
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 6fe43c0009..6d521a7358 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -416,7 +416,7 @@ const VarReferenceVars: FC<Props> = ({
               </div>))
           }
         </div>
-        : <div className='pl-3 text-xs font-medium uppercase leading-[18px] text-gray-500'>{t('workflow.common.noVar')}</div>}
+        : <div className='mt-2 pl-3 text-xs font-medium uppercase leading-[18px] text-gray-500'>{t('workflow.common.noVar')}</div>}
     </>
   )
 }
diff --git a/web/service/use-apps.ts b/web/service/use-apps.ts
index 0335eb5507..8a2df8db1d 100644
--- a/web/service/use-apps.ts
+++ b/web/service/use-apps.ts
@@ -27,7 +27,7 @@ export const useAppDetail = (appID: string) => {
   })
 }
 
-export const useGenerateRuleTemplate = (type: GeneratorType) => {
+export const useGenerateRuleTemplate = (type: GeneratorType, disabled?: boolean) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'generate-rule-template', type],
     queryFn: () => post<{ data: string }>('instruction-generate/template', {
@@ -35,6 +35,7 @@ export const useGenerateRuleTemplate = (type: GeneratorType) => {
         type,
       },
     }),
+    enabled: !disabled,
     retry: 0,
   })
 }

From 07288bda8b8d61ff1e0c68b73c1074d53006ffac Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 22 Jul 2025 11:14:56 +0800
Subject: [PATCH 29/36] feat: bottom to show vars

---
 .../config/automatic/instruction-editor.tsx   | 19 +++++++++++++++++--
 web/i18n/en-US/app-debug.ts                   |  3 +++
 web/i18n/zh-Hans/app-debug.ts                 |  3 +++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index aeb8399620..686e8a5dac 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -8,6 +8,8 @@ import type { Node, NodeOutPutVar, ValueSelector } from '@/app/components/workfl
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useTranslation } from 'react-i18next'
 import { Type } from '@/app/components/workflow/nodes/llm/types'
+import { PROMPT_EDITOR_INSERT_QUICKLY } from '@/app/components/base/prompt-editor/plugins/update-block'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
 
 type Props = {
   editorKey: string
@@ -38,6 +40,8 @@ const InstructionEditor: FC<Props> = ({
   isShowLastRunBlock,
 }) => {
   const { t } = useTranslation()
+  const { eventEmitter } = useEventEmitterContextContext()
+
   const isBasicMode = !!getVarType
   // const [controlPromptEditorRerenderKey] =
   const isCode = generatorType === 'code'
@@ -52,14 +56,19 @@ const InstructionEditor: FC<Props> = ({
     </div>
   )
 
+  const handleInsertVariable = () => {
+    eventEmitter?.emit({ type: PROMPT_EDITOR_INSERT_QUICKLY, instanceId: editorKey } as any)
+  }
+
   return (
-    <div>
+    <div className='relative'>
       <PromptEditor
         wrapperClassName='border !border-components-input-bg-normal bg-components-input-bg-normal hover:!border-components-input-bg-hover rounded-[10px] px-4 pt-3'
         key={editorKey}
+        instanceId={editorKey}
         placeholder={placeholder}
         placeholderClassName='px-4 pt-3'
-        className={cn('min-h-[240px] ')}
+        className={cn('min-h-[240px] pb-8')}
         value={value}
         workflowVariableBlock={{
           show: true,
@@ -96,6 +105,12 @@ const InstructionEditor: FC<Props> = ({
         editable
         isSupportFileVar={false}
       />
+      <div className='system-xs-regular absolute bottom-0 left-3 flex h-8 items-center space-x-0.5 text-components-input-text-placeholder'>
+        <span>{t('appDebug.generate.press')}</span>
+        <span className='system-kbd flex h-4 w-3.5 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray text-text-placeholder'>/</span>
+        <span>{t('appDebug.generate.to')}</span>
+        <span onClick={handleInsertVariable} className='!ml-1 cursor-pointer hover:border-b hover:border-dotted hover:border-text-tertiary hover:text-text-tertiary'>{t('appDebug.generate.insertContext')}</span>
+      </div>
     </div>
   )
 }
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index e9be6d2caf..1c782c061b 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -302,6 +302,9 @@ const translation = {
         instruction: 'Use advanced copyediting techniques to improve your writings',
       },
     },
+    press: 'Press',
+    to: 'to ',
+    insertContext: 'insert context',
   },
   resetConfig: {
     title: 'Confirm reset?',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index a818caabeb..5d562d4c16 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -301,6 +301,9 @@ const translation = {
         instruction: '用地道的编辑技巧改进我的文章',
       },
     },
+    press: '输入',
+    to: '来',
+    insertContext: '插入上下文',
   },
   resetConfig: {
     title: '确认重置？',

From c78130990d356540bc7ab3772e190e62eb2234ef Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 22 Jul 2025 12:16:13 +0800
Subject: [PATCH 30/36] chore: text

---
 .../app/configuration/config/automatic/idea-output.tsx        | 4 ++--
 web/i18n/en-US/app-debug.ts                                   | 4 ++--
 web/i18n/zh-Hans/app-debug.ts                                 | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/idea-output.tsx b/web/app/components/app/configuration/config/automatic/idea-output.tsx
index 373186953a..df4f76c92b 100644
--- a/web/app/components/app/configuration/config/automatic/idea-output.tsx
+++ b/web/app/components/app/configuration/config/automatic/idea-output.tsx
@@ -30,14 +30,14 @@ const IdeaOutput: FC<Props> = ({
         className='mb-1.5 flex  cursor-pointer items-center text-sm font-medium leading-5 text-text-primary'
         onClick={toggleFoldIdeaOutput}
       >
-        <div className='system-sm-semibold-uppercase mr-1 text-text-secondary'>{t(`${i18nPrefix}.ideaOutput`)}</div>
+        <div className='system-sm-semibold-uppercase mr-1 text-text-secondary'>{t(`${i18nPrefix}.idealOutput`)}</div>
         <div className='system-xs-regular text-text-tertiary'>({t(`${i18nPrefix}.optional`)})</div>
         <ArrowDownRoundFill className={cn('size text-text-quaternary', isFoldIdeaOutput && 'relative top-[1px] rotate-[-90deg]')} />
       </div>
       {!isFoldIdeaOutput && (
         <Textarea
           className="h-[80px]"
-          placeholder={t(`${i18nPrefix}.ideaOutputPlaceholder`)}
+          placeholder={t(`${i18nPrefix}.idealOutputPlaceholder`)}
           value={value}
           onChange={e => onChange(e.target.value)}
         />
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index 1c782c061b..a6e0b91ea2 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -252,8 +252,8 @@ const translation = {
     instructionPlaceHolderLine1: 'Make the output more concise, retaining the core points.',
     instructionPlaceHolderLine2: 'The output format is incorrect, please strictly follow the JSON format.',
     instructionPlaceHolderLine3: 'The tone is too harsh, please make it more friendly.',
-    ideaOutput: 'Idea Output',
-    ideaOutputPlaceholder: 'Describe your ideal response format, length, tone, and content requirements...',
+    idealOutput: 'Ideal Output',
+    idealOutputPlaceholder: 'Describe your ideal response format, length, tone, and content requirements...',
     optional: 'Optional',
     dismiss: 'Dismiss',
     generate: 'Generate',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index 5d562d4c16..f9c7308669 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -250,8 +250,8 @@ const translation = {
     instructionPlaceHolderLine1: '使输出更简洁，保留核心要点。',
     instructionPlaceHolderLine2: '输出格式不正确，请严格遵循 JSON 格式。',
     instructionPlaceHolderLine3: '语气过于生硬，请使其更友好。',
-    ideaOutput: '想法输出',
-    ideaOutputPlaceholder: '描述您想法的回复格式、长度、语气和内容要求……',
+    idealOutput: '理想输出',
+    idealOutputPlaceholder: '描述您理想的回复格式、长度、语气和内容要求……',
     optional: '可选',
     dismiss: '取消',
     generate: '生成',

From 5ad4465c9c7e319c3d24750248823bb05a3953f6 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 22 Jul 2025 14:01:27 +0800
Subject: [PATCH 31/36] fix: can not gen in second time

---
 .../app/configuration/config-prompt/simple-prompt-input.tsx   | 2 ++
 .../components/app/configuration/config/automatic/result.tsx  | 3 ++-
 web/i18n/zh-Hans/app-debug.ts                                 | 4 ++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 5be43e6f7a..a7bdc550d1 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -61,6 +61,7 @@ const Prompt: FC<ISimplePromptInput> = ({
 
   const { eventEmitter } = useEventEmitterContextContext()
   const {
+    appId,
     modelConfig,
     dataSets,
     setModelConfig,
@@ -272,6 +273,7 @@ const Prompt: FC<ISimplePromptInput> = ({
 
       {showAutomatic && (
         <GetAutomaticResModal
+          flowId={appId}
           mode={mode as AppType}
           isShow={showAutomatic}
           onClose={showAutomaticFalse}
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index de51fc1cc4..5ca9153358 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -13,6 +13,7 @@ import Toast from '@/app/components/base/toast'
 import CodeEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor'
 import PromptRes from './prompt-res'
 import PromptResInWorkflow from './prompt-res-in-workflow'
+import cn from '@/utils/classnames'
 
 type Props = {
   isBasicMode?: boolean
@@ -66,7 +67,7 @@ const Result: FC<Props> = ({
           <PromptToast message={current.message} className='mt-4 shrink-0' />
         )
       }
-      <div className='mt-3 grow'>
+      <div className={cn('mt-3 grow', isGeneratorPrompt && 'overflow-y-auto')}>
         {isGeneratorPrompt ? (
           isBasicMode ? (
             <PromptRes
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index f9c7308669..92f1db7b2d 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -256,8 +256,8 @@ const translation = {
     dismiss: '取消',
     generate: '生成',
     resTitle: '生成的提示词',
-    noDataLine1: '在左侧描述您的用例，',
-    noDataLine2: '编排预览将在此处显示。',
+    newNoDataLine1: '在左侧描述您的用例，点击生成查看结果。',
+    newNoDataLine2: '了解提示词设计',
     apply: '应用',
     noData: '在左侧描述您的用例，编排预览将在此处显示。',
     loading: '为您编排应用程序中…',

From a44a20024523f3ba519b6230852a883741dfb8a8 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 22 Jul 2025 17:40:01 +0800
Subject: [PATCH 32/36] fix: can update versions

---
 .../instruction-editor-in-workflow.tsx        |   8 +-
 .../config/automatic/prompt-res.tsx           |   8 +-
 .../workflow/variable-inspect/panel.tsx       |   1 +
 .../workflow/variable-inspect/right.tsx       | 108 +++++++++++++++++-
 web/i18n/en-US/app-debug.ts                   |   1 +
 web/i18n/zh-Hans/app-debug.ts                 |   1 +
 6 files changed, 119 insertions(+), 8 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
index a6e922f39f..cc8b5bff0c 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback } from 'react'
 import type { GeneratorType } from './types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import InstructionEditor from './instruction-editor'
 import { useWorkflowVariableType } from '@/app/components/workflow/hooks'
-import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
+import { useWorkflowStore } from '@/app/components/workflow/store'
 
 type Props = {
   nodeId: string
@@ -27,10 +27,6 @@ const InstructionEditorInWorkflow: FC<Props> = ({
   isShowCurrentBlock,
 }) => {
   const workflowStore = useWorkflowStore()
-  const nodesWithInspectVars = useStore(s => s.nodesWithInspectVars)
-  const isShowLastRunBlock = useMemo(() => {
-    return !!nodesWithInspectVars.find(node => node.nodeId === nodeId)
-  }, [nodesWithInspectVars])
   const filterVar = useCallback((payload: Var, selector: ValueSelector) => {
     const { nodesWithInspectVars } = workflowStore.getState()
     const nodeId = selector?.[0]
diff --git a/web/app/components/app/configuration/config/automatic/prompt-res.tsx b/web/app/components/app/configuration/config/automatic/prompt-res.tsx
index 86728bb2bc..f110741b98 100644
--- a/web/app/components/app/configuration/config/automatic/prompt-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/prompt-res.tsx
@@ -2,19 +2,25 @@
 import PromptEditor from '@/app/components/base/prompt-editor'
 import type { WorkflowVariableBlockType } from '@/app/components/base/prompt-editor/types'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 
 type Props = {
   value: string
   workflowVariableBlock: WorkflowVariableBlockType
 }
 
+const keyIdPrefix = 'prompt-res-editor'
 const PromptRes: FC<Props> = ({
   value,
   workflowVariableBlock,
 }) => {
+  const [editorKey, setEditorKey] = React.useState<string>('keyIdPrefix-0')
+  useEffect(() => {
+    setEditorKey(`${keyIdPrefix}-${Date.now()}`)
+  }, [value])
   return (
     <PromptEditor
+      key={editorKey}
       value={value}
       editable={false}
       className='h-full bg-transparent pt-0'
diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx
index be55142e29..4209e89b1b 100644
--- a/web/app/components/workflow/variable-inspect/panel.tsx
+++ b/web/app/components/workflow/variable-inspect/panel.tsx
@@ -176,6 +176,7 @@ const Panel: FC = () => {
       {/* right */}
       <div className='w-0 grow'>
         <Right
+          nodeId={currentFocusNodeId!}
           isValueFetching={isCurrentNodeVarValueFetching}
           currentNodeVar={currentNodeInfo as currentVarType}
           handleOpenMenu={() => setShowLeftPanel(true)}
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index 6ddd0d47d3..13f365abf7 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -3,9 +3,10 @@ import {
   RiArrowGoBackLine,
   RiCloseLine,
   RiMenuLine,
+  RiSparklingFill,
 } from '@remixicon/react'
 import { useStore } from '../store'
-import type { BlockEnum } from '../types'
+import { BlockEnum } from '../types'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import Empty from './empty'
 import ValueContent from './value-content'
@@ -20,14 +21,30 @@ import Loading from '@/app/components/base/loading'
 import type { currentVarType } from './panel'
 import { VarInInspectType } from '@/types/workflow'
 import cn from '@/utils/classnames'
+import useNodeInfo from '../nodes/_base/hooks/use-node-info'
+import { useBoolean } from 'ahooks'
+import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
+import GetCodeGeneratorResModal from '../../app/configuration/config/code-generator/get-code-generator-res'
+import { AppType } from '@/types/app'
+import { useHooksStore } from '../hooks-store'
+import { useCallback, useMemo } from 'react'
+import { useNodesInteractions } from '../hooks'
+import { CodeLanguage } from '../nodes/code/types'
+import useNodeCrud from '../nodes/_base/hooks/use-node-crud'
+import type { GenRes } from '@/service/debug'
+import produce from 'immer'
+import { PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER } from '../../base/prompt-editor/plugins/update-block'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
 
 type Props = {
+  nodeId: string
   currentNodeVar?: currentVarType
   handleOpenMenu: () => void
   isValueFetching?: boolean
 }
 
 const Right = ({
+  nodeId,
   currentNodeVar,
   handleOpenMenu,
   isValueFetching,
@@ -74,6 +91,63 @@ const Right = ({
     return String(value)
   }
 
+  const configsMap = useHooksStore(s => s.configsMap)
+  const { eventEmitter } = useEventEmitterContextContext()
+  const { handleNodeSelect } = useNodesInteractions()
+  const { node } = useNodeInfo(nodeId)
+  const { setInputs } = useNodeCrud(nodeId, node?.data)
+  const blockType = node?.data?.type
+  const isCodeBlock = blockType === BlockEnum.Code
+  const canShowPromptGenerator = [BlockEnum.LLM, BlockEnum.Code].includes(blockType)
+  const currentPrompt = useMemo(() => {
+    if (!canShowPromptGenerator)
+      return ''
+    if (blockType === BlockEnum.LLM)
+      return node?.data?.prompt_template?.text || node?.data?.prompt_template?.[0].text
+
+    // if (blockType === BlockEnum.Agent) {
+    //   return node?.data?.agent_parameters?.instruction?.value
+    // }
+    if (blockType === BlockEnum.Code)
+      return node?.data?.code
+  }, [canShowPromptGenerator])
+
+  const [isShowPromptGenerator, {
+    setTrue: doShowPromptGenerator,
+    setFalse: handleHidePromptGenerator,
+  }] = useBoolean(false)
+  const handleShowPromptGenerator = useCallback(() => {
+    handleNodeSelect(nodeId)
+    doShowPromptGenerator()
+  }, [doShowPromptGenerator, handleNodeSelect, nodeId])
+
+  const handleUpdatePrompt = useCallback((res: GenRes) => {
+    const newInputs = produce(node?.data, (draft: any) => {
+      switch (blockType) {
+        case BlockEnum.LLM:
+          if (draft?.prompt_template) {
+            if (Array.isArray(draft.prompt_template))
+              draft.prompt_template[0].text = res.modified
+             else
+              draft.prompt_template.text = res.modified
+          }
+          break
+
+        //  Agent is a plugin, may has many instructions
+        // case BlockEnum.Agent:
+        //   if (draft?.agent_parameters?.instruction) {
+        //     draft.agent_parameters.instruction.value = res.modified
+        //   }
+        //   break
+        case BlockEnum.Code:
+          draft.code = res.modified
+          break
+      }
+    })
+    setInputs(newInputs)
+    eventEmitter?.emit({ type: PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER, instanceId: `${nodeId}-chat-workflow-llm-prompt-editor` } as any)
+    handleHidePromptGenerator()
+  }, [setInputs, blockType, nodeId, node?.data, handleHidePromptGenerator])
   return (
     <div className={cn('flex h-full flex-col')}>
       {/* header */}
@@ -114,6 +188,16 @@ const Right = ({
         <div className='flex shrink-0 items-center gap-1'>
           {currentNodeVar && (
             <>
+              {canShowPromptGenerator && (
+                <Tooltip popupContent={t('appDebug.generate.optimizePromptTooltip')}>
+                  <div
+                    className='cursor-pointer rounded-md p-1 hover:bg-state-accent-active'
+                    onClick={handleShowPromptGenerator}
+                  >
+                    <RiSparklingFill className='size-4 text-components-input-border-active-prompt-1' />
+                  </div>
+                </Tooltip>
+              )}
               {currentNodeVar.var.edited && (
                 <Badge>
                   <span className='ml-[2.5px] mr-[4.5px] h-[3px] w-[3px] rounded bg-text-accent-secondary'></span>
@@ -154,6 +238,28 @@ const Right = ({
         )}
         {currentNodeVar && !isValueFetching && <ValueContent currentVar={currentNodeVar.var} handleValueChange={handleValueChange} />}
       </div>
+      {isShowPromptGenerator && (
+        isCodeBlock
+          ? <GetCodeGeneratorResModal
+            isShow
+            mode={AppType.chat}
+            onClose={handleHidePromptGenerator}
+            flowId={configsMap?.flowId || ''}
+            nodeId={nodeId}
+            currentCode={currentPrompt}
+            codeLanguages={node?.data?.code_languages || CodeLanguage.python3}
+            onFinished={handleUpdatePrompt}
+          />
+          : <GetAutomaticResModal
+            mode={AppType.chat}
+            isShow
+            onClose={handleHidePromptGenerator}
+            onFinished={handleUpdatePrompt}
+            flowId={configsMap?.flowId || ''}
+            nodeId={nodeId}
+            currentPrompt={currentPrompt}
+          />
+      )}
     </div>
   )
 }
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index a6e0b91ea2..076f93e634 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -305,6 +305,7 @@ const translation = {
     press: 'Press',
     to: 'to ',
     insertContext: 'insert context',
+    optimizePromptTooltip: 'Optimize in Prompt Generator',
   },
   resetConfig: {
     title: 'Confirm reset?',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index 92f1db7b2d..b8b44e0e76 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -304,6 +304,7 @@ const translation = {
     press: '输入',
     to: '来',
     insertContext: '插入上下文',
+    optimizePromptTooltip: '在提示词生成器中优化',
   },
   resetConfig: {
     title: '确认重置？',

From 0066cfe4ed98bf27d0d2445a8ad350b4b19811d6 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 22 Jul 2025 18:04:44 +0800
Subject: [PATCH 33/36] chore: remove agent can show prompt gen

---
 web/app/components/workflow/variable-inspect/right.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index 13f365abf7..db29014739 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -128,12 +128,12 @@ const Right = ({
           if (draft?.prompt_template) {
             if (Array.isArray(draft.prompt_template))
               draft.prompt_template[0].text = res.modified
-             else
+            else
               draft.prompt_template.text = res.modified
           }
           break
 
-        //  Agent is a plugin, may has many instructions
+        //  Agent is a plugin, may has many instructions, can not locate which one to update
         // case BlockEnum.Agent:
         //   if (draft?.agent_parameters?.instruction) {
         //     draft.agent_parameters.instruction.value = res.modified
@@ -145,7 +145,11 @@ const Right = ({
       }
     })
     setInputs(newInputs)
-    eventEmitter?.emit({ type: PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER, instanceId: `${nodeId}-chat-workflow-llm-prompt-editor` } as any)
+    eventEmitter?.emit({
+      type: PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER,
+      instanceId: `${nodeId}-chat-workflow-llm-prompt-editor`,
+      payload: res.modified,
+    } as any)
     handleHidePromptGenerator()
   }, [setInputs, blockType, nodeId, node?.data, handleHidePromptGenerator])
   return (

From 91b0672001520d6a9520c6d996b5673401a14196 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 23 Jul 2025 10:22:09 +0800
Subject: [PATCH 34/36] fix: can overwrite the gened prompt

---
 .../workflow/nodes/llm/components/config-prompt-item.tsx | 9 +++------
 .../workflow/nodes/llm/components/config-prompt.tsx      | 1 +
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
index ff571af9d2..e62b024d1a 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useEffect, useState } from 'react'
-import { uniqueId } from 'lodash-es'
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { ModelConfig, PromptItem, Variable } from '../../../types'
 import { EditionType } from '../../../types'
@@ -14,6 +13,7 @@ import { PromptRole } from '@/models/debug'
 const i18nPrefix = 'workflow.nodes.llm'
 
 type Props = {
+  instanceId: string
   className?: string
   headerClassName?: string
   canNotChooseSystemRole?: boolean
@@ -59,6 +59,7 @@ const roleOptions = [
 const roleOptionsWithoutSystemRole = roleOptions.filter(item => item.value !== PromptRole.system)
 
 const ConfigPromptItem: FC<Props> = ({
+  instanceId,
   className,
   headerClassName,
   canNotChooseSystemRole,
@@ -86,10 +87,6 @@ const ConfigPromptItem: FC<Props> = ({
   const {
     setControlPromptEditorRerenderKey,
   } = workflowStore.getState()
-  const [instanceId, setInstanceId] = useState(uniqueId())
-  useEffect(() => {
-    setInstanceId(`${id}-${uniqueId()}`)
-  }, [id])
 
   const handleGenerated = useCallback((prompt: string) => {
     onPromptChange(prompt)
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index b8a68f364f..fee762bd25 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -182,6 +182,7 @@ const ConfigPrompt: FC<Props> = ({
                       <div key={item.id || index} className='group relative'>
                         {canDrag && <DragHandle className='absolute left-[-14px] top-2 hidden h-3.5 w-3.5 text-text-quaternary group-hover:block' />}
                         <ConfigPromptItem
+                          instanceId={item.role === PromptRole.system ? `${nodeId}-chat-workflow-llm-prompt-editor` : `${nodeId}-chat-workflow-llm-prompt-editor-${index}`}
                           className={cn(canDrag && 'handle')}
                           headerClassName={cn(canDrag && 'cursor-grab')}
                           canNotChooseSystemRole={!canChooseSystemRole}

From ae50d3e22fc9d9e4bbd450102f59217021bcc304 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 24 Jul 2025 10:37:54 +0800
Subject: [PATCH 35/36] chore: add markdown render tip

---
 .../config/automatic/prompt-toast.tsx         | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
index 3eaa483c9b..f3e3b318dd 100644
--- a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
+++ b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
@@ -2,17 +2,32 @@ import { RiCloseLine, RiInformation2Fill } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import React from 'react'
 import cn from '@/utils/classnames'
+import { Markdown } from '@/app/components/base/markdown'
 type Props = {
   message: string
   className?: string
 }
 const PromptToast = ({
-  message,
+  // message,
   className,
 }: Props) => {
   const [isHide, {
     setTrue: hide,
   }] = useBoolean(false)
+  const message = `
+# h1
+**strong text**  ~~strikethrough~~
+
+* list1
+* list2
+
+xxxx
+
+## h2
+\`\`\`python
+print('Hello, World!')
+\`\`\`
+  `
   if (isHide)
     return
   return (
@@ -22,7 +37,7 @@ const PromptToast = ({
       <div className='relative flex h-full w-full  justify-between'>
         <div className="flex h-full w-0 grow gap-1">
           <RiInformation2Fill className="mt-[3px] size-4 shrink-0 text-text-accent" />
-          <p className="w-0 grow text-sm text-gray-700">{message}</p>
+          <Markdown className="w-0 grow text-sm" content={message} />
         </div>
 
         <div className='relative  top-[-1px] shrink-0 cursor-pointer p-0.5' onClick={hide}>

From 7ead579335b7853e97f3c89e4a197863e8fc70aa Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 24 Jul 2025 14:07:30 +0800
Subject: [PATCH 36/36] chore: use markdown render notice

---
 .../config/automatic/prompt-toast.tsx         | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
index f3e3b318dd..a5a8bc2fae 100644
--- a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
+++ b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
@@ -8,26 +8,26 @@ type Props = {
   className?: string
 }
 const PromptToast = ({
-  // message,
+  message,
   className,
 }: Props) => {
   const [isHide, {
     setTrue: hide,
   }] = useBoolean(false)
-  const message = `
-# h1
-**strong text**  ~~strikethrough~~
+  //   const message = `
+  // # h1
+  // **strong text**  ~~strikethrough~~
 
-* list1
-* list2
+  // * list1
+  // * list2
 
-xxxx
+  // xxxx
 
-## h2
-\`\`\`python
-print('Hello, World!')
-\`\`\`
-  `
+  // ## h2
+  // \`\`\`python
+  // print('Hello, World!')
+  // \`\`\`
+  //   `
   if (isHide)
     return
   return (