Add Graph draft

apps/builder/assets/icons.tsx

@@ -70,3 +70,35 @@ export const FolderPlusIcon = (props: IconProps) => (
     <line x1="9" y1="14" x2="15" y2="14"></line>
   </Icon>
 )
+
+export const TextIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <polyline points="4 7 4 4 20 4 20 7"></polyline>
+    <line x1="9" y1="20" x2="15" y2="20"></line>
+    <line x1="12" y1="4" x2="12" y2="20"></line>
+  </Icon>
+)
+
+export const ImageIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+    <circle cx="8.5" cy="8.5" r="1.5"></circle>
+    <polyline points="21 15 16 10 5 21"></polyline>
+  </Icon>
+)
+
+export const CalendarIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+    <line x1="16" y1="2" x2="16" y2="6"></line>
+    <line x1="8" y1="2" x2="8" y2="6"></line>
+    <line x1="3" y1="10" x2="21" y2="10"></line>
+  </Icon>
+)
+
+export const FlagIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
+    <line x1="4" y1="22" x2="4" y2="15"></line>
+  </Icon>
+)

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

apps/builder/contexts/BoardContext.tsx

@@ -1,59 +0,0 @@
-import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui'
-import {
-  createContext,
-  Dispatch,
-  ReactNode,
-  SetStateAction,
-  useContext,
-  useState,
-} from 'react'
-import { Step } from 'bot-engine'
-
-type Position = { x: number; y: number; scale: number }
-
-const graphPositionDefaultValue = { x: 400, y: 100, scale: 1 }
-
-const graphContext = createContext<{
-  position: Position
-  setGraphPosition: Dispatch<SetStateAction<Position>>
-  plumbInstance?: BrowserJsPlumbInstance
-  setPlumbInstance: Dispatch<SetStateAction<BrowserJsPlumbInstance | undefined>>
-  draggedStep?: Step
-  setDraggedStep: Dispatch<SetStateAction<Step | undefined>>
-}>({
-  position: graphPositionDefaultValue,
-  setGraphPosition: () => {
-    console.log("I'm not instantiated")
-  },
-  setPlumbInstance: () => {
-    console.log("I'm not instantiated")
-  },
-  setDraggedStep: () => {
-    console.log("I'm not instantiated")
-  },
-})
-
-export const GraphProvider = ({ children }: { children: ReactNode }) => {
-  const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
-  const [plumbInstance, setPlumbInstance] = useState<
-    BrowserJsPlumbInstance | undefined
-  >()
-  const [draggedStep, setDraggedStep] = useState<Step | undefined>()
-
-  return (
-    <graphContext.Provider
-      value={{
-        position: graphPosition,
-        setGraphPosition,
-        plumbInstance,
-        setPlumbInstance,
-        draggedStep,
-        setDraggedStep,
-      }}
-    >
-      {children}
-    </graphContext.Provider>
-  )
-}
-
-export const useGraph = () => useContext(graphContext)

apps/builder/contexts/DndContext.tsx

@@ -0,0 +1,39 @@
+import { Step, StepType } from 'bot-engine'
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useState,
+} from 'react'
+
+const dndContext = createContext<{
+  draggedStepType?: StepType
+  setDraggedStepType: Dispatch<SetStateAction<StepType | undefined>>
+  draggedStep?: Step
+  setDraggedStep: Dispatch<SetStateAction<Step | undefined>>
+}>({
+  setDraggedStep: () => console.log("I'm not implemented"),
+  setDraggedStepType: () => console.log("I'm not implemented"),
+})
+
+export const DndContext = ({ children }: { children: ReactNode }) => {
+  const [draggedStep, setDraggedStep] = useState<Step | undefined>()
+  const [draggedStepType, setDraggedStepType] = useState<StepType | undefined>()
+
+  return (
+    <dndContext.Provider
+      value={{
+        draggedStep,
+        setDraggedStep,
+        draggedStepType,
+        setDraggedStepType,
+      }}
+    >
+      {children}
+    </dndContext.Provider>
+  )
+}
+
+export const useDnd = () => useContext(dndContext)

apps/builder/contexts/GraphContext.tsx

