🚸 Display error toast when script or set vari…

apps/builder/src/components/inputs/RadioButtons.tsx

@@ -14,6 +14,7 @@ type Props<T extends string> = {
   value?: T
   defaultValue?: T
   direction?: 'row' | 'column'
+  size?: 'md' | 'sm'
   onSelect: (newValue: T) => void
 }
 export const RadioButtons = <T extends string>({
@@ -21,6 +22,7 @@ export const RadioButtons = <T extends string>({
   value,
   defaultValue,
   direction = 'row',
+  size = 'md',
   onSelect,
 }: Props<T>) => {
   const { getRootProps, getRadioProps } = useRadioGroup({
@@ -36,7 +38,7 @@ export const RadioButtons = <T extends string>({
       {options.map((item) => {
         const radio = getRadioProps({ value: parseValue(item) })
         return (
-          <RadioCard key={parseValue(item)} {...radio}>
+          <RadioCard key={parseValue(item)} {...radio} size={size}>
             {parseLabel(item)}
           </RadioCard>
         )
@@ -45,7 +47,9 @@ export const RadioButtons = <T extends string>({
   )
 }
 
-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}
       </Flex>

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}
           />
-          <CodeEditor
-            defaultValue={options?.expressionToEvaluate ?? ''}
-            onChange={updateExpression}
-            lang="javascript"
-          />
+          <Stack>
+            <RadioButtons
+              size="sm"
+              options={['Text', 'Code']}
+              defaultValue={
+                options?.isCode ?? defaultSetVariableOptions.isCode
+                  ? 'Code'
+                  : 'Text'
+              }
+              onSelect={updateIsCode}
+            />
+            {options?.isCode === undefined || options.isCode ? (
+              <CodeEditor
+                defaultValue={options?.expressionToEvaluate ?? ''}
+                onChange={updateExpression}
+                lang="javascript"
+              />
+            ) : (
+              <Textarea
+                defaultValue={options?.expressionToEvaluate ?? ''}
+                onChange={updateExpression}
+                width="full"
+              />
+            )}
+          </Stack>
         </>
       )
     case 'Map item with same index': {