Revert "chore: improve prompt auto generator" (#6556)

web/app/components/app/configuration/config-prompt/index.tsx

@@ -19,9 +19,6 @@ export type IPromptProps = {
   promptTemplate: string
   promptVariables: PromptVariable[]
   readonly?: boolean
-  noTitle?: boolean
-  gradientBorder?: boolean
-  editorHeight?: number
   onChange?: (prompt: string, promptVariables: PromptVariable[]) => void
 }
 
@@ -29,10 +26,7 @@ const Prompt: FC<IPromptProps> = ({
   mode,
   promptTemplate,
   promptVariables,
-  noTitle,
-  gradientBorder,
   readonly = false,
-  editorHeight,
   onChange,
 }) => {
   const { t } = useTranslation()
@@ -105,9 +99,6 @@ const Prompt: FC<IPromptProps> = ({
         promptVariables={promptVariables}
         readonly={readonly}
         onChange={onChange}
-        noTitle={noTitle}
-        gradientBorder={gradientBorder}
-        editorHeight={editorHeight}
       />
     )
   }

web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx

@@ -28,7 +28,6 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { ADD_EXTERNAL_DATA_TOOL } from '@/app/components/app/configuration/config-var'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
 import { PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER } from '@/app/components/base/prompt-editor/plugins/update-block'
-import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 export type ISimplePromptInput = {
   mode: AppType
@@ -36,9 +35,6 @@ export type ISimplePromptInput = {
   promptVariables: PromptVariable[]
   readonly?: boolean
   onChange?: (promp: string, promptVariables: PromptVariable[]) => void
-  noTitle?: boolean
-  gradientBorder?: boolean
-  editorHeight?: number
 }
 
 const Prompt: FC<ISimplePromptInput> = ({
@@ -47,14 +43,8 @@ const Prompt: FC<ISimplePromptInput> = ({
   promptVariables,
   readonly = false,
   onChange,
-  noTitle,
-  gradientBorder,
-  editorHeight: initEditorHeight,
 }) => {
   const { t } = useTranslation()
-  const media = useBreakpoints()
-  const isMobile = media === MediaType.mobile
-
   const { eventEmitter } = useEventEmitterContextContext()
   const {
     modelConfig,
@@ -126,11 +116,6 @@ const Prompt: FC<ISimplePromptInput> = ({
 
   const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
   const handleAutomaticRes = (res: AutomaticRes) => {
-    // 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,
-    } 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 }))
@@ -140,35 +125,36 @@ const Prompt: FC<ISimplePromptInput> = ({
     if (mode !== AppType.completion)
       setIntroduction(res.opening_statement)
     showAutomaticFalse()
+    eventEmitter?.emit({
+      type: PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER,
+      payload: res.prompt,
+    } as any)
   }
-  const minHeight = initEditorHeight || 228
+  const minHeight = 228
   const [editorHeight, setEditorHeight] = useState(minHeight)
 
   return (
-    <div className={cn((!readonly || gradientBorder) ? `${s.gradientBorder}` : 'bg-gray-50', ' relative shadow-md')}>
+    <div className={cn(!readonly ? `${s.gradientBorder}` : 'bg-gray-50', ' relative shadow-md')}>
       <div className='rounded-xl bg-[#EEF4FF]'>
-        {!noTitle && (
-          <div className="flex justify-between items-center h-11 px-3">
-            <div className="flex items-center space-x-1">
-              <div className='h2'>{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div>
-              {!readonly && (
-                <Tooltip
-                  htmlContent={<div className='w-[180px]'>
-                    {t('appDebug.promptTip')}
-                  </div>}
-                  selector='config-prompt-tooltip'>
-                  <RiQuestionLine className='w-[14px] h-[14px] text-indigo-400' />
-                </Tooltip>
-              )}
-            </div>
-            <div className='flex items-center'>
-              {!isAgent && !readonly && !isMobile && (
-                <AutomaticBtn onClick={showAutomaticTrue} />
-              )}
-            </div>
+        <div className="flex justify-between items-center h-11 px-3">
+          <div className="flex items-center space-x-1">
+            <div className='h2'>{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div>
+            {!readonly && (
+              <Tooltip
+                htmlContent={<div className='w-[180px]'>
+                  {t('appDebug.promptTip')}
+                </div>}
+                selector='config-prompt-tooltip'>
+                <RiQuestionLine className='w-[14px] h-[14px] text-indigo-400' />
+              </Tooltip>
+            )}
           </div>
-        )}
-
+          <div className='flex items-center'>
+            {!isAgent && !readonly && (
+              <AutomaticBtn onClick={showAutomaticTrue} />
+            )}
+          </div>
+        </div>
         <PromptEditorHeightResizeWrap
           className='px-4 pt-2 min-h-[228px] bg-white rounded-t-xl text-sm text-gray-700'
           height={editorHeight}
@@ -230,7 +216,6 @@ const Prompt: FC<ISimplePromptInput> = ({
             onBlur={() => {
               handleChange(promptTemplate, getVars(promptTemplate))
             }}
-            editable={!readonly}
           />
         </PromptEditorHeightResizeWrap>
       </div>

web/app/components/app/configuration/config/automatic/automatic-btn.tsx

@@ -2,21 +2,29 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Generator } from '@/app/components/base/icons/src/vender/other'
 
 export type IAutomaticBtnProps = {
   onClick: () => void
 }
+
+const leftIcon = (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.31346 0.905711C4.21464 0.708087 4.01266 0.583252 3.79171 0.583252C3.57076 0.583252 3.36877 0.708087 3.26996 0.905711L2.81236 1.82091C2.64757 2.15048 2.59736 2.24532 2.53635 2.32447C2.47515 2.40386 2.40398 2.47503 2.32459 2.53623C2.24544 2.59724 2.1506 2.64745 1.82103 2.81224L0.905833 3.26984C0.708209 3.36865 0.583374 3.57064 0.583374 3.79159C0.583374 4.01254 0.708209 4.21452 0.905833 4.31333L1.82103 4.77094C2.1506 4.93572 2.24544 4.98593 2.32459 5.04694C2.40398 5.10814 2.47515 5.17931 2.53635 5.2587C2.59736 5.33785 2.64758 5.43269 2.81236 5.76226L3.26996 6.67746C3.36877 6.87508 3.57076 6.99992 3.79171 6.99992C4.01266 6.99992 4.21465 6.87508 4.31346 6.67746L4.77106 5.76226C4.93584 5.43269 4.98605 5.33786 5.04707 5.2587C5.10826 5.17931 5.17943 5.10814 5.25883 5.04694C5.33798 4.98593 5.43282 4.93572 5.76238 4.77094L6.67758 4.31333C6.87521 4.21452 7.00004 4.01254 7.00004 3.79159C7.00004 3.57064 6.87521 3.36865 6.67758 3.26984L5.76238 2.81224C5.43282 2.64745 5.33798 2.59724 5.25883 2.53623C5.17943 2.47503 5.10826 2.40386 5.04707 2.32447C4.98605 2.24532 4.93584 2.15048 4.77106 1.82091L4.31346 0.905711Z" fill="#444CE7" />
+    <path d="M11.375 1.74992C11.375 1.42775 11.1139 1.16659 10.7917 1.16659C10.4695 1.16659 10.2084 1.42775 10.2084 1.74992V2.62492H9.33337C9.01121 2.62492 8.75004 2.88609 8.75004 3.20825C8.75004 3.53042 9.01121 3.79159 9.33337 3.79159H10.2084V4.66659C10.2084 4.98875 10.4695 5.24992 10.7917 5.24992C11.1139 5.24992 11.375 4.98875 11.375 4.66659V3.79159H12.25C12.5722 3.79159 12.8334 3.53042 12.8334 3.20825C12.8334 2.88609 12.5722 2.62492 12.25 2.62492H11.375V1.74992Z" fill="#444CE7" />
+    <path d="M3.79171 9.33325C3.79171 9.01109 3.53054 8.74992 3.20837 8.74992C2.88621 8.74992 2.62504 9.01109 2.62504 9.33325V10.2083H1.75004C1.42787 10.2083 1.16671 10.4694 1.16671 10.7916C1.16671 11.1138 1.42787 11.3749 1.75004 11.3749H2.62504V12.2499C2.62504 12.5721 2.88621 12.8333 3.20837 12.8333C3.53054 12.8333 3.79171 12.5721 3.79171 12.2499V11.3749H4.66671C4.98887 11.3749 5.25004 11.1138 5.25004 10.7916C5.25004 10.4694 4.98887 10.2083 4.66671 10.2083H3.79171V9.33325Z" fill="#444CE7" />
+    <path d="M10.4385 6.73904C10.3396 6.54142 10.1377 6.41659 9.91671 6.41659C9.69576 6.41659 9.49377 6.54142 9.39496 6.73904L8.84014 7.84869C8.67535 8.17826 8.62514 8.27309 8.56413 8.35225C8.50293 8.43164 8.43176 8.50281 8.35237 8.56401C8.27322 8.62502 8.17838 8.67523 7.84881 8.84001L6.73917 9.39484C6.54154 9.49365 6.41671 9.69564 6.41671 9.91659C6.41671 10.1375 6.54154 10.3395 6.73917 10.4383L7.84881 10.9932C8.17838 11.1579 8.27322 11.2082 8.35237 11.2692C8.43176 11.3304 8.50293 11.4015 8.56413 11.4809C8.62514 11.5601 8.67535 11.6549 8.84014 11.9845L9.39496 13.0941C9.49377 13.2918 9.69576 13.4166 9.91671 13.4166C10.1377 13.4166 10.3396 13.2918 10.4385 13.0941L10.9933 11.9845C11.1581 11.6549 11.2083 11.5601 11.2693 11.4809C11.3305 11.4015 11.4017 11.3304 11.481 11.2692C11.5602 11.2082 11.655 11.1579 11.9846 10.9932L13.0942 10.4383C13.2919 10.3395 13.4167 10.1375 13.4167 9.91659C13.4167 9.69564 13.2919 9.49365 13.0942 9.39484L11.9846 8.84001C11.655 8.67523 11.5602 8.62502 11.481 8.56401C11.4017 8.50281 11.3305 8.43164 11.2693 8.35225C11.2083 8.27309 11.1581 8.17826 10.9933 7.84869L10.4385 6.73904Z" fill="#444CE7" />
+  </svg>
+)
 const AutomaticBtn: FC<IAutomaticBtnProps> = ({
   onClick,
 }) => {
   const { t } = useTranslation()
 
   return (
-    <div className='flex space-x-1 items-center !h-8 cursor-pointer'
+    <div className='flex px-3 space-x-2 items-center !h-8 cursor-pointer'
       onClick={onClick}
     >
-      <Generator className='w-3.5 h-3.5 text-indigo-600' />
+      {leftIcon}
       <span className='text-xs font-semibold text-indigo-600'>{t('appDebug.operation.automatic')}</span>
     </div>
   )

web/app/components/app/configuration/config/automatic/get-automatic-res.tsx

@@ -1,20 +1,8 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import {
-  RiDatabase2Line,
-  RiFileExcel2Line,
-  RiGitCommitLine,
-  RiNewspaperLine,
-  RiPresentationLine,
-  RiRoadMapLine,
-  RiTerminalBoxLine,
-  RiTranslate,
-  RiUser2Line,
-} from '@remixicon/react'
-import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
@@ -26,97 +14,57 @@ import OpeningStatement from '@/app/components/app/configuration/features/chat-g
 import GroupName from '@/app/components/app/configuration/base/group-name'
 import Loading from '@/app/components/base/loading'
 import Confirm from '@/app/components/base/confirm'
-
 // type
 import type { AutomaticRes } from '@/service/debug'
-import { Generator } from '@/app/components/base/icons/src/vender/other'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+
+const noDataIcon = (
+  <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.4998 51.3333V39.6666M10.4998 16.3333V4.66663M4.6665 10.5H16.3332M4.6665 45.5H16.3332M30.3332 6.99996L26.2868 17.5206C25.6287 19.2315 25.2997 20.0869 24.7881 20.8065C24.3346 21.4442 23.7774 22.0014 23.1397 22.4549C22.4202 22.9665 21.5647 23.2955 19.8538 23.9535L9.33317 28L19.8539 32.0464C21.5647 32.7044 22.4202 33.0334 23.1397 33.5451C23.7774 33.9985 24.3346 34.5557 24.7881 35.1934C25.2997 35.913 25.6287 36.7684 26.2868 38.4793L30.3332 49L34.3796 38.4793C35.0376 36.7684 35.3666 35.913 35.8783 35.1934C36.3317 34.5557 36.8889 33.9985 37.5266 33.5451C38.2462 33.0334 39.1016 32.7044 40.8125 32.0464L51.3332 28L40.8125 23.9535C39.1016 23.2955 38.2462 22.9665 37.5266 22.4549C36.8889 22.0014 36.3317 21.4442 35.8783 20.8065C35.3666 20.0869 35.0376 19.2315 34.3796 17.5206L30.3332 6.99996Z" stroke="#EAECF0" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
 
 export type IGetAutomaticResProps = {
   mode: AppType
   isShow: boolean
   onClose: () => void
   onFinished: (res: AutomaticRes) => void
-  isInLLMNode?: boolean
 }
 
-const TryLabel: FC<{
-  Icon: any
-  text: string
-  onClick: () => void
-}> = ({ Icon, text, onClick }) => {
-  return (
-    <div
-      className='mt-2 mr-1 shrink-0 flex h-7 items-center px-2 bg-gray-100 rounded-lg cursor-pointer'
-      onClick={onClick}
-    >
-      <Icon className='w-4 h-4 text-gray-500'></Icon>
-      <div className='ml-1 text-xs font-medium text-gray-700'>{text}</div>
-    </div>
-  )
-}
+const genIcon = (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.6665 1.33332C3.6665 0.965133 3.36803 0.666656 2.99984 0.666656C2.63165 0.666656 2.33317 0.965133 2.33317 1.33332V2.33332H1.33317C0.964981 2.33332 0.666504 2.6318 0.666504 2.99999C0.666504 3.36818 0.964981 3.66666 1.33317 3.66666H2.33317V4.66666C2.33317 5.03485 2.63165 5.33332 2.99984 5.33332C3.36803 5.33332 3.6665 5.03485 3.6665 4.66666V3.66666H4.6665C5.03469 3.66666 5.33317 3.36818 5.33317 2.99999C5.33317 2.6318 5.03469 2.33332 4.6665 2.33332H3.6665V1.33332Z" fill="white" />
+    <path d="M3.6665 11.3333C3.6665 10.9651 3.36803 10.6667 2.99984 10.6667C2.63165 10.6667 2.33317 10.9651 2.33317 11.3333V12.3333H1.33317C0.964981 12.3333 0.666504 12.6318 0.666504 13C0.666504 13.3682 0.964981 13.6667 1.33317 13.6667H2.33317V14.6667C2.33317 15.0348 2.63165 15.3333 2.99984 15.3333C3.36803 15.3333 3.6665 15.0348 3.6665 14.6667V13.6667H4.6665C5.03469 13.6667 5.33317 13.3682 5.33317 13C5.33317 12.6318 5.03469 12.3333 4.6665 12.3333H3.6665V11.3333Z" fill="white" />
+    <path d="M9.28873 1.76067C9.18971 1.50321 8.94235 1.33332 8.6665 1.33332C8.39066 1.33332 8.1433 1.50321 8.04427 1.76067L6.88815 4.76658C6.68789 5.28727 6.62495 5.43732 6.53887 5.55838C6.4525 5.67986 6.34637 5.78599 6.2249 5.87236C6.10384 5.95844 5.95379 6.02137 5.43309 6.22164L2.42718 7.37776C2.16972 7.47678 1.99984 7.72414 1.99984 7.99999C1.99984 8.27584 2.16972 8.5232 2.42718 8.62222L5.43309 9.77834C5.95379 9.97861 6.10384 10.0415 6.2249 10.1276C6.34637 10.214 6.4525 10.3201 6.53887 10.4416C6.62495 10.5627 6.68789 10.7127 6.88816 11.2334L8.04427 14.2393C8.1433 14.4968 8.39066 14.6667 8.6665 14.6667C8.94235 14.6667 9.18971 14.4968 9.28873 14.2393L10.4449 11.2334C10.6451 10.7127 10.7081 10.5627 10.7941 10.4416C10.8805 10.3201 10.9866 10.214 11.1081 10.1276C11.2292 10.0415 11.3792 9.97861 11.8999 9.77834L14.9058 8.62222C15.1633 8.5232 15.3332 8.27584 15.3332 7.99999C15.3332 7.72414 15.1633 7.47678 14.9058 7.37776L11.8999 6.22164C11.3792 6.02137 11.2292 5.95844 11.1081 5.87236C10.9866 5.78599 10.8805 5.67986 10.7941 5.55838C10.7081 5.43732 10.6451 5.28727 10.4449 4.76658L9.28873 1.76067Z" fill="white" />
+  </svg>
+)
 
 const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   mode,
   isShow,
   onClose,
-  isInLLMNode,
+  // appId,
   onFinished,
 }) => {
   const { t } = useTranslation()
 
-  const tryList = [
-    {
-      icon: RiTerminalBoxLine,
-      key: 'pythonDebugger',
-    },
-    {
-      icon: RiTranslate,
-      key: 'translation',
-    },
-    {
-      icon: RiPresentationLine,
-      key: 'meetingTakeaways',
-    },
-    {
-      icon: RiNewspaperLine,
-      key: 'writingsPolisher',
-    },
-    {
-      icon: RiUser2Line,
-      key: 'professionalAnalyst',
-    },
-    {
-      icon: RiFileExcel2Line,
-      key: 'excelFormulaExpert',
-    },
-    {
-      icon: RiRoadMapLine,
-      key: 'travelPlanning',
-    },
-    {
-      icon: RiDatabase2Line,
-      key: 'SQLSorcerer',
-    },
-    {
-      icon: RiGitCommitLine,
-      key: 'GitGud',
-    },
-  ]
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
 
-  const [instruction, setInstruction] = React.useState<string>('')
-  const handleChooseTemplate = useCallback((key: string) => {
-    return () => {
-      const template = t(`appDebug.generate.template.${key}.instruction`)
-      setInstruction(template)
-    }
-  }, [t])
+  const [audiences, setAudiences] = React.useState<string>('')
+  const [hopingToSolve, setHopingToSolve] = React.useState<string>('')
   const isValid = () => {
-    if (instruction.trim() === '') {
+    if (audiences.trim() === '') {
       Toast.notify({
         type: 'error',
-        message: t('common.errorMsg.fieldRequired', {
-          field: t('appDebug.generate.instruction'),
-        }),
+        message: t('appDebug.automatic.audiencesRequired'),
+      })
+      return false
+    }
+    if (hopingToSolve.trim() === '') {
+      Toast.notify({
+        type: 'error',
+        message: t('appDebug.automatic.problemRequired'),
       })
       return false
     }
@@ -128,17 +76,14 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   const renderLoading = (
     <div className='w-0 grow flex flex-col items-center justify-center h-full space-y-3'>
       <Loading />
-      <div className='text-[13px] text-gray-400'>{t('appDebug.generate.loading')}</div>
+      <div className='text-[13px] text-gray-400'>{t('appDebug.automatic.loading')}</div>
     </div>
   )
 
   const renderNoData = (
     <div className='w-0 grow flex flex-col items-center px-8 justify-center h-full space-y-3'>
-      <Generator className='w-14 h-14 text-gray-300' />
-      <div className='leading-5 text-center text-[13px] font-normal text-gray-400'>
-        <div>{t('appDebug.generate.noDataLine1')}</div>
-        <div>{t('appDebug.generate.noDataLine2')}</div>
-      </div>
+      {noDataIcon}
+      <div className='text-[13px] text-gray-400'>{t('appDebug.automatic.noData')}</div>
     </div>
   )
 
@@ -150,7 +95,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     setLoadingTrue()
     try {
       const res = await generateRule({
-        instruction,
+        audiences,
+        hoping_to_solve: hopingToSolve,
       })
       setRes(res)
     }
@@ -161,7 +107,24 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
 
   const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false)
 
+  const isShowAutoPromptInput = () => {
+    if (isMobile) {
+      // hide prompt panel on mobile if it is loading or has had result
+      if (isLoading || res)
+        return false
+      return true
+    }
+
+    // always display prompt panel on desktop mode
+    return true
+  }
+
   const isShowAutoPromptResPlaceholder = () => {
+    if (isMobile) {
+      // hide placeholder panel on mobile
+      return false
+    }
+
     return !isLoading && !res
   }
 
@@ -169,96 +132,75 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     <Modal
       isShow={isShow}
       onClose={onClose}
-      className='!p-0 min-w-[1140px]'
+      className='!p-0 sm:min-w-[768px] xl:min-w-[1120px]'
       closable
     >
-      <div className='flex h-[680px] flex-wrap'>
-        <div className='w-[570px] shrink-0 p-6 h-full overflow-y-auto border-r border-gray-100'>
-          <div className='mb-8'>
-            <div className={`leading-[28px] text-lg font-bold ${s.textGradient}`}>{t('appDebug.generate.title')}</div>
-            <div className='mt-1 text-[13px] font-normal text-gray-500'>{t('appDebug.generate.description')}</div>
-          </div>
-          <div >
-            <div className='flex items-center'>
-              <div className='mr-3 shrink-0 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>{t('appDebug.generate.tryIt')}</div>
-              <div className='grow h-px' 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 className='flex h-[680px] flex-wrap gap-y-4 overflow-y-auto'>
+        {isShowAutoPromptInput() && <div className='w-full sm:w-[360px] xl:w-[480px] shrink-0 px-8 py-6 h-full overflow-y-auto border-r border-gray-100'>
+          <div>
+            <div className='mb-1 text-xl font-semibold text-primary-600'>{t('appDebug.automatic.title')}</div>
+            <div className='text-[13px] font-normal text-gray-500'>{t('appDebug.automatic.description')}</div>
           </div>
           {/* inputs */}
-          <div className='mt-6'>
-            <div className='text-[0px]'>
-              <div className='mb-2 leading-5 text-sm font-medium text-gray-900'>{t('appDebug.generate.instruction')}</div>
-              <textarea className="w-full h-[200px] overflow-y-auto px-3 py-2 text-sm bg-gray-50 rounded-lg" placeholder={t('appDebug.generate.instructionPlaceHolder') as string} value={instruction} onChange={e => setInstruction(e.target.value)} />
+          <div className='mt-2 space-y-5'>
+            <div className='space-y-2'>
+              <div className='text-[13px] font-medium text-gray-900'>{t('appDebug.automatic.intendedAudience')}</div>
+              <input className="w-full h-8 px-3 text-[13px] font-normal bg-gray-50 rounded-lg" placeholder={t('appDebug.automatic.intendedAudiencePlaceHolder') as string} value={audiences} onChange={e => setAudiences(e.target.value)} />
+            </div>
+            <div className='space-y-2'>
+              <div className='text-[13px] font-medium text-gray-900'>{t('appDebug.automatic.solveProblem')}</div>
+              <textarea className="w-full h-[200px] overflow-y-auto p-3 text-[13px] font-normal bg-gray-50 rounded-lg" placeholder={t('appDebug.automatic.solveProblemPlaceHolder') as string} value={hopingToSolve} onChange={e => setHopingToSolve(e.target.value)} />
             </div>
 
-            <div className='mt-5 flex justify-end'>
+            <div className='mt-6 flex justify-end'>
               <Button
-                className='flex space-x-1'
+                className='flex space-x-2'
                 variant='primary'
                 onClick={onGenerate}
                 disabled={isLoading}
               >
-                <Generator className='w-4 h-4 text-white' />
-                <span className='text-xs font-semibold text-white'>{t('appDebug.generate.generate')}</span>
+                {genIcon}
+                <span className='text-xs font-semibold text-white uppercase'>{t('appDebug.automatic.generate')}</span>
               </Button>
             </div>
           </div>
-        </div>
+        </div>}
 
         {(!isLoading && res) && (
-          <div className='w-0 grow p-6 pb-0 h-full'>
-            <div className='shrink-0 mb-3 leading-[160%] text-base font-semibold text-gray-800'>{t('appDebug.generate.resTitle')}</div>
-            <div className='max-h-[560px] pb-2 overflow-y-auto'>
-              <ConfigPrompt
-                mode={mode}
-                promptTemplate={res?.prompt || ''}
-                promptVariables={[]}
-                readonly
-                noTitle={isInLLMNode}
-                gradientBorder
-                editorHeight={isInLLMNode ? 524 : 0}
-              />
-              {!isInLLMNode && (
-                <>
-                  {(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')} />
-                      <OpeningStatement
-                        value={res?.opening_statement || ''}
-                        readonly
-                      />
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
+          <div className='w-0 grow px-8 pt-6 h-full overflow-y-auto'>
+            <div className='mb-4 text-lg font-medium text-gray-900'>{t('appDebug.automatic.resTitle')}</div>
+
+            <ConfigPrompt
+              mode={mode}
+              promptTemplate={res?.prompt || ''}
+              promptVariables={[]}
+              readonly
+            />
+
+            {(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')} />
+                <OpeningStatement
+                  value={res?.opening_statement || ''}
+                  readonly
+                />
+              </div>
+            )}
 
-            <div className='flex justify-end py-4 pr-6 bg-white'>
+            <div className='sticky bottom-0 flex justify-end right-0 py-4 bg-white'>
               <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
               <Button variant='primary' className='ml-2' onClick={() => {
                 setShowConfirmOverwrite(true)
-              }}>{t('appDebug.generate.apply')}</Button>
+              }}>{t('appDebug.automatic.apply')}</Button>
             </div>
           </div>
         )}
@@ -266,8 +208,8 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         {isShowAutoPromptResPlaceholder() && renderNoData}
         {showConfirmOverwrite && (
           <Confirm
-            title={t('appDebug.generate.overwriteTitle')}
-            content={t('appDebug.generate.overwriteMessage')}
+            title={t('appDebug.automatic.overwriteTitle')}
+            content={t('appDebug.automatic.overwriteMessage')}
             isShow={showConfirmOverwrite}
             onClose={() => setShowConfirmOverwrite(false)}
             onConfirm={() => {

web/app/components/app/configuration/config/automatic/style.module.css

@@ -1,7 +0,0 @@
-.textGradient {
-  background: linear-gradient(92deg, #2250F2 -29.55%, #0EBCF3 75.22%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  text-fill-color: transparent;
-}

web/app/components/base/icons/assets/vender/other/generator.svg

@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.5" d="M10.5402 2.95679L10.5402 2.95685C10.4455 3.05146 10.3424 3.13459 10.2314 3.2072C10.3429 3.27923 10.4468 3.36165 10.5422 3.45535L10.5402 2.95679ZM10.5402 2.95679C10.6348 2.86217 10.718 2.75907 10.7906 2.64807C10.8626 2.75955 10.945 2.86339 11.0387 2.95881L11.0388 2.95888C11.1304 3.05224 11.2302 3.13482 11.3377 3.20717C11.2297 3.27895 11.1292 3.36081 11.0367 3.45327L11.0366 3.45333C10.9442 3.5458 10.8623 3.64635 10.7905 3.75431M10.5402 2.95679L10.7905 3.75431M10.7905 3.75431C10.7182 3.64686 10.6356 3.54707 10.5422 3.45538L10.7905 3.75431Z" stroke="#155EEF" stroke-width="1.25"/>
-<path d="M6.99659 2.85105C6.96323 2.55641 6.71414 2.33368 6.41758 2.33337C6.12107 2.33307 5.87146 2.55529 5.83751 2.84987C5.67932 4.2213 5.27205 5.16213 4.6339 5.80028C3.99575 6.43841 3.05492 6.84569 1.68349 7.00389C1.3889 7.03784 1.16669 7.28745 1.16699 7.58396C1.1673 7.88052 1.39002 8.12961 1.68467 8.16297C3.03291 8.31569 3.99517 8.72292 4.64954 9.36546C5.30035 10.0045 5.71535 10.944 5.83593 12.3017C5.86271 12.6029 6.11523 12.8337 6.41763 12.8334C6.72009 12.833 6.97209 12.6016 6.99817 12.3003C7.11367 10.9656 7.52836 10.005 8.18344 9.34982C8.83858 8.69474 9.79922 8.28005 11.1339 8.16455C11.4352 8.13847 11.6666 7.88647 11.667 7.58402C11.6673 7.28162 11.4365 7.02909 11.1353 7.00232C9.77758 6.88174 8.83812 6.46676 8.19908 5.81592C7.55653 5.16155 7.14931 4.19929 6.99659 2.85105Z" fill="#155EEF"/>
-</svg>

web/app/components/base/icons/src/vender/other/Generator.json

@@ -1,37 +0,0 @@
-{
-	"icon": {
-		"type": "element",
-		"isRootNode": true,
-		"name": "svg",
-		"attributes": {
-			"width": "14",
-			"height": "14",
-			"viewBox": "0 0 14 14",
-			"fill": "none",
-			"xmlns": "http://www.w3.org/2000/svg"
-		},
-		"children": [
-			{
-				"type": "element",
-				"name": "path",
-				"attributes": {
-					"opacity": "0.5",
-					"d": "M10.5402 2.95679L10.5402 2.95685C10.4455 3.05146 10.3424 3.13459 10.2314 3.2072C10.3429 3.27923 10.4468 3.36165 10.5422 3.45535L10.5402 2.95679ZM10.5402 2.95679C10.6348 2.86217 10.718 2.75907 10.7906 2.64807C10.8626 2.75955 10.945 2.86339 11.0387 2.95881L11.0388 2.95888C11.1304 3.05224 11.2302 3.13482 11.3377 3.20717C11.2297 3.27895 11.1292 3.36081 11.0367 3.45327L11.0366 3.45333C10.9442 3.5458 10.8623 3.64635 10.7905 3.75431M10.5402 2.95679L10.7905 3.75431M10.7905 3.75431C10.7182 3.64686 10.6356 3.54707 10.5422 3.45538L10.7905 3.75431Z",
-					"stroke": "currentColor",
-					"stroke-width": "1.25"
-				},
-				"children": []
-			},
-			{
-				"type": "element",
-				"name": "path",
-				"attributes": {
-					"d": "M6.99659 2.85105C6.96323 2.55641 6.71414 2.33368 6.41758 2.33337C6.12107 2.33307 5.87146 2.55529 5.83751 2.84987C5.67932 4.2213 5.27205 5.16213 4.6339 5.80028C3.99575 6.43841 3.05492 6.84569 1.68349 7.00389C1.3889 7.03784 1.16669 7.28745 1.16699 7.58396C1.1673 7.88052 1.39002 8.12961 1.68467 8.16297C3.03291 8.31569 3.99517 8.72292 4.64954 9.36546C5.30035 10.0045 5.71535 10.944 5.83593 12.3017C5.86271 12.6029 6.11523 12.8337 6.41763 12.8334C6.72009 12.833 6.97209 12.6016 6.99817 12.3003C7.11367 10.9656 7.52836 10.005 8.18344 9.34982C8.83858 8.69474 9.79922 8.28005 11.1339 8.16455C11.4352 8.13847 11.6666 7.88647 11.667 7.58402C11.6673 7.28162 11.4365 7.02909 11.1353 7.00232C9.77758 6.88174 8.83812 6.46676 8.19908 5.81592C7.55653 5.16155 7.14931 4.19929 6.99659 2.85105Z",
-					"fill": "currentColor"
-				},
-				"children": []
-			}
-		]
-	},
-	"name": "Generator"
-}

web/app/components/base/icons/src/vender/other/Generator.tsx

@@ -1,16 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import data from './Generator.json'
-import IconBase from '@/app/components/base/icons/IconBase'
-import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
-
-const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
-  props,
-  ref,
-) => <IconBase {...props} ref={ref} data={data as IconData} />)
-
-Icon.displayName = 'Generator'
-
-export default Icon

web/app/components/base/icons/src/vender/other/index.ts

@@ -1 +0,0 @@
-export { default as Generator } from './Generator'

web/app/components/base/icons/src/vender/solid/general/QuestionTriangle.json

@@ -33,7 +33,7 @@
 						"attributes": {
 							"d": "M6.96353 1.5547C7.40657 0.890144 6.93018 0 6.13148 0H0V12L6.96353 1.5547Z",
 							"fill": "currentColor",
-							"fill-opacity": "0.5"
+							"fill-opacity": "0"
 						},
 						"children": []
 					}

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -16,7 +16,6 @@ import type {
 
 import Wrap from '../editor/wrap'
 import { CodeLanguage } from '../../../code/types'
-import PromptGeneratorBtn from '../../../llm/components/prompt-generator-btn'
 import cn from '@/utils/classnames'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
@@ -56,8 +55,6 @@ type Props = {
   }
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
-  isSupportPromptGenerator?: boolean
-  onGenerated?: (prompt: string) => void
   // for jinja
   isSupportJinja?: boolean
   editionType?: EditionType
@@ -83,13 +80,11 @@ const Editor: FC<Props> = ({
   hasSetBlockStatus,
   nodesOutputVars,
   availableNodes = [],
-  isSupportPromptGenerator,
   isSupportJinja,
   editionType,
   onEditionTypeChange,
   varList = [],
   handleAddVariable,
-  onGenerated,
 }) => {
   const { t } = useTranslation()
   const { eventEmitter } = useEventEmitterContextContext()
@@ -129,10 +124,6 @@ const Editor: FC<Props> = ({
             <div className='leading-4 text-xs font-semibold text-gray-700 uppercase'>{title}</div>
             <div className='flex items-center'>
               <div className='leading-[18px] text-xs font-medium text-gray-500'>{value?.length || 0}</div>
-              {isSupportPromptGenerator && (
-                <PromptGeneratorBtn className='ml-[5px]' onGenerated={onGenerated} />
-              )}
-
               <div className='w-px h-3 ml-2 mr-2 bg-gray-200'></div>
               {/* Operations */}
               <div className='flex items-center space-x-2'>

web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx

@@ -1,12 +1,11 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { uniqueId } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
 import { RiQuestionLine } from '@remixicon/react'
 import type { PromptItem, Variable } from '../../../types'
 import { EditionType } from '../../../types'
-import { useWorkflowStore } from '../../../store'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
@@ -79,20 +78,11 @@ const ConfigPromptItem: FC<Props> = ({
   handleAddVariable,
 }) => {
   const { t } = useTranslation()
-  const workflowStore = useWorkflowStore()
-  const {
-    setControlPromptEditorRerenderKey,
-  } = workflowStore.getState()
   const [instanceId, setInstanceId] = useState(uniqueId())
   useEffect(() => {
     setInstanceId(`${id}-${uniqueId()}`)
   }, [id])
 
-  const handleGenerated = useCallback((prompt: string) => {
-    onPromptChange(prompt)
-    setTimeout(() => setControlPromptEditorRerenderKey(Date.now()))
-  }, [onPromptChange, setControlPromptEditorRerenderKey])
-
   return (
     <Editor
       className={className}
@@ -136,8 +126,6 @@ const ConfigPromptItem: FC<Props> = ({
       hasSetBlockStatus={hasSetBlockStatus}
       nodesOutputVars={availableVars}
       availableNodes={availableNodes}
-      isSupportPromptGenerator={payload.role === PromptRole.system}
-      onGenerated={handleGenerated}
       isSupportJinja
       editionType={payload.edition_type}
       onEditionTypeChange={onEditionTypeChange}

web/app/components/workflow/nodes/llm/components/config-prompt.tsx

@@ -8,7 +8,6 @@ import { v4 as uuid4 } from 'uuid'
 import type { PromptItem, ValueSelector, Var, Variable } from '../../../types'
 import { EditionType, PromptRole } from '../../../types'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
-import { useWorkflowStore } from '../../../store'
 import ConfigPromptItem from './config-prompt-item'
 import cn from '@/utils/classnames'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
@@ -49,10 +48,6 @@ const ConfigPrompt: FC<Props> = ({
   handleAddVariable,
 }) => {
   const { t } = useTranslation()
-  const workflowStore = useWorkflowStore()
-  const {
-    setControlPromptEditorRerenderKey,
-  } = workflowStore.getState()
   const payloadWithIds = (isChatModel && Array.isArray(payload))
     ? payload.map((item) => {
       const id = uuid4()
@@ -129,11 +124,6 @@ const ConfigPrompt: FC<Props> = ({
     onChange(newPrompt)
   }, [onChange, payload])
 
-  const handleGenerated = useCallback((prompt: string) => {
-    handleCompletionPromptChange(prompt)
-    setTimeout(() => setControlPromptEditorRerenderKey(Date.now()))
-  }, [handleCompletionPromptChange, setControlPromptEditorRerenderKey])
-
   const handleCompletionEditionTypeChange = useCallback((editionType: EditionType) => {
     const newPrompt = produce(payload as PromptItem, (draft) => {
       draft.edition_type = editionType
@@ -201,8 +191,10 @@ const ConfigPrompt: FC<Props> = ({
                           handleAddVariable={handleAddVariable}
                         />
                       </div>
+
                     )
                   })
+
                 }
               </ReactSortable>
             </div>
@@ -227,13 +219,11 @@ const ConfigPrompt: FC<Props> = ({
               hasSetBlockStatus={hasSetBlockStatus}
               nodesOutputVars={availableVars}
               availableNodes={availableNodesWithParent}
-              isSupportPromptGenerator
               isSupportJinja
               editionType={(payload as PromptItem).edition_type}
               varList={varList}
               onEditionTypeChange={handleCompletionEditionTypeChange}
               handleAddVariable={handleAddVariable}
-              onGenerated={handleGenerated}
             />
           </div>
         )}

web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx

@@ -1,42 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useCallback } from 'react'
-import { useBoolean } from 'ahooks'
-import cn from 'classnames'
-import { Generator } from '@/app/components/base/icons/src/vender/other'
-import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
-import { AppType } from '@/types/app'
-import type { AutomaticRes } from '@/service/debug'
-type Props = {
-  className?: string
-  onGenerated?: (prompt: string) => void
-}
-
-const PromptGeneratorBtn: FC<Props> = ({
-  className,
-  onGenerated,
-}) => {
-  const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
-  const handleAutomaticRes = useCallback((res: AutomaticRes) => {
-    onGenerated?.(res.prompt)
-    showAutomaticFalse()
-  }, [onGenerated, showAutomaticFalse])
-  return (
-    <div className={cn(className)}>
-      <div className='p-[5px] rounded-md hover:bg-[#155EEF]/8 cursor-pointer' onClick={showAutomaticTrue}>
-        <Generator className='w-3.5 h-3.5 text-primary-600' />
-      </div>
-      {showAutomatic && (
-        <GetAutomaticResModal
-          mode={AppType.chat}
-          isShow={showAutomatic}
-          onClose={showAutomaticFalse}
-          onFinished={handleAutomaticRes}
-          isInLLMNode
-        />
-      )}
-    </div>
-  )
-}
-
-export default React.memo(PromptGeneratorBtn)

web/i18n/de-DE/app-debug.ts

@@ -24,7 +24,7 @@ const translation = {
     resetConfig: 'Zurücksetzen',
     debugConfig: 'Debuggen',
     addFeature: 'Funktion hinzufügen',
-    automatic: 'Generieren',
+    automatic: 'Automatisch',
     stopResponding: 'Antworten stoppen',
     agree: 'gefällt mir',
     disagree: 'gefällt mir nicht',
@@ -199,6 +199,23 @@ const translation = {
       },
     },
   },
+  automatic: {
+    title: 'Automatisierte Anwendungsorchestrierung',
+    description: 'Beschreiben Sie Ihr Szenario, Dify wird eine Anwendung für Sie orchestrieren.',
+    intendedAudience: 'Wer ist die Zielgruppe?',
+    intendedAudiencePlaceHolder: 'z.B. Student',
+    solveProblem: 'Welche Probleme hoffen sie, dass KI für sie lösen kann?',
+    solveProblemPlaceHolder: 'z.B. Erkenntnisse extrahieren und Informationen aus langen Berichten und Artikeln zusammenfassen',
+    generate: 'Generieren',
+    audiencesRequired: 'Zielgruppe erforderlich',
+    problemRequired: 'Problem erforderlich',
+    resTitle: 'Wir haben die folgende Anwendung für Sie orchestriert.',
+    apply: 'Diese Orchestrierung anwenden',
+    noData: 'Beschreiben Sie Ihren Anwendungsfall links, die Orchestrierungsvorschau wird hier angezeigt.',
+    loading: 'Orchestrieren der Anwendung für Sie...',
+    overwriteTitle: 'Bestehende Konfiguration überschreiben?',
+    overwriteMessage: 'Das Anwenden dieser Orchestrierung wird die bestehende Konfiguration überschreiben.',
+  },
   resetConfig: {
     title: 'Zurücksetzen bestätigen?',
     message:

web/i18n/en-US/app-debug.ts

@@ -24,7 +24,7 @@ const translation = {
     resetConfig: 'Reset',
     debugConfig: 'Debug',
     addFeature: 'Add Feature',
-    automatic: 'Generate',
+    automatic: 'Automatic',
     stopResponding: 'Stop responding',
     agree: 'like',
     disagree: 'dislike',
@@ -199,58 +199,22 @@ const translation = {
       },
     },
   },
-  generate: {
-    title: 'Prompt Generator',
-    description: 'The prompt generator can convert input task instructions into high-quality, structured prompts. Please write clear and specific instructions as much detail as possible. The quality of the generated prompts depends on the inference model you choose.',
-    tryIt: 'Try it',
-    instruction: 'Instructions',
-    instructionPlaceHolder: 'Write clear and specific instructions.',
+  automatic: {
+    title: 'Automated application orchestration',
+    description: 'Describe your scenario, Dify will orchestrate an application for you.',
+    intendedAudience: 'Who is the intended audience?',
+    intendedAudiencePlaceHolder: 'e.g. Student',
+    solveProblem: 'What problems do they hope AI can solve for them?',
+    solveProblemPlaceHolder: 'e.g. Extract insights and summarize information from long reports and articles',
     generate: 'Generate',
-    resTitle: 'Generated Prompt',
-    noDataLine1: 'Describe your use case on the left,',
-    noDataLine2: 'the orchestration preview will show here.',
-    apply: 'Apply',
+    audiencesRequired: 'Audiences required',
+    problemRequired: 'Problem required',
+    resTitle: 'We have orchestrated the following application for you.',
+    apply: 'Apply this orchestration',
+    noData: 'Describe your use case on the left, the orchestration preview will show here.',
     loading: 'Orchestrating the application for you...',
     overwriteTitle: 'Override existing configuration?',
-    overwriteMessage: 'Applying this prompt will override existing configuration.',
-    template: {
-      pythonDebugger: {
-        name: 'Python debugger',
-        instruction: 'A bot that can generate and debug your code based on your instruction',
-      },
-      translation: {
-        name: 'Translation',
-        instruction: 'A translator that can translate multiple languages',
-      },
-      professionalAnalyst: {
-        name: 'Professional analyst',
-        instruction: 'Extract insights, identify risk and distill key information from long reports into single memo',
-      },
-      excelFormulaExpert: {
-        name: 'Excel formula expert',
-        instruction: 'A chatbot that can help novice users understand, use and create Excel formulas based on user instructions',
-      },
-      travelPlanning: {
-        name: 'Travel planning',
-        instruction: 'The Travel Planning Assistant is an intelligent tool designed to help users effortlessly plan their trips',
-      },
-      SQLSorcerer: {
-        name: 'SQL sorcerer',
-        instruction: 'Transform everyday language into SQL queries',
-      },
-      GitGud: {
-        name: 'Git gud',
-        instruction: 'Generate appropriate Git commands based on user described version control actions',
-      },
-      meetingTakeaways: {
-        name: 'Meeting takeaways',
-        instruction: 'Distill meetings into concise summaries including discussion topics, key takeaways, and action items',
-      },
-      writingsPolisher: {
-        name: 'Writing polisher',
-        instruction: 'Use advanced copyediting techniques to improve your writings',
-      },
-    },
+    overwriteMessage: 'Applying this orchestration will override existing configuration.',
   },
   resetConfig: {
     title: 'Confirm reset?',

web/i18n/fr-FR/app-debug.ts

@@ -24,7 +24,7 @@ const translation = {
     resetConfig: 'Réinitialiser',
     debugConfig: 'Déboguer',
     addFeature: 'Ajouter une fonctionnalité',
-    automatic: 'Générer',
+    automatic: 'Automatique',
     stopResponding: 'Arrêtez de répondre',
     agree: 'comme',
     disagree: 'déteste',
@@ -199,6 +199,23 @@ const translation = {
       },
     },
   },
+  automatic: {
+    title: 'Orchestration automatique d\'application',
+    description: 'Décrivez votre scénario, Dify orchestrera une application pour vous.',
+    intendedAudience: 'Qui est le public cible ?',
+    intendedAudiencePlaceHolder: 'par exemple. Étudiant',
+    solveProblem: 'Quels problèmes espèrent-ils que l\'IA peut résoudre pour eux ?',
+    solveProblemPlaceHolder: 'par exemple, Évaluation des performances académiques',
+    generate: 'Générer',
+    audiencesRequired: 'Audiences requises',
+    problemRequired: 'Problème requis',
+    resTitle: 'Nous avons orchestré l\'application suivante pour vous.',
+    apply: 'Appliquez cette orchestration',
+    noData: 'Décrivez votre cas d\'utilisation sur la gauche, l\'aperçu de l\'orchestration s\'affichera ici.',
+    loading: 'Orchestration de l\'application pour vous...',
+    overwriteTitle: 'Remplacer la configuration existante ?',
+    overwriteMessage: 'L\'application de cette orchestration remplacera la configuration existante.',
+  },
   resetConfig: {
     title: 'Confirmer la réinitialisation ?',
     message:

web/i18n/ja-JP/app-debug.ts

@@ -202,6 +202,23 @@ const translation = {
     },
 
   },
+  automatic: {
+    title: '自動アプリケーションオーケストレーション',
+    description: 'シナリオを説明してください。Difyがアプリケーションをあなたのためにオーケストレートします。',
+    intendedAudience: '誰が想定されるターゲットですか？',
+    intendedAudiencePlaceHolder: '例：学生',
+    solveProblem: 'どのような問題をAIが解決できると期待していますか？',
+    solveProblemPlaceHolder: '例：学業成績の評価',
+    generate: '生成',
+    audiencesRequired: 'ターゲットが必要です',
+    problemRequired: '問題が必要です',
+    resTitle: '次のアプリケーションをあなたのためにオーケストレートしました。',
+    apply: 'このオーケストレーションを適用する',
+    noData: '左側にユースケースを記述し、オーケストレーションプレビューがここに表示されます。',
+    loading: 'アプリケーションのオーケストレーションを実行しています...',
+    overwriteTitle: '既存の構成を上書きしますか？',
+    overwriteMessage: 'このオーケストレーションを適用すると、既存の構成が上書きされます。',
+  },
   resetConfig: {
     title: 'リセットを確認しますか？',
     message: '変更が破棄され、最後に公開された構成が復元されます。',

web/i18n/zh-Hans/app-debug.ts

@@ -24,7 +24,7 @@ const translation = {
     resetConfig: '重置',
     debugConfig: '调试',
     addFeature: '添加功能',
-    automatic: '生成',
+    automatic: '自动编排',
     stopResponding: '停止响应',
     agree: '赞同',
     disagree: '反对',
@@ -199,59 +199,22 @@ const translation = {
       },
     },
   },
-  generate: {
-    title: '提示生成器',
-    description: '提示生成器可以将输入的任务指令转换为高质量、结构化的提示。请尽可能详细地编写清晰、具体的指令。生成的提示的质量取决于您选择的推理模型。',
-    tryIt: '试一试',
-    instruction: '指令',
-    instructionPlaceHolder: '写下清晰、具体的说明。',
+  automatic: {
+    title: '自动编排',
+    description: '描述您的场景，Dify 将为您编排一个应用。',
+    intendedAudience: '目标用户是谁？',
+    intendedAudiencePlaceHolder: '例如：学生',
+    solveProblem: '希望 AI 为他们解决什么问题？',
+    solveProblemPlaceHolder: '例如：评估学业水平',
     generate: '生成',
-    resTitle: '生成的提示词',
-    noDataLine1: '在左侧描述您的用例，',
-    noDataLine2: '编排预览将在此处显示。',
+    audiencesRequired: '目标用户必填',
+    problemRequired: '解决问题必填',
+    resTitle: '我们为您编排了以下应用程序',
     apply: '应用',
     noData: '在左侧描述您的用例，编排预览将在此处显示。',
     loading: '为您编排应用程序中…',
     overwriteTitle: '覆盖现有配置？',
-    overwriteMessage: '应用此提示将覆盖现有配置。',
-    template: {
-      pythonDebugger: {
-        name: 'Python 代码助手',
-        instruction: '一个帮你写和纠错程序的机器人',
-      },
-      translation: {
-        name: '翻译机器人',
-        instruction: '一个可以翻译多种语言的翻译器',
-      },
-      professionalAnalyst: {
-        name: '职业分析师',
-        instruction: ' 从长篇报告中提取洞察、识别风险并提炼关键信息',
-      },
-      excelFormulaExpert: {
-        name: 'Excel 公式专家',
-        instruction: '一个可以让小白用户理解、使用和创建 Excel 公式的对话机器人',
-      },
-      travelPlanning: {
-        name: '旅行规划助手',
-        instruction: '旅行规划助手是一个智能工具，旨在帮助用户轻松规划他们的旅行',
-      },
-      SQLSorcerer: {
-        name: 'SQL 生成',
-        instruction: '把自然语言转换成 SQL 查询语句',
-      },
-      GitGud: {
-        name: 'Git 大师',
-        instruction: '从用户提出的版本管理需求生成合适的 Git 命令',
-      },
-      meetingTakeaways: {
-        name: '总结会议纪要',
-        instruction: '将会议内容提炼总结，包括讨论主题、关键要点和待办事项',
-      },
-      writingsPolisher: {
-        name: '润色文章',
-        instruction: '用地道的编辑技巧改进我的文章',
-      },
-    },
+    overwriteMessage: '应用此编排将覆盖现有配置。',
   },
   resetConfig: {
     title: '确认重置？',

web/i18n/zh-Hant/app-debug.ts

@@ -24,7 +24,7 @@ const translation = {
     resetConfig: '重置',
     debugConfig: '除錯',
     addFeature: '新增功能',
-    automatic: '產生',
+    automatic: '自動編排',
     stopResponding: '停止響應',
     agree: '贊同',
     disagree: '反對',
@@ -199,6 +199,23 @@ const translation = {
       },
     },
   },
+  automatic: {
+    title: '自動編排',
+    description: '描述您的場景，Dify 將為您編排一個應用。',
+    intendedAudience: '目標使用者是誰？',
+    intendedAudiencePlaceHolder: '例如：學生',
+    solveProblem: '希望 AI 為他們解決什麼問題？',
+    solveProblemPlaceHolder: '例如：評估學業水平',
+    generate: '生成',
+    audiencesRequired: '目標使用者必填',
+    problemRequired: '解決問題必填',
+    resTitle: '我們為您編排了以下應用程式',
+    apply: '應用',
+    noData: '在左側描述您的用例，編排預覽將在此處顯示。',
+    loading: '為您編排應用程式中…',
+    overwriteTitle: '覆蓋現有配置？',
+    overwriteMessage: '應用此編排將覆蓋現有配置。',
+  },
   resetConfig: {
     title: '確認重置？',
     message: '重置將丟失當前頁面所有修改，恢復至上次釋出時的配置',