♻️ Re-organize workspace folders

packages/embeds/react/.env.local.example

@@ -0,0 +1 @@
+DATABASE_URL=postgresql://postgres:typebot@localhost:5432/typebot

packages/embeds/react/.eslintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ['custom'],
+  rules: {
+    '@next/next/no-img-element': 'off',
+    '@next/next/no-html-link-for-pages': 'off',
+  },
+}

packages/embeds/react/.npmignore

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

packages/embeds/react/.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

packages/embeds/react/README.md

@@ -0,0 +1,144 @@
+## Install
+
+```bash
+npm install @typebot.io/js @typebot.io/react
+```
+
+## Standard
+
+```tsx
+import { Standard } from '@typebot.io/react'
+
+const App = () => {
+  return (
+    <Standard
+      typebot="lead-generation-copy-3luzm6b"
+      style={{ width: '100%', height: '600px' }}
+    />
+  )
+}
+```
+
+This code is creating a container with a 100% width (will match parent width) and 600px height.
+
+## Popup
+
+```tsx
+import { Popup } from '@typebot.io/react'
+
+const App = () => {
+  return <Popup typebot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
+}
+```
+
+This code will automatically trigger the popup window after 3 seconds.
+
+### Open or Close a popup
+
+You can use these commands:
+
+```js
+import { open } from '@typebot.io/react'
+
+open()
+```
+
+```js
+import { close } from '@typebot.io/react'
+
+close()
+```
+
+```js
+import { toggle } from '@typebot.io/react'
+
+toggle()
+```
+
+## Bubble
+
+```tsx
+import { Bubble } from '@typebot.io/react'
+
+const App = () => {
+  return (
+    <Bubble
+      typebot="lead-generation-copy-3luzm6b"
+      previewMessage={{
+        message: 'I have a question for you!',
+        autoShowDelay: 5000,
+        avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
+      }}
+      theme={{
+        button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
+        previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
+      }}
+    />
+  )
+}
+```
+
+This code will show the bubble and let a preview message appear after 5 seconds.
+
+### Open or close the preview message
+
+You can use these commands:
+
+```js
+import { showPreviewMessage } from '@typebot.io/react'
+
+Typebot.showPreviewMessage()
+```
+
+```js
+import { hidePreviewMessage } from '@typebot.io/react'
+
+Typebot.hidePreviewMessage()
+```
+
+### Open or close the chat window
+
+You can use these commands:
+
+```js
+import { open } from '@typebot.io/react'
+
+open()
+```
+
+```js
+import { close } from '@typebot.io/react'
+
+close()
+```
+
+```js
+import { toggle } from '@typebot.io/react'
+
+toggle()
+```
+
+## Additional configuration
+
+You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
+
+```tsx
+import { Standard } from '@typebot.io/react'
+
+const App = () => {
+  return (
+    <Standard
+      typebot="lead-generation-copy-3luzm6b"
+      style={{ width: '100%', height: '600px' }}
+      prefilledVariables={{
+        'Current URL': 'https://my-site/account',
+        'User name': 'John Doe',
+      }}
+    />
+  )
+}
+```
+
+It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables).
+
+Note that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.

packages/embeds/react/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@typebot.io/react",
+  "version": "0.0.28",
+  "description": "React library to display typebots on your website",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "stories:dev": "ladle serve -p 3006",
+    "stories:build": "ladle build",
+    "dev": "rollup --watch --config rollup.config.js",
+    "build": "rollup --config rollup.config.js",
+    "lint": "eslint --fix \"src/**/*.ts*\""
+  },
+  "keywords": [],
+  "author": "Baptiste Arnaud",
+  "license": "ISC",
+  "dependencies": {
+    "@ladle/react": "2.5.1"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.21.0",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-terser": "0.4.0",
+    "@rollup/plugin-typescript": "11.0.0",
+    "@typebot.io/js": "workspace:*",
+    "@types/node": "18.15.3",
+    "@types/react": "18.0.28",
+    "@typebot.io/prisma": "workspace:*",
+    "eslint": "8.36.0",
+    "eslint-config-custom": "workspace:*",
+    "@typebot.io/schemas": "workspace:*",
+    "react": "18.2.0",
+    "rollup": "3.19.1",
+    "rollup-plugin-typescript-paths": "1.4.0",
+    "@typebot.io/tsconfig": "workspace:*",
+    "tslib": "2.5.0",
+    "tsx": "3.12.5",
+    "typescript": "4.9.5",
+    "@typebot.io/lib": "workspace:*"
+  },
+  "peerDependencies": {
+    "@typebot.io/js": "workspace:*",
+    "react": "18.x"
+  }
+}

