✨ Add Next.js embed library

.github/workflows/publish-typebot-nextjs.yml

@@ -0,0 +1,18 @@
+name: Publish @typebot.io/nextjs package to NPM
+
+on:
+  push:
+    tags:
+      - 'nextjs-v*'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2.2.2
+      - run: pnpm i --frozen-lockfile
+      - run: pnpm turbo build --filter=@typebot.io/nextjs...
+      - run: cd packages/embeds/nextjs && pnpm publish --no-git-checks --access public

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 />
+    }
+  }
+}