⚡ (embed) Option to add a wait event for the embed bubble

Closes #1590

packages/embeds/js/package.json

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

packages/embeds/js/src/components/bubbles/HostBubble.tsx

@@ -51,6 +51,7 @@ export const HostBubble = (props: Props) => (
       <EmbedBubble
         content={props.message.content as EmbedBubbleBlock['content']}
         onTransitionEnd={props.onTransitionEnd}
+        onCompleted={props.onCompleted}
       />
     </Match>
     <Match when={props.message.type === 'custom-embed'}>

packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx

@@ -4,10 +4,12 @@ import { createSignal, onCleanup, onMount } from 'solid-js'
 import { clsx } from 'clsx'
 import { EmbedBubbleBlock } from '@typebot.io/schemas'
 import { defaultEmbedBubbleContent } from '@typebot.io/schemas/features/blocks/bubbles/embed/constants'
+import { isNotEmpty } from '@typebot.io/lib/utils'
 
 type Props = {
   content: EmbedBubbleBlock['content']
   onTransitionEnd?: (ref?: HTMLDivElement) => void
+  onCompleted?: (data?: string) => void
 }
 
 let typingTimeout: NodeJS.Timeout
@@ -20,9 +22,29 @@ export const EmbedBubble = (props: Props) => {
     props.onTransitionEnd ? true : false
   )
 
+  const handleMessage = (
+    event: MessageEvent<{ name?: string; data?: string }>
+  ) => {
+    if (
+      props.content?.waitForEvent?.isEnabled &&
+      isNotEmpty(event.data.name) &&
+      event.data.name === props.content?.waitForEvent.name
+    ) {
+      props.onCompleted?.(
+        props.content.waitForEvent.saveDataInVariableId && event.data.data
+          ? event.data.data
+          : undefined
+      )
+      window.removeEventListener('message', handleMessage)
+    }
+  }
+
   onMount(() => {
     typingTimeout = setTimeout(() => {
       setIsTyping(false)
+      if (props.content?.waitForEvent?.isEnabled) {
+        window.addEventListener('message', handleMessage)
+      }
       setTimeout(() => {
         props.onTransitionEnd?.(ref)
       }, showAnimationDuration)
@@ -31,6 +53,7 @@ export const EmbedBubble = (props: Props) => {
 
   onCleanup(() => {
     if (typingTimeout) clearTimeout(typingTimeout)
+    window.removeEventListener('message', handleMessage)
   })
 
   return (

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.88",
+  "version": "0.2.89",
   "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.2.88",
+  "version": "0.2.89",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",