packages/embeds/react/rollup.config.js

@@ -0,0 +1,32 @@
+import resolve from '@rollup/plugin-node-resolve'
+import terser from '@rollup/plugin-terser'
+import { babel } from '@rollup/plugin-babel'
+import typescript from '@rollup/plugin-typescript'
+import { typescriptPaths } from 'rollup-plugin-typescript-paths'
+
+const extensions = ['.ts', '.tsx']
+
+const indexConfig = {
+  input: './src/index.ts',
+  output: {
+    file: './dist/index.js',
+    format: 'es',
+  },
+  external: ['react', 'react/jsx-runtime', '@typebot.io/js'],
+  plugins: [
+    resolve({ extensions }),
+    babel({
+      babelHelpers: 'bundled',
+      exclude: 'node_modules/**',
+      presets: ['@babel/preset-react', '@babel/preset-typescript'],
+      extensions,
+    }),
+    typescript(),
+    typescriptPaths({ preserveExtensions: true }),
+    terser({ output: { comments: false } }),
+  ],
+}
+
+const configs = [indexConfig]
+
+export default configs

packages/embeds/react/src/Bubble.tsx

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { BubbleProps } from '@typebot.io/js'
+
+type Props = BubbleProps
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'typebot-bubble': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & { class?: string }
+    }
+  }
+}
+
+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(
+      'typebot-bubble'
+    ) as BubbleElement
+    ref.current = bubbleElement
+    injectPropsToElement(ref.current, props)
+    document.body.append(ref.current)
+  }, [])
+
+  useEffect(() => {
+    if (!isInitialized) return
+    if (!ref.current) attachBubbleToDom(props)
+    injectPropsToElement(ref.current as BubbleElement, props)
+  }, [attachBubbleToDom, isInitialized, props])
+
+  const injectPropsToElement = (element: BubbleElement, props: Props) => {
+    Object.assign(element, props)
+  }
+
+  return null
+}

packages/embeds/react/src/Popup.tsx

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { PopupProps } from '@typebot.io/js'
+
+type Props = PopupProps
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'typebot-popup': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & { class?: string }
+    }
+  }
+}
+
+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
+    ref.current = popupElement
+    injectPropsToElement(ref.current, props)
+    document.body.append(ref.current)
+  }, [])
+
+  useEffect(() => {
+    if (!isInitialized) return
+    if (!ref.current) attachPopupToDom(props)
+    injectPropsToElement(ref.current as PopupElement, props)
+  }, [attachPopupToDom, isInitialized, props])
+
+  const injectPropsToElement = (element: PopupElement, props: Props) => {
+    Object.assign(element, props)
+  }
+
+  return null
+}

packages/embeds/react/src/Standard.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react'
+import type { BotProps } from '@typebot.io/js'
+
+type Props = BotProps & {
+  style?: React.CSSProperties
+  className?: string
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'typebot-standard': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & { class?: string }
+    }
+  }
+}
+
+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)
+  }, [assignableProps])
+
+  return <typebot-standard ref={ref} style={style} class={className} />
+}

packages/embeds/react/src/index.ts

@@ -0,0 +1,3 @@
+export { Standard } from './Standard'
+export { Bubble } from './Bubble'
+export { Popup } from './Popup'

packages/embeds/react/src/stories/assets/leadGenerationTypebot.ts

