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>

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}

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}

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>