Add Graph draft

apps/builder/components/board/Board.tsx

@@ -0,0 +1,14 @@
+import { Flex } from '@chakra-ui/react'
+import React from 'react'
+import StepsList from './StepTypesList'
+import Graph from './graph/Graph'
+import { DndContext } from 'contexts/DndContext'
+
+export const Board = () => (
+  <Flex flex="1" pos="relative" bgColor="gray.50">
+    <DndContext>
+      <StepsList />
+      <Graph />
+    </DndContext>
+  </Flex>
+)

apps/builder/components/board/StepTypesList/StepCard.tsx

@@ -0,0 +1,70 @@
+import { Button, ButtonProps, Flex, HStack } from '@chakra-ui/react'
+import { StepType } from 'bot-engine'
+import { useDnd } from 'contexts/DndContext'
+import React, { useEffect, useState } from 'react'
+import { StepIcon } from './StepIcon'
+import { StepLabel } from './StepLabel'
+
+export const StepCard = ({
+  type,
+  onMouseDown,
+}: {
+  type: StepType
+  onMouseDown: (e: React.MouseEvent, type: StepType) => void
+}) => {
+  const { draggedStepType } = useDnd()
+  const [isMouseDown, setIsMouseDown] = useState(false)
+
+  useEffect(() => {
+    setIsMouseDown(draggedStepType === type)
+  }, [draggedStepType, type])
+
+  const handleMouseDown = (e: React.MouseEvent) => onMouseDown(e, type)
+
+  return (
+    <Flex pos="relative">
+      <Button
+        as={HStack}
+        borderWidth="1px"
+        rounded="lg"
+        flex="1"
+        cursor={'grab'}
+        colorScheme="gray"
+        opacity={isMouseDown ? '0.4' : '1'}
+        onMouseDown={handleMouseDown}
+      >
+        {!isMouseDown && (
+          <>
+            <StepIcon type={type} />
+            <StepLabel type={type} />
+          </>
+        )}
+      </Button>
+    </Flex>
+  )
+}
+
+export const StepCardOverlay = ({
+  type,
+  ...props
+}: Omit<ButtonProps, 'type'> & { type: StepType }) => {
+  return (
+    <Button
+      as={HStack}
+      borderWidth="1px"
+      rounded="lg"
+      cursor={'grab'}
+      colorScheme="gray"
+      w="147px"
+      pos="fixed"
+      top="0"
+      left="0"
+      transition="none"
+      pointerEvents="none"
+      {...props}
+    >
+      <StepIcon type={type} />
+      <StepLabel type={type} />
+    </Button>
+  )
+}

apps/builder/components/board/StepTypesList/StepIcon.tsx

@@ -0,0 +1,25 @@
+import { CalendarIcon, FlagIcon, ImageIcon, TextIcon } from 'assets/icons'
+import { StepType } from 'bot-engine'
+import React from 'react'
+
+type StepIconProps = { type: StepType }
+
+export const StepIcon = ({ type }: StepIconProps) => {
+  switch (type) {
+    case StepType.TEXT: {
+      return <TextIcon />
+    }
+    case StepType.IMAGE: {
+      return <ImageIcon />
+    }
+    case StepType.DATE_PICKER: {
+      return <CalendarIcon />
+    }
+    case StepType.START: {
+      return <FlagIcon />
+    }
+    default: {
+      return <TextIcon />
+    }
+  }
+}

apps/builder/components/board/StepTypesList/StepLabel.tsx

@@ -0,0 +1,22 @@
+import { Text } from '@chakra-ui/react'
+import { StepType } from 'bot-engine'
+import React from 'react'
+
+type Props = { type: StepType }
+
+export const StepLabel = ({ type }: Props) => {
+  switch (type) {
+    case StepType.TEXT: {
+      return <Text>Text</Text>
+    }
+    case StepType.IMAGE: {
+      return <Text>Image</Text>
+    }
+    case StepType.DATE_PICKER: {
+      return <Text>Date</Text>
+    }
+    default: {
+      return <></>
+    }
+  }
+}

apps/builder/components/board/StepTypesList/StepTypesList.tsx

