feat: switch to generation model set default stop word (#1341)

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

@@ -224,6 +224,8 @@ const ConfigModel: FC<IConfigModelProps> = ({
   const handleParamChange = (key: string, value: number | string[]) => {
     if (value === undefined)
       return
+    if ((completionParams as any)[key] === value)
+      return
 
     if (key === 'stop') {
       onCompletionParamsChange({

web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts

 import { useState } from 'react'
 import { clone } from 'lodash-es'
 import produce from 'immer'
-import type { ChatPromptConfig, CompletionPromptConfig, ConversationHistoriesRole, PromptItem } from '@/models/debug'
+import type { ChatPromptConfig, CompletionParams, CompletionPromptConfig, ConversationHistoriesRole, PromptItem } from '@/models/debug'
 import { PromptMode } from '@/models/debug'
 import { AppType, ModelModeType } from '@/types/app'
 import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
@@ -16,6 +16,9 @@ type Param = {
   prePrompt: string
   onUserChangedPrompt: () => void
   hasSetDataSet: boolean
+  completionParams: CompletionParams
+  setCompletionParams: (params: CompletionParams) => void
+  setStop: (stop: string[]) => void
 }
 
 const useAdvancedPromptConfig = ({
@@ -26,6 +29,9 @@ const useAdvancedPromptConfig = ({
   prePrompt,
   onUserChangedPrompt,
   hasSetDataSet,
+  completionParams,
+  setCompletionParams,
+  setStop,
 }: Param) => {
   const isAdvancedPrompt = promptMode === PromptMode.advanced
   const [chatPromptConfig, setChatPromptConfig] = useState<ChatPromptConfig>(clone(DEFAULT_CHAT_PROMPT_CONFIG))
@@ -98,7 +104,7 @@ const useAdvancedPromptConfig = ({
     const mode = modelModeType
     const toReplacePrePrompt = prePrompt || ''
     if (!isAdvancedPrompt) {
-      const { chat_prompt_config, completion_prompt_config } = await fetchPromptTemplate({
+      const { chat_prompt_config, completion_prompt_config, stop } = await fetchPromptTemplate({
         appMode,
         mode,
         modelName,
@@ -121,12 +127,16 @@ const useAdvancedPromptConfig = ({
           draft.prompt.text = draft.prompt.text.replace(PRE_PROMPT_PLACEHOLDER_TEXT, toReplacePrePrompt)
         })
         setCompletionPromptConfig(newPromptConfig)
+        setCompletionParams({
+          ...completionParams,
+          stop,
+        })
       }
       return
     }
 
     if (isMigrateToCompetition) {
-      const { completion_prompt_config, chat_prompt_config } = await fetchPromptTemplate({
+      const { completion_prompt_config, chat_prompt_config, stop } = await fetchPromptTemplate({
         appMode,
         mode: toModelModeType as ModelModeType,
         modelName,
@@ -145,6 +155,13 @@ const useAdvancedPromptConfig = ({
             draft.conversation_histories_role = completionPromptConfig.conversation_histories_role
         })
         setCompletionPromptConfig(newPromptConfig)
+        if (!completionParams.stop || completionParams.stop.length === 0) {
+          setCompletionParams({
+            ...completionParams,
+            stop,
+          })
+        }
+        setStop(stop) // switch mode's params is async. It may override the stop value.
       }
       else {
         const newPromptConfig = produce(chat_prompt_config, (draft) => {

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

 'use client'
 import type { FC } from 'react'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { usePathname } from 'next/navigation'
 import produce from 'immer'
-import { useBoolean } from 'ahooks'
+import { useBoolean, useGetState } from 'ahooks'
 import cn from 'classnames'
 import { clone, isEqual } from 'lodash-es'
 import Button from '../../base/button'
@@ -33,6 +33,7 @@ import { FlipBackward } from '@/app/components/base/icons/src/vender/line/arrows
 import { PromptMode } from '@/models/debug'
 import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
 import SelectDataSet from '@/app/components/app/configuration/dataset-config/select-dataset'
+import I18n from '@/context/i18n'
 
 type PublichConfig = {
   modelConfig: ModelConfig
@@ -74,13 +75,26 @@ const Configuration: FC = () => {
   const [formattingChanged, setFormattingChanged] = useState(false)
   const [inputs, setInputs] = useState<Inputs>({})
   const [query, setQuery] = useState('')
-  const [completionParams, setCompletionParams] = useState<CompletionParams>({
+  const [completionParams, doSetCompletionParams] = useState<CompletionParams>({
     max_tokens: 16,
     temperature: 1, // 0-2
     top_p: 1,
     presence_penalty: 1, // -2-2
     frequency_penalty: 1, // -2-2
+    stop: [],
   })
+  const [tempStop, setTempStop, getTempStop] = useGetState<string[]>([])
+  const setCompletionParams = (value: CompletionParams) => {
+    const params = { ...value }
+
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    if ((!params.stop || params.stop.length === 0) && (modeModeTypeRef.current === ModelModeType.completion)) {
+      params.stop = getTempStop()
+      setTempStop([])
+    }
+    doSetCompletionParams(params)
+  }
+
   const [modelConfig, doSetModelConfig] = useState<ModelConfig>({
     provider: ProviderEnum.openai,
     model_id: 'gpt-3.5-turbo',
@@ -110,6 +124,10 @@ const Configuration: FC = () => {
   }
 
   const modelModeType = modelConfig.mode
+  const modeModeTypeRef = useRef(modelModeType)
+  useEffect(() => {
+    modeModeTypeRef.current = modelModeType
+  }, [modelModeType])
 
   const [dataSets, setDataSets] = useState<DataSet[]>([])
   const contextVar = modelConfig.configs.prompt_variables.find(item => item.is_context_var)?.key
@@ -197,7 +215,7 @@ const Configuration: FC = () => {
   const hasSetAPIKEY = hasSetCustomAPIKEY || !isTrailFinished
 
   const [isShowSetAPIKey, { setTrue: showSetAPIKey, setFalse: hideSetAPIkey }] = useBoolean()
-  const [promptMode, doSetPromptMode] = useState(PromptMode.advanced)
+  const [promptMode, doSetPromptMode] = useState(PromptMode.simple)
   const isAdvancedMode = promptMode === PromptMode.advanced
   const [canReturnToSimpleMode, setCanReturnToSimpleMode] = useState(true)
   const setPromptMode = async (mode: PromptMode) => {
@@ -230,6 +248,9 @@ const Configuration: FC = () => {
     onUserChangedPrompt: () => {
       setCanReturnToSimpleMode(false)
     },
+    completionParams,
+    setCompletionParams,
+    setStop: setTempStop,
   })
 
   const setModel = async ({
@@ -449,6 +470,7 @@ const Configuration: FC = () => {
 
   const [showUseGPT4Confirm, setShowUseGPT4Confirm] = useState(false)
   const [showSetAPIKeyModal, setShowSetAPIKeyModal] = useState(false)
+  const { locale } = useContext(I18n)
 
   if (isLoading) {
     return <div className='flex h-full items-center justify-center'>
@@ -513,10 +535,9 @@ const Configuration: FC = () => {
       <>
         <div className="flex flex-col h-full">
           <div className='flex items-center justify-between px-6 shrink-0 h-14'>
-            <div>
-              <div className='italic text-base font-bold text-gray-900 leading-[18px]'>{t('appDebug.pageTitle.line1')}</div>
-              <div className='flex items-center h-6 space-x-1 text-xs'>
-                <div className='text-gray-500 font-medium italic'>{t('appDebug.pageTitle.line2')}</div>
+            <div className='flex items-end'>
+              <div className={s.promptTitle}></div>
+              <div className='flex items-center h-[14px] space-x-1 text-xs'>
                 {/* modelModeType missing can not load template */}
                 {(!isAdvancedMode && modelModeType) && (
                   <div
@@ -528,7 +549,7 @@ const Configuration: FC = () => {
                 )}
                 {isAdvancedMode && (
                   <div className='flex items-center space-x-2'>
-                    <div className={`${s.advancedPromptMode} italic text-indigo-600`}>{t('appDebug.promptMode.advanced')}</div>
+                    <div className={cn(locale === 'en' && 'italic', `${s.advancedPromptMode}  text-indigo-600`)}>{t('appDebug.promptMode.advanced')}</div>
                     {canReturnToSimpleMode && (
                       <div
                         onClick={() => setPromptMode(PromptMode.simple)}

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

+.promptTitle {
+  width: 72px;
+  height: 31px;
+  background: url(./images/prompt.svg) no-repeat 0 0;
+  background-size: contain;
+}
+
 .advancedPromptMode {
   position: relative;
 }

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

@@ -4,12 +4,12 @@ const translation = {
     line2: 'Engineering',
   },
   promptMode: {
-    simple: 'Switch to Advanced Mode to edit the built-in PROMPT',
+    simple: 'Switch to Advanced Mode to edit the whole PROMPT',
     advanced: 'Advanced Mode',
     switchBack: 'Switch back',
     advancedWarning: {
       title: 'You have switched to Advanced Mode, and once you modify the PROMPT, you CANNOT return to the simple mode.',
-      description: 'In Advanced Mode, you can edit built-in PROMPT.',
+      description: 'In Advanced Mode, you can edit whole PROMPT.',
       learnMore: 'Learn more',
       ok: 'OK',
     },

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

@@ -4,12 +4,12 @@ const translation = {
     line2: '编排',
   },
   promptMode: {
-    simple: '切换到高级模式以编辑内置的提示词',
+    simple: '切换到高级模式以编辑完整的提示词',
     advanced: '高级模式',
     switchBack: '返回简单模式',
     advancedWarning: {
       title: '您已切换到高级模式，一旦修改提示词，将无法返回简单模式。',
-      description: '在高级模式下，您可以编辑内置的提示词。',
+      description: '在高级模式下，您可以编辑完整的提示词。',
       learnMore: '了解更多',
       ok: '确定',
     },

web/service/debug.ts

@@ -73,7 +73,7 @@ export const fetchPromptTemplate = ({
   modelName,
   hasSetDataSet,
 }: { appMode: string; mode: ModelModeType; modelName: string; hasSetDataSet: boolean }) => {
-  return get<Promise<{ chat_prompt_config: ChatPromptConfig; completion_prompt_config: CompletionPromptConfig }>>('/app/prompt-templates', {
+  return get<Promise<{ chat_prompt_config: ChatPromptConfig; completion_prompt_config: CompletionPromptConfig; stop: [] }>>('/app/prompt-templates', {
     params: {
       app_mode: appMode,
       model_mode: mode,