Feat/auto rule generate (#300)

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

@@ -2,29 +2,28 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Panel from '../base/feature-panel'
-import Tooltip from '@/app/components/base/tooltip'
-import type { PromptVariable } from '@/models/debug'
 import { Cog8ToothIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { useBoolean } from 'ahooks'
+import Panel from '../base/feature-panel'
+import OperationBtn from '../base/operation-btn'
+import VarIcon from '../base/icons/var-icon'
 import EditModel from './config-model'
+import IconTypeIcon from './input-type-icon'
+import s from './style.module.css'
+import Tooltip from '@/app/components/base/tooltip'
+import type { PromptVariable } from '@/models/debug'
 import { DEFAULT_VALUE_MAX_LEN, getMaxVarNameLength } from '@/config'
-import { getNewVar } from '@/utils/var'
-import OperationBtn from '../base/operation-btn'
+import { checkKeys, getNewVar } from '@/utils/var'
 import Switch from '@/app/components/base/switch'
-import IconTypeIcon from './input-type-icon'
-import { checkKeys } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
 
-import s from './style.module.css'
-import VarIcon from '../base/icons/var-icon'
-
 export type IConfigVarProps = {
   promptVariables: PromptVariable[]
-  onPromptVariablesChange: (promptVariables: PromptVariable[]) => void
+  readonly?: boolean
+  onPromptVariablesChange?: (promptVariables: PromptVariable[]) => void
 }
 
-const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChange }) => {
+const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVariablesChange }) => {
   const { t } = useTranslation()
   const hasVar = promptVariables.length > 0
   const promptVariableObj = (() => {
@@ -39,16 +38,17 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
     if (!(key in promptVariableObj))
       return
     const newPromptVariables = promptVariables.map((item) => {
-      if (item.key === key)
+      if (item.key === key) {
         return {
           ...item,
-          [updateKey]: newValue
+          [updateKey]: newValue,
         }
+      }
 
       return item
     })
 
-    onPromptVariablesChange(newPromptVariables)
+    onPromptVariablesChange?.(newPromptVariables)
   }
 
   const batchUpdatePromptVariable = (key: string, updateKeys: string[], newValues: any[]) => {
@@ -66,53 +66,55 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
       return item
     })
 
-    onPromptVariablesChange(newPromptVariables)
+    onPromptVariablesChange?.(newPromptVariables)
   }
 
-
   const updatePromptKey = (index: number, newKey: string) => {
     const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
     if (!isValid) {
       Toast.notify({
         type: 'error',
-        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey })
+        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
       })
       return
     }
     const newPromptVariables = promptVariables.map((item, i) => {
-      if (i === index)
+      if (i === index) {
         return {
           ...item,
           key: newKey,
         }
+      }
 
       return item
     })
 
-    onPromptVariablesChange(newPromptVariables)
+    onPromptVariablesChange?.(newPromptVariables)
   }
 
   const updatePromptNameIfNameEmpty = (index: number, newKey: string) => {
-    if (!newKey) return
+    if (!newKey)
+      return
     const newPromptVariables = promptVariables.map((item, i) => {
-      if (i === index && !item.name)
+      if (i === index && !item.name) {
         return {
           ...item,
           name: newKey,
         }
+      }
       return item
     })
 
-    onPromptVariablesChange(newPromptVariables)
+    onPromptVariablesChange?.(newPromptVariables)
   }
 
   const handleAddVar = () => {
     const newVar = getNewVar('')
-    onPromptVariablesChange([...promptVariables, newVar])
+    onPromptVariablesChange?.([...promptVariables, newVar])
   }
 
   const handleRemoveVar = (index: number) => {
-    onPromptVariablesChange(promptVariables.filter((_, i) => i !== index))
+    onPromptVariablesChange?.(promptVariables.filter((_, i) => i !== index))
   }
 
   const [currKey, setCurrKey] = useState<string | null>(null)
@@ -132,16 +134,18 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
       title={
         <div className='flex items-center gap-2'>
           <div>{t('appDebug.variableTitle')}</div>
-          <Tooltip htmlContent={<div className='w-[180px]'>
-            {t('appDebug.variableTip')}
-          </div>} selector='config-var-tooltip'>
-            <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M8.66667 11.1667H8V8.5H7.33333M8 5.83333H8.00667M14 8.5C14 9.28793 13.8448 10.0681 13.5433 10.7961C13.2417 11.5241 12.7998 12.1855 12.2426 12.7426C11.6855 13.2998 11.0241 13.7417 10.2961 14.0433C9.56815 14.3448 8.78793 14.5 8 14.5C7.21207 14.5 6.43185 14.3448 5.7039 14.0433C4.97595 13.7417 4.31451 13.2998 3.75736 12.7426C3.20021 12.1855 2.75825 11.5241 2.45672 10.7961C2.15519 10.0681 2 9.28793 2 8.5C2 6.9087 2.63214 5.38258 3.75736 4.25736C4.88258 3.13214 6.4087 2.5 8 2.5C9.5913 2.5 11.1174 3.13214 12.2426 4.25736C13.3679 5.38258 14 6.9087 14 8.5Z" stroke="#9CA3AF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          </Tooltip>
+          {!readonly && (
+            <Tooltip htmlContent={<div className='w-[180px]'>
+              {t('appDebug.variableTip')}
+            </div>} selector='config-var-tooltip'>
+              <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8.66667 11.1667H8V8.5H7.33333M8 5.83333H8.00667M14 8.5C14 9.28793 13.8448 10.0681 13.5433 10.7961C13.2417 11.5241 12.7998 12.1855 12.2426 12.7426C11.6855 13.2998 11.0241 13.7417 10.2961 14.0433C9.56815 14.3448 8.78793 14.5 8 14.5C7.21207 14.5 6.43185 14.3448 5.7039 14.0433C4.97595 13.7417 4.31451 13.2998 3.75736 12.7426C3.20021 12.1855 2.75825 11.5241 2.45672 10.7961C2.15519 10.0681 2 9.28793 2 8.5C2 6.9087 2.63214 5.38258 3.75736 4.25736C4.88258 3.13214 6.4087 2.5 8 2.5C9.5913 2.5 11.1174 3.13214 12.2426 4.25736C13.3679 5.38258 14 6.9087 14 8.5Z" stroke="#9CA3AF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </Tooltip>
+          )}
         </div>
       }
