♻️ (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,
+            process.env.NEXT_PUBLIC_VIEWER_URL + '/_next/static/:static*',
+          has: [
+            {
+              type: 'header',
+              key: 'referer',
+              value:
+                process.env.LANDING_PAGE_HOST +
+                '/(?!' +
+                pages.join('|') +
+                '|\\?).+',
+            },
+          ],
         },
+      ],
+      fallback: [
         {
-          source: '/typebot-lib/v2',
-          destination:
-            'https://unpkg.com/typebot-js@2.1.3/dist/index.umd.min.js',
-          permanent: true,
+          source: '/:typebotId*',
+          destination: process.env.NEXT_PUBLIC_VIEWER_URL + '/:typebotId*',
         },
-      ]
-    },
-    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: [
           {
-            source: '/api/:path*',
-            destination: process.env.NEXT_PUBLIC_VIEWER_URL + '/api/:path*',
+            key: 'X-Frame-Options',
+            value: 'DENY',
           },
         ],
-      }
-    },
-    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"
         }

apps/viewer/src/features/blocks/integrations/webhook/api/utils/executeWebhookBlock.ts

@@ -37,12 +37,16 @@ export const executeWebhookBlock = async (
     where: { id: block.webhookId },
   })) as Webhook | null
   if (!webhook) {
+    log = {
+      status: 'error',
+      description: `Couldn't find webhook with id ${block.webhookId}`,
+    }
     result &&
       (await saveErrorLog({
         resultId: result.id,
-        message: `Couldn't find webhook`,
+        message: log.description,
       }))
-    return { outgoingEdgeId: block.outgoingEdgeId }
+    return { outgoingEdgeId: block.outgoingEdgeId, logs: [log] }
   }
   const preparedWebhook = prepareWebhookAttributes(webhook, block.options)
   const resultValues = result && (await getResultValues(result.id))

packages/js/src/features/standard/components/Standard.tsx

@@ -11,26 +11,27 @@ const hostElementCss = `
 }
 `
 
-export const Standard = (props: BotProps) => {
+export const Standard = (
+  props: BotProps,
+  { element }: { element: HTMLElement }
+) => {
   const [isBotDisplayed, setIsBotDisplayed] = createSignal(false)
 
   const launchBot = () => {
     setIsBotDisplayed(true)
   }
 
-  const observer = new IntersectionObserver((intersections) => {
+  const botLauncherObserver = new IntersectionObserver((intersections) => {
     if (intersections.some((intersection) => intersection.isIntersecting))
       launchBot()
   })
 
   onMount(() => {
-    const standardElement = document.querySelector('typebot-standard')
-    if (!standardElement) return
-    observer.observe(standardElement)
+    botLauncherObserver.observe(element)
   })
 
   onCleanup(() => {
-    observer.disconnect()
+    botLauncherObserver.disconnect()
   })
 
   return (

packages/js/src/register.tsx

@@ -10,6 +10,7 @@ import { Standard } from './features/standard'
 
 export const registerWebComponents = () => {
   if (typeof window === 'undefined') return
+  // @ts-expect-error element incorect type
   customElement('typebot-standard', defaultBotProps, Standard)
   customElement('typebot-bubble', defaultBubbleProps, Bubble)
   customElement('typebot-popup', defaultPopupProps, Popup)

packages/js/src/window.ts

@@ -1,3 +1,4 @@
+/* eslint-disable solid/reactivity */
 import { BubbleProps } from './features/bubble'
 import { PopupProps } from './features/popup'
 import { BotProps } from './components/Bot'
@@ -10,10 +11,10 @@ import {
   toggle,
 } from './features/commands'
 
-export const initStandard = (
-  props: BotProps & { style?: string; class?: string }
-) => {
-  const standardElement = document.querySelector('typebot-standard')
+export const initStandard = (props: BotProps & { id?: string }) => {
+  const standardElement = props.id
+    ? document.getElementById(props.id)
+    : document.querySelector('typebot-standard')
   if (!standardElement) throw new Error('<typebot-standard> element not found.')
   Object.assign(standardElement, props)
 }