feat: support var type paragraph

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

@@ -10,7 +10,7 @@ import Radio from '@/app/components/base/radio'
 import Panel from '@/app/components/base/panel'
 import type { CompletionParams } from '@/models/debug'
 import { AppType } from '@/types/app'
-import { TONE_LIST } from '@/config'
+import { TONE_LIST, getMaxToken } from '@/config'
 import Toast from '@/app/components/base/toast'
 
 export type IConifgModelProps = {
@@ -97,7 +97,7 @@ const ConifgModel: FC<IConifgModelProps> = ({
       key: 'max_tokens',
       tip: t('common.model.params.maxTokenTip'),
       step: 100,
-      max: (modelId === 'gpt-4' || modelId === 'gpt-3.5-turbo-16k') ? 8000 : 4000,
+      max: getMaxToken(modelId),
     },
   ]
 
@@ -118,7 +118,7 @@ const ConifgModel: FC<IConifgModelProps> = ({
         onShowUseGPT4Confirm()
         return
       }
-      if (id !== 'gpt-4' && completionParams.max_tokens > 4000) {
+      if ((id !== 'gpt-4' && id !== 'gpt-3.5-turbo-16k') && completionParams.max_tokens > 4000) {
         Toast.notify({
           type: 'warning',
           message: t('common.model.params.setToCurrentModelMaxTokenTip'),

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

-'use client'
-import React, { FC, useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
-import ModalFoot from '../modal-foot'
-import ConfigSelect, { Options } from '../config-select'
-import ConfigString from '../config-string'
-import Toast from '@/app/components/base/toast'
-import type { PromptVariable } from '@/models/debug'
-import SelectTypeItem from '../select-type-item'
-import { getNewVar } from '@/utils/var'
-
-import s from './style.module.css'
-
-export interface IConfigModalProps {
-  payload: PromptVariable
-  type?: string
-  isShow: boolean
-  onClose: () => void
-  onConfirm: (newValue: { type: string, value: any }) => void
-}
-
-const ConfigModal: FC<IConfigModalProps> = ({
-  payload,
-  isShow,
-  onClose,
-  onConfirm
-}) => {
-  const { t } = useTranslation()
-  const { type, name, key, options, max_length } = payload || getNewVar('')
-
-  const [tempType, setTempType] = useState(type)
-  useEffect(() => {
-    setTempType(type)
-  }, [type])
-  const handleTypeChange = (type: string) => {
-    return () => {
-      setTempType(type)
-    }
-  }
-
-  const isStringInput = tempType === 'string'
-  const title = isStringInput ? t('appDebug.variableConig.maxLength') : t('appDebug.variableConig.options')
-
-  // string type 
-  const [tempMaxLength, setTempMaxValue] = useState(max_length)
-  useEffect(() => {
-    setTempMaxValue(max_length)
-  }, [max_length])
-
-  // select type
-  const [tempOptions, setTempOptions] = useState<Options>(options || [])
-  useEffect(() => {
-    setTempOptions(options || [])
-  }, [options])
-
-  const handleConfirm = () => {
-    if (isStringInput) {
-      onConfirm({ type: tempType, value: tempMaxLength })
-    } else {
-      if (tempOptions.length === 0) {
-        Toast.notify({ type: 'error', message: 'At least one option requied' })
-        return
-      }
-      const obj: Record<string, boolean> = {}
-      let hasRepeatedItem = false
-      tempOptions.forEach(o => {
-        if (obj[o]) {
-          hasRepeatedItem = true
-          return
-        }
-        obj[o] = true
-      })
-      if (hasRepeatedItem) {
-        Toast.notify({ type: 'error', message: 'Has repeat items' })
-        return
-      }
-      onConfirm({ type: tempType, value: tempOptions })
-    }
-  }
-
-  return (
-    <Modal
-      title={t('appDebug.variableConig.modalTitle')}
-      isShow={isShow}
-      onClose={onClose}
-    >
-      <div className='mb-8'>
-        <div className='mt-2 mb-8 text-sm text-gray-500'>{t('appDebug.variableConig.description', { varName: `{{${name || key}}}` })}</div>
-        <div className='mb-2'>
-          <div className={s.title}>{t('appDebug.variableConig.fieldType')}</div>
-          <div className='flex space-x-2'>
-            <SelectTypeItem type='string' selected={isStringInput} onClick={handleTypeChange('string')} />
-            <SelectTypeItem type='select' selected={!isStringInput} onClick={handleTypeChange('select')} />
-          </div>
-        </div>
-
-        <div className='mt-6'>
-          <div className={s.title}>{title}</div>
-          {isStringInput ? (
-            <ConfigString value={tempMaxLength} onChange={setTempMaxValue} />
-          ) : (
-            <ConfigSelect options={tempOptions} onChange={setTempOptions} />
-          )}
-        </div>
-
-      </div>
-      <ModalFoot
-        onConfirm={handleConfirm}
-        onCancel={onClose}
-      />
-    </Modal>
-  )
-}
-export default React.memo(ConfigModal)

web/app/components/app/configuration/config-var/config-model/style.module.css

-.title {
-  margin-bottom: 8px;
-  font-size: 13px;
-  line-height: 18px;
-  font-weight: 500;
-  color: #101828;
-  text-transform: capitalize;
-}
\ No newline at end of file

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

 'use client'
-import React, { FC, } from 'react'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import { getMaxToken } from '@/config'
 
-export interface IConfigStringProps {
+export type IConfigStringProps = {
   value: number | undefined
+  modelId: string
+  isParagraph: boolean
   onChange: (value: number | undefined) => void
 }
 
-const MAX_LENGTH = 64
-
 const ConfigString: FC<IConfigStringProps> = ({
   value,
+  modelId,
+  isParagraph,
   onChange,
 }) => {
+  const MAX_LENGTH = isParagraph ? (getMaxToken(modelId) / 2) : 64
+  useEffect(() => {
+    if (value && value > MAX_LENGTH)
+      onChange(MAX_LENGTH)
+  }, [value, MAX_LENGTH])
 
   return (
     <div>
@@ -20,13 +29,14 @@ const ConfigString: FC<IConfigStringProps> = ({
         max={MAX_LENGTH}
         min={1}
         value={value || ''}
-        onChange={e => {
+        onChange={(e) => {
           let value = parseInt(e.target.value, 10)
-          if (value > MAX_LENGTH) {
+          if (value > MAX_LENGTH)
             value = MAX_LENGTH
-          } else if (value < 1) {
+
+          else if (value < 1)
             value = 1
-          }
+
           onChange(value)
         }}
         className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"

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

@@ -7,7 +7,7 @@ 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 EditModal from './config-modal'
 import IconTypeIcon from './input-type-icon'
 import s from './style.module.css'
 import Tooltip from '@/app/components/base/tooltip'
@@ -231,7 +231,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
       )}
 
       {isShowEditModal && (
-        <EditModel
+        <EditModal
           payload={currItem as PromptVariable}
           isShow={isShowEditModal}
           onClose={hideEditModal}

web/app/components/app/configuration/config-var/select-type-item/style.module.css

 .item {
   display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  height: 32px;
-  width: 133px;
-  padding-left: 12px;
+  height: 58px;
+  width: 98px;
   border-radius: 8px;
   border: 1px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);

web/config/index.ts

@@ -74,6 +74,10 @@ export const TONE_LIST = [
   },
 ]
 
+export const getMaxToken = (modelId: string) => {
+  return (modelId === 'gpt-4' || modelId === 'gpt-3.5-turbo-16k') ? 8000 : 4000
+}
+
 export const LOCALE_COOKIE_NAME = 'locale'
 
 export const DEFAULT_VALUE_MAX_LEN = 48

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

@@ -113,7 +113,8 @@ const translation = {
     modalTitle: 'Field settings',
     description: 'Setting for variable {{varName}}',
     fieldType: 'Field type',
-    string: 'Text',
+    string: 'Short Text',
+    paragraph: 'Paragraph',
     select: 'Select',
     notSet: 'Not set, try typing {{input}} in the prefix prompt',
     stringTitle: 'Form text box options',

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

@@ -111,6 +111,7 @@ const translation = {
     description: '设置变量 {{varName}}',
     fieldType: '字段类型',
     string: '文本',
+    paragraph: '段落',
     select: '下拉选项',
     notSet: '未设置，在 Prompt 中输入 {{input}} 试试',
     stringTitle: '文本框设置',