✨ Introduce bot v2 in builder (#328)

Also, the new engine is the default for updated typebots for viewer

Closes #211

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

@@ -12,14 +12,13 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 import { ExternalLinkIcon } from '@/components/icons'
-import { TypebotViewer } from 'bot-engine'
+import { Standard } from '@typebot.io/react'
 import { Typebot } from 'models'
 import React, { useCallback, useEffect, useState } from 'react'
-import { getViewerUrl, sendRequest } from 'utils'
 import { templates } from '../data'
 import { TemplateProps } from '../types'
 import { useToast } from '@/hooks/useToast'
-import { parseTypebotToPublicTypebot } from '@/features/publish'
+import { sendRequest } from 'utils'
 
 type Props = {
   isOpen: boolean
@@ -68,18 +67,20 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
     >
       <ModalOverlay />
       <ModalContent h="85vh">
-        <ModalBody as={HStack} p="0" spacing="0">
+        <ModalBody h="full" as={HStack} p="0" spacing="0">
           <Stack w="full" h="full" spacing="4">
             <Heading pl="10" pt="4" fontSize="2xl">
               {selectedTemplate.emoji}{' '}
               <chakra.span ml="2">{selectedTemplate.name}</chakra.span>
             </Heading>
             {typebot && (
-              <TypebotViewer
-                apiHost={getViewerUrl()}
-                typebot={parseTypebotToPublicTypebot(typebot)}
+              <Standard
                 key={typebot.id}
-                style={{ borderRadius: '0.25rem' }}
+                typebot={typebot}
+                style={{
+                  borderRadius: '0.25rem',
+                  backgroundColor: '#fff',
+                }}
               />
             )}
           </Stack>

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

@@ -4,7 +4,7 @@ import { VStack } from '@chakra-ui/react'
 import { CreateNewTypebotButtons } from './CreateNewTypebotButtons'
 
 export const TemplatesPage = () => (
-  <VStack>
+  <VStack h="100vh">
     <Seo title="Templates" />
     <DashboardHeader />
     <CreateNewTypebotButtons />

apps/builder/src/features/templates/templates.spec.ts

@@ -1,6 +1,5 @@
 import { getTestAsset } from '@/test/utils/playwright'
 import test, { expect } from '@playwright/test'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 
 test.describe.parallel('Templates page', () => {
   test('From scratch should create a blank typebot', async ({ page }) => {
@@ -26,9 +25,7 @@ test.describe.parallel('Templates page', () => {
     await page.goto('/typebots/create')
     await page.click('text=Start from a template')
     await page.click('text=Customer Support')
-    await expect(
-      typebotViewer(page).locator('text=How can I help you?')
-    ).toBeVisible()
+    await expect(page.locator('text=How can I help you?')).toBeVisible()
     await page.click('text=Use this template')
     await expect(page).toHaveURL(new RegExp(`/edit`))
   })