🐛 (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/viewer/src/features/whatsapp/api/receiveMessage.ts

@@ -23,16 +23,19 @@ export const receiveMessage = publicProcedure
       message: z.string(),
     })
   )
-  .mutation(async ({ input: { entry, workspaceId, credentialsId } }) => {
+  .mutation(async ({ input: { entry, credentialsId, workspaceId } }) => {
     const receivedMessage = entry.at(0)?.changes.at(0)?.value.messages?.at(0)
     if (isNotDefined(receivedMessage)) return { message: 'No message found' }
     const contactName =
       entry.at(0)?.changes.at(0)?.value?.contacts?.at(0)?.profile?.name ?? ''
     const contactPhoneNumber =
       entry.at(0)?.changes.at(0)?.value?.messages?.at(0)?.from ?? ''
+    const phoneNumberId = entry.at(0)?.changes.at(0)?.value
+      .metadata.phone_number_id
+    if (!phoneNumberId) return { message: 'No phone number id found' }
     return resumeWhatsAppFlow({
       receivedMessage,
-      sessionId: `wa-${credentialsId}-${receivedMessage.from}`,
+      sessionId: `wa-${phoneNumberId}-${receivedMessage.from}`,
       credentialsId,
       workspaceId,
       contact: {