✨ Introduce bot v2 in builder (#328)

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

Closes #211

apps/builder/src/features/editor/components/PreviewDrawer.tsx

@@ -11,32 +11,25 @@ import {
   UseToastOptions,
   VStack,
 } from '@chakra-ui/react'
-import { TypebotViewer } from 'bot-engine'
-import { useToast } from '@/hooks/useToast'
 import { useEditor } from '../providers/EditorProvider'
 import { useGraph } from '@/features/graph'
 import { useTypebot } from '../providers/TypebotProvider'
-import { Log } from 'db'
-import React, { useMemo, useState } from 'react'
-import { getViewerUrl } from 'utils'
+import React, { useState } from 'react'
 import { headerHeight } from '../constants'
-import { parseTypebotToPublicTypebot } from '@/features/publish'
+import { Standard } from '@typebot.io/react'
+import { ChatReply } from 'models'
+import { useToast } from '@/hooks/useToast'
 
 export const PreviewDrawer = () => {
   const isDark = useColorMode().colorMode === 'dark'
-  const { typebot } = useTypebot()
+  const { typebot, save, isSavingLoading } = useTypebot()
   const { setRightPanel, startPreviewAtGroup } = useEditor()
-  const { setPreviewingEdge } = useGraph()
+  const { setPreviewingBlock } = useGraph()
   const [isResizing, setIsResizing] = useState(false)
   const [width, setWidth] = useState(500)
   const [isResizeHandleVisible, setIsResizeHandleVisible] = useState(false)
   const [restartKey, setRestartKey] = useState(0)
 
-  const publicTypebot = useMemo(
-    () => (typebot ? { ...parseTypebotToPublicTypebot(typebot) } : undefined),
-    [typebot]
-  )
-
   const { showToast } = useToast()
 
   const handleMouseDown = () => {
@@ -54,15 +47,19 @@ export const PreviewDrawer = () => {
   }
   useEventListener('mouseup', handleMouseUp)
 
-  const handleRestartClick = () => setRestartKey((key) => key + 1)
+  const handleRestartClick = async () => {
+    await save()
+    setRestartKey((key) => key + 1)
+  }
 
   const handleCloseClick = () => {
-    setPreviewingEdge(undefined)
+    setPreviewingBlock(undefined)
     setRightPanel(undefined)
   }
 
-  const handleNewLog = (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) =>
-    showToast(log as UseToastOptions)
+  const handleNewLogs = (logs: ChatReply['logs']) => {
+    logs?.forEach((log) => showToast(log as UseToastOptions))
+  }
 
   return (
     <Flex
@@ -92,29 +89,25 @@ export const PreviewDrawer = () => {
 
       <VStack w="full" spacing={4}>
         <Flex justifyContent={'space-between'} w="full">
-          <Button onClick={handleRestartClick}>Restart</Button>
+          <Button onClick={handleRestartClick} isLoading={isSavingLoading}>
+            Restart
+          </Button>
           <CloseButton onClick={handleCloseClick} />
         </Flex>
 
-        {publicTypebot && (
-          <Flex
-            borderWidth={'1px'}
-            borderRadius={'lg'}
-            h="full"
-            w="full"
+        {typebot && (
+          <Standard
             key={restartKey + (startPreviewAtGroup ?? '')}
-            pointerEvents={isResizing ? 'none' : 'auto'}
-          >
-            <TypebotViewer
-              apiHost={getViewerUrl()}
-              typebot={publicTypebot}
-              onNewGroupVisible={setPreviewingEdge}
-              onNewLog={handleNewLog}
-              startGroupId={startPreviewAtGroup}
-              isPreview
-              style={{ borderRadius: '10px' }}
-            />
-          </Flex>
+            typebot={typebot}
+            startGroupId={startPreviewAtGroup}
+            onNewInputBlock={setPreviewingBlock}
+            onNewLogs={handleNewLogs}
+            style={{
+              borderWidth: '1px',
+              borderRadius: '0.25rem',
+              pointerEvents: isResizing ? 'none' : 'auto',
+            }}
+          />
         )}
       </VStack>
     </Flex>

apps/builder/src/features/editor/components/TypebotHeader/TypebotHeader.tsx

@@ -20,7 +20,7 @@ import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { isDefined, isNotDefined } from 'utils'
 import { EditableTypebotName } from './EditableTypebotName'
-import { getBubbleActions } from 'typebot-js'
+import { open as openSupportBubble } from '@typebot.io/js'
 import Link from 'next/link'
 import { isCloudProdInstance } from '@/utils/helpers'
 import { headerHeight } from '../../constants'
@@ -70,7 +70,7 @@ export const TypebotHeader = () => {
 
   const handleHelpClick = () => {
     isCloudProdInstance
-      ? getBubbleActions().open()
+      ? openSupportBubble()
       : window.open('https://docs.typebot.io', '_blank')
   }
 

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

@@ -6,7 +6,6 @@ import {
   importTypebotInDatabase,
 } from 'utils/playwright/databaseActions'
 import {
-  typebotViewer,
   waitForSuccessfulDeleteRequest,
   waitForSuccessfulPostRequest,
   waitForSuccessfulPutRequest,
@@ -200,16 +199,16 @@ test('Preview from group should work', async ({ page }) => {
   await page.goto(`/typebots/${typebotId}/edit`)
   await page.click('[aria-label="Preview bot from this group"] >> nth=1')
   await expect(
-    typebotViewer(page).locator('text="Hello this is group 1"')
+    page.locator('typebot-standard').locator('text="Hello this is group 1"')
   ).toBeVisible()
   await page.click('[aria-label="Preview bot from this group"] >> nth=2')
   await expect(
-    typebotViewer(page).locator('text="Hello this is group 2"')
+    page.locator('typebot-standard').locator('text="Hello this is group 2"')
   ).toBeVisible()
   await page.click('[aria-label="Close"]')
   await page.click('text="Preview"')
   await expect(
-    typebotViewer(page).locator('text="Hello this is group 1"')
+    page.locator('typebot-standard').locator('text="Hello this is group 1"')
   ).toBeVisible()
 })