⚡ (embedBubble) Enable variable embed height

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>