♻️ Normalize data

2022-01-06 09:40:56 +01:00
parent 6c1e0fd345
commit 9fa4c7dffa
114 changed files with 1545 additions and 1632 deletions
--- a/apps/builder/components/analytics/StatsCards.tsx
+++ b/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 = ({
--- a/apps/builder/components/analytics/graph/AnalyticsGraph.tsx
+++ b/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 ?? []).map((block) => (
-          <BlockNode block={block} key={block.id} />
+        {typebot.blocks.allIds.map((blockId) => (
+          <BlockNode block={typebot.blocks.byId[blockId]} key={blockId} />
        ))}
      </Flex>
    </Flex>
--- a/apps/builder/components/analytics/graph/Edges/DropOffEdge.tsx
+++ b/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" />
--- a/apps/builder/components/analytics/graph/Edges/Edge.tsx
+++ b/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(
-      (b) => b?.id === step.target.blockId
-    ) as Block
+    if (!typebot) return {}
+    const step = typebot.steps.byId[stepId]
+    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(
-        (b) => b?.id === step.blockId
-      ),
+      sourceBlock,
      targetBlock,
      targetStepIndex,
    }
-  }, [
-    blocks,
-    startBlock,
-    step.blockId,
-    step.target.blockId,
-    step.target.stepId,
-  ])
+  }, [stepId, typebot])

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

  return (
    <path
--- a/apps/builder/components/analytics/graph/Edges/Edges.tsx
+++ b/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(() => {
-    if (!startBlock) return []
-    return [
-      ...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
-      ...((blocks ?? [])
-        .flatMap((b) => b.steps)
-        .filter((s) => s.target) as StepWithTarget[]),
-    ]
-  }, [blocks, startBlock])
+
+  const stepIdsWithTarget: string[] = useMemo(() => {
+    if (!typebot) return []
+    return typebot.steps.allIds.filter((stepId) =>
+      isDefined(typebot.steps.byId[stepId].target)
+    )
+  }, [typebot])

  return (
    <>
@ -32,8 +29,8 @@ export const Edges = ({ answersCounts }: Props) => {
        left="0"
        top="0"
      >
-        {stepsWithTarget.map((step) => (
-          <Edge key={step.id} step={step} />
+        {stepIdsWithTarget.map((stepId) => (
+          <Edge key={stepId} stepId={stepId} />
        ))}
        <marker
          id={'arrow'}
--- a/apps/builder/components/analytics/graph/blocks/BlockNode.tsx
+++ b/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>
  )
 }
--- a/apps/builder/components/analytics/graph/blocks/DropOffBlock.tsx
+++ b/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
-      .filter(
-        (a) =>
-          [typebot.startBlock, ...typebot.blocks].find((b) =>
-            (b as Block).steps.find((s) => s.target?.blockId === blockId)
-          )?.id === a.blockId
+    const previousBlockIds = typebot.blocks.allIds.filter(() =>
+      typebot.steps.allIds.find(
+        (sId) => typebot.steps.byId[sId].target?.blockId === 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])

--- a/apps/builder/components/analytics/graph/blocks/StartBlockNode.tsx
+++ b/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>
-  )
-}
--- a/apps/builder/components/analytics/graph/blocks/StepsList.tsx
+++ b/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 = ({
-  steps,
-}: {
-  blockId: string
-  steps: Step[] | [StartStep]
-}) => {
+export const StepsList = ({ stepIds }: { stepIds: string[] }) => {
+  const { typebot } = useTypebot()
  return (
    <Stack spacing={1} transition="none">
      <Flex h={'2px'} bgColor={'gray.400'} visibility={'hidden'} rounded="lg" />
-      {steps.map((step) => (
-        <Stack key={step.id} spacing={1}>
-          <StepNodeOverlay key={step.id} step={step} />
-          <Flex
-            h={'2px'}
-            bgColor={'gray.400'}
-            visibility={'hidden'}
-            rounded="lg"
-          />
-        </Stack>
-      ))}
+      {typebot &&
+        stepIds.map((stepId) => (
+          <Stack key={stepId} spacing={1}>
+            <StepNodeOverlay step={typebot?.steps.byId[stepId]} />
+            <Flex
+              h={'2px'}
+              bgColor={'gray.400'}
+              visibility={'hidden'}
+              rounded="lg"
+            />
+          </Stack>
+        ))}
    </Stack>
  )
 }
--- a/apps/builder/components/board/StepTypesList/StepCard.tsx
+++ b/apps/builder/components/board/StepTypesList/StepCard.tsx
@ -1,5 +1,5 @@
 import { Button, ButtonProps, Flex, HStack } from '@chakra-ui/react'
-import { StepType } from 'bot-engine'
+import { StepType } from 'models'
 import { useDnd } from 'contexts/DndContext'
 import React, { useEffect, useState } from 'react'
 import { StepIcon } from './StepIcon'
--- a/apps/builder/components/board/StepTypesList/StepIcon.tsx
+++ b/apps/builder/components/board/StepTypesList/StepIcon.tsx
@ -1,5 +1,5 @@
 import { ChatIcon, FlagIcon, TextIcon } from 'assets/icons'
-import { StepType } from 'bot-engine'
+import { StepType } from 'models'
 import React from 'react'

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

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

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

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

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

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

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

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

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

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

 export const StepContent = (props: Step | StartStep) => {
  switch (props.type) {
--- a/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
@ -1,6 +1,6 @@
 import { Box, Flex, HStack, useEventListener } from '@chakra-ui/react'
 import React, { useEffect, useMemo, useState } from 'react'
-import { Block, StartStep, Step, StepType } from 'bot-engine'
+import { Block, Step, StepType } from 'models'
 import { SourceEndpoint } from './SourceEndpoint'
 import { useGraph } from 'contexts/GraphContext'
 import { StepIcon } from 'components/board/StepTypesList/StepIcon'
@ -8,7 +8,7 @@ import { isDefined } from 'utils'
 import { Coordinates } from '@dnd-kit/core/dist/types'
 import { TextEditor } from './TextEditor/TextEditor'
 import { StepContent } from './StepContent'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { ContextMenu } from 'components/shared/ContextMenu'
 import { StepNodeContextMenu } from './RightClickMenu'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

--- a/apps/builder/components/dashboard/FolderContent.tsx
+++ b/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,
--- a/apps/builder/components/dashboard/FolderContent/TypebotButton.tsx
+++ b/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
--- a/apps/builder/components/dashboard/FolderContent/TypebotButtonOverlay.tsx
+++ b/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
--- a/apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx
+++ b/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'
--- a/apps/builder/components/settings/SettingsContent.tsx
+++ b/apps/builder/components/settings/SettingsContent.tsx
@ -1,17 +1,17 @@
 import { Flex, Stack } from '@chakra-ui/react'
-import { TypingEmulationSettings } from 'bot-engine'
-import { useTypebot } from 'contexts/TypebotContext'
+import { TypingEmulationSettings } from 'models'
+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">
--- a/apps/builder/components/settings/TypingEmulation.tsx
+++ b/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'

--- a/apps/builder/components/share/ShareContent.tsx
+++ b/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">
--- a/apps/builder/components/shared/TypebotHeader/SaveButton.tsx
+++ b/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 = () => {
--- a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
+++ b/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'
--- a/apps/builder/components/shared/buttons/PublishButton.tsx
+++ b/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()
--- a/apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundContent.tsx
+++ b/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'

--- a/apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundSelector.tsx
+++ b/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'
--- a/apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundTypeRadioButtons.tsx
+++ b/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 = {
--- a/apps/builder/components/theme/GeneralContent/GeneralContent.tsx
+++ b/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 { useTypebot } from 'contexts/TypebotContext'
+import { Background } from 'models'
+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({
-      ...typebot.theme,
-      general: { ...typebot.theme.general, font },
+    updateTypebot({
+      theme: {
+        ...typebot.theme,
+        general: { ...typebot.theme.general, font },
+      },
    })
  }

  const handleBackgroundChange = (background: Background) => {
    if (!typebot) return
-    updateTheme({
-      ...typebot.theme,
-      general: { ...typebot.theme.general, background },
+    updateTypebot({
+      theme: {
+        ...typebot.theme,
+        general: { ...typebot.theme.general, background },
+      },
    })
  }
  return (
--- a/apps/builder/components/theme/ThemeContent.tsx
+++ b/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'