♻️ Normalize data

2022-01-06 09:40:56 +01:00
parent 6c1e0fd345
commit 9fa4c7dffa
114 changed files with 1545 additions and 1632 deletions
--- a/apps/builder/components/board/StepTypesList/StepCard.tsx
+++ b/apps/builder/components/board/StepTypesList/StepCard.tsx
@ -1,5 +1,5 @@
 import { Button, ButtonProps, Flex, HStack } from '@chakra-ui/react'
-import { StepType } from 'bot-engine'
+import { StepType } from 'models'
 import { useDnd } from 'contexts/DndContext'
 import React, { useEffect, useState } from 'react'
 import { StepIcon } from './StepIcon'
--- a/apps/builder/components/board/StepTypesList/StepIcon.tsx
+++ b/apps/builder/components/board/StepTypesList/StepIcon.tsx
@ -1,5 +1,5 @@
 import { ChatIcon, FlagIcon, TextIcon } from 'assets/icons'
-import { StepType } from 'bot-engine'
+import { StepType } from 'models'
 import React from 'react'

 type StepIconProps = { type: StepType }
--- a/apps/builder/components/board/StepTypesList/StepLabel.tsx
+++ b/apps/builder/components/board/StepTypesList/StepLabel.tsx
@ -1,5 +1,5 @@
 import { Text } from '@chakra-ui/react'
-import { StepType } from 'bot-engine'
+import { StepType } from 'models'
 import React from 'react'

 type Props = { type: StepType }
--- a/apps/builder/components/board/StepTypesList/StepTypesList.tsx
+++ b/apps/builder/components/board/StepTypesList/StepTypesList.tsx
@ -5,7 +5,7 @@ import {
  SimpleGrid,
  useEventListener,
 } from '@chakra-ui/react'
-import { StepType } from 'bot-engine'
+import { StepType } from 'models'
 import { useDnd } from 'contexts/DndContext'
 import React, { useState } from 'react'
 import { StepCard, StepCardOverlay } from './StepCard'
--- a/apps/builder/components/board/graph/BlockNode/BlockNode.tsx
+++ b/apps/builder/components/board/graph/BlockNode/BlockNode.tsx
@ -6,12 +6,12 @@ import {
  useEventListener,
 } from '@chakra-ui/react'
 import React, { useEffect, useMemo, useState } from 'react'
-import { Block } from 'bot-engine'
+import { Block } from 'models'
 import { useGraph } from 'contexts/GraphContext'
 import { useDnd } from 'contexts/DndContext'
 import { StepsList } from './StepsList'
-import { isDefined } from 'utils'
-import { useTypebot } from 'contexts/TypebotContext'
+import { filterTable, isDefined } from 'utils'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { ContextMenu } from 'components/shared/ContextMenu'
 import { BlockNodeContextMenu } from './BlockNodeContextMenu'

