🚸 Update onboarding bot

Closes #400

packages/embeds/js/package.json

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

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

@@ -112,7 +112,7 @@ export const Popup = (props: PopupProps) => {
         role="dialog"
         aria-modal="true"
         style={{
-          'z-index': 42424242,
+          'z-index': props.theme?.zIndex ?? 42424242,
         }}
       >
         <style>{styles}</style>

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

@@ -3,5 +3,6 @@ export type PopupParams = {
   theme?: {
     width?: string
     backgroundColor?: string
+    zIndex?: number
   }
 }

packages/embeds/nextjs/package.json

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

packages/embeds/react/src/Bubble.tsx

@@ -18,22 +18,29 @@ declare global {
 type BubbleElement = HTMLElement & Props
 
 export const Bubble = (props: Props) => {
-  const ref = useRef<BubbleElement | null>(null)
+  const bubbleElement = useRef<BubbleElement | null>(null)
 
   const attachBubbleToDom = useCallback((props: Props) => {
-    const bubbleElement = document.createElement(
+    const newBubbleElement = document.createElement(
       'typebot-bubble'
     ) as BubbleElement
-    ref.current = bubbleElement
-    injectPropsToElement(ref.current, props)
-    document.body.append(ref.current)
+    bubbleElement.current = newBubbleElement
+    injectPropsToElement(bubbleElement.current, props)
+    document.body.append(bubbleElement.current)
   }, [])
 
   useEffect(() => {
-    if (!ref.current) attachBubbleToDom(props)
-    injectPropsToElement(ref.current as BubbleElement, props)
+    if (!bubbleElement.current) attachBubbleToDom(props)
+    injectPropsToElement(bubbleElement.current as BubbleElement, props)
   }, [attachBubbleToDom, props])
 
+  useEffect(() => {
+    return () => {
+      bubbleElement.current?.remove()
+      bubbleElement.current = null
+    }
+  }, [])
+
   const injectPropsToElement = (element: BubbleElement, props: Props) => {
     Object.assign(element, props)
   }

packages/embeds/react/src/Popup.tsx

@@ -18,25 +18,39 @@ declare global {
 type PopupElement = HTMLElement & Props
 
 export const Popup = (props: Props) => {
-  const ref = useRef<PopupElement | null>(null)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const popupRef = useRef<PopupElement | null>(null)
 
-  const attachPopupToDom = useCallback((props: Props) => {
+  const attachPopupToContainer = useCallback((props: Props) => {
     const popupElement = document.createElement('typebot-popup') as PopupElement
-    ref.current = popupElement
-    injectPropsToElement(ref.current, props)
-    document.body.append(ref.current)
+    popupRef.current = popupElement
+    injectPropsToElement(popupRef.current, props)
+    if (!containerRef.current) {
+      console.warn(
+        'Could not attach popup to container because containerRef.current is null'
+      )
+      return
+    }
+    containerRef.current?.append(popupRef.current)
   }, [])
 
   useEffect(() => {
-    if (!ref.current) attachPopupToDom(props)
-    injectPropsToElement(ref.current as PopupElement, props)
-  }, [attachPopupToDom, props])
+    if (!popupRef.current) attachPopupToContainer(props)
+    injectPropsToElement(popupRef.current as PopupElement, props)
+  }, [attachPopupToContainer, props])
+
+  useEffect(() => {
+    return () => {
+      popupRef.current?.remove()
+      popupRef.current = null
+    }
+  }, [])
 
   const injectPropsToElement = (element: PopupElement, props: Props) => {
     Object.assign(element, props)
   }
 
-  return null
+  return <div ref={containerRef} />
 }
 
 export default Popup