🚀 Init preview and typebot cotext in editor

.gitignore

@@ -34,3 +34,4 @@ workspace.code-workspace
 .DS_Store
 
 .turbo
+apps/builder/tsconfig.tsbuildinfo

apps/builder/assets/icons.tsx

@@ -7,6 +7,9 @@ const featherIconsBaseProps: IconProps = {
   strokeLinecap: 'round',
   strokeLinejoin: 'round',
 }
+
+// 99% of these icons are from Feather icons (https://feathericons.com/)
+
 export const SettingsIcon = (props: IconProps) => (
   <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
     <circle cx="12" cy="12" r="3"></circle>
@@ -102,3 +105,59 @@ export const FlagIcon = (props: IconProps) => (
     <line x1="4" y1="22" x2="4" y2="15"></line>
   </Icon>
 )
+
+export const BoldIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+    <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+  </Icon>
+)
+
+export const ItalicIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <line x1="19" y1="4" x2="10" y2="4"></line>
+    <line x1="14" y1="20" x2="5" y2="20"></line>
+    <line x1="15" y1="4" x2="9" y2="20"></line>
+  </Icon>
+)
+
+export const UnderlineIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"></path>
+    <line x1="4" y1="21" x2="20" y2="21"></line>
+  </Icon>
+)
+
+export const LinkIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+  </Icon>
+)
+
+export const SaveIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
+    <polyline points="17 21 17 13 7 13 7 21"></polyline>
+    <polyline points="7 3 7 8 15 8"></polyline>
+  </Icon>
+)
+
+export const CheckIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <polyline points="20 6 9 17 4 12"></polyline>
+  </Icon>
+)
+
+export const ChatIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+  </Icon>
+)
+
+export const TrashIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <polyline points="3 6 5 6 21 6"></polyline>
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+  </Icon>
+)

apps/builder/assets/styles/plate.css

@@ -0,0 +1,31 @@
+.slate-bold {
+  font-weight: bold;
+}
+
+.slate-italic {
+  font-style: oblique;
+}
+
+.slate-underline {
+  text-decoration: underline;
+}
+
+.slate-ToolbarButton-active {
+  color: blue !important;
+}
+.slate-ToolbarButton-active > svg {
+  stroke-width: 2px;
+}
+
+.slate-ToolbarButton {
+  color: gray;
+}
+
+.slate-a {
+  color: blue !important;
+  text-decoration: underline;
+}
+
+.slate-html-container > div {
+  min-height: 24px;
+}

apps/builder/components/auth/SocialLoginButtons.tsx