@@ -0,0 +1,104 @@
+import {
+  Stack,
+  Input,
+  Text,
+  SimpleGrid,
+  useEventListener,
+} from '@chakra-ui/react'
+import { StepType } from 'bot-engine'
+import { useDnd } from 'contexts/DndContext'
+import React, { useState } from 'react'
+import { StepCard, StepCardOverlay } from './StepCard'
+
+export const stepListItems: {
+  bubbles: { type: StepType }[]
+  inputs: { type: StepType }[]
+} = {
+  bubbles: [{ type: StepType.TEXT }, { type: StepType.IMAGE }],
+  inputs: [{ type: StepType.DATE_PICKER }],
+}
+
+export const StepTypesList = () => {
+  const { setDraggedStepType, draggedStepType } = useDnd()
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+  })
+  const [relativeCoordinates, setRelativeCoordinates] = useState({ x: 0, y: 0 })
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!draggedStepType) return
+    const { clientX, clientY } = event
+    setPosition({
+      ...position,
+      x: clientX - relativeCoordinates.x,
+      y: clientY - relativeCoordinates.y,
+    })
+  }
+  useEventListener('mousemove', handleMouseMove)
+
+  const handleMouseDown = (e: React.MouseEvent, type: StepType) => {
+    const element = e.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const relativeX = e.clientX - rect.left
+    const relativeY = e.clientY - rect.top
+    setPosition({ x: e.clientX - relativeX, y: e.clientY - relativeY })
+    setRelativeCoordinates({ x: relativeX, y: relativeY })
+    setDraggedStepType(type)
+  }
+
+  const handleMouseUp = () => {
+    if (!draggedStepType) return
+    setDraggedStepType(undefined)
+    setPosition({
+      x: 0,
+      y: 0,
+    })
+  }
+  useEventListener('mouseup', handleMouseUp)
+
+  return (
+    <Stack
+      w="320px"
+      pos="absolute"
+      left="10px"
+      top="20px"
+      h="calc(100vh - 100px)"
+      rounded="lg"
+      shadow="lg"
+      borderWidth="1px"
+      zIndex="10"
+      py="4"
+      px="2"
+      bgColor="white"
+    >
+      <Input placeholder="Search..." />
+      <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+        Bubbles
+      </Text>
+      <SimpleGrid columns={2} spacing="2">
+        {stepListItems.bubbles.map((props) => (
+          <StepCard key={props.type} onMouseDown={handleMouseDown} {...props} />
+        ))}
+      </SimpleGrid>
+
+      <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+        Inputs
+      </Text>
+      <SimpleGrid columns={2} spacing="2">
+        {stepListItems.inputs.map((props) => (
+          <StepCard key={props.type} onMouseDown={handleMouseDown} {...props} />
+        ))}
+      </SimpleGrid>
+      {draggedStepType && (
+        <StepCardOverlay
+          type={draggedStepType}
+          onMouseUp={handleMouseUp}
+          style={{
+            transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+          }}
+        />
+      )}
+    </Stack>
+  )
+}

apps/builder/components/board/StepTypesList/index.tsx

@@ -0,0 +1 @@
+export { StepTypesList as default } from './StepTypesList'

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

@@ -0,0 +1,112 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Stack,
+  useEventListener,
+} from '@chakra-ui/react'
+import React, { useEffect, useRef, useState } from 'react'
+import { Block, StartBlock } from 'bot-engine'
+import { useGraph } from 'contexts/GraphContext'
+import { useDnd } from 'contexts/DndContext'
+import { StepsList } from './StepsList'
+import { isNotDefined } from 'services/utils'
+
+export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
+  const {
+    updateBlockPosition,
+    addNewStepToBlock,
+    connectingIds,
+    setConnectingIds,
+  } = useGraph()
+  const { draggedStep, draggedStepType, setDraggedStepType, setDraggedStep } =
+    useDnd()
+  const blockRef = useRef<HTMLDivElement | null>(null)
+  const [isMouseDown, setIsMouseDown] = useState(false)
+  const [titleValue, setTitleValue] = useState(block.title)
+  const [showSortPlaceholders, setShowSortPlaceholders] = useState(false)
+  const [isConnecting, setIsConnecting] = useState(false)
+
+  useEffect(() => {
+    setIsConnecting(
+      connectingIds?.target?.blockId === block.id &&
+        isNotDefined(connectingIds.target?.stepId)
+    )
+  }, [block.id, connectingIds])
+
+  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)
+
+  const handleMouseEnter = () => {
+    if (draggedStepType || draggedStep) setShowSortPlaceholders(true)
+    if (connectingIds)
+      setConnectingIds({ ...connectingIds, target: { blockId: block.id } })
+  }
+
+  const handleMouseLeave = () => {
+    setShowSortPlaceholders(false)
+    if (connectingIds) setConnectingIds({ ...connectingIds, target: undefined })
+  }
+
+  const handleStepDrop = (index: number) => {
+    setShowSortPlaceholders(false)
+    if (draggedStepType) {
+      addNewStepToBlock(block.id, draggedStepType, index)
+      setDraggedStepType(undefined)
+    }
+    if (draggedStep) {
+      addNewStepToBlock(block.id, draggedStep, index)
+      setDraggedStep(undefined)
+    }
+  }
+
+  return (
+    <Stack
+      p="4"
+      rounded="lg"
+      bgColor="blue.50"
+      borderWidth="2px"
+      borderColor={isConnecting ? '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}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      ref={blockRef}
+    >
+      <Editable value={titleValue} onChange={handleTitleChange}>
+        <EditablePreview _hover={{ bgColor: 'blue.100' }} px="1" />
+        <EditableInput minW="0" px="1" />
+      </Editable>
+      <StepsList
+        blockId={block.id}
+        steps={block.steps}
+        showSortPlaceholders={showSortPlaceholders}
+        onMouseUp={handleStepDrop}
+      />
+    </Stack>
+  )
+}

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

