🐛 Fix bot libs mount behavior and prop types

packages/react/.npmignore

@@ -0,0 +1,6 @@
+src
+.env.local.example
+.eslintignore
+.eslintrc.cjs
+rollup.config.js
+tsconfig.json

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,7 +41,7 @@
     "utils": "workspace:*"
   },
   "peerDependencies": {
-    "react": "18.0.0",
+    "react": "18.x",
     "@typebot.io/js": "workspace:*"
   }
 }

packages/react/src/Bubble.tsx

@@ -22,9 +22,17 @@ export const Bubble = (props: Props) => {
   useEffect(() => {
     ;(async () => {
       await import('@typebot.io/js/dist/web')
+      initBubble()
     })()
+    return () => {
+      ref.current?.remove()
+    }
   }, [])
 
+  useEffect(() => {
+    updateProps(ref.current, props)
+  }, [props])
+
   const updateProps = (element: BubbleElement | null, props: Props) => {
     if (!element) return
     Object.assign(element, props)
@@ -34,20 +42,10 @@ export const Bubble = (props: Props) => {
     const bubbleElement = document.createElement(
       'typebot-bubble'
     ) as BubbleElement
+    if (ref.current) return
     ref.current = bubbleElement
-    document.body.append(bubbleElement)
+    document.body.append(ref.current)
   }
 
-  useEffect(() => {
-    ;(async () => {
-      if (!ref.current) await initBubble()
-      updateProps(ref.current, props)
-    })()
-
-    return () => {
-      ref.current?.remove()
-    }
-  }, [props])
-
   return null
 }

packages/react/src/Popup.tsx

@@ -22,30 +22,28 @@ export const Popup = (props: Props) => {
   useEffect(() => {
     ;(async () => {
       await import('@typebot.io/js/dist/web')
+      initPopup()
     })()
+    return () => {
+      ref.current?.remove()
+    }
   }, [])
 
+  useEffect(() => {
+    updateProps(ref.current, props)
+  }, [props])
+
   const updateProps = (element: PopupElement | null, props: Props) => {
     if (!element) return
     Object.assign(element, props)
   }
 
-  const initBubble = async () => {
+  const initPopup = async () => {
     const popupElement = document.createElement('typebot-popup') as PopupElement
+    if (ref.current) return
     ref.current = popupElement
-    document.body.append(popupElement)
+    document.body.append(ref.current)
   }
 
-  useEffect(() => {
-    ;(async () => {
-      if (!ref.current) await initBubble()
-      updateProps(ref.current, props)
-    })()
-
-    return () => {
-      ref.current?.remove()
-    }
-  }, [props])
-
   return null
 }