@@ -0,0 +1,247 @@
+import { Block, StartBlock, Step, StepType, Target } from 'bot-engine'
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useState,
+} from 'react'
+import { parseNewBlock, parseNewStep } from 'services/graph'
+import { insertItemInList } from 'services/utils'
+
+export const stubLength = 20
+export const blockWidth = 300
+export const blockAnchorsOffset = {
+  left: {
+    x: 0,
+    y: 20,
+  },
+  top: {
+    x: blockWidth / 2,
+    y: 0,
+  },
+  right: {
+    x: blockWidth,
+    y: 20,
+  },
+}
+export const firstStepOffsetY = 88
+export const spaceBetweenSteps = 66
+
+export type Coordinates = { x: number; y: number }
+
+type Position = Coordinates & { scale: number }
+
+export type Anchor = {
+  coordinates: Coordinates
+}
+
+export type Node = Omit<Block, 'steps'> & {
+  steps: (Step & {
+    sourceAnchorsPosition: { left: Coordinates; right: Coordinates }
+  })[]
+}
+
+export type NewBlockPayload = {
+  x: number
+  y: number
+  type?: StepType
+  step?: Step
+}
+
+const graphPositionDefaultValue = { x: 400, y: 100, scale: 1 }
+
+const graphContext = createContext<{
+  graphPosition: Position
+  setGraphPosition: Dispatch<SetStateAction<Position>>
+  connectingIds: { blockId: string; stepId: string; target?: Target } | null
+  setConnectingIds: Dispatch<
+    SetStateAction<{ blockId: string; stepId: string; target?: Target } | null>
+  >
+  startBlock?: StartBlock
+  setStartBlock: Dispatch<SetStateAction<StartBlock | undefined>>
+  blocks: Block[]
+  setBlocks: Dispatch<SetStateAction<Block[]>>
+  addNewBlock: (props: NewBlockPayload) => void
+  updateBlockPosition: (blockId: string, newPositon: Coordinates) => void
+  addNewStepToBlock: (
+    blockId: string,
+    step: StepType | Step,
+    index: number
+  ) => void
+  removeStepFromBlock: (blockId: string, stepId: string) => void
+  addTarget: (connectingIds: {
+    blockId: string
+    stepId: string
+    target?: Target
+  }) => void
+  removeTarget: (connectingIds: { blockId: string; stepId: string }) => void
+}>({
+  graphPosition: graphPositionDefaultValue,
+  setGraphPosition: () => console.log("I'm not instantiated"),
+  connectingIds: null,
+  setConnectingIds: () => console.log("I'm not instantiated"),
+  blocks: [],
+  setBlocks: () => console.log("I'm not instantiated"),
+  updateBlockPosition: () => console.log("I'm not instantiated"),
+  addNewStepToBlock: () => console.log("I'm not instantiated"),
+  addNewBlock: () => console.log("I'm not instantiated"),
+  removeStepFromBlock: () => console.log("I'm not instantiated"),
+  addTarget: () => console.log("I'm not instantiated"),
+  removeTarget: () => console.log("I'm not instantiated"),
+  setStartBlock: () => console.log("I'm not instantiated"),
+})
+
+export const GraphProvider = ({ children }: { children: ReactNode }) => {
+  const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
+  const [connectingIds, setConnectingIds] = useState<{
+    blockId: string
+    stepId: string
+    target?: Target
+  } | null>(null)
+  const [blocks, setBlocks] = useState<Block[]>([])
+  const [startBlock, setStartBlock] = useState<StartBlock | undefined>()
+
+  const addNewBlock = ({ x, y, type, step }: NewBlockPayload) => {
+    const boardCoordinates = {
+      x,
+      y,
+    }
+    setBlocks((blocks) => [
+      ...blocks.filter((block) => block.steps.length > 0),
+      parseNewBlock({
+        step,
+        type,
+        totalBlocks: blocks.length,
+        initialCoordinates: boardCoordinates,
+      }),
+    ])
+  }
+
+  const updateBlockPosition = (blockId: string, newPosition: Coordinates) => {
+    setBlocks((blocks) =>
+      blocks.map((block) =>
+        block.id === blockId
+          ? { ...block, graphCoordinates: newPosition }
+          : block
+      )
+    )
+  }
+
+  const addNewStepToBlock = (
+    blockId: string,
+    step: StepType | Step,
+    index: number
+  ) => {
+    setBlocks((blocks) =>
+      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) => {
+    setBlocks((blocks) =>
+      blocks.map((block) =>
+        block.id === blockId
+          ? {
+              ...block,
+              steps: [...block.steps.filter((step) => step.id !== stepId)],
+            }
+          : block
+      )
+    )
+  }
+
+  const addTarget = ({
+    blockId,
+    stepId,
+    target,
+  }: {
+    blockId: string
+    stepId: string
+    target?: Target
+  }) => {
+    startBlock && blockId === 'start-block'
+      ? setStartBlock({
+          ...startBlock,
+          steps: [{ ...startBlock.steps[0], target }],
+        })
+      : setBlocks((blocks) =>
+          blocks.map((block) =>
+            block.id === blockId
+              ? {
+                  ...block,
+                  steps: [
+                    ...block.steps.map((step) =>
+                      step.id === stepId ? { ...step, target } : step
+                    ),
+                  ],
+                }
+              : block
+          )
+        )
+  }
+
+  const removeTarget = ({
+    blockId,
+    stepId,
+  }: {
+    blockId: string
+    stepId: string
+  }) => {
+    setBlocks((blocks) =>
+      blocks.map((block) =>
+        block.id === blockId
+          ? {
+              ...block,
+              steps: [
+                ...block.steps.map((step) =>
+                  step.id === stepId ? { ...step, target: undefined } : step
+                ),
+              ],
+            }
+          : block
+      )
+    )
+  }
+
+  return (
+    <graphContext.Provider
+      value={{
+        graphPosition,
+        setGraphPosition,
+        connectingIds,
+        setConnectingIds,
+        blocks,
+        setBlocks,
+        updateBlockPosition,
+        addNewStepToBlock,
+        addNewBlock,
+        removeStepFromBlock,
+        addTarget,
+        removeTarget,
+        startBlock,
+        setStartBlock,
+      }}
+    >
+      {children}
+    </graphContext.Provider>
+  )
+}
+
+export const useGraph = () => useContext(graphContext)

apps/builder/contexts/TypebotContext.tsx

@@ -0,0 +1,72 @@
+import { useToast } from '@chakra-ui/react'
+import { Typebot } from 'bot-engine'
+import { useRouter } from 'next/router'
+import { createContext, ReactNode, useContext, useEffect } from 'react'
+import { fetcher } from 'services/utils'
+import useSWR from 'swr'
+
+const typebotContext = createContext<{
+  typebot?: Typebot
+}>({})
+
+export const TypebotContext = ({
+  children,
+  typebotId,
+}: {
+  children: ReactNode
+  typebotId?: string
+}) => {
+  const router = useRouter()
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+  const { typebot, isLoading } = useFetchedTypebot({
+    typebotId,
+    onError: (error) =>
+      toast({
+        title: 'Error while fetching typebot',
+        description: error.message,
+      }),
+  })
+
+  useEffect(() => {
+    if (isLoading) return
+    if (!typebot) {
+      toast({ status: 'info', description: "Couldn't find typebot" })
+      router.replace('/typebots')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading])
+
+  return (
+    <typebotContext.Provider
+      value={{
+        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 }, Error>(
+    typebotId ? `/api/typebots/${typebotId}` : null,
+    fetcher
+  )
+  if (error) onError(error)
+  return {
+    typebot: data?.typebot,
+    isLoading: !error && !data,
+    mutate,
+  }
+}

apps/builder/cypress/plugins/database.ts

@@ -1,4 +1,5 @@
 import { PrismaClient } from '.prisma/client'
+import { StartBlock, StepType } from 'bot-engine'
 
 const prisma = new PrismaClient()
 
@@ -24,7 +25,23 @@ const createFolders = () =>
     data: [{ ownerId: 'test2', name: 'Folder #1', id: 'folder1' }],
   })
 
-const createTypebots = () =>
+const createTypebots = () => {
+  const startBlock: StartBlock = {
+    graphCoordinates: { x: 0, y: 0 },
+    id: 'start-block',
+    steps: [
+      {
+        id: 'start-step',
+        blockId: 'start-block',
+        type: StepType.START,
+        label: 'Start',
+      },
+    ],
+    title: 'Start',
+  }
   prisma.typebot.createMany({
-    data: [{ name: 'Typebot #1', ownerId: 'test2' }],
+    data: [
+      { id: 'typebot1', name: 'Typebot #1', ownerId: 'test2', startBlock },
+    ],
   })
+}

apps/builder/cypress/tests/board.ts

@@ -0,0 +1,10 @@
+describe('BoardPage', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    cy.signOut()
+  })
+  it('steps should be droppable', () => {
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot1')
+  })
+})