@@ -0,0 +1,66 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Stack,
+  useEventListener,
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { StartBlock } from 'bot-engine'
+import { useGraph } from 'contexts/GraphContext'
+import { StepNode } from './StepNode'
+
+export const StartBlockNode = ({ block }: { block: StartBlock }) => {
+  const { setStartBlock } = useGraph()
+  const [isMouseDown, setIsMouseDown] = useState(false)
+  const [titleValue, setTitleValue] = useState(block.title)
+
+  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
+
+    setStartBlock({
+      ...block,
+      graphCoordinates: {
+        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="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" />
+        <EditableInput minW="0" px="1" />
+      </Editable>
+      <StepNode step={block.steps[0]} isConnectable={true} />
+    </Stack>
+  )
+}

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

@@ -0,0 +1,26 @@
+import { Box, BoxProps } from '@chakra-ui/react'
+import React, { MouseEvent } from 'react'
+
+export const SourceEndpoint = ({
+  onConnectionDragStart,
+  ...props
+}: BoxProps & {
+  onConnectionDragStart?: () => void
+}) => {
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+    if (!onConnectionDragStart) return
+    e.stopPropagation()
+    onConnectionDragStart()
+  }
+
+  return (
+    <Box
+      boxSize="15px"
+      rounded="full"
+      bgColor="gray.500"
+      onMouseDown={handleMouseDown}
+      cursor="pointer"
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,205 @@
+import { Box, Flex, HStack, StackProps, Text } from '@chakra-ui/react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Block, StartStep, Step, StepType } from 'bot-engine'
+import { SourceEndpoint } from './SourceEndpoint'
+import { useGraph } from 'contexts/GraphContext'
+import { StepIcon } from 'components/board/StepTypesList/StepIcon'
+import { isDefined } from 'services/utils'
+
+export const StepNode = ({
+  step,
+  isConnectable,
+  onMouseMoveBottomOfElement,
+  onMouseMoveTopOfElement,
+  onMouseDown,
+}: {
+  step: Step | StartStep
+  isConnectable: boolean
+  onMouseMoveBottomOfElement?: () => void
+  onMouseMoveTopOfElement?: () => void
+  onMouseDown?: (e: React.MouseEvent, step: Step) => void
+}) => {
+  const stepRef = useRef<HTMLDivElement | null>(null)
+  const {
+    setConnectingIds,
+    removeStepFromBlock,
+    blocks,
+    connectingIds,
+    startBlock,
+  } = useGraph()
+  const [isConnecting, setIsConnecting] = useState(false)
+
+  useEffect(() => {
+    setIsConnecting(
+      connectingIds?.target?.blockId === step.blockId &&
+        connectingIds?.target?.stepId === step.id
+    )
+  }, [connectingIds, step.blockId, step.id])
+
+  const handleMouseEnter = () => {
+    if (connectingIds?.target)
+      setConnectingIds({
+        ...connectingIds,
+        target: { ...connectingIds.target, stepId: step.id },
+      })
+  }
+
+  const handleMouseLeave = () => {
+    if (connectingIds?.target)
+      setConnectingIds({
+        ...connectingIds,
+        target: { ...connectingIds.target, stepId: undefined },
+      })
+  }
+
+  const handleConnectionDragStart = () => {
+    setConnectingIds({ blockId: step.blockId, stepId: step.id })
+  }
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!onMouseDown) return
+    e.stopPropagation()
+    onMouseDown(e, step as Step)
+    removeStepFromBlock(step.blockId, step.id)
+  }
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!onMouseMoveBottomOfElement || !onMouseMoveTopOfElement) return
+    const element = event.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const y = event.clientY - rect.top
+    if (y > rect.height / 2) onMouseMoveBottomOfElement()
+    else onMouseMoveTopOfElement()
+  }
+
+  const connectedStubPosition: 'right' | 'left' | undefined = useMemo(() => {
+    const currentBlock = [startBlock, ...blocks].find(
+      (b) => b?.id === step.blockId
+    )
+    const isDragginConnectorFromCurrentBlock =
+      connectingIds?.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
+    return targetedBlock
+      ? targetedBlock.graphCoordinates.x <
+        (currentBlock as Block).graphCoordinates.x
+        ? 'left'
+        : 'right'
+      : undefined
+  }, [
+    blocks,
+    connectingIds?.blockId,
+    connectingIds?.target?.blockId,
+    step.blockId,
+    step.target?.blockId,
+    startBlock,
+  ])
+
+  return (
+    <Flex
+      pos="relative"
+      ref={stepRef}
+      onMouseMove={handleMouseMove}
+      onMouseDown={handleMouseDown}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {connectedStubPosition === 'left' && (
+        <Box
+          h="2px"
+          pos="absolute"
+          left="-18px"
+          top="25px"
+          w="18px"
+          bgColor="blue.500"
+        />
+      )}
+      <HStack
+        flex="1"
+        userSelect="none"
+        p="3"
+        borderWidth="2px"
+        borderColor={isConnecting ? 'blue.400' : 'gray.400'}
+        rounded="lg"
+        cursor={'grab'}
+        bgColor="white"
+      >
+        <StepIcon type={step.type} />
+        <StepContent {...step} />
+        {isConnectable && (
+          <SourceEndpoint
+            onConnectionDragStart={handleConnectionDragStart}
+            pos="absolute"
+            right="20px"
+          />
+        )}
+      </HStack>
+
+      {isDefined(connectedStubPosition) && (
+        <Box
+          h="2px"
+          pos="absolute"
+          right={connectedStubPosition === 'left' ? undefined : '-18px'}
+          left={connectedStubPosition === 'left' ? '-18px' : undefined}
+          top="25px"
+          w="18px"
+          bgColor="gray.500"
+        />
+      )}
+    </Flex>
+  )
+}
+
+export const StepContent = (props: Step | StartStep) => {
+  switch (props.type) {
+    case StepType.TEXT: {
+      return (
+        <Text opacity={props.content === '' ? '0.5' : '1'}>
+          {props.content === '' ? 'Type text...' : props.content}
+        </Text>
+      )
+    }
+    case StepType.DATE_PICKER: {
+      return (
+        <Text opacity={props.content === '' ? '0.5' : '1'}>
+          {props.content === '' ? 'Pick a date...' : props.content}
+        </Text>
+      )
+    }
+    case StepType.START: {
+      return <Text>{props.label}</Text>
+    }
+    default: {
+      return <Text>No input</Text>
+    }
+  }
+}
+
+export const StepNodeOverlay = ({
+  step,
+  ...props
+}: { step: Step } & StackProps) => {
+  return (
+    <HStack
+      p="3"
+      borderWidth="1px"
+      rounded="lg"
+      bgColor="white"
+      cursor={'grab'}
+      pos="fixed"
+      top="0"
+      left="0"
+      w="264px"
+      pointerEvents="none"
+      {...props}
+    >
+      <StepIcon type={step.type} />
+      <StepContent {...step} />
+    </HStack>
+  )
+}

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

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

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

