✨ (whatsapp) Add custom session expiration (#842)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit

- New Feature: Introduced session expiry timeout for WhatsApp
integration, allowing users to set the duration after which a session
expires.
- New Feature: Added an option to enable/disable the start bot condition
in WhatsApp integration settings.
- Refactor: Enhanced error handling by throwing specific errors when
necessary conditions are not met.
- Refactor: Improved UI components like `NumberInput` and
`SwitchWithLabel` for better usability.
- Bug Fix: Fixed issues related to session resumption and message
sending in expired sessions. Now, if a session is expired, a new one
will be started instead of attempting to resume the old one.
- Chore: Updated various schemas to reflect changes in session
management and WhatsApp settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -10,6 +10,7 @@ import {
   FormControl,
   FormLabel,
   Stack,
+  Text,
 } from '@chakra-ui/react'
 import { Variable, VariableString } from '@typebot.io/schemas'
 import { useEffect, useState } from 'react'
@@ -29,6 +30,7 @@ type Props<HasVariable extends boolean> = {
   moreInfoTooltip?: string
   isRequired?: boolean
   direction?: 'row' | 'column'
+  suffix?: string
   onValueChange: (value?: Value<HasVariable>) => void
 } & Omit<NumberInputProps, 'defaultValue' | 'value' | 'onChange' | 'isRequired'>
 
@@ -41,6 +43,7 @@ export const NumberInput = <HasVariable extends boolean>({
   moreInfoTooltip,
   isRequired,
   direction,
+  suffix,
   ...props
 }: Props<HasVariable>) => {
   const [value, setValue] = useState(defaultValue?.toString() ?? '')
@@ -99,24 +102,27 @@ export const NumberInput = <HasVariable extends boolean>({
       isRequired={isRequired}
       justifyContent="space-between"
       width={label ? 'full' : 'auto'}
-      spacing={0}
+      spacing={direction === 'column' ? 2 : 3}
     >
       {label && (
-        <FormLabel mb="2" flexShrink={0}>
+        <FormLabel mb="0" mr="0" flexShrink={0}>
           {label}{' '}
           {moreInfoTooltip && (
             <MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>
           )}
         </FormLabel>
       )}
-      {withVariableButton ?? true ? (
-        <HStack spacing={0}>
-          {Input}
-          <VariablesButton onSelectVariable={handleVariableSelected} />
-        </HStack>
-      ) : (
-        Input
-      )}
+      <HStack>
+        {withVariableButton ?? true ? (
+          <HStack spacing="0">
+            {Input}
+            <VariablesButton onSelectVariable={handleVariableSelected} />
+          </HStack>
+        ) : (
+          Input
+        )}
+        {suffix ? <Text>{suffix}</Text> : null}
+      </HStack>
     </FormControl>
   )
 }

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

@@ -13,7 +13,7 @@ export type SwitchWithLabelProps = {
   label: string
   initialValue: boolean
   moreInfoContent?: string
-  onCheckChange: (isChecked: boolean) => void
+  onCheckChange?: (isChecked: boolean) => void
   justifyContent?: FormControlProps['justifyContent']
 } & Omit<SwitchProps, 'value' | 'justifyContent'>
 
@@ -29,7 +29,7 @@ export const SwitchWithLabel = ({
 
   const handleChange = () => {
     setIsChecked(!isChecked)
-    onCheckChange(!isChecked)
+    if (onCheckChange) onCheckChange(!isChecked)
   }
 
   return (