apps/builder/package.json

@@ -13,9 +13,9 @@
     "@chakra-ui/css-reset": "^1.1.1",
     "@chakra-ui/react": "^1.7.2",
     "@dnd-kit/core": "^4.0.3",
+    "@dnd-kit/sortable": "^5.1.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@jsplumb/browser-ui": "^5.2.3",
     "@next-auth/prisma-adapter": "next",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4",
@@ -25,6 +25,8 @@
     "nprogress": "^0.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "short-uuid": "^4.2.0",
+    "svg-round-corners": "^0.2.0",
     "swr": "^1.0.1",
     "use-debounce": "^7.0.1"
   },

apps/builder/pages/api/typebots.ts

@@ -1,3 +1,4 @@
+import { StartBlock, StepType } from 'bot-engine'
 import { Typebot, User } from 'db'
 import prisma from 'libs/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -23,8 +24,21 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
   if (req.method === 'POST') {
     const data = JSON.parse(req.body) as Typebot
+    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 typebot = await prisma.typebot.create({
-      data: { ...data, ownerId: user.id },
+      data: { ...data, ownerId: user.id, startBlock },
     })
     return res.send(typebot)
   }

apps/builder/pages/api/typebots/[id].ts

@@ -1,4 +1,3 @@
-import { Typebot } from '.prisma/client'
 import prisma from 'libs/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getSession } from 'next-auth/react'