@@ -0,0 +1,129 @@
+import { useEventListener, Stack, Flex, Portal } from '@chakra-ui/react'
+import { StartStep, Step } from 'bot-engine'
+import { useDnd } from 'contexts/DndContext'
+import { useState } from 'react'
+import { StepNode, StepNodeOverlay } from './StepNode'
+
+export const StepsList = ({
+  blockId,
+  steps,
+  showSortPlaceholders,
+  onMouseUp,
+}: {
+  blockId: string
+  steps: Step[] | [StartStep]
+  showSortPlaceholders: boolean
+  onMouseUp: (index: number) => void
+}) => {
+  const { draggedStep, setDraggedStep, draggedStepType } = useDnd()
+  const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
+    number | undefined
+  >()
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+  })
+  const [relativeCoordinates, setRelativeCoordinates] = useState({ x: 0, y: 0 })
+
+  const handleStepMove = (event: MouseEvent) => {
+    if (!draggedStep) return
+    const { clientX, clientY } = event
+    setPosition({
+      ...position,
+      x: clientX - relativeCoordinates.x,
+      y: clientY - relativeCoordinates.y,
+    })
+  }
+  useEventListener('mousemove', handleStepMove)
+
+  const handleMouseMove = (event: React.MouseEvent) => {
+    if (!draggedStep) return
+    const element = event.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const y = event.clientY - rect.top
+    if (y < 20) setExpandedPlaceholderIndex(0)
+  }
+
+  const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (expandedPlaceholderIndex === undefined) return
+    e.stopPropagation()
+    setExpandedPlaceholderIndex(undefined)
+    onMouseUp(expandedPlaceholderIndex)
+  }
+
+  const handleStepMouseDown = (e: React.MouseEvent, step: Step) => {
+    const element = e.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const relativeX = e.clientX - rect.left
+    const relativeY = e.clientY - rect.top
+    setPosition({ x: e.clientX - relativeX, y: e.clientY - relativeY })
+    setRelativeCoordinates({ x: relativeX, y: relativeY })
+    setDraggedStep(step)
+  }
+
+  const handleMouseOnTopOfStep = (stepIndex: number) => {
+    if (!draggedStep && !draggedStepType) return
+    setExpandedPlaceholderIndex(stepIndex === 0 ? 0 : stepIndex)
+  }
+
+  const handleMouseOnBottomOfStep = (stepIndex: number) => {
+    if (!draggedStep && !draggedStepType) return
+    setExpandedPlaceholderIndex(stepIndex + 1)
+  }
+  return (
+    <Stack
+      spacing={1}
+      onMouseUpCapture={handleMouseUp}
+      onMouseMove={handleMouseMove}
+      transition="none"
+    >
+      <Flex
+        h={
+          showSortPlaceholders && expandedPlaceholderIndex === 0
+            ? '50px'
+            : '2px'
+        }
+        bgColor={'gray.400'}
+        visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+        rounded="lg"
+        transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+      />
+      {steps.map((step, idx) => (
+        <Stack key={step.id} spacing={1}>
+          <StepNode
+            key={step.id}
+            step={step}
+            isConnectable={steps.length - 1 === idx}
+            onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
+            onMouseMoveBottomOfElement={() => {
+              handleMouseOnBottomOfStep(idx)
+            }}
+            onMouseDown={handleStepMouseDown}
+          />
+          <Flex
+            h={
+              showSortPlaceholders && expandedPlaceholderIndex === idx + 1
+                ? '50px'
+                : '2px'
+            }
+            bgColor={'gray.400'}
+            visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+            rounded="lg"
+            transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+          />
+        </Stack>
+      ))}
+      {draggedStep && draggedStep.blockId === blockId && (
+        <Portal>
+          <StepNodeOverlay
+            step={draggedStep}
+            onMouseUp={handleMouseUp}
+            style={{
+              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+            }}
+          />
+        </Portal>
+      )}
+    </Stack>
+  )
+}

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

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

