|
@@ -5,19 +5,24 @@ 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 { useContext } from 'use-context-selector'
|
|
|
import Panel from '../base/feature-panel'
|
|
|
import OperationBtn from '../base/operation-btn'
|
|
|
-import VarIcon from '../base/icons/var-icon'
|
|
|
import EditModal from './config-modal'
|
|
|
import IconTypeIcon from './input-type-icon'
|
|
|
import type { IInputTypeIconProps } from './input-type-icon'
|
|
|
import s from './style.module.css'
|
|
|
+import { BracketsX as VarIcon } from '@/app/components/base/icons/src/vender/line/development'
|
|
|
import Tooltip from '@/app/components/base/tooltip'
|
|
|
import type { PromptVariable } from '@/models/debug'
|
|
|
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 { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
|
|
|
+import ConfirmModal from '@/app/components/base/confirm/common'
|
|
|
+import ConfigContext from '@/context/debug-configuration'
|
|
|
+import { AppType } from '@/types/app'
|
|
|
|
|
|
export type IConfigVarProps = {
|
|
|
promptVariables: PromptVariable[]
|
|
@@ -29,6 +34,11 @@ let conflictTimer: Timeout
|
|
|
|
|
|
const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVariablesChange }) => {
|
|
|
const { t } = useTranslation()
|
|
|
+ const {
|
|
|
+ mode,
|
|
|
+ dataSets,
|
|
|
+ } = useContext(ConfigContext)
|
|
|
+
|
|
|
const hasVar = promptVariables.length > 0
|
|
|
const promptVariableObj = (() => {
|
|
|
const obj: Record<string, boolean> = {}
|
|
@@ -127,10 +137,23 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
|
|
|
onPromptVariablesChange?.([...promptVariables, newVar])
|
|
|
}
|
|
|
|
|
|
- const handleRemoveVar = (index: number) => {
|
|
|
+ const [isShowDeleteContextVarModal, { setTrue: showDeleteContextVarModal, setFalse: hideDeleteContextVarModal }] = useBoolean(false)
|
|
|
+ const [removeIndex, setRemoveIndex] = useState<number | null>(null)
|
|
|
+ const didRemoveVar = (index: number) => {
|
|
|
onPromptVariablesChange?.(promptVariables.filter((_, i) => i !== index))
|
|
|
}
|
|
|
|
|
|
+ const handleRemoveVar = (index: number) => {
|
|
|
+ const removeVar = promptVariables[index]
|
|
|
+
|
|
|
+ if (mode === AppType.completion && dataSets.length > 0 && removeVar.is_context_var) {
|
|
|
+ showDeleteContextVarModal()
|
|
|
+ setRemoveIndex(index)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ didRemoveVar(index)
|
|
|
+ }
|
|
|
+
|
|
|
const [currKey, setCurrKey] = useState<string | null>(null)
|
|
|
const currItem = currKey ? promptVariables.find(item => item.key === currKey) : null
|
|
|
const [isShowEditModal, { setTrue: showEditModal, setFalse: hideEditModal }] = useBoolean(false)
|
|
@@ -143,18 +166,17 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
|
|
|
<Panel
|
|
|
className="mt-4"
|
|
|
headerIcon={
|
|
|
- <VarIcon />
|
|
|
+ <VarIcon className='w-4 h-4 text-primary-500'/>
|
|
|
}
|
|
|
title={
|
|
|
- <div className='flex items-center gap-2'>
|
|
|
- <div>{t('appDebug.variableTitle')}</div>
|
|
|
+ <div className='flex items-center'>
|
|
|
+ <div className='ml-1 mr-1'>{t('appDebug.variableTitle')}</div>
|
|
|
{!readonly && (
|
|
|
<Tooltip htmlContent={<div className='w-[180px]'>
|
|
|
{t('appDebug.variableTip')}
|
|
|
</div>} selector='config-var-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>
|
|
|
+ <HelpCircle className='w-3.5 h-3.5 text-gray-400'/>
|
|
|
+
|
|
|
</Tooltip>
|
|
|
)}
|
|
|
</div>
|
|
@@ -185,7 +207,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
|
|
|
<tr key={index} className="h-9 leading-9">
|
|
|
<td className="w-[160px] border-b border-gray-100 pl-3">
|
|
|
<div className='flex items-center space-x-1'>
|
|
|
- <IconTypeIcon type={type as IInputTypeIconProps['type']} />
|
|
|
+ <IconTypeIcon type={type as IInputTypeIconProps['type']} className='text-gray-400' />
|
|
|
{!readonly
|
|
|
? (
|
|
|
<input
|
|
@@ -260,6 +282,20 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
|
|
|
/>
|
|
|
)}
|
|
|
|
|
|
+ {isShowDeleteContextVarModal && (
|
|
|
+ <ConfirmModal
|
|
|
+ isShow={isShowDeleteContextVarModal}
|
|
|
+ title={t('appDebug.feature.dataSet.queryVariable.deleteContextVarTitle', { varName: promptVariables[removeIndex as number]?.name })}
|
|
|
+ desc={t('appDebug.feature.dataSet.queryVariable.deleteContextVarTip') as string}
|
|
|
+ confirmBtnClassName='bg-[#B42318] hover:bg-[#B42318]'
|
|
|
+ onConfirm={() => {
|
|
|
+ didRemoveVar(removeIndex as number)
|
|
|
+ hideDeleteContextVarModal()
|
|
|
+ }}
|
|
|
+ onCancel={hideDeleteContextVarModal}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+
|
|
|
</Panel>
|
|
|
)
|
|
|
}
|