✨ Introduce bot v2 in builder (#328)

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

Closes #211

apps/builder/src/features/theme/components/CustomCssSettings/CustomCssSettings.tsx

@@ -9,7 +9,7 @@ type Props = {
 export const CustomCssSettings = ({ customCss, onCustomCssChange }: Props) => {
   return (
     <CodeEditor
-      value={customCss ?? ''}
+      defaultValue={customCss ?? ''}
       lang="css"
       onChange={onCustomCssChange}
     />

apps/builder/src/features/theme/components/ThemePage.tsx

@@ -1,14 +1,11 @@
 import { Seo } from '@/components/Seo'
 import { TypebotHeader, useTypebot } from '@/features/editor'
 import { Flex } from '@chakra-ui/react'
-import { TypebotViewer } from 'bot-engine'
-import { getViewerUrl } from 'utils'
+import { Standard } from '@typebot.io/react'
 import { ThemeSideMenu } from './ThemeSideMenu'
-import { parseTypebotToPublicTypebot } from '@/features/publish'
 
 export const ThemePage = () => {
   const { typebot } = useTypebot()
-  const publicTypebot = typebot && parseTypebotToPublicTypebot(typebot)
 
   return (
     <Flex overflow="hidden" h="100vh" flexDir="column">
@@ -16,9 +13,15 @@ export const ThemePage = () => {
       <TypebotHeader />
       <Flex h="full" w="full">
         <ThemeSideMenu />
-        <Flex flex="1" overflow="hidden">
-          {publicTypebot && (
-            <TypebotViewer apiHost={getViewerUrl()} typebot={publicTypebot} />
+        <Flex flex="1">
+          {typebot && (
+            <Standard
+              typebot={typebot}
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+            />
           )}
         </Flex>
       </Flex>

apps/builder/src/features/theme/components/ThemeSideMenu.tsx

@@ -38,6 +38,7 @@ export const ThemeSideMenu = () => {
       spacing={10}
       overflowY="scroll"
       pb="20"
+      position="relative"
     >
       <Heading fontSize="xl" textAlign="center">
         Customize the theme