@ -21,7 +21,7 @@ type Props = {

 export const BlockNode = ({ block }: Props) => {
  const { connectingIds, setConnectingIds, previewingIds } = useGraph()
-  const { updateBlockPosition, addStepToBlock } = useTypebot()
+  const { typebot, updateBlock, createStep } = useTypebot()
  const { draggedStep, draggedStepType, setDraggedStepType, setDraggedStep } =
    useDnd()
  const [isMouseDown, setIsMouseDown] = useState(false)
@ -55,9 +55,11 @@ export const BlockNode = ({ block }: Props) => {
    if (!isMouseDown) return
    const { movementX, movementY } = event

-    updateBlockPosition(block.id, {
-      x: block.graphCoordinates.x + movementX,
-      y: block.graphCoordinates.y + movementY,
+    updateBlock(block.id, {
+      graphCoordinates: {
+        x: block.graphCoordinates.x + movementX,
+        y: block.graphCoordinates.y + movementY,
+      },
    })
  }

@ -77,11 +79,11 @@ export const BlockNode = ({ block }: Props) => {
  const handleStepDrop = (index: number) => {
    setShowSortPlaceholders(false)
    if (draggedStepType) {
-      addStepToBlock(block.id, draggedStepType, index)
+      createStep(block.id, draggedStepType, index)
      setDraggedStepType(undefined)
    }
    if (draggedStep) {
-      addStepToBlock(block.id, draggedStep, index)
+      createStep(block.id, draggedStep, index)
      setDraggedStep(undefined)
    }
  }
@ -119,12 +121,14 @@ export const BlockNode = ({ block }: Props) => {
            />
            <EditableInput minW="0" px="1" />
          </Editable>
-          <StepsList
-            blockId={block.id}
-            steps={block.steps}
-            showSortPlaceholders={showSortPlaceholders}
-            onMouseUp={handleStepDrop}
-          />
+          {typebot && (
+            <StepsList
+              blockId={block.id}
+              steps={filterTable(block.stepIds, typebot?.steps)}
+              showSortPlaceholders={showSortPlaceholders}
+              onMouseUp={handleStepDrop}
+            />
+          )}
        </Stack>
      )}
    </ContextMenu>
--- a/apps/builder/components/board/graph/BlockNode/BlockNodeContextMenu.tsx
+++ b/apps/builder/components/board/graph/BlockNode/BlockNodeContextMenu.tsx
@ -1,13 +1,12 @@
 import { MenuList, MenuItem } from '@chakra-ui/react'
 import { TrashIcon } from 'assets/icons'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'

 export const BlockNodeContextMenu = ({ blockId }: { blockId: string }) => {
-  const { removeBlock } = useTypebot()
+  const { deleteBlock } = useTypebot()
+
+  const handleDeleteClick = () => deleteBlock(blockId)

-  const handleDeleteClick = () => {
-    removeBlock(blockId)
-  }
  return (
    <MenuList>
      <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
--- a/apps/builder/components/board/graph/BlockNode/StartBlockNode.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StartBlockNode.tsx
@ -1,75 +0,0 @@
-import {
-  Editable,
-  EditableInput,
-  EditablePreview,
-  Stack,
-  useEventListener,
-} from '@chakra-ui/react'
-import React, { useMemo, useState } from 'react'
-import { StartBlock } from 'bot-engine'
-import { StepNode } from './StepNode'
-import { useTypebot } from 'contexts/TypebotContext'
-import { useGraph } from 'contexts/GraphContext'
-
-type Props = {
-  block: StartBlock
-}
-export const StartBlockNode = ({ block }: Props) => {
-  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)
-
-  const handleMouseDown = () => {
-    setIsMouseDown(true)
-  }
-  const handleMouseUp = () => {
-    setIsMouseDown(false)
-  }
-
-  const handleMouseMove = (event: MouseEvent) => {
-    if (!isMouseDown) return
-    const { movementX, movementY } = event
-
-    updateBlockPosition(block.id, {
-      x: block.graphCoordinates.x + movementX,
-      y: block.graphCoordinates.y + movementY,
-    })
-  }
-  useEventListener('mousemove', handleMouseMove)
-
-  return (
-    <Stack
-      p="4"
-      rounded="lg"
-      bgColor="blue.50"
-      borderWidth="2px"
-      borderColor={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}
-      spacing="14px"
-    >
-      <Editable value={titleValue} onChange={handleTitleChange}>
-        <EditablePreview
-          _hover={{ bgColor: 'blue.100' }}
-          px="1"
-          userSelect={'none'}
-        />
-        <EditableInput minW="0" px="1" />
-      </Editable>
-      <StepNode step={block.steps[0]} isConnectable={true} />
-    </Stack>
-  )
-}
--- a/apps/builder/components/board/graph/BlockNode/StepNode/RightClickMenu.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/RightClickMenu.tsx
@ -1,19 +1,12 @@
 import { MenuList, MenuItem } from '@chakra-ui/react'
 import { TrashIcon } from 'assets/icons'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'

-export const StepNodeContextMenu = ({
-  blockId,
-  stepId,
-}: {
-  blockId: string
-  stepId: string
-}) => {
-  const { removeStepFromBlock } = useTypebot()
+export const StepNodeContextMenu = ({ stepId }: { stepId: string }) => {
+  const { deleteStep } = useTypebot()
+
+  const handleDeleteClick = () => deleteStep(stepId)

-  const handleDeleteClick = () => {
-    removeStepFromBlock(blockId, stepId)
-  }
  return (
    <MenuList>
      <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
--- a/apps/builder/components/board/graph/BlockNode/StepNode/StepContent.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/StepContent.tsx
@ -1,5 +1,5 @@
 import { Flex, Text } from '@chakra-ui/react'
-import { Step, StartStep, StepType } from 'bot-engine'
+import { Step, StartStep, StepType } from 'models'

 export const StepContent = (props: Step | StartStep) => {
  switch (props.type) {
--- a/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
@ -1,6 +1,6 @@
 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 { Block, Step, StepType } from 'models'
 import { SourceEndpoint } from './SourceEndpoint'
 import { useGraph } from 'contexts/GraphContext'
 import { StepIcon } from 'components/board/StepTypesList/StepIcon'
@ -8,7 +8,7 @@ import { isDefined } from 'utils'
 import { Coordinates } from '@dnd-kit/core/dist/types'
 import { TextEditor } from './TextEditor/TextEditor'
 import { StepContent } from './StepContent'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { ContextMenu } from 'components/shared/ContextMenu'
 import { StepNodeContextMenu } from './RightClickMenu'

@ -19,7 +19,7 @@ export const StepNode = ({
  onMouseMoveTopOfElement,
  onMouseDown,
 }: {
-  step: Step | StartStep
+  step: Step
  isConnectable: boolean
  onMouseMoveBottomOfElement?: () => void
  onMouseMoveTopOfElement?: () => void
@ -29,8 +29,7 @@ export const StepNode = ({
  ) => void
 }) => {
  const { setConnectingIds, connectingIds } = useGraph()
-  const { removeStepFromBlock, typebot } = useTypebot()
-  const { blocks, startBlock } = typebot ?? {}
+  const { deleteStep, typebot } = useTypebot()
  const [isConnecting, setIsConnecting] = useState(false)
  const [mouseDownEvent, setMouseDownEvent] =
    useState<{ absolute: Coordinates; relative: Coordinates }>()
@ -59,9 +58,8 @@ export const StepNode = ({
      })
  }

-  const handleConnectionDragStart = () => {
-    setConnectingIds({ blockId: step.blockId, stepId: step.id })
-  }
+  const handleConnectionDragStart = () =>
+    setConnectingIds({ source: { blockId: step.blockId, stepId: step.id } })

  const handleMouseDown = (e: React.MouseEvent) => {
    if (!onMouseDown) return
@ -95,7 +93,7 @@ export const StepNode = ({
      (event.movementX > 0 || event.movementY > 0)
    if (isMovingAndIsMouseDown) {
      onMouseDown(mouseDownEvent, step as Step)
-      removeStepFromBlock(step.blockId, step.id)
+      deleteStep(step.id)
      setMouseDownEvent(undefined)
    }
    const element = event.currentTarget as HTMLDivElement
@ -110,18 +108,15 @@ export const StepNode = ({
  }

  const connectedStubPosition: 'right' | 'left' | undefined = useMemo(() => {
-    const currentBlock = [startBlock, ...(blocks ?? [])].find(
-      (b) => b?.id === step.blockId
-    )
+    if (!typebot) return
+    const currentBlock = typebot.blocks?.byId[step.blockId]
    const isDragginConnectorFromCurrentBlock =
-      connectingIds?.blockId === currentBlock?.id &&
+      connectingIds?.source.blockId === currentBlock?.id &&
      connectingIds?.target?.blockId
    const targetBlockId = isDragginConnectorFromCurrentBlock
      ? connectingIds.target?.blockId
      : step.target?.blockId
-    const targetedBlock = targetBlockId
-      ? (blocks ?? []).find((b) => b.id === targetBlockId)
-      : undefined
+    const targetedBlock = targetBlockId && typebot.blocks.byId[targetBlockId]
    return targetedBlock
      ? targetedBlock.graphCoordinates.x <
        (currentBlock as Block).graphCoordinates.x
@ -129,27 +124,24 @@ export const StepNode = ({
        : 'right'
      : undefined
  }, [
-    blocks,
-    connectingIds?.blockId,
-    connectingIds?.target?.blockId,
+    typebot,
    step.blockId,
    step.target?.blockId,
-    startBlock,
+    connectingIds?.source.blockId,
+    connectingIds?.target?.blockId,
  ])

  return step.type === StepType.TEXT &&
    (isEditing ||
      (isEditing === undefined && step.content.plainText === '')) ? (
    <TextEditor
-      ids={{ stepId: step.id, blockId: step.blockId }}
+      stepId={step.id}
      initialValue={step.content.richText}
      onClose={handleCloseEditor}
    />
  ) : (
    <ContextMenu<HTMLDivElement>
-      renderMenu={() => (
-        <StepNodeContextMenu blockId={step.blockId} stepId={step.id} />
-      )}
+      renderMenu={() => <StepNodeContextMenu stepId={step.id} />}
    >
      {(ref, isOpened) => (
        <Flex
--- a/apps/builder/components/board/graph/BlockNode/StepNode/StepNodeOverlay.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/StepNodeOverlay.tsx
@ -1,5 +1,5 @@
 import { StackProps, HStack } from '@chakra-ui/react'
-import { StartStep, Step } from 'bot-engine'
+import { StartStep, Step } from 'models'
 import { StepIcon } from 'components/board/StepTypesList/StepIcon'
 import { StepContent } from './StepContent'

--- a/apps/builder/components/board/graph/BlockNode/StepNode/TextEditor/TextEditor.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/TextEditor/TextEditor.tsx
@ -9,20 +9,25 @@ import {
 } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from 'libs/plate'
 import { useDebounce } from 'use-debounce'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { createEditor } from 'slate'
 import { ToolBar } from './ToolBar'
 import { parseHtmlStringToPlainText } from 'services/utils'
+import { TextStep } from 'models'

 type TextEditorProps = {
-  ids: { stepId: string; blockId: string }
+  stepId: string
  initialValue: TDescendant[]
  onClose: () => void
 }

-export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
+export const TextEditor = ({
+  initialValue,
+  stepId,
+  onClose,
+}: TextEditorProps) => {
  const editor = useMemo(
-    () => withPlate(createEditor(), { id: ids.stepId, plugins: platePlugins }),
+    () => withPlate(createEditor(), { id: stepId, plugins: platePlugins }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  )
@ -48,13 +53,13 @@ export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
    const html = serializeHtml(editor, {
      nodes: value,
    })
-    updateStep(ids, {
+    updateStep(stepId, {
      content: {
        html,
        richText: value,
        plainText: parseHtmlStringToPlainText(html),
      },
-    })
+    } as TextStep)
  }

  const handleMouseDown = (e: React.MouseEvent) => {
@ -72,7 +77,7 @@ export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
    >
      <ToolBar />
      <Plate
-        id={ids.stepId}
+        id={stepId}
        editableProps={{
          style: editorStyle,
          autoFocus: true,
--- a/apps/builder/components/board/graph/BlockNode/StepsList.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepsList.tsx
@ -1,5 +1,5 @@
 import { useEventListener, Stack, Flex, Portal } from '@chakra-ui/react'
-import { StartStep, Step } from 'bot-engine'
+import { Step, Table } from 'models'
 import { useDnd } from 'contexts/DndContext'
 import { Coordinates } from 'contexts/GraphContext'
 import { useState } from 'react'
@ -12,7 +12,7 @@ export const StepsList = ({
  onMouseUp,
 }: {
  blockId: string
-  steps: Step[] | [StartStep]
+  steps: Table<Step>
  showSortPlaceholders: boolean
  onMouseUp: (index: number) => void
 }) => {
@ -88,12 +88,12 @@ export const StepsList = ({
        rounded="lg"
        transition={showSortPlaceholders ? 'height 200ms' : 'none'}
      />
-      {steps.map((step, idx) => (
-        <Stack key={step.id} spacing={1}>
+      {steps.allIds.map((stepId, idx) => (
+        <Stack key={stepId} spacing={1}>
          <StepNode
-            key={step.id}
-            step={step}
-            isConnectable={steps.length - 1 === idx}
+            key={stepId}
+            step={steps.byId[stepId]}
+            isConnectable={steps.allIds.length - 1 === idx}
            onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
            onMouseMoveBottomOfElement={() => {
              handleMouseOnBottomOfStep(idx)
--- a/apps/builder/components/board/graph/Edges/DrawingEdge.tsx
+++ b/apps/builder/components/board/graph/Edges/DrawingEdge.tsx
@ -1,6 +1,5 @@
 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,
@ -9,7 +8,7 @@ import {
  stubLength,
  useGraph,
 } from 'contexts/GraphContext'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo, useState } from 'react'
 import {
  computeFlowChartConnectorPath,
@ -19,34 +18,30 @@ import { roundCorners } from 'svg-round-corners'

 export const DrawingEdge = () => {
  const { graphPosition, setConnectingIds, connectingIds } = useGraph()
-  const { typebot, updateTarget } = useTypebot()
-  const { startBlock, blocks } = typebot ?? {}
+  const { typebot, updateStep } = useTypebot()
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })

  const sourceBlock = useMemo(
-    () =>
-      [startBlock, ...(blocks ?? [])].find(
-        (b) => b?.id === connectingIds?.blockId
-      ),
+    () => connectingIds && typebot?.blocks.byId[connectingIds.source.blockId],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [connectingIds]
  )

  const path = useMemo(() => {
-    if (!sourceBlock) return ``
+    if (!sourceBlock || !typebot) return ``
    if (connectingIds?.target) {
-      const targetedBlock = blocks?.find(
-        (b) => b.id === connectingIds.target?.blockId
-      ) as Block
+      const targetedBlock = typebot?.blocks.byId[connectingIds.target.blockId]
      const targetedStepIndex = connectingIds.target.stepId
-        ? targetedBlock.steps.findIndex(
-            (s) => s.id === connectingIds.target?.stepId
+        ? targetedBlock.stepIds.findIndex(
+            (stepId) => stepId === connectingIds.target?.stepId
          )
        : undefined
      const anchorsPosition = getAnchorsPosition(
        sourceBlock,
        targetedBlock,
-        sourceBlock?.steps.findIndex((s) => s.id === connectingIds?.stepId),
+        sourceBlock?.stepIds.findIndex(
+          (stepId) => stepId === connectingIds?.source.stepId
+        ),
        targetedStepIndex
      )
      return computeFlowChartConnectorPath(anchorsPosition)
@ -54,7 +49,9 @@ export const DrawingEdge = () => {
    return computeConnectingEdgePath(
      sourceBlock?.graphCoordinates,
      mousePosition,
-      sourceBlock.steps.findIndex((s) => s.id === connectingIds?.stepId)
+      sourceBlock.stepIds.findIndex(
+        (stepId) => stepId === connectingIds?.source.stepId
+      )
    )
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sourceBlock, mousePosition])
@ -67,7 +64,8 @@ export const DrawingEdge = () => {
  }
  useEventListener('mousemove', handleMouseMove)
  useEventListener('mouseup', () => {
-    if (connectingIds?.target) updateTarget(connectingIds)
+    if (connectingIds?.target)
+      updateStep(connectingIds.source.stepId, { target: connectingIds.target })
    setConnectingIds(null)
  })

--- a/apps/builder/components/board/graph/Edges/Edge.tsx
+++ b/apps/builder/components/board/graph/Edges/Edge.tsx
@ -1,6 +1,5 @@
-import { Block, StartStep, Step, Target } from 'bot-engine'
 import { Coordinates, useGraph } from 'contexts/GraphContext'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo } from 'react'
 import {
  getAnchorsPosition,
@ -14,58 +13,43 @@ export type AnchorsPositionProps = {
  totalSegments: number
 }

-export type StepWithTarget = Omit<Step | StartStep, 'target'> & {
-  target: Target
-}
-
-export const Edge = ({ step }: { step: StepWithTarget }) => {
+export const Edge = ({ stepId }: { stepId: string }) => {
  const { typebot } = useTypebot()
  const { previewingIds } = useGraph()
+  const step = typebot?.steps.byId[stepId]
  const isPreviewing = useMemo(
    () =>
-      previewingIds.sourceId === step.blockId &&
-      previewingIds.targetId === step.target.blockId,
-    [
-      previewingIds.sourceId,
-      previewingIds.targetId,
-      step.blockId,
-      step.target.blockId,
-    ]
+      previewingIds.sourceId === step?.blockId &&
+      previewingIds.targetId === step?.target?.blockId,
+    [previewingIds.sourceId, previewingIds.targetId, step]
  )
-  const { blocks, startBlock } = typebot ?? {}

  const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
-    const targetBlock = blocks?.find(
-      (b) => b?.id === step.target.blockId
-    ) as Block
+    if (!typebot) return {}
+    const step = typebot.steps.byId[stepId]
+    if (!step.target) return {}
+    const sourceBlock = typebot.blocks.byId[step.blockId]
+    const targetBlock = typebot.blocks.byId[step.target.blockId]
    const targetStepIndex = step.target.stepId
-      ? targetBlock.steps.findIndex((s) => s.id === step.target.stepId)
+      ? targetBlock.stepIds.indexOf(step.target.stepId)
      : undefined
    return {
-      sourceBlock: [startBlock, ...(blocks ?? [])].find(
-        (b) => b?.id === step.blockId
-      ),
+      sourceBlock,
      targetBlock,
      targetStepIndex,
    }
-  }, [
-    blocks,
-    startBlock,
-    step.blockId,
-    step.target.blockId,
-    step.target.stepId,
-  ])
+  }, [stepId, typebot])

  const path = useMemo(() => {
    if (!sourceBlock || !targetBlock) return ``
    const anchorsPosition = getAnchorsPosition(
      sourceBlock,
      targetBlock,
-      sourceBlock.steps.findIndex((s) => s.id === step.id),
+      sourceBlock.stepIds.indexOf(stepId),
      targetStepIndex
    )
    return computeFlowChartConnectorPath(anchorsPosition)
-  }, [sourceBlock, step.id, targetBlock, targetStepIndex])
+  }, [sourceBlock, stepId, targetBlock, targetStepIndex])

  return (
    <path
--- a/apps/builder/components/board/graph/Edges/Edges.tsx
+++ b/apps/builder/components/board/graph/Edges/Edges.tsx
@ -1,21 +1,18 @@
 import { chakra } from '@chakra-ui/system'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo } from 'react'
+import { isDefined } from 'utils'
 import { DrawingEdge } from './DrawingEdge'
-import { Edge, StepWithTarget } from './Edge'
+import { Edge } from './Edge'

 export const Edges = () => {
  const { typebot } = useTypebot()
-  const { blocks, startBlock } = typebot ?? {}
-  const stepsWithTarget: StepWithTarget[] = useMemo(() => {
-    if (!startBlock) return []
-    return [
-      ...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
-      ...((blocks ?? [])
-        .flatMap((b) => b.steps)
-        .filter((s) => s.target) as StepWithTarget[]),
-    ]
-  }, [blocks, startBlock])
+  const stepIdsWithTarget: string[] = useMemo(() => {
+    if (!typebot) return []
+    return typebot.steps.allIds.filter((stepId) =>
+      isDefined(typebot.steps.byId[stepId].target)
+    )
+  }, [typebot])

  return (
    <chakra.svg
@ -27,8 +24,8 @@ export const Edges = () => {
      top="0"
    >
      <DrawingEdge />
-      {stepsWithTarget.map((step) => (
-        <Edge key={step.id} step={step} />
+      {stepIdsWithTarget.map((stepId) => (
+        <Edge key={stepId} stepId={stepId} />
      ))}
      <marker
        id={'arrow'}
--- a/apps/builder/components/board/graph/Graph.tsx
+++ b/apps/builder/components/board/graph/Graph.tsx
@ -4,15 +4,15 @@ 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 { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
+import { StepType } from 'models'

 const Graph = ({ ...props }: FlexProps) => {
  const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
    useDnd()
  const graphContainerRef = useRef<HTMLDivElement | null>(null)
-  const { addNewBlock, typebot } = useTypebot()
+  const { createBlock, typebot } = useTypebot()
  const { graphPosition, setGraphPosition } = useGraph()
  const transform = useMemo(
    () =>
@ -41,11 +41,10 @@ const Graph = ({ ...props }: FlexProps) => {

  const handleMouseUp = (e: MouseEvent) => {
    if (!draggedStep && !draggedStepType) return
-    addNewBlock({
-      step: draggedStep,
-      type: draggedStepType,
+    createBlock({
      x: e.clientX - graphPosition.x - blockWidth / 3,
      y: e.clientY - graphPosition.y - 20 - headerHeight,
+      step: draggedStep ?? (draggedStepType as StepType),
    })
    setDraggedStep(undefined)
    setDraggedStepType(undefined)
@ -71,9 +70,8 @@ const Graph = ({ ...props }: FlexProps) => {
      >
        <Edges />
        {props.children}
-        {typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
-        {(typebot.blocks ?? []).map((block) => (
-          <BlockNode block={block} key={block.id} />
+        {typebot.blocks.allIds.map((blockId) => (
+          <BlockNode block={typebot.blocks.byId[blockId]} key={blockId} />
        ))}
      </Flex>
    </Flex>
--- a/apps/builder/components/board/preview/PreviewDrawer.tsx
+++ b/apps/builder/components/board/preview/PreviewDrawer.tsx
@ -12,7 +12,7 @@ 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 { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'