🖐️ Analytics drop off rates

apps/builder/components/board/Board.tsx

@@ -5,6 +5,7 @@ import { DndContext } from 'contexts/DndContext'
 import { StepTypesList } from './StepTypesList'
 import { PreviewDrawer } from './preview/PreviewDrawer'
 import { RightPanel, useEditor } from 'contexts/EditorContext'
+import { GraphProvider } from 'contexts/GraphContext'
 
 export const Board = () => {
   const { rightPanel } = useEditor()
@@ -12,7 +13,9 @@ export const Board = () => {
     <Flex flex="1" pos="relative" bgColor="gray.50" h="full">
       <DndContext>
         <StepTypesList />
-        <Graph />
+        <GraphProvider>
+          <Graph flex="1" />
+        </GraphProvider>
         {rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
       </DndContext>
     </Flex>

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

@@ -6,7 +6,7 @@ import {
   useEventListener,
 } from '@chakra-ui/react'
 import React, { useEffect, useMemo, useState } from 'react'
-import { Block, StartBlock } from 'bot-engine'
+import { Block } from 'bot-engine'
 import { useGraph } from 'contexts/GraphContext'
 import { useDnd } from 'contexts/DndContext'
 import { StepsList } from './StepsList'
@@ -15,7 +15,11 @@ import { useTypebot } from 'contexts/TypebotContext'
 import { ContextMenu } from 'components/shared/ContextMenu'
 import { BlockNodeContextMenu } from './BlockNodeContextMenu'
 
-export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
+type Props = {
+  block: Block
+}
+
+export const BlockNode = ({ block }: Props) => {
   const { connectingIds, setConnectingIds, previewingIds } = useGraph()
   const { updateBlockPosition, addStepToBlock } = useTypebot()
   const { draggedStep, draggedStepType, setDraggedStepType, setDraggedStep } =

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

@@ -11,7 +11,10 @@ import { StepNode } from './StepNode'
 import { useTypebot } from 'contexts/TypebotContext'
 import { useGraph } from 'contexts/GraphContext'
 
-export const StartBlockNode = ({ block }: { block: StartBlock }) => {
+type Props = {
+  block: StartBlock
+}
+export const StartBlockNode = ({ block }: Props) => {
   const { previewingIds } = useGraph()
   const [isMouseDown, setIsMouseDown] = useState(false)
   const [titleValue, setTitleValue] = useState(block.title)

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

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

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

@@ -118,6 +118,9 @@ export const StepsList = ({
           <StepNodeOverlay
             step={draggedStep}
             onMouseUp={handleMouseUp}
+            pos="fixed"
+            top="0"
+            left="0"
             style={{
               transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
             }}

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

@@ -1,4 +1,4 @@
-import { Flex, useEventListener } from '@chakra-ui/react'
+import { Flex, FlexProps, useEventListener } from '@chakra-ui/react'
 import React, { useRef, useMemo } from 'react'
 import { blockWidth, useGraph } from 'contexts/GraphContext'
 import { BlockNode } from './BlockNode/BlockNode'
@@ -8,11 +8,11 @@ import { useTypebot } from 'contexts/TypebotContext'
 import { StartBlockNode } from './BlockNode/StartBlockNode'
 import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 
-const Graph = () => {
+const Graph = ({ ...props }: FlexProps) => {
   const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
     useDnd()
   const graphContainerRef = useRef<HTMLDivElement | null>(null)
-  const { typebot, addNewBlock } = useTypebot()
+  const { addNewBlock, typebot } = useTypebot()
   const { graphPosition, setGraphPosition } = useGraph()
   const transform = useMemo(
     () =>
@@ -60,7 +60,7 @@ const Graph = () => {
 
   if (!typebot) return <></>
   return (
-    <Flex ref={graphContainerRef} flex="1">
+    <Flex ref={graphContainerRef} {...props}>
       <Flex
         flex="1"
         boxSize={'200px'}
@@ -70,6 +70,7 @@ const Graph = () => {
         }}
       >
         <Edges />
+        {props.children}
         {typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
         {(typebot.blocks ?? []).map((block) => (
           <BlockNode block={block} key={block.id} />