@@ -0,0 +1,487 @@
+import {
+  BackgroundType,
+  BubbleBlockType,
+  ComparisonOperators,
+  InputBlockType,
+  LogicalOperator,
+  LogicBlockType,
+  StartTypebot,
+} from '@typebot.io/schemas'
+
+export const leadGenerationTypebot: StartTypebot = {
+  id: 'clckrl4q5000t3b6sabwokaar',
+  groups: [
+    {
+      id: 'clckrl4q5000g3b6skizhd262',
+      title: 'Start',
+      blocks: [
+        {
+          id: '22HP69iipkLjJDTUcc1AWW',
+          type: 'start',
+          label: 'Start',
+          groupId: 'clckrl4q5000g3b6skizhd262',
+          outgoingEdgeId: 'clckrlxp400173b6sktq7gqm2',
+        },
+      ],
+      graphCoordinates: { x: 0, y: 0 },
+    },
+    {
+      id: 'clckrl4q5000h3b6sjipn4qga',
+      title: 'Welcome',
+      blocks: [
+        {
+          id: 'sc1y8VwDabNJgiVTBi4qtif',
+          type: BubbleBlockType.TEXT,
+          content: {
+            html: '<div>Welcome to <span class="slate-bold">AA</span> (Awesome Agency)</div>',
+            richText: [
+              {
+                type: 'p',
+                children: [
+                  { text: 'Welcome to ' },
+                  { bold: true, text: 'AA' },
+                  { text: ' (Awesome Agency)' },
+                ],
+              },
+            ],
+            plainText: 'Welcome to AA (Awesome Agency)',
+          },
+          groupId: 'clckrl4q5000h3b6sjipn4qga',
+        },
+        {
+          id: 's7YqZTBeyCa4Hp3wN2j922c',
+          type: BubbleBlockType.IMAGE,
+          content: {
+            url: 'https://media2.giphy.com/media/XD9o33QG9BoMis7iM4/giphy.gif?cid=fe3852a3ihg8rvipzzky5lybmdyq38fhke2tkrnshwk52c7d&rid=giphy.gif&ct=g',
+          },
+          groupId: 'clckrl4q5000h3b6sjipn4qga',
+        },
+        {
+          id: 'sbjZWLJGVkHAkDqS4JQeGow',
+          type: InputBlockType.CHOICE,
+          items: [
+            {
+              id: 'hQw2zbp7FDX7XYK9cFpbgC',
+              type: 0,
+              blockId: 'sbjZWLJGVkHAkDqS4JQeGow',
+              content: 'Hi!',
+            },
+          ],
+          groupId: 'clckrl4q5000h3b6sjipn4qga',
+          options: { buttonLabel: 'Send', isMultipleChoice: false },
+          outgoingEdgeId: 'clckrm7td001b3b6s2769fh7k',
+        },
+      ],
+      graphCoordinates: { x: -8.26171875, y: 457.515625 },
+    },
+    {
+      id: 'clckrl4q5000i3b6stgxyvscq',
+      title: 'Email',
+      blocks: [
+        {
+          id: 'sxeYubYN6XzhAfG7m9Fivhc',
+          type: BubbleBlockType.TEXT,
+          content: {
+            html: '<div>Great! Nice to meet you {{Name}}</div>',
+            richText: [
+              {
+                type: 'p',
+                children: [{ text: 'Great! Nice to meet you {{Name}}' }],
+              },
+            ],
+            plainText: 'Great! Nice to meet you {{Name}}',
+          },
+          groupId: 'clckrl4q5000i3b6stgxyvscq',
+        },
+        {
+          id: 'scQ5kduafAtfP9T8SHUJnGi',
+          type: BubbleBlockType.TEXT,
+          content: {
+            html: '<div>What&#x27;s the best email we can reach you at?</div>',
+            richText: [
+              {
+                type: 'p',
+                children: [
+                  { text: "What's the best email we can reach you at?" },
+                ],
+              },
+            ],
+            plainText: "What's the best email we can reach you at?",
+          },
+          groupId: 'clckrl4q5000i3b6stgxyvscq',
+        },
+        {
+          id: 'snbsad18Bgry8yZ8DZCfdFD',
+          type: InputBlockType.EMAIL,
+          groupId: 'clckrl4q5000i3b6stgxyvscq',
+          options: {
+            labels: { button: 'Send', placeholder: 'Type your email...' },
+            variableId: 'v3VFChNVSCXQ2rXv4DrJ8Ah',
+            retryMessageContent:
+              "This email doesn't seem to be valid. Can you type it again?",
+          },
+          outgoingEdgeId: 'clckrl4q5000q3b6s5czdtm8x',
+        },
+      ],
+      graphCoordinates: { x: 669, y: 141 },
+    },
+    {
+      id: 'clckrl4q5000j3b6sloirnxza',
+      title: 'Name',
+      blocks: [
+        {
+          id: 'sgtE2Sy7cKykac9B223Kq9R',
+          type: BubbleBlockType.TEXT,
+          content: {
+            html: '<div>What&#x27;s your name?</div>',
+            richText: [
+              { type: 'p', children: [{ text: "What's your name?" }] },
+            ],
+            plainText: "What's your name?",
+          },
+          groupId: 'clckrl4q5000j3b6sloirnxza',
+        },
+        {
+          id: 'sqEsMo747LTDnY9FjQcEwUv',
+          type: InputBlockType.TEXT,
+          groupId: 'clckrl4q5000j3b6sloirnxza',
+          options: {
+            isLong: false,
+            labels: {
+              button: 'Send',
+              placeholder: 'Type your answer...',
+            },
+            variableId: 'giiLFGw5xXBCHzvp1qAbdX',
+          },
+          outgoingEdgeId: 'clckrl4q5000p3b6shb5bfnzt',
+        },
+      ],
+      graphCoordinates: { x: 340, y: 143 },
+    },
+    {
+      id: 'clckrl4q5000k3b6s0anufmgy',
+      title: 'Services',
+      blocks: [
+        {
+          id: 'su7HceVXWyTCzi2vv3m4QbK',
+          type: BubbleBlockType.TEXT,
+          content: {
+            html: '<div>What services are you interested in?</div>',
+            richText: [
+              {
+                type: 'p',
+                children: [{ text: 'What services are you interested in?' }],
+              },
+            ],
+            plainText: 'What services are you interested in?',
+          },
+          groupId: 'clckrl4q5000k3b6s0anufmgy',
+        },
+        {
+          id: 's5VQGsVF4hQgziQsXVdwPDW',
+          type: InputBlockType.CHOICE,
+          items: [
+            {
+              id: 'fnLCBF4NdraSwcubnBhk8H',
+              type: 0,
+              blockId: 's5VQGsVF4hQgziQsXVdwPDW',
+              content: 'Website dev',
+            },
+            {
+              id: 'a782h8ynMouY84QjH7XSnR',
+              type: 0,
+              blockId: 's5VQGsVF4hQgziQsXVdwPDW',
+              content: 'Content Marketing',
+            },
+            {
+              id: 'jGvh94zBByvVFpSS3w97zY',
+              type: 0,
+              blockId: 's5VQGsVF4hQgziQsXVdwPDW',
+              content: 'Social Media',
+            },
+            {
+              id: '6PRLbKUezuFmwWtLVbvAQ7',
+              type: 0,
+              blockId: 's5VQGsVF4hQgziQsXVdwPDW',
+              content: 'UI / UX Design',
+            },
+          ],
+          groupId: 'clckrl4q5000k3b6s0anufmgy',
+          options: { buttonLabel: 'Send', isMultipleChoice: true },
+          outgoingEdgeId: 'clckrl4q5000r3b6s9yxsuxu7',
+        },
+      ],
+      graphCoordinates: { x: 1002, y: 144 },
+    },
+    {
+      id: 'clckrl4q5000l3b6scn1r1nns',
+      title: 'Additional information',
+      blocks: [
+        {
+          id: 'sqR8Sz9gW21aUYKtUikq7qZ',
+          type: BubbleBlockType.TEXT,
+          content: {
+            html: '<div>Can you tell me a bit more about your needs?</div>',
+            richText: [
+              {
+                type: 'p',
+                children: [
+                  { text: 'Can you tell me a bit more about your needs?' },
+                ],
+              },
+            ],
+            plainText: 'Can you tell me a bit more about your needs?',
+          },
+          groupId: 'clckrl4q5000l3b6scn1r1nns',
+        },
+        {
+          id: 'sqFy2G3C1mh9p6s3QBdSS5x',
+          type: InputBlockType.TEXT,
+          groupId: 'clckrl4q5000l3b6scn1r1nns',
+          options: {
+            isLong: true,
+            labels: { button: 'Send', placeholder: 'Type your answer...' },
+          },
+          outgoingEdgeId: 'clckrl4q5000s3b6stx5nnqbz',
+        },
+      ],
+      graphCoordinates: { x: 1337, y: 145 },
+    },
+    {
+      id: 'clckrl4q5000m3b6srabr5a2s',
+      title: 'Bye',
+      blocks: [
+        {
+          id: 'seLegenCgUwMopRFeAefqZ7',
+          type: BubbleBlockType.TEXT,
+          content: {
+            html: '<div>Perfect!</div>',
+            richText: [{ type: 'p', children: [{ text: 'Perfect!' }] }],
+            plainText: 'Perfect!',
+          },
+          groupId: 'clckrl4q5000m3b6srabr5a2s',
+        },
+        {
+          id: 's779Q1y51aVaDUJVrFb16vv',
+          type: BubbleBlockType.TEXT,
+          content: {
+            html: '<div>We&#x27;ll get back to you at {{Email}}</div>',
+            richText: [
+              {
+                type: 'p',
+                children: [{ text: "We'll get back to you at {{Email}}" }],
+              },
+            ],
+            plainText: "We'll get back to you at {{Email}}",
+          },
+          groupId: 'clckrl4q5000m3b6srabr5a2s',
+        },
+      ],
+      graphCoordinates: { x: 1668, y: 143 },
+    },
+    {
+      id: 'clckrlksq000z3b6sequnj9m3',
+      graphCoordinates: { x: -355.04296875, y: 187.5078125 },
+      title: 'Group #7',
+      blocks: [
+        {
+          id: 'clckrlksq00103b6s3exi90al',
+          groupId: 'clckrlksq000z3b6sequnj9m3',
+          type: LogicBlockType.CONDITION,
+          items: [
+            {
+              id: 'clckrlksq00113b6sz8naxdwx',
+              blockId: 'clckrlksq00103b6s3exi90al',
+              type: 1,
+              content: {
+                comparisons: [
+                  {
+                    id: 'clckrllsm00123b6sz38325aw',
+                    variableId: 'giiLFGw5xXBCHzvp1qAbdX',
+                    comparisonOperator: ComparisonOperators.IS_SET,
+                  },
+                ],
+                logicalOperator: LogicalOperator.AND,
+              },
+              outgoingEdgeId: 'clckrlt0000143b6sn9euzwnm',
+            },
+          ],
+          outgoingEdgeId: 'clckrluh600153b6s66p2q6wa',
+        },
+      ],
+    },
+    {
+      id: 'clckrm1zq00183b6sz8ydapth',
+      graphCoordinates: { x: 333.8046875, y: 408.1328125 },
+      title: 'Group #7 copy',
+      blocks: [
+        {
+          id: 'clckrm1zr00193b6szpz37plc',
+          groupId: 'clckrm1zq00183b6sz8ydapth',
+          type: LogicBlockType.CONDITION,
+          items: [
+            {
+              id: 'clckrm1zr001a3b6s1hlfm2jh',
+              blockId: 'clckrm1zr00193b6szpz37plc',
+              type: 1,
+              content: {
+                comparisons: [
+                  {
+                    id: 'clckrllsm00123b6sz38325aw',
+                    variableId: 'giiLFGw5xXBCHzvp1qAbdX',
+                    comparisonOperator: ComparisonOperators.IS_SET,
+                  },
+                ],
+                logicalOperator: LogicalOperator.AND,
+              },
+              outgoingEdgeId: 'clckrma26001c3b6sup2bdbte',
+            },
+          ],
+          outgoingEdgeId: 'clckrmbbk001d3b6shr35s2ao',
+        },
+      ],
+    },
+    {
+      id: 'clckrlqil00133b6sk6msgqt1',
+      graphCoordinates: { x: -23.78515625, y: 199.6875 },
+      title: 'Group #8',
+      blocks: [
+        {
+          id: 'clckrl870000y3b6sxyd24qwc',
+          groupId: 'clckrlqil00133b6sk6msgqt1',
+          type: BubbleBlockType.TEXT,
+          content: {
+            html: '<div>Hi {{Name}}!</div>',
+            richText: [{ type: 'p', children: [{ text: 'Hi {{Name}}!' }] }],
+            plainText: 'Hi {{Name}}!',
+          },
+          outgoingEdgeId: 'clckrlwmd00163b6sjlass4p8',
+        },
+      ],
+    },
+  ],
+  variables: [
+    { id: 'giiLFGw5xXBCHzvp1qAbdX', name: 'Name' },
+    { id: 'v3VFChNVSCXQ2rXv4DrJ8Ah', name: 'Email' },
+  ],
+  edges: [
+    {
+      id: 'clckrl4q5000p3b6shb5bfnzt',
+      to: { groupId: 'clckrl4q5000i3b6stgxyvscq' },
+      from: {
+        blockId: 'sqEsMo747LTDnY9FjQcEwUv',
+        groupId: 'clckrl4q5000j3b6sloirnxza',
+      },
+    },
+    {
+      id: 'clckrl4q5000q3b6s5czdtm8x',
+      to: { groupId: 'clckrl4q5000k3b6s0anufmgy' },
+      from: {
+        blockId: 'snbsad18Bgry8yZ8DZCfdFD',
+        groupId: 'clckrl4q5000i3b6stgxyvscq',
+      },
+    },
+    {
+      id: 'clckrl4q5000r3b6s9yxsuxu7',
+      to: { groupId: 'clckrl4q5000l3b6scn1r1nns' },
+      from: {
+        blockId: 's5VQGsVF4hQgziQsXVdwPDW',
+        groupId: 'clckrl4q5000k3b6s0anufmgy',
+      },
+    },
+    {
+      id: 'clckrl4q5000s3b6stx5nnqbz',
+      to: { groupId: 'clckrl4q5000m3b6srabr5a2s' },
+      from: {
+        blockId: 'sqFy2G3C1mh9p6s3QBdSS5x',
+        groupId: 'clckrl4q5000l3b6scn1r1nns',
+      },
+    },
+    {
+      from: {
+        groupId: 'clckrlksq000z3b6sequnj9m3',
+        blockId: 'clckrlksq00103b6s3exi90al',
+        itemId: 'clckrlksq00113b6sz8naxdwx',
+      },
+      to: { groupId: 'clckrlqil00133b6sk6msgqt1' },
+      id: 'clckrlt0000143b6sn9euzwnm',
+    },
+    {
+      from: {
+        groupId: 'clckrlksq000z3b6sequnj9m3',
+        blockId: 'clckrlksq00103b6s3exi90al',
+      },
+      to: { groupId: 'clckrl4q5000h3b6sjipn4qga' },
+      id: 'clckrluh600153b6s66p2q6wa',
+    },
+    {
+      from: {
+        groupId: 'clckrlqil00133b6sk6msgqt1',
+        blockId: 'clckrl870000y3b6sxyd24qwc',
+      },
+      to: { groupId: 'clckrl4q5000h3b6sjipn4qga' },
+      id: 'clckrlwmd00163b6sjlass4p8',
+    },
+    {
+      from: {
+        groupId: 'clckrl4q5000g3b6skizhd262',
+        blockId: '22HP69iipkLjJDTUcc1AWW',
+      },
+      to: { groupId: 'clckrlksq000z3b6sequnj9m3' },
+      id: 'clckrlxp400173b6sktq7gqm2',
+    },
+    {
+      from: {
+        groupId: 'clckrl4q5000h3b6sjipn4qga',
+        blockId: 'sbjZWLJGVkHAkDqS4JQeGow',
+      },
+      to: { groupId: 'clckrm1zq00183b6sz8ydapth' },
+      id: 'clckrm7td001b3b6s2769fh7k',
+    },
+    {
+      from: {
+        groupId: 'clckrm1zq00183b6sz8ydapth',
+        blockId: 'clckrm1zr00193b6szpz37plc',
+        itemId: 'clckrm1zr001a3b6s1hlfm2jh',
+      },
+      to: { groupId: 'clckrl4q5000i3b6stgxyvscq' },
+      id: 'clckrma26001c3b6sup2bdbte',
+    },
+    {
+      from: {
+        groupId: 'clckrm1zq00183b6sz8ydapth',
+        blockId: 'clckrm1zr00193b6szpz37plc',
+      },
+      to: { groupId: 'clckrl4q5000j3b6sloirnxza' },
+      id: 'clckrmbbk001d3b6shr35s2ao',
+    },
+  ],
+  theme: {
+    chat: {
+      inputs: {
+        color: '#303235',
+        backgroundColor: '#FFFFFF',
+        placeholderColor: '#9095A0',
+      },
+      buttons: { color: '#FFFFFF', backgroundColor: '#0042DA' },
+      hostAvatar: {
+        url: 'https://avatars.githubusercontent.com/u/16015833?v=4',
+        isEnabled: true,
+      },
+      hostBubbles: { color: '#303235', backgroundColor: '#F7F8FF' },
+      guestBubbles: { color: '#FFFFFF', backgroundColor: '#FF8E21' },
+    },
+    general: {
+      font: 'Open Sans',
+      background: { type: BackgroundType.COLOR, content: '#fff' },
+    },
+  },
+  settings: {
+    general: { isBrandingEnabled: true },
+    metadata: {
+      description:
+        'Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.',
+    },
+    typingEmulation: { speed: 300, enabled: true, maxDelay: 1.5 },
+  },
+}

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

