feat: can generate code

7 months ago · f60792bcc7
parent ba8129cf73
commit f60792bcc7
8 changed files with 88 additions and 89 deletions
--- 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()
--- 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}
--- 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>
--- 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>
--- 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>
--- 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
--- 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>
--- 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>