✨ Add Next.js embed library

apps/builder/package.json

@@ -36,8 +36,7 @@
     "@trpc/react-query": "10.34.0",
     "@trpc/server": "10.34.0",
     "@typebot.io/emails": "workspace:*",
-    "@typebot.io/js": "workspace:*",
-    "@typebot.io/react": "workspace:*",
+    "@typebot.io/nextjs": "workspace:*",
     "@udecode/plate-basic-marks": "21.1.5",
     "@udecode/plate-common": "^21.1.5",
     "@udecode/plate-core": "21.1.5",

apps/builder/src/components/SupportBubble.tsx

@@ -2,9 +2,8 @@ import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { useUser } from '@/features/account/hooks/useUser'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import React from 'react'
-import { Bubble } from '@typebot.io/react'
+import { Bubble, BubbleProps } from '@typebot.io/nextjs'
 import { planToReadable } from '@/features/billing/helpers/planToReadable'
-import { BubbleProps } from '@typebot.io/js'
 
 export const SupportBubble = (props: Omit<BubbleProps, 'typebot'>) => {
   const { typebot } = useTypebot()

apps/builder/src/features/dashboard/components/OnboardingModal.tsx

@@ -1,5 +1,5 @@
 import { chakra, useColorModeValue } from '@chakra-ui/react'
-import { Popup } from '@typebot.io/react'
+import { Popup } from '@typebot.io/nextjs'
 import { useUser } from '@/features/account/hooks/useUser'
 import { Typebot } from '@typebot.io/schemas'
 import React, { useEffect, useRef, useState } from 'react'

apps/builder/src/features/preview/components/WebPreview.tsx

@@ -3,7 +3,7 @@ import { useEditor } from '@/features/editor/providers/EditorProvider'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { useGraph } from '@/features/graph/providers/GraphProvider'
 import { useToast } from '@/hooks/useToast'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { ChatReply } from '@typebot.io/schemas'
 
 export const WebPreview = () => {

apps/builder/src/features/publish/components/embeds/EmbedButton.tsx

@@ -37,6 +37,8 @@ import { ApiModal } from './modals/ApiModal'
 import { ScriptIcon } from '@/features/blocks/logic/script/components/ScriptIcon'
 import { FlutterFlowLogo } from './logos/FlutterFlowLogo'
 import { FlutterFlowModal } from './modals/FlutterFlowModal'
+import { NextjsLogo } from './logos/NextjsLogo'
+import { NextjsModal } from './modals/Nextjs/NextjsModal'
 
 export type ModalProps = {
   publicId: string
@@ -125,6 +127,14 @@ export const integrationsList = [
       {...props}
     />
   ),
+  (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
+    <EmbedButton
+      logo={<NextjsLogo height={100} width="70px" />}
+      label="Nextjs"
+      Modal={NextjsModal}
+      {...props}
+    />
+  ),
   (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
     <EmbedButton
       logo={<CodeIcon height={100} width="60px" />}

apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx

@@ -0,0 +1,62 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const NextjsLogo = (props: IconProps) => (
+  <Icon
+    aria-label="Next.js logomark"
+    height="80"
+    role="img"
+    viewBox="0 0 180 180"
+    width="80"
+    {...props}
+  >
+    <mask
+      height="180"
+      id=":R0:mask0_408_134"
+      maskUnits="userSpaceOnUse"
+      style={{ maskType: 'alpha' }}
+      width="180"
+      x="0"
+      y="0"
+    >
+      <circle cx="90" cy="90" fill="black" r="90"></circle>
+    </mask>
+    <g mask="url(#:R0:mask0_408_134)">
+      <circle cx="90" cy="90" data-circle="true" fill="black" r="90"></circle>
+      <path
+        d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
+        fill="url(#:R0:paint0_linear_408_134)"
+      ></path>
+      <rect
+        fill="url(#:R0:paint1_linear_408_134)"
+        height="72"
+        width="12"
+        x="115"
+        y="54"
+      ></rect>
+    </g>
+    <defs>
+      <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id=":R0:paint0_linear_408_134"
+        x1="109"
+        x2="144.5"
+        y1="116.5"
+        y2="160.5"
+      >
+        <stop stop-color="white"></stop>
+        <stop offset="1" stop-color="white" stop-opacity="0"></stop>
+      </linearGradient>
+      <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id=":R0:paint1_linear_408_134"
+        x1="121"
+        x2="120.799"
+        y1="54"
+        y2="106.875"
+      >
+        <stop stop-color="white"></stop>
+        <stop offset="1" stop-color="white" stop-opacity="0"></stop>
+      </linearGradient>
+    </defs>
+  </Icon>
+)

apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { OrderedList, ListItem, Stack, Text, Code } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'

apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../snippetParsers'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 
 type Props = Pick<BubbleProps, 'theme' | 'previewMessage'>
 

apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx

@@ -7,7 +7,7 @@ import {
   typebotImportCode,
 } from '../../snippetParsers'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
-import { PopupProps } from '@typebot.io/js'
+import { PopupProps } from '@typebot.io/nextjs'
 
 type Props = Pick<PopupProps, 'autoShowDelay'>
 

apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { Stack, Code, Text } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { Typebot } from '@typebot.io/schemas'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'

apps/builder/src/features/publish/components/embeds/modals/Nextjs/InstallNextjsPackageSnippet.tsx

@@ -0,0 +1,11 @@
+import { CodeEditor } from '@/components/inputs/CodeEditor'
+
+export const InstallNextjsPackageSnippet = () => {
+  return (
+    <CodeEditor
+      value={`npm install @typebot.io/nextjs`}
+      isReadOnly
+      lang="shell"
+    />
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsBubbleSnippet.tsx

@@ -0,0 +1,31 @@
+import { CodeEditor } from '@/components/inputs/CodeEditor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { BubbleProps } from '@typebot.io/nextjs'
+import parserBabel from 'prettier/parser-babel'
+import prettier from 'prettier/standalone'
+import { parseReactBubbleProps } from '../../snippetParsers'
+
+export const NextjsBubbleSnippet = ({
+  theme,
+  previewMessage,
+}: Pick<BubbleProps, 'theme' | 'previewMessage'>) => {
+  const { typebot } = useTypebot()
+
+  const snippet = prettier.format(
+    `import { Bubble } from "@typebot.io/nextjs";
+
+      const App = () => {
+        return <Bubble ${parseReactBubbleProps({
+          typebot: typebot?.publicId ?? '',
+          theme,
+          previewMessage,
+        })}/>
+      }`,
+    {
+      parser: 'babel',
+      plugins: [parserBabel],
+    }
+  )
+
+  return <CodeEditor value={snippet} lang="javascript" isReadOnly />
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsModal.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { ModalProps } from '../../EmbedButton'
+import { EmbedModal } from '../../EmbedModal'
+import { isDefined } from '@udecode/plate-common'
+import { NextjsInstructions } from './instructions/NextjsInstructions'
+
+export const NextjsModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
+  const [selectedEmbedType, setSelectedEmbedType] = useState<
+    'standard' | 'popup' | 'bubble' | undefined
+  >()
+  return (
+    <EmbedModal
+      titlePrefix="Next.js"
+      isOpen={isOpen}
+      onClose={onClose}
+      isPublished={isPublished}
+      onSelectEmbedType={setSelectedEmbedType}
+      selectedEmbedType={selectedEmbedType}
+    >
+      {isDefined(selectedEmbedType) && (
+        <NextjsInstructions type={selectedEmbedType} />
+      )}
+    </EmbedModal>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsPopupSnippet.tsx

@@ -0,0 +1,29 @@
+import { CodeEditor } from '@/components/inputs/CodeEditor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { PopupProps } from '@typebot.io/nextjs'
+import parserBabel from 'prettier/parser-babel'
+import prettier from 'prettier/standalone'
+import { parseReactPopupProps } from '../../snippetParsers'
+
+export const NextjsPopupSnippet = ({
+  autoShowDelay,
+}: Pick<PopupProps, 'autoShowDelay'>) => {
+  const { typebot } = useTypebot()
+
+  const snippet = prettier.format(
+    `import { Popup } from "@typebot.io/nextjs";
+
+      const App = () => {
+        return <Popup ${parseReactPopupProps({
+          typebot: typebot?.publicId ?? '',
+          autoShowDelay,
+        })}/>;
+      }`,
+    {
+      parser: 'babel',
+      plugins: [parserBabel],
+    }
+  )
+
+  return <CodeEditor value={snippet} lang="javascript" isReadOnly />
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsStandardSnippet.tsx

@@ -0,0 +1,28 @@
+import { CodeEditor } from '@/components/inputs/CodeEditor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import parserBabel from 'prettier/parser-babel'
+import prettier from 'prettier/standalone'
+import { parseReactBotProps } from '../../snippetParsers'
+
+type Props = { widthLabel?: string; heightLabel: string }
+
+export const NextjsStandardSnippet = ({
+  widthLabel,
+  heightLabel,
+}: Props) => {
+  const { typebot } = useTypebot()
+  const snippet = prettier.format(
+    `import { Standard } from "@typebot.io/nextjs";
+
+      const App = () => {
+        return <Standard ${parseReactBotProps({
+          typebot: typebot?.publicId ?? '',
+        })} style={{width: "${widthLabel}", height: "${heightLabel}"}} />
+      }`,
+    {
+      parser: 'babel',
+      plugins: [parserBabel],
+    }
+  )
+  return <CodeEditor value={snippet} lang="javascript" isReadOnly />
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx

@@ -0,0 +1,42 @@
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react'
+import { BubbleProps } from '@typebot.io/nextjs'
+import { useState } from 'react'
+import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
+import { InstallNextjsPackageSnippet } from '../InstallNextjsPackageSnippet'
+import { NextjsBubbleSnippet } from '../NextjsBubbleSnippet'
+import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'
+
+export const NextjsBubbleInstructions = () => {
+  const { typebot } = useTypebot()
+  const [theme, setTheme] = useState<BubbleProps['theme']>(
+    parseDefaultBubbleTheme(typebot)
+  )
+  const [previewMessage, setPreviewMessage] =
+    useState<BubbleProps['previewMessage']>()
+
+  return (
+    <OrderedList spacing={4} pl={5}>
+      <ListItem>
+        <Stack spacing={4}>
+          <Text>Install the packages</Text>
+          <InstallNextjsPackageSnippet />
+        </Stack>
+      </ListItem>
+      <ListItem>
+        <Stack spacing={4}>
+          <BubbleSettings
+            theme={theme}
+            previewMessage={previewMessage}
+            defaultPreviewMessageAvatar={
+              typebot?.theme.chat.hostAvatar?.url ?? ''
+            }
+            onThemeChange={setTheme}
+            onPreviewMessageChange={setPreviewMessage}
+          />
+          <NextjsBubbleSnippet theme={theme} previewMessage={previewMessage} />
+        </Stack>
+      </ListItem>
+    </OrderedList>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsInstructions.tsx

@@ -0,0 +1,21 @@
+import { NextjsBubbleInstructions } from './NextjsBubbleInstructions'
+import { NextjsPopupInstructions } from './NextjsPopupInstructions'
+import { NextjsStandardInstructions } from './NextjsStandardInstructions'
+
+type Props = {
+  type: 'standard' | 'popup' | 'bubble'
+}
+
+export const NextjsInstructions = ({ type }: Props) => {
+  switch (type) {
+    case 'standard': {
+      return <NextjsStandardInstructions />
+    }
+    case 'popup': {
+      return <NextjsPopupInstructions />
+    }
+    case 'bubble': {
+      return <NextjsBubbleInstructions />
+    }
+  }
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsPopupInstructions.tsx

@@ -0,0 +1,30 @@
+import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react'
+import { useState } from 'react'
+import { PopupSettings } from '../../../settings/PopupSettings'
+import { InstallNextjsPackageSnippet } from '../InstallNextjsPackageSnippet'
+import { NextjsPopupSnippet } from '../NextjsPopupSnippet'
+
+export const NextjsPopupInstructions = () => {
+  const [inputValue, setInputValue] = useState<number>()
+
+  return (
+    <OrderedList spacing={4} pl={5}>
+      <ListItem>
+        <Stack spacing={4}>
+          <Text>Install the packages</Text>
+          <InstallNextjsPackageSnippet />
+        </Stack>
+      </ListItem>
+      <ListItem>
+        <Stack spacing={4}>
+          <PopupSettings
+            onUpdateSettings={(settings) =>
+              setInputValue(settings.autoShowDelay)
+            }
+          />
+          <NextjsPopupSnippet autoShowDelay={inputValue} />
+        </Stack>
+      </ListItem>
+    </OrderedList>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsStandardInstructions.tsx

@@ -0,0 +1,36 @@
+import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react'
+import { useState } from 'react'
+import { StandardSettings } from '../../../settings/StandardSettings'
+import { InstallNextjsPackageSnippet } from '../InstallNextjsPackageSnippet'
+import { NextjsStandardSnippet } from '../NextjsStandardSnippet'
+
+export const NextjsStandardInstructions = () => {
+  const [inputValues, setInputValues] = useState<{
+    widthLabel?: string
+    heightLabel: string
+  }>({
+    heightLabel: '100%',
+    widthLabel: '100%',
+  })
+
+  return (
+    <OrderedList spacing={4} pl={5}>
+      <ListItem>
+        <Stack spacing={4}>
+          <Text>Install the packages</Text>
+          <InstallNextjsPackageSnippet />
+        </Stack>
+      </ListItem>
+      <ListItem>
+        <Stack spacing={4}>
+          <StandardSettings
+            onUpdateWindowSettings={(settings) =>
+              setInputValues({ ...settings })
+            }
+          />
+          <NextjsStandardSnippet {...inputValues} />
+        </Stack>
+      </ListItem>
+    </OrderedList>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/React/InstallReactPackageSnippet.tsx

@@ -3,7 +3,7 @@ import { CodeEditor } from '@/components/inputs/CodeEditor'
 export const InstallReactPackageSnippet = () => {
   return (
     <CodeEditor
-      value={`npm install @typebot.io/js @typebot.io/react`}
+      value={`npm install @typebot.io/react`}
       isReadOnly
       lang="shell"
     />

apps/builder/src/features/publish/components/embeds/modals/React/ReactBubbleSnippet.tsx

@@ -1,6 +1,6 @@
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { parseReactBubbleProps } from '../../snippetParsers'

apps/builder/src/features/publish/components/embeds/modals/React/ReactPopupSnippet.tsx

@@ -1,6 +1,6 @@
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { PopupProps } from '@typebot.io/js'
+import { PopupProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { parseReactPopupProps } from '../../snippetParsers'

apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { InstallReactPackageSnippet } from '../InstallReactPackageSnippet'

apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx

@@ -1,7 +1,7 @@
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { Stack, Text } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { Typebot } from '@typebot.io/schemas'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'

apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { OrderedList, ListItem, Stack, Text, Code } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'

apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'

apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx

@@ -1,6 +1,6 @@
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'

apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx

@@ -9,7 +9,7 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { parseApiHostValue, parseInitBubbleCode } from '../../../snippetParsers'

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/BubbleSettings.tsx

@@ -7,7 +7,7 @@ import {
   Image,
   chakra,
 } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import { isDefined, isSvgSrc } from '@typebot.io/lib'
 import { PreviewMessageSettings } from './PreviewMessageSettings'
 import { ThemeSettings } from './ThemeSettings'

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx

@@ -15,7 +15,7 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react'
-import { ButtonTheme } from '@typebot.io/js/dist/features/bubble/types'
+import { ButtonTheme } from '@typebot.io/nextjs'
 import React from 'react'
 
 type Props = {

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageSettings.tsx

@@ -1,6 +1,6 @@
 import { NumberInput } from '@/components/inputs'
 import { FormLabel, HStack, Input, Stack, Switch, Text } from '@chakra-ui/react'
-import { PreviewMessageParams } from '@typebot.io/js/dist/features/bubble/types'
+import { PreviewMessageParams } from '@typebot.io/nextjs'
 import { useState } from 'react'
 import { isDefined } from '@typebot.io/lib'
 

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageThemeSettings.tsx

@@ -1,6 +1,6 @@
 import { ColorPicker } from '@/components/ColorPicker'
 import { Heading, HStack, Stack, Text } from '@chakra-ui/react'
-import { PreviewMessageTheme } from '@typebot.io/js/dist/features/bubble/types'
+import { PreviewMessageTheme } from '@typebot.io/nextjs'
 import React from 'react'
 
 type Props = {

apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ThemeSettings.tsx

@@ -13,12 +13,12 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react'
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import {
   BubbleTheme,
   ButtonTheme,
   PreviewMessageTheme,
-} from '@typebot.io/js/dist/features/bubble/types'
+} from '@typebot.io/nextjs'
 import { ButtonThemeSettings } from './ButtonThemeSettings'
 import { PreviewMessageThemeSettings } from './PreviewMessageThemeSettings'
 import { ChevronDownIcon } from '@/components/icons'

apps/builder/src/features/publish/components/embeds/settings/PopupSettings.tsx

@@ -7,7 +7,7 @@ import {
   HStack,
   Text,
 } from '@chakra-ui/react'
-import { PopupProps } from '@typebot.io/js'
+import { PopupProps } from '@typebot.io/nextjs'
 import { useState, useEffect } from 'react'
 import { isDefined } from '@typebot.io/lib'
 

apps/builder/src/features/publish/components/embeds/snippetParsers/bubble.ts

@@ -1,4 +1,4 @@
-import { BubbleProps } from '@typebot.io/js'
+import { BubbleProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import {

apps/builder/src/features/publish/components/embeds/snippetParsers/popup.ts

@@ -1,4 +1,4 @@
-import { PopupProps } from '@typebot.io/js'
+import { PopupProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import {

apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts

@@ -1,4 +1,4 @@
-import { BotProps } from '@typebot.io/js'
+import { BotProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { env, getViewerUrl, isDefined } from '@typebot.io/lib'
@@ -42,7 +42,7 @@ export const parseReactBotProps = ({ typebot, apiHost }: BotProps) => {
 }
 
 export const typebotImportCode = isCloudProdInstance
-  ? `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'`
+  ? `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'`
   : `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@${packageJson.version}/dist/web.js'`
 
 export const parseInlineScript = (script: string) =>

apps/builder/src/features/publish/components/embeds/snippetParsers/standard.ts

@@ -1,4 +1,4 @@
-import { BotProps } from '@typebot.io/js'
+import { BotProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { parseBotProps } from './shared'

apps/builder/src/features/settings/components/SettingsPage.tsx

@@ -1,6 +1,6 @@
 import { Seo } from '@/components/Seo'
 import { Flex } from '@chakra-ui/react'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { getViewerUrl } from '@typebot.io/lib'
 import { SettingsSideMenu } from './SettingsSideMenu'
 import { TypebotHeader } from '@/features/editor/components/TypebotHeader'

apps/builder/src/features/templates/components/TemplatesModal.tsx

@@ -12,7 +12,7 @@ import {
   chakra,
   useColorModeValue,
 } from '@chakra-ui/react'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { Typebot } from '@typebot.io/schemas'
 import React, { useCallback, useEffect, useState } from 'react'
 import { templates } from '../data'

apps/builder/src/features/theme/components/ThemePage.tsx

@@ -2,7 +2,7 @@ import { Seo } from '@/components/Seo'
 import { TypebotHeader } from '@/features/editor/components/TypebotHeader'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { Flex } from '@chakra-ui/react'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { ThemeSideMenu } from './ThemeSideMenu'
 
 export const ThemePage = () => {

apps/docs/docs/embed/html-javascript.md

@@ -12,7 +12,7 @@ There, you can change the container dimensions. Here is a code example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initStandard({
     typebot: 'my-typebot',
@@ -32,7 +32,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initPopup({
     typebot: 'my-typebot',
@@ -72,7 +72,7 @@ If you have different bots on the same page you will have to make them distinct
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initStandard({
     id: 'bot1'
@@ -104,7 +104,7 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initBubble({
     typebot: 'my-typebot',

apps/docs/docs/embed/react.md

@@ -6,10 +6,8 @@ sidebar_position: 5
 
 ## Install
 
-Make sure you install both `@typebot.io/js` and `@typebot.io/react` first.
-
 ```bash
-npm install @typebot.io/js @typebot.io/react
+npm install @typebot.io/react
 ```
 
 ## Standard

apps/docs/docs/embed/webflow.md

@@ -22,7 +22,7 @@ It should look like:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
 
   Typebot.initPopup({
     typebot: 'my-typebot',

apps/landing-page/components/Homepage/IntroducingChatApps.tsx

@@ -16,7 +16,7 @@ import { sendRequest } from '@typebot.io/lib'
 import { DontIcon } from 'assets/icons/DontIcon'
 import { DoIcon } from 'assets/icons/DoIcon'
 import { HandDrawnArrow } from 'assets/illustrations/HandDrawnArrow'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 
 export const IntroducingChatApps = () => {
   const [typebot, setTypebot] = useState<PublicTypebot>()

apps/landing-page/components/Homepage/RealTimeResults.tsx

@@ -1,5 +1,5 @@
 import { Flex, Stack, Heading, Text, Button, VStack } from '@chakra-ui/react'
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { ArrowRight } from 'assets/icons/ArrowRight'
 import { HandDrawnArrow } from 'assets/illustrations/HandDrawnArrow'
 import { PublicTypebot, Typebot } from '@typebot.io/schemas'

apps/landing-page/package.json

@@ -15,8 +15,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@vercel/analytics": "1.0.1",
-    "@typebot.io/react": "workspace:*",
-    "@typebot.io/js": "workspace:*",
+    "@typebot.io/nextjs": "workspace:*",
     "aos": "2.3.4",
     "@typebot.io/prisma": "workspace:*",
     "focus-visible": "5.2.0",

apps/viewer/package.json

@@ -16,9 +16,8 @@
     "@planetscale/database": "^1.8.0",
     "@sentry/nextjs": "7.58.1",
     "@trpc/server": "10.34.0",
-    "@typebot.io/js": "workspace:*",
     "@typebot.io/prisma": "workspace:*",
-    "@typebot.io/react": "workspace:*",
+    "@typebot.io/nextjs": "workspace:*",
     "ai": "^2.1.20",
     "aws-sdk": "2.1415.0",
     "bot-engine": "workspace:*",

apps/viewer/src/components/TypebotPageV3.tsx

@@ -1,4 +1,4 @@
-import { Standard } from '@typebot.io/react'
+import { Standard } from '@typebot.io/nextjs'
 import { BackgroundType, Typebot } from '@typebot.io/schemas'
 import { useRouter } from 'next/router'
 import { SEO } from './Seo'