feat: enchance prompt and code (#23633)

Co-authored-by: stream <stream@dify.ai> Co-authored-by: Stream <1542763342@qq.com> Co-authored-by: Stream <Stream_2@qq.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2025-08-18 12:29:12 +08:00
parent a7fe0e3f87
commit de9c5f10b3
66 changed files with 2654 additions and 275 deletions
--- 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
  }
--- 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
--- 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'
--- 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,25 +7,32 @@ 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
 }

 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
@@ -40,6 +47,9 @@ const CodeGenerateBtn: FC<Props> = ({
          codeLanguages={codeLanguages}
          onClose={showAutomaticFalse}
          onFinished={handleAutomaticRes}
+          flowId={configsMap?.flowId || ''}
+          nodeId={nodeId}
+          currentCode={currentCode}
        />
      )}
    </div>
--- 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,12 @@ const Base: FC<Props> = ({
            {headerRight}
            {showCodeGenerator && codeLanguages && (
              <div className='ml-1'>
-                <CodeGeneratorButton onGenerated={onGenerated} codeLanguages={codeLanguages} />
+                <CodeGeneratorButton
+                  onGenerated={onGenerated}
+                  codeLanguages={codeLanguages}
+                  currentCode={value}
+                  nodeId={nodeId!}
+                />
              </div>
            )}
            <ActionButton className='ml-1' onClick={handleCopy}>
--- 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}
--- 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,
@@ -159,7 +161,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
+                  nodeId={nodeId!}
+                  className='ml-[5px]'
+                  onGenerated={onGenerated}
+                  modelConfig={modelConfig}
+                  currentPrompt={value}
+                />
              )}

              <div className='ml-2 mr-2 h-3 w-px bg-divider-regular'></div>
--- 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
@@ -20,7 +20,9 @@ import { varTypeToStructType } from './utils'
 import type { Field } from '@/app/components/workflow/nodes/llm/types'
 import { FILE_STRUCT } from '@/app/components/workflow/constants'
 import { noop } from 'lodash-es'
+import { CodeAssistant, MagicEdit } from '@/app/components/base/icons/src/vender/line/general'
 import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'

 type ObjectChildrenProps = {
  nodeId: string
@@ -44,7 +46,10 @@ type ItemProps = {
  isSupportFileVar?: boolean
  isException?: boolean
  isLoopVar?: boolean
+  isFlat?: boolean
+  isInCodeGeneratorInstructionEditor?: boolean
  zIndex?: number
+  className?: string
 }

 const objVarTypes = [VarType.object, VarType.file]
@@ -59,7 +64,10 @@ const Item: FC<ItemProps> = ({
  isSupportFileVar,
  isException,
  isLoopVar,
+  isFlat,
+  isInCodeGeneratorInstructionEditor,
  zIndex,
+  className,
 }) => {
  const isStructureOutput = itemData.type === VarType.object && (itemData.children as StructuredOutput)?.schema?.properties
  const isFile = itemData.type === VarType.file && !isStructureOutput
@@ -67,6 +75,29 @@ 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' />
+      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])
+
+  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
@@ -122,7 +153,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 {
@@ -147,18 +181,22 @@ 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}
          onMouseDown={e => e.preventDefault()}
        >
          <div className='flex w-0 grow items-center'>
-            <VariableIconWithColor
+            {!isFlat && <VariableIconWithColor
              variableCategory={variableCategory}
              isExceptionVariable={isException}
-            />
+            />}
+            {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>
@@ -264,6 +302,7 @@ type Props = {
  onClose?: () => void
  onBlur?: () => void
  zIndex?: number
+  isInCodeGeneratorInstructionEditor?: boolean
  autoFocus?: boolean
 }
 const VarReferenceVars: FC<Props> = ({
@@ -277,6 +316,7 @@ const VarReferenceVars: FC<Props> = ({
  onClose,
  onBlur,
  zIndex,
+  isInCodeGeneratorInstructionEditor,
  autoFocus = true,
 }) => {
  const { t } = useTranslation()
@@ -319,7 +359,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
@@ -345,11 +385,13 @@ 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>
+              <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'
+                    title={item.title}
+                  >{item.title}</div>
+                )}
                {item.vars.map((v, j) => (
                  <Item
                    key={j}
@@ -362,13 +404,22 @@ const VarReferenceVars: FC<Props> = ({
                    isSupportFileVar={isSupportFileVar}
                    isException={v.isException}
                    isLoopVar={item.isLoop}
+                    isFlat={item.isFlat}
+                    isInCodeGeneratorInstructionEditor={isInCodeGeneratorInstructionEditor}
                    zIndex={zIndex}
                  />
                ))}
+                {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>
+                    <div className='h-0  shrink-0 grow border border-divider-subtle'></div>
+                  </div>
+                )}
              </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>}
    </>
  )
 }
