♻️ (lp) Remove old bot-engine from landing page

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

@@ -11,12 +11,12 @@ import {
   Textarea,
 } from '@chakra-ui/react'
 import React, { useEffect, useState } from 'react'
-import { TypebotViewer } from 'bot-engine'
 import { PublicTypebot } from 'models'
 import { sendRequest } from 'utils'
 import { DontIcon } from 'assets/icons/DontIcon'
 import { DoIcon } from 'assets/icons/DoIcon'
 import { HandDrawnArrow } from 'assets/illustrations/HandDrawnArrow'
+import { Standard } from '@typebot.io/react'
 
 export const IntroducingChatApps = () => {
   const [typebot, setTypebot] = useState<PublicTypebot>()
@@ -83,18 +83,14 @@ export const IntroducingChatApps = () => {
           >
             <DoIcon />
             {typebot && (
-              <Flex
-                w="full"
-                h="full"
-                minH={['600px', '0']}
-                borderWidth="1px"
-                rounded="md"
-              >
-                <TypebotViewer
-                  typebot={typebot}
-                  style={{ borderRadius: '0.375rem' }}
-                />
-              </Flex>
+              <Standard
+                typebot={typebot}
+                style={{
+                  borderRadius: '0.375rem',
+                  borderWidth: '1px',
+                  height: '562px',
+                }}
+              />
             )}
             <Flex top="-20px" right="40px" pos="absolute">
               <Text fontFamily="'Indie Flower'" fontSize="2xl">

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

@@ -1,11 +1,14 @@
 import { Flex, Stack, Heading, Text, Button, VStack } from '@chakra-ui/react'
+import { Standard } from '@typebot.io/react'
 import { ArrowRight } from 'assets/icons/ArrowRight'
-import { TypebotViewer } from 'bot-engine'
 import { PublicTypebot, Typebot } from 'models'
 import Link from 'next/link'
 import React, { useEffect, useRef, useState } from 'react'
 import { sendRequest } from 'utils'
 
+const nameBlockId = 'shuUtMDMw9P4iAHbz7B5SqJ'
+const messageBlockId = 'sqvXpT1YXE3Htp6BCPvVGv3'
+
 export const RealTimeResults = () => {
   const iframeRef = useRef<HTMLIFrameElement | null>(null)
   const [typebot, setTypebot] = useState<PublicTypebot>()
@@ -21,25 +24,19 @@ export const RealTimeResults = () => {
 
   useEffect(() => {
     fetchTemplate()
-    window.addEventListener('message', processMessage)
-    const interval = setInterval(refreshIframeContent, 30000)
-
-    return () => {
-      clearInterval(interval)
-      window.removeEventListener('message', processMessage)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const processMessage = (event: MessageEvent) => {
-    if (event.data.from === 'typebot') refreshIframeContent()
-  }
-
   const refreshIframeContent = () => {
     if (!iframeRef.current) return
     iframeRef.current.src += ''
   }
 
+  const handleAnswer = ({ blockId }: { blockId: string }) => {
+    if ([nameBlockId, messageBlockId].includes(blockId)) {
+      refreshIframeContent()
+    }
+  }
+
   return (
     <Flex as="section" justify="center">
       <Stack
@@ -91,13 +88,15 @@ export const RealTimeResults = () => {
           data-aos="fade"
         >
           {typebot && (
-            <Flex w="full" h="full" minH="300" borderWidth="1px" rounded="md">
-              <TypebotViewer
-                typebot={typebot}
-                style={{ borderRadius: '0.375rem' }}
-                apiHost="https://typebot.io"
-              />
-            </Flex>
+            <Standard
+              typebot={typebot}
+              onAnswer={handleAnswer}
+              style={{
+                borderRadius: '0.375rem',
+                borderWidth: '1px',
+                height: '533px',
+              }}
+            />
           )}
           <iframe
             ref={iframeRef}

apps/landing-page/next.config.js

@@ -2,76 +2,69 @@
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 })
-const withTM = require('next-transpile-modules')([
-  'utils',
-  'models',
-  'bot-engine',
-])
 
 const pages = ['pricing', 'privacy-policies', 'terms-of-service', 'about']
 
-module.exports = withTM(
-  withBundleAnalyzer({
-    async redirects() {
-      return [
+module.exports = withBundleAnalyzer({
+  transpilePackages: ['utils', 'models'],
+  async redirects() {
+    return [
+      {
+        source: '/typebot-lib',
+        destination:
+          'https://unpkg.com/typebot-js@2.0.21/dist/index.umd.min.js',
+        permanent: true,
+      },
+      {
+        source: '/typebot-lib/v2',
+        destination: 'https://unpkg.com/typebot-js@2.1.3/dist/index.umd.min.js',
+        permanent: true,
+      },
+    ]
+  },
+  async rewrites() {
+    return {
+      beforeFiles: [
         {
-          source: '/typebot-lib',
+          source: '/_next/static/:static*',
           destination:
-            'https://unpkg.com/typebot-js@2.0.21/dist/index.umd.min.js',
-          permanent: true,
-        },
-        {
-          source: '/typebot-lib/v2',
-          destination:
-            'https://unpkg.com/typebot-js@2.1.3/dist/index.umd.min.js',
-          permanent: true,
-        },
-      ]
-    },
-    async rewrites() {
-      return {
-        beforeFiles: [
-          {
-            source: '/_next/static/:static*',
-            destination:
-              process.env.NEXT_PUBLIC_VIEWER_URL + '/_next/static/:static*',
-            has: [
-              {
-                type: 'header',
-                key: 'referer',
-                value:
-                  process.env.LANDING_PAGE_HOST +
-                  '/(?!' +
-                  pages.join('|') +
-                  '|\\?).+',
-              },
-            ],
-          },
-        ],
-        fallback: [
-          {
-            source: '/:typebotId*',
-            destination: process.env.NEXT_PUBLIC_VIEWER_URL + '/:typebotId*',
-          },
-          {
-            source: '/api/:path*',
-            destination: process.env.NEXT_PUBLIC_VIEWER_URL + '/api/:path*',
-          },
-        ],
-      }
-    },
-    headers: async () => {
-      return [
-        {
-          source: '/(.*)?',
-          headers: [
+            process.env.NEXT_PUBLIC_VIEWER_URL + '/_next/static/:static*',
+          has: [
             {
-              key: 'X-Frame-Options',
-              value: 'DENY',
+              type: 'header',
+              key: 'referer',
+              value:
+                process.env.LANDING_PAGE_HOST +
+                '/(?!' +
+                pages.join('|') +
+                '|\\?).+',
             },
           ],
         },
-      ]
-    },
-  })
-)
+      ],
+      fallback: [
+        {
+          source: '/:typebotId*',
+          destination: process.env.NEXT_PUBLIC_VIEWER_URL + '/:typebotId*',
+        },
+        {
+          source: '/api/:path*',
+          destination: process.env.NEXT_PUBLIC_VIEWER_URL + '/api/:path*',
+        },
+      ],
+    }
+  },
+  headers: async () => {
+    return [
+      {
+        source: '/(.*)?',
+        headers: [
+          {
+            key: 'X-Frame-Options',
+            value: 'DENY',
+          },
+        ],
+      },
+    ]
+  },
+})

apps/landing-page/package.json

@@ -15,8 +15,9 @@
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
     "@vercel/analytics": "0.1.8",
+    "@typebot.io/react": "workspace:*",
+    "@typebot.io/js": "workspace:*",
     "aos": "2.3.4",
-    "bot-engine": "workspace:*",
     "db": "workspace:*",
     "focus-visible": "5.2.0",
     "framer-motion": "8.5.0",

apps/landing-page/public/typebots/lead-gen-lp.json

@@ -110,7 +110,8 @@
           "groupId": "o4SH1UtKANnW5N5D67oZUz",
           "options": {
             "labels": { "button": "Send", "placeholder": "Type your email..." },
-            "variableId": "3VFChNVSCXQ2rXv4DrJ8Ah"
+            "variableId": "3VFChNVSCXQ2rXv4DrJ8Ah",
+            "retryMessageContent": "This email doesn't seem to be valid. Can you type it again?"
           },
           "outgoingEdgeId": "w3MiN1Ct38jT5NykVsgmb5"
         }