✨ (settings) Add delay between bubbles option and typing disabling on first message

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

@@ -84,7 +84,7 @@ export const SettingsSideMenu = () => {
           <AccordionButton py={6}>
             <HStack flex="1" pl={2}>
               <ChatIcon />
-              <Heading fontSize="lg">Typing emulation</Heading>
+              <Heading fontSize="lg">Typing</Heading>
             </HStack>
             <AccordionIcon />
           </AccordionButton>

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

@@ -1,10 +1,11 @@
-import { Stack } from '@chakra-ui/react'
+import { HStack, Stack, Text } from '@chakra-ui/react'
 import { Settings } from '@typebot.io/schemas'
 import React from 'react'
-import { isDefined } from '@typebot.io/lib'
 import { NumberInput } from '@/components/inputs'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { defaultSettings } from '@typebot.io/schemas/features/typebot/settings/constants'
+import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
+import { isDefined } from '@typebot.io/lib'
 
 type Props = {
   typingEmulation: Settings['typingEmulation']
@@ -18,51 +19,92 @@ export const TypingEmulationForm = ({ typingEmulation, onUpdate }: Props) => {
       enabled,
     })
 
-  const handleSpeedChange = (speed?: number) =>
-    isDefined(speed) && onUpdate({ ...typingEmulation, speed })
+  const updateSpeed = (speed?: number) =>
+    onUpdate({ ...typingEmulation, speed })
 
-  const handleMaxDelayChange = (maxDelay?: number) =>
-    isDefined(maxDelay) && onUpdate({ ...typingEmulation, maxDelay })
+  const updateMaxDelay = (maxDelay?: number) =>
+    onUpdate({
+      ...typingEmulation,
+      maxDelay: isDefined(maxDelay)
+        ? Math.max(Math.min(maxDelay, 5), 0)
+        : undefined,
+    })
 
-  const isEnabled =
-    typingEmulation?.enabled ?? defaultSettings.typingEmulation.enabled
+  const updateIsDisabledOnFirstMessage = (isDisabledOnFirstMessage: boolean) =>
+    onUpdate({
+      ...typingEmulation,
+      isDisabledOnFirstMessage,
+    })
+
+  const updateDelayBetweenBubbles = (delayBetweenBubbles?: number) =>
+    onUpdate({ ...typingEmulation, delayBetweenBubbles })
 
   return (
     <Stack spacing={6}>
-      <SwitchWithLabel
+      <SwitchWithRelatedSettings
         label={'Typing emulation'}
-        initialValue={isEnabled}
+        initialValue={
+          typingEmulation?.enabled ?? defaultSettings.typingEmulation.enabled
+        }
         onCheckChange={updateIsEnabled}
-      />
-      {isEnabled && (
-        <Stack pl={10}>
+      >
+        <NumberInput
+          label="Words per minutes:"
+          data-testid="speed"
+          defaultValue={
+            typingEmulation?.speed ?? defaultSettings.typingEmulation.speed
+          }
+          onValueChange={updateSpeed}
+          withVariableButton={false}
+          maxW="100px"
+          step={30}
+          direction="row"
+        />
+        <HStack>
           <NumberInput
-            label="Words per minutes:"
-            data-testid="speed"
-            defaultValue={
-              typingEmulation?.speed ?? defaultSettings.typingEmulation.speed
-            }
-            onValueChange={handleSpeedChange}
-            withVariableButton={false}
-            maxW="100px"
-            step={30}
-            direction="row"
-          />
-          <NumberInput
-            label="Max delay (in seconds):"
+            label="Max delay:"
             data-testid="max-delay"
             defaultValue={
               typingEmulation?.maxDelay ??
               defaultSettings.typingEmulation.maxDelay
             }
-            onValueChange={handleMaxDelayChange}
+            onValueChange={updateMaxDelay}
             withVariableButton={false}
             maxW="100px"
             step={0.1}
             direction="row"
+            size="sm"
           />
-        </Stack>
-      )}
+          <Text>seconds</Text>
+        </HStack>
+
+        <SwitchWithLabel
+          label={'Disable on first message'}
+          moreInfoContent="When checked, typing emulation will be disabled for the first message sent by the bot."
+          onCheckChange={updateIsDisabledOnFirstMessage}
+          initialValue={
+            typingEmulation?.isDisabledOnFirstMessage ??
+            defaultSettings.typingEmulation.isDisabledOnFirstMessage
+          }
+        />
+      </SwitchWithRelatedSettings>
+      <HStack>
+        <NumberInput
+          label="Delay between messages:"
+          defaultValue={
+            typingEmulation?.delayBetweenBubbles ??
+            defaultSettings.typingEmulation.delayBetweenBubbles
+          }
+          withVariableButton={false}
+          onValueChange={updateDelayBetweenBubbles}
+          direction="row"
+          maxW={'100px'}
+          min={0}
+          max={5}
+          size="sm"
+        />
+        <Text>seconds</Text>
+      </HStack>
     </Stack>
   )
 }

apps/builder/src/features/whatsapp/startWhatsAppPreview.ts

@@ -128,6 +128,7 @@ export const startWhatsAppPreview = authenticatedProcedure
         messages,
         input,
         clientSideActions,
+        isFirstChatChunk: true,
         credentials: {
           phoneNumberId: env.WHATSAPP_PREVIEW_FROM_PHONE_NUMBER_ID,
           systemUserAccessToken: env.META_SYSTEM_USER_TOKEN,