⚡ (chat) Improve chat API compatibility with preview mode

packages/react/src/Bubble.tsx

@@ -1,5 +1,8 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import type { BubbleProps } from '@typebot.io/js'
+import { defaultBubbleProps } from './constants'
+
+type Props = BubbleProps & { style?: React.CSSProperties; className?: string }
 
 declare global {
   namespace JSX {
@@ -7,18 +10,54 @@ declare global {
       'typebot-bubble': React.DetailedHTMLProps<
         React.HTMLAttributes<HTMLElement>,
         HTMLElement
-      >
+      > & { class?: string }
     }
   }
 }
 
-export const Bubble = (props: BubbleProps) => {
+export const Bubble = ({ style, className, ...props }: Props) => {
+  const ref = useRef<(HTMLDivElement & Props) | null>(null)
+
   useEffect(() => {
     ;(async () => {
       const { registerBubbleComponent } = await import('@typebot.io/js')
-      registerBubbleComponent(props)
+      registerBubbleComponent(defaultBubbleProps)
     })()
-  }, [props])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-  return <typebot-bubble />
+  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,
+  ])
+
+  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}
+    />
+  )
 }