🖐️ Analytics drop off rates

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)`,
             }}