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] 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>