✨ Add Next.js embed library

packages/embeds/react/src/Bubble.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import type { BubbleProps } from '@typebot.io/js'
+import '@typebot.io/js/dist/web'
 
 type Props = BubbleProps
 
@@ -18,17 +19,6 @@ type BubbleElement = HTMLElement & Props
 
 export const Bubble = (props: Props) => {
   const ref = useRef<BubbleElement | null>(null)
-  const [isInitialized, setIsInitialized] = useState(false)
-
-  useEffect(() => {
-    ;(async () => {
-      await import('@typebot.io/js/dist/web')
-      setIsInitialized(true)
-    })()
-    return () => {
-      ref.current?.remove()
-    }
-  }, [])
 
   const attachBubbleToDom = useCallback((props: Props) => {
     const bubbleElement = document.createElement(
@@ -40,10 +30,9 @@ export const Bubble = (props: Props) => {
   }, [])
 
   useEffect(() => {
-    if (!isInitialized) return
     if (!ref.current) attachBubbleToDom(props)
     injectPropsToElement(ref.current as BubbleElement, props)
-  }, [attachBubbleToDom, isInitialized, props])
+  }, [attachBubbleToDom, props])
 
   const injectPropsToElement = (element: BubbleElement, props: Props) => {
     Object.assign(element, props)
@@ -51,3 +40,5 @@ export const Bubble = (props: Props) => {
 
   return null
 }
+
+export default Bubble

packages/embeds/react/src/Popup.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import type { PopupProps } from '@typebot.io/js'
+import '@typebot.io/js/dist/web'
 
 type Props = PopupProps
 
@@ -18,17 +19,6 @@ type PopupElement = HTMLElement & Props
 
 export const Popup = (props: Props) => {
   const ref = useRef<PopupElement | null>(null)
-  const [isInitialized, setIsInitialized] = useState(false)
-
-  useEffect(() => {
-    ;(async () => {
-      await import('@typebot.io/js/dist/web')
-      setIsInitialized(true)
-    })()
-    return () => {
-      ref.current?.remove()
-    }
-  }, [])
 
   const attachPopupToDom = useCallback((props: Props) => {
     const popupElement = document.createElement('typebot-popup') as PopupElement
@@ -38,10 +28,9 @@ export const Popup = (props: Props) => {
   }, [])
 
   useEffect(() => {
-    if (!isInitialized) return
     if (!ref.current) attachPopupToDom(props)
     injectPropsToElement(ref.current as PopupElement, props)
-  }, [attachPopupToDom, isInitialized, props])
+  }, [attachPopupToDom, props])
 
   const injectPropsToElement = (element: PopupElement, props: Props) => {
     Object.assign(element, props)
@@ -49,3 +38,5 @@ export const Popup = (props: Props) => {
 
   return null
 }
+
+export default Popup

packages/embeds/react/src/Standard.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import type { BotProps } from '@typebot.io/js'
+import '@typebot.io/js/dist/web'
 
 type Props = BotProps & {
   style?: React.CSSProperties
@@ -22,12 +23,6 @@ type StandardElement = HTMLElement & Props
 export const Standard = ({ style, className, ...assignableProps }: Props) => {
   const ref = useRef<StandardElement | null>(null)
 
-  useEffect(() => {
-    ;(async () => {
-      await import('@typebot.io/js/dist/web')
-    })()
-  }, [])
-
   useEffect(() => {
     if (!ref.current) return
     Object.assign(ref.current, assignableProps)
@@ -35,3 +30,5 @@ export const Standard = ({ style, className, ...assignableProps }: Props) => {
 
   return <typebot-standard ref={ref} style={style} class={className} />
 }
+
+export default Standard

packages/embeds/react/src/index.ts

@@ -1,3 +1,4 @@
 export { Standard } from './Standard'
 export { Bubble } from './Bubble'
 export { Popup } from './Popup'
+export * from '@typebot.io/js'