@@ -16,7 +16,6 @@ export const SocialLoginButtons = () => {
     <Stack>
       <Button
         leftIcon={<GithubLogo />}
-        colorScheme="gray"
         onClick={handleGitHubClick}
         data-testid="github"
         isLoading={['loading', 'authenticated'].includes(status)}
@@ -25,7 +24,6 @@ export const SocialLoginButtons = () => {
       </Button>
       <Button
         leftIcon={<GoogleLogo />}
-        colorScheme="gray"
         onClick={handleGoogleClick}
         data-testid="google"
         isLoading={['loading', 'authenticated'].includes(status)}
@@ -34,7 +32,6 @@ export const SocialLoginButtons = () => {
       </Button>
       <Button
         leftIcon={<FacebookLogo />}
-        colorScheme="gray"
         onClick={handleFacebookClick}
         data-testid="facebook"
         isLoading={['loading', 'authenticated'].includes(status)}

apps/builder/components/board/Board.tsx

@@ -2,13 +2,26 @@ import { Flex } from '@chakra-ui/react'
 import React from 'react'
 import Graph from './graph/Graph'
 import { DndContext } from 'contexts/DndContext'
-import StepTypesList from './StepTypesList'
+import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
+import { StepTypesList } from './StepTypesList'
+import { PreviewDrawer } from './preview/PreviewDrawer'
+import { RightPanel, useEditor } from 'contexts/EditorContext'
 
-export const Board = () => (
+export const Board = () => {
-  <Flex flex="1" pos="relative" bgColor="gray.50">
+  const { rightPanel } = useEditor()
-    <DndContext>
+  return (
-      <StepTypesList />
+    <Flex
-      <Graph />
+      flex="1"
-    </DndContext>
+      pos="relative"
-  </Flex>
+      bgColor="gray.50"
-)
+      h={`calc(100vh - ${headerHeight}px)`}
+      marginTop={`${headerHeight}px`}
+    >
+      <DndContext>
+        <StepTypesList />
+        <Graph />
+        {rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
+      </DndContext>
+    </Flex>
+  )
+}

apps/builder/components/board/StepTypesList/StepCard.tsx

@@ -29,7 +29,6 @@ export const StepCard = ({
         rounded="lg"
         flex="1"
         cursor={'grab'}
-        colorScheme="gray"
         opacity={isMouseDown ? '0.4' : '1'}
         onMouseDown={handleMouseDown}
       >
@@ -54,7 +53,6 @@ export const StepCardOverlay = ({
       borderWidth="1px"
       rounded="lg"
       cursor={'grab'}
-      colorScheme="gray"
       w="147px"
       pos="fixed"
       top="0"

apps/builder/components/board/StepTypesList/StepIcon.tsx

@@ -1,4 +1,4 @@
-import { CalendarIcon, FlagIcon, ImageIcon, TextIcon } from 'assets/icons'
+import { ChatIcon, FlagIcon, TextIcon } from 'assets/icons'
 import { StepType } from 'bot-engine'
 import React from 'react'
 
@@ -6,15 +6,12 @@ type StepIconProps = { type: StepType }
 
 export const StepIcon = ({ type }: StepIconProps) => {
   switch (type) {
+    case StepType.TEXT: {
+      return <ChatIcon />
+    }
     case StepType.TEXT: {
       return <TextIcon />
     }
-    case StepType.IMAGE: {
-      return <ImageIcon />
-    }
-    case StepType.DATE_PICKER: {
-      return <CalendarIcon />
-    }
     case StepType.START: {
       return <FlagIcon />
     }

apps/builder/components/board/StepTypesList/StepLabel.tsx

@@ -9,11 +9,8 @@ export const StepLabel = ({ type }: Props) => {
     case StepType.TEXT: {
       return <Text>Text</Text>
     }
-    case StepType.IMAGE: {
+    case StepType.TEXT_INPUT: {
-      return <Text>Image</Text>
+      return <Text>Text</Text>
-    }
-    case StepType.DATE_PICKER: {
-      return <Text>Date</Text>
     }
     default: {
       return <></>

apps/builder/components/board/StepTypesList/StepTypesList.tsx

@@ -14,8 +14,8 @@ export const stepListItems: {
   bubbles: { type: StepType }[]
   inputs: { type: StepType }[]
 } = {
-  bubbles: [{ type: StepType.TEXT }, { type: StepType.IMAGE }],
+  bubbles: [{ type: StepType.TEXT }],
-  inputs: [{ type: StepType.DATE_PICKER }],
+  inputs: [{ type: StepType.TEXT_INPUT }],
 }
 
 export const StepTypesList = () => {

apps/builder/components/board/StepTypesList/index.tsx

@@ -1 +1 @@
-export { StepTypesList as default } from './StepTypesList'
+export { StepTypesList } from './StepTypesList'

apps/builder/components/board/graph/BlockNode/BlockNode.tsx

@@ -5,27 +5,31 @@ import {
   Stack,
   useEventListener,
 } from '@chakra-ui/react'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Block, StartBlock } from 'bot-engine'
 import { useGraph } from 'contexts/GraphContext'
 import { useDnd } from 'contexts/DndContext'
 import { StepsList } from './StepsList'
 import { isNotDefined } from 'services/utils'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ContextMenu } from 'components/shared/ContextMenu'
+import { BlockNodeContextMenu } from './BlockNodeContextMenu'
 
 export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
-  const {
+  const { connectingIds, setConnectingIds, previewingIds } = useGraph()
-    updateBlockPosition,
+  const { updateBlockPosition, addStepToBlock } = useTypebot()
-    addNewStepToBlock,
-    connectingIds,
-    setConnectingIds,
-  } = useGraph()
   const { draggedStep, draggedStepType, setDraggedStepType, setDraggedStep } =
     useDnd()
-  const blockRef = useRef<HTMLDivElement | null>(null)
   const [isMouseDown, setIsMouseDown] = useState(false)
   const [titleValue, setTitleValue] = useState(block.title)
   const [showSortPlaceholders, setShowSortPlaceholders] = useState(false)
   const [isConnecting, setIsConnecting] = useState(false)
+  const isPreviewing = useMemo(
+    () =>
+      previewingIds.sourceId === block.id ||
+      previewingIds.targetId === block.id,
+    [block.id, previewingIds.sourceId, previewingIds.targetId]
+  )
 
   useEffect(() => {
     setIsConnecting(
@@ -69,44 +73,56 @@ export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
   const handleStepDrop = (index: number) => {
     setShowSortPlaceholders(false)
     if (draggedStepType) {
-      addNewStepToBlock(block.id, draggedStepType, index)
+      addStepToBlock(block.id, draggedStepType, index)
       setDraggedStepType(undefined)
     }
     if (draggedStep) {
-      addNewStepToBlock(block.id, draggedStep, index)
+      addStepToBlock(block.id, draggedStep, index)
       setDraggedStep(undefined)
     }
   }
 
   return (
-    <Stack
+    <ContextMenu<HTMLDivElement>
-      p="4"
+      renderMenu={() => <BlockNodeContextMenu blockId={block.id} />}
-      rounded="lg"
-      bgColor="blue.50"
-      borderWidth="2px"
-      borderColor={isConnecting ? 'blue.400' : 'gray.400'}
-      minW="300px"
-      transition="border 300ms"
-      pos="absolute"
-      style={{
-        transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
-      }}
-      onMouseDown={handleMouseDown}
-      onMouseUp={handleMouseUp}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      ref={blockRef}
     >
-      <Editable value={titleValue} onChange={handleTitleChange}>
+      {(ref, isOpened) => (
-        <EditablePreview _hover={{ bgColor: 'blue.100' }} px="1" />
+        <Stack
-        <EditableInput minW="0" px="1" />
+          ref={ref}
-      </Editable>
+          p="4"
-      <StepsList
+          rounded="lg"
-        blockId={block.id}
+          bgColor="blue.50"
-        steps={block.steps}
+          borderWidth="2px"
-        showSortPlaceholders={showSortPlaceholders}
+          borderColor={
-        onMouseUp={handleStepDrop}
+            isConnecting || isOpened || isPreviewing ? 'blue.400' : 'gray.400'
-      />
+          }
-    </Stack>
+          minW="300px"
+          transition="border 300ms"
+          pos="absolute"
+          style={{
+            transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
+          }}
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          <Editable value={titleValue} onChange={handleTitleChange}>
+            <EditablePreview
+              _hover={{ bgColor: 'blue.100' }}
+              px="1"
+              userSelect={'none'}
+            />
+            <EditableInput minW="0" px="1" />
+          </Editable>
+          <StepsList
+            blockId={block.id}
+            steps={block.steps}
+            showSortPlaceholders={showSortPlaceholders}
+            onMouseUp={handleStepDrop}
+          />
+        </Stack>
+      )}
+    </ContextMenu>
   )
 }

apps/builder/components/board/graph/BlockNode/BlockNodeContextMenu.tsx

@@ -0,0 +1,18 @@
+import { MenuList, MenuItem } from '@chakra-ui/react'
+import { TrashIcon } from 'assets/icons'
+import { useTypebot } from 'contexts/TypebotContext'
+
+export const BlockNodeContextMenu = ({ blockId }: { blockId: string }) => {
+  const { removeBlock } = useTypebot()
+
+  const handleDeleteClick = () => {
+    removeBlock(blockId)
+  }
+  return (
+    <MenuList>
+      <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
+        Delete
+      </MenuItem>
+    </MenuList>
+  )
+}

apps/builder/components/board/graph/BlockNode/StartBlockNode.tsx

@@ -5,15 +5,21 @@ import {
   Stack,
   useEventListener,
 } from '@chakra-ui/react'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { StartBlock } from 'bot-engine'
-import { useGraph } from 'contexts/GraphContext'
 import { StepNode } from './StepNode'
+import { useTypebot } from 'contexts/TypebotContext'
+import { useGraph } from 'contexts/GraphContext'
 
 export const StartBlockNode = ({ block }: { block: StartBlock }) => {
-  const { setStartBlock } = useGraph()
+  const { previewingIds } = useGraph()
   const [isMouseDown, setIsMouseDown] = useState(false)
   const [titleValue, setTitleValue] = useState(block.title)
+  const { updateBlockPosition } = useTypebot()
+  const isPreviewing = useMemo(
+    () => previewingIds.sourceId === block.id,
+    [block.id, previewingIds.sourceId]
+  )
 
   const handleTitleChange = (title: string) => setTitleValue(title)
 
@@ -28,15 +34,11 @@ export const StartBlockNode = ({ block }: { block: StartBlock }) => {
     if (!isMouseDown) return
     const { movementX, movementY } = event
 
-    setStartBlock({
+    updateBlockPosition(block.id, {
-      ...block,
+      x: block.graphCoordinates.x + movementX,
-      graphCoordinates: {
+      y: block.graphCoordinates.y + movementY,
-        x: block.graphCoordinates.x + movementX,
-        y: block.graphCoordinates.y + movementY,
-      },
     })
   }
-
   useEventListener('mousemove', handleMouseMove)
 
   return (
@@ -45,7 +47,7 @@ export const StartBlockNode = ({ block }: { block: StartBlock }) => {
       rounded="lg"
       bgColor="blue.50"
       borderWidth="2px"
-      borderColor="gray.400"
+      borderColor={isPreviewing ? 'blue.400' : 'gray.400'}
       minW="300px"
       transition="border 300ms"
       pos="absolute"
@@ -57,7 +59,11 @@ export const StartBlockNode = ({ block }: { block: StartBlock }) => {
       spacing="14px"
     >
       <Editable value={titleValue} onChange={handleTitleChange}>
-        <EditablePreview _hover={{ bgColor: 'blue.100' }} px="1" />
+        <EditablePreview
+          _hover={{ bgColor: 'blue.100' }}
+          px="1"
+          userSelect={'none'}
+        />
         <EditableInput minW="0" px="1" />
       </Editable>
       <StepNode step={block.steps[0]} isConnectable={true} />

apps/builder/components/board/graph/BlockNode/StepNode/RightClickMenu.tsx

@@ -0,0 +1,24 @@
+import { MenuList, MenuItem } from '@chakra-ui/react'
+import { TrashIcon } from 'assets/icons'
+import { useTypebot } from 'contexts/TypebotContext'
+
+export const StepNodeContextMenu = ({
+  blockId,
+  stepId,
+}: {
+  blockId: string
+  stepId: string
+}) => {
+  const { removeStepFromBlock } = useTypebot()
+
+  const handleDeleteClick = () => {
+    removeStepFromBlock(blockId, stepId)
+  }
+  return (
+    <MenuList>
+      <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
+        Delete
+      </MenuItem>
+    </MenuList>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/StepContent.tsx

@@ -0,0 +1,31 @@
+import { Flex, Text } from '@chakra-ui/react'
+import { Step, StartStep, StepType } from 'bot-engine'
+
+export const StepContent = (props: Step | StartStep) => {
+  switch (props.type) {
+    case StepType.TEXT: {
+      return (
+        <Flex
+          flexDir={'column'}
+          opacity={props.content.html === '' ? '0.5' : '1'}
+          className="slate-html-container"
+          dangerouslySetInnerHTML={{
+            __html:
+              props.content.html === ''
+                ? `<p>Click to edit...</p>`
+                : props.content.html,
+          }}
+        ></Flex>
+      )
+    }
+    case StepType.TEXT_INPUT: {
+      return <Text color={'gray.500'}>Type your answer...</Text>
+    }
+    case StepType.START: {
+      return <Text>{props.label}</Text>
+    }
+    default: {
+      return <Text>No input</Text>
+    }
+  }
+}

apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx

@@ -1,10 +1,16 @@
-import { Box, Flex, HStack, StackProps, Text } from '@chakra-ui/react'
+import { Box, Flex, HStack, useEventListener } from '@chakra-ui/react'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Block, StartStep, Step, StepType } from 'bot-engine'
 import { SourceEndpoint } from './SourceEndpoint'
 import { useGraph } from 'contexts/GraphContext'
 import { StepIcon } from 'components/board/StepTypesList/StepIcon'
 import { isDefined } from 'services/utils'
+import { Coordinates } from '@dnd-kit/core/dist/types'
+import { TextEditor } from './TextEditor/TextEditor'
+import { StepContent } from './StepContent'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ContextMenu } from 'components/shared/ContextMenu'
+import { StepNodeContextMenu } from './RightClickMenu'
 
 export const StepNode = ({
   step,
@@ -17,17 +23,18 @@ export const StepNode = ({
   isConnectable: boolean
   onMouseMoveBottomOfElement?: () => void
   onMouseMoveTopOfElement?: () => void
-  onMouseDown?: (e: React.MouseEvent, step: Step) => void
+  onMouseDown?: (
+    stepNodePosition: { absolute: Coordinates; relative: Coordinates },
+    step: Step
+  ) => void
 }) => {
-  const stepRef = useRef<HTMLDivElement | null>(null)
+  const { setConnectingIds, connectingIds } = useGraph()
-  const {
+  const { removeStepFromBlock, typebot } = useTypebot()
-    setConnectingIds,
+  const { blocks, startBlock } = typebot ?? {}
-    removeStepFromBlock,
-    blocks,
-    connectingIds,
-    startBlock,
-  } = useGraph()
   const [isConnecting, setIsConnecting] = useState(false)
+  const [mouseDownEvent, setMouseDownEvent] =
+    useState<{ absolute: Coordinates; relative: Coordinates }>()
+  const [isEditing, setIsEditing] = useState<boolean | undefined>(undefined)
 
   useEffect(() => {
     setIsConnecting(
@@ -59,12 +66,38 @@ export const StepNode = ({
   const handleMouseDown = (e: React.MouseEvent) => {
     if (!onMouseDown) return
     e.stopPropagation()
-    onMouseDown(e, step as Step)
+    const element = e.currentTarget as HTMLDivElement
-    removeStepFromBlock(step.blockId, step.id)
+    const rect = element.getBoundingClientRect()
+    const relativeX = e.clientX - rect.left
+    const relativeY = e.clientY - rect.top
+    setMouseDownEvent({
+      absolute: { x: e.clientX + relativeX, y: e.clientY + relativeY },
+      relative: { x: relativeX, y: relativeY },
+    })
+  }
+
+  const handleGlobalMouseUp = () => {
+    setMouseDownEvent(undefined)
+  }
+  useEventListener('mouseup', handleGlobalMouseUp)
+
+  const handleMouseUp = () => {
+    if (mouseDownEvent) {
+      setIsEditing(true)
+    }
   }
 
   const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
     if (!onMouseMoveBottomOfElement || !onMouseMoveTopOfElement) return
+    const isMovingAndIsMouseDown =
+      mouseDownEvent &&
+      onMouseDown &&
+      (event.movementX > 0 || event.movementY > 0)
+    if (isMovingAndIsMouseDown) {
+      onMouseDown(mouseDownEvent, step as Step)
+      removeStepFromBlock(step.blockId, step.id)
+      setMouseDownEvent(undefined)
+    }
     const element = event.currentTarget as HTMLDivElement
     const rect = element.getBoundingClientRect()
     const y = event.clientY - rect.top
@@ -72,8 +105,12 @@ export const StepNode = ({
     else onMouseMoveTopOfElement()
   }
 
+  const handleCloseEditor = () => {
+    setIsEditing(false)
+  }
+
   const connectedStubPosition: 'right' | 'left' | undefined = useMemo(() => {
-    const currentBlock = [startBlock, ...blocks].find(
+    const currentBlock = [startBlock, ...(blocks ?? [])].find(
       (b) => b?.id === step.blockId
     )
     const isDragginConnectorFromCurrentBlock =
@@ -83,7 +120,7 @@ export const StepNode = ({
       ? connectingIds.target?.blockId
       : step.target?.blockId
     const targetedBlock = targetBlockId
-      ? blocks.find((b) => b.id === targetBlockId)
+      ? (blocks ?? []).find((b) => b.id === targetBlockId)
       : undefined
     return targetedBlock
       ? targetedBlock.graphCoordinates.x <
@@ -100,106 +137,74 @@ export const StepNode = ({
     startBlock,
   ])
 
-  return (
+  return step.type === StepType.TEXT &&
-    <Flex
+    (isEditing ||
-      pos="relative"
+      (isEditing === undefined && step.content.plainText === '')) ? (
-      ref={stepRef}
+    <TextEditor
-      onMouseMove={handleMouseMove}
+      ids={{ stepId: step.id, blockId: step.blockId }}
-      onMouseDown={handleMouseDown}
+      initialValue={step.content.richText}
-      onMouseEnter={handleMouseEnter}
+      onClose={handleCloseEditor}
-      onMouseLeave={handleMouseLeave}
+    />
+  ) : (
+    <ContextMenu<HTMLDivElement>
+      renderMenu={() => (
+        <StepNodeContextMenu blockId={step.blockId} stepId={step.id} />
+      )}
     >
-      {connectedStubPosition === 'left' && (
+      {(ref, isOpened) => (
-        <Box
+        <Flex
-          h="2px"
+          pos="relative"
-          pos="absolute"
+          ref={ref}
-          left="-18px"
+          onMouseMove={handleMouseMove}
-          top="25px"
+          onMouseDown={handleMouseDown}
-          w="18px"
+          onMouseEnter={handleMouseEnter}
-          bgColor="blue.500"
+          onMouseLeave={handleMouseLeave}
-        />
+          onMouseUp={handleMouseUp}
-      )}
+        >
-      <HStack
+          {connectedStubPosition === 'left' && (
-        flex="1"
+            <Box
-        userSelect="none"
+              h="2px"
-        p="3"
+              pos="absolute"
-        borderWidth="2px"
+              left="-18px"
-        borderColor={isConnecting ? 'blue.400' : 'gray.400'}
+              top="25px"
-        rounded="lg"
+              w="18px"
-        cursor={'grab'}
+              bgColor="blue.500"
-        bgColor="white"
+            />
-      >
+          )}
-        <StepIcon type={step.type} />
+          <HStack
-        <StepContent {...step} />
+            flex="1"
-        {isConnectable && (
+            userSelect="none"
-          <SourceEndpoint
+            p="3"
-            onConnectionDragStart={handleConnectionDragStart}
+            borderWidth="2px"
-            pos="absolute"
+            borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.400'}
-            right="20px"
+            rounded="lg"
-          />
+            cursor={'pointer'}
-        )}
+            bgColor="white"
-      </HStack>
+          >
+            <StepIcon type={step.type} />
+            <StepContent {...step} />
+            {isConnectable && (
+              <SourceEndpoint
+                onConnectionDragStart={handleConnectionDragStart}
+                pos="absolute"
+                right="20px"
+              />
+            )}
+          </HStack>
 
-      {isDefined(connectedStubPosition) && (
+          {isDefined(connectedStubPosition) && (
-        <Box
+            <Box
-          h="2px"
+              h="2px"
-          pos="absolute"
+              pos="absolute"
-          right={connectedStubPosition === 'left' ? undefined : '-18px'}
+              right={connectedStubPosition === 'left' ? undefined : '-18px'}
-          left={connectedStubPosition === 'left' ? '-18px' : undefined}
+              left={connectedStubPosition === 'left' ? '-18px' : undefined}
-          top="25px"
+              top="25px"
-          w="18px"
+              w="18px"
-          bgColor="gray.500"
+              bgColor="gray.500"
-        />
+            />
+          )}
+        </Flex>
       )}
-    </Flex>
+    </ContextMenu>
-  )
-}
-
-export const StepContent = (props: Step | StartStep) => {
-  switch (props.type) {
-    case StepType.TEXT: {
-      return (
-        <Text opacity={props.content === '' ? '0.5' : '1'}>
-          {props.content === '' ? 'Type text...' : props.content}
-        </Text>
-      )
-    }
-    case StepType.DATE_PICKER: {
-      return (
-        <Text opacity={props.content === '' ? '0.5' : '1'}>
-          {props.content === '' ? 'Pick a date...' : props.content}
-        </Text>
-      )
-    }
-    case StepType.START: {
-      return <Text>{props.label}</Text>
-    }
-    default: {
-      return <Text>No input</Text>
-    }
-  }
-}
-
-export const StepNodeOverlay = ({
-  step,
-  ...props
-}: { step: Step } & StackProps) => {
-  return (
-    <HStack
-      p="3"
-      borderWidth="1px"
-      rounded="lg"
-      bgColor="white"
-      cursor={'grab'}
-      pos="fixed"
-      top="0"
-      left="0"
-      w="264px"
-      pointerEvents="none"
-      {...props}
-    >
-      <StepIcon type={step.type} />
-      <StepContent {...step} />
-    </HStack>
   )
 }

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeOverlay.tsx

@@ -0,0 +1,28 @@
+import { StackProps, HStack } from '@chakra-ui/react'
+import { Step } from 'bot-engine'
+import { StepIcon } from 'components/board/StepTypesList/StepIcon'
+import { StepContent } from './StepContent'
+
+export const StepNodeOverlay = ({
+  step,
+  ...props
+}: { step: Step } & StackProps) => {
+  return (
+    <HStack
+      p="3"
+      borderWidth="1px"
+      rounded="lg"
+      bgColor="white"
+      cursor={'grab'}
+      pos="fixed"
+      top="0"
+      left="0"
+      w="264px"
+      pointerEvents="none"
+      {...props}
+    >
+      <StepIcon type={step.type} />
+      <StepContent {...step} />
+    </HStack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/TextEditor/TextEditor.tsx

@@ -0,0 +1,97 @@
+import { Stack, useOutsideClick } from '@chakra-ui/react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Plate,
+  selectEditor,
+  serializeHtml,
+  TDescendant,
+  withPlate,
+} from '@udecode/plate-core'
+import { editorStyle, platePlugins } from 'libs/plate'
+import { useDebounce } from 'use-debounce'
+import { useTypebot } from 'contexts/TypebotContext'
+import { createEditor } from 'slate'
+import { ToolBar } from './ToolBar'
+import { parseHtmlStringToPlainText } from 'services/utils'
+
+type TextEditorProps = {
+  ids: { stepId: string; blockId: string }
+  initialValue: TDescendant[]
+  onClose: () => void
+}
+
+export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
+  const editor = useMemo(
+    () => withPlate(createEditor(), { id: ids.stepId, plugins: platePlugins }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+  const { updateStep } = useTypebot()
+  const [value, setValue] = useState(initialValue)
+  const [debouncedValue] = useDebounce(value, 500)
+  const textEditorRef = useRef<HTMLDivElement>(null)
+  useOutsideClick({
+    ref: textEditorRef,
+    handler: () => {
+      save(value)
+      onClose()
+    },
+  })
+
+  useEffect(() => {
+    save(debouncedValue)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValue])
+
+  const save = (value: unknown[]) => {
+    console.log('SAVE', value)
+    if (value.length === 0) return
+    const html = serializeHtml(editor, {
+      nodes: value,
+    })
+    updateStep(ids, {
+      content: {
+        html,
+        richText: value,
+        plainText: parseHtmlStringToPlainText(html),
+      },
+    })
+  }
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation()
+  }
+  return (
+    <Stack
+      flex="1"
+      ref={textEditorRef}
+      borderWidth="2px"
+      borderColor="blue.500"
+      rounded="md"
+      onMouseDown={handleMouseDown}
+      spacing={0}
+    >
+      <ToolBar />
+      <Plate
+        id={ids.stepId}
+        editableProps={{
+          style: editorStyle,
+          autoFocus: true,
+          onFocus: () => {
+            if (editor.children.length === 0) return
+            selectEditor(editor, {
+              edge: 'end',
+            })
+          },
+        }}
+        initialValue={
+          initialValue.length === 0
+            ? [{ type: 'p', children: [{ text: '' }] }]
+            : initialValue
+        }
+        onChange={setValue}
+        editor={editor}
+      />
+    </Stack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/TextEditor/ToolBar.tsx

@@ -0,0 +1,40 @@
+import { StackProps, HStack, Button } from '@chakra-ui/react'
+import {
+  MARK_BOLD,
+  MARK_ITALIC,
+  MARK_UNDERLINE,
+} from '@udecode/plate-basic-marks'
+import { usePlateEditorRef, getPluginType } from '@udecode/plate-core'
+import { LinkToolbarButton } from '@udecode/plate-ui-link'
+import { MarkToolbarButton } from '@udecode/plate-ui-toolbar'
+import { BoldIcon, ItalicIcon, UnderlineIcon, LinkIcon } from 'assets/icons'
+
+export const ToolBar = (props: StackProps) => {
+  const editor = usePlateEditorRef()
+  return (
+    <HStack
+      bgColor={'white'}
+      borderTopRadius="md"
+      p={2}
+      w="full"
+      boxSizing="border-box"
+      borderBottomWidth={1}
+      {...props}
+    >
+      <Button size="sm">Variables</Button>
+      <MarkToolbarButton
+        type={getPluginType(editor, MARK_BOLD)}
+        icon={<BoldIcon />}
+      />
+      <MarkToolbarButton
+        type={getPluginType(editor, MARK_ITALIC)}
+        icon={<ItalicIcon />}
+      />
+      <MarkToolbarButton
+        type={getPluginType(editor, MARK_UNDERLINE)}
+        icon={<UnderlineIcon />}
+      />
+      <LinkToolbarButton icon={<LinkIcon />} />
+    </HStack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/TextEditor/index.tsx

@@ -0,0 +1 @@
+export { TextEditor } from './TextEditor'

apps/builder/components/board/graph/BlockNode/StepNode/index.tsx

@@ -1 +1,2 @@
-export { StepNode, StepNodeOverlay } from './StepNode'
+export { StepNode } from './StepNode'
+export { StepNodeOverlay } from './StepNodeOverlay'

apps/builder/components/board/graph/BlockNode/StepsList.tsx

@@ -1,6 +1,7 @@
 import { useEventListener, Stack, Flex, Portal } from '@chakra-ui/react'
 import { StartStep, Step } from 'bot-engine'
 import { useDnd } from 'contexts/DndContext'
+import { Coordinates } from 'contexts/GraphContext'
 import { useState } from 'react'
 import { StepNode, StepNodeOverlay } from './StepNode'
 
@@ -51,13 +52,12 @@ export const StepsList = ({
     onMouseUp(expandedPlaceholderIndex)
   }
 
-  const handleStepMouseDown = (e: React.MouseEvent, step: Step) => {
+  const handleStepMouseDown = (
-    const element = e.currentTarget as HTMLDivElement
+    { absolute, relative }: { absolute: Coordinates; relative: Coordinates },
-    const rect = element.getBoundingClientRect()
+    step: Step
-    const relativeX = e.clientX - rect.left
+  ) => {
-    const relativeY = e.clientY - rect.top
+    setPosition(absolute)
-    setPosition({ x: e.clientX - relativeX, y: e.clientY - relativeY })
+    setRelativeCoordinates(relative)
-    setRelativeCoordinates({ x: relativeX, y: relativeY })
     setDraggedStep(step)
   }
 

apps/builder/components/board/graph/Edges/DrawingEdge.tsx

@@ -1,6 +1,7 @@
 import { useEventListener } from '@chakra-ui/hooks'
 import { Coordinates } from '@dnd-kit/core/dist/types'
 import { Block } from 'bot-engine'
+import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 import {
   blockWidth,
   firstStepOffsetY,
@@ -8,6 +9,7 @@ import {
   stubLength,
   useGraph,
 } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext'
 import React, { useMemo, useState } from 'react'
 import {
   computeFlowChartConnectorPath,
@@ -16,18 +18,16 @@ import {
 import { roundCorners } from 'svg-round-corners'
 
 export const DrawingEdge = () => {
-  const {
+  const { graphPosition, setConnectingIds, connectingIds } = useGraph()
-    graphPosition,
+  const { typebot, updateTarget } = useTypebot()
-    setConnectingIds,
+  const { startBlock, blocks } = typebot ?? {}
-    blocks,
-    connectingIds,
-    addTarget,
-    startBlock,
-  } = useGraph()
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
 
   const sourceBlock = useMemo(
-    () => [startBlock, ...blocks].find((b) => b?.id === connectingIds?.blockId),
+    () =>
+      [startBlock, ...(blocks ?? [])].find(
+        (b) => b?.id === connectingIds?.blockId
+      ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [connectingIds]
   )
@@ -35,7 +35,7 @@ export const DrawingEdge = () => {
   const path = useMemo(() => {
     if (!sourceBlock) return ``
     if (connectingIds?.target) {
-      const targetedBlock = blocks.find(
+      const targetedBlock = blocks?.find(
         (b) => b.id === connectingIds.target?.blockId
       ) as Block
       const targetedStepIndex = connectingIds.target.stepId
@@ -62,12 +62,12 @@ export const DrawingEdge = () => {
   const handleMouseMove = (e: MouseEvent) => {
     setMousePosition({
       x: e.clientX - graphPosition.x,
-      y: e.clientY - graphPosition.y,
+      y: e.clientY - graphPosition.y - headerHeight,
     })
   }
   useEventListener('mousemove', handleMouseMove)
   useEventListener('mouseup', () => {
-    if (connectingIds?.target) addTarget(connectingIds)
+    if (connectingIds?.target) updateTarget(connectingIds)
     setConnectingIds(null)
   })
 
@@ -117,8 +117,8 @@ const computeThreeSegments = (
   const segments = []
   const firstSegmentX =
     sourceType === 'right'
-      ? sourcePosition.x + stubLength
+      ? sourcePosition.x + stubLength + 40
-      : sourcePosition.x - stubLength
+      : sourcePosition.x - stubLength - 40
   segments.push(`L${firstSegmentX},${sourcePosition.y}`)
   segments.push(`L${firstSegmentX},${targetPosition.y}`)
   segments.push(`L${targetPosition.x},${targetPosition.y}`)

apps/builder/components/board/graph/Edges/Edge.tsx

@@ -1,5 +1,6 @@
 import { Block, StartStep, Step, Target } from 'bot-engine'
 import { Coordinates, useGraph } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext'
 import React, { useMemo } from 'react'
 import {
   getAnchorsPosition,
@@ -18,17 +19,32 @@ export type StepWithTarget = Omit<Step | StartStep, 'target'> & {
 }
 
 export const Edge = ({ step }: { step: StepWithTarget }) => {
-  const { blocks, startBlock } = useGraph()
+  const { typebot } = useTypebot()
+  const { previewingIds } = useGraph()
+  const isPreviewing = useMemo(
+    () =>
+      previewingIds.sourceId === step.blockId &&
+      previewingIds.targetId === step.target.blockId,
+    [
+      previewingIds.sourceId,
+      previewingIds.targetId,
+      step.blockId,
+      step.target.blockId,
+    ]
+  )
+  const { blocks, startBlock } = typebot ?? {}
 
   const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
-    const targetBlock = blocks.find(
+    const targetBlock = blocks?.find(
       (b) => b?.id === step.target.blockId
     ) as Block
     const targetStepIndex = step.target.stepId
       ? targetBlock.steps.findIndex((s) => s.id === step.target.stepId)
       : undefined
     return {
-      sourceBlock: [startBlock, ...blocks].find((b) => b?.id === step.blockId),
+      sourceBlock: [startBlock, ...(blocks ?? [])].find(
+        (b) => b?.id === step.blockId
+      ),
       targetBlock,
       targetStepIndex,
     }
@@ -54,7 +70,7 @@ export const Edge = ({ step }: { step: StepWithTarget }) => {
   return (
     <path
       d={path}
-      stroke="#718096"
+      stroke={isPreviewing ? '#1a5fff' : '#718096'}
       strokeWidth="2px"
       markerEnd="url(#arrow)"
       fill="none"

apps/builder/components/board/graph/Edges/Edges.tsx

@@ -1,16 +1,17 @@
 import { chakra } from '@chakra-ui/system'
-import { useGraph } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext'
 import React, { useMemo } from 'react'
 import { DrawingEdge } from './DrawingEdge'
 import { Edge, StepWithTarget } from './Edge'
 
 export const Edges = () => {
-  const { blocks, startBlock } = useGraph()
+  const { typebot } = useTypebot()
+  const { blocks, startBlock } = typebot ?? {}
   const stepsWithTarget: StepWithTarget[] = useMemo(() => {
     if (!startBlock) return []
     return [
       ...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
-      ...(blocks
+      ...((blocks ?? [])
         .flatMap((b) => b.steps)
         .filter((s) => s.target) as StepWithTarget[]),
     ]

apps/builder/components/board/graph/Graph.tsx

@@ -1,39 +1,25 @@
 import { Flex, useEventListener } from '@chakra-ui/react'
-import React, { useRef, useMemo, useEffect } from 'react'
+import React, { useRef, useMemo } from 'react'
 import { blockWidth, useGraph } from 'contexts/GraphContext'
 import { BlockNode } from './BlockNode/BlockNode'
 import { useDnd } from 'contexts/DndContext'
 import { Edges } from './Edges'
 import { useTypebot } from 'contexts/TypebotContext'
 import { StartBlockNode } from './BlockNode/StartBlockNode'
+import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 
 const Graph = () => {
   const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
     useDnd()
   const graphContainerRef = useRef<HTMLDivElement | null>(null)
-  const { typebot } = useTypebot()
+  const { typebot, addNewBlock } = useTypebot()
-  const {
+  const { graphPosition, setGraphPosition } = useGraph()
-    blocks,
-    setBlocks,
-    graphPosition,
-    setGraphPosition,
-    addNewBlock,
-    setStartBlock,
-    startBlock,
-  } = useGraph()
   const transform = useMemo(
     () =>
       `translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
     [graphPosition]
   )
 
-  useEffect(() => {
-    if (!typebot) return
-    setBlocks(typebot.blocks)
-    setStartBlock(typebot.startBlock)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [typebot?.blocks])
-
   const handleMouseWheel = (e: WheelEvent) => {
     e.preventDefault()
     const isPinchingTrackpad = e.ctrlKey
@@ -59,26 +45,33 @@ const Graph = () => {
       step: draggedStep,
       type: draggedStepType,
       x: e.clientX - graphPosition.x - blockWidth / 3,
-      y: e.clientY - graphPosition.y - 20,
+      y: e.clientY - graphPosition.y - 20 - headerHeight,
     })
     setDraggedStep(undefined)
     setDraggedStepType(undefined)
   }
   useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
 
+  const handleMouseDown = (e: MouseEvent) => {
+    const isRightClick = e.button === 2
+    if (isRightClick) e.stopPropagation()
+  }
+  useEventListener('mousedown', handleMouseDown, undefined, { capture: true })
+
   if (!typebot) return <></>
   return (
-    <Flex ref={graphContainerRef} flex="1" h="full">
+    <Flex ref={graphContainerRef} flex="1">
       <Flex
         flex="1"
         boxSize={'200px'}
+        maxW={'200px'}
         style={{
           transform,
         }}
       >
         <Edges />
-        {startBlock && <StartBlockNode block={startBlock} />}
+        {typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
-        {blocks.map((block) => (
+        {(typebot.blocks ?? []).map((block) => (
           <BlockNode block={block} key={block.id} />
         ))}
       </Flex>

apps/builder/components/board/preview/PreviewDrawer.tsx

@@ -0,0 +1,119 @@
+import {
+  Box,
+  Button,
+  CloseButton,
+  Fade,
+  Flex,
+  FlexProps,
+  useEventListener,
+  VStack,
+} from '@chakra-ui/react'
+import { TypebotViewer } from 'bot-engine'
+import { headerHeight } from 'components/shared/TypebotHeader'
+import { useEditor } from 'contexts/EditorContext'
+import { useGraph } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext'
+import React, { useMemo, useState } from 'react'
+import { parseTypebotToPublicTypebot } from 'services/typebots'
+
+export const PreviewDrawer = () => {
+  const { typebot } = useTypebot()
+  const { setRightPanel } = useEditor()
+  const { previewingIds, setPreviewingIds } = useGraph()
+  const [isResizing, setIsResizing] = useState(false)
+  const [width, setWidth] = useState(400)
+  const [isResizeHandleVisible, setIsResizeHandleVisible] = useState(false)
+
+  const publicTypebot = useMemo(
+    () => (typebot ? parseTypebotToPublicTypebot(typebot) : undefined),
+    [typebot]
+  )
+
+  const handleMouseDown = () => {
+    setIsResizing(true)
+  }
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isResizing) return
+    setWidth(width - e.movementX)
+  }
+  useEventListener('mousemove', handleMouseMove)
+
+  const handleMouseUp = () => {
+    setIsResizing(false)
+  }
+  useEventListener('mouseup', handleMouseUp)
+
+  const handleNewBlockVisible = (targetId: string) =>
+    setPreviewingIds({
+      sourceId: !previewingIds.sourceId
+        ? 'start-block'
+        : previewingIds.targetId,
+      targetId: targetId,
+    })
+
+  return (
+    <Flex
+      pos="absolute"
+      right="0"
+      top={`0`}
+      h={`100%`}
+      w={`${width}px`}
+      bgColor="white"
+      shadow="lg"
+      borderLeftRadius={'lg'}
+      onMouseOver={() => setIsResizeHandleVisible(true)}
+      onMouseLeave={() => setIsResizeHandleVisible(false)}
+      p="6"
+    >
+      <Fade in={isResizeHandleVisible}>
+        <ResizeHandle
+          pos="absolute"
+          left="-7.5px"
+          top={`calc(50% - ${headerHeight}px)`}
+          onMouseDown={handleMouseDown}
+        />
+      </Fade>
+
+      <VStack w="full" spacing={4}>
+        <Flex justifyContent={'space-between'} w="full">
+          <Button>Restart</Button>
+          <CloseButton onClick={() => setRightPanel(undefined)} />
+        </Flex>
+
+        {publicTypebot && (
+          <Flex
+            borderWidth={'1px'}
+            borderRadius={'lg'}
+            h="full"
+            w="full"
+            pointerEvents={isResizing ? 'none' : 'auto'}
+          >
+            <TypebotViewer
+              typebot={publicTypebot}
+              onNewBlockVisisble={handleNewBlockVisible}
+            />
+          </Flex>
+        )}
+      </VStack>
+    </Flex>
+  )
+}
+
+const ResizeHandle = (props: FlexProps) => {
+  return (
+    <Flex
+      w="15px"
+      h="50px"
+      borderWidth={'1px'}
+      bgColor={'white'}
+      cursor={'col-resize'}
+      justifyContent={'center'}
+      align={'center'}
+      {...props}
+    >
+      <Box w="2px" bgColor={'gray.300'} h="70%" mr="0.5" />
+      <Box w="2px" bgColor={'gray.300'} h="70%" />
+    </Flex>
+  )
+}

apps/builder/components/dashboard/FolderContent.tsx

@@ -1,4 +1,5 @@
-import { DashboardFolder, Typebot } from '.prisma/client'
+import { DashboardFolder } from '.prisma/client'
+import { Typebot } from 'bot-engine'
 import {
   Button,
   Flex,
@@ -133,7 +134,6 @@ export const FolderContent = ({ folder }: Props) => {
             <HStack>
               {folder && <BackButton id={folder.parentFolderId} />}
               <Button
-                colorScheme="gray"
                 leftIcon={<FolderPlusIcon />}
                 onClick={handleCreateFolder}
                 isLoading={isCreatingFolder || isFolderLoading}

apps/builder/components/dashboard/FolderContent/FolderButton.tsx

@@ -148,7 +148,6 @@ export const ButtonSkeleton = () => (
     pos="relative"
     cursor="pointer"
     variant="outline"
-    colorScheme={'gray'}
   >
     <VStack spacing="6" w="full">
       <SkeletonCircle boxSize="45px" />

apps/builder/components/dashboard/FolderContent/TypebotButton.tsx

@@ -11,12 +11,12 @@ import {
 } from '@chakra-ui/react'
 import { useDraggable } from '@dnd-kit/core'
 import { useRouter } from 'next/router'
-import { Typebot } from 'db'
 import { isMobile } from 'services/utils'
 import { MoreButton } from 'components/MoreButton'
 import { ConfirmModal } from 'components/modals/ConfirmModal'
 import { GlobeIcon, ToolIcon } from 'assets/icons'
 import { deleteTypebot, duplicateTypebot } from 'services/typebots'
+import { Typebot } from 'bot-engine'
 
 type ChatbotCardProps = {
   typebot: Typebot
@@ -77,7 +77,6 @@ export const TypebotButton = ({
       display="flex"
       flexDir="column"
       variant="outline"
-      colorScheme="gray"
       color="gray.800"
       w="225px"
       h="270px"

apps/builder/components/dashboard/FolderContent/TypebotButtonOverlay.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, Text, VStack } from '@chakra-ui/react'
-import { Typebot } from '.prisma/client'
 import { GlobeIcon, ToolIcon } from 'assets/icons'
+import { Typebot } from 'bot-engine'
 
 type Props = {
   typebot: Typebot
@@ -16,7 +16,6 @@ export const TypebotCardOverlay = ({ typebot }: Props) => {
         display="flex"
         flexDir="column"
         variant="outline"
-        colorScheme="gray"
         w="full"
         h="full"
         whiteSpace="normal"

apps/builder/components/modals/ConfirmModal.tsx

@@ -58,7 +58,7 @@ export const ConfirmModal = ({
           <AlertDialogBody>{message}</AlertDialogBody>
 
           <AlertDialogFooter>
-            <Button ref={cancelRef} onClick={onClose} colorScheme="gray">
+            <Button ref={cancelRef} onClick={onClose}>
               Cancel
             </Button>
             <Button

apps/builder/components/shared/ContextMenu.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import {
+  useEventListener,
+  Portal,
+  Menu,
+  MenuButton,
+  PortalProps,
+  MenuButtonProps,
+  MenuProps,
+} from '@chakra-ui/react'
+
+export interface ContextMenuProps<T extends HTMLElement> {
+  renderMenu: () => JSX.Element | null
+  children: (
+    ref: MutableRefObject<T | null>,
+    isOpened: boolean
+  ) => JSX.Element | null
+  menuProps?: MenuProps
+  portalProps?: PortalProps
+  menuButtonProps?: MenuButtonProps
+}
+
+export function ContextMenu<T extends HTMLElement = HTMLElement>(
+  props: ContextMenuProps<T>
+) {
+  const [isOpened, setIsOpened] = useState(false)
+  const [isRendered, setIsRendered] = useState(false)
+  const [isDeferredOpen, setIsDeferredOpen] = useState(false)
+  const [position, setPosition] = useState<[number, number]>([0, 0])
+  const targetRef = useRef<T>(null)
+
+  useEffect(() => {
+    if (isOpened) {
+      setTimeout(() => {
+        setIsRendered(true)
+        setTimeout(() => {
+          setIsDeferredOpen(true)
+        })
+      })
+    } else {
+      setIsDeferredOpen(false)
+      const timeout = setTimeout(() => {
+        setIsRendered(isOpened)
+      }, 1000)
+      return () => clearTimeout(timeout)
+    }
+  }, [isOpened])
+
+  useEventListener(
+    'contextmenu',
+    (e) => {
+      if (e.currentTarget === targetRef.current) {
+        e.preventDefault()
+        e.stopPropagation()
+        setIsOpened(true)
+        setPosition([e.pageX, e.pageY])
+      } else {
+        setIsOpened(false)
+      }
+    },
+    targetRef.current
+  )
+
+  const onCloseHandler = useCallback(() => {
+    props.menuProps?.onClose?.()
+    setIsOpened(false)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.menuProps?.onClose, setIsOpened])
+
+  return (
+    <>
+      {props.children(targetRef, isOpened)}
+      {isRendered && (
+        <Portal {...props.portalProps}>
+          <Menu
+            isOpen={isDeferredOpen}
+            gutter={0}
+            {...props.menuProps}
+            onClose={onCloseHandler}
+          >
+            <MenuButton
+              aria-hidden={true}
+              w={1}
+              h={1}
+              style={{
+                position: 'absolute',
+                left: position[0],
+                top: position[1],
+                cursor: 'default',
+              }}
+              {...props.menuButtonProps}
+            />
+            {props.renderMenu()}
+          </Menu>
+        </Portal>
+      )}
+    </>
+  )
+}

apps/builder/components/shared/KBar.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {
+  KBarPortal,
+  KBarPositioner,
+  KBarAnimator,
+  KBarSearch,
+  KBarResults,
+  useMatches,
+} from 'kbar'
+import { chakra, Flex } from '@chakra-ui/react'
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type KBarProps = {}
+
+const KBarSearchChakra = chakra(KBarSearch)
+const KBarAnimatorChakra = chakra(KBarAnimator)
+const KBarResultsChakra = chakra(KBarResults)
+
+export const KBar = ({}: KBarProps) => {
+  return (
+    <KBarPortal>
+      <KBarPositioner>
+        <KBarAnimatorChakra shadow="2xl" rounded="md">
+          <KBarSearchChakra
+            p={4}
+            w="500px"
+            roundedTop="md"
+            _focus={{ outline: 'none' }}
+          />
+          <RenderResults />
+        </KBarAnimatorChakra>
+      </KBarPositioner>
+    </KBarPortal>
+  )
+}
+
+const RenderResults = () => {
+  const { results } = useMatches()
+
+  return (
+    <KBarResultsChakra
+      items={results}
+      onRender={({ item, active }) =>
+        typeof item === 'string' ? (
+          <Flex height="50px">{item}</Flex>
+        ) : (
+          <Flex
+            height="50px"
+            roundedBottom="md"
+            align="center"
+            px="4"
+            bgColor={active ? 'blue.50' : 'white'}
+            _hover={{ bgColor: 'blue.50' }}
+          >
+            {active && (
+              <Flex
+                pos="absolute"
+                left="0"
+                h="full"
+                w="3px"
+                roundedRight="md"
+                bgColor={'blue.500'}
+              />
+            )}
+            {item.name}
+          </Flex>
+        )
+      }
+    />
+  )
+}

apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx

@@ -0,0 +1,26 @@
+import { Editable, EditablePreview, EditableInput } from '@chakra-ui/editable'
+import { Tooltip } from '@chakra-ui/tooltip'
+import React from 'react'
+
+type EditableProps = {
+  name?: string
+  onNewName: (newName: string) => void
+}
+export const EditableTypebotName = ({ name, onNewName }: EditableProps) => {
+  return (
+    <Tooltip label="Rename">
+      <Editable defaultValue={name} onSubmit={onNewName}>
+        <EditablePreview
+          isTruncated
+          cursor="pointer"
+          maxW="200px"
+          overflow="hidden"
+          display="flex"
+          alignItems="center"
+          minW="100px"
+        />
+        <EditableInput />
+      </Editable>
+    </Tooltip>
+  )
+}

apps/builder/components/shared/TypebotHeader/SaveButton.tsx

@@ -0,0 +1,33 @@
+import { IconButton, Text, Tooltip } from '@chakra-ui/react'
+import { CheckIcon, SaveIcon } from 'assets/icons'
+import { useTypebot } from 'contexts/TypebotContext'
+import React from 'react'
+
+export const SaveButton = () => {
+  const { save, isSavingLoading, hasUnsavedChanges } = useTypebot()
+
+  const onSaveClick = () => {
+    save()
+  }
+
+  return (
+    <>
+      {hasUnsavedChanges && (
+        <Text fontSize="sm" color="gray.500">
+          Unsaved changes
+        </Text>
+      )}
+      <Tooltip label="Save changes">
+        <IconButton
+          isDisabled={!hasUnsavedChanges}
+          onClick={onSaveClick}
+          isLoading={isSavingLoading}
+          icon={
+            hasUnsavedChanges ? <SaveIcon /> : <CheckIcon color="green.400" />
+          }
+          aria-label={hasUnsavedChanges ? 'Save' : 'Saved'}
+        />
+      </Tooltip>
+    </>
+  )
+}

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -0,0 +1,123 @@
+import { Flex, HStack, Button, IconButton } from '@chakra-ui/react'
+import { ChevronLeftIcon } from 'assets/icons'
+import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
+import { RightPanel, useEditor } from 'contexts/EditorContext'
+import { useTypebot } from 'contexts/TypebotContext'
+import { useRouter } from 'next/router'
+import React from 'react'
+import { PublishButton } from '../buttons/PublishButton'
+import { EditableTypebotName } from './EditableTypebotName'
+import { SaveButton } from './SaveButton'
+
+export const headerHeight = 56
+
+export const TypebotHeader = () => {
+  const router = useRouter()
+  const { typebot } = useTypebot()
+  const { setRightPanel } = useEditor()
+
+  const handleBackClick = () => {
+    router.push({
+      pathname: `/typebots`,
+      query: { ...router.query, typebotId: [] },
+    })
+  }
+
+  return (
+    <Flex
+      w="full"
+      borderBottomWidth="1px"
+      justify="center"
+      align="center"
+      pos="fixed"
+      h={`${headerHeight}px`}
+      zIndex={2}
+      bgColor="white"
+    >
+      <HStack>
+        <Button
+          as={NextChakraLink}
+          href={{
+            pathname: `/typebots/${typebot?.id}/edit`,
+            query: { ...router.query, typebotId: [] },
+          }}
+          colorScheme={router.pathname.includes('/edit') ? 'blue' : 'gray'}
+          variant={router.pathname.includes('/edit') ? 'outline' : 'ghost'}
+        >
+          Flow
+        </Button>
+        <Button
+          as={NextChakraLink}
+          href={{
+            pathname: `/typebots/${typebot?.id}/design`,
+            query: { ...router.query, typebotId: [] },
+          }}
+          colorScheme={router.pathname.endsWith('share') ? 'blue' : 'gray'}
+          variant={router.pathname.endsWith('share') ? 'outline' : 'ghost'}
+        >
+          Theme
+        </Button>
+        <Button
+          as={NextChakraLink}
+          href={{
+            pathname: `/typebots/${typebot?.id}/design`,
+            query: { ...router.query, typebotId: [] },
+          }}
+          colorScheme={router.pathname.endsWith('share') ? 'blue' : 'gray'}
+          variant={router.pathname.endsWith('share') ? 'outline' : 'ghost'}
+        >
+          Settings
+        </Button>
+        <Button
+          as={NextChakraLink}
+          href={{
+            pathname: `/typebots/${typebot?.id}/share`,
+            query: { ...router.query, typebotId: [] },
+          }}
+          colorScheme={router.pathname.endsWith('share') ? 'blue' : 'gray'}
+          variant={router.pathname.endsWith('share') ? 'outline' : 'ghost'}
+        >
+          Share
+        </Button>
+        <Button
+          as={NextChakraLink}
+          href={{
+            pathname: `/typebots/${typebot?.id}/results/responses`,
+            query: { ...router.query, typebotId: [] },
+          }}
+          colorScheme={router.pathname.includes('results') ? 'blue' : 'gray'}
+          variant={router.pathname.includes('results') ? 'outline' : 'ghost'}
+        >
+          Results
+        </Button>
+      </HStack>
+      <Flex pos="absolute" left="1rem" justify="center" align="center">
+        <Flex alignItems="center">
+          <IconButton
+            aria-label="Back"
+            icon={<ChevronLeftIcon fontSize={30} />}
+            mr={2}
+            onClick={handleBackClick}
+          />
+          <EditableTypebotName
+            name={typebot?.name}
+            onNewName={(newName) => console.log(newName)}
+          />
+        </Flex>
+      </Flex>
+
+      <HStack right="40px" pos="absolute">
+        <SaveButton />
+        <Button
+          onClick={() => {
+            setRightPanel(RightPanel.PREVIEW)
+          }}
+        >
+          Preview
+        </Button>
+
+        <PublishButton />
+      </HStack>
+    </Flex>
+  )
+}

apps/builder/components/shared/TypebotHeader/index.tsx

@@ -0,0 +1 @@
+export * from './TypebotHeader'

apps/builder/components/shared/buttons/PublishButton.tsx

@@ -0,0 +1,9 @@
+import { Button } from '@chakra-ui/react'
+
+export const PublishButton = () => {
+  return (
+    <Button ml={2} colorScheme={'blue'}>
+      Publish
+    </Button>
+  )
+}

apps/builder/contexts/EditorContext.tsx

@@ -0,0 +1,35 @@
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useState,
+} from 'react'
+
+export enum RightPanel {
+  PREVIEW,
+}
+const editorContext = createContext<{
+  rightPanel?: RightPanel
+  setRightPanel: Dispatch<SetStateAction<RightPanel | undefined>>
+}>({
+  setRightPanel: () => console.log("I'm not instantiated"),
+})
+
+export const EditorContext = ({ children }: { children: ReactNode }) => {
+  const [rightPanel, setRightPanel] = useState<RightPanel>()
+
+  return (
+    <editorContext.Provider
+      value={{
+        rightPanel,
+        setRightPanel,
+      }}
+    >
+      {children}
+    </editorContext.Provider>
+  )
+}
+
+export const useEditor = () => useContext(editorContext)

apps/builder/contexts/GraphContext.tsx

@@ -1,4 +1,4 @@
-import { Block, StartBlock, Step, StepType, Target } from 'bot-engine'
+import { Block, Step, StepType, Target } from 'bot-engine'
 import {
   createContext,
   Dispatch,
@@ -7,8 +7,6 @@ import {
   useContext,
   useState,
 } from 'react'
-import { parseNewBlock, parseNewStep } from 'services/graph'
-import { insertItemInList } from 'services/utils'
 
 export const stubLength = 20
 export const blockWidth = 300
@@ -27,7 +25,7 @@ export const blockAnchorsOffset = {
   },
 }
 export const firstStepOffsetY = 88
-export const spaceBetweenSteps = 66
+export const spaceBetweenSteps = 62
 
 export type Coordinates = { x: number; y: number }
 
@@ -59,38 +57,15 @@ const graphContext = createContext<{
   setConnectingIds: Dispatch<
     SetStateAction<{ blockId: string; stepId: string; target?: Target } | null>
   >
-  startBlock?: StartBlock
+  previewingIds: { sourceId?: string; targetId?: string }
-  setStartBlock: Dispatch<SetStateAction<StartBlock | undefined>>
+  setPreviewingIds: Dispatch<
-  blocks: Block[]
+    SetStateAction<{ sourceId?: string; targetId?: string }>
-  setBlocks: Dispatch<SetStateAction<Block[]>>
+  >
-  addNewBlock: (props: NewBlockPayload) => void
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  updateBlockPosition: (blockId: string, newPositon: Coordinates) => void
+  //@ts-ignore
-  addNewStepToBlock: (
-    blockId: string,
-    step: StepType | Step,
-    index: number
-  ) => void
-  removeStepFromBlock: (blockId: string, stepId: string) => void
-  addTarget: (connectingIds: {
-    blockId: string
-    stepId: string
-    target?: Target
-  }) => void
-  removeTarget: (connectingIds: { blockId: string; stepId: string }) => void
 }>({
   graphPosition: graphPositionDefaultValue,
-  setGraphPosition: () => console.log("I'm not instantiated"),
   connectingIds: null,
-  setConnectingIds: () => console.log("I'm not instantiated"),
-  blocks: [],
-  setBlocks: () => console.log("I'm not instantiated"),
-  updateBlockPosition: () => console.log("I'm not instantiated"),
-  addNewStepToBlock: () => console.log("I'm not instantiated"),
-  addNewBlock: () => console.log("I'm not instantiated"),
-  removeStepFromBlock: () => console.log("I'm not instantiated"),
-  addTarget: () => console.log("I'm not instantiated"),
-  removeTarget: () => console.log("I'm not instantiated"),
-  setStartBlock: () => console.log("I'm not instantiated"),
 })
 
 export const GraphProvider = ({ children }: { children: ReactNode }) => {
@@ -100,125 +75,10 @@ export const GraphProvider = ({ children }: { children: ReactNode }) => {
     stepId: string
     target?: Target
   } | null>(null)
-  const [blocks, setBlocks] = useState<Block[]>([])
+  const [previewingIds, setPreviewingIds] = useState<{
-  const [startBlock, setStartBlock] = useState<StartBlock | undefined>()
+    sourceId?: string
-
+    targetId?: string
-  const addNewBlock = ({ x, y, type, step }: NewBlockPayload) => {
+  }>({})
-    const boardCoordinates = {
-      x,
-      y,
-    }
-    setBlocks((blocks) => [
-      ...blocks.filter((block) => block.steps.length > 0),
-      parseNewBlock({
-        step,
-        type,
-        totalBlocks: blocks.length,
-        initialCoordinates: boardCoordinates,
-      }),
-    ])
-  }
-
-  const updateBlockPosition = (blockId: string, newPosition: Coordinates) => {
-    setBlocks((blocks) =>
-      blocks.map((block) =>
-        block.id === blockId
-          ? { ...block, graphCoordinates: newPosition }
-          : block
-      )
-    )
-  }
-
-  const addNewStepToBlock = (
-    blockId: string,
-    step: StepType | Step,
-    index: number
-  ) => {
-    setBlocks((blocks) =>
-      blocks
-        .map((block) =>
-          block.id === blockId
-            ? {
-                ...block,
-                steps: insertItemInList<Step>(
-                  block.steps,
-                  index,
-                  typeof step === 'string'
-                    ? parseNewStep(step as StepType, block.id)
-                    : { ...step, blockId: block.id }
-                ),
-              }
-            : block
-        )
-        .filter((block) => block.steps.length > 0)
-    )
-  }
-
-  const removeStepFromBlock = (blockId: string, stepId: string) => {
-    setBlocks((blocks) =>
-      blocks.map((block) =>
-        block.id === blockId
-          ? {
-              ...block,
-              steps: [...block.steps.filter((step) => step.id !== stepId)],
-            }
-          : block
-      )
-    )
-  }
-
-  const addTarget = ({
-    blockId,
-    stepId,
-    target,
-  }: {
-    blockId: string
-    stepId: string
-    target?: Target
-  }) => {
-    startBlock && blockId === 'start-block'
-      ? setStartBlock({
-          ...startBlock,
-          steps: [{ ...startBlock.steps[0], target }],
-        })
-      : setBlocks((blocks) =>
-          blocks.map((block) =>
-            block.id === blockId
-              ? {
-                  ...block,
-                  steps: [
-                    ...block.steps.map((step) =>
-                      step.id === stepId ? { ...step, target } : step
-                    ),
-                  ],
-                }
-              : block
-          )
-        )
-  }
-
-  const removeTarget = ({
-    blockId,
-    stepId,
-  }: {
-    blockId: string
-    stepId: string
-  }) => {
-    setBlocks((blocks) =>
-      blocks.map((block) =>
-        block.id === blockId
-          ? {
-              ...block,
-              steps: [
-                ...block.steps.map((step) =>
-                  step.id === stepId ? { ...step, target: undefined } : step
-                ),
-              ],
-            }
-          : block
-      )
-    )
-  }
 
   return (
     <graphContext.Provider
@@ -227,16 +87,8 @@ export const GraphProvider = ({ children }: { children: ReactNode }) => {
         setGraphPosition,
         connectingIds,
         setConnectingIds,
-        blocks,
+        previewingIds,
-        setBlocks,
+        setPreviewingIds,
-        updateBlockPosition,
-        addNewStepToBlock,
-        addNewBlock,
-        removeStepFromBlock,
-        addTarget,
-        removeTarget,
-        startBlock,
-        setStartBlock,
       }}
     >
       {children}

apps/builder/contexts/TypebotContext.tsx

@@ -1,12 +1,53 @@
 import { useToast } from '@chakra-ui/react'
-import { Typebot } from 'bot-engine'
+import { Block, Step, StepType, Target, Typebot } from 'bot-engine'
 import { useRouter } from 'next/router'
-import { createContext, ReactNode, useContext, useEffect } from 'react'
+import {
-import { fetcher } from 'services/utils'
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import {
+  checkIfTypebotsAreEqual,
+  parseNewBlock,
+  parseNewStep,
+  updateTypebot,
+} from 'services/typebots'
+import {
+  fetcher,
+  insertItemInList,
+  preventUserFromRefreshing,
+} from 'services/utils'
 import useSWR from 'swr'
+import { NewBlockPayload, Coordinates } from './GraphContext'
 
 const typebotContext = createContext<{
   typebot?: Typebot
+  hasUnsavedChanges: boolean
+  isSavingLoading: boolean
+  save: () => void
+  updateStep: (
+    ids: { stepId: string; blockId: string },
+    updates: Partial<Step>
+  ) => void
+  addNewBlock: (props: NewBlockPayload) => void
+  updateBlockPosition: (blockId: string, newPositon: Coordinates) => void
+  removeBlock: (blockId: string) => void
+  addStepToBlock: (
+    blockId: string,
+    step: StepType | Step,
+    index: number
+  ) => void
+  removeStepFromBlock: (blockId: string, stepId: string) => void
+  updateTarget: (connectingIds: {
+    blockId: string
+    stepId: string
+    target?: Target
+  }) => void
+  undo: () => void
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
 }>({})
 
 export const TypebotContext = ({
@@ -21,7 +62,8 @@ export const TypebotContext = ({
     position: 'top-right',
     status: 'error',
   })
-  const { typebot, isLoading } = useFetchedTypebot({
+  const [undoStack, setUndoStack] = useState<Typebot[]>([])
+  const { typebot, isLoading, mutate } = useFetchedTypebot({
     typebotId,
     onError: (error) =>
       toast({
@@ -29,20 +71,214 @@ export const TypebotContext = ({
         description: error.message,
       }),
   })
+  const [localTypebot, setLocalTypebot] = useState<Typebot>()
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
+  const [isSavingLoading, setIsSavingLoading] = useState(false)
+
+  useEffect(() => {
+    if (!localTypebot || !typebot) return
+    if (!checkIfTypebotsAreEqual(localTypebot, typebot)) {
+      setHasUnsavedChanges(true)
+      pushNewTypebotInUndoStack(localTypebot)
+      window.removeEventListener('beforeunload', preventUserFromRefreshing)
+      window.addEventListener('beforeunload', preventUserFromRefreshing)
+    } else {
+      setHasUnsavedChanges(false)
+      window.removeEventListener('beforeunload', preventUserFromRefreshing)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [localTypebot])
 
   useEffect(() => {
     if (isLoading) return
     if (!typebot) {
       toast({ status: 'info', description: "Couldn't find typebot" })
       router.replace('/typebots')
+      return
     }
+    setLocalTypebot({ ...typebot })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading])
 
+  const pushNewTypebotInUndoStack = (typebot: Typebot) => {
+    setUndoStack([...undoStack, typebot])
+  }
+
+  const undo = () => {
+    const lastTypebot = [...undoStack].pop()
+    setUndoStack(undoStack.slice(0, -1))
+    setLocalTypebot(lastTypebot)
+  }
+
+  const saveTypebot = async () => {
+    if (!localTypebot) return
+    setIsSavingLoading(true)
+    const { error } = await updateTypebot(localTypebot.id, localTypebot)
+    setIsSavingLoading(false)
+    if (error) return toast({ title: error.name, description: error.message })
+    mutate({ typebot: localTypebot })
+    setHasUnsavedChanges(false)
+    window.removeEventListener('beforeunload', preventUserFromRefreshing)
+  }
+
+  const updateBlocks = (blocks: Block[]) => {
+    if (!localTypebot) return
+    setLocalTypebot({
+      ...localTypebot,
+      blocks: [...blocks],
+    })
+  }
+
+  const updateStep = (
+    { blockId, stepId }: { blockId: string; stepId: string },
+    updates: Partial<Omit<Step, 'id' | 'type'>>
+  ) => {
+    if (!localTypebot) return
+    setLocalTypebot({
+      ...localTypebot,
+      blocks: localTypebot.blocks.map((block) =>
+        block.id === blockId
+          ? {
+              ...block,
+              steps: block.steps.map((step) =>
+                step.id === stepId ? { ...step, ...updates } : step
+              ),
+            }
+          : block
+      ),
+    })
+  }
+
+  const addNewBlock = ({ x, y, type, step }: NewBlockPayload) => {
+    if (!localTypebot) return
+    updateBlocks([
+      ...localTypebot.blocks.filter((block) => block.steps.length > 0),
+      parseNewBlock({
+        step,
+        type,
+        totalBlocks: localTypebot.blocks.length,
+        initialCoordinates: {
+          x,
+          y,
+        },
+      }),
+    ])
+  }
+
+  const updateBlockPosition = (blockId: string, newPosition: Coordinates) => {
+    if (!localTypebot) return
+    blockId === 'start-block'
+      ? setLocalTypebot({
+          ...localTypebot,
+          startBlock: {
+            ...localTypebot.startBlock,
+            graphCoordinates: newPosition,
+          },
+        })
+      : updateBlocks(
+          localTypebot.blocks.map((block) =>
+            block.id === blockId
+              ? { ...block, graphCoordinates: newPosition }
+              : block
+          )
+        )
+  }
+
+  const addStepToBlock = (
+    blockId: string,
+    step: StepType | Step,
+    index: number
+  ) => {
+    if (!localTypebot) return
+    updateBlocks(
+      localTypebot.blocks
+        .map((block) =>
+          block.id === blockId
+            ? {
+                ...block,
+                steps: insertItemInList<Step>(
+                  block.steps,
+                  index,
+                  typeof step === 'string'
+                    ? parseNewStep(step as StepType, block.id)
+                    : { ...step, blockId: block.id }
+                ),
+              }
+            : block
+        )
+        .filter((block) => block.steps.length > 0)
+    )
+  }
+
+  const removeStepFromBlock = (blockId: string, stepId: string) => {
+    if (!localTypebot) return
+    updateBlocks(
+      localTypebot.blocks.map((block) =>
+        block.id === blockId
+          ? {
+              ...block,
+              steps: [...block.steps.filter((step) => step.id !== stepId)],
+            }
+          : block
+      )
+    )
+  }
+
+  const updateTarget = ({
+    blockId,
+    stepId,
+    target,
+  }: {
+    blockId: string
+    stepId: string
+    target?: Target
+  }) => {
+    if (!localTypebot) return
+    blockId === 'start-block'
+      ? setLocalTypebot({
+          ...localTypebot,
+          startBlock: {
+            ...localTypebot.startBlock,
+            steps: [{ ...localTypebot.startBlock.steps[0], target }],
+          },
+        })
+      : updateBlocks(
+          localTypebot.blocks.map((block) =>
+            block.id === blockId
+              ? {
+                  ...block,
+                  steps: [
+                    ...block.steps.map((step) =>
+                      step.id === stepId ? { ...step, target } : step
+                    ),
+                  ],
+                }
+              : block
+          )
+        )
+  }
+
+  const removeBlock = (blockId: string) => {
+    if (!localTypebot) return
+    const blocks = [...localTypebot.blocks.filter((b) => b.id !== blockId)]
+    setLocalTypebot({ ...localTypebot, blocks })
+  }
+
   return (
     <typebotContext.Provider
       value={{
-        typebot,
+        typebot: localTypebot,
+        updateStep,
+        addNewBlock,
+        addStepToBlock,
+        updateTarget,
+        removeStepFromBlock,
+        updateBlockPosition,
+        hasUnsavedChanges,
+        isSavingLoading,
+        save: saveTypebot,
+        removeBlock,
+        undo,
       }}
     >
       {children}

apps/builder/libs/chakra.ts

@@ -50,11 +50,6 @@ const components = {
       colorScheme: 'blue',
     },
   },
-  Button: {
-    defaultProps: {
-      colorScheme: 'blue',
-    },
-  },
   NumberInput: {
     defaultProps: {
       focusBorderColor: 'blue.200',

apps/builder/libs/kbar.ts

@@ -0,0 +1,16 @@
+export const actions = [
+  {
+    id: 'blog',
+    name: 'Blog',
+    shortcut: ['b'],
+    keywords: 'writing words',
+    perform: () => (window.location.pathname = 'blog'),
+  },
+  {
+    id: 'contact',
+    name: 'Contact',
+    shortcut: ['c'],
+    keywords: 'email',
+    perform: () => (window.location.pathname = 'contact'),
+  },
+]

apps/builder/libs/plate.ts

@@ -0,0 +1,56 @@
+import {
+  AutoformatRule,
+  createAutoformatPlugin,
+} from '@udecode/plate-autoformat'
+import {
+  MARK_BOLD,
+  MARK_UNDERLINE,
+  MARK_ITALIC,
+  createBoldPlugin,
+  createItalicPlugin,
+  createUnderlinePlugin,
+} from '@udecode/plate-basic-marks'
+import { createPlugins } from '@udecode/plate-core'
+import { createLinkPlugin } from '@udecode/plate-link'
+
+export const editorStyle: React.CSSProperties = {
+  flex: 1,
+  padding: '1rem',
+  backgroundColor: 'white',
+  borderRadius: '0.25rem',
+}
+
+export const autoFormatRules: AutoformatRule[] = [
+  {
+    mode: 'mark',
+    type: MARK_BOLD,
+    match: '**',
+  },
+  {
+    mode: 'mark',
+    type: MARK_UNDERLINE,
+    match: '__',
+  },
+  {
+    mode: 'mark',
+    type: MARK_ITALIC,
+    match: '*',
+  },
+  {
+    mode: 'mark',
+    type: MARK_ITALIC,
+    match: '_',
+  },
+]
+
+export const platePlugins = createPlugins([
+  createBoldPlugin(),
+  createItalicPlugin(),
+  createUnderlinePlugin(),
+  createLinkPlugin(),
+  createAutoformatPlugin({
+    options: {
+      rules: autoFormatRules,
+    },
+  }),
+])

apps/builder/next.config.js

@@ -1,6 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const withTM = require('next-transpile-modules')(['bot-engine'])
-
-module.exports = withTM({
-  reactStrictMode: true,
-})

apps/builder/package.json

@@ -10,44 +10,58 @@
   },
   "dependencies": {
     "@chakra-ui/css-reset": "^1.1.1",
-    "@chakra-ui/react": "^1.7.2",
+    "@chakra-ui/react": "^1.7.3",
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/sortable": "^5.1.0",
-    "@emotion/react": "^11",
+    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11",
+    "@emotion/styled": "^11.6.0",
     "@next-auth/prisma-adapter": "next",
+    "@udecode/plate-autoformat": "^9.0.0",
+    "@udecode/plate-basic-marks": "^9.0.0",
+    "@udecode/plate-common": "^7.0.2",
+    "@udecode/plate-core": "^9.0.0",
+    "@udecode/plate-link": "^9.0.0",
+    "@udecode/plate-ui-link": "^9.0.0",
+    "@udecode/plate-ui-toolbar": "^9.0.0",
     "bot-engine": "*",
     "db": "*",
+    "fast-equals": "^2.0.4",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4",
-    "next": "^12.0.4",
+    "htmlparser2": "^7.2.0",
+    "kbar": "^0.1.0-beta.24",
+    "next": "^12.0.7",
     "next-auth": "beta",
-    "nodemailer": "^6.7.1",
+    "nodemailer": "^6.7.2",
     "nprogress": "^0.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-frame-component": "^5.2.1",
     "short-uuid": "^4.2.0",
+    "slate": "^0.72.0",
+    "slate-history": "^0.66.0",
+    "slate-hyperscript": "^0.67.0",
+    "slate-react": "^0.72.1",
+    "styled-components": "^5.3.3",
     "svg-round-corners": "^0.3.0",
-    "swr": "^1.0.1",
+    "swr": "^1.1.1",
     "use-debounce": "^7.0.1"
   },
   "devDependencies": {
     "@testing-library/cypress": "^8.0.2",
     "@types/node": "^16.11.9",
     "@types/nprogress": "^0.2.0",
-    "@types/react": "^17.0.35",
+    "@types/react": "^17.0.37",
     "@types/testing-library__cypress": "^5.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
-    "cypress": "^9.1.0",
+    "cypress": "^9.2.0",
-    "cypress-social-logins": "^1.12.0",
+    "cypress-social-logins": "^1.13.0",
-    "dotenv-cli": "^4.1.0",
     "eslint": "<8.0.0",
-    "eslint-config-next": "12.0.4",
+    "eslint-config-next": "12.0.7",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "next-transpile-modules": "^9.0.0",
+    "prettier": "^2.5.1",
-    "prettier": "^2.4.1",
     "typescript": "^4.5.4"
   }
 }

apps/builder/pages/_app.tsx

@@ -5,6 +5,7 @@ import { ChakraProvider } from '@chakra-ui/react'
 import { customTheme } from 'libs/chakra'
 import { useRouterProgressBar } from 'libs/routerProgressBar'
 import 'assets/styles/routerProgressBar.css'
+import 'assets/styles/plate.css'
 import 'focus-visible/dist/focus-visible'
 
 const App = ({ Component, pageProps }: AppProps) => {

apps/builder/pages/api/typebots.ts

@@ -12,37 +12,45 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     return res.status(401).json({ message: 'Not authenticated' })
 
   const user = session.user as User
-  if (req.method === 'GET') {
+  try {
-    const folderId = req.query.folderId ? req.query.folderId.toString() : null
+    if (req.method === 'GET') {
-    const typebots = await prisma.typebot.findMany({
+      const folderId = req.query.folderId ? req.query.folderId.toString() : null
-      where: {
+      const typebots = await prisma.typebot.findMany({
-        ownerId: user.id,
+        where: {
-        folderId,
+          ownerId: user.id,
-      },
+          folderId,
-    })
-    return res.send({ typebots })
-  }
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body) as Typebot
-    const startBlock: StartBlock = {
-      id: 'start-block',
-      title: 'Start',
-      graphCoordinates: { x: 0, y: 0 },
-      steps: [
-        {
-          id: 'start-step',
-          blockId: 'start-block',
-          label: 'Form starts here',
-          type: StepType.START,
         },
-      ],
+      })
+      return res.send({ typebots })
     }
-    const typebot = await prisma.typebot.create({
+    if (req.method === 'POST') {
-      data: { ...data, ownerId: user.id, startBlock },
+      const data = JSON.parse(req.body) as Typebot
-    })
+      const startBlock: StartBlock = {
-    return res.send(typebot)
+        id: 'start-block',
+        title: 'Start',
+        graphCoordinates: { x: 0, y: 0 },
+        steps: [
+          {
+            id: 'start-step',
+            blockId: 'start-block',
+            label: 'Form starts here',
+            type: StepType.START,
+          },
+        ],
+      }
+      const typebot = await prisma.typebot.create({
+        data: { ...data, ownerId: user.id, startBlock },
+      })
+      return res.send(typebot)
+    }
+    return methodNotAllowed(res)
+  } catch (err) {
+    console.error(err)
+    if (err instanceof Error) {
+      return res.status(500).send({ title: err.name, message: err.message })
+    }
+    return res.status(500).send({ message: 'An error occured', error: err })
   }
-  return methodNotAllowed(res)
 }
 
 export default handler

apps/builder/pages/typebots/[id]/edit.tsx

@@ -2,21 +2,32 @@ import { Flex } from '@chakra-ui/layout'
 import { Board } from 'components/board/Board'
 import withAuth from 'components/HOC/withUser'
 import { Seo } from 'components/Seo'
+import { TypebotHeader } from 'components/shared/TypebotHeader'
+import { EditorContext } from 'contexts/EditorContext'
 import { GraphProvider } from 'contexts/GraphContext'
 import { TypebotContext } from 'contexts/TypebotContext'
 import { useRouter } from 'next/router'
+import { KBarProvider } from 'kbar'
 import React from 'react'
+import { actions } from 'libs/kbar'
+import { KBar } from 'components/shared/KBar'
 
 const TypebotEditPage = () => {
   const { query } = useRouter()
   return (
     <TypebotContext typebotId={query.id?.toString()}>
       <Seo title="Editor" />
-      <Flex overflow="hidden" h="100vh">
+      <EditorContext>
-        <GraphProvider>
+        <KBarProvider actions={actions}>
-          <Board />
+          <KBar />
-        </GraphProvider>
+          <Flex overflow="hidden" h="100vh">
-      </Flex>
+            <TypebotHeader />
+            <GraphProvider>
+              <Board />
+            </GraphProvider>
+          </Flex>
+        </KBarProvider>
+      </EditorContext>
     </TypebotContext>
   )
 }

apps/builder/services/graph.ts

@@ -1,13 +1,5 @@
 import { Coordinates } from '@dnd-kit/core/dist/types'
-import {
+import { Block, StartBlock } from 'bot-engine'
-  StepType,
-  Block,
-  Step,
-  TextStep,
-  ImageStep,
-  DatePickerStep,
-  StartBlock,
-} from 'bot-engine'
 import { AnchorsPositionProps } from 'components/board/graph/Edges/Edge'
 import {
   stubLength,
@@ -16,54 +8,9 @@ import {
   spaceBetweenSteps,
   firstStepOffsetY,
 } from 'contexts/GraphContext'
-import shortId from 'short-uuid'
 import { roundCorners } from 'svg-round-corners'
 import { isDefined } from './utils'
 
-export const parseNewBlock = ({
-  type,
-  totalBlocks,
-  initialCoordinates,
-  step,
-}: {
-  step?: Step
-  type?: StepType
-  totalBlocks: number
-  initialCoordinates: { x: number; y: number }
-}): Block => {
-  const id = `b${shortId.generate()}`
-  return {
-    id,
-    title: `Block #${totalBlocks + 1}`,
-    graphCoordinates: initialCoordinates,
-    steps: [
-      step ? { ...step, blockId: id } : parseNewStep(type as StepType, id),
-    ],
-  }
-}
-
-export const parseNewStep = (type: StepType, blockId: string): Step => {
-  const id = `s${shortId.generate()}`
-  switch (type) {
-    case StepType.TEXT: {
-      const textStep: TextStep = { type, content: '' }
-      return { blockId, id, ...textStep }
-    }
-    case StepType.IMAGE: {
-      const imageStep: ImageStep = { type, content: { url: '' } }
-      return { blockId, id, ...imageStep }
-    }
-    case StepType.DATE_PICKER: {
-      const imageStep: DatePickerStep = { type, content: '' }
-      return { blockId, id, ...imageStep }
-    }
-    default: {
-      const textStep: TextStep = { type: StepType.TEXT, content: '' }
-      return { blockId, id, ...textStep }
-    }
-  }
-}
-
 export const computeFlowChartConnectorPath = ({
   sourcePosition,
   targetPosition,

apps/builder/services/typebots.ts

@@ -1,6 +1,16 @@
-import { Typebot } from 'db'
+import {
+  Step,
+  StepType,
+  Block,
+  TextStep,
+  PublicTypebot,
+  TextInputStep,
+} from 'bot-engine'
+import shortId from 'short-uuid'
+import { Typebot } from 'bot-engine'
 import useSWR from 'swr'
 import { fetcher, sendRequest } from './utils'
+import { deepEqual } from 'fast-equals'
 
 export const useTypebots = ({
   folderId,
@@ -67,3 +77,82 @@ export const updateTypebot = async (id: string, typebot: Partial<Typebot>) =>
     method: 'PATCH',
     body: typebot,
   })
+
+export const parseNewBlock = ({
+  type,
+  totalBlocks,
+  initialCoordinates,
+  step,
+}: {
+  step?: Step
+  type?: StepType
+  totalBlocks: number
+  initialCoordinates: { x: number; y: number }
+}): Block => {
+  const id = `b${shortId.generate()}`
+  return {
+    id,
+    title: `Block #${totalBlocks + 1}`,
+    graphCoordinates: initialCoordinates,
+    steps: [
+      step ? { ...step, blockId: id } : parseNewStep(type as StepType, id),
+    ],
+  }
+}
+
+export const parseNewStep = (type: StepType, blockId: string): Step => {
+  const id = `s${shortId.generate()}`
+  switch (type) {
+    case StepType.TEXT: {
+      const textStep: Pick<TextStep, 'type' | 'content'> = {
+        type,
+        content: { html: '', richText: [], plainText: '' },
+      }
+      return {
+        id,
+        blockId,
+        ...textStep,
+      }
+    }
+    case StepType.TEXT_INPUT: {
+      const textStep: Pick<TextInputStep, 'type'> = {
+        type,
+      }
+      return {
+        id,
+        blockId,
+        ...textStep,
+      }
+    }
+    default: {
+      const textStep: Pick<TextStep, 'type' | 'content'> = {
+        type: StepType.TEXT,
+        content: { html: '', richText: [], plainText: '' },
+      }
+      return { blockId, id, ...textStep }
+    }
+  }
+}
+
+export const checkIfTypebotsAreEqual = (
+  firstChatbot: Typebot,
+  secondChatbot: Typebot
+) =>
+  deepEqual(
+    {
+      ...firstChatbot,
+    },
+    {
+      ...secondChatbot,
+    }
+  )
+
+export const parseTypebotToPublicTypebot = (
+  typebot: Typebot
+): PublicTypebot => ({
+  id: shortId.generate(),
+  blocks: typebot.blocks,
+  name: typebot.name,
+  startBlock: typebot.startBlock,
+  typebotId: typebot.id,
+})

apps/builder/services/utils.ts

@@ -1,3 +1,5 @@
+import { Parser } from 'htmlparser2'
+
 export const fetcher = async (input: RequestInfo, init?: RequestInit) => {
   const res = await fetch(input, init)
   return res.json()
@@ -44,3 +46,20 @@ export const isDefined = <T>(value: T | undefined | null): value is T => {
 export const isNotDefined = <T>(value: T | undefined | null): value is T => {
   return <T>value === undefined || <T>value === null
 }
+
+export const preventUserFromRefreshing = (e: BeforeUnloadEvent) => {
+  e.preventDefault()
+  e.returnValue = ''
+}
+
+export const parseHtmlStringToPlainText = (html: string): string => {
+  let label = ''
+  const parser = new Parser({
+    ontext(text) {
+      label += `${text}`
+    },
+  })
+  parser.write(html)
+  parser.end()
+  return label
+}

apps/viewer/next.config.js

@@ -1,6 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const withTM = require('next-transpile-modules')(['bot-engine'])
-
-module.exports = withTM({
-  reactStrictMode: true,
-})

packages/bot-engine/.gitignore

@@ -2,4 +2,5 @@ node_modules
 # Keep environment variables out of version control
 .env
 
-dist
+dist
+yarn-error.log

packages/bot-engine/package.json

@@ -1,25 +1,38 @@
 {
   "name": "bot-engine",
   "version": "0.1.0",
-  "main": "src/index.ts",
+  "main": "dist/cjs/index.js",
-  "types": "src/index.ts",
+  "module": "dist/esm/index.js",
-  "files": [
+  "types": "dist/index.d.ts",
-    "src/style.css"
-  ],
   "dependencies": {
-    "db": "*"
+    "db": "*",
+    "react-frame-component": "^5.2.1",
+    "react-scroll": "^1.8.4",
+    "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
     "@types/react": "^17.0.37",
+    "@types/react-scroll": "^1.8.3",
+    "@types/react-transition-group": "^4.4.4",
+    "autoprefixer": "^10.4.0",
     "npm-run-all": "^4.1.5",
-    "tailwindcss": "^3.0.5",
+    "postcss": "^8.4.5",
-    "typescript": "^4.5.4"
+    "tailwindcss": "^3.0.7",
+    "typescript": "^4.5.4",
+    "rollup": "^2.61.1",
+    "rollup-plugin-dts": "^4.0.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-typescript": "^8.3.0"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "scripts": {
-    "build": "yarn tailwind:generate",
+    "build": "yarn rollup -c",
-    "tailwind:generate": "tailwindcss -o src/style.css --minify"
+    "dev": "yarn rollup -c --watch"
   }
 }

packages/bot-engine/postcss.config.js

@@ -0,0 +1 @@
+module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }

packages/bot-engine/rollup.config.js

@@ -0,0 +1,48 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import dts from 'rollup-plugin-dts'
+import postcss from 'rollup-plugin-postcss'
+import { terser } from 'rollup-plugin-terser'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+
+const packageJson = require('./package.json')
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json' }),
+      postcss({
+        config: {
+          path: './postcss.config.js',
+        },
+        extract: false,
+        minimize: false,
+        inject: false,
+      }),
+      terser(),
+    ],
+  },
+  {
+    input: 'dist/esm/types/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    plugins: [dts()],
+    external: [/\.css$/],
+  },
+]

packages/bot-engine/src/assets/icons.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const SendIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    width="19px"
+    {...props}
+  >
+    <title>Send</title>
+    <path d="M476.59 227.05l-.16-.07L49.35 49.84A23.56 23.56 0 0027.14 52 24.65 24.65 0 0016 72.59v113.29a24 24 0 0019.52 23.57l232.93 43.07a4 4 0 010 7.86L35.53 303.45A24 24 0 0016 327v113.31A23.57 23.57 0 0026.59 460a23.94 23.94 0 0013.22 4 24.55 24.55 0 009.52-1.93L476.4 285.94l.19-.09a32 32 0 000-58.8z" />
+  </svg>
+)

packages/bot-engine/src/assets/style.css

@@ -0,0 +1,384 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --typebot-container-bg-image: none;
+  --typebot-container-bg-color: #f7f8ff;
+  --typebot-container-font-family: 'Inter';
+  --typebot-chat-view-max-width: 700px;
+  --typebot-chat-view-bg-color: #ffffff;
+  --typebot-chat-view-color: #303235;
+
+  --typebot-button-active-bg-color: #0042da;
+  --typebot-button-active-color: #ffffff;
+  --typebot-button-inactive-bg-color: #edf2f7;
+  --typebot-button-inactive-color: #303235;
+  --typebot-button-border: 1px solid var(--typebot-button-active-bg-color);
+  --typebot-button-shadow: none;
+
+  --typebot-host-bubble-bg-color: #f7f8ff;
+  --typebot-host-bubble-color: #303235;
+  --typebot-host-bubble-border: 1px solid var(--typebot-host-bubble-bg-color);
+  --typebot-host-bubble-shadow: none;
+
+  --typebot-guest-bubble-bg-color: #ff8e21;
+  --typebot-guest-bubble-color: #ffffff;
+  --typebot-guest-bubble-border: 1px solid var(--typebot-guest-bubble-bg-color);
+  --typebot-guest-bubble-shadow: none;
+
+  --typebot-input-bg-color: #ffffff;
+  --typebot-input-color: #303235;
+  --typebot-input-border: 1px solid var(--typebot-input-bg-color);
+  --typebot-input-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --typebot-input-placeholder-color: #9095a0;
+
+  --typebot-header-bg-color: #ffffff;
+  --typebot-header-color: #303235;
+  --typebot-header-border: none;
+  --typebot-header-shadow: none;
+  --typebot-header-max-width: 1000px;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollable-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.scrollable-container {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.StripeElement {
+  box-sizing: border-box;
+  height: 40px;
+  padding: 10px 12px;
+}
+
+/* Transitions */
+.bubble-enter {
+  opacity: 0;
+}
+.bubble-enter-active {
+  opacity: 1;
+  transition-property: opacity;
+  transition-duration: 500ms;
+  transition-timing-function: ease-out;
+}
+.bubble-exit {
+  opacity: 1;
+}
+.bubble-exit-active {
+  opacity: 0;
+  transition-delay: 0ms !important;
+  transition-property: opacity;
+  transition-duration: 400ms;
+  transition-timing-function: ease-out;
+}
+
+.bubble-typing {
+  transition: width 400ms ease-out, height 400ms ease-out;
+}
+
+.content-opacity {
+  transition: opacity 400ms ease-in 200ms;
+}
+
+.bubble1,
+.bubble2,
+.bubble3 {
+  background-color: var(--typebot-host-bubble-color);
+  opacity: 0.5;
+}
+
+.bubble1 {
+  animation: chatBubbles 1s ease-in-out infinite;
+}
+
+.bubble2 {
+  animation: chatBubbles 1s ease-in-out infinite;
+  animation-delay: 0.3s;
+}
+
+.bubble3 {
+  animation: chatBubbles 1s ease-in-out infinite;
+  animation-delay: 0.5s;
+}
+
+@keyframes chatBubbles {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+button,
+input,
+textarea {
+  font-weight: 300;
+}
+
+.slate-a {
+  text-decoration: underline;
+}
+
+.slate-html-container > div {
+  min-height: 24px;
+}
+
+.slate-bold {
+  font-weight: bold;
+}
+
+.slate-italic {
+  font-style: oblique;
+}
+
+.slate-underline {
+  text-decoration: underline;
+}
+
+.comp-input::-webkit-input-placeholder {
+  /* Chrome/Opera/Safari */
+  color: var(--typebot-input-placeholder-color) !important;
+  opacity: 1 !important;
+}
+.comp-input::-moz-placeholder {
+  /* Firefox 19+ */
+  color: var(--typebot-input-placeholder-color) !important;
+  opacity: 1 !important;
+}
+.comp-input::placeholder {
+  color: var(--typebot-input-placeholder-color) !important;
+  opacity: 1 !important;
+}
+
+.PhoneInput {
+  /* This is done to stretch the contents of this component. */
+  display: flex;
+  align-items: center;
+}
+
+.PhoneInput > input {
+  color: var(--typebot-input-color);
+  background-color: var(--typebot-input-bg-color);
+}
+
+.PhoneInput > input::placeholder {
+  color: var(--typebot-input-placeholder-color) !important;
+}
+
+.PhoneInputInput {
+  /* The phone number input stretches to fill all empty space */
+  flex: 1;
+  /* The phone number input should shrink
+	   to make room for the extension input */
+  min-width: 0;
+  padding: 1rem 1rem 1rem 0;
+}
+
+.PhoneInputInput:focus {
+  outline: none;
+}
+
+.PhoneInputCountryIcon {
+  width: calc(
+    var(--PhoneInputCountryFlag-height) *
+      var(--PhoneInputCountryFlag-aspectRatio)
+  );
+  height: var(--PhoneInputCountryFlag-height);
+  box-shadow: none;
+}
+
+.PhoneInputCountryIcon--square {
+  width: var(--PhoneInputCountryFlag-height);
+}
+
+.PhoneInputCountryIcon--border {
+  /* Removed `background-color` because when an `<img/>` was still loading
+	   it would show a dark gray rectangle. */
+  /* For some reason the `<img/>` is not stretched to 100% width and height
+	   and sometime there can be seen white pixels of the background at top and bottom. */
+  background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
+  /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
+  /* For some reason the `<img/>` is not stretched to 100% width and height
+	   and sometime there can be seen white pixels of the background at top and bottom,
+	   so an additional "inset" border is added. */
+  box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
+      var(--PhoneInputCountryFlag-borderColor),
+    inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
+      var(--PhoneInputCountryFlag-borderColor);
+}
+
+.PhoneInputCountryIconImg {
+  /* Fixes weird vertical space above the flag icon. */
+  /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
+  display: block;
+  /* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
+	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: none;
+}
+
+.PhoneInputInternationalIconPhone {
+  opacity: var(--PhoneInputInternationalIconPhone-opacity);
+}
+
+.PhoneInputInternationalIconGlobe {
+  opacity: var(--PhoneInputInternationalIconGlobe-opacity);
+}
+
+/* Styling native country `<select/>`. */
+
+.PhoneInputCountry {
+  position: relative;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  margin-right: 0;
+}
+
+.PhoneInputCountrySelect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.PhoneInputCountrySelect[disabled] {
+  cursor: default;
+}
+
+.PhoneInputCountrySelectArrow {
+  display: block;
+  content: '';
+  width: var(--PhoneInputCountrySelectArrow-width);
+  height: var(--PhoneInputCountrySelectArrow-width);
+  margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
+  border-style: solid;
+  border-color: var(--PhoneInputCountrySelectArrow-color);
+  border-top-width: 0;
+  border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
+  border-left-width: 0;
+  border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
+  transform: var(--PhoneInputCountrySelectArrow-transform);
+  opacity: var(--PhoneInputCountrySelectArrow-opacity);
+}
+
+.PhoneInputCountrySelect:focus
+  + .PhoneInputCountryIcon
+  + .PhoneInputCountrySelectArrow {
+  opacity: 1;
+  color: var(--PhoneInputCountrySelectArrow-color--focus);
+}
+
+.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
+  box-shadow: none;
+}
+
+.PhoneInputCountrySelect:focus
+  + .PhoneInputCountryIcon
+  .PhoneInputInternationalIconGlobe {
+  opacity: 1;
+  color: var(--PhoneInputCountrySelectArrow-color--focus);
+}
+
+.typebot-container {
+  background-image: var(--typebot-container-bg-image);
+  background-color: var(--typebot-container-bg-color);
+  font-family: var(--typebot-container-font-family);
+}
+
+.custom-header {
+  color: var(--typebot-header-color);
+  background-color: var(--typebot-header-bg-color);
+  border-bottom: var(--typebot-header-border);
+  box-shadow: var(--typebot-header-shadow);
+}
+
+.custom-header-content {
+  max-width: var(--typebot-header-max-width);
+}
+
+.typebot-chat-view {
+  max-width: var(--typebot-chat-view-max-width);
+  background-color: var(--typebot-chat-view-bg-color);
+}
+
+.typebot-button.active {
+  color: var(--typebot-button-active-color);
+  background-color: var(--typebot-button-active-bg-color);
+}
+
+.typebot-button {
+  color: var(--typebot-button-inactive-color);
+  background-color: var(--typebot-button-inactive-bg-color);
+  border: var(--typebot-button-border);
+  box-shadow: var(--typebot-button-shadow);
+}
+
+.typebot-host-bubble {
+  color: var(--typebot-host-bubble-color);
+}
+
+.typebot-host-bubble > .bubble-typing {
+  background-color: var(--typebot-host-bubble-bg-color);
+  border: var(--typebot-host-bubble-border);
+  box-shadow: var(--typebot-host-bubble-shadow);
+}
+
+.typebot-guest-bubble {
+  color: var(--typebot-guest-bubble-color);
+  background-color: var(--typebot-guest-bubble-bg-color);
+  border: var(--typebot-guest-bubble-border);
+  box-shadow: var(--typebot-guest-bubble-shadow);
+}
+
+.typebot-input {
+  color: var(--typebot-input-color);
+  background-color: var(--typebot-input-bg-color);
+  border: var(--typebot-input-border);
+  box-shadow: var(--typebot-input-shadow);
+}
+
+.typebot-button > .send-icon {
+  fill: var(--typebot-button-active-color);
+}
+
+.text-on-chat {
+  color: var(--typebot-chat-view-color);
+}
+
+.star-icon {
+  cursor: pointer;
+  fill: transparent;
+  stroke-width: 30px;
+  stroke: var(--typebot-button-active-bg-color);
+}
+
+.star-icon.active {
+  fill: var(--typebot-button-active-bg-color);
+}
+
+.scale-labels {
+  font-size: 13px;
+  color: var(--typebot-button-active-bg-color);
+  font-weight: 600;
+  padding-right: 0.5rem;
+}

packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { useTypebot } from '../../contexts/TypebotContext'
+import { HostAvatar } from '../avatars/HostAvatar'
+import { useFrame } from 'react-frame-component'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import { useHostAvatars } from '../../contexts/HostAvatarsContext'
+
+export const AvatarSideContainer = () => {
+  const { lastBubblesTopOffset } = useHostAvatars()
+  const { typebot } = useTypebot()
+  const { window, document } = useFrame()
+  const [marginBottom, setMarginBottom] = useState(
+    window.innerWidth < 400 ? 38 : 48
+  )
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      const isMobile = window.innerWidth < 400
+      setMarginBottom(isMobile ? 38 : 48)
+    })
+    resizeObserver.observe(document.body)
+  }, [])
+
+  return (
+    <div className="flex w-6 xs:w-10 mr-2 flex-shrink-0 items-center">
+      <TransitionGroup>
+        {lastBubblesTopOffset
+          .filter((n) => n !== -1)
+          .map((topOffset, idx) => (
+            <CSSTransition
+              key={idx}
+              classNames="bubble"
+              timeout={500}
+              unmountOnExit
+            >
+              <div
+                className="fixed w-6 h-6 xs:w-10 xs:h-10 mb-4 xs:mb-2 flex items-center top-0"
+                style={{
+                  top: `calc(${topOffset}px - ${marginBottom}px)`,
+                  transition: 'top 500ms ease-out',
+                }}
+              >
+                <HostAvatar typebotName={typebot.name} />
+              </div>
+            </CSSTransition>
+          ))}
+      </TransitionGroup>
+    </div>
+  )
+}

packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react'
+import { Block, Step } from '../../models'
+import { animateScroll as scroll } from 'react-scroll'
+import { TransitionGroup, CSSTransition } from 'react-transition-group'
+import { ChatStep } from './ChatStep'
+import { AvatarSideContainer } from './AvatarSideContainer'
+import { HostAvatarsContext } from '../../contexts/HostAvatarsContext'
+
+type ChatBlockProps = {
+  block: Block
+  onBlockEnd: (nextBlockId: string) => void
+}
+
+export const ChatBlock = ({ block, onBlockEnd }: ChatBlockProps) => {
+  const [displayedSteps, setDisplayedSteps] = useState<Step[]>([])
+
+  useEffect(() => {
+    setDisplayedSteps([block.steps[0]])
+  }, [])
+
+  useEffect(() => {
+    autoScrollToBottom()
+  }, [displayedSteps])
+
+  const autoScrollToBottom = () => {
+    scroll.scrollToBottom({
+      duration: 500,
+      containerId: 'scrollable-container',
+    })
+  }
+
+  const displayNextStep = () => {
+    const currentStep = [...displayedSteps].pop()
+    if (currentStep?.target?.blockId)
+      return onBlockEnd(currentStep?.target?.blockId)
+    const nextStep = block.steps[displayedSteps.length]
+    if (nextStep) setDisplayedSteps([...displayedSteps, nextStep])
+  }
+
+  return (
+    <div className="flex">
+      <HostAvatarsContext>
+        <AvatarSideContainer />
+        <div className="flex flex-col w-full">
+          <TransitionGroup>
+            {displayedSteps.map((step) => (
+              <CSSTransition
+                key={step.id}
+                classNames="bubble"
+                timeout={500}
+                unmountOnExit
+              >
+                <ChatStep step={step} onTransitionEnd={displayNextStep} />
+              </CSSTransition>
+            ))}
+          </TransitionGroup>
+        </div>
+      </HostAvatarsContext>
+    </div>
+  )
+}

packages/bot-engine/src/components/ChatBlock/ChatStep/ChatStep.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react'
+import { useHostAvatars } from '../../../contexts/HostAvatarsContext'
+import { Step } from '../../../models'
+import { isTextInputStep, isTextStep } from '../../../services/utils'
+import { GuestBubble } from './bubbles/GuestBubble'
+import { HostMessageBubble } from './bubbles/HostMessageBubble'
+import { TextInput } from './inputs/TextInput'
+
+export const ChatStep = ({
+  step,
+  onTransitionEnd,
+}: {
+  step: Step
+  onTransitionEnd: () => void
+}) => {
+  if (isTextStep(step))
+    return <HostMessageBubble step={step} onTransitionEnd={onTransitionEnd} />
+  if (isTextInputStep(step)) return <InputChatStep onSubmit={onTransitionEnd} />
+  return <span>No step</span>
+}
+
+const InputChatStep = ({ onSubmit }: { onSubmit: () => void }) => {
+  const { addNewAvatarOffset } = useHostAvatars()
+  const [answer, setAnswer] = useState<string>()
+
+  useEffect(() => {
+    addNewAvatarOffset()
+  }, [])
+
+  const handleSubmit = (value: string) => {
+    setAnswer(value)
+    onSubmit()
+  }
+
+  if (answer) {
+    return <GuestBubble message={answer} />
+  }
+  return <TextInput onSubmit={handleSubmit} />
+}

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/GuestBubble.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { CSSTransition } from 'react-transition-group'
+
+interface Props {
+  message: string
+}
+
+export const GuestBubble = ({ message }: Props): JSX.Element => {
+  return (
+    <CSSTransition classNames="bubble" timeout={1000}>
+      <div className="flex justify-end mb-2 items-center">
+        <div className="flex items-end w-11/12 lg:w-4/6 justify-end">
+          <div className="inline-flex px-4 py-2 rounded-lg mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble">
+            {message}
+          </div>
+        </div>
+      </div>
+    </CSSTransition>
+  )
+}

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/HostMessageBubble.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { useHostAvatars } from '../../../../contexts/HostAvatarsContext'
+import { StepType, TextStep } from '../../../../models'
+import { TypingContent } from './TypingContent'
+
+type HostMessageBubbleProps = {
+  step: TextStep
+  onTransitionEnd: () => void
+}
+
+export const showAnimationDuration = 400
+
+export const mediaLoadingFallbackTimeout = 5000
+
+export const HostMessageBubble = ({
+  step,
+  onTransitionEnd,
+}: HostMessageBubbleProps) => {
+  const { updateLastAvatarOffset } = useHostAvatars()
+  const messageContainer = useRef<HTMLDivElement | null>(null)
+  const [isTyping, setIsTyping] = useState(true)
+
+  useEffect(() => {
+    const wordCount = step.content.plainText.match(/(\w+)/g)?.length ?? 0
+    const typedWordsPerMinute = 250
+    const typingTimeout = (wordCount / typedWordsPerMinute) * 60000
+    sendAvatarOffset()
+    setTimeout(() => {
+      onTypingEnd()
+    }, typingTimeout)
+  }, [])
+
+  const onTypingEnd = () => {
+    setIsTyping(false)
+    setTimeout(() => {
+      sendAvatarOffset()
+      onTransitionEnd()
+    }, showAnimationDuration)
+  }
+
+  const sendAvatarOffset = () => {
+    if (!messageContainer.current) return
+    const containerDimensions = messageContainer.current.getBoundingClientRect()
+    updateLastAvatarOffset(containerDimensions.top + containerDimensions.height)
+  }
+
+  return (
+    <div className="flex flex-col" ref={messageContainer}>
+      <div className="flex mb-2 w-full lg:w-11/12 items-center">
+        <div className={'flex relative z-10 items-start typebot-host-bubble'}>
+          <div
+            className="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            style={{
+              width: isTyping ? '4rem' : '100%',
+              height: isTyping ? '2rem' : '100%',
+            }}
+          >
+            {isTyping ? <TypingContent /> : <></>}
+          </div>
+          {step.type === StepType.TEXT && (
+            <p
+              style={{
+                textOverflow: 'ellipsis',
+              }}
+              className={
+                'overflow-hidden content-opacity z-50 mx-4 my-2 whitespace-pre-wrap slate-html-container ' +
+                (isTyping ? 'opacity-0 h-6' : 'opacity-100 h-full')
+              }
+              dangerouslySetInnerHTML={{
+                __html: step.content.html,
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TypingContent.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const TypingContent = (): JSX.Element => (
+  <div className="flex items-center">
+    <div className="w-2 h-2 mr-1 rounded-full bubble1" />
+    <div className="w-2 h-2 mr-1 rounded-full bubble2" />
+    <div className="w-2 h-2 rounded-full bubble3" />
+  </div>
+)

packages/bot-engine/src/components/ChatBlock/ChatStep/index.tsx

@@ -0,0 +1 @@
+export { ChatStep } from './ChatStep'

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextInput.tsx

@@ -0,0 +1,46 @@
+import React, { FormEvent, useRef, useState } from 'react'
+import { SendIcon } from '../../../../assets/icons'
+
+type TextInputProps = {
+  onSubmit: (value: string) => void
+}
+
+export const TextInput = ({ onSubmit }: TextInputProps) => {
+  const inputRef = useRef(null)
+  const [inputValue, setInputValue] = useState('')
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    if (inputValue === '') return
+    onSubmit(inputValue)
+  }
+
+  return (
+    <div className="flex flex-col w-full lg:w-4/6">
+      <div className="flex items-center">
+        <form
+          className="flex items-center justify-between rounded-lg pr-2 typebot-input"
+          onSubmit={handleSubmit}
+        >
+          <input
+            ref={inputRef}
+            className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
+            type="text"
+            placeholder={'Type your answer...'}
+            onChange={(e) => setInputValue(e.target.value)}
+            required
+          />
+          <button
+            type="submit"
+            className={
+              'py-2 px-4 font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button active'
+            }
+          >
+            <span className="hidden xs:flex">Submit</span>
+            <SendIcon className="send-icon flex xs:hidden" />
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

packages/bot-engine/src/components/ChatBlock/index.tsx

@@ -0,0 +1 @@
+export { ChatBlock } from './ChatBlock'

packages/bot-engine/src/components/ConversationContainer.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { PublicTypebot } from '..'
+
+import { Block } from '..'
+import { ChatBlock } from './ChatBlock/ChatBlock'
+
+export const ConversationContainer = ({
+  typebot,
+  onNewBlockVisisble,
+}: {
+  typebot: PublicTypebot
+  onNewBlockVisisble: (blockId: string) => void
+}) => {
+  const [displayedBlocks, setDisplayedBlocks] = useState<Block[]>([])
+
+  const [isConversationEnded, setIsConversationEnded] = useState(false)
+  const bottomAnchor = useRef<HTMLDivElement | null>(null)
+
+  const displayNextBlock = (blockId: string) => {
+    const nextBlock = typebot.blocks.find((b) => b.id === blockId)
+    if (!nextBlock) return
+    onNewBlockVisisble(blockId)
+    setDisplayedBlocks([...displayedBlocks, nextBlock])
+  }
+
+  useEffect(() => {
+    const firstBlockId = typebot.startBlock.steps[0].target?.blockId
+    if (firstBlockId) displayNextBlock(firstBlockId)
+  }, [])
+
+  return (
+    <div
+      className="overflow-y-scroll w-full lg:w-3/4 min-h-full rounded lg:px-5 px-3 pt-10 relative scrollable-container typebot-chat-view"
+      id="scrollable-container"
+    >
+      {displayedBlocks.map((block, idx) => (
+        <ChatBlock
+          key={block.id + idx}
+          block={block}
+          onBlockEnd={displayNextBlock}
+        />
+      ))}
+      {/* We use a block to simulate padding because it makes iOS scroll flicker */}
+      <div
+        className="w-full"
+        ref={bottomAnchor}
+        style={{
+          transition: isConversationEnded ? 'height 1s' : '',
+          height: isConversationEnded ? '5%' : '20%',
+        }}
+      />
+    </div>
+  )
+}

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -1,6 +1,38 @@
 import React from 'react'
-import { PublicTypebot } from 'db'
+import { PublicTypebot } from '../models'
+import { TypebotContext } from '../contexts/TypebotContext'
+import Frame from 'react-frame-component'
+//@ts-ignore
+import style from '../assets/style.css'
+import { ConversationContainer } from './ConversationContainer'
+import { ResultContext } from '../contexts/ResultsContext'
 
-export const TypebotViewer = (props: PublicTypebot) => {
+export type TypebotViewerProps = {
-  return <div>{props.name}</div>
+  typebot: PublicTypebot
+  onNewBlockVisisble: (blockId: string) => void
+}
+export const TypebotViewer = ({
+  typebot,
+  onNewBlockVisisble,
+}: TypebotViewerProps) => {
+  return (
+    <Frame
+      id="typebot-iframe"
+      head={<style>{style}</style>}
+      style={{ width: '100%' }}
+    >
+      <TypebotContext typebot={typebot}>
+        <ResultContext typebotId={typebot.id}>
+          <div className="flex text-base overflow-hidden bg-cover h-screen w-screen typebot-container flex-col items-center">
+            <div className="flex w-full h-full justify-center">
+              <ConversationContainer
+                typebot={typebot}
+                onNewBlockVisisble={onNewBlockVisisble}
+              />
+            </div>
+          </div>
+        </ResultContext>
+      </TypebotContext>
+    </Frame>
+  )
 }

packages/bot-engine/src/components/avatars/DefaultAvatar.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+type DefaultAvatarProps = {
+  displayName?: string
+  size?: 'extra-small' | 'small' | 'medium' | 'large' | 'full'
+  className?: string
+}
+
+export const DefaultAvatar = ({
+  displayName,
+}: DefaultAvatarProps): JSX.Element => {
+  return (
+    <figure
+      className={
+        'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-full xs:h-full xs:text-xl'
+      }
+    >
+      <Background
+        className={
+          'absolute top-0 left-0 w-6 h-6 xs:w-full xs:h-full xs:text-xl'
+        }
+      />
+      <p style={{ zIndex: 0 }}>{displayName && displayName[0].toUpperCase()}</p>
+    </figure>
+  )
+}
+
+const Background = ({ className }: { className: string }) => (
+  <svg
+    width="75"
+    height="75"
+    viewBox="0 0 75 75"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <mask id="mask0" x="0" y="0" mask-type="alpha">
+      <circle cx="37.5" cy="37.5" r="37.5" fill="#0042DA" />
+    </mask>
+    <g mask="url(#mask0)">
+      <rect x="-30" y="-43" width="131" height="154" fill="#0042DA" />
+      <rect
+        x="2.50413"
+        y="120.333"
+        width="81.5597"
+        height="86.4577"
+        rx="2.5"
+        transform="rotate(-52.6423 2.50413 120.333)"
+        stroke="#FED23D"
+        strokeWidth="5"
+      />
+      <circle cx="76.5" cy="-1.5" r="29" stroke="#FF8E20" strokeWidth="5" />
+      <path
+        d="M-49.8224 22L-15.5 -40.7879L18.8224 22H-49.8224Z"
+        stroke="#F7F8FF"
+        strokeWidth="5"
+      />
+    </g>
+  </svg>
+)

packages/bot-engine/src/components/avatars/HostAvatar.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { DefaultAvatar } from './DefaultAvatar'
+
+export const HostAvatar = ({
+  typebotName,
+}: {
+  typebotName: string
+}): JSX.Element => {
+  return (
+    <div className="w-full h-full rounded-full text-2xl md:text-4xl text-center xs:w-10 xs:h-10">
+      <DefaultAvatar displayName={typebotName} />
+    </div>
+  )
+}

packages/bot-engine/src/contexts/HostAvatarsContext.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, ReactNode, useContext, useState } from 'react'
+
+// This context just keeps track of the top offset of host avatar
+const hostAvatarsContext = createContext<{
+  lastBubblesTopOffset: number[]
+  addNewAvatarOffset: () => void
+  updateLastAvatarOffset: (newOffset: number) => void
+  //@ts-ignore
+}>({})
+
+export const HostAvatarsContext = ({ children }: { children: ReactNode }) => {
+  const [lastBubblesTopOffset, setLastBubblesTopOffset] = useState<number[]>([
+    -1,
+  ])
+
+  const updateLastAvatarOffset = (newOffset: number) => {
+    const offsets = [...lastBubblesTopOffset]
+    offsets[offsets.length - 1] = newOffset
+    setLastBubblesTopOffset(offsets)
+  }
+
+  const addNewAvatarOffset = () =>
+    setLastBubblesTopOffset([...lastBubblesTopOffset, -1])
+
+  return (
+    <hostAvatarsContext.Provider
+      value={{
+        lastBubblesTopOffset,
+        updateLastAvatarOffset,
+        addNewAvatarOffset,
+      }}
+    >
+      {children}
+    </hostAvatarsContext.Provider>
+  )
+}
+
+export const useHostAvatars = () => useContext(hostAvatarsContext)

packages/bot-engine/src/contexts/ResultsContext.tsx

@@ -0,0 +1,50 @@
+import { Answer, Result } from '../models'
+import React, {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useState,
+} from 'react'
+
+const resultContext = createContext<{
+  result: Result
+  setResult: Dispatch<SetStateAction<Result>>
+  addAnswer: (answer: Answer) => void
+  //@ts-ignore
+}>({})
+
+export const ResultContext = ({
+  children,
+  typebotId,
+}: {
+  children: ReactNode
+  typebotId: string
+}) => {
+  const [result, setResult] = useState<Result>({
+    id: 'tmp',
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    answers: [],
+    typebotId,
+    isCompleted: false,
+  })
+
+  const addAnswer = (answer: Answer) =>
+    setResult({ ...result, answers: [...result.answers, answer] })
+
+  return (
+    <resultContext.Provider
+      value={{
+        result,
+        setResult,
+        addAnswer,
+      }}
+    >
+      {children}
+    </resultContext.Provider>
+  )
+}
+
+export const useResult = () => useContext(resultContext)

packages/bot-engine/src/contexts/TypebotContext.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, ReactNode, useContext } from 'react'
+import { PublicTypebot } from '../models/publicTypebot'
+
+const typebotContext = createContext<{
+  typebot: PublicTypebot
+  //@ts-ignore
+}>({})
+
+export const TypebotContext = ({
+  children,
+  typebot,
+}: {
+  children: ReactNode
+  typebot: PublicTypebot
+}) => {
+  return (
+    <typebotContext.Provider
+      value={{
+        typebot,
+      }}
+    >
+      {children}
+    </typebotContext.Provider>
+  )
+}
+
+export const useTypebot = () => useContext(typebotContext)

packages/bot-engine/src/models/index.ts

@@ -1 +1,3 @@
 export * from './typebot'
+export * from './publicTypebot'
+export * from './result'

packages/bot-engine/src/models/publicTypebot.ts

@@ -0,0 +1,10 @@
+import { PublicTypebot as PublicTypebotFromPrisma } from 'db'
+import { Block, StartBlock } from '.'
+
+export type PublicTypebot = Omit<
+  PublicTypebotFromPrisma,
+  'blocks' | 'startBlock'
+> & {
+  blocks: Block[]
+  startBlock: StartBlock
+}

packages/bot-engine/src/models/result.ts

@@ -0,0 +1,11 @@
+import { Result as ResultFromPrisma } from 'db'
+
+export type Result = Omit<ResultFromPrisma, 'answers'> & {
+  answers: Answer[]
+}
+
+export type Answer = {
+  blockId: string
+  stepId: string
+  content: string
+}

packages/bot-engine/src/models/typebot.ts

@@ -1,6 +1,6 @@
 import { Typebot as TypebotFromPrisma } from 'db'
 
-export type Typebot = TypebotFromPrisma & {
+export type Typebot = Omit<TypebotFromPrisma, 'blocks' | 'startBlock'> & {
   blocks: Block[]
   startBlock: StartBlock
 }
@@ -36,38 +36,21 @@ export type Block = {
 export enum StepType {
   START = 'start',
   TEXT = 'text',
-  IMAGE = 'image',
+  TEXT_INPUT = 'text input',
-  BUTTONS = 'buttons',
-  DATE_PICKER = 'date picker',
 }
 
 export type Target = { blockId: string; stepId?: string }
 
-export type Step = { id: string; blockId: string; target?: Target } & (
+export type Step = BubbleStep | InputStep
-  | TextStep
+export type BubbleStep = TextStep
-  | ImageStep
+export type InputStep = TextInputStep
-  | ButtonsStep
+export type StepBase = { id: string; blockId: string; target?: Target }
-  | DatePickerStep
+export type TextStep = StepBase & {
-)
-
-export type TextStep = {
   type: StepType.TEXT
-  content: string
+  content: { html: string; richText: unknown[]; plainText: string }
 }
-
+export type TextInputStep = StepBase & {
-export type ImageStep = {
+  type: StepType.TEXT_INPUT
-  type: StepType.IMAGE
-  content: { url: string }
-}
-
-export type ButtonsStep = {
-  type: StepType.BUTTONS
-  buttons: Button[]
-}
-
-export type DatePickerStep = {
-  type: StepType.DATE_PICKER
-  content: string
 }
 
 export type Button = {

packages/bot-engine/src/services/utils.ts

@@ -0,0 +1,7 @@
+import { Step, TextStep, StepType, TextInputStep } from '../models'
+
+export const isTextStep = (step: Step): step is TextStep =>
+  step.type === StepType.TEXT
+
+export const isTextInputStep = (step: Step): step is TextInputStep =>
+  step.type === StepType.TEXT_INPUT

packages/bot-engine/src/style.css

@@ -1 +0,0 @@
-/*! tailwindcss v3.0.5 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}

packages/bot-engine/tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  mode: 'jit',
+  content: ['./src/**/*.tsx'],
   theme: {
     extend: {
       screens: {
@@ -7,11 +7,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {
-      opacity: ['disabled'],
-      cursor: ['disabled'],
-    },
-  },
   plugins: [],
 }

packages/db/package.json

@@ -12,7 +12,9 @@
     "@prisma/client": "latest"
   },
   "scripts": {
-    "dev": "yarn prisma db push",
+    "dev": "yarn prisma db push && BROWSER=none yarn prisma studio",
-    "build": "prisma generate && prisma migrate deploy"
+    "build": "prisma generate && prisma migrate deploy",
+    "migration:create": "dotenv -e ../../.env yarn prisma migrate dev",
+    "migration:reset": "dotenv -e ../../.env yarn prisma migrate reset"
   }
 }

packages/db/prisma/migrations/20211222135449_init_answers_field_in_result/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `steps` on the `PublicTypebot` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "PublicTypebot" DROP COLUMN "steps";
+
+-- AlterTable
+ALTER TABLE "Result" ADD COLUMN     "answers" JSONB[],
+ADD COLUMN     "isCompleted" BOOLEAN;

packages/db/prisma/schema.prisma

@@ -95,7 +95,6 @@ model PublicTypebot {
   id         String  @id @default(cuid())
   typebotId  String  @unique
   typebot    Typebot @relation(fields: [typebotId], references: [id], onDelete: Cascade)
-  steps      Json[]
   name       String
   blocks     Json[]
   startBlock Json
@@ -107,4 +106,6 @@ model Result {
   updatedAt DateTime @default(now())
   typebotId String
   typebot   Typebot  @relation(fields: [typebotId], references: [id], onDelete: Cascade)
+  answers   Json[]
+  isCompleted Boolean?
 }