@@ -0,0 +1,56 @@
+import { Bubble } from '@/Bubble'
+import {
+  open,
+  toggle,
+  close,
+  showPreviewMessage,
+  hidePreviewMessage,
+  setPrefilledVariables,
+} from '@typebot.io/js'
+import { useState } from 'react'
+import { leadGenerationTypebot } from './assets/leadGenerationTypebot'
+
+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
+        typebot={leadGenerationTypebot}
+        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,
+        }}
+        theme={{
+          button: {
+            backgroundColor: '#FF7537',
+            iconColor: 'white',
+          },
+        }}
+        isPreview
+      />
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,28 @@
+import { Standard } from '..'
+import { leadGenerationTypebot } from './assets/leadGenerationTypebot'
+
+export const Default = () => {
+  return (
+    <div style={{ height: '500px' }}>
+      <Standard
+        typebot={leadGenerationTypebot}
+        apiHost="http://localhost:3001"
+        isPreview
+      />
+    </div>
+  )
+}
+
+export const StartWhenIntoView = () => {
+  return (
+    <>
+      <div style={{ height: '300vh' }} />
+      <Standard
+        typebot={leadGenerationTypebot}
+        apiHost="http://localhost:3001"
+        isPreview
+        style={{ height: '300px' }}
+      />
+    </>
+  )
+}

packages/embeds/react/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@typebot.io/tsconfig/react-library.json",
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "emitDeclarationOnly": true
+  }
+}