--- 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 = (() => {
--- 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={
--- 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,11 +13,13 @@ import { PromptRole } from '@/models/debug'
 const i18nPrefix = 'workflow.nodes.llm'

 type Props = {
+  instanceId: string
  className?: string
  headerClassName?: string
  canNotChooseSystemRole?: boolean
  readOnly: boolean
  id: string
+  nodeId: string
  canRemove: boolean
  isChatModel: boolean
  isChatApp: boolean
@@ -58,11 +59,13 @@ const roleOptions = [
 const roleOptionsWithoutSystemRole = roleOptions.filter(item => item.value !== PromptRole.system)

 const ConfigPromptItem: FC<Props> = ({
+  instanceId,
  className,
  headerClassName,
  canNotChooseSystemRole,
  readOnly,
  id,
+  nodeId,
  canRemove,
  handleChatModeMessageRoleChange,
  isChatModel,
@@ -84,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)
@@ -136,6 +135,7 @@ const ConfigPromptItem: FC<Props> = ({
      hasSetBlockStatus={hasSetBlockStatus}
      nodesOutputVars={availableVars}
      availableNodes={availableNodes}
+      nodeId={nodeId}
      isSupportPromptGenerator={payload.role === PromptRole.system}
      onGenerated={handleGenerated}
      modelConfig={modelConfig}
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -182,12 +182,14 @@ 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}
                          canRemove={payload.length > 1 && !(index === 0 && item.role === PromptRole.system)}
                          readOnly={readOnly}
                          id={item.id!}
+                          nodeId={nodeId}
                          handleChatModeMessageRoleChange={handleChatModeMessageRoleChange(index)}
                          isChatModel={isChatModel}
                          isChatApp={isChatApp}
--- 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,24 +7,30 @@ 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 } from '@/app/components/workflow/types'
+import { useHooksStore } from '../../../hooks-store'

 type Props = {
  className?: string
  onGenerated?: (prompt: string) => void
  modelConfig?: ModelConfig
+  nodeId: string
+  currentPrompt?: string
 }

 const PromptGeneratorBtn: FC<Props> = ({
  className,
  onGenerated,
+  nodeId,
+  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)
  return (
    <div className={cn(className)}>
      <ActionButton
@@ -38,7 +44,9 @@ const PromptGeneratorBtn: FC<Props> = ({
          isShow={showAutomatic}
          onClose={showAutomaticFalse}
          onFinished={handleAutomaticRes}
-          isInLLMNode
+          flowId={configsMap?.flowId || ''}
+          nodeId={nodeId}
+          currentPrompt={currentPrompt}
        />
      )}
    </div>
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -296,6 +296,7 @@ export type NodeOutPutVar = {
  vars: Var[]
  isStartNode?: boolean
  isLoop?: boolean
+  isFlat?: boolean
 }

 export type Block = {
--- 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)}
--- 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'
@@ -18,15 +19,31 @@ 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'
 import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'

 type Props = {
+  nodeId: string
  currentNodeVar?: currentVarType
  handleOpenMenu: () => void
  isValueFetching?: boolean
 }

 const Right = ({
+  nodeId,
  currentNodeVar,
  handleOpenMenu,
  isValueFetching,
@@ -73,6 +90,67 @@ 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, can not locate which one to update
+        // 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`,
+      payload: res.modified,
+    } as any)
+    handleHidePromptGenerator()
+  }, [setInputs, blockType, nodeId, node?.data, handleHidePromptGenerator])
  return (
    <div className={cn('flex h-full flex-col')}>
      {/* header */}
@@ -112,6 +190,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>
@@ -152,6 +240,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>
  )
 }