✨ Add Next.js embed library

packages/embeds/nextjs/.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/nextjs/.npmignore

@@ -0,0 +1,5 @@
+src
+.eslintignore
+.eslintrc.cjs
+rollup.config.js
+tsconfig.json

packages/embeds/nextjs/.npmrc

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

packages/embeds/nextjs/README.md

@@ -0,0 +1,144 @@
+## Install
+
+```bash
+npm install @typebot.io/nextjs
+```
+
+## Standard
+
+```tsx
+import { Standard } from '@typebot.io/nextjs'
+
+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/nextjs'
+
+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/nextjs'
+
+open()
+```
+
+```js
+import { close } from '@typebot.io/nextjs'
+
+close()
+```
+
+```js
+import { toggle } from '@typebot.io/nextjs'
+
+toggle()
+```
+
+## Bubble
+
+```tsx
+import { Bubble } from '@typebot.io/nextjs'
+
+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/nextjs'
+
+Typebot.showPreviewMessage()
+```
+
+```js
+import { hidePreviewMessage } from '@typebot.io/nextjs'
+
+Typebot.hidePreviewMessage()
+```
+
+### Open or close the chat window
+
+You can use these commands:
+
+```js
+import { open } from '@typebot.io/nextjs'
+
+open()
+```
+
+```js
+import { close } from '@typebot.io/nextjs'
+
+close()
+```
+
+```js
+import { toggle } from '@typebot.io/nextjs'
+
+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/nextjs'
+
+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/nextjs/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@typebot.io/nextjs",
+  "version": "0.1.0",
+  "description": "Convenient library to display typebots on your Next.js website",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "rollup --watch --config rollup.config.js",
+    "build": "rollup --config rollup.config.js",
+    "lint": "eslint --fix \"src/**/*.ts*\""
+  },
+  "keywords": [],
+  "author": "Baptiste Arnaud",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/preset-react": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
+    "@rollup/plugin-alias": "^5.0.0",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-node-resolve": "15.1.0",
+    "@rollup/plugin-terser": "0.4.3",
+    "@rollup/plugin-typescript": "11.1.2",
+    "@typebot.io/js": "workspace:*",
+    "@typebot.io/react": "workspace:*",
+    "@typebot.io/lib": "workspace:*",
+    "@typebot.io/prisma": "workspace:*",
+    "@typebot.io/schemas": "workspace:*",
+    "@typebot.io/tsconfig": "workspace:*",
+    "@types/node": "20.4.2",
+    "@types/react": "18.2.15",
+    "eslint": "8.44.0",
+    "eslint-config-custom": "workspace:*",
+    "react": "18.2.0",
+    "rollup": "3.26.2",
+    "rollup-plugin-typescript-paths": "1.4.0",
+    "tslib": "2.6.0",
+    "tsx": "3.12.7",
+    "typescript": "5.1.6"
+  },
+  "peerDependencies": {
+    "next": "12.x || 13.x",
+    "react": "18.x"
+  }
+}

packages/embeds/nextjs/rollup.config.js

@@ -0,0 +1,38 @@
+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'
+import alias from '@rollup/plugin-alias'
+
+const extensions = ['.ts', '.tsx']
+
+const indexConfig = {
+  input: './src/index.ts',
+  output: {
+    dir: './dist',
+    format: 'es',
+  },
+  external: ['next/dynamic', 'react', 'react/jsx-runtime'],
+  plugins: [
+    alias({
+      entries: [
+        { find: '@typebot.io/js/dist/web', replacement: '../../js/dist/web' },
+      ],
+    }),
+    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/nextjs/src/index.ts

@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic'
+
+export const Standard = dynamic(
+  () => import('@typebot.io/react/src/Standard'),
+  { ssr: false }
+)
+
+export const Popup = dynamic(() => import('@typebot.io/react/src/Popup'), {
+  ssr: false,
+})
+
+export const Bubble = dynamic(() => import('@typebot.io/react/src/Bubble'), {
+  ssr: false,
+})
+
+export * from '@typebot.io/js'

packages/embeds/nextjs/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
+  }
+}