|  | @@ -1,11 +1,11 @@
 | 
	
		
			
				|  |  |  '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)}
 |