✨ Add WhatsApp integration beta test (#722)

Related to #401

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx

@@ -5,6 +5,7 @@ import {
   createSignal,
   createUniqueId,
   For,
+  onCleanup,
   onMount,
   Show,
 } from 'solid-js'
@@ -268,6 +269,11 @@ export const ConversationContainer = (props: Props) => {
     }
   }
 
+  onCleanup(() => {
+    setStreamingMessage(undefined)
+    setFormattedMessages([])
+  })
+
   const handleSkip = () => sendMessage(undefined)
 
   return (

packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx

@@ -1,11 +1,11 @@
 import { TypingBubble } from '@/components'
 import type { TextBubbleContent, TypingEmulation } from '@typebot.io/schemas'
 import { For, createSignal, onCleanup, onMount } from 'solid-js'
-import { computeTypingDuration } from '../helpers/computeTypingDuration'
 import { PlateBlock } from './plate/PlateBlock'
 import { computePlainText } from '../helpers/convertRichTextToPlainText'
 import { clsx } from 'clsx'
 import { isMobile } from '@/utils/isMobileSignal'
+import { computeTypingDuration } from '@typebot.io/lib/computeTypingDuration'
 
 type Props = {
   content: TextBubbleContent
@@ -15,12 +15,6 @@ type Props = {
 
 export const showAnimationDuration = 400
 
-const defaultTypingEmulation = {
-  enabled: true,
-  speed: 300,
-  maxDelay: 1.5,
-}
-
 let typingTimeout: NodeJS.Timeout
 
 export const TextBubble = (props: Props) => {
@@ -41,10 +35,10 @@ export const TextBubble = (props: Props) => {
     const typingDuration =
       props.typingEmulation?.enabled === false
         ? 0
-        : computeTypingDuration(
-            plainText,
-            props.typingEmulation ?? defaultTypingEmulation
-          )
+        : computeTypingDuration({
+            bubbleContent: plainText,
+            typingSettings: props.typingEmulation,
+          })
     typingTimeout = setTimeout(onTypingEnd, typingDuration)
   })
 

packages/embeds/js/src/features/blocks/bubbles/textBubble/helpers/computeTypingDuration.ts

@@ -1,16 +0,0 @@
-import type { TypingEmulation } from '@typebot.io/schemas'
-
-export const computeTypingDuration = (
-  bubbleContent: string,
-  typingSettings: TypingEmulation
-) => {
-  let wordCount = bubbleContent.match(/(\w+)/g)?.length ?? 0
-  if (wordCount === 0) wordCount = bubbleContent.length
-  const typedWordsPerMinute = typingSettings.speed
-  let typingTimeout = typingSettings.enabled
-    ? (wordCount / typedWordsPerMinute) * 60000
-    : 0
-  if (typingTimeout > typingSettings.maxDelay * 1000)
-    typingTimeout = typingSettings.maxDelay * 1000
-  return typingTimeout
-}

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",