🚸 (whatsapp) Improve how the whatsapp preview behaves (#873)

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

- New Feature: Updated WhatsApp logo with a new design and color scheme.
- New Feature: Added a help button in the UI linking to documentation,
enhancing user guidance.
- New Feature: Introduced an alert message indicating that the WhatsApp
integration is in beta testing.
- New Feature: Implemented a button to open WhatsApp Web directly from
the application, improving user convenience.
- Refactor: Adjusted the retrieval of `contactPhoneNumber` in
`receiveMessagePreview` function for better data structure
compatibility.
- Refactor: Optimized the initialization and management of the WhatsApp
session in `startWhatsAppPreview`.
- Refactor: Improved the `parseButtonsReply` function by refining
condition checks.
- Refactor: Enhanced the readability of serialized rich text in
`convertRichTextToWhatsAppText` by introducing newline characters.
- Bug Fix: Ensured preservation of `contact` information when resuming
the WhatsApp flow in `resumeWhatsAppFlow`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -20,6 +20,7 @@ import {
   setPhoneNumberInLocalStorage,
 } from '../helpers/phoneNumberFromLocalStorage'
 import { useEditor } from '@/features/editor/providers/EditorProvider'
+import { BuoyIcon, ExternalLinkIcon } from '@/components/icons'
 
 export const WhatsAppPreviewInstructions = (props: StackProps) => {
   const { typebot, save } = useTypebot()
@@ -70,10 +71,22 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => {
       onSubmit={sendWhatsAppPreviewStartMessage}
       {...props}
     >
+      <HStack justifyContent="flex-end">
+        <Text fontSize="sm">Need help?</Text>
+        <Button
+          as={Link}
+          href="https://docs.typebot.io/embed/whatsapp"
+          leftIcon={<BuoyIcon />}
+          size="sm"
+        >
+          Check the docs
+        </Button>
+      </HStack>
       <Alert status="warning">
         <AlertIcon />
-        The WhatsApp integration is still experimental.
-        <br />I appreciate your bug reports 🧡
+        The WhatsApp integration is still in beta test.
+        <br />
+        Your bug reports are greatly appreciate 🧡
       </Alert>
       <TextInput
         label="Your phone number"
@@ -89,12 +102,22 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => {
           isDisabled={isEmpty(phoneNumber) || isMessageSent}
           isLoading={isSendingMessage}
           type="submit"
+          colorScheme="blue"
         >
           {hasMessageBeenSent ? 'Restart' : 'Start'} the chat
         </Button>
       )}
       <SlideFade offsetY="20px" in={isMessageSent} unmountOnExit>
         <Stack>
+          <Button
+            as={Link}
+            href={`https://web.whatsapp.com/`}
+            isExternal
+            colorScheme="blue"
+            rightIcon={<ExternalLinkIcon />}
+          >
+            Open WhatsApp Web
+          </Button>
           <Alert status="success" w="100%">
             <HStack>
               <AlertIcon />
@@ -106,15 +129,6 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => {
               </Stack>
             </HStack>
           </Alert>
-          <Button
-            as={Link}
-            href={`https://web.whatsapp.com/`}
-            isExternal
-            size="sm"
-            colorScheme="blue"
-          >
-            Open WhatsApp Web
-          </Button>
         </Stack>
       </SlideFade>
     </Stack>