⚡ (embedBubble) Enable variable embed height

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

@@ -1,3 +1,4 @@
+import { VariablesButton } from '@/features/variables'
 import {
   NumberInputProps,
   NumberInput,
@@ -5,49 +6,80 @@ import {
   NumberInputStepper,
   NumberIncrementStepper,
   NumberDecrementStepper,
+  HStack,
+  FormControl,
+  FormLabel,
 } from '@chakra-ui/react'
+import { Variable, VariableString } from 'models'
 import { useEffect, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { env } from 'utils'
+import { MoreInfoTooltip } from '../MoreInfoTooltip'
 
-type Props = {
-  value?: number
+type Value<HasVariable> = HasVariable extends undefined | true
+  ? number | VariableString
+  : number
+
+type Props<HasVariable extends boolean> = {
+  defaultValue?: Value<HasVariable>
   debounceTimeout?: number
-  withVariableButton?: boolean
-  onValueChange: (value?: number) => void
-} & NumberInputProps
+  withVariableButton?: HasVariable
+  label?: string
+  moreInfoTooltip?: string
+  isRequired?: boolean
+  onValueChange: (value?: Value<HasVariable>) => void
+} & Omit<NumberInputProps, 'defaultValue' | 'value' | 'onChange' | 'isRequired'>
 
-export const SmartNumberInput = ({
-  value,
+export const SmartNumberInput = <HasVariable extends boolean>({
+  defaultValue,
   onValueChange,
+  withVariableButton,
   debounceTimeout = 1000,
+  label,
+  moreInfoTooltip,
+  isRequired,
   ...props
-}: Props) => {
-  const [currentValue, setCurrentValue] = useState(value?.toString() ?? '')
-  const debounced = useDebouncedCallback(
+}: Props<HasVariable>) => {
+  const [value, setValue] = useState(defaultValue?.toString() ?? '')
+
+  const onValueChangeDebounced = useDebouncedCallback(
     onValueChange,
     env('E2E_TEST') === 'true' ? 0 : debounceTimeout
   )
 
   useEffect(
     () => () => {
-      debounced.flush()
+      onValueChangeDebounced.flush()
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [onValueChangeDebounced]
   )
 
   const handleValueChange = (value: string) => {
-    setCurrentValue(value)
+    setValue(value)
     if (value.endsWith('.') || value.endsWith(',')) return
-    if (value === '') return debounced(undefined)
+    if (value === '') return onValueChangeDebounced(undefined)
+    if (
+      value.startsWith('{{') &&
+      value.endsWith('}}') &&
+      value.length > 4 &&
+      (withVariableButton ?? true)
+    ) {
+      onValueChangeDebounced(value as Value<HasVariable>)
+      return
+    }
     const newValue = parseFloat(value)
     if (isNaN(newValue)) return
-    debounced(newValue)
+    onValueChangeDebounced(newValue)
   }
 
-  return (
-    <NumberInput onChange={handleValueChange} value={currentValue} {...props}>
+  const handleVariableSelected = (variable?: Variable) => {
+    if (!variable) return
+    const newValue = `{{${variable.name}}}`
+    handleValueChange(newValue)
+  }
+
+  const Input = (
+    <NumberInput onChange={handleValueChange} value={value} {...props}>
       <NumberInputField placeholder={props.placeholder} />
       <NumberInputStepper>
         <NumberIncrementStepper />
@@ -55,4 +87,29 @@ export const SmartNumberInput = ({
       </NumberInputStepper>
     </NumberInput>
   )
+
+  return (
+    <FormControl
+      as={HStack}
+      isRequired={isRequired}
+      justifyContent="space-between"
+    >
+      {label && (
+        <FormLabel mb="0" flexShrink={0}>
+          {label}{' '}
+          {moreInfoTooltip && (
+            <MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>
+          )}
+        </FormLabel>
+      )}
+      {withVariableButton ?? true ? (
+        <HStack spacing={0}>
+          {Input}
+          <VariablesButton onSelectVariable={handleVariableSelected} />
+        </HStack>
+      ) : (
+        Input
+      )}
+    </FormControl>
+  )
 }

apps/builder/src/features/blocks/bubbles/embed/components/EmbedUploadContent.tsx

@@ -16,7 +16,7 @@ export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
     onSubmit({ ...content, url: iframeUrl })
   }
 
-  const handleHeightChange = (height?: number) =>
+  const handleHeightChange = (height?: EmbedBubbleContent['height']) =>
     height && onSubmit({ ...content, height })
 
   return (
@@ -32,12 +32,13 @@ export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
         </Text>
       </Stack>
 
-      <HStack justify="space-between">
-        <Text>Height: </Text>
+      <HStack>
         <SmartNumberInput
-          value={content?.height}
+          label="Height:"
+          defaultValue={content?.height}
           onValueChange={handleHeightChange}
         />
+        <Text>px</Text>
       </HStack>
     </Stack>
   )

apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx

@@ -1,4 +1,4 @@
-import { FormLabel, Stack } from '@chakra-ui/react'
+import { FormLabel, HStack, Stack, Text } from '@chakra-ui/react'
 import { CodeEditor } from '@/components/CodeEditor'
 import { FileInputOptions, Variable } from 'models'
 import React from 'react'
@@ -48,16 +48,16 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
         initialValue={options.isMultipleAllowed}
         onCheckChange={handleMultipleFilesChange}
       />
-      <Stack>
-        <FormLabel mb="0" htmlFor="limit">
-          Size limit (MB):
-        </FormLabel>
+      <HStack>
         <SmartNumberInput
-          id="limit"
-          value={options.sizeLimit ?? 10}
+          label={'Size limit:'}
+          defaultValue={options.sizeLimit ?? 10}
           onValueChange={handleSizeLimitChange}
+          withVariableButton={false}
         />
-      </Stack>
+        <Text>MB</Text>
+      </HStack>
+
       <Stack>
         <FormLabel mb="0">Placeholder:</FormLabel>
         <CodeEditor

apps/builder/src/features/blocks/inputs/number/components/NumberInputSettingsBody.tsx

@@ -1,7 +1,7 @@
 import { Input, SmartNumberInput } from '@/components/inputs'
 import { VariableSearchInput } from '@/components/VariableSearchInput'
 import { removeUndefinedFields } from '@/utils/helpers'
-import { FormLabel, HStack, Stack } from '@chakra-ui/react'
+import { FormLabel, Stack } from '@chakra-ui/react'
 import { NumberInputOptions, Variable } from 'models'
 import React from 'react'
 
@@ -50,36 +50,24 @@ export const NumberInputSettingsBody = ({
           onChange={handleButtonLabelChange}
         />
       </Stack>
-      <HStack justifyContent="space-between">
-        <FormLabel mb="0" htmlFor="min">
-          Min:
-        </FormLabel>
-        <SmartNumberInput
-          id="min"
-          value={options.min}
-          onValueChange={handleMinChange}
-        />
-      </HStack>
-      <HStack justifyContent="space-between">
-        <FormLabel mb="0" htmlFor="max">
-          Max:
-        </FormLabel>
-        <SmartNumberInput
-          id="max"
-          value={options.max}
-          onValueChange={handleMaxChange}
-        />
-      </HStack>
-      <HStack justifyContent="space-between">
-        <FormLabel mb="0" htmlFor="step">
-          Step:
-        </FormLabel>
-        <SmartNumberInput
-          id="step"
-          value={options.step}
-          onValueChange={handleBlockChange}
-        />
-      </HStack>
+      <SmartNumberInput
+        label="Min:"
+        defaultValue={options.min}
+        onValueChange={handleMinChange}
+        withVariableButton={false}
+      />
+      <SmartNumberInput
+        label="Max:"
+        defaultValue={options.max}
+        onValueChange={handleMaxChange}
+        withVariableButton={false}
+      />
+      <SmartNumberInput
+        label="Step:"
+        defaultValue={options.step}
+        onValueChange={handleBlockChange}
+        withVariableButton={false}
+      />
       <Stack>
         <FormLabel mb="0" htmlFor="variable">
           Save answer in a variable:

apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailSettings/SmtpConfigForm.tsx

@@ -1,6 +1,6 @@
 import { Input, SmartNumberInput } from '@/components/inputs'
 import { SwitchWithLabel } from '@/components/SwitchWithLabel'
-import { FormControl, FormLabel, HStack, Stack } from '@chakra-ui/react'
+import { Stack } from '@chakra-ui/react'
 import { isDefined } from '@udecode/plate-common'
 import { SmtpCredentialsData } from 'models'
 import React from 'react'
@@ -73,14 +73,14 @@ export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
         onCheckChange={handleTlsCheck}
         moreInfoContent="If enabled, the connection will use TLS when connecting to server. If disabled then TLS is used if server supports the STARTTLS extension. In most cases enable it if you are connecting to port 465. For port 587 or 25 keep it disabled."
       />
-      <FormControl as={HStack} justifyContent="space-between" isRequired>
-        <FormLabel mb="0">Port number:</FormLabel>
-        <SmartNumberInput
-          placeholder="25"
-          value={config.port}
-          onValueChange={handlePortNumberChange}
-        />
-      </FormControl>
+      <SmartNumberInput
+        isRequired
+        label="Port number:"
+        placeholder="25"
+        defaultValue={config.port}
+        onValueChange={handlePortNumberChange}
+        withVariableButton={false}
+      />
     </Stack>
   )
 }

apps/builder/src/features/blocks/logic/typebotLink/typebotLink.spec.ts

@@ -53,7 +53,7 @@ test('should be configurable', async ({ page }) => {
   await page.waitForTimeout(1000)
   await page.click('input[value="My link typebot 2"]', { clickCount: 3 })
   await page.press('input[value="My link typebot 2"]', 'Backspace')
-  await page.click('button >> text=My link typebot 1')
+  await page.click('button >> text=Current typebot')
   await page.click('input[placeholder="Select a block"]', {
     clickCount: 3,
   })

apps/builder/src/features/settings/components/TypingEmulationForm.tsx

@@ -36,32 +36,24 @@ export const TypingEmulationForm = ({ typingEmulation, onUpdate }: Props) => {
       </Flex>
       {typingEmulation.enabled && (
         <Stack pl={10}>
-          <Flex justify="space-between" align="center">
-            <FormLabel htmlFor="speed" mb="0">
-              Words per minutes:
-            </FormLabel>
-            <SmartNumberInput
-              id="speed"
-              data-testid="speed"
-              value={typingEmulation.speed}
-              onValueChange={handleSpeedChange}
-              maxW="100px"
-              step={30}
-            />
-          </Flex>
-          <Flex justify="space-between" align="center">
-            <FormLabel htmlFor="max-delay" mb="0">
-              Max delay (in seconds):
-            </FormLabel>
-            <SmartNumberInput
-              id="max-delay"
-              data-testid="max-delay"
-              value={typingEmulation.maxDelay}
-              onValueChange={handleMaxDelayChange}
-              maxW="100px"
-              step={0.1}
-            />
-          </Flex>
+          <SmartNumberInput
+            label="Words per minutes:"
+            data-testid="speed"
+            defaultValue={typingEmulation.speed}
+            onValueChange={handleSpeedChange}
+            withVariableButton={false}
+            maxW="100px"
+            step={30}
+          />
+          <SmartNumberInput
+            label="Max delay (in seconds):"
+            data-testid="max-delay"
+            defaultValue={typingEmulation.maxDelay}
+            onValueChange={handleMaxDelayChange}
+            withVariableButton={false}
+            maxW="100px"
+            step={0.1}
+          />
         </Stack>
       )}
     </Stack>