-      headerRight={<OperationBtn type="add" onClick={handleAddVar} />}
+      headerRight={!readonly ? <OperationBtn type="add" onClick={handleAddVar} /> : null}
     >
       {!hasVar && (
         <div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.notSetVar')}</div>
@@ -153,8 +157,13 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
               <tr className='uppercase'>
                 <td>{t('appDebug.variableTable.key')}</td>
                 <td>{t('appDebug.variableTable.name')}</td>
-                <td>{t('appDebug.variableTable.optional')}</td>
-                <td>{t('appDebug.variableTable.action')}</td>
+                {!readonly && (
+                  <>
+                    <td>{t('appDebug.variableTable.optional')}</td>
+                    <td>{t('appDebug.variableTable.action')}</td>
+                  </>
+                )}
+
               </tr>
             </thead>
             <tbody className="text-gray-700">
@@ -163,42 +172,57 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
                   <td className="w-[160px] border-b border-gray-100 pl-3">
                     <div className='flex items-center space-x-1'>
                       <IconTypeIcon type={type} />
-                      <input
-                        type="text"
-                        placeholder="key"
-                        value={key}
-                        onChange={e => updatePromptKey(index, e.target.value)}
-                        onBlur={e => updatePromptNameIfNameEmpty(index, e.target.value)}
-                        maxLength={getMaxVarNameLength(name)}
-                        className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                      />
+                      {!readonly
+                        ? (
+                          <input
+                            type="text"
+                            placeholder="key"
+                            value={key}
+                            onChange={e => updatePromptKey(index, e.target.value)}
+                            onBlur={e => updatePromptNameIfNameEmpty(index, e.target.value)}
+                            maxLength={getMaxVarNameLength(name)}
+                            className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+                          />
+                        )
+                        : (
+                          <div className='h-6 leading-6 text-[13px] text-gray-700'>{key}</div>
+                        )}
                     </div>
                   </td>
                   <td className="py-1 border-b border-gray-100">
-                    <input
-                      type="text"
-                      placeholder={key}
-                      value={name}
-                      onChange={e => updatePromptVariable(key, 'name', e.target.value)}
-                      maxLength={getMaxVarNameLength(name)}
-                      className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                    />
-                  </td>
-                  <td className='w-[84px] border-b border-gray-100'>
-                    <div className='flex items-center h-full'>
-                      <Switch defaultValue={!required} size='md' onChange={(value) => updatePromptVariable(key, 'required', !value)} />
-                    </div>
-                  </td>
-                  <td className='w-20  border-b border-gray-100'>
-                    <div className='flex h-full items-center space-x-1'>
-                      <div className='flex items-center justify-items-center w-6 h-6 text-gray-500 cursor-pointer' onClick={() => handleConfig(key)}>
-                        <Cog8ToothIcon width={16} height={16} />
-                      </div>
-                      <div className='flex items-center justify-items-center w-6 h-6 text-gray-500 cursor-pointer' onClick={() => handleRemoveVar(index)} >
-                        <TrashIcon width={16} height={16} />
-                      </div>
-                    </div>
+                    {!readonly
+                      ? (
+                        <input
+                          type="text"
+                          placeholder={key}
+                          value={name}
+                          onChange={e => updatePromptVariable(key, 'name', e.target.value)}
+                          maxLength={getMaxVarNameLength(name)}
+                          className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+                        />)
+                      : (
+                        <div className='h-6 leading-6 text-[13px] text-gray-700'>{name}</div>
+                      )}
                   </td>
+                  {!readonly && (
+                    <>
+                      <td className='w-[84px] border-b border-gray-100'>
+                        <div className='flex items-center h-full'>
+                          <Switch defaultValue={!required} size='md' onChange={value => updatePromptVariable(key, 'required', !value)} />
+                        </div>
+                      </td>
+                      <td className='w-20  border-b border-gray-100'>
+                        <div className='flex h-full items-center space-x-1'>
+                          <div className='flex items-center justify-items-center w-6 h-6 text-gray-500 cursor-pointer' onClick={() => handleConfig(key)}>
+                            <Cog8ToothIcon width={16} height={16} />
+                          </div>
+                          <div className='flex items-center justify-items-center w-6 h-6 text-gray-500 cursor-pointer' onClick={() => handleRemoveVar(index)} >
+                            <TrashIcon width={16} height={16} />
+                          </div>
+                        </div>
+                      </td>
+                    </>
+                  )}
                 </tr>
               ))}
             </tbody>
@@ -212,11 +236,12 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
           isShow={isShowEditModal}
           onClose={hideEditModal}
           onConfirm={({ type, value }) => {
-            if (type === 'string') {
+            if (type === 'string')
               batchUpdatePromptVariable(currKey as string, ['type', 'max_length'], [type, value || DEFAULT_VALUE_MAX_LEN])
-            } else {
+
+            else
               batchUpdatePromptVariable(currKey as string, ['type', 'options'], [type, value || []])
-            }
+
             hideEditModal()
           }}
         />

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

@@ -0,0 +1,33 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+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 (
+    <Button className='flex space-x-2 items-center !h-8'
+      onClick={onClick}
+    >
+      {leftIcon}
+      <span className='text-xs font-semibold text-primary-600 uppercase'>{t('appDebug.operation.automatic')}</span>
+    </Button>
+  )
+}
+export default React.memo(AutomaticBtn)

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

@@ -0,0 +1,205 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import { generateRule } from '@/service/debug'
+import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
+import { AppType } from '@/types/app'
+import ConfigVar from '@/app/components/app/configuration/config-var'
+import OpeningStatement from '@/app/components/app/configuration/features/chat-group/opening-statement'
+import GroupName from '@/app/components/app/configuration/base/group-name'
+import Loading from '@/app/components/base/loading'
+import Confirm from '@/app/components/base/confirm'
+
+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 AutomaticRes = {
+  prompt: string
+  variables: string[]
+  opening_statement: string
+}
+
+export type IGetAutomaticResProps = {
+  mode: AppType
+  isShow: boolean
+  onClose: () => void
+  onFinished: (res: AutomaticRes) => void
+}
+
+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,
+  // appId,
+  onFinished,
+}) => {
+  const { t } = useTranslation()
+
+  const [audiences, setAudiences] = React.useState<string>('')
+  const [hopingToSolve, setHopingToSolve] = React.useState<string>('')
+  const isValid = () => {
+    if (audiences.trim() === '') {
+      Toast.notify({
+        type: 'error',
+        message: t('appDebug.automatic.audiencesRequired'),
+      })
+      return false
+    }
+    if (hopingToSolve.trim() === '') {
+      Toast.notify({
+        type: 'error',
+        message: t('appDebug.automatic.problemRequired'),
+      })
+      return false
+    }
+    return true
+  }
+  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false)
+  const [res, setRes] = React.useState<AutomaticRes | null>(null)
+
+  const renderLoading = (
+    <div className='grow flex flex-col items-center justify-center h-full space-y-3'>
+      <Loading />
+      <div className='text-[13px] text-gray-400'>{t('appDebug.automatic.loading')}</div>
+    </div>
+  )
+
+  const renderNoData = (
+    <div className='grow flex flex-col items-center justify-center h-full space-y-3'>
+      {noDataIcon}
+      <div className='text-[13px] text-gray-400'>{t('appDebug.automatic.noData')}</div>
+    </div>
+  )
+
+  const onGenerate = async () => {
+    if (!isValid())
+      return
+    if (isLoading)
+      return
+    setLoadingTrue()
+    try {
+      const res = await generateRule({
+        audiences,
+        hoping_to_solve: hopingToSolve,
+      })
+      setRes(res as AutomaticRes)
+    }
+    finally {
+      setLoadingFalse()
+    }
+  }
+
+  const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false)
+
+  return (
+    <Modal
+      isShow={isShow}
+      onClose={onClose}
+      className='min-w-[1120px] !p-0'
+      closable
+    >
+      <div className='flex h-[680px]'>
+        <div className='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-12 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-6 flex justify-end'>
+              <Button
+                className='flex space-x-2 items-center !h-8'
+                type='primary'
+                onClick={onGenerate}
+                disabled={isLoading}
+              >
+                {genIcon}
+                <span className='text-xs font-semibold text-white uppercase'>{t('appDebug.automatic.generate')}</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {(!isLoading && res) && (
+          <div className='grow px-8 pt-6 h-full overflow-y-auto'>
+            <div className='mb-4 w-1/2 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.chat && res?.opening_statement) && (
+              <div className='mt-7'>
+                <GroupName name={t('appDebug.feature.groupChat.title')} />
+                <OpeningStatement
+                  value={res?.opening_statement || ''}
+                  readonly
+                />
+              </div>
+            )}
+
+            <div className='sticky bottom-0 flex justify-end right-0 py-4'>
+              <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
+              <Button type='primary' className='ml-2' onClick={() => {
+                setShowConfirmOverwrite(true)
+              }}>{t('appDebug.automatic.apply')}</Button>
+            </div>
+          </div>
+        )}
+        {isLoading && renderLoading}
+        {(!isLoading && !res) && renderNoData}
+        {showConfirmOverwrite && (
+          <Confirm
+            title={t('appDebug.automatic.overwriteTitle')}
+            content={t('appDebug.automatic.overwriteMessage')}
+            isShow={showConfirmOverwrite}
+            onClose={() => setShowConfirmOverwrite(false)}
+            onConfirm={() => {
+              setShowConfirmOverwrite(false)
+              onFinished(res as AutomaticRes)
+            }}
+            onCancel={() => setShowConfirmOverwrite(false)}
+          />
+        )}
+      </div>
+    </Modal>
+  )
+}
+export default React.memo(GetAutomaticRes)

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

@@ -3,19 +3,22 @@ import type { FC } from 'react'
 import React from 'react'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
-import AddFeatureBtn from './feature/add-feature-btn'
-import ChooseFeature from './feature/choose-feature'
-import useFeature from './feature/use-feature'
-import ConfigContext from '@/context/debug-configuration'
+import { useBoolean } from 'ahooks'
 import DatasetConfig from '../dataset-config'
 import ChatGroup from '../features/chat-group'
 import ExperienceEnchanceGroup from '../features/experience-enchance-group'
 import Toolbox from '../toolbox'
