⚡ (chatwoot) Unmount Typebot embed bubble when opening chatwoot

Closes #1007

packages/bot-engine/blocks/integrations/chatwoot/executeChatwootBlock.ts

@@ -29,6 +29,7 @@ const parseChatwootOpenCode = ({
   typebotId,
 }: ChatwootOptions & { typebotId: string; resultId: string }) => {
   const openChatwoot = `${parseSetUserCode(user, resultId)}
+  if(window.Typebot?.unmount) window.Typebot.unmount();
   window.$chatwoot.setCustomAttributes({
     typebot_result_url: "${
       env.NEXTAUTH_URL

packages/embeds/js/package.json

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

packages/embeds/js/src/features/bubble/components/Bubble.tsx

@@ -31,6 +31,7 @@ export const Bubble = (props: BubbleProps) => {
     'theme',
     'autoShowDelay',
   ])
+  const [isMounted, setIsMounted] = createSignal(true)
   const [prefilledVariables, setPrefilledVariables] = createSignal(
     // eslint-disable-next-line solid/reactivity
     botProps.prefilledVariables
@@ -91,6 +92,7 @@ export const Bubble = (props: BubbleProps) => {
         ...existingPrefilledVariables,
         ...data.variables,
       }))
+    if (data.command === 'unmount') unmount()
   }
 
   const openBot = () => {
@@ -126,8 +128,17 @@ export const Bubble = (props: BubbleProps) => {
     setIsPreviewMessageDisplayed(false)
   }
 
+  const unmount = () => {
+    if (isBotOpened()) {
+      closeBot()
+      setTimeout(() => {
+        setIsMounted(false)
+      }, 200)
+    } else setIsMounted(false)
+  }
+
   return (
-    <>
+    <Show when={isMounted()}>
       <style>{styles}</style>
       <Show when={isPreviewMessageDisplayed()}>
         <PreviewMessage
@@ -175,6 +186,6 @@ export const Bubble = (props: BubbleProps) => {
           />
         </Show>
       </div>
-    </>
+    </Show>
   )
 }

packages/embeds/js/src/features/commands/types.ts

@@ -4,7 +4,7 @@ export type CommandData = {
   isFromTypebot: boolean
 } & (
   | {
-      command: 'open' | 'toggle' | 'close' | 'hidePreviewMessage'
+      command: 'open' | 'toggle' | 'close' | 'hidePreviewMessage' | 'unmount'
     }
   | ShowMessageCommandData
   | SetPrefilledVariablesCommandData

packages/embeds/js/src/features/commands/utils/index.ts

@@ -5,3 +5,4 @@ export * from './setPrefilledVariables'
 export * from './showPreviewMessage'
 export * from './toggle'
 export * from './setInputValue'
+export * from './unmount'

packages/embeds/js/src/features/commands/utils/unmount.ts

@@ -0,0 +1,9 @@
+import { CommandData } from '../types'
+
+export const unmount = () => {
+  const message: CommandData = {
+    isFromTypebot: true,
+    command: 'unmount',
+  }
+  window.postMessage(message)
+}

packages/embeds/js/src/features/popup/components/Popup.tsx

@@ -85,6 +85,7 @@ export const Popup = (props: PopupProps) => {
         ...existingPrefilledVariables,
         ...data.variables,
       }))
+    if (data.command === 'unmount') closeBot()
   }
 
   const openBot = () => {

packages/embeds/js/src/features/standard/components/Standard.tsx

@@ -1,5 +1,6 @@
 import styles from '../../../assets/index.css'
 import { Bot, BotProps } from '@/components/Bot'
+import { CommandData } from '@/features/commands/types'
 import { createSignal, onCleanup, onMount, Show } from 'solid-js'
 
 const hostElementCss = `
@@ -27,9 +28,16 @@ export const Standard = (
   })
 
   onMount(() => {
+    window.addEventListener('message', processIncomingEvent)
     botLauncherObserver.observe(element)
   })
 
+  const processIncomingEvent = (event: MessageEvent<CommandData>) => {
+    const { data } = event
+    if (!data.isFromTypebot) return
+    if (data.command === 'unmount') setIsBotDisplayed(false)
+  }
+
   onCleanup(() => {
     botLauncherObserver.disconnect()
   })

packages/embeds/js/src/window.ts

@@ -10,6 +10,7 @@ import {
   showPreviewMessage,
   toggle,
   setInputValue,
+  unmount,
 } from './features/commands'
 
 export const initStandard = (props: BotProps & { id?: string }) => {
@@ -43,6 +44,7 @@ type Typebot = {
   showPreviewMessage: typeof showPreviewMessage
   toggle: typeof toggle
   setInputValue: typeof setInputValue
+  unmount: typeof unmount
 }
 
 declare const window:
@@ -62,6 +64,7 @@ export const parseTypebot = () => ({
   showPreviewMessage,
   toggle,
   setInputValue,
+  unmount,
 })
 
 export const injectTypebotInWindow = (typebot: Typebot) => {

packages/embeds/nextjs/package.json

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