Feat/auto rule generate (#300)

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

 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import cn from 'classnames'
+import ConfirmAddVar from './confirm-add-var'
 import BlockInput from '@/app/components/base/block-input'
 import type { PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
 import { AppType } from '@/types/app'
 import { getNewVar } from '@/utils/var'
-import { useTranslation } from 'react-i18next'
-import { useBoolean } from 'ahooks'
-import ConfirmAddVar from './confirm-add-var'
 
 export type IPromptProps = {
   mode: AppType
   promptTemplate: string
   promptVariables: PromptVariable[]
-  onChange: (promp: string, promptVariables: PromptVariable[]) => void
+  readonly?: boolean
+  onChange?: (promp: string, promptVariables: PromptVariable[]) => void
 }
 
 const Prompt: FC<IPromptProps> = ({
   mode,
   promptTemplate,
   promptVariables,
+  readonly = false,
   onChange,
 }) => {
   const { t } = useTranslation()
@@ -45,35 +48,39 @@ const Prompt: FC<IPromptProps> = ({
       showConfirmAddVar()
       return
     }
-    onChange(newTemplates, [])
+    onChange?.(newTemplates, [])
   }
 
   const handleAutoAdd = (isAdd: boolean) => {
     return () => {
-      onChange(newTemplates, isAdd ? newPromptVariables : [])
+      onChange?.(newTemplates, isAdd ? newPromptVariables : [])
       hideConfirmAddVar()
     }
   }
 
   return (
-    <div className='relative rounded-xl border border-[#2D0DEE] bg-gray-25'>
+    <div className={cn(!readonly ? 'border border-[#2D0DEE] bg-gray-25' : 'bg-gray-50', 'relative rounded-xl')}>
       <div className="flex items-center h-11 pl-3 gap-1">
         <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fillRule="evenodd" clipRule="evenodd" d="M3.00001 0.100098C3.21218 0.100098 3.41566 0.184383 3.56569 0.334412C3.71572 0.484441 3.80001 0.687924 3.80001 0.900098V1.7001H4.60001C4.81218 1.7001 5.01566 1.78438 5.16569 1.93441C5.31572 2.08444 5.40001 2.28792 5.40001 2.5001C5.40001 2.71227 5.31572 2.91575 5.16569 3.06578C5.01566 3.21581 4.81218 3.3001 4.60001 3.3001H3.80001V4.1001C3.80001 4.31227 3.71572 4.51575 3.56569 4.66578C3.41566 4.81581 3.21218 4.9001 3.00001 4.9001C2.78783 4.9001 2.58435 4.81581 2.43432 4.66578C2.28429 4.51575 2.20001 4.31227 2.20001 4.1001V3.3001H1.40001C1.18783 3.3001 0.98435 3.21581 0.834321 3.06578C0.684292 2.91575 0.600006 2.71227 0.600006 2.5001C0.600006 2.28792 0.684292 2.08444 0.834321 1.93441C0.98435 1.78438 1.18783 1.7001 1.40001 1.7001H2.20001V0.900098C2.20001 0.687924 2.28429 0.484441 2.43432 0.334412C2.58435 0.184383 2.78783 0.100098 3.00001 0.100098ZM3.00001 8.1001C3.21218 8.1001 3.41566 8.18438 3.56569 8.33441C3.71572 8.48444 3.80001 8.68792 3.80001 8.9001V9.7001H4.60001C4.81218 9.7001 5.01566 9.78438 5.16569 9.93441C5.31572 10.0844 5.40001 10.2879 5.40001 10.5001C5.40001 10.7123 5.31572 10.9158 5.16569 11.0658C5.01566 11.2158 4.81218 11.3001 4.60001 11.3001H3.80001V12.1001C3.80001 12.3123 3.71572 12.5158 3.56569 12.6658C3.41566 12.8158 3.21218 12.9001 3.00001 12.9001C2.78783 12.9001 2.58435 12.8158 2.43432 12.6658C2.28429 12.5158 2.20001 12.3123 2.20001 12.1001V11.3001H1.40001C1.18783 11.3001 0.98435 11.2158 0.834321 11.0658C0.684292 10.9158 0.600006 10.7123 0.600006 10.5001C0.600006 10.2879 0.684292 10.0844 0.834321 9.93441C0.98435 9.78438 1.18783 9.7001 1.40001 9.7001H2.20001V8.9001C2.20001 8.68792 2.28429 8.48444 2.43432 8.33441C2.58435 8.18438 2.78783 8.1001 3.00001 8.1001ZM8.60001 0.100098C8.77656 0.100041 8.94817 0.158388 9.0881 0.266047C9.22802 0.373706 9.32841 0.52463 9.37361 0.695298L10.3168 4.2601L13 5.8073C13.1216 5.87751 13.2226 5.9785 13.2928 6.10011C13.363 6.22173 13.4 6.35967 13.4 6.5001C13.4 6.64052 13.363 6.77847 13.2928 6.90008C13.2226 7.02169 13.1216 7.12268 13 7.1929L10.3168 8.7409L9.37281 12.3049C9.32753 12.4754 9.22716 12.6262 9.08732 12.7337C8.94748 12.8413 8.77602 12.8996 8.59961 12.8996C8.42319 12.8996 8.25173 12.8413 8.11189 12.7337C7.97205 12.6262 7.87169 12.4754 7.82641 12.3049L6.88321 8.7401L4.20001 7.1929C4.0784 7.12268 3.97742 7.02169 3.90721 6.90008C3.837 6.77847 3.80004 6.64052 3.80004 6.5001C3.80004 6.35967 3.837 6.22173 3.90721 6.10011C3.97742 5.9785 4.0784 5.87751 4.20001 5.8073L6.88321 4.2593L7.82721 0.695298C7.87237 0.524762 7.97263 0.373937 8.1124 0.266291C8.25216 0.158646 8.42359 0.100217 8.60001 0.100098Z" fill="#5850EC" />
         </svg>
         <div className="h2">{mode === AppType.chat ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div>
-        <Tooltip
-          htmlContent={<div className='w-[180px]'>
-            {t('appDebug.promptTip')}
-          </div>}
-          selector='config-prompt-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.promptTip')}
+            </div>}
+            selector='config-prompt-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>
 
       <BlockInput
+        readonly={readonly}
         value={promptTemplate}
         onConfirm={(value: string, vars: string[]) => {
           handleChange(value, vars)
@@ -82,7 +89,7 @@ const Prompt: FC<IPromptProps> = ({
 
       {isShowConfirmAddVar && (
         <ConfirmAddVar
-          varNameArr={newPromptVariables.map((v) => v.name)}
+          varNameArr={newPromptVariables.map(v => v.name)}
           onConfrim={handleAutoAdd(true)}
           onCancel={handleAutoAdd(false)}
           onHide={hideConfirmAddVar}

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

+'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/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/documents/detail/settings/index.tsx

 '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.zh.ts

 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

-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,
   })
 }