apps/builder/components/board/graph/Edges/DrawingEdge.tsx

@@ -0,0 +1,126 @@
+import { useEventListener } from '@chakra-ui/hooks'
+import { Coordinates } from '@dnd-kit/core/dist/types'
+import { Block } from 'bot-engine'
+import {
+  blockWidth,
+  firstStepOffsetY,
+  spaceBetweenSteps,
+  stubLength,
+  useGraph,
+} from 'contexts/GraphContext'
+import React, { useMemo, useState } from 'react'
+import {
+  computeFlowChartConnectorPath,
+  getAnchorsPosition,
+} from 'services/graph'
+import { roundCorners } from 'svg-round-corners'
+
+export const DrawingEdge = () => {
+  const {
+    graphPosition,
+    setConnectingIds,
+    blocks,
+    connectingIds,
+    addTarget,
+    startBlock,
+  } = useGraph()
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+
+  const sourceBlock = useMemo(
+    () => [startBlock, ...blocks].find((b) => b?.id === connectingIds?.blockId),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [connectingIds]
+  )
+
+  const path = useMemo(() => {
+    if (!sourceBlock) return ``
+    if (connectingIds?.target) {
+      const targetedBlock = blocks.find(
+        (b) => b.id === connectingIds.target?.blockId
+      ) as Block
+      const targetedStepIndex = connectingIds.target.stepId
+        ? targetedBlock.steps.findIndex(
+            (s) => s.id === connectingIds.target?.stepId
+          )
+        : undefined
+      const anchorsPosition = getAnchorsPosition(
+        sourceBlock,
+        targetedBlock,
+        sourceBlock?.steps.findIndex((s) => s.id === connectingIds?.stepId),
+        targetedStepIndex
+      )
+      return computeFlowChartConnectorPath(anchorsPosition)
+    }
+    return computeConnectingEdgePath(
+      sourceBlock?.graphCoordinates,
+      mousePosition,
+      sourceBlock.steps.findIndex((s) => s.id === connectingIds?.stepId)
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sourceBlock, mousePosition])
+
+  const handleMouseMove = (e: MouseEvent) => {
+    setMousePosition({
+      x: e.clientX - graphPosition.x,
+      y: e.clientY - graphPosition.y,
+    })
+  }
+  useEventListener('mousemove', handleMouseMove)
+  useEventListener('mouseup', () => {
+    if (connectingIds?.target) addTarget(connectingIds)
+    setConnectingIds(null)
+  })
+
+  if ((mousePosition.x === 0 && mousePosition.y === 0) || !connectingIds)
+    return <></>
+  return (
+    <path
+      d={path}
+      stroke="#718096"
+      strokeWidth="2px"
+      markerEnd="url(#arrow)"
+      fill="none"
+    />
+  )
+}
+
+const computeConnectingEdgePath = (
+  blockPosition: Coordinates,
+  mousePosition: Coordinates,
+  stepIndex: number
+): string => {
+  const sourcePosition = {
+    x:
+      mousePosition.x - blockPosition.x > blockWidth / 2
+        ? blockPosition.x + blockWidth - 40
+        : blockPosition.x + 40,
+    y: blockPosition.y + firstStepOffsetY + stepIndex * spaceBetweenSteps,
+  }
+  const sourceType =
+    mousePosition.x - blockPosition.x > blockWidth / 2 ? 'right' : 'left'
+  const segments = computeThreeSegments(
+    sourcePosition,
+    mousePosition,
+    sourceType
+  )
+  return roundCorners(
+    `M${sourcePosition.x},${sourcePosition.y} ${segments}`,
+    10
+  ).path
+}
+
+const computeThreeSegments = (
+  sourcePosition: Coordinates,
+  targetPosition: Coordinates,
+  sourceType: 'right' | 'left'
+) => {
+  const segments = []
+  const firstSegmentX =
+    sourceType === 'right'
+      ? sourcePosition.x + stubLength
+      : sourcePosition.x - stubLength
+  segments.push(`L${firstSegmentX},${sourcePosition.y}`)
+  segments.push(`L${firstSegmentX},${targetPosition.y}`)
+  segments.push(`L${targetPosition.x},${targetPosition.y}`)
+  return segments.join(' ')
+}

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

@@ -0,0 +1,63 @@
+import { Block, StartStep, Step, Target } from 'bot-engine'
+import { Coordinates, useGraph } from 'contexts/GraphContext'
+import React, { useMemo } from 'react'
+import {
+  getAnchorsPosition,
+  computeFlowChartConnectorPath,
+} from 'services/graph'
+
+export type AnchorsPositionProps = {
+  sourcePosition: Coordinates
+  targetPosition: Coordinates
+  sourceType: 'right' | 'left'
+  totalSegments: number
+}
+
+export type StepWithTarget = Omit<Step | StartStep, 'target'> & {
+  target: Target
+}
+
+export const Edge = ({ step }: { step: StepWithTarget }) => {
+  const { blocks, startBlock } = useGraph()
+
+  const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
+    const targetBlock = blocks.find(
+      (b) => b?.id === step.target.blockId
+    ) as Block
+    const targetStepIndex = step.target.stepId
+      ? targetBlock.steps.findIndex((s) => s.id === step.target.stepId)
+      : undefined
+    return {
+      sourceBlock: [startBlock, ...blocks].find((b) => b?.id === step.blockId),
+      targetBlock,
+      targetStepIndex,
+    }
+  }, [
+    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),
+      targetStepIndex
+    )
+    return computeFlowChartConnectorPath(anchorsPosition)
+  }, [sourceBlock, step.id, targetBlock, targetStepIndex])
+
+  return (
+    <path
+      d={path}
+      stroke="#718096"
+      strokeWidth="2px"
+      markerEnd="url(#arrow)"
+      fill="none"
+    />
+  )
+}

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