+import AddFeatureBtn from './feature/add-feature-btn'
+import AutomaticBtn from './automatic/automatic-btn'
+import type { AutomaticRes } from './automatic/get-automatic-res'
+import GetAutomaticResModal from './automatic/get-automatic-res'
+import ChooseFeature from './feature/choose-feature'
+import useFeature from './feature/use-feature'
+import ConfigContext from '@/context/debug-configuration'
 import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
 import ConfigVar from '@/app/components/app/configuration/config-var'
 import type { PromptVariable } from '@/models/debug'
 import { AppType } from '@/types/app'
-import { useBoolean } from 'ahooks'
 
 const Config: FC = () => {
   const {
@@ -29,7 +32,7 @@ const Config: FC = () => {
     moreLikeThisConifg,
     setMoreLikeThisConifg,
     suggestedQuestionsAfterAnswerConfig,
-    setSuggestedQuestionsAfterAnswerConfig
+    setSuggestedQuestionsAfterAnswerConfig,
   } = useContext(ConfigContext)
   const isChatApp = mode === AppType.chat
 
@@ -41,9 +44,8 @@ const Config: FC = () => {
       draft.configs.prompt_variables = [...draft.configs.prompt_variables, ...newVariables]
     })
 
-    if (modelConfig.configs.prompt_template !== newTemplate) {
+    if (modelConfig.configs.prompt_template !== newTemplate)
       setFormattingChanged(true)
-    }
 
     setPrevPromptConfig(modelConfig.configs)
     setModelConfig(newModelConfig)
@@ -59,7 +61,7 @@ const Config: FC = () => {
 
   const [showChooseFeature, {
     setTrue: showChooseFeatureTrue,
-    setFalse: showChooseFeatureFalse
+    setFalse: showChooseFeatureFalse,
   }] = useBoolean(false)
   const { featureConfig, handleFeatureChange } = useFeature({
     introduction,
@@ -81,14 +83,24 @@ const Config: FC = () => {
   const hasChatConfig = isChatApp && (featureConfig.openingStatement || featureConfig.suggestedQuestionsAfterAnswer)
   const hasToolbox = false
 
+  const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
+  const handleAutomaticRes = (res: AutomaticRes) => {
+    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 }))
+    })
+    setModelConfig(newModelConfig)
+    setPrevPromptConfig(modelConfig.configs)
+    if (mode === AppType.chat)
+      setIntroduction(res.opening_statement)
+    showAutomaticFalse()
+  }
   return (
     <>
       <div className="pb-[20px]">
         <div className='flex justify-between items-center mb-4'>
           <AddFeatureBtn onClick={showChooseFeatureTrue} />
-          <div>
-            {/* AutoMatic */}
-          </div>
+          <AutomaticBtn onClick={showAutomaticTrue}/>
         </div>
 
         {showChooseFeature && (
@@ -100,6 +112,14 @@ const Config: FC = () => {
             onChange={handleFeatureChange}
           />
         )}
+        {showAutomatic && (
+          <GetAutomaticResModal
+            mode={mode as AppType}
+            isShow={showAutomatic}
+            onClose={showAutomaticFalse}
+            onFinished={handleAutomaticRes}
+          />
+        )}
         {/* Template */}
         <ConfigPrompt
           mode={mode as AppType}
@@ -124,9 +144,8 @@ const Config: FC = () => {
               isShowOpeningStatement={featureConfig.openingStatement}
               openingStatementConfig={
                 {
-                  promptTemplate,
                   value: introduction,
-                  onChange: setIntroduction
+                  onChange: setIntroduction,
                 }
               }
               isShowSuggestedQuestionsAfterAnswer={featureConfig.suggestedQuestionsAfterAnswer}
@@ -139,7 +158,6 @@ const Config: FC = () => {
           <ExperienceEnchanceGroup />
         )}
 
-
         {/* Toolbox */}
         {
           hasToolbox && (

web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx

@@ -17,9 +17,9 @@ import { getNewVar } from '@/utils/var'
 import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
 
 export type IOpeningStatementProps = {
-  promptTemplate: string
   value: string
-  onChange: (value: string) => void
+  readonly?: boolean
+  onChange?: (value: string) => void
 }
 
 // regex to match the {{}} and replace it with a span
@@ -27,6 +27,7 @@ const regex = /\{\{([^}]+)\}\}/g
 
 const OpeningStatement: FC<IOpeningStatementProps> = ({
   value = '',
+  readonly,
   onChange,
 }) => {
   const { t } = useTranslation()
@@ -64,6 +65,8 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
     .replace(/\n/g, '<br />')
 
   const handleEdit = () => {
+    if (readonly)
+      return
     setFocus()
   }
 
@@ -93,11 +96,11 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
       return
     }
     setBlur()
-    onChange(tempValue)
+    onChange?.(tempValue)
   }
 
   const cancelAutoAddVar = () => {
-    onChange(tempValue)
+    onChange?.(tempValue)
     hideConfirmAddVar()
     setBlur()
   }
@@ -106,15 +109,15 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
     const newModelConfig = produce(modelConfig, (draft) => {
       draft.configs.prompt_variables = [...draft.configs.prompt_variables, ...notIncludeKeys.map(key => getNewVar(key))]
     })
-    onChange(tempValue)
+    onChange?.(tempValue)
     setModelConfig(newModelConfig)
     hideConfirmAddVar()
     setBlur()
   }
 
-  const headerRight = (
+  const headerRight = !readonly ? (
     <OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpner') as string} onClick={handleEdit} />
-  )
+  ) : null
 
   return (
     <Panel
@@ -130,30 +133,28 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
       isFocus={isFocus}
     >
       <div className='text-gray-700 text-sm'>
-        {(hasValue || (!hasValue && isFocus))
-          ? (
-            <>
-              {isFocus
-                ? (
-                  <textarea
-                    ref={inputRef}
-                    value={tempValue}
-                    rows={3}
-                    onChange={e => setTempValue(e.target.value)}
-                    className="w-full px-0 text-sm  border-0 bg-transparent  focus:outline-none "
-                    placeholder={t('appDebug.openingStatement.placeholder') as string}
-                  >
-                  </textarea>
-                )
-                : (
-                  <div dangerouslySetInnerHTML={{
-                    __html: coloredContent,
-                  }}></div>
-                )}
-
-              {/* Operation Bar */}
-              {isFocus
-            && (
+        {(hasValue || (!hasValue && isFocus)) ? (
+          <>
+            {isFocus
+              ? (
+                <textarea
+                  ref={inputRef}
+                  value={tempValue}
+                  rows={3}
+                  onChange={e => setTempValue(e.target.value)}
+                  className="w-full px-0 text-sm  border-0 bg-transparent  focus:outline-none "
+                  placeholder={t('appDebug.openingStatement.placeholder') as string}
+                >
+                </textarea>
+              )
+              : (
+                <div dangerouslySetInnerHTML={{
+                  __html: coloredContent,
+                }}></div>
+              )}
+
+            {/* Operation Bar */}
+            {isFocus && (
               <div className='mt-2 flex items-center justify-between'>
                 <div className='text-xs text-gray-500'>{t('appDebug.openingStatement.varTip')}</div>
 
@@ -164,9 +165,9 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
               </div>
             )}
 
-            </>) : (
-            <div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.openingStatement.noDataPlaceHolder')}</div>
-          )}
+          </>) : (
+          <div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.openingStatement.noDataPlaceHolder')}</div>
+        )}
 
         {isShowConfirmAddVar && (
           <ConfirmAddVar

web/app/components/base/block-input/index.tsx

@@ -33,12 +33,14 @@ export type IBlockInputProps = {
   value: string
   className?: string // wrapper class
   highLightClassName?: string // class for the highlighted text default is text-blue-500
+  readonly?: boolean
   onConfirm?: (value: string, keys: string[]) => void
 }
 
 const BlockInput: FC<IBlockInputProps> = ({
   value = '',
   className,
+  readonly = false,
   onConfirm,
 }) => {
   const { t } = useTranslation()
@@ -113,7 +115,7 @@ const BlockInput: FC<IBlockInputProps> = ({
   const editAreaClassName = 'focus:outline-none bg-transparent text-sm'
 
   const textAreaContent = (
-    <div className='h-[180px] overflow-y-auto' onClick={() => setIsEditing(true)}>
+    <div className={classNames(readonly ? 'max-h-[180px] pb-5' : 'h-[180px]', ' overflow-y-auto')} onClick={() => !readonly && setIsEditing(true)}>
       {isEditing
         ? <div className='h-full px-4 py-1'>
           <textarea
@@ -141,35 +143,37 @@ const BlockInput: FC<IBlockInputProps> = ({
     <div className={classNames('block-input w-full overflow-y-auto border-none rounded-lg')}>
       {textAreaContent}
       {/* footer */}
-      <div className='flex item-center h-14 px-4'>
-        {isContentChanged
-          ? (
-            <div className='flex items-center justify-between w-full'>
-              <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue.length}</div>
-              <div className='flex space-x-2'>
-                <Button
-                  onClick={handleCancel}
-                  className='w-20 !h-8 !text-[13px]'
-                >
-                  {t('common.operation.cancel')}
-                </Button>
-                <Button
-                  onClick={handleSubmit}
-                  type="primary"
-                  className='w-20 !h-8 !text-[13px]'
-                >
-                  {t('common.operation.confirm')}
-                </Button>
-              </div>
+      {!readonly && (
+        <div className='flex item-center h-14 px-4'>
+          {isContentChanged
+            ? (
+              <div className='flex items-center justify-between w-full'>
+                <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue?.length}</div>
+                <div className='flex space-x-2'>
+                  <Button
+                    onClick={handleCancel}
+                    className='w-20 !h-8 !text-[13px]'
+                  >
+                    {t('common.operation.cancel')}
+                  </Button>
+                  <Button
+                    onClick={handleSubmit}
+                    type="primary"
+                    className='w-20 !h-8 !text-[13px]'
+                  >
+                    {t('common.operation.confirm')}
+                  </Button>
+                </div>
 
-            </div>
-          )
-          : (
-            <p className="leading-5 text-xs text-gray-500">
-              {t('appDebug.promptTip')}
-            </p>
-          )}
-      </div>
+              </div>
+            )
+            : (
+              <p className="leading-5 text-xs text-gray-500">
+                {t('appDebug.promptTip')}
+              </p>
+            )}
+        </div>
+      )}
 
     </div>
   )

web/app/components/datasets/create/step-two/index.tsx

@@ -1,36 +1,36 @@
+/* eslint-disable no-mixed-operators */
 'use client'
-import React, { useState, useRef, useEffect, useLayoutEffect } from 'react'
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import type { File, PreProcessingRule, Rules, FileIndexingEstimateResponse as IndexingEstimateResponse } from '@/models/datasets'
+import { XMarkIcon } from '@heroicons/react/20/solid'
+import cn from 'classnames'
+import Link from 'next/link'
+import PreviewItem from './preview-item'
+import s from './index.module.css'
+import type { CreateDocumentReq, File, FullDocumentDetail, FileIndexingEstimateResponse as IndexingEstimateResponse, PreProcessingRule, Rules, createDocumentResponse } from '@/models/datasets'
 import {
-  fetchDefaultProcessRule,
-  createFirstDocument,
   createDocument,
+  createFirstDocument,
   fetchFileIndexingEstimate as didFetchFileIndexingEstimate,
+  fetchDefaultProcessRule,
 } from '@/service/datasets'
-import type { CreateDocumentReq, createDocumentResponse, FullDocumentDetail } from '@/models/datasets'
 import Button from '@/app/components/base/button'
-import PreviewItem from './preview-item'
 import Loading from '@/app/components/base/loading'
-import { XMarkIcon } from '@heroicons/react/20/solid'
 
-import cn from 'classnames'
-import s from './index.module.css'
-import Link from 'next/link'
 import Toast from '@/app/components/base/toast'
 import { formatNumber } from '@/utils/format'
 
 type StepTwoProps = {
-  isSetting?: boolean,
+  isSetting?: boolean
   documentDetail?: FullDocumentDetail
-  hasSetAPIKEY: boolean,
-  onSetting: () => void,
-  datasetId?: string,
-  indexingType?: string,
-  file?: File,
-  onStepChange?: (delta: number) => void,
-  updateIndexingTypeCache?: (type: string) => void,
+  hasSetAPIKEY: boolean
+  onSetting: () => void
+  datasetId?: string
+  indexingType?: string
+  file?: File
+  onStepChange?: (delta: number) => void
+  updateIndexingTypeCache?: (type: string) => void
   updateResultCache?: (res: createDocumentResponse) => void
   onSave?: () => void
   onCancel?: () => void
@@ -71,8 +71,10 @@ const StepTwo = ({
   const [defaultConfig, setDefaultConfig] = useState<Rules>()
   const hasSetIndexType = !!indexingType
   const [indexType, setIndexType] = useState<IndexingType>(
-    indexingType ||
-      hasSetAPIKEY ? IndexingType.QUALIFIED : IndexingType.ECONOMICAL
+    indexingType
+      || hasSetAPIKEY
+      ? IndexingType.QUALIFIED
+      : IndexingType.ECONOMICAL,
   )
   const [showPreview, { setTrue: setShowPreview, setFalse: hidePreview }] = useBoolean()
   const [customFileIndexingEstimate, setCustomFileIndexingEstimate] = useState<IndexingEstimateResponse | null>(null)
@@ -82,19 +84,19 @@ const StepTwo = ({
   })()
 
   const scrollHandle = (e: any) => {
-    if (e.target.scrollTop > 0) {
+    if (e.target.scrollTop > 0)
       setScrolled(true)
-    } else {
+
+    else
       setScrolled(false)
-    }
   }
 
   const previewScrollHandle = (e: any) => {
-    if (e.target.scrollTop > 0) {
+    if (e.target.scrollTop > 0)
       setPreviewScrolled(true)
-    } else {
+
+    else
       setPreviewScrolled(false)
-    }
   }
   const getFileName = (name: string) => {
     const arr = name.split('.')
@@ -102,18 +104,17 @@ const StepTwo = ({
   }
 
   const getRuleName = (key: string) => {
-    if (key === 'remove_extra_spaces') {
+    if (key === 'remove_extra_spaces')
       return t('datasetCreation.stepTwo.removeExtraSpaces')
-    }
-    if (key === 'remove_urls_emails') {
+
+    if (key === 'remove_urls_emails')
       return t('datasetCreation.stepTwo.removeUrlEmails')
-    }
-    if (key === 'remove_stopwords') {
+
+    if (key === 'remove_stopwords')
       return t('datasetCreation.stepTwo.removeStopwords')
-    }
   }
   const ruleChangeHandle = (id: string) => {
-    const newRules = rules.map(rule => {
+    const newRules = rules.map((rule) => {
       if (rule.id === id) {
         return {
           id: rule.id,
@@ -132,13 +133,23 @@ const StepTwo = ({
     }
   }
 
+  const fetchFileIndexingEstimate = async () => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    const res = await didFetchFileIndexingEstimate(getFileIndexingEstimateParams())
+    if (segmentationType === SegmentType.CUSTOM)
+      setCustomFileIndexingEstimate(res)
+
+    else
+      setAutomaticFileIndexingEstimate(res)
+  }
+
   const confirmChangeCustomConfig = async () => {
     setCustomFileIndexingEstimate(null)
     setShowPreview()
     await fetchFileIndexingEstimate()
   }
 
-  const getIndexing_technique = () => indexingType ? indexingType : indexType
+  const getIndexing_technique = () => indexingType || indexType
 
   const getProcessRule = () => {
     const processRule: any = {
@@ -168,16 +179,6 @@ const StepTwo = ({
     return params
   }
 
-  const fetchFileIndexingEstimate = async () => {
-    const res = await didFetchFileIndexingEstimate(getFileIndexingEstimateParams())
-    if (segmentationType === SegmentType.CUSTOM) {
-      setCustomFileIndexingEstimate(res)
-    }
-    else {
-      setAutomaticFileIndexingEstimate(res)
-    }
-  }
-
   const getCreationParams = () => {
     let params
     if (isSetting) {
@@ -185,7 +186,8 @@ const StepTwo = ({
         original_document_id: documentDetail?.id,
         process_rule: getProcessRule(),
       } as CreateDocumentReq
-    } else {
+    }
+    else {
       params = {
         data_source: {
           type: 'upload_file',
@@ -226,25 +228,25 @@ const StepTwo = ({
   }
 
   const getDefaultMode = () => {
-    if (documentDetail) {
+    if (documentDetail)
       setSegmentationType(documentDetail.dataset_process_rule.mode)
-    }
   }
 
   const createHandle = async () => {
     try {
-      let res;
+      let res
       const params = getCreationParams()
       if (!datasetId) {
         res = await createFirstDocument({
-          body: params
+          body: params,
         })
         updateIndexingTypeCache && updateIndexingTypeCache(indexType)
         updateResultCache && updateResultCache(res)
-      } else {
+      }
+      else {
         res = await createDocument({
           datasetId,
-          body: params
+          body: params,
         })
         updateIndexingTypeCache && updateIndexingTypeCache(indexType)
         updateResultCache && updateResultCache({
@@ -257,7 +259,7 @@ const StepTwo = ({
     catch (err) {
       Toast.notify({
         type: 'error',
-        message: err + '',
+        message: `${err}`,
       })
     }
   }
@@ -266,35 +268,36 @@ const StepTwo = ({
     // fetch rules
     if (!isSetting) {
       getRules()
-    } else {
+    }
+    else {
       getRulesFromDetail()
       getDefaultMode()
     }
   }, [])
 
   useEffect(() => {
-    scrollRef.current?.addEventListener('scroll', scrollHandle);
+    scrollRef.current?.addEventListener('scroll', scrollHandle)
     return () => {
-      scrollRef.current?.removeEventListener('scroll', scrollHandle);
+      scrollRef.current?.removeEventListener('scroll', scrollHandle)
     }
   }, [])
 
   useLayoutEffect(() => {
     if (showPreview) {
-      previewScrollRef.current?.addEventListener('scroll', previewScrollHandle);
+      previewScrollRef.current?.addEventListener('scroll', previewScrollHandle)
       return () => {
-        previewScrollRef.current?.removeEventListener('scroll', previewScrollHandle);
+        previewScrollRef.current?.removeEventListener('scroll', previewScrollHandle)
       }
     }
   }, [showPreview])
 
   useEffect(() => {
     // get indexing type by props
-    if (indexingType) {
+    if (indexingType)
       setIndexType(indexingType as IndexingType)
-    } else {
+
+    else
       setIndexType(hasSetAPIKEY ? IndexingType.QUALIFIED : IndexingType.ECONOMICAL)
-    }
   }, [hasSetAPIKEY, indexingType, datasetId])
 
   useEffect(() => {
@@ -302,7 +305,8 @@ const StepTwo = ({
       setAutomaticFileIndexingEstimate(null)
       setShowPreview()
       fetchFileIndexingEstimate()
-    } else {
+    }
+    else {
       hidePreview()
       setCustomFileIndexingEstimate(null)
     }
@@ -320,7 +324,7 @@ const StepTwo = ({
               className={cn(
                 s.radioItem,
                 s.segmentationItem,
-                segmentationType === SegmentType.AUTO && s.active
+                segmentationType === SegmentType.AUTO && s.active,
               )}
               onClick={() => setSegmentationType(SegmentType.AUTO)}
             >
@@ -355,7 +359,7 @@ const StepTwo = ({
                         type="text"
                         className={s.input}
                         placeholder={t('datasetCreation.stepTwo.separatorPlaceholder') || ''} value={segmentIdentifier}
-                        onChange={(e) => setSegmentIdentifier(e.target.value)}
+                        onChange={e => setSegmentIdentifier(e.target.value)}
                       />
                     </div>
                   </div>
@@ -366,7 +370,7 @@ const StepTwo = ({
                         type="number"
                         className={s.input}
                         placeholder={t('datasetCreation.stepTwo.separatorPlaceholder') || ''} value={max}
-                        onChange={(e) => setMax(Number(e.target.value))}
+                        onChange={e => setMax(Number(e.target.value))}
                       />
                     </div>
                   </div>
@@ -403,9 +407,8 @@ const StepTwo = ({
                     hasSetIndexType && '!w-full',
                   )}
                   onClick={() => {
-                    if (hasSetAPIKEY) {
+                    if (hasSetAPIKEY)
                       setIndexType(IndexingType.QUALIFIED)
-                    }
                   }}
                 >
                   <span className={cn(s.typeIcon, s.qualified)} />
@@ -418,11 +421,13 @@ const StepTwo = ({
                     <div className={s.tip}>{t('datasetCreation.stepTwo.qualifiedTip')}</div>
                     <div className='pb-0.5 text-xs font-medium text-gray-500'>{t('datasetCreation.stepTwo.emstimateCost')}</div>
                     {
-                      !!fileIndexingEstimate ? (
-                        <div className='text-xs font-medium text-gray-800'>{formatNumber(fileIndexingEstimate.tokens)} tokens(<span className='text-yellow-500'>${formatNumber(fileIndexingEstimate.total_price)}</span>)</div>
-                      ) : (
-                        <div className={s.calculating}>{t('datasetCreation.stepTwo.calculating')}</div>
-                      )
+                      fileIndexingEstimate
+                        ? (
+                          <div className='text-xs font-medium text-gray-800'>{formatNumber(fileIndexingEstimate.tokens)} tokens(<span className='text-yellow-500'>${formatNumber(fileIndexingEstimate.total_price)}</span>)</div>
+                        )
+                        : (
+                          <div className={s.calculating}>{t('datasetCreation.stepTwo.calculating')}</div>
+                        )
                     }
                   </div>
                   {!hasSetAPIKEY && (
@@ -434,7 +439,6 @@ const StepTwo = ({
                 </div>
               )}
 
-
               {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && (
                 <div
                   className={cn(
@@ -476,51 +480,58 @@ const StepTwo = ({
                 <div className='mb-2 text-xs font-medium text-gray-500'>{t('datasetCreation.stepTwo.emstimateSegment')}</div>
                 <div className='flex items-center text-sm leading-6 font-medium text-gray-800'>
                   {
-                    !!fileIndexingEstimate ? (
-                      <div className='text-xs font-medium text-gray-800'>{formatNumber(fileIndexingEstimate.total_segments)} </div>
-                    ) : (
-                      <div className={s.calculating}>{t('datasetCreation.stepTwo.calculating')}</div>
-                    )
+                    fileIndexingEstimate
+                      ? (
+                        <div className='text-xs font-medium text-gray-800'>{formatNumber(fileIndexingEstimate.total_segments)} </div>
+                      )
+                      : (
+                        <div className={s.calculating}>{t('datasetCreation.stepTwo.calculating')}</div>
+                      )
                   }
                 </div>
               </div>
             </div>
-            {!isSetting ? (
-              <div className='flex items-center mt-8 py-2'>
-                <Button onClick={() => onStepChange && onStepChange(-1)}>{t('datasetCreation.stepTwo.lastStep')}</Button>
-                <div className={s.divider} />
-                <Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
-              </div>
-            ) : (
-              <div className='flex items-center mt-8 py-2'>
-                <Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
-                <Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
-              </div>
-            )}
+            {!isSetting
+              ? (
+                <div className='flex items-center mt-8 py-2'>
+                  <Button onClick={() => onStepChange && onStepChange(-1)}>{t('datasetCreation.stepTwo.lastStep')}</Button>
+                  <div className={s.divider} />
+                  <Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
+                </div>
+              )
+              : (
+                <div className='flex items-center mt-8 py-2'>
+                  <Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
+                  <Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
+                </div>
+              )}
           </div>
         </div>
       </div>
-      {(showPreview) ? (
-        <div ref={previewScrollRef} className={cn(s.previewWrap, 'relativeh-full overflow-y-scroll border-l border-[#F2F4F7]')}>
-          <div className={cn(s.previewHeader, previewScrolled && `${s.fixed} pb-3`, ' flex items-center justify-between px-8')}>
-            <span>{t('datasetCreation.stepTwo.previewTitle')}</span>
-            <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
-              <XMarkIcon className='h-4 w-4'></XMarkIcon>
+      {(showPreview)
+        ? (
+          <div ref={previewScrollRef} className={cn(s.previewWrap, 'relativeh-full overflow-y-scroll border-l border-[#F2F4F7]')}>
+            <div className={cn(s.previewHeader, previewScrolled && `${s.fixed} pb-3`, ' flex items-center justify-between px-8')}>
+              <span>{t('datasetCreation.stepTwo.previewTitle')}</span>
+              <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
+                <XMarkIcon className='h-4 w-4'></XMarkIcon>
+              </div>
+            </div>
+            <div className='my-4 px-8 space-y-4'>
+              {fileIndexingEstimate?.preview
+                ? (
+                  <>
+                    {fileIndexingEstimate?.preview.map((item, index) => (
+                      <PreviewItem key={item} content={item} index={index + 1} />
+                    ))}
+                  </>
+                )
+                : <div className='flex items-center justify-center h-[200px]'><Loading type='area'></Loading></div>
+              }
             </div>
           </div>
-          <div className='my-4 px-8 space-y-4'>
-            {fileIndexingEstimate?.preview ? (
-              <>
-                {fileIndexingEstimate?.preview.map((item, index) => (
-                  <PreviewItem key={item} content={item} index={index + 1} />
-                ))}
-              </>
-            ) : <div className='flex items-center justify-center h-[200px]'><Loading type='area'></Loading></div>
-            }
-          </div>
-        </div>
-      ) :
-        (<div className={cn(s.sideTip)}>
+        )
+        : (<div className={cn(s.sideTip)}>
           <div className={s.tipCard}>
             <span className={s.icon} />
             <div className={s.title}>{t('datasetCreation.stepTwo.sideTipTitle')}</div>

web/app/components/datasets/documents/detail/settings/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useState, useCallback, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import { useContext } from 'use-context-selector'
@@ -7,7 +7,8 @@ import { useRouter } from 'next/navigation'
 import DatasetDetailContext from '@/context/dataset-detail'
 import type { FullDocumentDetail } from '@/models/datasets'
 import { fetchTenantInfo } from '@/service/common'
-import { fetchDocumentDetail, MetadataType } from '@/service/datasets'
+import type { MetadataType } from '@/service/datasets'
+import { fetchDocumentDetail } from '@/service/datasets'
 
 import Loading from '@/app/components/base/loading'
 import StepTwo from '@/app/components/datasets/create/step-two'
@@ -15,8 +16,8 @@ import AccountSetting from '@/app/components/header/account-setting'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 
 type DocumentSettingsProps = {
-  datasetId: string;
-  documentId: string;
+  datasetId: string
+  documentId: string
 }
 
 const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
@@ -48,18 +49,18 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
         const detail = await fetchDocumentDetail({
           datasetId,
           documentId,
-          params: { metadata: 'without' as MetadataType }
+          params: { metadata: 'without' as MetadataType },
         })
         setDocumentDetail(detail)
-      } catch (e) {
+      }
+      catch (e) {
         setHasError(true)
       }
     })()
   }, [datasetId, documentId])
 
-  if (hasError) {
+  if (hasError)
     return <AppUnavailable code={500} unknownReason={t('datasetCreation.error.unavailable') as string} />
-  }
 
   return (
     <div className='flex' style={{ height: 'calc(100vh - 56px)' }}>

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

@@ -1,16 +1,17 @@
 const translation = {
-  pageTitle: "Prompt Engineering",
+  pageTitle: 'Prompt Engineering',
   operation: {
-    applyConfig: "Publish",
-    resetConfig: "Reset",
-    addFeature: "Add Feature",
-    stopResponding: "Stop responding",
+    applyConfig: 'Publish',
+    resetConfig: 'Reset',
+    addFeature: 'Add Feature',
+    automatic: 'Automatic',
+    stopResponding: 'Stop responding',
   },
   notSetAPIKey: {
-    title: "LLM provider key has not been set",
-    trailFinished: "Trail finished",
-    description: "The LLM provider key has not been set, and it needs to be set before debugging.",
-    settingBtn: "Go to settings",
+    title: 'LLM provider key has not been set',
+    trailFinished: 'Trail finished',
+    description: 'The LLM provider key has not been set, and it needs to be set before debugging.',
+    settingBtn: 'Go to settings',
   },
   trailUseGPT4Info: {
     title: 'Does not support gpt-4 now',
@@ -19,14 +20,14 @@ const translation = {
   feature: {
     groupChat: {
       title: 'Chat enhance',
-      description: 'Add pre-conversation settings for apps can enhance user experience.'
+      description: 'Add pre-conversation settings for apps can enhance user experience.',
     },
     groupExperience: {
       title: 'Experience enhance',
     },
     conversationOpener: {
-      title: "Conversation remakers",
-      description: "In a chat app, the first sentence that the AI actively speaks to the user is usually used as a welcome."
+      title: 'Conversation remakers',
+      description: 'In a chat app, the first sentence that the AI actively speaks to the user is usually used as a welcome.',
     },
     suggestedQuestionsAfterAnswer: {
       title: 'Follow-up',
@@ -35,105 +36,122 @@ const translation = {
       tryToAsk: 'Try to ask',
     },
     moreLikeThis: {
-      title: "More like this",
-      description: "Generate multiple texts at once, and then edit and continue to generate",
-      generateNumTip: "Number of each generated times",
-      tip: "Using this feature will incur additional tokens overhead"
+      title: 'More like this',
+      description: 'Generate multiple texts at once, and then edit and continue to generate',
+      generateNumTip: 'Number of each generated times',
+      tip: 'Using this feature will incur additional tokens overhead',
     },
     dataSet: {
-      title: "Context",
-      noData: "You can import datasets as context",
-      words: "Words",
-      textBlocks: "Text Blocks",
-      selectTitle: "Select reference dataset",
-      selected: "Datasets selected",
-      noDataSet: "No dataset found",
-      toCreate: "Go to create",
-      notSupportSelectMulti: 'Currently only support one dataset'
-    }
+      title: 'Context',
+      noData: 'You can import datasets as context',
+      words: 'Words',
+      textBlocks: 'Text Blocks',
+      selectTitle: 'Select reference dataset',
+      selected: 'Datasets selected',
+      noDataSet: 'No dataset found',
+      toCreate: 'Go to create',
+      notSupportSelectMulti: 'Currently only support one dataset',
+    },
+  },
+  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. Assessing academic performance',
+    generate: 'Generate',
+    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 orchestration will override existing configuration.',
   },
   resetConfig: {
-    title: "Confirm reset?",
+    title: 'Confirm reset?',
     message:
-      "Reset discards changes, restoring the last published configuration.",
+      'Reset discards changes, restoring the last published configuration.',
   },
   errorMessage: {
-    nameOfKeyRequired: "name of the key: {{key}} required",
-    valueOfVarRequired: "Variables value can not be empty",
-    queryRequired: "Request text is required.",
+    nameOfKeyRequired: 'name of the key: {{key}} required',
+    valueOfVarRequired: 'Variables value can not be empty',
+    queryRequired: 'Request text is required.',
     waitForResponse:
-      "Please wait for the response to the previous message to complete.",
+      'Please wait for the response to the previous message to complete.',
   },
-  chatSubTitle: "Pre Prompt",
-  completionSubTitle: "Prefix Prompt",
+  chatSubTitle: 'Pre Prompt',
+  completionSubTitle: 'Prefix Prompt',
   promptTip:
-    "Prompts guide AI responses with instructions and constraints. Insert variables like {{input}}. This prompt won't be visible to users.",
-  formattingChangedTitle: "Formatting changed",
+    'Prompts guide AI responses with instructions and constraints. Insert variables like {{input}}. This prompt won\'t be visible to users.',
+  formattingChangedTitle: 'Formatting changed',
   formattingChangedText:
-    "Modifying the formatting will reset the debug area, are you sure?",
-  variableTitle: "Variables",
+    'Modifying the formatting will reset the debug area, are you sure?',
+  variableTitle: 'Variables',
   variableTip:
-    "Users fill variables in a form, automatically replacing variables in the prompt.",
-  notSetVar: "Variables allow users to introduce prompt words or opening remarks when filling out forms. You can try entering \"{{input}}\" in the prompt words.",
-  autoAddVar: "Undefined variables referenced in pre-prompt, are you want to add them in user input form?",
+    'Users fill variables in a form, automatically replacing variables in the prompt.',
+  notSetVar: 'Variables allow users to introduce prompt words or opening remarks when filling out forms. You can try entering "{{input}}" in the prompt words.',
+  autoAddVar: 'Undefined variables referenced in pre-prompt, are you want to add them in user input form?',
   variableTable: {
-    key: "Variable Key",
-    name: "User Input Field Name",
-    optional: "Optional",
-    type: "Input Type",
-    action: "Actions",
-    typeString: "String",
-    typeSelect: "Select",
+    key: 'Variable Key',
+    name: 'User Input Field Name',
+    optional: 'Optional',
+    type: 'Input Type',
+    action: 'Actions',
+    typeString: 'String',
+    typeSelect: 'Select',
   },
   varKeyError: {
-    canNoBeEmpty: "Variable key can not be empty",
-    tooLong: "Variable key: {{key}} too length. Can not be longer then 16 characters",
-    notValid: "Variable key: {{key}} is invalid. Can only contain letters, numbers, and underscores",
-    notStartWithNumber: "Variable key: {{key}} can not start with a number",
+    canNoBeEmpty: 'Variable key can not be empty',
+    tooLong: 'Variable key: {{key}} too length. Can not be longer then 16 characters',
+    notValid: 'Variable key: {{key}} is invalid. Can only contain letters, numbers, and underscores',
+    notStartWithNumber: 'Variable key: {{key}} can not start with a number',
   },
   variableConig: {
-    modalTitle: "Field settings",
-    description: "Setting for variable {{varName}}",
+    modalTitle: 'Field settings',
+    description: 'Setting for variable {{varName}}',
     fieldType: 'Field type',
     string: 'Text',
     select: 'Select',
     notSet: 'Not set, try typing {{input}} in the prefix prompt',
-    stringTitle: "Form text box options",
-    maxLength: "Max length",
-    options: "Options",
-    addOption: "Add option",
+    stringTitle: 'Form text box options',
+    maxLength: 'Max length',
+    options: 'Options',
+    addOption: 'Add option',
   },
   openingStatement: {
-    title: "Opening remarks",
-    add: "Add",
-    writeOpner: "Write remarks",
-    placeholder: "Write your remarks message here",
+    title: 'Opening remarks',
+    add: 'Add',
+    writeOpner: 'Write remarks',
+    placeholder: 'Write your remarks message here',
     noDataPlaceHolder:
-      "Starting the conversation with the user can help AI establish a closer connection with them in conversational applications.",
+      'Starting the conversation with the user can help AI establish a closer connection with them in conversational applications.',
     varTip: 'You can use variables, try type {{variable}}',
-    tooShort: "At least 20 words of initial prompt are required to generate an opening remarks for the conversation.",
-    notIncludeKey: "The initial prompt does not include the variable: {{key}}. Please add it to the initial prompt.",
+    tooShort: 'At least 20 words of initial prompt are required to generate an opening remarks for the conversation.',
+    notIncludeKey: 'The initial prompt does not include the variable: {{key}}. Please add it to the initial prompt.',
   },
   modelConfig: {
-    model: "Model",
-    setTone: "Set tone of responses",
-    title: "Model and Parameters",
+    model: 'Model',
+    setTone: 'Set tone of responses',
+    title: 'Model and Parameters',
   },
   inputs: {
-    title: "Debugging and Previewing",
-    noPrompt: "Try write some prompt in pre-prompt input",
-    userInputField: "User Input Field",
-    noVar: "Fill in the value of the variable, which will be automatically replaced in the prompt word every time a new session is started.",
+    title: 'Debugging and Previewing',
+    noPrompt: 'Try write some prompt in pre-prompt input',
+    userInputField: 'User Input Field',
+    noVar: 'Fill in the value of the variable, which will be automatically replaced in the prompt word every time a new session is started.',
     chatVarTip:
-      "Fill in the value of the variable, which will be automatically replaced in the prompt word every time a new session is started",
+      'Fill in the value of the variable, which will be automatically replaced in the prompt word every time a new session is started',
     completionVarTip:
-      "Fill in the value of the variable, which will be automatically replaced in the prompt words every time a question is submitted.",
-    previewTitle: "Prompt preview",
-    queryTitle: "Query content",
-    queryPlaceholder: "Please enter the request text.",
-    run: "RUN",
+      'Fill in the value of the variable, which will be automatically replaced in the prompt words every time a question is submitted.',
+    previewTitle: 'Prompt preview',
+    queryTitle: 'Query content',
+    queryPlaceholder: 'Please enter the request text.',
+    run: 'RUN',
   },
-  result: "Output Text",
-};
+  result: 'Output Text',
+}
 
-export default translation;
+export default translation

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

@@ -1,16 +1,17 @@
 const translation = {
-  pageTitle: "提示词编排",
+  pageTitle: '提示词编排',
   operation: {
-    applyConfig: "发布",
-    resetConfig: "重置",
-    addFeature: "添加功能",
-    stopResponding: "停止响应",
+    applyConfig: '发布',
+    resetConfig: '重置',
+    addFeature: '添加功能',
+    automatic: '自动编排',
+    stopResponding: '停止响应',
   },
   notSetAPIKey: {
-    title: "LLM 提供者的密钥未设置",
-    trailFinished: "试用已结束",
-    description: "在调试之前需要设置 LLM 提供者的密钥。",
-    settingBtn: "去设置",
+    title: 'LLM 提供者的密钥未设置',
+    trailFinished: '试用已结束',
+    description: '在调试之前需要设置 LLM 提供者的密钥。',
+    settingBtn: '去设置',
   },
   trailUseGPT4Info: {
     title: '当前不支持使用 gpt-4',
@@ -19,14 +20,14 @@ const translation = {
   feature: {
     groupChat: {
       title: '聊天增强',
-      description: '为聊天型应用添加预对话设置，可以提升用户体验。'
+      description: '为聊天型应用添加预对话设置，可以提升用户体验。',
     },
     groupExperience: {
       title: '体验增强',
     },
     conversationOpener: {
-      title: "对话开场白",
-      description: "在对话型应用中，让 AI 主动说第一段话可以拉近与用户间的距离。"
+      title: '对话开场白',
+      description: '在对话型应用中，让 AI 主动说第一段话可以拉近与用户间的距离。',
     },
     suggestedQuestionsAfterAnswer: {
       title: '下一步问题建议',
@@ -35,100 +36,117 @@ const translation = {
       tryToAsk: '试着问问',
     },
     moreLikeThis: {
-      title: "更多类似的",
+      title: '更多类似的',
       description: '一次生成多条文本，可在此基础上编辑并继续生成',
-      generateNumTip: "每次生成数",
-      tip: "使用此功能将会额外消耗 tokens"
+      generateNumTip: '每次生成数',
+      tip: '使用此功能将会额外消耗 tokens',
     },
     dataSet: {
-      title: "上下文",
-      noData: "您可以导入数据集作为上下文",
-      words: "词",
-      textBlocks: "文本块",
-      selectTitle: "选择引用数据集",
-      selected: "个数据集被选中",
-      noDataSet: "未找到数据集",
-      toCreate: "去创建",
-      notSupportSelectMulti: '目前只支持引用一个数据集'
-    }
+      title: '上下文',
+      noData: '您可以导入数据集作为上下文',
+      words: '词',
+      textBlocks: '文本块',
+      selectTitle: '选择引用数据集',
+      selected: '个数据集被选中',
+      noDataSet: '未找到数据集',
+      toCreate: '去创建',
+      notSupportSelectMulti: '目前只支持引用一个数据集',
+    },
+  },
+  automatic: {
+    title: '自动编排',
+    description: '描述您的场景，Dify 将为您编排一个应用。',
+    intendedAudience: '目标用户是谁？',
+    intendedAudiencePlaceHolder: '例如：学生',
+    solveProblem: '希望 AI 为他们解决什么问题？',
+    solveProblemPlaceHolder: '例如：评估学业水平',
+    generate: '生成',
+    audiencesRequired: '目标用户必填',
+    problemRequired: '解决问题必填',
+    resTitle: '我们为您编排了以下应用程序',
+    apply: '应用',
+    noData: '在左侧描述您的用例，编排预览将在此处显示。',
+    loading: '为您编排应用程序中…',
+    overwriteTitle: '覆盖现有配置？',
+    overwriteMessage: '应用此编排将覆盖现有配置。',
   },
   resetConfig: {
-    title: "确认重置？",
-    message: "重置将丢失当前页面所有修改，恢复至上次发布时的配置",
+    title: '确认重置？',
+    message: '重置将丢失当前页面所有修改，恢复至上次发布时的配置',
   },
   errorMessage: {
-    nameOfKeyRequired: "变量 {{key}} 对应的名称必填",
-    valueOfVarRequired: "变量值必填",
-    queryRequired: "主要文本必填",
-    waitForResponse: "请等待上条信息响应完成",
+    nameOfKeyRequired: '变量 {{key}} 对应的名称必填',
+    valueOfVarRequired: '变量值必填',
+    queryRequired: '主要文本必填',
+    waitForResponse: '请等待上条信息响应完成',
   },
-  chatSubTitle: "对话前提示词",
-  completionSubTitle: "前缀提示词",
+  chatSubTitle: '对话前提示词',
+  completionSubTitle: '前缀提示词',
   promptTip:
-    "提示词用于对 AI 的回复做出一系列指令和约束。可插入表单变量，例如 {{input}}。这段提示词不会被最终用户所看到。",
-  formattingChangedTitle: "编排已改变",
-  formattingChangedText: "修改编排将重置调试区域，确定吗？",
-  variableTitle: "变量",
-  notSetVar: "变量能使用户输入表单引入提示词或开场白，你可以试试在提示词中输入输入 {{input}}",
+    '提示词用于对 AI 的回复做出一系列指令和约束。可插入表单变量，例如 {{input}}。这段提示词不会被最终用户所看到。',
+  formattingChangedTitle: '编排已改变',
+  formattingChangedText: '修改编排将重置调试区域，确定吗？',
+  variableTitle: '变量',
+  notSetVar: '变量能使用户输入表单引入提示词或开场白，你可以试试在提示词中输入输入 {{input}}',
   variableTip:
-    "变量将以表单形式让用户在对话前填写，用户填写的表单内容将自动替换提示词中的变量。",
-  autoAddVar: "提示词中引用了未定义的变量，是否自动添加到用户输入表单中？",
+    '变量将以表单形式让用户在对话前填写，用户填写的表单内容将自动替换提示词中的变量。',
+  autoAddVar: '提示词中引用了未定义的变量，是否自动添加到用户输入表单中？',
   variableTable: {
-    key: "变量 Key",
-    name: "字段名称",
-    optional: "可选",
-    type: "类型",
-    action: "操作",
-    typeString: "文本",
-    typeSelect: "下拉选项",
+    key: '变量 Key',
+    name: '字段名称',
+    optional: '可选',
+    type: '类型',
+    action: '操作',
+    typeString: '文本',
+    typeSelect: '下拉选项',
   },
   varKeyError: {
-    canNoBeEmpty: "变量不能为空",
-    tooLong: "变量: {{key}} 长度太长。不能超过 16 个字符",
-    notValid: "变量: {{key}} 非法。只能包含英文字符，数字和下划线",
-    notStartWithNumber: "变量: {{key}} 不能以数字开头",
+    canNoBeEmpty: '变量不能为空',
+    tooLong: '变量: {{key}} 长度太长。不能超过 16 个字符',
+    notValid: '变量: {{key}} 非法。只能包含英文字符，数字和下划线',
+    notStartWithNumber: '变量: {{key}} 不能以数字开头',
   },
   variableConig: {
-    modalTitle: "变量设置",
-    description: "设置变量 {{varName}}",
+    modalTitle: '变量设置',
+    description: '设置变量 {{varName}}',
     fieldType: '字段类型',
     string: '文本',
     select: '下拉选项',
     notSet: '未设置，在 Prompt 中输入 {{input}} 试试',
-    stringTitle: "文本框设置",
-    maxLength: "最大长度",
-    options: "选项",
-    addOption: "添加选项",
+    stringTitle: '文本框设置',
+    maxLength: '最大长度',
+    options: '选项',
+    addOption: '添加选项',
   },
   openingStatement: {
-    title: "对话开场白",
-    add: "添加开场白",
-    writeOpner: "编写开场白",
-    placeholder: "请在这里输入开场白",
+    title: '对话开场白',
+    add: '添加开场白',
+    writeOpner: '编写开场白',
+    placeholder: '请在这里输入开场白',
     noDataPlaceHolder:
-      "在对话型应用中，让 AI 主动说第一段话可以拉近与用户间的距离。",
+      '在对话型应用中，让 AI 主动说第一段话可以拉近与用户间的距离。',
     varTip: '你可以使用变量， 试试输入 {{variable}}',
-    tooShort: "对话前提示词至少 20 字才能生成开场白",
-    notIncludeKey: "前缀提示词中不包含变量 {{key}}。请在前缀提示词中添加该变量",
+    tooShort: '对话前提示词至少 20 字才能生成开场白',
+    notIncludeKey: '前缀提示词中不包含变量 {{key}}。请在前缀提示词中添加该变量',
   },
   modelConfig: {
-    model: "语言模型",
-    setTone: "模型设置",
-    title: "模型及参数",
+    model: '语言模型',
+    setTone: '模型设置',
+    title: '模型及参数',
   },
   inputs: {
-    title: "调试与预览",
-    noPrompt: "尝试在对话前提示框中编写一些提示词",
-    userInputField: "用户输入",
-    noVar: "填入变量的值，每次启动新会话时该变量将自动替换提示词中的变量。",
-    chatVarTip: "填入变量的值，该值将在每次开启一个新会话时自动替换到提示词中",
-    completionVarTip: "填入变量的值，该值将在每次提交问题时自动替换到提示词中",
-    previewTitle: "提示词预览",
-    queryTitle: "查询内容",
-    queryPlaceholder: "请输入文本内容",
-    run: "运行",
+    title: '调试与预览',
+    noPrompt: '尝试在对话前提示框中编写一些提示词',
+    userInputField: '用户输入',
+    noVar: '填入变量的值，每次启动新会话时该变量将自动替换提示词中的变量。',
+    chatVarTip: '填入变量的值，该值将在每次开启一个新会话时自动替换到提示词中',
+    completionVarTip: '填入变量的值，该值将在每次提交问题时自动替换到提示词中',
+    previewTitle: '提示词预览',
+    queryTitle: '查询内容',
+    queryPlaceholder: '请输入文本内容',
+    run: '运行',
   },
-  result: "结果",
-};
+  result: '结果',
+}
 
-export default translation;
+export default translation

web/i18n/lang/dataset-creation.en.ts

@@ -102,8 +102,8 @@ const translation = {
     sideTipContent: 'After the document finishes indexing, the dataset can be integrated into the application as context, you can find the context setting in the prompt orchestration page. You can also create it as an independent ChatGPT indexing plugin for release.',
     modelTitle: 'Are you sure to stop embedding?',
     modelContent: 'If you need to resume processing later, you will continue from where you left off.',
-    modelButtonConfirm: "Confirm",
-    modelButtonCancel: 'Cancel'
+    modelButtonConfirm: 'Confirm',
+    modelButtonCancel: 'Cancel',
   },
 }
 

web/i18n/lang/dataset-creation.zh.ts

@@ -101,9 +101,9 @@ const translation = {
     sideTipTitle: '接下来做什么',
     sideTipContent: '当文档完成索引处理后，数据集即可集成至应用内作为上下文使用，你可以在提示词编排页找到上下文设置。你也可以创建成可独立使用的 ChatGPT 索引插件发布。',
     modelTitle: '确认停止索引过程吗？',
-    modelContent:'如果您需要稍后恢复处理，则从停止处继续。',
-    modelButtonConfirm: "确认停止",
-    modelButtonCancel: '取消'
+    modelContent: '如果您需要稍后恢复处理，则从停止处继续。',
+    modelButtonConfirm: '确认停止',
+    modelButtonCancel: '取消',
   },
 }
 

web/service/debug.ts

@@ -1,16 +1,17 @@
-import { ssePost, get, IOnData, IOnCompleted, IOnError } from './base'
+import type { IOnCompleted, IOnData, IOnError } from './base'
+import { get, post, ssePost } from './base'
 
 export const sendChatMessage = async (appId: string, body: Record<string, any>, { onData, onCompleted, onError, getAbortController }: {
   onData: IOnData
   onCompleted: IOnCompleted
-  onError: IOnError,
+  onError: IOnError
   getAbortController?: (abortController: AbortController) => void
 }) => {
   return ssePost(`apps/${appId}/chat-messages`, {
     body: {
       ...body,
-      response_mode: 'streaming'
-    }
+      response_mode: 'streaming',
+    },
   }, { onData, onCompleted, onError, getAbortController })
 }
 
@@ -22,8 +23,8 @@ export const sendCompletionMessage = async (appId: string, body: Record<string,
   return ssePost(`apps/${appId}/completion-messages`, {
     body: {
       ...body,
-      response_mode: 'streaming'
-    }
+      response_mode: 'streaming',
+    },
   }, { onData, onCompleted, onError })
 }
 
@@ -34,7 +35,13 @@ export const fetchSuggestedQuestions = (appId: string, messageId: string) => {
 export const fetchConvesationMessages = (appId: string, conversation_id: string) => {
   return get(`apps/${appId}/chat-messages`, {
     params: {
-      conversation_id
-    }
+      conversation_id,
+    },
+  })
+}
+
+export const generateRule = (body: Record<string, any>) => {
+  return post('/rule-generate', {
+    body,
   })
 }