@@ -11,6 +10,12 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     return res.status(401).json({ message: 'Not authenticated' })
 
   const id = req.query.id.toString()
+  if (req.method === 'GET') {
+    const typebot = await prisma.typebot.findUnique({
+      where: { id },
+    })
+    return res.send({ typebot })
+  }
   if (req.method === 'DELETE') {
     const typebots = await prisma.typebot.delete({
       where: { id },
@@ -18,7 +23,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     return res.send({ typebots })
   }
   if (req.method === 'PATCH') {
-    const data = JSON.parse(req.body) as Partial<Typebot>
+    const data = JSON.parse(req.body)
     const typebots = await prisma.typebot.update({
       where: { id },
       data,

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

@@ -1,19 +1,24 @@
 import { Flex } from '@chakra-ui/layout'
+import { Board } from 'components/board/Board'
+import withAuth from 'components/HOC/withUser'
 import { Seo } from 'components/Seo'
-import { GraphProvider } from 'contexts/BoardContext'
+import { GraphProvider } from 'contexts/GraphContext'
+import { TypebotContext } from 'contexts/TypebotContext'
+import { useRouter } from 'next/router'
 import React from 'react'
 
 const TypebotEditPage = () => {
+  const { query } = useRouter()
   return (
-    <>
+    <TypebotContext typebotId={query.id?.toString()}>
       <Seo title="Editor" />
       <Flex overflow="hidden" h="100vh">
         <GraphProvider>
-          <></>
+          <Board />
         </GraphProvider>
       </Flex>
-    </>
+    </TypebotContext>
   )
 }
 
-export default TypebotEditPage
+export default withAuth(TypebotEditPage)

apps/builder/services/graph.ts

@@ -0,0 +1,266 @@
+import { Coordinates } from '@dnd-kit/core/dist/types'
+import {
+  StepType,
+  Block,
+  Step,
+  TextStep,
+  ImageStep,
+  DatePickerStep,
+  StartBlock,
+} from 'bot-engine'
+import { AnchorsPositionProps } from 'components/board/graph/Edges/Edge'
+import {
+  stubLength,
+  blockWidth,
+  blockAnchorsOffset,
+  spaceBetweenSteps,
+  firstStepOffsetY,
+} from 'contexts/GraphContext'
+import shortId from 'short-uuid'
+import { roundCorners } from 'svg-round-corners'
+import { isDefined } from './utils'
+
+export const parseNewBlock = ({
+  type,
+  totalBlocks,
+  initialCoordinates,
+  step,
+}: {
+  step?: Step
+  type?: StepType
+  totalBlocks: number
+  initialCoordinates: { x: number; y: number }
+}): Block => {
+  const id = `b${shortId.generate()}`
+  return {
+    id,
+    title: `Block #${totalBlocks + 1}`,
+    graphCoordinates: initialCoordinates,
+    steps: [
+      step ? { ...step, blockId: id } : parseNewStep(type as StepType, id),
+    ],
+  }
+}
+
+export const parseNewStep = (type: StepType, blockId: string): Step => {
+  const id = `s${shortId.generate()}`
+  switch (type) {
+    case StepType.TEXT: {
+      const textStep: TextStep = { type, content: '' }
+      return { blockId, id, ...textStep }
+    }
+    case StepType.IMAGE: {
+      const imageStep: ImageStep = { type, content: { url: '' } }
+      return { blockId, id, ...imageStep }
+    }
+    case StepType.DATE_PICKER: {
+      const imageStep: DatePickerStep = { type, content: '' }
+      return { blockId, id, ...imageStep }
+    }
+    default: {
+      const textStep: TextStep = { type: StepType.TEXT, content: '' }
+      return { blockId, id, ...textStep }
+    }
+  }
+}
+
+export const computeFlowChartConnectorPath = ({
+  sourcePosition,
+  targetPosition,
+  sourceType,
+  totalSegments,
+}: AnchorsPositionProps) => {
+  const segments = getSegments({
+    sourcePosition,
+    targetPosition,
+    sourceType,
+    totalSegments,
+  })
+  return roundCorners(
+    `M${sourcePosition.x},${sourcePosition.y} ${segments}`,
+    10
+  ).path
+}
+
+const getSegments = ({
+  sourcePosition,
+  targetPosition,
+  sourceType,
+  totalSegments,
+}: AnchorsPositionProps) => {
+  switch (totalSegments) {
+    case 2:
+      return computeTwoSegments(sourcePosition, targetPosition)
+    case 3:
+      return computeThreeSegments(sourcePosition, targetPosition, sourceType)
+    case 4:
+      return computeFourSegments(sourcePosition, targetPosition, sourceType)
+    default:
+      return computeFiveSegments(sourcePosition, targetPosition, sourceType)
+  }
+}
+
+const computeTwoSegments = (
+  sourcePosition: Coordinates,
+  targetPosition: Coordinates
+) => {
+  const segments = []
+  segments.push(`L${targetPosition.x},${sourcePosition.y}`)
+  segments.push(`L${targetPosition.x},${targetPosition.y}`)
+  return segments.join(' ')
+}
+
+const computeThreeSegments = (
+  sourcePosition: Coordinates,
+  targetPosition: Coordinates,
+  sourceType: 'right' | 'left'
+) => {
+  const segments = []
+  const firstSegmentX =
+    sourceType === 'right'
+      ? sourcePosition.x + (targetPosition.x - sourcePosition.x) / 2
+      : sourcePosition.x - (sourcePosition.x - targetPosition.x) / 2
+  segments.push(`L${firstSegmentX},${sourcePosition.y}`)
+  segments.push(`L${firstSegmentX},${targetPosition.y}`)
+  segments.push(`L${targetPosition.x},${targetPosition.y}`)
+  return segments.join(' ')
+}
+
+const computeFourSegments = (
+  sourcePosition: Coordinates,
+  targetPosition: Coordinates,
+  sourceType: 'right' | 'left'
+) => {
+  const segments = []
+  const firstSegmentX =
+    sourcePosition.x + (sourceType === 'right' ? stubLength : -stubLength)
+  segments.push(`L${firstSegmentX},${sourcePosition.y}`)
+  const secondSegmentY =
+    sourcePosition.y + (targetPosition.y - sourcePosition.y) / 2
+  segments.push(`L${firstSegmentX},${secondSegmentY}`)
+
+  segments.push(`L${targetPosition.x},${secondSegmentY}`)
+
+  segments.push(`L${targetPosition.x},${targetPosition.y}`)
+  return segments.join(' ')
+}
+
+const computeFiveSegments = (
+  sourcePosition: Coordinates,
+  targetPosition: Coordinates,
+  sourceType: 'right' | 'left'
+) => {
+  const segments = []
+  const firstSegmentX =
+    sourcePosition.x + (sourceType === 'right' ? stubLength : -stubLength)
+  segments.push(`L${firstSegmentX},${sourcePosition.y}`)
+  const firstSegmentY =
+    sourcePosition.y + (targetPosition.y - sourcePosition.y) / 2
+  segments.push(
+    `L${
+      sourcePosition.x + (sourceType === 'right' ? stubLength : -stubLength)
+    },${firstSegmentY}`
+  )
+
+  const secondSegmentX =
+    targetPosition.x - (sourceType === 'right' ? stubLength : -stubLength)
+  segments.push(`L${secondSegmentX},${firstSegmentY}`)
+
+  segments.push(`L${secondSegmentX},${targetPosition.y}`)
+
+  segments.push(`L${targetPosition.x},${targetPosition.y}`)
+  return segments.join(' ')
+}
+
+export const getAnchorsPosition = (
+  sourceBlock: Block | StartBlock,
+  targetBlock: Block,
+  sourceStepIndex: number,
+  targetStepIndex?: number
+): AnchorsPositionProps => {
+  const sourceOffsetY =
+    (sourceBlock.graphCoordinates.y ?? 0) +
+    firstStepOffsetY +
+    spaceBetweenSteps * sourceStepIndex
+  const targetOffsetY = isDefined(targetStepIndex)
+    ? (targetBlock.graphCoordinates.y ?? 0) +
+      firstStepOffsetY +
+      spaceBetweenSteps * targetStepIndex
+    : undefined
+
+  const sourcePosition = {
+    x: (sourceBlock.graphCoordinates.x ?? 0) + blockWidth,
+    y: sourceOffsetY,
+  }
+  let sourceType: 'right' | 'left' = 'right'
+  if (sourceBlock.graphCoordinates.x > targetBlock.graphCoordinates.x) {
+    sourcePosition.x = sourceBlock.graphCoordinates.x
+    sourceType = 'left'
+  }
+
+  const { targetPosition, totalSegments } = computeBlockTargetPosition(
+    sourceBlock.graphCoordinates,
+    targetBlock.graphCoordinates,
+    sourceOffsetY,
+    targetOffsetY
+  )
+  return { sourcePosition, targetPosition, sourceType, totalSegments }
+}
+
+const computeBlockTargetPosition = (
+  sourceBlockPosition: Coordinates,
+  targetBlockPosition: Coordinates,
+  offsetY: number,
+  targetOffsetY?: number
+): { targetPosition: Coordinates; totalSegments: number } => {
+  const isTargetBlockBelow =
+    targetBlockPosition.y > offsetY &&
+    targetBlockPosition.x < sourceBlockPosition.x + blockWidth + stubLength &&
+    targetBlockPosition.x > sourceBlockPosition.x - blockWidth - stubLength
+  const isTargetBlockToTheRight = targetBlockPosition.x < sourceBlockPosition.x
+  const isTargettingBlock = !targetOffsetY
+
+  if (isTargetBlockBelow && isTargettingBlock) {
+    const isExterior =
+      targetBlockPosition.x <
+        sourceBlockPosition.x - blockWidth / 2 - stubLength ||
+      targetBlockPosition.x >
+        sourceBlockPosition.x + blockWidth / 2 + stubLength
+    const targetPosition = parseBlockAnchorPosition(targetBlockPosition, 'top')
+    return { totalSegments: isExterior ? 2 : 4, targetPosition }
+  } else {
+    const isExterior =
+      targetBlockPosition.x < sourceBlockPosition.x - blockWidth ||
+      targetBlockPosition.x > sourceBlockPosition.x + blockWidth
+    const targetPosition = parseBlockAnchorPosition(
+      targetBlockPosition,
+      isTargetBlockToTheRight ? 'right' : 'left',
+      targetOffsetY
+    )
+    return { totalSegments: isExterior ? 3 : 5, targetPosition }
+  }
+}
+
+const parseBlockAnchorPosition = (
+  blockPosition: Coordinates,
+  anchor: 'left' | 'top' | 'right',
+  targetOffsetY?: number
+): Coordinates => {
+  switch (anchor) {
+    case 'left':
+      return {
+        x: blockPosition.x + blockAnchorsOffset.left.x,
+        y: targetOffsetY ?? blockPosition.y + blockAnchorsOffset.left.y,
+      }
+    case 'top':
+      return {
+        x: blockPosition.x + blockAnchorsOffset.top.x,
+        y: blockPosition.y + blockAnchorsOffset.top.y,
+      }
+    case 'right':
+      return {
+        x: blockPosition.x + blockAnchorsOffset.right.x,
+        y: targetOffsetY ?? blockPosition.y + blockAnchorsOffset.right.y,
+      }
+  }
+}

apps/builder/services/utils.ts

@@ -30,3 +30,17 @@ export const sendRequest = async <ResponseData>({
     return { error: e as Error }
   }
 }
+
+export const insertItemInList = <T>(
+  arr: T[],
+  index: number,
+  newItem: T
+): T[] => [...arr.slice(0, index), newItem, ...arr.slice(index)]
+
+export const isDefined = <T>(value: T | undefined | null): value is T => {
+  return <T>value !== undefined && <T>value !== null
+}
+
+export const isNotDefined = <T>(value: T | undefined | null): value is T => {
+  return <T>value === undefined || <T>value === null
+}

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

@@ -1,25 +1,47 @@
 import { Typebot as TypebotFromPrisma } from 'db'
 
-export type Typebot = TypebotFromPrisma & { blocks: Block[] }
+export type Typebot = TypebotFromPrisma & {
+  blocks: Block[]
+  startBlock: StartBlock
+}
+
+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[]
-  boardCoordinates: {
+  graphCoordinates: {
     x: number
     y: number
   }
 }
 
 export enum StepType {
+  START = 'start',
   TEXT = 'text',
   IMAGE = 'image',
   BUTTONS = 'buttons',
   DATE_PICKER = 'date picker',
 }
 
-type Target = { blockId: string; stepId?: string }
+export type Target = { blockId: string; stepId?: string }
 
 export type Step = { id: string; blockId: string; target?: Target } & (
   | TextStep

packages/db/prisma/migrations/20211216093901_init_graph_properites/migration.sql

@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - Added the required column `startBlock` to the `PublicTypebot` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `startBlock` to the `Typebot` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "PublicTypebot" ADD COLUMN     "blocks" JSONB[],
+ADD COLUMN     "startBlock" JSONB NOT NULL;
+
+-- AlterTable
+ALTER TABLE "Typebot" ADD COLUMN     "blocks" JSONB[],
+ADD COLUMN     "startBlock" JSONB NOT NULL;

packages/db/prisma/schema.prisma

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

yarn.lock

@@ -1035,7 +1035,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@dnd-kit/utilities@npm:^3.0.1":
+"@dnd-kit/sortable@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "@dnd-kit/sortable@npm:5.1.0"
+  dependencies:
+    "@dnd-kit/utilities": ^3.0.0
+    tslib: ^2.0.0
+  peerDependencies:
+    "@dnd-kit/core": ^4.0.2
+    react: ">=16.8.0"
+  checksum: f2f687a70dc52894e569d6377d7cb2e5e1761f0164cf08a1d0c8c3df43d6e88fd2858e0f5dfc8a5670fac8f6ce9a2ed91b0aeb8837f44d067acf21d1baf6a55e
+  languageName: node
+  linkType: hard
+
+"@dnd-kit/utilities@npm:^3.0.0, @dnd-kit/utilities@npm:^3.0.1":
   version: 3.0.1
   resolution: "@dnd-kit/utilities@npm:3.0.1"
   dependencies:
@@ -1300,40 +1313,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jsplumb/browser-ui@npm:^5.2.3":
-  version: 5.2.3
-  resolution: "@jsplumb/browser-ui@npm:5.2.3"
-  dependencies:
-    "@jsplumb/core": 5.2.3
-  checksum: e6076dea1dff18e9121b12544132be6b71222370578973514f6f3ac863736b7262b15169ba57a65078d3dd041b0eea757f989799a680594431415ffbf9e4dca2
-  languageName: node
-  linkType: hard
-
-"@jsplumb/common@npm:5.2.3":
-  version: 5.2.3
-  resolution: "@jsplumb/common@npm:5.2.3"
-  dependencies:
-    "@jsplumb/util": 5.2.3
-  checksum: 7c7241ca5b673788eb9bd88b15acf59f1497ccbfde8198b6b649659d70cefff7b60f34062e8735da4c886d8fc5d75d3467c53369525f4e7a62c8b59710613354
-  languageName: node
-  linkType: hard
-
-"@jsplumb/core@npm:5.2.3":
-  version: 5.2.3
-  resolution: "@jsplumb/core@npm:5.2.3"
-  dependencies:
-    "@jsplumb/common": 5.2.3
-  checksum: d5008eeb5e8bcf11af156dc0896fcc01a8ccee437462a4d9ff05473ad6523c9f1c446a4333ff99ed67e141e7cf9abc4c514ef9f1044540920be08818d36935db
-  languageName: node
-  linkType: hard
-
-"@jsplumb/util@npm:5.2.3":
-  version: 5.2.3
-  resolution: "@jsplumb/util@npm:5.2.3"
-  checksum: 5bef8e4845943aed038dc120bce88da4f7d7b3bef9326034b6e08e3a3019bae9376ffc32f63872f6c426aaac866567a53ba183847259dbd3c249abe59b8c14e3
-  languageName: node
-  linkType: hard
-
 "@napi-rs/triples@npm:1.0.3":
   version: 1.0.3
   resolution: "@napi-rs/triples@npm:1.0.3"
@@ -2386,6 +2365,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"any-base@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "any-base@npm:1.1.0"
+  checksum: c1fd040de52e710e2de7d9ae4df52bac589f35622adb24686c98ce21c7b824859a8db9614bc119ed8614f42fd08918b2612e6a6c385480462b3100a1af59289d
+  languageName: node
+  linkType: hard
+
 "anymatch@npm:~3.1.1, anymatch@npm:~3.1.2":
   version: 3.1.2
   resolution: "anymatch@npm:3.1.2"
@@ -2899,9 +2885,9 @@ __metadata:
     "@chakra-ui/css-reset": ^1.1.1
     "@chakra-ui/react": ^1.7.2
     "@dnd-kit/core": ^4.0.3
+    "@dnd-kit/sortable": ^5.1.0
     "@emotion/react": ^11
     "@emotion/styled": ^11
-    "@jsplumb/browser-ui": ^5.2.3
     "@next-auth/prisma-adapter": next
     "@testing-library/cypress": ^8.0.2
     "@types/node": ^16.11.9
@@ -2926,6 +2912,8 @@ __metadata:
     prettier: ^2.4.1
     react: ^17.0.2
     react-dom: ^17.0.2
+    short-uuid: ^4.2.0
+    svg-round-corners: ^0.2.0
     swr: ^1.0.1
     typescript: ^4.5.2
     use-debounce: ^7.0.1
@@ -6295,6 +6283,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.clonedeep@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "lodash.clonedeep@npm:4.5.0"
+  checksum: 92c46f094b064e876a23c97f57f81fbffd5d760bf2d8a1c61d85db6d1e488c66b0384c943abee4f6af7debf5ad4e4282e74ff83177c9e63d8ff081a4837c3489
+  languageName: node
+  linkType: hard
+
 "lodash.memoize@npm:^4.1.2":
   version: 4.1.2
   resolution: "lodash.memoize@npm:4.1.2"
@@ -8940,6 +8935,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"short-uuid@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "short-uuid@npm:4.2.0"
+  dependencies:
+    any-base: ^1.1.0
+    uuid: ^8.3.2
+  checksum: 09013559393bc26d1462ae27c84b4eb7e6e4052e9fea1704f21370e226864f9dfcd1b9465eefa980da84b2537b70cabd98718193934dcc2a0fc06e7b0d1f4b9e
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.0.4":
   version: 1.0.4
   resolution: "side-channel@npm:1.0.4"
@@ -9443,6 +9448,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svg-round-corners@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "svg-round-corners@npm:0.2.0"
+  dependencies:
+    lodash.clonedeep: ^4.5.0
+  checksum: edaeaea3aa8bbef8509d747477381333bc93b49c3daf82503fe0236152d9e33124b17c3acde5cca424abd0602cf9794fda97f0446a547a0a8a4d84e13e99cbf0
+  languageName: node
+  linkType: hard
+
 "svgo@npm:^2.7.0":
   version: 2.8.0
   resolution: "svgo@npm:2.8.0"