⚡ (engine) Improve engine overall robustness

packages/react/src/Bubble.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useRef } from 'react'
 import type { BubbleProps } from '@typebot.io/js'
-import { defaultBubbleProps } from './constants'
 
-type Props = BubbleProps & { style?: React.CSSProperties; className?: string }
+type Props = BubbleProps
 
 declare global {
   namespace JSX {
@@ -15,49 +14,40 @@ declare global {
   }
 }
 
-export const Bubble = ({ style, className, ...props }: Props) => {
-  const ref = useRef<(HTMLDivElement & Props) | null>(null)
+type BubbleElement = HTMLElement & Props
+
+export const Bubble = (props: Props) => {
+  const ref = useRef<BubbleElement | null>(null)
 
   useEffect(() => {
     ;(async () => {
-      const { registerBubbleComponent } = await import('@typebot.io/js')
-      registerBubbleComponent(defaultBubbleProps)
+      await import('@typebot.io/js/dist/web')
     })()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  useEffect(() => {
-    if (!ref.current) return
-    ref.current.typebot = props.typebot
-    ref.current.prefilledVariables = props.prefilledVariables
-    ref.current.onClose = props.onClose
-    ref.current.onOpen = props.onOpen
-    ref.current.onNewInputBlock = props.onNewInputBlock
-    ref.current.onAnswer = props.onAnswer
-    ref.current.onPreviewMessageClick = props.onPreviewMessageClick
-    ref.current.onEnd = props.onEnd
-    ref.current.onInit = props.onInit
-  }, [
-    props.onAnswer,
-    props.onClose,
-    props.onNewInputBlock,
-    props.onOpen,
-    props.onPreviewMessageClick,
-    props.prefilledVariables,
-    props.typebot,
-    props.onEnd,
-    props.onInit,
-  ])
+  const updateProps = (element: BubbleElement | null, props: Props) => {
+    if (!element) return
+    Object.assign(element, props)
+  }
 
-  return (
-    <typebot-bubble
-      ref={ref}
-      api-host={props.apiHost}
-      start-group-id={props.startGroupId}
-      result-id={props.resultId}
-      is-preview={props.isPreview}
-      class={className}
-      style={style}
-    />
-  )
+  const initBubble = async () => {
+    const bubbleElement = document.createElement(
+      'typebot-bubble'
+    ) as BubbleElement
+    ref.current = bubbleElement
+    document.body.append(bubbleElement)
+  }
+
+  useEffect(() => {
+    ;(async () => {
+      if (!ref.current) await initBubble()
+      updateProps(ref.current, props)
+    })()
+
+    return () => {
+      ref.current?.remove()
+    }
+  }, [props])
+
+  return null
 }