✨ Add Bubble and Popup in embed lib v2

Closes #214

packages/react/src/Bubble.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import type { BubbleProps } from '@typebot.io/js'
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'typebot-bubble': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
+    }
+  }
+}
+
+export const Bubble = (props: BubbleProps) => {
+  useEffect(() => {
+    ;(async () => {
+      const { registerBubbleComponent } = await import('@typebot.io/js')
+      registerBubbleComponent(props)
+    })()
+  }, [props])
+
+  return <typebot-bubble />
+}

packages/react/src/Popup.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import type { PopupProps } from '@typebot.io/js'
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'typebot-popup': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
+    }
+  }
+}
+
+export const Popup = (props: PopupProps) => {
+  useEffect(() => {
+    ;(async () => {
+      const { registerPopupComponent } = await import('@typebot.io/js')
+      registerPopupComponent(props)
+    })()
+  }, [props])
+
+  return <typebot-popup />
+}

packages/react/src/Standard.tsx

@@ -17,8 +17,8 @@ declare global {
 export const Standard = (props: Props) => {
   useEffect(() => {
     ;(async () => {
-      const { registerWebComponents } = await import('@typebot.io/js')
-      registerWebComponents(props)
+      const { registerStandardComponent } = await import('@typebot.io/js')
+      registerStandardComponent(props)
     })()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

packages/react/src/index.ts

@@ -1,6 +1,10 @@
 /* eslint-disable import/no-anonymous-default-export */
 import { Standard } from './Standard'
+import { Bubble } from './Bubble'
+import { Popup } from './Popup'
 
-export { Standard }
+export { Standard, Bubble, Popup }
 
-export default { Standard }
+export default { Standard, Bubble, Popup }
+
+export * from '@typebot.io/js/src/features/commands'

packages/react/src/stories/bubble.stories.tsx

@@ -0,0 +1,54 @@
+import { Bubble } from '@/Bubble'
+import {
+  open,
+  toggle,
+  close,
+  showPreviewMessage,
+  hidePreviewMessage,
+  setPrefilledVariables,
+} from '@typebot.io/js'
+import { useState } from 'react'
+
+export const Default = () => {
+  const [name, setName] = useState('John')
+
+  return (
+    <div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <button onClick={toggle}>Toggle chat window</button>
+        <button onClick={open}>Open chat window</button>
+        <button onClick={close}>Close chat window</button>
+        <button onClick={() => showPreviewMessage()}>
+          Show Preview Message
+        </button>
+        <button onClick={hidePreviewMessage}>Close Preview Message</button>
+        <div>
+          <p>Predefined name:</p>
+          <input value={name} onChange={(e) => setName(e.target.value)} />
+          <button onClick={() => setPrefilledVariables({ Name: name })}>
+            Set predefined name
+          </button>
+        </div>
+      </div>
+
+      <Bubble
+        typebotId="ladleTypebot"
+        apiHost="http://localhost:3001"
+        prefilledVariables={{
+          Name: 'John',
+        }}
+        previewMessage={{
+          avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
+          message: 'Hello, I am a preview message',
+          autoShowDelay: 3000,
+        }}
+        button={{
+          backgroundColor: '#FF7537',
+          icon: {
+            color: 'white',
+          },
+        }}
+      />
+    </div>
+  )
+}

packages/react/src/stories/popup.stories.tsx

@@ -0,0 +1,16 @@
+import { Popup } from '../Popup'
+import { open, toggle } from '@typebot.io/js'
+
+export const Default = () => {
+  return (
+    <>
+      <button onClick={open}>Open modal</button>
+      <button onClick={toggle}>Toggle modal</button>
+      <Popup
+        typebotId="ladleTypebot"
+        apiHost="http://localhost:3001"
+        autoShowDelay={3000}
+      />
+    </>
+  )
+}

packages/react/src/stories/standard.stories.tsx

@@ -0,0 +1,9 @@
+import { Standard } from '..'
+
+export const Default = () => {
+  return (
+    <div style={{ height: '500px' }}>
+      <Standard typebotId="ladleTypebot" apiHost="http://localhost:3001" />
+    </div>
+  )
+}