diff --git a/apps/builder/src/components/inputs/RadioButtons.tsx b/apps/builder/src/components/inputs/RadioButtons.tsx index 9453f43cca..30afd23781 100644 --- a/apps/builder/src/components/inputs/RadioButtons.tsx +++ b/apps/builder/src/components/inputs/RadioButtons.tsx @@ -14,6 +14,7 @@ type Props = { value?: T defaultValue?: T direction?: 'row' | 'column' + size?: 'md' | 'sm' onSelect: (newValue: T) => void } export const RadioButtons = ({ @@ -21,6 +22,7 @@ export const RadioButtons = ({ value, defaultValue, direction = 'row', + size = 'md', onSelect, }: Props) => { const { getRootProps, getRadioProps } = useRadioGroup({ @@ -36,7 +38,7 @@ export const RadioButtons = ({ {options.map((item) => { const radio = getRadioProps({ value: parseValue(item) }) return ( - + {parseLabel(item)} ) @@ -45,7 +47,9 @@ export const RadioButtons = ({ ) } -export const RadioCard = (props: UseRadioProps & { children: ReactNode }) => { +export const RadioCard = ( + props: UseRadioProps & { children: ReactNode; size?: 'md' | 'sm' } +) => { const { getInputProps, getCheckboxProps } = useRadio(props) const input = getInputProps() @@ -68,10 +72,11 @@ export const RadioCard = (props: UseRadioProps & { children: ReactNode }) => { _active={{ bgColor: useColorModeValue('gray.200', 'gray.600'), }} - px={5} - py={2} + px={props.size === 'sm' ? 3 : 5} + py={props.size === 'sm' ? 1 : 2} transition="background-color 150ms, color 150ms, border 150ms" justifyContent="center" + fontSize={props.size === 'sm' ? 'sm' : undefined} > {props.children} diff --git a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx b/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx index 7687cc3e8b..4010cac4a5 100644 --- a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx +++ b/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx @@ -15,6 +15,7 @@ import { TextInput, Textarea } from '@/components/inputs' import { isDefined } from '@typebot.io/lib' import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { isInputBlock } from '@typebot.io/schemas/helpers' +import { RadioButtons } from '@/components/inputs/RadioButtons' type Props = { options: SetVariableBlock['options'] @@ -172,6 +173,14 @@ const SetVariableValue = ({ }) } + const updateIsCode = (radio: 'Text' | 'Code') => { + if (options?.type && options.type !== 'Custom') return + onOptionsChange({ + ...options, + isCode: radio === 'Code', + }) + } + switch (options?.type) { case 'Custom': case undefined: @@ -186,11 +195,31 @@ const SetVariableValue = ({ } onCheckChange={updateClientExecution} /> - + + + {options?.isCode === undefined || options.isCode ? ( + + ) : ( +