@@ -0,0 +1,49 @@
+import { chakra } from '@chakra-ui/system'
+import { useGraph } from 'contexts/GraphContext'
+import React, { useMemo } from 'react'
+import { DrawingEdge } from './DrawingEdge'
+import { Edge, StepWithTarget } from './Edge'
+
+export const Edges = () => {
+  const { blocks, startBlock } = useGraph()
+  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])
+
+  return (
+    <chakra.svg
+      width="full"
+      height="full"
+      overflow="visible"
+      pos="absolute"
+      left="0"
+      top="0"
+    >
+      <DrawingEdge />
+      {stepsWithTarget.map((step) => (
+        <Edge key={step.id} step={step} />
+      ))}
+      <marker
+        id={'arrow'}
+        refX="8"
+        refY="4"
+        orient="auto"
+        viewBox="0 0 20 20"
+        markerUnits="userSpaceOnUse"
+        markerWidth="20"
+        markerHeight="20"
+      >
+        <path
+          d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
+          fill="#718096"
+        />
+      </marker>
+    </chakra.svg>
+  )
+}

apps/builder/components/board/graph/Edges/index.tsx

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

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

@@ -0,0 +1,91 @@
+import { Flex, useEventListener } from '@chakra-ui/react'
+import React, { useRef, useMemo, useEffect } from 'react'
+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'
+
+const Graph = () => {
+  const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
+    useDnd()
+  const graphRef = useRef<HTMLDivElement | null>(null)
+  const graphContainerRef = useRef<HTMLDivElement | null>(null)
+  const { typebot } = useTypebot()
+  const {
+    blocks,
+    setBlocks,
+    graphPosition,
+    setGraphPosition,
+    addNewBlock,
+    setStartBlock,
+    startBlock,
+  } = useGraph()
+  const transform = useMemo(
+    () =>
+      `translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
+    [graphPosition]
+  )
+
+  useEffect(() => {
+    if (!typebot) return
+    setBlocks(typebot.blocks)
+    setStartBlock(typebot.startBlock)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [typebot?.blocks])
+
+  const handleMouseWheel = (e: WheelEvent) => {
+    e.preventDefault()
+    const isPinchingTrackpad = e.ctrlKey
+    if (isPinchingTrackpad) {
+      const scale = graphPosition.scale - e.deltaY * 0.01
+      if (scale <= 0.2 || scale >= 1) return
+      setGraphPosition({
+        ...graphPosition,
+        scale,
+      })
+    } else
+      setGraphPosition({
+        ...graphPosition,
+        x: graphPosition.x - e.deltaX,
+        y: graphPosition.y - e.deltaY,
+      })
+  }
+  useEventListener('wheel', handleMouseWheel, graphContainerRef.current)
+
+  const handleMouseUp = (e: MouseEvent) => {
+    if (!draggedStep && !draggedStepType) return
+    addNewBlock({
+      step: draggedStep,
+      type: draggedStepType,
+      x: e.x - graphPosition.x - blockWidth / 3,
+      y: e.y - graphPosition.y - 20,
+    })
+    setDraggedStep(undefined)
+    setDraggedStepType(undefined)
+  }
+  useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
+
+  if (!typebot) return <></>
+  return (
+    <Flex ref={graphContainerRef} pos="relative" flex="1" h="full">
+      <Flex
+        ref={graphRef}
+        flex="1"
+        h="full"
+        style={{
+          transform,
+        }}
+      >
+        <Edges />
+        {startBlock && <StartBlockNode block={startBlock} />}
+        {blocks.map((block) => (
+          <BlockNode block={block} key={block.id} />
+        ))}
+      </Flex>
+    </Flex>
+  )
+}
+
+export default Graph