fix: var config content can not be saved (#841)

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

@@ -1,30 +1,32 @@
 'use client'
-import React, { FC, useState, useEffect } from 'react'
+import type { FC } from 'react'
+import React, { useEffect, useState } 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 type { Options } from '../config-select'
+import ConfigSelect from '../config-select'
 import ConfigString from '../config-string'
+import SelectTypeItem from '../select-type-item'
+import s from './style.module.css'
 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'
+import Modal from '@/app/components/base/modal'
 
-export interface IConfigModalProps {
+export type IConfigModalProps = {
   payload: PromptVariable
   type?: string
   isShow: boolean
   onClose: () => void
-  onConfirm: (newValue: { type: string, value: any }) => void
+  onConfirm: (newValue: { type: string; value: any }) => void
 }
 
 const ConfigModal: FC<IConfigModalProps> = ({
   payload,
   isShow,
   onClose,
-  onConfirm
+  onConfirm,
 }) => {
   const { t } = useTranslation()
   const { type, name, key, options, max_length } = payload || getNewVar('')
@@ -42,7 +44,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
   const isStringInput = tempType === 'string'
   const title = isStringInput ? t('appDebug.variableConig.maxLength') : t('appDebug.variableConig.options')
 
-  // string type 
+  // string type
   const [tempMaxLength, setTempMaxValue] = useState(max_length)
   useEffect(() => {
     setTempMaxValue(max_length)
@@ -57,14 +59,15 @@ const ConfigModal: FC<IConfigModalProps> = ({
   const handleConfirm = () => {
     if (isStringInput) {
       onConfirm({ type: tempType, value: tempMaxLength })
-    } else {
+    }
+    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 => {
+      tempOptions.forEach((o) => {
         if (obj[o]) {
           hasRepeatedItem = true
           return
@@ -97,11 +100,13 @@ const ConfigModal: FC<IConfigModalProps> = ({
 
         <div className='mt-6'>
           <div className={s.title}>{title}</div>
-          {isStringInput ? (
-            <ConfigString value={tempMaxLength} onChange={setTempMaxValue} />
-          ) : (
-            <ConfigSelect options={tempOptions} onChange={setTempOptions} />
-          )}
+          {isStringInput
+            ? (
+              <ConfigString value={tempMaxLength} onChange={setTempMaxValue} />
+            )
+            : (
+              <ConfigSelect options={tempOptions} onChange={setTempOptions} />
+            )}
         </div>
 
       </div>

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

@@ -4,6 +4,7 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Cog8ToothIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { useBoolean } from 'ahooks'
+import type { Timeout } from 'ahooks/lib/useRequest/src/types'
 import Panel from '../base/feature-panel'
 import OperationBtn from '../base/operation-btn'
 import VarIcon from '../base/icons/var-icon'
@@ -16,7 +17,6 @@ import { DEFAULT_VALUE_MAX_LEN, getMaxVarNameLength } from '@/config'
 import { checkKeys, getNewVar } from '@/utils/var'
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
-import { Timeout } from 'ahooks/lib/useRequest/src/types'
 
 export type IConfigVarProps = {
   promptVariables: PromptVariable[]
@@ -37,9 +37,9 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
     return obj
   })()
 
-  const updatePromptVariable = (index: number, updateKey: string, newValue: any) => {
+  const updatePromptVariable = (key: string, updateKey: string, newValue: any) => {
     const newPromptVariables = promptVariables.map((item, i) => {
-      if (i === index) {
+      if (item.key === key) {
         return {
           ...item,
           [updateKey]: newValue,
@@ -48,13 +48,12 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
 
       return item
     })
-
     onPromptVariablesChange?.(newPromptVariables)
   }
 
-  const batchUpdatePromptVariable = (index: number, updateKeys: string[], newValues: any[]) => {
-    const newPromptVariables = promptVariables.map((item, i) => {
-      if (i === index) {
+  const batchUpdatePromptVariable = (key: string, updateKeys: string[], newValues: any[]) => {
+    const newPromptVariables = promptVariables.map((item) => {
+      if (item.key === key) {
         const newItem: any = { ...item }
         updateKeys.forEach((updateKey, i) => {
           newItem[updateKey] = newValues[i]
@@ -93,11 +92,10 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
       if (isKeyExists) {
         Toast.notify({
           type: 'error',
-          message: t(`appDebug.varKeyError.keyAlreadyExists`, { key: newKey }),
+          message: t('appDebug.varKeyError.keyAlreadyExists', { key: newKey }),
         })
-        return
       }
-    },1000)
+    }, 1000)
 
     onPromptVariablesChange?.(newPromptVariables)
   }
@@ -206,7 +204,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
                           type="text"
                           placeholder={key}
                           value={name}
-                          onChange={e => updatePromptVariable(index, 'name', e.target.value)}
+                          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"
                         />)