diff --git a/src/renderer/src/components/VariableList.tsx b/src/renderer/src/components/VariableList.tsx new file mode 100644 index 0000000000..324cf301a6 --- /dev/null +++ b/src/renderer/src/components/VariableList.tsx @@ -0,0 +1,103 @@ +import { DeleteOutlined, ImportOutlined } from '@ant-design/icons' +import { VStack } from '@renderer/components/Layout' +import { Variable } from '@renderer/types' +import { Button, Input, Tooltip } from 'antd' +import { useTranslation } from 'react-i18next' +import styled from 'styled-components' + +interface VariableListProps { + variables: Variable[] + setVariables: (variables: Variable[]) => void + onUpdate?: (variables: Variable[]) => void + onInsertVariable?: (name: string) => void +} + +const VariableList: React.FC = ({ variables, setVariables, onUpdate, onInsertVariable }) => { + const { t } = useTranslation() + + const deleteVariable = (id: string) => { + const updatedVariables = variables.filter((v) => v.id !== id) + setVariables(updatedVariables) + + if (onUpdate) { + onUpdate(updatedVariables) + } + } + + const updateVariable = (id: string, field: 'name' | 'value', value: string) => { + // Only update the local state when typing, don't call the parent's onUpdate + const updatedVariables = variables.map((v) => (v.id === id ? { ...v, [field]: value } : v)) + setVariables(updatedVariables) + } + + // This function will be called when input loses focus + const handleInputBlur = () => { + if (onUpdate) { + onUpdate(variables) + } + } + + return ( + + {variables.length === 0 ? ( + {t('common.no_variables_added')} + ) : ( + + {variables.map((variable) => ( + + updateVariable(variable.id, 'name', e.target.value)} + onBlur={handleInputBlur} + style={{ width: '30%' }} + /> + updateVariable(variable.id, 'value', e.target.value)} + onBlur={handleInputBlur} + style={{ flex: 1 }} + /> + {onInsertVariable && ( + + + + )} + + +