🐛 (whatsapp) Fix auto start input where it didn't display next bu… (#869)

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

**Release Notes**

- New Feature: Enhanced WhatsApp integration with improved phone number
formatting and session ID generation.
- Refactor: Updated the `startWhatsAppPreview` and
`receiveMessagePreview` functions for better consistency and
readability.
- Bug Fix: Added a check for `phoneNumberId` in the `receiveMessage`
function to prevent errors when it's undefined.
- Documentation: Expanded the WhatsApp integration guide and FAQs in the
docs, providing more detailed instructions and addressing common
queries.
- Chore: Introduced a new `metadata` field in the
`whatsAppWebhookRequestBodySchema` to store the `phone_number_id`.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/builder/src/features/preview/components/WhatsAppPreviewInstructions.tsx

@@ -6,8 +6,8 @@ import {
   Alert,
   AlertIcon,
   Button,
-  Flex,
   HStack,
+  Link,
   SlideFade,
   Stack,
   StackProps,
@@ -84,28 +84,38 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => {
         defaultValue={phoneNumber}
         onChange={setPhoneNumber}
       />
-      <Button
-        isDisabled={isEmpty(phoneNumber) || isMessageSent}
-        isLoading={isSendingMessage}
-        type="submit"
-      >
-        {hasMessageBeenSent ? 'Restart' : 'Start'} the chat
-      </Button>
+      {!isMessageSent && (
+        <Button
+          isDisabled={isEmpty(phoneNumber) || isMessageSent}
+          isLoading={isSendingMessage}
+          type="submit"
+        >
+          {hasMessageBeenSent ? 'Restart' : 'Start'} the chat
+        </Button>
+      )}
       <SlideFade offsetY="20px" in={isMessageSent} unmountOnExit>
-        <Flex>
+        <Stack>
           <Alert status="success" w="100%">
             <HStack>
               <AlertIcon />
               <Stack spacing={1}>
                 <Text fontWeight="semibold">Chat started!</Text>
                 <Text fontSize="sm">
-                  Open WhatsApp to test your bot. The first message can take up
-                  to 2 min to be delivered.
+                  The first message can take up to 2 min to be delivered.
                 </Text>
               </Stack>
             </HStack>
           </Alert>
-        </Flex>
+          <Button
+            as={Link}
+            href={`https://web.whatsapp.com/`}
+            isExternal
+            size="sm"
+            colorScheme="blue"
+          >
+            Open WhatsApp Web
+          </Button>
+        </Stack>
       </SlideFade>
     </Stack>
   )