♻️ Normalize data

apps/builder/components/analytics/StatsCards.tsx

@@ -6,7 +6,7 @@ import {
   StatLabel,
   StatNumber,
 } from '@chakra-ui/react'
-import { Stats } from 'bot-engine'
+import { Stats } from 'models'
 import React from 'react'
 
 export const StatsCards = ({

apps/builder/components/analytics/graph/AnalyticsGraph.tsx

@@ -3,7 +3,6 @@ import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import React, { useMemo, useRef } from 'react'
 import { AnswersCount } from 'services/analytics'
 import { BlockNode } from './blocks/BlockNode'
-import { StartBlockNode } from './blocks/StartBlockNode'
 import { Edges } from './Edges'
 
 const AnalyticsGraph = ({
@@ -49,9 +48,8 @@ const AnalyticsGraph = ({
         }}
       >
         <Edges answersCounts={answersCounts} />
-        {typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
+        {typebot.blocks.allIds.map((blockId) => (
-        {(typebot.blocks ?? []).map((block) => (
+          <BlockNode block={typebot.blocks.byId[blockId]} key={blockId} />
-          <BlockNode block={block} key={block.id} />
         ))}
       </Flex>
     </Flex>

apps/builder/components/analytics/graph/Edges/DropOffEdge.tsx

@@ -7,11 +7,12 @@ type Props = {
 }
 export const DropOffEdge = ({ blockId }: Props) => {
   const { typebot } = useAnalyticsGraph()
+
   const path = useMemo(() => {
     if (!typebot) return
-    const block = (typebot?.blocks ?? []).find((b) => b.id === blockId)
+    const block = typebot.blocks.byId[blockId]
     if (!block) return ''
-    return computeDropOffPath(block.graphCoordinates, block.steps.length - 1)
+    return computeDropOffPath(block.graphCoordinates, block.stepIds.length - 1)
   }, [blockId, typebot])
 
   return <path d={path} stroke={'#E53E3E'} strokeWidth="2px" fill="none" />

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

@@ -1,5 +1,3 @@
-import { Block } from 'bot-engine'
-import { StepWithTarget } from 'components/board/graph/Edges/Edge'
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import React, { useMemo } from 'react'
 import {
@@ -7,42 +5,37 @@ import {
   computeFlowChartConnectorPath,
 } from 'services/graph'
 
-export const Edge = ({ step }: { step: StepWithTarget }) => {
+type Props = { stepId: string }
+
+export const Edge = ({ stepId }: Props) => {
   const { typebot } = useAnalyticsGraph()
-  const { blocks, startBlock } = typebot ?? {}
 
   const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
-    const targetBlock = blocks?.find(
+    if (!typebot) return {}
-      (b) => b?.id === step.target.blockId
+    const step = typebot.steps.byId[stepId]
-    ) as Block
+    if (!step.target) return {}
+    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
+    const sourceBlock = typebot.blocks.byId[step.blockId]
     return {
-      sourceBlock: [startBlock, ...(blocks ?? [])].find(
+      sourceBlock,
-        (b) => b?.id === step.blockId
-      ),
       targetBlock,
       targetStepIndex,
     }
-  }, [
+  }, [stepId, typebot])
-    blocks,
-    startBlock,
-    step.blockId,
-    step.target.blockId,
-    step.target.stepId,
-  ])
 
   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

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

@@ -1,8 +1,8 @@
 import { chakra } from '@chakra-ui/system'
-import { StepWithTarget } from 'components/board/graph/Edges/Edge'
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import React, { useMemo } from 'react'
 import { AnswersCount } from 'services/analytics'
+import { isDefined } from 'utils'
 import { DropOffBlock } from '../blocks/DropOffBlock'
 import { DropOffEdge } from './DropOffEdge'
 import { Edge } from './Edge'
@@ -11,16 +11,13 @@ type Props = { answersCounts?: AnswersCount[] }
 
 export const Edges = ({ answersCounts }: Props) => {
   const { typebot } = useAnalyticsGraph()
-  const { blocks, startBlock } = typebot ?? {}
+
-  const stepsWithTarget: StepWithTarget[] = useMemo(() => {
+  const stepIdsWithTarget: string[] = useMemo(() => {
-    if (!startBlock) return []
+    if (!typebot) return []
-    return [
+    return typebot.steps.allIds.filter((stepId) =>
-      ...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
+      isDefined(typebot.steps.byId[stepId].target)
-      ...((blocks ?? [])
+    )
-        .flatMap((b) => b.steps)
+  }, [typebot])
-        .filter((s) => s.target) as StepWithTarget[]),
-    ]
-  }, [blocks, startBlock])
 
   return (
     <>
@@ -32,8 +29,8 @@ export const Edges = ({ answersCounts }: Props) => {
         left="0"
         top="0"
       >
-        {stepsWithTarget.map((step) => (
+        {stepIdsWithTarget.map((stepId) => (
-          <Edge key={step.id} step={step} />
+          <Edge key={stepId} stepId={stepId} />
         ))}
         <marker
           id={'arrow'}

apps/builder/components/analytics/graph/blocks/BlockNode.tsx

@@ -6,9 +6,9 @@ import {
   useEventListener,
 } from '@chakra-ui/react'
 import React, { useState } from 'react'
-import { Block } from 'bot-engine'
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import { StepsList } from './StepsList'
+import { Block } from 'models'
 
 type Props = {
   block: Block
@@ -56,7 +56,7 @@ export const BlockNode = ({ block }: Props) => {
         <EditablePreview px="1" userSelect={'none'} />
         <EditableInput minW="0" px="1" />
       </Editable>
-      <StepsList blockId={block.id} steps={block.steps} />
+      <StepsList stepIds={block.stepIds} />
     </Stack>
   )
 }

apps/builder/components/analytics/graph/blocks/DropOffBlock.tsx

@@ -1,5 +1,4 @@
 import { Tag, Text, VStack } from '@chakra-ui/react'
-import { Block } from 'bot-engine'
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import React, { useMemo } from 'react'
 import { AnswersCount } from 'services/analytics'
@@ -21,13 +20,13 @@ export const DropOffBlock = ({ answersCounts, blockId }: Props) => {
   const { totalDroppedUser, dropOffRate } = useMemo(() => {
     if (!typebot || totalAnswers === undefined)
       return { previousTotal: undefined, dropOffRate: undefined }
-    const previousTotal = answersCounts
+    const previousBlockIds = typebot.blocks.allIds.filter(() =>
-      .filter(
+      typebot.steps.allIds.find(
-        (a) =>
+        (sId) => typebot.steps.byId[sId].target?.blockId === blockId
-          [typebot.startBlock, ...typebot.blocks].find((b) =>
-            (b as Block).steps.find((s) => s.target?.blockId === blockId)
-          )?.id === a.blockId
       )
+    )
+    const previousTotal = answersCounts
+      .filter((a) => previousBlockIds.includes(a.blockId))
       .reduce((prev, acc) => acc.totalAnswers + prev, 0)
     if (previousTotal === 0)
       return { previousTotal: undefined, dropOffRate: undefined }
@@ -41,11 +40,11 @@ export const DropOffBlock = ({ answersCounts, blockId }: Props) => {
 
   const labelCoordinates = useMemo(() => {
     if (!typebot) return { x: 0, y: 0 }
-    const sourceBlock = typebot?.blocks.find((b) => b.id === blockId)
+    const sourceBlock = typebot?.blocks.byId[blockId]
     if (!sourceBlock) return
     return computeSourceCoordinates(
       sourceBlock?.graphCoordinates,
-      sourceBlock?.steps.length - 1
+      sourceBlock?.stepIds.length - 1
     )
   }, [blockId, typebot])
 

apps/builder/components/analytics/graph/blocks/StartBlockNode.tsx

@@ -1,62 +0,0 @@
-import {
-  Editable,
-  EditableInput,
-  EditablePreview,
-  Stack,
-  useEventListener,
-} from '@chakra-ui/react'
-import React, { useState } from 'react'
-import { StartBlock } from 'bot-engine'
-import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
-import { StepsList } from './StepsList'
-
-type Props = {
-  block: StartBlock
-}
-
-export const StartBlockNode = ({ block }: Props) => {
-  const { updateBlockPosition } = useAnalyticsGraph()
-  const [isMouseDown, setIsMouseDown] = useState(false)
-
-  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"
-      minW="300px"
-      transition="border 300ms"
-      pos="absolute"
-      style={{
-        transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
-      }}
-      onMouseDown={handleMouseDown}
-      onMouseUp={handleMouseUp}
-    >
-      <Editable value={block.title} isDisabled>
-        <EditablePreview px="1" userSelect={'none'} />
-        <EditableInput minW="0" px="1" />
-      </Editable>
-      <StepsList blockId={block.id} steps={block.steps} />
-    </Stack>
-  )
-}

apps/builder/components/analytics/graph/blocks/StepsList.tsx

@@ -1,27 +1,24 @@
 import { Flex, Stack } from '@chakra-ui/react'
-import { StartStep, Step } from 'bot-engine'
 import { StepNodeOverlay } from 'components/board/graph/BlockNode/StepNode'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 
-export const StepsList = ({
+export const StepsList = ({ stepIds }: { stepIds: string[] }) => {
-  steps,
+  const { typebot } = useTypebot()
-}: {
-  blockId: string
-  steps: Step[] | [StartStep]
-}) => {
   return (
     <Stack spacing={1} transition="none">
       <Flex h={'2px'} bgColor={'gray.400'} visibility={'hidden'} rounded="lg" />
-      {steps.map((step) => (
+      {typebot &&
-        <Stack key={step.id} spacing={1}>
+        stepIds.map((stepId) => (
-          <StepNodeOverlay key={step.id} step={step} />
+          <Stack key={stepId} spacing={1}>
-          <Flex
+            <StepNodeOverlay step={typebot?.steps.byId[stepId]} />
-            h={'2px'}
+            <Flex
-            bgColor={'gray.400'}
+              h={'2px'}
-            visibility={'hidden'}
+              bgColor={'gray.400'}
-            rounded="lg"
+              visibility={'hidden'}
-          />
+              rounded="lg"
-        </Stack>
+            />
-      ))}
+          </Stack>
+        ))}
     </Stack>
   )
 }

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'

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 }

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 }

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'

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 { filterTable, isDefined } from 'utils'
-import { useTypebot } from 'contexts/TypebotContext'
+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, {
+    updateBlock(block.id, {
-      x: block.graphCoordinates.x + movementX,
+      graphCoordinates: {
-      y: block.graphCoordinates.y + movementY,
+        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
+          {typebot && (
-            blockId={block.id}
+            <StepsList
-            steps={block.steps}
+              blockId={block.id}
-            showSortPlaceholders={showSortPlaceholders}
+              steps={filterTable(block.stepIds, typebot?.steps)}
-            onMouseUp={handleStepDrop}
+              showSortPlaceholders={showSortPlaceholders}
-          />
+              onMouseUp={handleStepDrop}
+            />
+          )}
         </Stack>
       )}
     </ContextMenu>

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}>

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

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 = ({
+export const StepNodeContextMenu = ({ stepId }: { stepId: string }) => {
-  blockId,
+  const { deleteStep } = useTypebot()
-  stepId,
+
-}: {
+  const handleDeleteClick = () => deleteStep(stepId)
-  blockId: string
-  stepId: string
-}) => {
-  const { removeStepFromBlock } = useTypebot()
 
-  const handleDeleteClick = () => {
-    removeStepFromBlock(blockId, stepId)
-  }
   return (
     <MenuList>
       <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>

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) {

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 { deleteStep, typebot } = useTypebot()
-  const { blocks, startBlock } = typebot ?? {}
   const [isConnecting, setIsConnecting] = useState(false)
   const [mouseDownEvent, setMouseDownEvent] =
     useState<{ absolute: Coordinates; relative: Coordinates }>()
@@ -59,9 +58,8 @@ export const StepNode = ({
       })
   }
 
-  const handleConnectionDragStart = () => {
+  const handleConnectionDragStart = () =>
-    setConnectingIds({ blockId: step.blockId, stepId: step.id })
+    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(
+    if (!typebot) return
-      (b) => b?.id === step.blockId
+    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
+    const targetedBlock = targetBlockId && typebot.blocks.byId[targetBlockId]
-      ? (blocks ?? []).find((b) => b.id === targetBlockId)
-      : undefined
     return targetedBlock
       ? targetedBlock.graphCoordinates.x <
         (currentBlock as Block).graphCoordinates.x
@@ -129,27 +124,24 @@ export const StepNode = ({
         : 'right'
       : undefined
   }, [
-    blocks,
+    typebot,
-    connectingIds?.blockId,
-    connectingIds?.target?.blockId,
     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={() => (
+      renderMenu={() => <StepNodeContextMenu stepId={step.id} />}
-        <StepNodeContextMenu blockId={step.blockId} stepId={step.id} />
-      )}
     >
       {(ref, isOpened) => (
         <Flex

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'
 

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,

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) => (
+      {steps.allIds.map((stepId, idx) => (
-        <Stack key={step.id} spacing={1}>
+        <Stack key={stepId} spacing={1}>
           <StepNode
-            key={step.id}
+            key={stepId}
-            step={step}
+            step={steps.byId[stepId]}
-            isConnectable={steps.length - 1 === idx}
+            isConnectable={steps.allIds.length - 1 === idx}
             onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
             onMouseMoveBottomOfElement={() => {
               handleMouseOnBottomOfStep(idx)

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 { typebot, updateStep } = useTypebot()
-  const { startBlock, blocks } = typebot ?? {}
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
 
   const sourceBlock = useMemo(
-    () =>
+    () => connectingIds && typebot?.blocks.byId[connectingIds.source.blockId],
-      [startBlock, ...(blocks ?? [])].find(
-        (b) => b?.id === connectingIds?.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(
+      const targetedBlock = typebot?.blocks.byId[connectingIds.target.blockId]
-        (b) => b.id === connectingIds.target?.blockId
-      ) as Block
       const targetedStepIndex = connectingIds.target.stepId
-        ? targetedBlock.steps.findIndex(
+        ? targetedBlock.stepIds.findIndex(
-            (s) => s.id === connectingIds.target?.stepId
+            (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)
   })
 

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'> & {
+export const Edge = ({ stepId }: { stepId: string }) => {
-  target: Target
-}
-
-export const Edge = ({ step }: { step: StepWithTarget }) => {
   const { typebot } = useTypebot()
   const { previewingIds } = useGraph()
+  const step = typebot?.steps.byId[stepId]
   const isPreviewing = useMemo(
     () =>
-      previewingIds.sourceId === step.blockId &&
+      previewingIds.sourceId === step?.blockId &&
-      previewingIds.targetId === step.target.blockId,
+      previewingIds.targetId === step?.target?.blockId,
-    [
+    [previewingIds.sourceId, previewingIds.targetId, step]
-      previewingIds.sourceId,
-      previewingIds.targetId,
-      step.blockId,
-      step.target.blockId,
-    ]
   )
-  const { blocks, startBlock } = typebot ?? {}
 
   const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
-    const targetBlock = blocks?.find(
+    if (!typebot) return {}
-      (b) => b?.id === step.target.blockId
+    const step = typebot.steps.byId[stepId]
-    ) as Block
+    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(
+      sourceBlock,
-        (b) => b?.id === step.blockId
-      ),
       targetBlock,
       targetStepIndex,
     }
-  }, [
+  }, [stepId, typebot])
-    blocks,
-    startBlock,
-    step.blockId,
-    step.target.blockId,
-    step.target.stepId,
-  ])
 
   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

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 stepIdsWithTarget: string[] = useMemo(() => {
-  const stepsWithTarget: StepWithTarget[] = useMemo(() => {
+    if (!typebot) return []
-    if (!startBlock) return []
+    return typebot.steps.allIds.filter((stepId) =>
-    return [
+      isDefined(typebot.steps.byId[stepId].target)
-      ...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
+    )
-      ...((blocks ?? [])
+  }, [typebot])
-        .flatMap((b) => b.steps)
-        .filter((s) => s.target) as StepWithTarget[]),
-    ]
-  }, [blocks, startBlock])
 
   return (
     <chakra.svg
@@ -27,8 +24,8 @@ export const Edges = () => {
       top="0"
     >
       <DrawingEdge />
-      {stepsWithTarget.map((step) => (
+      {stepIdsWithTarget.map((stepId) => (
-        <Edge key={step.id} step={step} />
+        <Edge key={stepId} stepId={stepId} />
       ))}
       <marker
         id={'arrow'}

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 { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import { StartBlockNode } from './BlockNode/StartBlockNode'
 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({
+    createBlock({
-      step: draggedStep,
-      type: draggedStepType,
       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.allIds.map((blockId) => (
-        {(typebot.blocks ?? []).map((block) => (
+          <BlockNode block={typebot.blocks.byId[blockId]} key={blockId} />
-          <BlockNode block={block} key={block.id} />
         ))}
       </Flex>
     </Flex>

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'
 

apps/builder/components/dashboard/FolderContent.tsx

@@ -1,5 +1,5 @@
 import { DashboardFolder } from '.prisma/client'
-import { Typebot } from 'bot-engine'
+import { Typebot } from 'models'
 import {
   Button,
   Flex,

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

@@ -16,7 +16,7 @@ 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'
+import { Typebot } from 'models'
 
 type ChatbotCardProps = {
   typebot: Typebot

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

@@ -1,6 +1,6 @@
 import { Button, Flex, Text, VStack } from '@chakra-ui/react'
 import { GlobeIcon, ToolIcon } from 'assets/icons'
-import { Typebot } from 'bot-engine'
+import { Typebot } from 'models'
 
 type Props = {
   typebot: Typebot

apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/jsx-key */
 import { Box, Checkbox, Flex } from '@chakra-ui/react'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useEffect, useMemo, useRef } from 'react'
 import { Hooks, useFlexLayout, useRowSelect, useTable } from 'react-table'
 import { parseSubmissionsColumns } from 'services/publicTypebot'

apps/builder/components/settings/SettingsContent.tsx

@@ -1,17 +1,17 @@
 import { Flex, Stack } from '@chakra-ui/react'
-import { TypingEmulationSettings } from 'bot-engine'
+import { TypingEmulationSettings } from 'models'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React from 'react'
 import { TypingEmulation } from './TypingEmulation'
 
 export const SettingsContent = () => {
-  const { typebot, updateSettings } = useTypebot()
+  const { typebot, updateTypebot } = useTypebot()
 
   const handleTypingEmulationUpdate = (
     typingEmulation: TypingEmulationSettings
   ) => {
     if (!typebot) return
-    updateSettings({ ...typebot.settings, typingEmulation })
+    updateTypebot({ settings: { ...typebot.settings, typingEmulation } })
   }
   return (
     <Flex h="full" w="full" justifyContent="center" align="flex-start">

apps/builder/components/settings/TypingEmulation.tsx

@@ -1,5 +1,5 @@
 import { Flex, Stack, Switch, Text } from '@chakra-ui/react'
-import { TypingEmulationSettings } from 'bot-engine'
+import { TypingEmulationSettings } from 'models'
 import React from 'react'
 import { SmartNumberInput } from './SmartNumberInput'
 

apps/builder/components/share/ShareContent.tsx

@@ -1,15 +1,15 @@
 import { Flex, Heading, Stack } from '@chakra-ui/react'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React from 'react'
 import { parseDefaultPublicId } from 'services/typebots'
 import { EditableUrl } from './EditableUrl'
 
 export const ShareContent = () => {
-  const { typebot, updatePublicId } = useTypebot()
+  const { typebot, updateTypebot } = useTypebot()
 
   const handlePublicIdChange = (publicId: string) => {
     if (publicId === typebot?.publicId) return
-    updatePublicId(publicId)
+    updateTypebot({ publicId })
   }
   return (
     <Flex h="full" w="full" justifyContent="center" align="flex-start">

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

@@ -1,6 +1,6 @@
 import { IconButton, Text, Tooltip } from '@chakra-ui/react'
 import { CheckIcon, SaveIcon } from 'assets/icons'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React from 'react'
 
 export const SaveButton = () => {

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

@@ -2,7 +2,7 @@ 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 { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { PublishButton } from '../buttons/PublishButton'

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

@@ -1,5 +1,5 @@
 import { Button } from '@chakra-ui/react'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 
 export const PublishButton = () => {
   const { isPublishing, isPublished, publishTypebot } = useTypebot()

apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundContent.tsx

@@ -1,5 +1,5 @@
 import { Flex, Text } from '@chakra-ui/react'
-import { Background, BackgroundType } from 'bot-engine'
+import { Background, BackgroundType } from 'models'
 import React from 'react'
 import { ColorPicker } from '../ColorPicker'
 

apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundSelector.tsx

@@ -1,5 +1,5 @@
 import { Stack, Text } from '@chakra-ui/react'
-import { Background, BackgroundType } from 'bot-engine'
+import { Background, BackgroundType } from 'models'
 import { deepEqual } from 'fast-equals'
 import React, { useEffect, useState } from 'react'
 import { BackgroundContent } from './BackgroundContent'

apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundTypeRadioButtons.tsx

@@ -6,7 +6,7 @@ import {
   useRadioGroup,
   UseRadioProps,
 } from '@chakra-ui/react'
-import { BackgroundType } from 'bot-engine'
+import { BackgroundType } from 'models'
 import { ReactNode } from 'react'
 
 type Props = {

apps/builder/components/theme/GeneralContent/GeneralContent.tsx

@@ -8,28 +8,32 @@ import {
   Stack,
 } from '@chakra-ui/react'
 import { PencilIcon } from 'assets/icons'
-import { Background } from 'bot-engine'
+import { Background } from 'models'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React from 'react'
 import { BackgroundSelector } from './BackgroundSelector'
 import { FontSelector } from './FontSelector'
 
 export const GeneralContent = () => {
-  const { typebot, updateTheme } = useTypebot()
+  const { typebot, updateTypebot } = useTypebot()
 
   const handleSelectFont = (font: string) => {
     if (!typebot) return
-    updateTheme({
+    updateTypebot({
-      ...typebot.theme,
+      theme: {
-      general: { ...typebot.theme.general, font },
+        ...typebot.theme,
+        general: { ...typebot.theme.general, font },
+      },
     })
   }
 
   const handleBackgroundChange = (background: Background) => {
     if (!typebot) return
-    updateTheme({
+    updateTypebot({
-      ...typebot.theme,
+      theme: {
-      general: { ...typebot.theme.general, background },
+        ...typebot.theme,
+        general: { ...typebot.theme.general, background },
+      },
     })
   }
   return (

apps/builder/components/theme/ThemeContent.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react'
 import { TypebotViewer } from 'bot-engine'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 import { SideMenu } from './SideMenu'

apps/builder/contexts/AnalyticsGraphProvider.tsx

@@ -1,4 +1,4 @@
-import { Block, PublicTypebot } from 'bot-engine'
+import { PublicTypebot } from 'models'
 import {
   createContext,
   Dispatch,
@@ -8,6 +8,7 @@ import {
   useState,
 } from 'react'
 import { Coordinates } from './GraphContext'
+import produce from 'immer'
 
 type Position = Coordinates & { scale: number }
 
@@ -35,31 +36,13 @@ export const AnalyticsGraphProvider = ({
 
   const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
 
-  const updateBlocks = (blocks: Block[]) => {
-    if (!typebot) return
-    setTypebot({
-      ...typebot,
-      blocks: [...blocks],
-    })
-  }
-
   const updateBlockPosition = (blockId: string, newPosition: Coordinates) => {
     if (!typebot) return
-    blockId === 'start-block'
+    setTypebot(
-      ? setTypebot({
+      produce(typebot, (nextTypebot) => {
-          ...typebot,
+        nextTypebot.blocks.byId[blockId].graphCoordinates = newPosition
-          startBlock: {
+      })
-            ...typebot.startBlock,
+    )
-            graphCoordinates: newPosition,
-          },
-        })
-      : updateBlocks(
-          typebot.blocks.map((block) =>
-            block.id === blockId
-              ? { ...block, graphCoordinates: newPosition }
-              : block
-          )
-        )
   }
 
   return (

apps/builder/contexts/DndContext.tsx

@@ -1,4 +1,4 @@
-import { Step, StepType } from 'bot-engine'
+import { Step, StepType } from 'models'
 import {
   createContext,
   Dispatch,

apps/builder/contexts/GraphContext.tsx

@@ -1,4 +1,4 @@
-import { Block, Step, StepType, Target } from 'bot-engine'
+import { Block, Step, Target } from 'models'
 import {
   createContext,
   Dispatch,
@@ -41,26 +41,22 @@ export type Node = Omit<Block, 'steps'> & {
   })[]
 }
 
-export type NewBlockPayload = {
-  x: number
-  y: number
-  type?: StepType
-  step?: Step
-}
-
 const graphPositionDefaultValue = { x: 400, y: 100, scale: 1 }
 
+type ConnectingIdsProps = {
+  source: { blockId: string; stepId: string }
+  target?: Target
+} | null
+
+type PreviewingIdsProps = { sourceId?: string; targetId?: string }
+
 const graphContext = createContext<{
   graphPosition: Position
   setGraphPosition: Dispatch<SetStateAction<Position>>
-  connectingIds: { blockId: string; stepId: string; target?: Target } | null
+  connectingIds: ConnectingIdsProps
-  setConnectingIds: Dispatch<
+  setConnectingIds: Dispatch<SetStateAction<ConnectingIdsProps>>
-    SetStateAction<{ blockId: string; stepId: string; target?: Target } | null>
+  previewingIds: PreviewingIdsProps
-  >
+  setPreviewingIds: Dispatch<SetStateAction<PreviewingIdsProps>>
-  previewingIds: { sourceId?: string; targetId?: string }
-  setPreviewingIds: Dispatch<
-    SetStateAction<{ sourceId?: string; targetId?: string }>
-  >
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 }>({
@@ -70,15 +66,8 @@ const graphContext = createContext<{
 
 export const GraphProvider = ({ children }: { children: ReactNode }) => {
   const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
-  const [connectingIds, setConnectingIds] = useState<{
+  const [connectingIds, setConnectingIds] = useState<ConnectingIdsProps>(null)
-    blockId: string
+  const [previewingIds, setPreviewingIds] = useState<PreviewingIdsProps>({})
-    stepId: string
-    target?: Target
-  } | null>(null)
-  const [previewingIds, setPreviewingIds] = useState<{
-    sourceId?: string
-    targetId?: string
-  }>({})
 
   return (
     <graphContext.Provider

apps/builder/contexts/TypebotContext.tsx

@@ -1,402 +0,0 @@
-import { useToast } from '@chakra-ui/react'
-import {
-  Block,
-  PublicTypebot,
-  Settings,
-  Step,
-  StepType,
-  Target,
-  Theme,
-  Typebot,
-} from 'bot-engine'
-import { deepEqual } from 'fast-equals'
-import { useRouter } from 'next/router'
-import {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
-import {
-  createPublishedTypebot,
-  parseTypebotToPublicTypebot,
-  updatePublishedTypebot,
-} from 'services/publicTypebot'
-import {
-  checkIfPublished,
-  checkIfTypebotsAreEqual,
-  parseDefaultPublicId,
-  parseNewBlock,
-  parseNewStep,
-  updateTypebot,
-} from 'services/typebots'
-import {
-  fetcher,
-  insertItemInList,
-  omit,
-  preventUserFromRefreshing,
-} from 'services/utils'
-import useSWR from 'swr'
-import { isDefined } from 'utils'
-import { NewBlockPayload, Coordinates } from './GraphContext'
-
-const typebotContext = createContext<{
-  typebot?: Typebot
-  publishedTypebot?: PublicTypebot
-  isPublished: boolean
-  isPublishing: boolean
-  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
-  updateTheme: (theme: Theme) => void
-  updateSettings: (settings: Settings) => void
-  updatePublicId: (publicId: string) => void
-  publishTypebot: () => void
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //@ts-ignore
-}>({})
-
-export const TypebotContext = ({
-  children,
-  typebotId,
-}: {
-  children: ReactNode
-  typebotId?: string
-}) => {
-  const router = useRouter()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
-  const [undoStack, setUndoStack] = useState<Typebot[]>([])
-  const { typebot, publishedTypebot, isLoading, mutate } = useFetchedTypebot({
-    typebotId,
-    onError: (error) =>
-      toast({
-        title: 'Error while fetching typebot',
-        description: error.message,
-      }),
-  })
-  const [localTypebot, setLocalTypebot] = useState<Typebot>()
-  const [localPublishedTypebot, setLocalPublishedTypebot] =
-    useState<PublicTypebot>()
-  const [isSavingLoading, setIsSavingLoading] = useState(false)
-  const [isPublishing, setIsPublishing] = useState(false)
-
-  const hasUnsavedChanges = useMemo(
-    () =>
-      isDefined(typebot) &&
-      isDefined(localTypebot) &&
-      !deepEqual(localTypebot, typebot),
-    [typebot, localTypebot]
-  )
-  const isPublished = useMemo(
-    () =>
-      isDefined(typebot) &&
-      isDefined(publishedTypebot) &&
-      checkIfPublished(typebot, publishedTypebot),
-    [typebot, publishedTypebot]
-  )
-
-  useEffect(() => {
-    if (!localTypebot || !typebot) return
-    if (!checkIfTypebotsAreEqual(localTypebot, typebot)) {
-      pushNewTypebotInUndoStack(localTypebot)
-      window.removeEventListener('beforeunload', preventUserFromRefreshing)
-      window.addEventListener('beforeunload', preventUserFromRefreshing)
-    } else {
-      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 })
-    if (publishedTypebot) setLocalPublishedTypebot({ ...publishedTypebot })
-    // 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 })
-    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 })
-  }
-
-  const updateTheme = (theme: Theme) => {
-    if (!localTypebot) return
-    setLocalTypebot({ ...localTypebot, theme })
-  }
-
-  const updateSettings = (settings: Settings) => {
-    if (!localTypebot) return
-    setLocalTypebot({ ...localTypebot, settings })
-  }
-
-  const updatePublicId = (publicId: string) => {
-    if (!localTypebot) return
-    setLocalTypebot({ ...localTypebot, publicId })
-  }
-
-  const publishTypebot = async () => {
-    if (!localTypebot) return
-    if (!localPublishedTypebot) {
-      const newPublicId = parseDefaultPublicId(
-        localTypebot.name,
-        localTypebot.id
-      )
-      updatePublicId(newPublicId)
-      localTypebot.publicId = newPublicId
-    }
-    if (hasUnsavedChanges || !localPublishedTypebot) await saveTypebot()
-    setIsPublishing(true)
-    if (localPublishedTypebot) {
-      const { error } = await updatePublishedTypebot(
-        localPublishedTypebot.id,
-        omit(parseTypebotToPublicTypebot(localTypebot), 'id')
-      )
-      setIsPublishing(false)
-      if (error) return toast({ title: error.name, description: error.message })
-    } else {
-      const { error } = await createPublishedTypebot(
-        omit(parseTypebotToPublicTypebot(localTypebot), 'id')
-      )
-      setIsPublishing(false)
-      if (error) return toast({ title: error.name, description: error.message })
-    }
-    mutate({ typebot: localTypebot })
-  }
-
-  return (
-    <typebotContext.Provider
-      value={{
-        typebot: localTypebot,
-        publishedTypebot: localPublishedTypebot,
-        updateStep,
-        addNewBlock,
-        addStepToBlock,
-        updateTarget,
-        removeStepFromBlock,
-        updateBlockPosition,
-        hasUnsavedChanges,
-        isSavingLoading,
-        save: saveTypebot,
-        removeBlock,
-        undo,
-        updateTheme,
-        updateSettings,
-        updatePublicId,
-        publishTypebot,
-        isPublishing,
-        isPublished,
-      }}
-    >
-      {children}
-    </typebotContext.Provider>
-  )
-}
-
-export const useTypebot = () => useContext(typebotContext)
-
-export const useFetchedTypebot = ({
-  typebotId,
-  onError,
-}: {
-  typebotId?: string
-  onError: (error: Error) => void
-}) => {
-  const { data, error, mutate } = useSWR<
-    { typebot: Typebot; publishedTypebot?: PublicTypebot },
-    Error
-  >(typebotId ? `/api/typebots/${typebotId}` : null, fetcher)
-  if (error) onError(error)
-  return {
-    typebot: data?.typebot,
-    publishedTypebot: data?.publishedTypebot,
-    isLoading: !error && !data,
-    mutate,
-  }
-}

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -0,0 +1,232 @@
+import { useToast } from '@chakra-ui/react'
+import { deepEqual } from 'fast-equals'
+import { PublicTypebot, Settings, Theme, Typebot } from 'models'
+import { useRouter } from 'next/router'
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import {
+  createPublishedTypebot,
+  parseTypebotToPublicTypebot,
+  updatePublishedTypebot,
+} from 'services/publicTypebot'
+import {
+  checkIfPublished,
+  checkIfTypebotsAreEqual,
+  parseDefaultPublicId,
+  updateTypebot,
+} from 'services/typebots'
+import { fetcher, omit, preventUserFromRefreshing } from 'services/utils'
+import useSWR from 'swr'
+import { isDefined } from 'utils'
+import { BlocksActions, blocksActions } from './actions/blocks'
+import { useImmer, Updater } from 'use-immer'
+import { stepsAction, StepsActions } from './actions/steps'
+
+type UpdateTypebotPayload = Partial<{
+  theme: Theme
+  settings: Settings
+  publicId: string
+}>
+const typebotContext = createContext<
+  {
+    typebot?: Typebot
+    publishedTypebot?: PublicTypebot
+    isPublished: boolean
+    isPublishing: boolean
+    hasUnsavedChanges: boolean
+    isSavingLoading: boolean
+    save: () => void
+    undo: () => void
+    updateTypebot: (updates: UpdateTypebotPayload) => void
+    publishTypebot: () => void
+  } & BlocksActions &
+    StepsActions
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+>({})
+
+export const TypebotContext = ({
+  children,
+  typebotId,
+}: {
+  children: ReactNode
+  typebotId?: string
+}) => {
+  const router = useRouter()
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+  const [undoStack, setUndoStack] = useState<Typebot[]>([])
+  const { typebot, publishedTypebot, isLoading, mutate } = useFetchedTypebot({
+    typebotId,
+    onError: (error) =>
+      toast({
+        title: 'Error while fetching typebot',
+        description: error.message,
+      }),
+  })
+  const [localTypebot, setLocalTypebot] = useImmer<Typebot | undefined>(
+    undefined
+  )
+  const [localPublishedTypebot, setLocalPublishedTypebot] =
+    useState<PublicTypebot>()
+  const [isSavingLoading, setIsSavingLoading] = useState(false)
+  const [isPublishing, setIsPublishing] = useState(false)
+
+  const hasUnsavedChanges = useMemo(
+    () =>
+      isDefined(typebot) &&
+      isDefined(localTypebot) &&
+      !deepEqual(localTypebot, typebot),
+    [typebot, localTypebot]
+  )
+  const isPublished = useMemo(
+    () =>
+      isDefined(typebot) &&
+      isDefined(publishedTypebot) &&
+      checkIfPublished(typebot, publishedTypebot),
+    [typebot, publishedTypebot]
+  )
+
+  useEffect(() => {
+    if (!localTypebot || !typebot) return
+    if (!checkIfTypebotsAreEqual(localTypebot, typebot)) {
+      pushNewTypebotInUndoStack(localTypebot)
+      window.removeEventListener('beforeunload', preventUserFromRefreshing)
+      window.addEventListener('beforeunload', preventUserFromRefreshing)
+    } else {
+      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 })
+    if (publishedTypebot) setLocalPublishedTypebot({ ...publishedTypebot })
+    // 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 (typebot?: Typebot) => {
+    if (!localTypebot) return
+    setIsSavingLoading(true)
+    const { error } = await updateTypebot(
+      typebot?.id ?? localTypebot.id,
+      typebot ?? localTypebot
+    )
+    setIsSavingLoading(false)
+    if (error) return toast({ title: error.name, description: error.message })
+    mutate({ typebot: typebot ?? localTypebot })
+    window.removeEventListener('beforeunload', preventUserFromRefreshing)
+  }
+
+  const updateLocalTypebot = ({
+    publicId,
+    settings,
+    theme,
+  }: UpdateTypebotPayload) => {
+    setLocalTypebot((typebot) => {
+      if (!typebot) return
+      if (publicId) typebot.publicId = publicId
+      if (settings) typebot.settings = settings
+      if (theme) typebot.theme = theme
+    })
+  }
+
+  const publishTypebot = async () => {
+    if (!localTypebot) return
+    const newLocalTypebot = { ...localTypebot }
+    if (!localPublishedTypebot) {
+      const newPublicId = parseDefaultPublicId(
+        localTypebot.name,
+        localTypebot.id
+      )
+      updateLocalTypebot({ publicId: newPublicId })
+      newLocalTypebot.publicId = newPublicId
+    }
+    if (hasUnsavedChanges || !localPublishedTypebot)
+      await saveTypebot(newLocalTypebot)
+    setIsPublishing(true)
+    if (localPublishedTypebot) {
+      const { error } = await updatePublishedTypebot(
+        localPublishedTypebot.id,
+        omit(parseTypebotToPublicTypebot(newLocalTypebot), 'id')
+      )
+      setIsPublishing(false)
+      if (error) return toast({ title: error.name, description: error.message })
+    } else {
+      const { data, error } = await createPublishedTypebot(
+        omit(parseTypebotToPublicTypebot(newLocalTypebot), 'id')
+      )
+      setLocalPublishedTypebot(data)
+      setIsPublishing(false)
+      if (error) return toast({ title: error.name, description: error.message })
+    }
+    mutate({ typebot: localTypebot })
+  }
+
+  return (
+    <typebotContext.Provider
+      value={{
+        typebot: localTypebot,
+        publishedTypebot: localPublishedTypebot,
+        hasUnsavedChanges,
+        isSavingLoading,
+        save: saveTypebot,
+        undo,
+        publishTypebot,
+        isPublishing,
+        isPublished,
+        updateTypebot: updateLocalTypebot,
+        ...blocksActions(setLocalTypebot as Updater<Typebot>),
+        ...stepsAction(setLocalTypebot as Updater<Typebot>),
+      }}
+    >
+      {children}
+    </typebotContext.Provider>
+  )
+}
+
+export const useTypebot = () => useContext(typebotContext)
+
+export const useFetchedTypebot = ({
+  typebotId,
+  onError,
+}: {
+  typebotId?: string
+  onError: (error: Error) => void
+}) => {
+  const { data, error, mutate } = useSWR<
+    { typebot: Typebot; publishedTypebot?: PublicTypebot },
+    Error
+  >(typebotId ? `/api/typebots/${typebotId}` : null, fetcher)
+  if (error) onError(error)
+  return {
+    typebot: data?.typebot,
+    publishedTypebot: data?.publishedTypebot,
+    isLoading: !error && !data,
+    mutate,
+  }
+}

apps/builder/contexts/TypebotContext/actions/blocks.ts

@@ -0,0 +1,40 @@
+import { Coordinates } from 'contexts/GraphContext'
+import { Block, Step, StepType, Typebot } from 'models'
+import { parseNewBlock } from 'services/typebots'
+import { Updater } from 'use-immer'
+import { createStepDraft, deleteStepDraft } from './steps'
+
+export type BlocksActions = {
+  createBlock: (props: Coordinates & { step: StepType | Step }) => void
+  updateBlock: (blockId: string, updates: Partial<Omit<Block, 'id'>>) => void
+  deleteBlock: (blockId: string) => void
+}
+
+export const blocksActions = (setTypebot: Updater<Typebot>): BlocksActions => ({
+  createBlock: ({ x, y, step }: Coordinates & { step: StepType | Step }) => {
+    setTypebot((typebot) => {
+      const newBlock = parseNewBlock({
+        totalBlocks: typebot.blocks.allIds.length,
+        initialCoordinates: { x, y },
+      })
+      typebot.blocks.byId[newBlock.id] = newBlock
+      typebot.blocks.allIds.push(newBlock.id)
+      createStepDraft(typebot, step, newBlock.id)
+    })
+  },
+  updateBlock: (blockId: string, updates: Partial<Omit<Block, 'id'>>) =>
+    setTypebot((typebot) => {
+      typebot.blocks.byId[blockId] = {
+        ...typebot.blocks.byId[blockId],
+        ...updates,
+      }
+    }),
+  deleteBlock: (blockId: string) =>
+    setTypebot((typebot) => {
+      const block = typebot.blocks.byId[blockId]
+      block.stepIds.forEach((stepId) => deleteStepDraft(typebot, stepId))
+      delete typebot.blocks.byId[blockId]
+      const index = typebot.blocks.allIds.indexOf(blockId)
+      if (index !== -1) typebot.blocks.allIds.splice(index, 1)
+    }),
+})

apps/builder/contexts/TypebotContext/actions/steps.ts

@@ -0,0 +1,51 @@
+import { Step, StepType, Typebot } from 'models'
+import { parseNewStep } from 'services/typebots'
+import { Updater } from 'use-immer'
+import { WritableDraft } from 'immer/dist/types/types-external'
+
+export type StepsActions = {
+  createStep: (blockId: string, step: StepType | Step, index?: number) => void
+  updateStep: (
+    stepId: string,
+    updates: Partial<Omit<Step, 'id' | 'type'>>
+  ) => void
+  deleteStep: (stepId: string) => void
+}
+
+export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
+  createStep: (blockId: string, step: StepType | Step, index?: number) => {
+    setTypebot((typebot) => {
+      createStepDraft(typebot, step, blockId, index)
+    })
+  },
+  updateStep: (stepId: string, updates: Partial<Omit<Step, 'id' | 'type'>>) =>
+    setTypebot((typebot) => {
+      typebot.steps.byId[stepId] = { ...typebot.steps.byId[stepId], ...updates }
+    }),
+  deleteStep: (stepId: string) => {
+    setTypebot((typebot) => {
+      deleteStepDraft(typebot, stepId)
+    })
+  },
+})
+
+export const deleteStepDraft = (
+  typebot: WritableDraft<Typebot>,
+  stepId: string
+) => {
+  delete typebot.steps.byId[stepId]
+  const index = typebot.steps.allIds.indexOf(stepId)
+  if (index !== -1) typebot.steps.allIds.splice(index, 1)
+}
+
+export const createStepDraft = (
+  typebot: WritableDraft<Typebot>,
+  step: StepType | Step,
+  blockId: string,
+  index?: number
+) => {
+  const newStep = typeof step === 'string' ? parseNewStep(step, blockId) : step
+  typebot.steps.byId[newStep.id] = newStep
+  typebot.steps.allIds.push(newStep.id)
+  typebot.blocks.byId[blockId].stepIds.splice(index ?? 0, 0, newStep.id)
+}

apps/builder/contexts/TypebotContext/index.ts

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

apps/builder/cypress/plugins/database.ts

@@ -1,5 +1,6 @@
-import { parseNewTypebot, PublicTypebot, StepType, Typebot } from 'bot-engine'
+import { PublicTypebot, StepType, Typebot } from 'models'
 import { Plan, PrismaClient } from 'db'
+import { parseTestTypebot } from './utils'
 
 const prisma = new PrismaClient()
 
@@ -34,51 +35,50 @@ const createFolders = () =>
   })
 
 const createTypebots = async () => {
-  const typebot2: Typebot = {
+  const typebot2 = {
-    ...(parseNewTypebot({
+    ...parseTestTypebot({
+      id: 'typebot2',
       name: 'Typebot #2',
       ownerId: 'test2',
-      folderId: null,
+      blocks: {
-    }) as Typebot),
+        byId: {
-    id: 'typebot2',
+          block1: {
-    startBlock: {
+            id: 'block1',
-      id: 'start-block',
+            title: 'Block #1',
-      steps: [
+            stepIds: ['step1'],
-        {
+            graphCoordinates: { x: 200, y: 200 },
-          id: 'start-step',
+          },
-          blockId: 'start-block',
-          type: StepType.START,
-          label: 'Start',
-          target: { blockId: 'block1' },
         },
-      ],
+        allIds: ['block1'],
-      graphCoordinates: { x: 0, y: 0 },
-      title: 'Start',
-    },
-    blocks: [
-      {
-        title: 'Block #1',
-        id: 'block1',
-        steps: [{ id: 'step1', type: StepType.TEXT_INPUT, blockId: 'block1' }],
-        graphCoordinates: { x: 200, y: 200 },
       },
-    ],
+      steps: {
+        byId: {
+          step1: {
+            id: 'step1',
+            type: StepType.TEXT_INPUT,
+            blockId: 'block1',
+          },
+        },
+        allIds: ['step1'],
+      },
+    }),
   }
   await prisma.typebot.createMany({
     data: [
       {
-        ...parseNewTypebot({
+        ...parseTestTypebot({
+          id: 'typebot1',
           name: 'Typebot #1',
           ownerId: 'test2',
-          folderId: null,
+          blocks: { byId: {}, allIds: [] },
+          steps: { byId: {}, allIds: [] },
         }),
-        id: 'typebot1',
       },
       typebot2,
-    ],
+    ] as any,
   })
   return prisma.publicTypebot.createMany({
-    data: [parseTypebotToPublicTypebot('publictypebot2', typebot2)],
+    data: [parseTypebotToPublicTypebot('publictypebot2', typebot2)] as any,
   })
 }
 
@@ -118,8 +118,8 @@ const parseTypebotToPublicTypebot = (
 ): PublicTypebot => ({
   id,
   blocks: typebot.blocks,
+  steps: typebot.steps,
   name: typebot.name,
-  startBlock: typebot.startBlock,
   typebotId: typebot.id,
   theme: typebot.theme,
   settings: typebot.settings,

apps/builder/cypress/plugins/utils.ts

@@ -0,0 +1,75 @@
+import {
+  Block,
+  StepType,
+  Theme,
+  BackgroundType,
+  Settings,
+  Typebot,
+  Table,
+  Step,
+} from 'models'
+
+export const parseTestTypebot = ({
+  id,
+  ownerId,
+  name,
+  blocks,
+  steps,
+}: {
+  id: string
+  ownerId: string
+  name: string
+  blocks: Table<Block>
+  steps: Table<Step>
+}): Typebot => {
+  const theme: Theme = {
+    general: {
+      font: 'Open Sans',
+      background: { type: BackgroundType.NONE, content: '#ffffff' },
+    },
+  }
+  const settings: Settings = {
+    typingEmulation: {
+      enabled: true,
+      speed: 300,
+      maxDelay: 1.5,
+    },
+  }
+  return {
+    id,
+    folderId: null,
+    name,
+    ownerId,
+    theme,
+    settings,
+    createdAt: new Date(),
+    blocks: {
+      byId: {
+        block0: {
+          id: 'block0',
+          title: 'Block #0',
+          stepIds: ['step0'],
+          graphCoordinates: { x: 0, y: 0 },
+        },
+        ...blocks.byId,
+      },
+      allIds: ['block0', ...blocks.allIds],
+    },
+    steps: {
+      byId: {
+        step0: {
+          id: 'step0',
+          type: StepType.START,
+          blockId: 'block0',
+          label: 'Start',
+          target: { blockId: 'block1' },
+        },
+        ...steps.byId,
+      },
+      allIds: ['step0', ...steps.allIds],
+    },
+    publicId: null,
+    publishedTypebotId: null,
+    updatedAt: new Date(),
+  }
+}

apps/builder/cypress/tests/results.ts

@@ -2,15 +2,10 @@ import path from 'path'
 import { parse } from 'papaparse'
 
 describe('ResultsPage', () => {
-  before(() => {
-    cy.intercept({ url: '/api/typebots/typebot2/results*', method: 'GET' }).as(
-      'getResults'
-    )
-    cy.intercept({ url: '/api/typebots/typebot2/results*', method: 'GET' }).as(
-      'getResults'
-    )
-  })
   beforeEach(() => {
+    cy.intercept({ url: '/api/typebots/typebot2/results*', method: 'GET' }).as(
+      'getResults'
+    )
     cy.task('seed')
     cy.signOut()
   })
@@ -48,7 +43,7 @@ describe('ResultsPage', () => {
     cy.findByText('content0').should('exist')
   })
 
-  it.only('should correctly export selection in CSV', () => {
+  it('should correctly export selection in CSV', () => {
     const downloadsFolder = Cypress.config('downloadsFolder')
     cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot2/results')

apps/builder/layouts/results/AnalyticsContent.tsx

@@ -1,9 +1,9 @@
 import { Flex, useToast } from '@chakra-ui/react'
-import { Stats } from 'bot-engine'
 import AnalyticsGraph from 'components/analytics/graph/AnalyticsGraph'
 import { StatsCards } from 'components/analytics/StatsCards'
 import { AnalyticsGraphProvider } from 'contexts/AnalyticsGraphProvider'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { Stats } from 'models'
 import React from 'react'
 import { useAnswersCount } from 'services/analytics'
 

apps/builder/layouts/results/ResultsContent.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, HStack, Tag, useToast, Text } from '@chakra-ui/react'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useRouter } from 'next/router'
 import React, { useMemo } from 'react'
 import { useStats } from 'services/analytics'

apps/builder/next.config.js

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

apps/builder/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@chakra-ui/css-reset": "^1.1.1",
-    "@chakra-ui/react": "^1.7.3",
+    "@chakra-ui/react": "^1.7.4",
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/sortable": "^5.1.0",
     "@emotion/react": "^11.7.1",
@@ -24,13 +24,14 @@
     "@udecode/plate-link": "^9.0.0",
     "@udecode/plate-ui-link": "^9.0.0",
     "@udecode/plate-ui-toolbar": "^9.0.0",
-    "aws-sdk": "^2.1048.0",
+    "aws-sdk": "^2.1051.0",
     "bot-engine": "*",
     "db": "*",
     "fast-equals": "^2.0.4",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4",
     "htmlparser2": "^7.2.0",
+    "immer": "^9.0.7",
     "kbar": "^0.1.0-beta.24",
     "micro": "^9.3.4",
     "micro-cors": "^0.1.1",
@@ -45,7 +46,7 @@
     "react-frame-component": "^5.2.1",
     "react-table": "^7.7.0",
     "short-uuid": "^4.2.0",
-    "slate": "^0.72.0",
+    "slate": "^0.72.3",
     "slate-history": "^0.66.0",
     "slate-hyperscript": "^0.67.0",
     "slate-react": "^0.72.1",
@@ -54,7 +55,9 @@
     "svg-round-corners": "^0.3.0",
     "swr": "^1.1.2",
     "use-debounce": "^7.0.1",
-    "utils": "*"
+    "use-immer": "^0.6.0",
+    "utils": "*",
+    "models": "*"
   },
   "devDependencies": {
     "@testing-library/cypress": "^8.0.2",
@@ -63,10 +66,10 @@
     "@types/nprogress": "^0.2.0",
     "@types/papaparse": "^5.3.1",
     "@types/qs": "^6.9.7",
-    "@types/react": "^17.0.37",
+    "@types/react": "^17.0.38",
     "@types/react-table": "^7.7.9",
     "@types/testing-library__cypress": "^5.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/eslint-plugin": "^5.9.0",
     "cypress": "^9.2.0",
     "cypress-file-upload": "^5.0.8",
     "cypress-social-logins": "^1.13.0",

apps/builder/pages/api/typebots.ts

@@ -1,8 +1,8 @@
-import { parseNewTypebot } from 'bot-engine'
+import { Prisma, User } from 'db'
-import { User } from 'db'
 import prisma from 'libs/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getSession } from 'next-auth/react'
+import { parseNewTypebot } from 'services/typebots'
 import { methodNotAllowed } from 'utils'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
@@ -26,7 +26,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     if (req.method === 'POST') {
       const data = JSON.parse(req.body)
       const typebot = await prisma.typebot.create({
-        data: parseNewTypebot({ ownerId: user.id, ...data }),
+        data: parseNewTypebot({
+          ownerId: user.id,
+          ...data,
+        }) as Prisma.TypebotUncheckedCreateInput,
       })
       return res.send(typebot)
     }

apps/builder/pages/api/typebots/[typebotId]/results/answers/count.ts

@@ -1,4 +1,4 @@
-import { PublicTypebot } from 'bot-engine'
+import { PublicTypebot } from 'models'
 import { User } from 'db'
 import prisma from 'libs/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -24,14 +24,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 
     const answersCounts: { blockId: string; totalAnswers: number }[] =
       await Promise.all(
-        (typebot.publishedTypebot as PublicTypebot).blocks.map(
+        (
-          async (block) => {
+          typebot.publishedTypebot as unknown as PublicTypebot
-            const totalAnswers = await prisma.answer.count({
+        ).blocks.allIds.map(async (blockId) => {
-              where: { blockId: block.id },
+          const totalAnswers = await prisma.answer.count({
-            })
+            where: { blockId },
-            return { blockId: block.id, totalAnswers }
+          })
-          }
+          return { blockId, totalAnswers }
-        )
+        })
       )
     return res.status(200).send({ answersCounts })
   }

apps/builder/pages/api/typebots/[typebotId]/results/stats.ts

@@ -1,6 +1,6 @@
-import { Stats } from 'bot-engine'
 import { User } from 'db'
 import prisma from 'libs/prisma'
+import { Stats } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getSession } from 'next-auth/react'
 import { methodNotAllowed } from 'utils'

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

@@ -3,7 +3,7 @@ import { Board } from 'components/board/Board'
 import { Seo } from 'components/Seo'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
 import { EditorContext } from 'contexts/EditorContext'
-import { TypebotContext } from 'contexts/TypebotContext'
+import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
 import { useRouter } from 'next/router'
 import { KBarProvider } from 'kbar'
 import React from 'react'

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

@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/layout'
 import { ResultsContent } from 'layouts/results/ResultsContent'
 import { Seo } from 'components/Seo'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
-import { TypebotContext } from 'contexts/TypebotContext'
+import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { UserContext } from 'contexts/UserContext'

apps/builder/pages/typebots/[id]/results/analytics.tsx

@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/layout'
 import { ResultsContent } from 'layouts/results/ResultsContent'
 import { Seo } from 'components/Seo'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
-import { TypebotContext } from 'contexts/TypebotContext'
+import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { UserContext } from 'contexts/UserContext'

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

@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/layout'
 import { Seo } from 'components/Seo'
 import { SettingsContent } from 'components/settings/SettingsContent'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
-import { TypebotContext } from 'contexts/TypebotContext'
+import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
 import { UserContext } from 'contexts/UserContext'
 import { useRouter } from 'next/router'
 import React from 'react'

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

@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/layout'
 import { Seo } from 'components/Seo'
 import { ShareContent } from 'components/share/ShareContent'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
-import { TypebotContext } from 'contexts/TypebotContext'
+import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
 import { UserContext } from 'contexts/UserContext'
 import { useRouter } from 'next/router'
 import React from 'react'

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

@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/layout'
 import { Seo } from 'components/Seo'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
 import { ThemeContent } from 'components/theme/ThemeContent'
-import { TypebotContext } from 'contexts/TypebotContext'
+import { TypebotContext } from 'contexts/TypebotContext/TypebotContext'
 import { UserContext } from 'contexts/UserContext'
 import { useRouter } from 'next/router'
 import React from 'react'

apps/builder/services/analytics.ts

@@ -1,4 +1,4 @@
-import { Stats } from 'bot-engine'
+import { Stats } from 'models'
 import useSWR from 'swr'
 import { fetcher } from './utils'
 

apps/builder/services/graph.ts

@@ -1,5 +1,5 @@
 import { Coordinates } from '@dnd-kit/core/dist/types'
-import { Block, StartBlock } from 'bot-engine'
+import { Block } from 'models'
 import { AnchorsPositionProps } from 'components/board/graph/Edges/Edge'
 import {
   stubLength,
@@ -143,7 +143,7 @@ const computeFiveSegments = (
 }
 
 export const getAnchorsPosition = (
-  sourceBlock: Block | StartBlock,
+  sourceBlock: Block,
   targetBlock: Block,
   sourceStepIndex: number,
   targetStepIndex?: number

apps/builder/services/publicTypebot.tsx

@@ -1,11 +1,4 @@
-import {
+import { InputStep, PublicTypebot, Step, StepType, Typebot } from 'models'
-  Block,
-  InputStep,
-  PublicTypebot,
-  Step,
-  StepType,
-  Typebot,
-} from 'bot-engine'
 import { sendRequest } from './utils'
 import shortId from 'short-uuid'
 import { HStack, Text } from '@chakra-ui/react'
@@ -17,8 +10,8 @@ export const parseTypebotToPublicTypebot = (
 ): PublicTypebot => ({
   id: shortId.generate(),
   blocks: typebot.blocks,
+  steps: typebot.steps,
   name: typebot.name,
-  startBlock: typebot.startBlock,
   typebotId: typebot.id,
   theme: typebot.theme,
   settings: typebot.settings,
@@ -28,7 +21,7 @@ export const parseTypebotToPublicTypebot = (
 export const createPublishedTypebot = async (
   typebot: Omit<PublicTypebot, 'id'>
 ) =>
-  sendRequest({
+  sendRequest<PublicTypebot>({
     url: `/api/publicTypebots`,
     method: 'POST',
     body: typebot,
@@ -49,32 +42,47 @@ export const parseSubmissionsColumns = (
 ): {
   Header: JSX.Element
   accessor: string
-}[] => [
+}[] => {
-  {
+  console.log(typebot)
-    Header: (
+  if (!typebot) return []
-      <HStack>
+  return [
-        <CalendarIcon />
+    {
-        <Text>Submitted at</Text>
+      Header: (
-      </HStack>
+        <HStack>
-    ),
+          <CalendarIcon />
-    accessor: 'createdAt',
+          <Text>Submitted at</Text>
-  },
+        </HStack>
-  ...(typebot?.blocks ?? []).filter(blockContainsInput).map((block) => ({
+      ),
-    Header: (
+      accessor: 'createdAt',
-      <HStack>
+    },
-        <StepIcon
+    ...typebot.blocks.allIds
-          type={
+      .filter((blockId) => typebot && blockContainsInput(typebot, blockId))
-            block.steps.find((step) => step.target)?.type ?? StepType.TEXT_INPUT
+      .map((blockId) => {
-          }
+        const block = typebot.blocks.byId[blockId]
-        />
+        const inputStepId = block.stepIds.find((stepId) =>
-        <Text>{block.title}</Text>
+          stepIsInput(typebot.steps.byId[stepId])
-      </HStack>
+        )
-    ),
+        const inputStep = typebot.steps.byId[inputStepId as string]
-    accessor: block.id,
+        return {
-  })),
+          Header: (
-]
+            <HStack>
+              <StepIcon type={inputStep.type} />
+              <Text>{block.title}</Text>
+            </HStack>
+          ),
+          accessor: blockId,
+        }
+      }),
+  ]
+}
 
-const blockContainsInput = (block: Block) => block.steps.some(stepIsInput)
+const blockContainsInput = (
+  typebot: PublicTypebot | Typebot,
+  blockId: string
+) =>
+  typebot.blocks.byId[blockId].stepIds.some((stepId) =>
+    stepIsInput(typebot.steps.byId[stepId])
+  )
 
 const stepIsInput = (step: Step): step is InputStep =>
   step.type === StepType.TEXT_INPUT

apps/builder/services/results.ts

@@ -1,4 +1,4 @@
-import { Result } from 'bot-engine'
+import { Result } from 'models'
 import useSWRInfinite from 'swr/infinite'
 import { fetcher, sendRequest } from './utils'
 import { stringify } from 'qs'

apps/builder/services/typebots.ts

@@ -5,9 +5,13 @@ import {
   TextStep,
   TextInputStep,
   PublicTypebot,
-} from 'bot-engine'
+  BackgroundType,
+  Settings,
+  StartStep,
+  Theme,
+} from 'models'
 import shortId from 'short-uuid'
-import { Typebot } from 'bot-engine'
+import { Typebot } from 'models'
 import useSWR from 'swr'
 import { fetcher, sendRequest, toKebabCase } from './utils'
 import { deepEqual } from 'fast-equals'
@@ -85,13 +89,9 @@ export const patchTypebot = async (id: string, typebot: Partial<Typebot>) =>
   })
 
 export const parseNewBlock = ({
-  type,
   totalBlocks,
   initialCoordinates,
-  step,
 }: {
-  step?: Step
-  type?: StepType
   totalBlocks: number
   initialCoordinates: { x: number; y: number }
 }): Block => {
@@ -100,9 +100,7 @@ export const parseNewBlock = ({
     id,
     title: `Block #${totalBlocks + 1}`,
     graphCoordinates: initialCoordinates,
-    steps: [
+    stepIds: [],
-      step ? { ...step, blockId: id } : parseNewStep(type as StepType, id),
-    ],
   }
 }
 
@@ -158,11 +156,58 @@ export const checkIfPublished = (
   publicTypebot: PublicTypebot
 ) =>
   deepEqual(typebot.blocks, publicTypebot.blocks) &&
-  deepEqual(typebot.startBlock, publicTypebot.startBlock) &&
+  deepEqual(typebot.steps, publicTypebot.steps) &&
   typebot.name === publicTypebot.name &&
   typebot.publicId === publicTypebot.publicId &&
   deepEqual(typebot.settings, publicTypebot.settings) &&
   deepEqual(typebot.theme, publicTypebot.theme)
 
 export const parseDefaultPublicId = (name: string, id: string) =>
-  toKebabCase(`${name}-${id?.slice(0, 5)}`)
+  toKebabCase(name) + `-${id?.slice(-7)}`
+
+export const parseNewTypebot = ({
+  ownerId,
+  folderId,
+  name,
+}: {
+  ownerId: string
+  folderId: string | null
+  name: string
+}): Partial<Typebot> => {
+  const startBlockId = shortId.generate()
+  const startStepId = shortId.generate()
+  const startStep: StartStep = {
+    blockId: startBlockId,
+    id: startStepId,
+    label: 'Start',
+    type: StepType.START,
+  }
+  const startBlock: Block = {
+    id: startBlockId,
+    title: 'Start',
+    graphCoordinates: { x: 0, y: 0 },
+    stepIds: [startStepId],
+  }
+  const theme: Theme = {
+    general: {
+      font: 'Open Sans',
+      background: { type: BackgroundType.NONE, content: '#ffffff' },
+    },
+  }
+  const settings: Settings = {
+    typingEmulation: {
+      enabled: true,
+      speed: 300,
+      maxDelay: 1.5,
+    },
+  }
+  return {
+    folderId,
+    name,
+    ownerId,
+    blocks: { byId: { [startBlockId]: startBlock }, allIds: [startBlockId] },
+    steps: { byId: { [startStepId]: startStep }, allIds: [startStepId] },
+    theme,
+    settings,
+  }
+}

apps/viewer/layouts/TypebotPage.tsx

@@ -1,4 +1,5 @@
-import { Answer, PublicTypebot, TypebotViewer } from 'bot-engine'
+import { TypebotViewer } from 'bot-engine'
+import { Answer, PublicTypebot } from 'models'
 import React, { useEffect, useState } from 'react'
 import { upsertAnswer } from 'services/answer'
 import { SEO } from '../components/Seo'

apps/viewer/next.config.js

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

apps/viewer/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "bot-engine": "*",
     "db": "*",
+    "models": "*",
     "next": "^12.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -19,7 +20,7 @@
   "devDependencies": {
     "@types/node": "^17.0.4",
     "@types/react": "^17.0.38",
-    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/eslint-plugin": "^5.9.0",
     "eslint": "<8.0.0",
     "eslint-config-next": "12.0.7",
     "eslint-config-prettier": "^8.3.0",

apps/viewer/pages/[publicId].tsx

@@ -1,4 +1,4 @@
-import { PublicTypebot } from 'bot-engine'
+import { PublicTypebot } from 'models'
 import { GetServerSideProps, GetServerSidePropsContext } from 'next'
 import { TypebotPage, TypebotPageProps } from '../layouts/TypebotPage'
 import prisma from '../libs/prisma'

apps/viewer/pages/index.tsx

@@ -1,4 +1,4 @@
-import { PublicTypebot } from 'bot-engine'
+import { PublicTypebot } from 'models'
 import { GetServerSideProps, GetServerSidePropsContext } from 'next'
 import { TypebotPage, TypebotPageProps } from '../layouts/TypebotPage'
 import prisma from '../libs/prisma'

apps/viewer/services/answer.ts

@@ -1,4 +1,4 @@
-import { Answer } from 'bot-engine'
+import { Answer } from 'models'
 import { sendRequest } from 'utils'
 
 export const upsertAnswer = async (answer: Answer & { resultId: string }) => {

packages/bot-engine/package.json

@@ -8,26 +8,28 @@
   "dependencies": {
     "db": "*",
     "fast-equals": "^2.0.4",
+    "models": "*",
     "react-frame-component": "^5.2.1",
     "react-scroll": "^1.8.4",
-    "react-transition-group": "^4.4.2"
+    "react-transition-group": "^4.4.2",
+    "utils": "*"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.0",
     "@types/react": "^17.0.38",
     "@types/react-scroll": "^1.8.3",
     "@types/react-transition-group": "^4.4.4",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",
-    "rollup": "^2.62.0",
+    "rollup": "^2.63.0",
     "rollup-plugin-dts": "^4.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "tailwindcss": "^3.0.8",
+    "tailwindcss": "^3.0.11",
     "typescript": "^4.5.4"
   },
   "peerDependencies": {

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

@@ -1,21 +1,21 @@
 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'
+import { Step, Table } from 'models'
 
 type ChatBlockProps = {
-  block: Block
+  steps: Table<Step>
   onBlockEnd: (nextBlockId?: string) => void
 }
 
-export const ChatBlock = ({ block, onBlockEnd }: ChatBlockProps) => {
+export const ChatBlock = ({ steps, onBlockEnd }: ChatBlockProps) => {
   const [displayedSteps, setDisplayedSteps] = useState<Step[]>([])
 
   useEffect(() => {
-    setDisplayedSteps([block.steps[0]])
+    setDisplayedSteps([steps.byId[steps.allIds[0]]])
   }, [])
 
   useEffect(() => {
@@ -33,10 +33,10 @@ export const ChatBlock = ({ block, onBlockEnd }: ChatBlockProps) => {
     const currentStep = [...displayedSteps].pop()
     if (
       currentStep?.target?.blockId ||
-      displayedSteps.length === block.steps.length
+      displayedSteps.length === steps.allIds.length
     )
       return onBlockEnd(currentStep?.target?.blockId)
-    const nextStep = block.steps[displayedSteps.length]
+    const nextStep = steps.byId[displayedSteps.length]
     if (nextStep) setDisplayedSteps([...displayedSteps, nextStep])
   }
 

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useAnswers } from '../../../contexts/AnswersContext'
 import { useHostAvatars } from '../../../contexts/HostAvatarsContext'
-import { Step } from '../../../models'
+import { Step } from 'models'
 import { isTextInputStep, isTextStep } from '../../../services/utils'
 import { GuestBubble } from './bubbles/GuestBubble'
 import { HostMessageBubble } from './bubbles/HostMessageBubble'

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useHostAvatars } from '../../../../contexts/HostAvatarsContext'
 import { useTypebot } from '../../../../contexts/TypebotContext'
-import { StepType, TextStep } from '../../../../models'
+import { StepType, TextStep } from 'models'
 import { computeTypingTimeout } from '../../../../services/chat'
 import { TypingContent } from './TypingContent'
 

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

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { Answer, PublicTypebot } from '..'
 
-import { Block } from '..'
 import { ChatBlock } from './ChatBlock/ChatBlock'
 import { useFrame } from 'react-frame-component'
 import { setCssVariablesValue } from '../services/theme'
 import { useAnswers } from '../contexts/AnswersContext'
 import { deepEqual } from 'fast-equals'
+import { Answer, Block, PublicTypebot } from 'models'
+import { filterTable } from 'utils'
 
 type Props = {
   typebot: PublicTypebot
@@ -28,14 +28,17 @@ export const ConversationContainer = ({
 
   const displayNextBlock = (blockId?: string) => {
     if (!blockId) return onCompleted()
-    const nextBlock = typebot.blocks.find((b) => b.id === blockId)
+    const nextBlock = typebot.blocks.byId[blockId]
     if (!nextBlock) return onCompleted()
     onNewBlockVisible(blockId)
     setDisplayedBlocks([...displayedBlocks, nextBlock])
   }
 
   useEffect(() => {
-    const firstBlockId = typebot.startBlock.steps[0].target?.blockId
+    const blocks = typebot.blocks
+    const firstBlockId =
+      typebot.steps.byId[blocks.byId[blocks.allIds[0]].stepIds[0]].target
+        ?.blockId
     if (firstBlockId) displayNextBlock(firstBlockId)
   }, [])
 
@@ -58,7 +61,7 @@ export const ConversationContainer = ({
       {displayedBlocks.map((block, idx) => (
         <ChatBlock
           key={block.id + idx}
-          block={block}
+          steps={filterTable(block.stepIds, typebot.steps)}
           onBlockEnd={displayNextBlock}
         />
       ))}

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

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react'
-import { Answer, BackgroundType, 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 { AnswersContext } from '../contexts/AnswersContext'
+import { Answer, BackgroundType, PublicTypebot } from 'models'
 
 export type TypebotViewerProps = {
   typebot: PublicTypebot

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

@@ -1,4 +1,4 @@
-import { Answer } from '../models'
+import { Answer } from 'models'
 import React, { createContext, ReactNode, useContext, useState } from 'react'
 
 const answersContext = createContext<{

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

@@ -1,5 +1,5 @@
+import { PublicTypebot } from 'models'
 import React, { createContext, ReactNode, useContext } from 'react'
-import { PublicTypebot } from '../models/publicTypebot'
 
 const typebotContext = createContext<{
   typebot: PublicTypebot

packages/bot-engine/src/index.ts

@@ -1,3 +1 @@
 export * from './components/TypebotViewer'
-export * from './models'
-export { parseNewTypebot } from './services/utils'

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

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

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

@@ -1,87 +0,0 @@
-import { Typebot as TypebotFromPrisma } from 'db'
-
-export type Typebot = Omit<
-  TypebotFromPrisma,
-  'blocks' | 'startBlock' | 'theme' | 'settings'
-> & {
-  blocks: Block[]
-  startBlock: StartBlock
-  theme: Theme
-  settings: Settings
-}
-
-export type StartBlock = {
-  id: `start-block`
-  graphCoordinates: {
-    x: number
-    y: number
-  }
-  title: string
-  steps: [StartStep]
-}
-
-export type StartStep = {
-  id: 'start-step'
-  blockId: 'start-block'
-  target?: Target
-  type: StepType.START
-  label: string
-}
-
-export type Block = {
-  id: string
-  title: string
-  steps: Step[]
-  graphCoordinates: {
-    x: number
-    y: number
-  }
-}
-
-export enum StepType {
-  START = 'start',
-  TEXT = 'text',
-  TEXT_INPUT = 'text input',
-}
-
-export type Target = { blockId: string; stepId?: string }
-
-export type Step = BubbleStep | InputStep
-export type BubbleStep = TextStep
-export type InputStep = TextInputStep
-export type StepBase = { id: string; blockId: string; target?: Target }
-export type TextStep = StepBase & {
-  type: StepType.TEXT
-  content: { html: string; richText: unknown[]; plainText: string }
-}
-export type TextInputStep = StepBase & {
-  type: StepType.TEXT_INPUT
-}
-
-export type Theme = {
-  general: {
-    font: string
-    background: Background
-  }
-}
-
-export enum BackgroundType {
-  COLOR = 'Color',
-  IMAGE = 'Image',
-  NONE = 'None',
-}
-
-export type Background = {
-  type: BackgroundType
-  content: string
-}
-
-export type Settings = {
-  typingEmulation: TypingEmulationSettings
-}
-
-export type TypingEmulationSettings = {
-  enabled: boolean
-  speed: number
-  maxDelay: number
-}

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

@@ -1,4 +1,4 @@
-import { TypingEmulationSettings } from '../models'
+import { TypingEmulationSettings } from 'models'
 
 export const computeTypingTimeout = (
   bubbleContent: string,

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

@@ -1,4 +1,4 @@
-import { BackgroundType, Theme } from '../models'
+import { BackgroundType, Theme } from 'models'
 
 const cssVariableNames = {
   container: {

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

@@ -1,55 +1,7 @@
-import { Prisma } from 'db'
+import { Step, TextStep, StepType, TextInputStep } from 'models'
-import {
-  Step,
-  TextStep,
-  StepType,
-  TextInputStep,
-  BackgroundType,
-  Settings,
-  StartBlock,
-  Theme,
-} 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
-
-export const parseNewTypebot = ({
-  ownerId,
-  folderId,
-  name,
-}: {
-  ownerId: string
-  folderId: string | null
-  name: string
-}): Prisma.TypebotUncheckedCreateInput => {
-  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,
-      },
-    ],
-  }
-  const theme: Theme = {
-    general: {
-      font: 'Open Sans',
-      background: { type: BackgroundType.NONE, content: '#ffffff' },
-    },
-  }
-  const settings: Settings = {
-    typingEmulation: {
-      enabled: true,
-      speed: 300,
-      maxDelay: 1.5,
-    },
-  }
-  return { folderId, name, ownerId, startBlock, theme, settings }
-}

packages/db/prisma/migrations/20220106083902_normalize_data/migration.sql

@@ -0,0 +1,22 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `startBlock` on the `PublicTypebot` table. All the data in the column will be lost.
+  - You are about to drop the column `startBlock` on the `Typebot` table. All the data in the column will be lost.
+  - Added the required column `steps` to the `PublicTypebot` table without a default value. This is not possible if the table is not empty.
+  - Changed the type of `blocks` on the `PublicTypebot` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+  - Added the required column `steps` to the `Typebot` table without a default value. This is not possible if the table is not empty.
+  - Changed the type of `blocks` on the `Typebot` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+
+*/
+-- AlterTable
+ALTER TABLE "PublicTypebot" DROP COLUMN "startBlock",
+ADD COLUMN     "steps" JSONB NOT NULL,
+DROP COLUMN "blocks",
+ADD COLUMN     "blocks" JSONB NOT NULL;
+
+-- AlterTable
+ALTER TABLE "Typebot" DROP COLUMN "startBlock",
+ADD COLUMN     "steps" JSONB NOT NULL,
+DROP COLUMN "blocks",
+ADD COLUMN     "blocks" JSONB NOT NULL;

packages/db/prisma/schema.prisma

@@ -90,23 +90,23 @@ model Typebot {
   results            Result[]
   folderId           String?
   folder             DashboardFolder? @relation(fields: [folderId], references: [id])
-  blocks             Json[]
+  blocks             Json
-  startBlock         Json
+  steps              Json
   theme              Json
   settings           Json
   publicId           String?          @unique
 }
 
 model PublicTypebot {
-  id         String  @id @default(cuid())
+  id        String  @id @default(cuid())
-  typebotId  String  @unique
+  typebotId String  @unique
-  typebot    Typebot @relation(fields: [typebotId], references: [id], onDelete: Cascade)
+  typebot   Typebot @relation(fields: [typebotId], references: [id], onDelete: Cascade)
-  name       String
+  name      String
-  blocks     Json[]
+  blocks    Json
-  startBlock Json
+  steps     Json
-  theme      Json
+  theme     Json
-  settings   Json
+  settings  Json
-  publicId   String? @unique
+  publicId  String? @unique
 }
 
 model Result {

packages/models/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+# Keep environment variables out of version control
+.env
+
+dist
+types
+yarn-error.log

packages/models/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "models",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "types/index.d.ts",
+  "license": "AGPL-3.0-or-later",
+  "private": true,
+  "devDependencies": {
+    "typescript": "^4.5.4"
+  },
+  "dependencies": {
+    "next": "^12.0.7",
+    "db": "*"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  }
+}

packages/models/src/index.ts

@@ -2,3 +2,4 @@ export * from './typebot'
 export * from './publicTypebot'
 export * from './result'
 export * from './answer'
+export * from './utils'

packages/models/src/publicTypebot.ts

@@ -0,0 +1,13 @@
+import { PublicTypebot as PublicTypebotFromPrisma } from 'db'
+import { Block, Settings, Step, Theme } from './typebot'
+import { Table } from './utils'
+
+export type PublicTypebot = Omit<
+  PublicTypebotFromPrisma,
+  'blocks' | 'startBlock' | 'theme' | 'settings' | 'steps'
+> & {
+  blocks: Table<Block>
+  steps: Table<Step>
+  theme: Theme
+  settings: Settings
+}

packages/models/src/typebot/index.ts

@@ -0,0 +1,4 @@
+export * from './typebot'
+export * from './steps'
+export * from './theme'
+export * from './settings'