diff --git a/apps/builder/components/shared/VariableSearchInput.tsx b/apps/builder/components/shared/VariableSearchInput.tsx index bdef934b1..bead54838 100644 --- a/apps/builder/components/shared/VariableSearchInput.tsx +++ b/apps/builder/components/shared/VariableSearchInput.tsx @@ -9,8 +9,9 @@ import { Button, InputProps, IconButton, + HStack, } from '@chakra-ui/react' -import { PlusIcon, TrashIcon } from 'assets/icons' +import { EditIcon, PlusIcon, TrashIcon } from 'assets/icons' import { useTypebot } from 'contexts/TypebotContext' import cuid from 'cuid' import { Variable } from 'models' @@ -35,7 +36,8 @@ export const VariableSearchInput = ({ ...inputProps }: Props) => { const { onOpen, onClose, isOpen } = useDisclosure() - const { typebot, createVariable, deleteVariable } = useTypebot() + const { typebot, createVariable, deleteVariable, updateVariable } = + useTypebot() const variables = typebot?.variables ?? [] const [inputValue, setInputValue] = useState( variables.find(byId(initialVariableId))?.name ?? '' @@ -113,6 +115,19 @@ export const VariableSearchInput = ({ } } + const handleRenameVariableClick = + (variable: Variable) => (e: React.MouseEvent) => { + e.stopPropagation() + const name = prompt('Rename variable', variable.name) + if (!name) return + updateVariable(variable.id, { name }) + setFilteredItems( + filteredItems.map((item) => + item.id === variable.id ? { ...item, name } : item + ) + ) + } + return ( {item.name} - } - aria-label="Remove variable" - size="xs" - onClick={handleDeleteVariableClick(item)} - /> + + } + aria-label="Rename variable" + size="xs" + onClick={handleRenameVariableClick(item)} + /> + } + aria-label="Remove variable" + size="xs" + onClick={handleDeleteVariableClick(item)} + /> + ) })} diff --git a/apps/builder/contexts/TypebotContext/actions/variables.ts b/apps/builder/contexts/TypebotContext/actions/variables.ts index 721593c38..4be29276c 100644 --- a/apps/builder/contexts/TypebotContext/actions/variables.ts +++ b/apps/builder/contexts/TypebotContext/actions/variables.ts @@ -25,7 +25,7 @@ export const variablesAction = (setTypebot: SetTypebot): VariablesActions => ({ ) => setTypebot((typebot) => produce(typebot, (typebot) => { - typebot.variables.map((v) => + typebot.variables = typebot.variables.map((v) => v.id === variableId ? { ...v, ...updates } : v ) })