🚀 Init preview and typebot cotext in editor

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 = () => (
-  <Flex flex="1" pos="relative" bgColor="gray.50">
-    <DndContext>
-      <StepTypesList />
-      <Graph />
-    </DndContext>
-  </Flex>
-)
+export const Board = () => {
+  const { rightPanel } = useEditor()
+  return (
+    <Flex
+      flex="1"
+      pos="relative"
+      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: {
-      return <Text>Image</Text>
-    }
-    case StepType.DATE_PICKER: {
-      return <Text>Date</Text>
+    case StepType.TEXT_INPUT: {
+      return <Text>Text</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 }],
-  inputs: [{ type: StepType.DATE_PICKER }],
+  bubbles: [{ type: StepType.TEXT }],
+  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 {
-    updateBlockPosition,
-    addNewStepToBlock,
-    connectingIds,
-    setConnectingIds,
-  } = useGraph()
+  const { connectingIds, setConnectingIds, previewingIds } = useGraph()
+  const { updateBlockPosition, addStepToBlock } = useTypebot()
   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
-      p="4"
-      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}
+    <ContextMenu<HTMLDivElement>
+      renderMenu={() => <BlockNodeContextMenu blockId={block.id} />}
     >
-      <Editable value={titleValue} onChange={handleTitleChange}>
-        <EditablePreview _hover={{ bgColor: 'blue.100' }} px="1" />
-        <EditableInput minW="0" px="1" />
-      </Editable>
-      <StepsList
-        blockId={block.id}
-        steps={block.steps}
-        showSortPlaceholders={showSortPlaceholders}
-        onMouseUp={handleStepDrop}
-      />
-    </Stack>
+      {(ref, isOpened) => (
+        <Stack
+          ref={ref}
+          p="4"
+          rounded="lg"
+          bgColor="blue.50"
+          borderWidth="2px"
+          borderColor={
+            isConnecting || isOpened || isPreviewing ? '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}
+        >
+          <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({
-      ...block,
-      graphCoordinates: {
-        x: block.graphCoordinates.x + movementX,
-        y: block.graphCoordinates.y + movementY,
-      },
+    updateBlockPosition(block.id, {
+      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 React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Box, Flex, HStack, useEventListener } from '@chakra-ui/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,
-    removeStepFromBlock,
-    blocks,
-    connectingIds,
-    startBlock,
-  } = useGraph()
+  const { setConnectingIds, connectingIds } = useGraph()
+  const { removeStepFromBlock, typebot } = useTypebot()
+  const { blocks, startBlock } = typebot ?? {}
   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)
-    removeStepFromBlock(step.blockId, step.id)
+    const element = e.currentTarget as HTMLDivElement
+    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 (
-    <Flex
-      pos="relative"
-      ref={stepRef}
-      onMouseMove={handleMouseMove}
-      onMouseDown={handleMouseDown}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
+  return step.type === StepType.TEXT &&
+    (isEditing ||
+      (isEditing === undefined && step.content.plainText === '')) ? (
+    <TextEditor
+      ids={{ stepId: step.id, blockId: step.blockId }}
+      initialValue={step.content.richText}
+      onClose={handleCloseEditor}
+    />
+  ) : (
+    <ContextMenu<HTMLDivElement>
+      renderMenu={() => (
+        <StepNodeContextMenu blockId={step.blockId} stepId={step.id} />
+      )}
     >
-      {connectedStubPosition === 'left' && (
-        <Box
-          h="2px"
-          pos="absolute"
-          left="-18px"
-          top="25px"
-          w="18px"
-          bgColor="blue.500"
-        />
-      )}
-      <HStack
-        flex="1"
-        userSelect="none"
-        p="3"
-        borderWidth="2px"
-        borderColor={isConnecting ? 'blue.400' : 'gray.400'}
-        rounded="lg"
-        cursor={'grab'}
-        bgColor="white"
-      >
-        <StepIcon type={step.type} />
-        <StepContent {...step} />
-        {isConnectable && (
-          <SourceEndpoint
-            onConnectionDragStart={handleConnectionDragStart}
-            pos="absolute"
-            right="20px"
-          />
-        )}
-      </HStack>
+      {(ref, isOpened) => (
+        <Flex
+          pos="relative"
+          ref={ref}
+          onMouseMove={handleMouseMove}
+          onMouseDown={handleMouseDown}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onMouseUp={handleMouseUp}
+        >
+          {connectedStubPosition === 'left' && (
+            <Box
+              h="2px"
+              pos="absolute"
+              left="-18px"
+              top="25px"
+              w="18px"
+              bgColor="blue.500"
+            />
+          )}
+          <HStack
+            flex="1"
+            userSelect="none"
+            p="3"
+            borderWidth="2px"
+            borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.400'}
+            rounded="lg"
+            cursor={'pointer'}
+            bgColor="white"
+          >
+            <StepIcon type={step.type} />
+            <StepContent {...step} />
+            {isConnectable && (
+              <SourceEndpoint
+                onConnectionDragStart={handleConnectionDragStart}
+                pos="absolute"
+                right="20px"
+              />
+            )}
+          </HStack>
 
-      {isDefined(connectedStubPosition) && (
-        <Box
-          h="2px"
-          pos="absolute"
-          right={connectedStubPosition === 'left' ? undefined : '-18px'}
-          left={connectedStubPosition === 'left' ? '-18px' : undefined}
-          top="25px"
-          w="18px"
-          bgColor="gray.500"
-        />
+          {isDefined(connectedStubPosition) && (
+            <Box
+              h="2px"
+              pos="absolute"
+              right={connectedStubPosition === 'left' ? undefined : '-18px'}
+              left={connectedStubPosition === 'left' ? '-18px' : undefined}
+              top="25px"
+              w="18px"
+              bgColor="gray.500"
+            />
+          )}
+        </Flex>
       )}
-    </Flex>
-  )
-}
-
-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>
+    </ContextMenu>
   )
 }

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 element = e.currentTarget as HTMLDivElement
-    const rect = element.getBoundingClientRect()
-    const relativeX = e.clientX - rect.left
-    const relativeY = e.clientY - rect.top
-    setPosition({ x: e.clientX - relativeX, y: e.clientY - relativeY })
-    setRelativeCoordinates({ x: relativeX, y: relativeY })
+  const handleStepMouseDown = (
+    { absolute, relative }: { absolute: Coordinates; relative: Coordinates },
+    step: Step
+  ) => {
+    setPosition(absolute)
+    setRelativeCoordinates(relative)
     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 {
-    graphPosition,
-    setConnectingIds,
-    blocks,
-    connectingIds,
-    addTarget,
-    startBlock,
-  } = useGraph()
+  const { graphPosition, setConnectingIds, connectingIds } = useGraph()
+  const { typebot, updateTarget } = useTypebot()
+  const { startBlock, blocks } = typebot ?? {}
   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
+      ? sourcePosition.x + stubLength + 40
+      : 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 {
-    blocks,
-    setBlocks,
-    graphPosition,
-    setGraphPosition,
-    addNewBlock,
-    setStartBlock,
-    startBlock,
-  } = useGraph()
+  const { typebot, addNewBlock } = useTypebot()
+  const { graphPosition, setGraphPosition } = 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} />}
-        {blocks.map((block) => (
+        {typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
+        {(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>
+  )
+}