refactor(editor): ♻️ Undo / Redo buttons + structure refacto

Yet another huge refacto... While implementing undo and redo features I understood that I updated the stored typebot too many times (i.e. on each key input) so I had to rethink it entirely. I also moved around some files.
2022-02-02 08:05:02 +01:00
parent fc1d654772
commit 8a350eee6c
153 changed files with 1512 additions and 1352 deletions
--- a/apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx
+++ b/apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx
@ -0,0 +1,115 @@
+import { useEventListener } from '@chakra-ui/hooks'
+import assert from 'assert'
+import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
+import { useGraph, ConnectingIds } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { Target } from 'models'
+import React, { useMemo, useState } from 'react'
+import {
+  computeConnectingEdgePath,
+  computeEdgePathToMouse,
+  getEndpointTopOffset,
+} from 'services/graph'
+
+export const DrawingEdge = () => {
+  const {
+    graphPosition,
+    setConnectingIds,
+    connectingIds,
+    sourceEndpoints,
+    targetEndpoints,
+    blocksCoordinates,
+  } = useGraph()
+  const { typebot, createEdge } = useTypebot()
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+
+  const sourceBlock = useMemo(
+    () => connectingIds && typebot?.blocks.byId[connectingIds.source.blockId],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [connectingIds]
+  )
+
+  const sourceTop = useMemo(() => {
+    if (!sourceBlock || !connectingIds) return 0
+    return getEndpointTopOffset(
+      graphPosition,
+      sourceEndpoints,
+      connectingIds.source.buttonId ??
+        connectingIds.source.stepId + (connectingIds.source.conditionType ?? '')
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [graphPosition, sourceEndpoints, connectingIds])
+
+  const targetTop = useMemo(() => {
+    if (!sourceBlock || !connectingIds) return 0
+    return getEndpointTopOffset(
+      graphPosition,
+      targetEndpoints,
+      connectingIds.target?.stepId
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [graphPosition, targetEndpoints, connectingIds])
+
+  const path = useMemo(() => {
+    if (
+      !sourceBlock ||
+      !typebot ||
+      !connectingIds ||
+      !blocksCoordinates ||
+      !sourceTop
+    )
+      return ``
+
+    return connectingIds?.target
+      ? computeConnectingEdgePath({
+          connectingIds: connectingIds as Omit<ConnectingIds, 'target'> & {
+            target: Target
+          },
+          sourceTop,
+          targetTop,
+          blocksCoordinates,
+        })
+      : computeEdgePathToMouse({
+          blockPosition: blocksCoordinates.byId[sourceBlock.id],
+          mousePosition,
+          sourceTop,
+        })
+  }, [
+    sourceBlock,
+    typebot,
+    connectingIds,
+    blocksCoordinates,
+    sourceTop,
+    targetTop,
+    mousePosition,
+  ])
+
+  const handleMouseMove = (e: MouseEvent) => {
+    setMousePosition({
+      x: e.clientX - graphPosition.x,
+      y: e.clientY - graphPosition.y - headerHeight,
+    })
+  }
+  useEventListener('mousemove', handleMouseMove)
+  useEventListener('mouseup', () => {
+    if (connectingIds?.target) createNewEdge(connectingIds)
+    setConnectingIds(null)
+  })
+
+  const createNewEdge = (connectingIds: ConnectingIds) => {
+    assert(connectingIds.target)
+    createEdge({ from: connectingIds.source, to: connectingIds.target })
+  }
+
+  if ((mousePosition.x === 0 && mousePosition.y === 0) || !connectingIds)
+    return <></>
+  return (
+    <path
+      d={path}
+      stroke="#1a5fff"
+      strokeWidth="2px"
+      markerEnd="url(#blue-arrow)"
+      fill="none"
+    />
+  )
+}
--- a/apps/builder/components/shared/Graph/Edges/Edge.tsx
+++ b/apps/builder/components/shared/Graph/Edges/Edge.tsx
@ -0,0 +1,87 @@
+import { Coordinates, useGraph } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import React, { useMemo } from 'react'
+import {
+  getAnchorsPosition,
+  computeEdgePath,
+  getEndpointTopOffset,
+  getSourceEndpointId,
+} from 'services/graph'
+
+export type AnchorsPositionProps = {
+  sourcePosition: Coordinates
+  targetPosition: Coordinates
+  sourceType: 'right' | 'left'
+  totalSegments: number
+}
+
+export const Edge = ({ edgeId }: { edgeId: string }) => {
+  const { typebot } = useTypebot()
+  const {
+    previewingEdgeId,
+    sourceEndpoints,
+    targetEndpoints,
+    graphPosition,
+    blocksCoordinates,
+  } = useGraph()
+  const edge = useMemo(
+    () => typebot?.edges.byId[edgeId],
+    [edgeId, typebot?.edges.byId]
+  )
+  const isPreviewing = previewingEdgeId === edgeId
+
+  const sourceBlock = edge && typebot?.blocks.byId[edge.from.blockId]
+  const targetBlock = edge && typebot?.blocks.byId[edge.to.blockId]
+
+  const sourceBlockCoordinates =
+    sourceBlock && blocksCoordinates?.byId[sourceBlock.id]
+  const targetBlockCoordinates =
+    targetBlock && blocksCoordinates?.byId[targetBlock.id]
+
+  const sourceTop = useMemo(
+    () =>
+      getEndpointTopOffset(
+        graphPosition,
+        sourceEndpoints,
+        getSourceEndpointId(edge)
+      ),
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [edge, graphPosition, sourceEndpoints, sourceBlockCoordinates?.y]
+  )
+  const targetTop = useMemo(
+    () => getEndpointTopOffset(graphPosition, targetEndpoints, edge?.to.stepId),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [graphPosition, targetEndpoints, edge?.to.stepId, targetBlockCoordinates?.y]
+  )
+
+  const path = useMemo(() => {
+    if (!sourceBlockCoordinates || !targetBlockCoordinates || !sourceTop)
+      return ``
+    const anchorsPosition = getAnchorsPosition({
+      sourceBlockCoordinates,
+      targetBlockCoordinates,
+      sourceTop,
+      targetTop,
+    })
+    return computeEdgePath(anchorsPosition)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    sourceBlockCoordinates?.x,
+    sourceBlockCoordinates?.y,
+    targetBlockCoordinates?.x,
+    targetBlockCoordinates?.y,
+    sourceTop,
+  ])
+
+  if (sourceTop === 0) return <></>
+  return (
+    <path
+      d={path}
+      stroke={isPreviewing ? '#1a5fff' : '#718096'}
+      strokeWidth="2px"
+      markerEnd={isPreviewing ? 'url(#blue-arrow)' : 'url(#arrow)'}
+      fill="none"
+    />
+  )
+}
--- a/apps/builder/components/shared/Graph/Edges/Edges.tsx
+++ b/apps/builder/components/shared/Graph/Edges/Edges.tsx
@ -0,0 +1,55 @@
+import { chakra } from '@chakra-ui/system'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import React from 'react'
+import { DrawingEdge } from './DrawingEdge'
+import { Edge } from './Edge'
+
+export const Edges = () => {
+  const { typebot } = useTypebot()
+
+  return (
+    <chakra.svg
+      width="full"
+      height="full"
+      overflow="visible"
+      pos="absolute"
+      left="0"
+      top="0"
+    >
+      <DrawingEdge />
+      {typebot?.edges.allIds.map((edgeId) => (
+        <Edge key={edgeId} edgeId={edgeId} />
+      ))}
+      <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>
+      <marker
+        id={'blue-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="#1a5fff"
+        />
+      </marker>
+    </chakra.svg>
+  )
+}
--- a/apps/builder/components/shared/Graph/Edges/index.tsx
+++ b/apps/builder/components/shared/Graph/Edges/index.tsx
@ -0,0 +1 @@
+export { Edges } from './Edges'
--- a/apps/builder/components/shared/Graph/Endpoints/SourceEndpoint.tsx
+++ b/apps/builder/components/shared/Graph/Endpoints/SourceEndpoint.tsx
@ -0,0 +1,50 @@
+import { Box, BoxProps, Flex } from '@chakra-ui/react'
+import { useGraph } from 'contexts/GraphContext'
+import { Source } from 'models'
+import React, { MouseEvent, useEffect, useRef, useState } from 'react'
+
+export const SourceEndpoint = ({
+  source,
+  ...props
+}: BoxProps & {
+  source: Source
+}) => {
+  const [ranOnce, setRanOnce] = useState(false)
+  const { setConnectingIds, addSourceEndpoint, blocksCoordinates } = useGraph()
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    setConnectingIds({ source })
+  }
+
+  useEffect(() => {
+    if (ranOnce || !ref.current) return
+    const id = source.buttonId ?? source.stepId + (source.conditionType ?? '')
+    addSourceEndpoint({
+      id,
+      ref,
+    })
+    setRanOnce(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref.current])
+
+  if (!blocksCoordinates) return <></>
+  return (
+    <Flex
+      ref={ref}
+      boxSize="18px"
+      rounded="full"
+      onMouseDown={handleMouseDown}
+      cursor="copy"
+      borderWidth="1px"
+      borderColor="gray.400"
+      bgColor="white"
+      justify="center"
+      align="center"
+      {...props}
+    >
+      <Box bgColor="gray.400" rounded="full" boxSize="6px" />
+    </Flex>
+  )
+}
--- a/apps/builder/components/shared/Graph/Endpoints/TargetEndpoint.tsx
+++ b/apps/builder/components/shared/Graph/Endpoints/TargetEndpoint.tsx
@ -0,0 +1,36 @@
+import { Box, BoxProps } from '@chakra-ui/react'
+import { useGraph } from 'contexts/GraphContext'
+import React, { useEffect, useRef } from 'react'
+
+export const TargetEndpoint = ({
+  stepId,
+  isVisible,
+  ...props
+}: BoxProps & {
+  stepId: string
+  isVisible?: boolean
+}) => {
+  const { addTargetEndpoint } = useGraph()
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+    addTargetEndpoint({
+      id: stepId,
+      ref,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref])
+
+  return (
+    <Box
+      ref={ref}
+      boxSize="15px"
+      rounded="full"
+      bgColor="blue.500"
+      cursor="pointer"
+      visibility={isVisible ? 'visible' : 'hidden'}
+      {...props}
+    />
+  )
+}
--- a/apps/builder/components/shared/Graph/Endpoints/index.tsx
+++ b/apps/builder/components/shared/Graph/Endpoints/index.tsx
@ -0,0 +1,2 @@
+export { SourceEndpoint } from './SourceEndpoint'
+export { TargetEndpoint } from './TargetEndpoint'
--- a/apps/builder/components/shared/Graph/Graph.tsx
+++ b/apps/builder/components/shared/Graph/Graph.tsx
@ -0,0 +1,112 @@
+import { Flex, FlexProps, useEventListener } from '@chakra-ui/react'
+import React, { useRef, useMemo, useEffect } from 'react'
+import { blockWidth, useGraph } from 'contexts/GraphContext'
+import { BlockNode } from './Nodes/BlockNode/BlockNode'
+import { useStepDnd } from 'contexts/StepDndContext'
+import { Edges } from './Edges'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
+import { DraggableStepType } from 'models'
+import { generate } from 'short-uuid'
+import { AnswersCount } from 'services/analytics'
+import { DropOffNode } from './Nodes/DropOffNode'
+
+export const Graph = ({
+  answersCounts,
+  ...props
+}: { answersCounts?: AnswersCount[] } & FlexProps) => {
+  const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
+    useStepDnd()
+  const graphContainerRef = useRef<HTMLDivElement | null>(null)
+  const editorContainerRef = useRef<HTMLDivElement | null>(null)
+  const { createBlock, typebot } = useTypebot()
+  const {
+    graphPosition,
+    setGraphPosition,
+    setOpenedStepId,
+    updateBlockCoordinates,
+  } = useGraph()
+  const transform = useMemo(
+    () =>
+      `translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
+    [graphPosition]
+  )
+
+  useEffect(() => {
+    editorContainerRef.current = document.getElementById(
+      'editor-container'
+    ) as HTMLDivElement
+  }, [])
+
+  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
+    const coordinates = {
+      x: e.clientX - graphPosition.x - blockWidth / 3,
+      y: e.clientY - graphPosition.y - 20 - headerHeight,
+    }
+    const id = generate()
+    updateBlockCoordinates(id, coordinates)
+    createBlock({
+      id,
+      ...coordinates,
+      step: draggedStep ?? (draggedStepType as DraggableStepType),
+    })
+    setDraggedStep(undefined)
+    setDraggedStepType(undefined)
+  }
+  useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
+
+  const handleMouseDown = (e: MouseEvent) => {
+    const isRightClick = e.button === 2
+    if (isRightClick) e.stopPropagation()
+  }
+  useEventListener('mousedown', handleMouseDown, undefined, { capture: true })
+
+  const handleClick = () => setOpenedStepId(undefined)
+  useEventListener('click', handleClick, editorContainerRef.current)
+
+  if (!typebot) return <></>
+  return (
+    <Flex ref={graphContainerRef} {...props}>
+      <Flex
+        flex="1"
+        boxSize={'200px'}
+        maxW={'200px'}
+        style={{
+          transform,
+        }}
+      >
+        <Edges />
+        {typebot.blocks.allIds.map((blockId) => (
+          <BlockNode block={typebot.blocks.byId[blockId]} key={blockId} />
+        ))}
+        {answersCounts?.map((answersCount) => (
+          <DropOffNode
+            key={answersCount.blockId}
+            answersCounts={answersCounts}
+            blockId={answersCount.blockId}
+          />
+        ))}
+      </Flex>
+    </Flex>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
@ -0,0 +1,151 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Stack,
+  useEventListener,
+} from '@chakra-ui/react'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Block } from 'models'
+import { useGraph } from 'contexts/GraphContext'
+import { useStepDnd } from 'contexts/StepDndContext'
+import { StepNodesList } from '../StepNode/StepNodesList'
+import { isNotDefined } from 'utils'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { ContextMenu } from 'components/shared/ContextMenu'
+import { BlockNodeContextMenu } from './BlockNodeContextMenu'
+import { useDebounce } from 'use-debounce'
+
+type Props = {
+  block: Block
+}
+
+export const BlockNode = ({ block }: Props) => {
+  const {
+    connectingIds,
+    setConnectingIds,
+    previewingEdgeId,
+    blocksCoordinates,
+    updateBlockCoordinates,
+    isReadOnly,
+  } = useGraph()
+  const { typebot, updateBlock } = useTypebot()
+  const { setMouseOverBlockId } = useStepDnd()
+  const { draggedStep, draggedStepType } = useStepDnd()
+  const [isMouseDown, setIsMouseDown] = useState(false)
+  const [isConnecting, setIsConnecting] = useState(false)
+  const isPreviewing = useMemo(() => {
+    if (!previewingEdgeId) return
+    const edge = typebot?.edges.byId[previewingEdgeId]
+    return edge?.to.blockId === block.id || edge?.from.blockId === block.id
+  }, [block.id, previewingEdgeId, typebot?.edges.byId])
+
+  const blockCoordinates = useMemo(
+    () => blocksCoordinates?.byId[block.id],
+    [block.id, blocksCoordinates?.byId]
+  )
+  const [debouncedBlockPosition] = useDebounce(blockCoordinates, 100)
+  useEffect(() => {
+    if (!debouncedBlockPosition || isReadOnly) return
+    if (
+      debouncedBlockPosition?.x === block.graphCoordinates.x &&
+      debouncedBlockPosition.y === block.graphCoordinates.y
+    )
+      return
+    updateBlock(block.id, { graphCoordinates: debouncedBlockPosition })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedBlockPosition])
+
+  useEffect(() => {
+    setIsConnecting(
+      connectingIds?.target?.blockId === block.id &&
+        isNotDefined(connectingIds.target?.stepId)
+    )
+  }, [block.id, connectingIds])
+
+  const handleTitleSubmit = (title: string) => updateBlock(block.id, { title })
+
+  const handleMouseDown = () => {
+    setIsMouseDown(true)
+  }
+  const handleMouseUp = () => {
+    setIsMouseDown(false)
+  }
+  useEventListener('mouseup', handleMouseUp)
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!isMouseDown) return
+    const { movementX, movementY } = event
+
+    if (!blockCoordinates) return
+    updateBlockCoordinates(block.id, {
+      x: blockCoordinates.x + movementX,
+      y: blockCoordinates.y + movementY,
+    })
+  }
+
+  useEventListener('mousemove', handleMouseMove)
+
+  const handleMouseEnter = () => {
+    if (draggedStepType || draggedStep) setMouseOverBlockId(block.id)
+    if (connectingIds)
+      setConnectingIds({ ...connectingIds, target: { blockId: block.id } })
+  }
+
+  const handleMouseLeave = () => {
+    setMouseOverBlockId(undefined)
+    if (connectingIds) setConnectingIds({ ...connectingIds, target: undefined })
+  }
+
+  return (
+    <ContextMenu<HTMLDivElement>
+      renderMenu={() => <BlockNodeContextMenu blockId={block.id} />}
+      isDisabled={isReadOnly}
+    >
+      {(ref, isOpened) => (
+        <Stack
+          ref={ref}
+          p="4"
+          rounded="lg"
+          bgColor="blue.50"
+          backgroundImage="linear-gradient(rgb(235, 239, 244), rgb(231, 234, 241))"
+          borderWidth="2px"
+          borderColor={
+            isConnecting || isOpened || isPreviewing ? 'blue.400' : 'white'
+          }
+          w="300px"
+          transition="border 300ms, box-shadow 200ms"
+          pos="absolute"
+          style={{
+            transform: `translate(${blockCoordinates?.x ?? 0}px, ${
+              blockCoordinates?.y ?? 0
+            }px)`,
+          }}
+          onMouseDown={handleMouseDown}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          cursor={isMouseDown ? 'grabbing' : 'pointer'}
+          boxShadow="0px 0px 0px 1px #e9edf3;"
+          _hover={{ shadow: 'lg' }}
+        >
+          <Editable
+            defaultValue={block.title}
+            onSubmit={handleTitleSubmit}
+            fontWeight="semibold"
+            isDisabled={isReadOnly}
+          >
+            <EditablePreview
+              _hover={{ bgColor: 'gray.300' }}
+              px="1"
+              userSelect={'none'}
+            />
+            <EditableInput minW="0" px="1" />
+          </Editable>
+          {typebot && (
+            <StepNodesList blockId={block.id} stepIds={block.stepIds} />
+          )}
+        </Stack>
+      )}
+    </ContextMenu>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNodeContextMenu.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNodeContextMenu.tsx
@ -0,0 +1,17 @@
+import { MenuList, MenuItem } from '@chakra-ui/react'
+import { TrashIcon } from 'assets/icons'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+
+export const BlockNodeContextMenu = ({ blockId }: { blockId: string }) => {
+  const { deleteBlock } = useTypebot()
+
+  const handleDeleteClick = () => deleteBlock(blockId)
+
+  return (
+    <MenuList>
+      <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
+        Delete
+      </MenuItem>
+    </MenuList>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/index.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/index.tsx
@ -0,0 +1 @@
+export { BlockNode } from './BlockNode'
--- a/apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNode.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNode.tsx
@ -0,0 +1,156 @@
+import {
+  EditablePreview,
+  EditableInput,
+  Editable,
+  useEventListener,
+  Flex,
+  Fade,
+  IconButton,
+} from '@chakra-ui/react'
+import { PlusIcon } from 'assets/icons'
+import { ContextMenu } from 'components/shared/ContextMenu'
+import { Coordinates } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ChoiceInputStep, ChoiceItem } from 'models'
+import React, { useState } from 'react'
+import { isNotDefined, isSingleChoiceInput } from 'utils'
+import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
+import { ButtonNodeContextMenu } from './ButtonNodeContextMenu'
+
+type Props = {
+  item: ChoiceItem
+  onMouseMoveBottomOfElement?: () => void
+  onMouseMoveTopOfElement?: () => void
+  onMouseDown?: (
+    stepNodePosition: { absolute: Coordinates; relative: Coordinates },
+    item: ChoiceItem
+  ) => void
+}
+
+export const ButtonNode = ({
+  item,
+  onMouseDown,
+  onMouseMoveBottomOfElement,
+  onMouseMoveTopOfElement,
+}: Props) => {
+  const { deleteChoiceItem, updateChoiceItem, typebot, createChoiceItem } =
+    useTypebot()
+  const [mouseDownEvent, setMouseDownEvent] =
+    useState<{ absolute: Coordinates; relative: Coordinates }>()
+  const [isMouseOver, setIsMouseOver] = useState(false)
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!onMouseDown) return
+    e.stopPropagation()
+    const element = e.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const relativeX = e.clientX - rect.left
+    const relativeY = e.clientY - rect.top
+    setMouseDownEvent({
+      absolute: { x: e.clientX + relativeX, y: e.clientY + relativeY },
+      relative: { x: relativeX, y: relativeY },
+    })
+  }
+
+  const handleGlobalMouseUp = () => {
+    setMouseDownEvent(undefined)
+  }
+  useEventListener('mouseup', handleGlobalMouseUp)
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!onMouseMoveBottomOfElement || !onMouseMoveTopOfElement) return
+    const isMovingAndIsMouseDown =
+      mouseDownEvent &&
+      onMouseDown &&
+      (event.movementX > 0 || event.movementY > 0)
+    if (isMovingAndIsMouseDown) {
+      onMouseDown(mouseDownEvent, item)
+      deleteChoiceItem(item.id)
+      setMouseDownEvent(undefined)
+    }
+    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 handleInputSubmit = (content: string) =>
+    updateChoiceItem(item.id, { content: content === '' ? undefined : content })
+
+  const handlePlusClick = () => {
+    const nextIndex =
+      (
+        typebot?.steps.byId[item.stepId] as ChoiceInputStep
+      ).options.itemIds.indexOf(item.id) + 1
+    createChoiceItem({ stepId: item.stepId }, nextIndex)
+  }
+
+  const handleMouseEnter = () => setIsMouseOver(true)
+  const handleMouseLeave = () => setIsMouseOver(false)
+
+  return (
+    <ContextMenu<HTMLDivElement>
+      renderMenu={() => <ButtonNodeContextMenu itemId={item.id} />}
+    >
+      {(ref, isOpened) => (
+        <Flex
+          ref={ref}
+          align="center"
+          pos="relative"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          justifyContent="center"
+          shadow="sm"
+          _hover={{ shadow: 'md' }}
+          transition="box-shadow 200ms"
+          borderWidth="1px"
+          rounded="md"
+          px="4"
+          py="2"
+          borderColor={isOpened ? 'blue.400' : 'gray.300'}
+        >
+          <Editable
+            defaultValue={item.content ?? 'Click to edit'}
+            flex="1"
+            startWithEditView={isNotDefined(item.content)}
+            onSubmit={handleInputSubmit}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+          >
+            <EditablePreview
+              w="full"
+              color={item.content !== 'Click to edit' ? 'inherit' : 'gray.500'}
+            />
+            <EditableInput />
+          </Editable>
+          {typebot && isSingleChoiceInput(typebot.steps.byId[item.stepId]) && (
+            <SourceEndpoint
+              source={{
+                blockId: typebot.steps.byId[item.stepId].blockId,
+                stepId: item.stepId,
+                buttonId: item.id,
+              }}
+              pos="absolute"
+              right="15px"
+            />
+          )}
+          <Fade
+            in={isMouseOver}
+            style={{ position: 'absolute', bottom: '-15px', zIndex: 3 }}
+            unmountOnExit
+          >
+            <IconButton
+              aria-label="Add item"
+              icon={<PlusIcon />}
+              size="xs"
+              shadow="md"
+              colorScheme="blue"
+              onClick={handlePlusClick}
+            />
+          </Fade>
+        </Flex>
+      )}
+    </ContextMenu>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNodeContextMenu.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNodeContextMenu.tsx
@ -0,0 +1,17 @@
+import { MenuList, MenuItem } from '@chakra-ui/react'
+import { TrashIcon } from 'assets/icons'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+
+export const ButtonNodeContextMenu = ({ itemId }: { itemId: string }) => {
+  const { deleteChoiceItem } = useTypebot()
+
+  const handleDeleteClick = () => deleteChoiceItem(itemId)
+
+  return (
+    <MenuList>
+      <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
+        Delete
+      </MenuItem>
+    </MenuList>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNodeOverlay.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNodeOverlay.tsx
@ -0,0 +1,26 @@
+import { Flex, FlexProps } from '@chakra-ui/react'
+import { ChoiceItem } from 'models'
+import React from 'react'
+
+type Props = {
+  item: ChoiceItem
+} & FlexProps
+
+export const ButtonNodeOverlay = ({ item, ...props }: Props) => {
+  return (
+    <Flex
+      px="4"
+      py="2"
+      rounded="md"
+      bgColor="white"
+      borderWidth="1px"
+      borderColor={'gray.300'}
+      w="212px"
+      pointerEvents="none"
+      shadow="lg"
+      {...props}
+    >
+      {item.content ?? 'Click to edit'}
+    </Flex>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNodesList.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNodesList.tsx
@ -0,0 +1,154 @@
+import { Flex, Portal, Stack, Text, useEventListener } from '@chakra-ui/react'
+import { useStepDnd } from 'contexts/StepDndContext'
+import { Coordinates } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ChoiceInputStep, ChoiceItem } from 'models'
+import React, { useMemo, useState } from 'react'
+import { ButtonNode } from './ButtonNode'
+import { SourceEndpoint } from '../../Endpoints'
+import { ButtonNodeOverlay } from './ButtonNodeOverlay'
+
+type ChoiceItemsListProps = {
+  step: ChoiceInputStep
+}
+
+export const ButtonNodesList = ({ step }: ChoiceItemsListProps) => {
+  const { typebot, createChoiceItem } = useTypebot()
+  const {
+    draggedChoiceItem,
+    mouseOverBlockId,
+    setDraggedChoiceItem,
+    setMouseOverBlockId,
+  } = useStepDnd()
+  const showSortPlaceholders = useMemo(
+    () => mouseOverBlockId === step.blockId && draggedChoiceItem,
+    [draggedChoiceItem, mouseOverBlockId, step.blockId]
+  )
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+  })
+  const [relativeCoordinates, setRelativeCoordinates] = useState({ x: 0, y: 0 })
+  const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
+    number | undefined
+  >()
+
+  const handleStepMove = (event: MouseEvent) => {
+    if (!draggedChoiceItem) return
+    const { clientX, clientY } = event
+    setPosition({
+      ...position,
+      x: clientX - relativeCoordinates.x,
+      y: clientY - relativeCoordinates.y,
+    })
+  }
+  useEventListener('mousemove', handleStepMove)
+
+  const handleMouseUp = (e: MouseEvent) => {
+    if (!draggedChoiceItem) return
+    if (expandedPlaceholderIndex !== -1) {
+      e.stopPropagation()
+      createChoiceItem(draggedChoiceItem, expandedPlaceholderIndex)
+    }
+    setMouseOverBlockId(undefined)
+    setExpandedPlaceholderIndex(undefined)
+    setDraggedChoiceItem(undefined)
+  }
+  useEventListener('mouseup', handleMouseUp, undefined, { capture: true })
+
+  const handleStepMouseDown = (
+    { absolute, relative }: { absolute: Coordinates; relative: Coordinates },
+    item: ChoiceItem
+  ) => {
+    setPosition(absolute)
+    setRelativeCoordinates(relative)
+    setMouseOverBlockId(typebot?.steps.byId[item.stepId].blockId)
+    setDraggedChoiceItem(item)
+  }
+
+  const handleMouseOnTopOfStep = (stepIndex: number) => {
+    if (!draggedChoiceItem) return
+    setExpandedPlaceholderIndex(stepIndex === 0 ? 0 : stepIndex)
+  }
+
+  const handleMouseOnBottomOfStep = (stepIndex: number) => {
+    if (!draggedChoiceItem) return
+    setExpandedPlaceholderIndex(stepIndex + 1)
+  }
+
+  const stopPropagating = (e: React.MouseEvent) => e.stopPropagation()
+
+  return (
+    <Stack flex={1} spacing={1} onClick={stopPropagating}>
+      <Flex
+        h={expandedPlaceholderIndex === 0 ? '50px' : '2px'}
+        bgColor={'gray.300'}
+        visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+        rounded="lg"
+        transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+      />
+      {step.options.itemIds.map((itemId, idx) => (
+        <Stack key={itemId} spacing={1}>
+          {typebot?.choiceItems.byId[itemId] && (
+            <ButtonNode
+              item={typebot?.choiceItems.byId[itemId]}
+              onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
+              onMouseMoveBottomOfElement={() => {
+                handleMouseOnBottomOfStep(idx)
+              }}
+              onMouseDown={handleStepMouseDown}
+            />
+          )}
+          <Flex
+            h={
+              showSortPlaceholders && expandedPlaceholderIndex === idx + 1
+                ? '50px'
+                : '2px'
+            }
+            bgColor={'gray.300'}
+            visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+            rounded="lg"
+            transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+          />
+        </Stack>
+      ))}
+      <Stack>
+        <Flex
+          px="4"
+          py="2"
+          borderWidth="1px"
+          borderColor="gray.300"
+          bgColor="gray.50"
+          rounded="md"
+          pos="relative"
+          align="center"
+          cursor="not-allowed"
+        >
+          <Text color="gray.500">Default</Text>
+          <SourceEndpoint
+            source={{
+              blockId: step.blockId,
+              stepId: step.id,
+            }}
+            pos="absolute"
+            right="15px"
+          />
+        </Flex>
+      </Stack>
+
+      {draggedChoiceItem && draggedChoiceItem.stepId === step.id && (
+        <Portal>
+          <ButtonNodeOverlay
+            item={draggedChoiceItem}
+            pos="fixed"
+            top="0"
+            left="0"
+            style={{
+              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+            }}
+          />
+        </Portal>
+      )}
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/ButtonNode/index.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ButtonNode/index.tsx
@ -0,0 +1 @@
+export { ButtonNodesList } from './ButtonNodesList'
--- a/apps/builder/components/shared/Graph/Nodes/DropOffNode.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/DropOffNode.tsx
@ -0,0 +1,72 @@
+import { Tag, Text, VStack } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import React, { useMemo } from 'react'
+import { AnswersCount } from 'services/analytics'
+import { computeSourceCoordinates } from 'services/graph'
+import { isDefined } from 'utils'
+
+type Props = {
+  answersCounts: AnswersCount[]
+  blockId: string
+}
+
+export const DropOffNode = ({ answersCounts, blockId }: Props) => {
+  const { typebot } = useTypebot()
+
+  const totalAnswers = useMemo(
+    () => answersCounts.find((a) => a.blockId === blockId)?.totalAnswers,
+    [answersCounts, blockId]
+  )
+
+  const { totalDroppedUser, dropOffRate } = useMemo(() => {
+    if (!typebot || totalAnswers === undefined)
+      return { previousTotal: undefined, dropOffRate: undefined }
+    const previousBlockIds = typebot.edges.allIds
+      .map((edgeId) => {
+        const edge = typebot.edges.byId[edgeId]
+        return edge.to.blockId === blockId ? edge.from.blockId : undefined
+      })
+      .filter((blockId) => isDefined(blockId))
+    const previousTotal = answersCounts
+      .filter((a) => previousBlockIds.includes(a.blockId))
+      .reduce((prev, acc) => acc.totalAnswers + prev, 0)
+    if (previousTotal === 0)
+      return { previousTotal: undefined, dropOffRate: undefined }
+    const totalDroppedUser = previousTotal - totalAnswers
+
+    return {
+      totalDroppedUser,
+      dropOffRate: Math.round((totalDroppedUser / previousTotal) * 100),
+    }
+  }, [answersCounts, blockId, totalAnswers, typebot])
+
+  const labelCoordinates = useMemo(() => {
+    if (!typebot) return { x: 0, y: 0 }
+    const sourceBlock = typebot?.blocks.byId[blockId]
+    if (!sourceBlock) return
+    return computeSourceCoordinates(
+      sourceBlock?.graphCoordinates,
+      sourceBlock?.stepIds.length - 1
+    )
+  }, [blockId, typebot])
+
+  if (!labelCoordinates) return <></>
+  return (
+    <VStack
+      bgColor={'red.500'}
+      color="white"
+      rounded="md"
+      p="2"
+      justifyContent="center"
+      style={{
+        transform: `translate(${labelCoordinates.x - 20}px, ${
+          labelCoordinates.y + 80
+        }px)`,
+      }}
+      pos="absolute"
+    >
+      <Text>{dropOffRate}%</Text>
+      <Tag colorScheme="red">{totalDroppedUser} users</Tag>
+    </VStack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/MediaBubblePopoverContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/MediaBubblePopoverContent.tsx
@ -0,0 +1,56 @@
+import {
+  Portal,
+  PopoverContent,
+  PopoverArrow,
+  PopoverBody,
+} from '@chakra-ui/react'
+import { ImageUploadContent } from 'components/shared/ImageUploadContent'
+import {
+  BubbleStep,
+  BubbleStepContent,
+  BubbleStepType,
+  TextBubbleStep,
+} from 'models'
+import { useRef } from 'react'
+import { VideoUploadContent } from './VideoUploadContent'
+
+type Props = {
+  step: Exclude<BubbleStep, TextBubbleStep>
+  onContentChange: (content: BubbleStepContent) => void
+}
+
+export const MediaBubblePopoverContent = (props: Props) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
+
+  return (
+    <Portal>
+      <PopoverContent onMouseDown={handleMouseDown} w="500px">
+        <PopoverArrow />
+        <PopoverBody ref={ref} shadow="lg">
+          <MediaBubbleContent {...props} />
+        </PopoverBody>
+      </PopoverContent>
+    </Portal>
+  )
+}
+
+export const MediaBubbleContent = ({ step, onContentChange }: Props) => {
+  const handleImageUrlChange = (url: string) => onContentChange({ url })
+
+  switch (step.type) {
+    case BubbleStepType.IMAGE: {
+      return (
+        <ImageUploadContent
+          url={step.content?.url}
+          onSubmit={handleImageUrlChange}
+        />
+      )
+    }
+    case BubbleStepType.VIDEO: {
+      return (
+        <VideoUploadContent content={step.content} onSubmit={onContentChange} />
+      )
+    }
+  }
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/VideoUploadContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/VideoUploadContent.tsx
@ -0,0 +1,37 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { VideoBubbleContent, VideoBubbleContentType } from 'models'
+import urlParser from 'js-video-url-parser/lib/base'
+import 'js-video-url-parser/lib/provider/vimeo'
+import 'js-video-url-parser/lib/provider/youtube'
+import { isDefined } from 'utils'
+
+type Props = {
+  content?: VideoBubbleContent
+  onSubmit: (content: VideoBubbleContent) => void
+}
+
+export const VideoUploadContent = ({ content, onSubmit }: Props) => {
+  const handleUrlChange = (url: string) => {
+    const info = urlParser.parse(url)
+    return isDefined(info) && info.provider && info.id
+      ? onSubmit({
+          type: info.provider as VideoBubbleContentType,
+          url,
+          id: info.id,
+        })
+      : onSubmit({ type: VideoBubbleContentType.URL, url })
+  }
+  return (
+    <Stack p="2">
+      <InputWithVariableButton
+        placeholder="Paste the video link..."
+        initialValue={content?.url ?? ''}
+        onChange={handleUrlChange}
+      />
+      <Text fontSize="sm" color="gray.400" textAlign="center">
+        Works with Youtube, Vimeo and others
+      </Text>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/index.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/index.tsx
@ -0,0 +1 @@
+export { MediaBubblePopoverContent } from './MediaBubblePopoverContent'
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsModal.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsModal.tsx
@ -0,0 +1,34 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  ModalBodyProps,
+} from '@chakra-ui/react'
+import React from 'react'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const SettingsModal = ({
+  isOpen,
+  onClose,
+  ...props
+}: Props & ModalBodyProps) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader />
+        <ModalCloseButton />
+        <ModalBody {...props}>{props.children}</ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
@ -0,0 +1,206 @@
+import {
+  PopoverContent,
+  PopoverArrow,
+  PopoverBody,
+  useEventListener,
+  Portal,
+  IconButton,
+} from '@chakra-ui/react'
+import { ExpandIcon } from 'assets/icons'
+import {
+  InputStepType,
+  IntegrationStepType,
+  LogicStepType,
+  Step,
+  StepOptions,
+  TextBubbleStep,
+  Webhook,
+} from 'models'
+import { useRef } from 'react'
+import {
+  TextInputSettingsBody,
+  NumberInputSettingsBody,
+  EmailInputSettingsBody,
+  UrlInputSettingsBody,
+  DateInputSettingsBody,
+} from './bodies'
+import { ChoiceInputSettingsBody } from './bodies/ChoiceInputSettingsBody'
+import { ConditionSettingsBody } from './bodies/ConditionSettingsBody'
+import { GoogleAnalyticsSettings } from './bodies/GoogleAnalyticsSettings'
+import { GoogleSheetsSettingsBody } from './bodies/GoogleSheetsSettingsBody'
+import { PhoneNumberSettingsBody } from './bodies/PhoneNumberSettingsBody'
+import { RedirectSettings } from './bodies/RedirectSettings'
+import { SetVariableSettings } from './bodies/SetVariableSettings'
+import { WebhookSettings } from './bodies/WebhookSettings'
+
+type Props = {
+  step: Exclude<Step, TextBubbleStep>
+  webhook?: Webhook
+  onExpandClick: () => void
+  onOptionsChange: (options: StepOptions) => void
+  onWebhookChange: (updates: Partial<Webhook>) => void
+  onTestRequestClick: () => void
+}
+
+export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
+
+  const handleMouseWheel = (e: WheelEvent) => {
+    e.stopPropagation()
+  }
+  useEventListener('wheel', handleMouseWheel, ref.current)
+  return (
+    <Portal>
+      <PopoverContent onMouseDown={handleMouseDown} pos="relative">
+        <PopoverArrow />
+        <PopoverBody
+          py="6"
+          overflowY="scroll"
+          maxH="400px"
+          ref={ref}
+          shadow="lg"
+        >
+          <StepSettings {...props} />
+        </PopoverBody>
+        <IconButton
+          pos="absolute"
+          top="5px"
+          right="5px"
+          aria-label="expand"
+          icon={<ExpandIcon />}
+          size="xs"
+          onClick={onExpandClick}
+        />
+      </PopoverContent>
+    </Portal>
+  )
+}
+
+export const StepSettings = ({
+  step,
+  webhook,
+  onOptionsChange,
+  onWebhookChange,
+  onTestRequestClick,
+}: {
+  step: Step
+  webhook?: Webhook
+  onOptionsChange: (options: StepOptions) => void
+  onWebhookChange: (updates: Partial<Webhook>) => void
+  onTestRequestClick: () => void
+}) => {
+  switch (step.type) {
+    case InputStepType.TEXT: {
+      return (
+        <TextInputSettingsBody
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case InputStepType.NUMBER: {
+      return (
+        <NumberInputSettingsBody
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case InputStepType.EMAIL: {
+      return (
+        <EmailInputSettingsBody
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case InputStepType.URL: {
+      return (
+        <UrlInputSettingsBody
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case InputStepType.DATE: {
+      return (
+        <DateInputSettingsBody
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case InputStepType.PHONE: {
+      return (
+        <PhoneNumberSettingsBody
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case InputStepType.CHOICE: {
+      return (
+        <ChoiceInputSettingsBody
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case LogicStepType.SET_VARIABLE: {
+      return (
+        <SetVariableSettings
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case LogicStepType.CONDITION: {
+      return (
+        <ConditionSettingsBody
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case LogicStepType.REDIRECT: {
+      return (
+        <RedirectSettings
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case IntegrationStepType.GOOGLE_SHEETS: {
+      return (
+        <GoogleSheetsSettingsBody
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+          stepId={step.id}
+        />
+      )
+    }
+    case IntegrationStepType.GOOGLE_ANALYTICS: {
+      return (
+        <GoogleAnalyticsSettings
+          options={step.options}
+          onOptionsChange={onOptionsChange}
+        />
+      )
+    }
+    case IntegrationStepType.WEBHOOK: {
+      return (
+        <WebhookSettings
+          options={step.options}
+          webhook={webhook as Webhook}
+          onOptionsChange={onOptionsChange}
+          onWebhookChange={onWebhookChange}
+          onTestRequestClick={onTestRequestClick}
+        />
+      )
+    }
+    default: {
+      return <></>
+    }
+  }
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
@ -0,0 +1,55 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { ChoiceInputOptions, Variable } from 'models'
+import React from 'react'
+
+type ChoiceInputSettingsBodyProps = {
+  options?: ChoiceInputOptions
+  onOptionsChange: (options: ChoiceInputOptions) => void
+}
+
+export const ChoiceInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: ChoiceInputSettingsBodyProps) => {
+  const handleIsMultipleChange = (isMultipleChoice: boolean) =>
+    options && onOptionsChange({ ...options, isMultipleChoice })
+  const handleButtonLabelChange = (buttonLabel: string) =>
+    options && onOptionsChange({ ...options, buttonLabel })
+  const handleVariableChange = (variable?: Variable) =>
+    options && onOptionsChange({ ...options, variableId: variable?.id })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithLabel
+        id={'is-multiple'}
+        label={'Multiple choice?'}
+        initialValue={options?.isMultipleChoice ?? false}
+        onCheckChange={handleIsMultipleChange}
+      />
+      {options?.isMultipleChoice && (
+        <Stack>
+          <FormLabel mb="0" htmlFor="button">
+            Button label:
+          </FormLabel>
+          <DebouncedInput
+            id="button"
+            initialValue={options?.buttonLabel ?? 'Send'}
+            onChange={handleButtonLabelChange}
+          />
+        </Stack>
+      )}
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options?.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx
@ -0,0 +1,50 @@
+import { Stack } from '@chakra-ui/react'
+import { DropdownList } from 'components/shared/DropdownList'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { TableListItemProps } from 'components/shared/TableList'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { Comparison, Variable, ComparisonOperators } from 'models'
+
+export const ComparisonItem = ({
+  item,
+  onItemChange,
+}: TableListItemProps<Comparison>) => {
+  const handleSelectVariable = (variable?: Variable) => {
+    if (variable?.id === item.variableId) return
+    onItemChange({ ...item, variableId: variable?.id })
+  }
+
+  const handleSelectComparisonOperator = (
+    comparisonOperator: ComparisonOperators
+  ) => {
+    if (comparisonOperator === item.comparisonOperator) return
+    onItemChange({ ...item, comparisonOperator })
+  }
+  const handleChangeValue = (value: string) => {
+    if (value === item.value) return
+    onItemChange({ ...item, value })
+  }
+
+  return (
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+      <VariableSearchInput
+        initialVariableId={item.variableId}
+        onSelectVariable={handleSelectVariable}
+        placeholder="Search for a variable"
+      />
+      <DropdownList<ComparisonOperators>
+        currentItem={item.comparisonOperator}
+        onItemSelect={handleSelectComparisonOperator}
+        items={Object.values(ComparisonOperators)}
+        placeholder="Select an operator"
+      />
+      {item.comparisonOperator !== ComparisonOperators.IS_SET && (
+        <InputWithVariableButton
+          initialValue={item.value ?? ''}
+          onChange={handleChangeValue}
+          placeholder="Type a value..."
+        />
+      )}
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ConditonSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ConditonSettingsBody.tsx
@ -0,0 +1,39 @@
+import { Flex } from '@chakra-ui/react'
+import { DropdownList } from 'components/shared/DropdownList'
+import { TableList } from 'components/shared/TableList'
+import { Comparison, ConditionOptions, LogicalOperator, Table } from 'models'
+import React from 'react'
+import { ComparisonItem } from './ComparisonsItem'
+
+type ConditionSettingsBodyProps = {
+  options: ConditionOptions
+  onOptionsChange: (options: ConditionOptions) => void
+}
+
+export const ConditionSettingsBody = ({
+  options,
+  onOptionsChange,
+}: ConditionSettingsBodyProps) => {
+  const handleComparisonsChange = (comparisons: Table<Comparison>) =>
+    onOptionsChange({ ...options, comparisons })
+  const handleLogicalOperatorChange = (logicalOperator: LogicalOperator) =>
+    onOptionsChange({ ...options, logicalOperator })
+
+  return (
+    <TableList<Comparison>
+      initialItems={options.comparisons}
+      onItemsChange={handleComparisonsChange}
+      Item={ComparisonItem}
+      ComponentBetweenItems={() => (
+        <Flex justify="center">
+          <DropdownList<LogicalOperator>
+            currentItem={options.logicalOperator}
+            onItemSelect={handleLogicalOperatorChange}
+            items={Object.values(LogicalOperator)}
+          />
+        </Flex>
+      )}
+      addLabel="Add a comparison"
+    />
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/index.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/index.tsx
@ -0,0 +1 @@
+export { ConditionSettingsBody } from './ConditonSettingsBody'
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
@ -0,0 +1,89 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { DateInputOptions, Variable } from 'models'
+import React from 'react'
+
+type DateInputSettingsBodyProps = {
+  options: DateInputOptions
+  onOptionsChange: (options: DateInputOptions) => void
+}
+
+export const DateInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: DateInputSettingsBodyProps) => {
+  const handleFromChange = (from: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, from } })
+  const handleToChange = (to: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, to } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+  const handleIsRangeChange = (isRange: boolean) =>
+    onOptionsChange({ ...options, isRange })
+  const handleHasTimeChange = (hasTime: boolean) =>
+    onOptionsChange({ ...options, hasTime })
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithLabel
+        id="is-range"
+        label={'Is range?'}
+        initialValue={options.isRange}
+        onCheckChange={handleIsRangeChange}
+      />
+      <SwitchWithLabel
+        id="with-time"
+        label={'With time?'}
+        initialValue={options.isRange}
+        onCheckChange={handleHasTimeChange}
+      />
+      {options.isRange && (
+        <Stack>
+          <FormLabel mb="0" htmlFor="from">
+            From label:
+          </FormLabel>
+          <DebouncedInput
+            id="from"
+            initialValue={options.labels.from}
+            onChange={handleFromChange}
+          />
+        </Stack>
+      )}
+      {options?.isRange && (
+        <Stack>
+          <FormLabel mb="0" htmlFor="to">
+            To label:
+          </FormLabel>
+          <DebouncedInput
+            id="to"
+            initialValue={options.labels.to}
+            onChange={handleToChange}
+          />
+        </Stack>
+      )}
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <DebouncedInput
+          id="button"
+          initialValue={options.labels.button}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
@ -0,0 +1,56 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { EmailInputOptions, Variable } from 'models'
+import React from 'react'
+
+type EmailInputSettingsBodyProps = {
+  options: EmailInputOptions
+  onOptionsChange: (options: EmailInputOptions) => void
+}
+
+export const EmailInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: EmailInputSettingsBodyProps) => {
+  const handlePlaceholderChange = (placeholder: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="placeholder">
+          Placeholder:
+        </FormLabel>
+        <DebouncedInput
+          id="placeholder"
+          initialValue={options.labels.placeholder}
+          onChange={handlePlaceholderChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <DebouncedInput
+          id="button"
+          initialValue={options.labels.button}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx
@ -0,0 +1,117 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  FormLabel,
+  Stack,
+  Tag,
+} from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { GoogleAnalyticsOptions } from 'models'
+import React from 'react'
+
+type Props = {
+  options?: GoogleAnalyticsOptions
+  onOptionsChange: (options: GoogleAnalyticsOptions) => void
+}
+
+export const GoogleAnalyticsSettings = ({
+  options,
+  onOptionsChange,
+}: Props) => {
+  const handleTrackingIdChange = (trackingId: string) =>
+    onOptionsChange({ ...options, trackingId })
+
+  const handleCategoryChange = (category: string) =>
+    onOptionsChange({ ...options, category })
+
+  const handleActionChange = (action: string) =>
+    onOptionsChange({ ...options, action })
+
+  const handleLabelChange = (label: string) =>
+    onOptionsChange({ ...options, label })
+
+  const handleValueChange = (value?: string) =>
+    onOptionsChange({
+      ...options,
+      value: value ? parseFloat(value) : undefined,
+    })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="tracking-id">
+          Tracking ID:
+        </FormLabel>
+        <DebouncedInput
+          id="tracking-id"
+          initialValue={options?.trackingId ?? ''}
+          placeholder="G-123456..."
+          onChange={handleTrackingIdChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="category">
+          Event category:
+        </FormLabel>
+        <InputWithVariableButton
+          id="category"
+          initialValue={options?.category ?? ''}
+          placeholder="Example: Typebot"
+          onChange={handleCategoryChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="action">
+          Event action:
+        </FormLabel>
+        <InputWithVariableButton
+          id="action"
+          initialValue={options?.action ?? ''}
+          placeholder="Example: Submit email"
+          onChange={handleActionChange}
+        />
+      </Stack>
+      <Accordion allowToggle>
+        <AccordionItem>
+          <h2>
+            <AccordionButton>
+              <Box flex="1" textAlign="left">
+                Advanced
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4} as={Stack} spacing="6">
+            <Stack>
+              <FormLabel mb="0" htmlFor="label">
+                Event label <Tag>Optional</Tag>:
+              </FormLabel>
+              <InputWithVariableButton
+                id="label"
+                initialValue={options?.label ?? ''}
+                placeholder="Example: Campaign Z"
+                onChange={handleLabelChange}
+              />
+            </Stack>
+            <Stack>
+              <FormLabel mb="0" htmlFor="value">
+                Event value <Tag>Optional</Tag>:
+              </FormLabel>
+              <InputWithVariableButton
+                id="value"
+                initialValue={options?.value?.toString() ?? ''}
+                placeholder="Example: 0"
+                onChange={handleValueChange}
+              />
+            </Stack>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx
@ -0,0 +1,35 @@
+import { Stack } from '@chakra-ui/react'
+import { DropdownList } from 'components/shared/DropdownList'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { TableListItemProps } from 'components/shared/TableList'
+import { Cell } from 'models'
+
+export const CellWithValueStack = ({
+  item,
+  onItemChange,
+  columns,
+}: TableListItemProps<Cell> & { columns: string[] }) => {
+  const handleColumnSelect = (column: string) => {
+    if (item.column === column) return
+    onItemChange({ ...item, column })
+  }
+  const handleValueChange = (value: string) => {
+    if (item.value === value) return
+    onItemChange({ ...item, value })
+  }
+  return (
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+      <DropdownList<string>
+        currentItem={item.column}
+        onItemSelect={handleColumnSelect}
+        items={columns}
+        placeholder="Select a column"
+      />
+      <InputWithVariableButton
+        initialValue={item.value ?? ''}
+        onChange={handleValueChange}
+        placeholder="Type a value..."
+      />
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithVariableIdStack.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithVariableIdStack.tsx
@ -0,0 +1,37 @@
+import { Stack } from '@chakra-ui/react'
+import { DropdownList } from 'components/shared/DropdownList'
+import { TableListItemProps } from 'components/shared/TableList'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { ExtractingCell, Variable } from 'models'
+
+export const CellWithVariableIdStack = ({
+  item,
+  onItemChange,
+  columns,
+}: TableListItemProps<ExtractingCell> & { columns: string[] }) => {
+  const handleColumnSelect = (column: string) => {
+    if (item.column === column) return
+    onItemChange({ ...item, column })
+  }
+
+  const handleVariableIdChange = (variable?: Variable) => {
+    if (item.variableId === variable?.id) return
+    onItemChange({ ...item, variableId: variable?.id })
+  }
+
+  return (
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+      <DropdownList<string>
+        currentItem={item.column}
+        onItemSelect={handleColumnSelect}
+        items={columns}
+        placeholder="Select a column"
+      />
+      <VariableSearchInput
+        initialVariableId={item.variableId}
+        onSelectVariable={handleVariableIdChange}
+        placeholder="Select a variable"
+      />
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx
@ -0,0 +1,233 @@
+import { Divider, Stack, Text } from '@chakra-ui/react'
+import { CredentialsDropdown } from 'components/shared/CredentialsDropdown'
+import { DropdownList } from 'components/shared/DropdownList'
+import { TableList, TableListItemProps } from 'components/shared/TableList'
+import { useTypebot } from 'contexts/TypebotContext'
+import { CredentialsType } from 'db'
+import {
+  Cell,
+  defaultTable,
+  ExtractingCell,
+  GoogleSheetsAction,
+  GoogleSheetsGetOptions,
+  GoogleSheetsInsertRowOptions,
+  GoogleSheetsOptions,
+  GoogleSheetsUpdateRowOptions,
+  Table,
+} from 'models'
+import React, { useMemo } from 'react'
+import {
+  getGoogleSheetsConsentScreenUrl,
+  Sheet,
+  useSheets,
+} from 'services/integrations'
+import { isDefined } from 'utils'
+import { SheetsDropdown } from './SheetsDropdown'
+import { SpreadsheetsDropdown } from './SpreadsheetDropdown'
+import { CellWithValueStack } from './CellWithValueStack'
+import { CellWithVariableIdStack } from './CellWithVariableIdStack'
+
+type Props = {
+  options: GoogleSheetsOptions
+  onOptionsChange: (options: GoogleSheetsOptions) => void
+  stepId: string
+}
+
+export const GoogleSheetsSettingsBody = ({
+  options,
+  onOptionsChange,
+  stepId,
+}: Props) => {
+  const { save, hasUnsavedChanges } = useTypebot()
+  const { sheets, isLoading } = useSheets({
+    credentialsId: options?.credentialsId,
+    spreadsheetId: options?.spreadsheetId,
+  })
+  const sheet = useMemo(
+    () => sheets?.find((s) => s.id === options?.sheetId),
+    [sheets, options?.sheetId]
+  )
+  const handleCredentialsIdChange = (credentialsId: string) =>
+    onOptionsChange({ ...options, credentialsId })
+  const handleSpreadsheetIdChange = (spreadsheetId: string) =>
+    onOptionsChange({ ...options, spreadsheetId })
+  const handleSheetIdChange = (sheetId: string) =>
+    onOptionsChange({ ...options, sheetId })
+
+  const handleActionChange = (action: GoogleSheetsAction) => {
+    switch (action) {
+      case GoogleSheetsAction.GET: {
+        const newOptions: GoogleSheetsGetOptions = {
+          ...options,
+          action,
+          cellsToExtract: defaultTable,
+        }
+        return onOptionsChange({ ...newOptions })
+      }
+      case GoogleSheetsAction.INSERT_ROW: {
+        const newOptions: GoogleSheetsInsertRowOptions = {
+          ...options,
+          action,
+          cellsToInsert: defaultTable,
+        }
+        return onOptionsChange({ ...newOptions })
+      }
+      case GoogleSheetsAction.UPDATE_ROW: {
+        const newOptions: GoogleSheetsUpdateRowOptions = {
+          ...options,
+          action,
+          cellsToUpsert: defaultTable,
+        }
+        return onOptionsChange({ ...newOptions })
+      }
+    }
+  }
+
+  const handleCreateNewClick = async () => {
+    if (hasUnsavedChanges) {
+      const errorToastId = await save()
+      if (errorToastId) return
+    }
+    const linkElement = document.createElement('a')
+    linkElement.href = getGoogleSheetsConsentScreenUrl(
+      window.location.href,
+      stepId
+    )
+    linkElement.click()
+  }
+
+  return (
+    <Stack>
+      <CredentialsDropdown
+        type={CredentialsType.GOOGLE_SHEETS}
+        currentCredentialsId={options?.credentialsId}
+        onCredentialsSelect={handleCredentialsIdChange}
+        onCreateNewClick={handleCreateNewClick}
+      />
+      {options?.credentialsId && (
+        <SpreadsheetsDropdown
+          credentialsId={options.credentialsId}
+          spreadsheetId={options.spreadsheetId}
+          onSelectSpreadsheetId={handleSpreadsheetIdChange}
+        />
+      )}
+      {options?.spreadsheetId && options.credentialsId && (
+        <SheetsDropdown
+          sheets={sheets ?? []}
+          isLoading={isLoading}
+          sheetId={options.sheetId}
+          onSelectSheetId={handleSheetIdChange}
+        />
+      )}
+      {options?.spreadsheetId &&
+        options.credentialsId &&
+        isDefined(options.sheetId) && (
+          <>
+            <Divider />
+            <DropdownList<GoogleSheetsAction>
+              currentItem={'action' in options ? options.action : undefined}
+              onItemSelect={handleActionChange}
+              items={Object.values(GoogleSheetsAction)}
+              placeholder="Select an operation"
+            />
+          </>
+        )}
+      {sheet && 'action' in options && (
+        <ActionOptions
+          options={options}
+          sheet={sheet}
+          onOptionsChange={onOptionsChange}
+        />
+      )}
+    </Stack>
+  )
+}
+
+const ActionOptions = ({
+  options,
+  sheet,
+  onOptionsChange,
+}: {
+  options:
+    | GoogleSheetsGetOptions
+    | GoogleSheetsInsertRowOptions
+    | GoogleSheetsUpdateRowOptions
+  sheet: Sheet
+  onOptionsChange: (options: GoogleSheetsOptions) => void
+}) => {
+  const handleInsertColumnsChange = (cellsToInsert: Table<Cell>) =>
+    onOptionsChange({ ...options, cellsToInsert } as GoogleSheetsOptions)
+
+  const handleUpsertColumnsChange = (cellsToUpsert: Table<Cell>) =>
+    onOptionsChange({ ...options, cellsToUpsert } as GoogleSheetsOptions)
+
+  const handleReferenceCellChange = (referenceCell: Cell) =>
+    onOptionsChange({ ...options, referenceCell } as GoogleSheetsOptions)
+
+  const handleExtractingCellsChange = (cellsToExtract: Table<ExtractingCell>) =>
+    onOptionsChange({ ...options, cellsToExtract } as GoogleSheetsOptions)
+
+  const UpdatingCellItem = useMemo(
+    () => (props: TableListItemProps<Cell>) =>
+      <CellWithValueStack {...props} columns={sheet.columns} />,
+    [sheet.columns]
+  )
+
+  const ExtractingCellItem = useMemo(
+    () => (props: TableListItemProps<ExtractingCell>) =>
+      <CellWithVariableIdStack {...props} columns={sheet.columns} />,
+    [sheet.columns]
+  )
+
+  switch (options.action) {
+    case GoogleSheetsAction.INSERT_ROW:
+      return (
+        <TableList<Cell>
+          initialItems={options.cellsToInsert}
+          onItemsChange={handleInsertColumnsChange}
+          Item={UpdatingCellItem}
+          addLabel="Add a value"
+        />
+      )
+    case GoogleSheetsAction.UPDATE_ROW:
+      return (
+        <Stack>
+          <Text>Row to select</Text>
+          <CellWithValueStack
+            id={'reference'}
+            columns={sheet.columns}
+            item={options.referenceCell ?? {}}
+            onItemChange={handleReferenceCellChange}
+          />
+          <Text>Cells to update</Text>
+          <TableList<Cell>
+            initialItems={options.cellsToUpsert}
+            onItemsChange={handleUpsertColumnsChange}
+            Item={UpdatingCellItem}
+            addLabel="Add a value"
+          />
+        </Stack>
+      )
+    case GoogleSheetsAction.GET:
+      return (
+        <Stack>
+          <Text>Row to select</Text>
+          <CellWithValueStack
+            id={'reference'}
+            columns={sheet.columns}
+            item={options.referenceCell ?? {}}
+            onItemChange={handleReferenceCellChange}
+          />
+          <Text>Cells to extract</Text>
+          <TableList<ExtractingCell>
+            initialItems={options.cellsToExtract}
+            onItemsChange={handleExtractingCellsChange}
+            Item={ExtractingCellItem}
+            addLabel="Add a value"
+          />
+        </Stack>
+      )
+    default:
+      return <></>
+  }
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx
@ -0,0 +1,37 @@
+import { SearchableDropdown } from 'components/shared/SearchableDropdown'
+import { useMemo } from 'react'
+import { Sheet } from 'services/integrations'
+import { isDefined } from 'utils'
+
+type Props = {
+  sheets: Sheet[]
+  isLoading: boolean
+  sheetId?: string
+  onSelectSheetId: (id: string) => void
+}
+
+export const SheetsDropdown = ({
+  sheets,
+  isLoading,
+  sheetId,
+  onSelectSheetId,
+}: Props) => {
+  const currentSheet = useMemo(
+    () => sheets?.find((s) => s.id === sheetId),
+    [sheetId, sheets]
+  )
+
+  const handleSpreadsheetSelect = (name: string) => {
+    const id = sheets?.find((s) => s.name === name)?.id
+    if (isDefined(id)) onSelectSheetId(id)
+  }
+  return (
+    <SearchableDropdown
+      selectedItem={currentSheet?.name}
+      items={(sheets ?? []).map((s) => s.name)}
+      onValueChange={handleSpreadsheetSelect}
+      placeholder={'Select the sheet'}
+      isLoading={isLoading}
+    />
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx
@ -0,0 +1,35 @@
+import { SearchableDropdown } from 'components/shared/SearchableDropdown'
+import { useMemo } from 'react'
+import { useSpreadsheets } from 'services/integrations'
+
+type Props = {
+  credentialsId: string
+  spreadsheetId?: string
+  onSelectSpreadsheetId: (id: string) => void
+}
+
+export const SpreadsheetsDropdown = ({
+  credentialsId,
+  spreadsheetId,
+  onSelectSpreadsheetId,
+}: Props) => {
+  const { spreadsheets, isLoading } = useSpreadsheets({ credentialsId })
+  const currentSpreadsheet = useMemo(
+    () => spreadsheets?.find((s) => s.id === spreadsheetId),
+    [spreadsheetId, spreadsheets]
+  )
+
+  const handleSpreadsheetSelect = (name: string) => {
+    const id = spreadsheets?.find((s) => s.name === name)?.id
+    if (id) onSelectSpreadsheetId(id)
+  }
+  return (
+    <SearchableDropdown
+      selectedItem={currentSpreadsheet?.name}
+      items={(spreadsheets ?? []).map((s) => s.name)}
+      onValueChange={handleSpreadsheetSelect}
+      placeholder={'Search for spreadsheet'}
+      isLoading={isLoading}
+    />
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/index.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/index.tsx
@ -0,0 +1 @@
+export { GoogleSheetsSettingsBody } from './GoogleSheetsSettingsBody'
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx
@ -0,0 +1,94 @@
+import { FormLabel, HStack, Stack } from '@chakra-ui/react'
+import { SmartNumberInput } from 'components/shared/SmartNumberInput'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { NumberInputOptions, Variable } from 'models'
+import React from 'react'
+import { removeUndefinedFields } from 'services/utils'
+
+type NumberInputSettingsBodyProps = {
+  options: NumberInputOptions
+  onOptionsChange: (options: NumberInputOptions) => void
+}
+
+export const NumberInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: NumberInputSettingsBodyProps) => {
+  const handlePlaceholderChange = (placeholder: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
+  const handleMinChange = (min?: number) =>
+    onOptionsChange(removeUndefinedFields({ ...options, min }))
+  const handleMaxChange = (max?: number) =>
+    onOptionsChange(removeUndefinedFields({ ...options, max }))
+  const handleStepChange = (step?: number) =>
+    onOptionsChange(removeUndefinedFields({ ...options, step }))
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="placeholder">
+          Placeholder:
+        </FormLabel>
+        <DebouncedInput
+          id="placeholder"
+          initialValue={options.labels.placeholder}
+          onChange={handlePlaceholderChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <DebouncedInput
+          id="button"
+          initialValue={options?.labels?.button ?? 'Send'}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+      <HStack justifyContent="space-between">
+        <FormLabel mb="0" htmlFor="min">
+          Min:
+        </FormLabel>
+        <SmartNumberInput
+          id="min"
+          value={options.min}
+          onValueChange={handleMinChange}
+        />
+      </HStack>
+      <HStack justifyContent="space-between">
+        <FormLabel mb="0" htmlFor="max">
+          Max:
+        </FormLabel>
+        <SmartNumberInput
+          id="max"
+          value={options.max}
+          onValueChange={handleMaxChange}
+        />
+      </HStack>
+      <HStack justifyContent="space-between">
+        <FormLabel mb="0" htmlFor="step">
+          Step:
+        </FormLabel>
+        <SmartNumberInput
+          id="step"
+          value={options.step}
+          onValueChange={handleStepChange}
+        />
+      </HStack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx
@ -0,0 +1,56 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { EmailInputOptions, Variable } from 'models'
+import React from 'react'
+
+type PhoneNumberSettingsBodyProps = {
+  options: EmailInputOptions
+  onOptionsChange: (options: EmailInputOptions) => void
+}
+
+export const PhoneNumberSettingsBody = ({
+  options,
+  onOptionsChange,
+}: PhoneNumberSettingsBodyProps) => {
+  const handlePlaceholderChange = (placeholder: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="placeholder">
+          Placeholder:
+        </FormLabel>
+        <DebouncedInput
+          id="placeholder"
+          initialValue={options.labels.placeholder}
+          onChange={handlePlaceholderChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <DebouncedInput
+          id="button"
+          initialValue={options.labels.button}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx
@ -0,0 +1,40 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
+import { RedirectOptions } from 'models'
+import React from 'react'
+
+type Props = {
+  options: RedirectOptions
+  onOptionsChange: (options: RedirectOptions) => void
+}
+
+export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
+  const handleUrlChange = (url?: string) => onOptionsChange({ ...options, url })
+
+  const handleIsNewTabChange = (isNewTab: boolean) =>
+    onOptionsChange({ ...options, isNewTab })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="tracking-id">
+          Url:
+        </FormLabel>
+        <InputWithVariableButton
+          id="tracking-id"
+          initialValue={options.url ?? ''}
+          placeholder="Type a URL..."
+          onChange={handleUrlChange}
+        />
+      </Stack>
+      <SwitchWithLabel
+        id="new-tab"
+        label="Open in new tab?"
+        initialValue={options.isNewTab}
+        onCheckChange={handleIsNewTabChange}
+      />
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SetVariableSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SetVariableSettings.tsx
@ -0,0 +1,42 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedTextarea } from 'components/shared/DebouncedTextarea'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { SetVariableOptions, Variable } from 'models'
+import React from 'react'
+
+type Props = {
+  options: SetVariableOptions
+  onOptionsChange: (options: SetVariableOptions) => void
+}
+
+export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
+  const handleExpressionChange = (expressionToEvaluate: string) =>
+    onOptionsChange({ ...options, expressionToEvaluate })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable-search">
+          Search or create variable:
+        </FormLabel>
+        <VariableSearchInput
+          onSelectVariable={handleVariableChange}
+          initialVariableId={options.variableId}
+          id="variable-search"
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="expression">
+          Value / Expression:
+        </FormLabel>
+        <DebouncedTextarea
+          id="expression"
+          initialValue={options.expressionToEvaluate ?? ''}
+          onChange={handleExpressionChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
@ -0,0 +1,65 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { TextInputOptions, Variable } from 'models'
+import React from 'react'
+
+type TextInputSettingsBodyProps = {
+  options: TextInputOptions
+  onOptionsChange: (options: TextInputOptions) => void
+}
+
+export const TextInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: TextInputSettingsBodyProps) => {
+  const handlePlaceholderChange = (placeholder: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
+  const handleLongChange = (isLong: boolean) =>
+    onOptionsChange({ ...options, isLong })
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithLabel
+        id="switch"
+        label="Long text?"
+        initialValue={options?.isLong ?? false}
+        onCheckChange={handleLongChange}
+      />
+      <Stack>
+        <FormLabel mb="0" htmlFor="placeholder">
+          Placeholder:
+        </FormLabel>
+        <DebouncedInput
+          id="placeholder"
+          initialValue={options.labels.placeholder}
+          onChange={handlePlaceholderChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <DebouncedInput
+          id="button"
+          initialValue={options.labels.button}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx
@ -0,0 +1,56 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { UrlInputOptions, Variable } from 'models'
+import React from 'react'
+
+type UrlInputSettingsBodyProps = {
+  options: UrlInputOptions
+  onOptionsChange: (options: UrlInputOptions) => void
+}
+
+export const UrlInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: UrlInputSettingsBodyProps) => {
+  const handlePlaceholderChange = (placeholder: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="placeholder">
+          Placeholder:
+        </FormLabel>
+        <DebouncedInput
+          id="placeholder"
+          initialValue={options.labels.placeholder}
+          onChange={handlePlaceholderChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <DebouncedInput
+          id="button"
+          initialValue={options.labels.button}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/KeyValueInputs.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/KeyValueInputs.tsx
@ -0,0 +1,62 @@
+import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { TableListItemProps } from 'components/shared/TableList'
+import { KeyValue } from 'models'
+
+export const QueryParamsInputs = (props: TableListItemProps<KeyValue>) => (
+  <KeyValueInputs
+    {...props}
+    keyPlaceholder="e.g. email"
+    valuePlaceholder="e.g. {{Email}}"
+  />
+)
+
+export const HeadersInputs = (props: TableListItemProps<KeyValue>) => (
+  <KeyValueInputs
+    {...props}
+    keyPlaceholder="e.g. Content-Type"
+    valuePlaceholder="e.g. application/json"
+  />
+)
+
+export const KeyValueInputs = ({
+  id,
+  item,
+  onItemChange,
+  keyPlaceholder,
+  valuePlaceholder,
+}: TableListItemProps<KeyValue> & {
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+}) => {
+  const handleKeyChange = (key: string) => {
+    if (key === item.key) return
+    onItemChange({ ...item, key })
+  }
+  const handleValueChange = (value: string) => {
+    if (value === item.value) return
+    onItemChange({ ...item, value })
+  }
+  return (
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+      <FormControl>
+        <FormLabel htmlFor={'key' + id}>Key:</FormLabel>
+        <InputWithVariableButton
+          id={'key' + id}
+          initialValue={item.key ?? ''}
+          onChange={handleKeyChange}
+          placeholder={keyPlaceholder}
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel htmlFor={'value' + id}>Value:</FormLabel>
+        <InputWithVariableButton
+          id={'value' + id}
+          initialValue={item.value ?? ''}
+          onChange={handleValueChange}
+          placeholder={valuePlaceholder}
+        />
+      </FormControl>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/ResponseMappingInputs.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/ResponseMappingInputs.tsx
@ -0,0 +1,38 @@
+import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
+import { SearchableDropdown } from 'components/shared/SearchableDropdown'
+import { TableListItemProps } from 'components/shared/TableList'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { Variable, ResponseVariableMapping } from 'models'
+
+export const DataVariableInputs = ({
+  item,
+  onItemChange,
+  dataItems,
+}: TableListItemProps<ResponseVariableMapping> & { dataItems: string[] }) => {
+  const handleBodyPathChange = (bodyPath: string) =>
+    onItemChange({ ...item, bodyPath })
+  const handleVariableChange = (variable?: Variable) =>
+    onItemChange({ ...item, variableId: variable?.id })
+
+  return (
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+      <FormControl>
+        <FormLabel htmlFor="name">Data:</FormLabel>
+        <SearchableDropdown
+          items={dataItems}
+          value={item.bodyPath}
+          onValueChange={handleBodyPathChange}
+          placeholder="Select the data"
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel htmlFor="value">Set variable:</FormLabel>
+        <VariableSearchInput
+          onSelectVariable={handleVariableChange}
+          placeholder="Search for a variable"
+          initialVariableId={item.variableId}
+        />
+      </FormControl>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/VariableForTestInputs.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/VariableForTestInputs.tsx
@ -0,0 +1,38 @@
+import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { TableListItemProps } from 'components/shared/TableList'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { VariableForTest, Variable } from 'models'
+
+export const VariableForTestInputs = ({
+  id,
+  item,
+  onItemChange,
+}: TableListItemProps<VariableForTest>) => {
+  const handleVariableSelect = (variable?: Variable) =>
+    onItemChange({ ...item, variableId: variable?.id })
+  const handleValueChange = (value: string) => {
+    if (value === item.value) return
+    onItemChange({ ...item, value })
+  }
+  return (
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+      <FormControl>
+        <FormLabel htmlFor={'name' + id}>Variable name:</FormLabel>
+        <VariableSearchInput
+          id={'name' + id}
+          initialVariableId={item.variableId}
+          onSelectVariable={handleVariableSelect}
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel htmlFor={'value' + id}>Test value:</FormLabel>
+        <DebouncedInput
+          id={'value' + id}
+          initialValue={item.value ?? ''}
+          onChange={handleValueChange}
+        />
+      </FormControl>
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
@ -0,0 +1,212 @@
+import React, { useMemo, useState } from 'react'
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Button,
+  Flex,
+  Stack,
+  useToast,
+} from '@chakra-ui/react'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { useTypebot } from 'contexts/TypebotContext'
+import {
+  HttpMethod,
+  KeyValue,
+  Table,
+  WebhookOptions,
+  VariableForTest,
+  Webhook,
+  ResponseVariableMapping,
+} from 'models'
+import { DropdownList } from 'components/shared/DropdownList'
+import { TableList, TableListItemProps } from 'components/shared/TableList'
+import { CodeEditor } from 'components/shared/CodeEditor'
+import {
+  convertVariableForTestToVariables,
+  executeWebhook,
+  getDeepKeys,
+} from 'services/integrations'
+import { HeadersInputs, QueryParamsInputs } from './KeyValueInputs'
+import { VariableForTestInputs } from './VariableForTestInputs'
+import { DataVariableInputs } from './ResponseMappingInputs'
+
+type Props = {
+  webhook: Webhook
+  options?: WebhookOptions
+  onOptionsChange: (options: WebhookOptions) => void
+  onWebhookChange: (updates: Partial<Webhook>) => void
+  onTestRequestClick: () => void
+}
+
+export const WebhookSettings = ({
+  options,
+  onOptionsChange,
+  webhook,
+  onWebhookChange,
+  onTestRequestClick,
+}: Props) => {
+  const { typebot, save } = useTypebot()
+  const [isTestResponseLoading, setIsTestResponseLoading] = useState(false)
+  const [testResponse, setTestResponse] = useState<string>()
+  const [responseKeys, setResponseKeys] = useState<string[]>([])
+
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+
+  const handleUrlChange = (url?: string) => onWebhookChange({ url })
+
+  const handleMethodChange = (method: HttpMethod) => onWebhookChange({ method })
+
+  const handleQueryParamsChange = (queryParams: Table<KeyValue>) =>
+    onWebhookChange({ queryParams })
+
+  const handleHeadersChange = (headers: Table<KeyValue>) =>
+    onWebhookChange({ headers })
+
+  const handleBodyChange = (body: string) => onWebhookChange({ body })
+
+  const handleVariablesChange = (variablesForTest: Table<VariableForTest>) =>
+    options && onOptionsChange({ ...options, variablesForTest })
+
+  const handleResponseMappingChange = (
+    responseVariableMapping: Table<ResponseVariableMapping>
+  ) => options && onOptionsChange({ ...options, responseVariableMapping })
+
+  const handleTestRequestClick = async () => {
+    if (!typebot || !webhook) return
+    setIsTestResponseLoading(true)
+    onTestRequestClick()
+    await save()
+    const { data, error } = await executeWebhook(
+      typebot.id,
+      webhook.id,
+      convertVariableForTestToVariables(
+        options?.variablesForTest,
+        typebot.variables
+      )
+    )
+    if (error) return toast({ title: error.name, description: error.message })
+    setTestResponse(JSON.stringify(data, undefined, 2))
+    setResponseKeys(getDeepKeys(data))
+    setIsTestResponseLoading(false)
+  }
+
+  const ResponseMappingInputs = useMemo(
+    () => (props: TableListItemProps<ResponseVariableMapping>) =>
+      <DataVariableInputs {...props} dataItems={responseKeys} />,
+    [responseKeys]
+  )
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <Flex>
+          <DropdownList<HttpMethod>
+            currentItem={webhook.method}
+            onItemSelect={handleMethodChange}
+            items={Object.values(HttpMethod)}
+          />
+        </Flex>
+        <InputWithVariableButton
+          placeholder="Your Webhook URL..."
+          initialValue={webhook.url ?? ''}
+          onChange={handleUrlChange}
+        />
+      </Stack>
+      <Accordion allowToggle allowMultiple>
+        <AccordionItem>
+          <AccordionButton justifyContent="space-between">
+            Query params
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} as={Stack} spacing="6">
+            <TableList<KeyValue>
+              initialItems={webhook.queryParams}
+              onItemsChange={handleQueryParamsChange}
+              Item={QueryParamsInputs}
+              addLabel="Add a param"
+            />
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionButton justifyContent="space-between">
+            Headers
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} as={Stack} spacing="6">
+            <TableList<KeyValue>
+              initialItems={webhook.headers}
+              onItemsChange={handleHeadersChange}
+              Item={HeadersInputs}
+              addLabel="Add a value"
+            />
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionButton justifyContent="space-between">
+            Body
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} as={Stack} spacing="6">
+            <CodeEditor
+              value={'test'}
+              lang="json"
+              onChange={handleBodyChange}
+            />
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionButton justifyContent="space-between">
+            Variable values for test
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} as={Stack} spacing="6">
+            <TableList<VariableForTest>
+              initialItems={
+                options?.variablesForTest ?? { byId: {}, allIds: [] }
+              }
+              onItemsChange={handleVariablesChange}
+              Item={VariableForTestInputs}
+              addLabel="Add an entry"
+            />
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+      <Button
+        onClick={handleTestRequestClick}
+        colorScheme="blue"
+        isLoading={isTestResponseLoading}
+      >
+        Test the request
+      </Button>
+      {testResponse && (
+        <CodeEditor isReadOnly lang="json" value={testResponse} />
+      )}
+      {(testResponse || options?.responseVariableMapping) && (
+        <Accordion allowToggle allowMultiple>
+          <AccordionItem>
+            <AccordionButton justifyContent="space-between">
+              Save in variables
+              <AccordionIcon />
+            </AccordionButton>
+            <AccordionPanel pb={4} as={Stack} spacing="6">
+              <TableList<ResponseVariableMapping>
+                initialItems={
+                  options?.responseVariableMapping ?? { byId: {}, allIds: [] }
+                }
+                onItemsChange={handleResponseMappingChange}
+                Item={ResponseMappingInputs}
+                addLabel="Add an entry"
+              />
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )}
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/index.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/index.tsx
@ -0,0 +1 @@
+export { WebhookSettings } from './WebhookSettings'
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/index.ts
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/index.ts
@ -0,0 +1,5 @@
+export * from './DateInputSettingsBody'
+export * from './EmailInputSettingsBody'
+export * from './NumberInputSettingsBody'
+export * from './TextInputSettingsBody'
+export * from './UrlInputSettingsBody'
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/index.ts
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/index.ts
@ -0,0 +1 @@
+export { SettingsPopoverContent } from './SettingsPopoverContent'
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
@ -0,0 +1,307 @@
+import {
+  Flex,
+  HStack,
+  Popover,
+  PopoverTrigger,
+  useDisclosure,
+  useEventListener,
+} from '@chakra-ui/react'
+import React, { useEffect, useState } from 'react'
+import {
+  BubbleStep,
+  BubbleStepContent,
+  DraggableStep,
+  Step,
+  StepOptions,
+  TextBubbleStep,
+  Webhook,
+} from 'models'
+import { Coordinates, useGraph } from 'contexts/GraphContext'
+import { StepIcon } from 'components/editor/StepsSideBar/StepIcon'
+import { isBubbleStep, isTextBubbleStep, isWebhookStep } from 'utils'
+import { StepNodeContent } from './StepNodeContent/StepNodeContent'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ContextMenu } from 'components/shared/ContextMenu'
+import { SettingsPopoverContent } from './SettingsPopoverContent'
+import { StepNodeContextMenu } from './StepNodeContextMenu'
+import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
+import { hasDefaultConnector } from 'services/typebots'
+import { useRouter } from 'next/router'
+import { SettingsModal } from './SettingsPopoverContent/SettingsModal'
+import { StepSettings } from './SettingsPopoverContent/SettingsPopoverContent'
+import { TextBubbleEditor } from './TextBubbleEditor'
+import { TargetEndpoint } from '../../Endpoints'
+import { MediaBubblePopoverContent } from './MediaBubblePopoverContent'
+
+export const StepNode = ({
+  step,
+  isConnectable,
+  onMouseMoveBottomOfElement,
+  onMouseMoveTopOfElement,
+  onMouseDown,
+}: {
+  step: Step
+  isConnectable: boolean
+  onMouseMoveBottomOfElement?: () => void
+  onMouseMoveTopOfElement?: () => void
+  onMouseDown?: (
+    stepNodePosition: { absolute: Coordinates; relative: Coordinates },
+    step: DraggableStep
+  ) => void
+}) => {
+  const { query } = useRouter()
+  const {
+    setConnectingIds,
+    connectingIds,
+    openedStepId,
+    setOpenedStepId,
+    blocksCoordinates,
+  } = useGraph()
+  const { detachStepFromBlock, updateStep, typebot, updateWebhook } =
+    useTypebot()
+  const [localStep, setLocalStep] = useState(step)
+  const [localWebhook, setLocalWebhook] = useState(
+    isWebhookStep(step)
+      ? typebot?.webhooks.byId[step.options.webhookId ?? '']
+      : undefined
+  )
+  const [isConnecting, setIsConnecting] = useState(false)
+  const [isPopoverOpened, setIsPopoverOpened] = useState(
+    openedStepId === step.id
+  )
+
+  const [mouseDownEvent, setMouseDownEvent] =
+    useState<{ absolute: Coordinates; relative: Coordinates }>()
+  const [isEditing, setIsEditing] = useState<boolean>(
+    isTextBubbleStep(step) && step.content.plainText === ''
+  )
+  const {
+    isOpen: isModalOpen,
+    onOpen: onModalOpen,
+    onClose: onModalClose,
+  } = useDisclosure()
+
+  useEffect(() => {
+    setLocalStep(step)
+  }, [step])
+
+  useEffect(() => {
+    if (query.stepId?.toString() === step.id) setOpenedStepId(step.id)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query])
+
+  useEffect(() => {
+    setIsConnecting(
+      connectingIds?.target?.blockId === step.blockId &&
+        connectingIds?.target?.stepId === step.id
+    )
+  }, [connectingIds, step.blockId, step.id])
+
+  const handleModalClose = () => {
+    updateStep(localStep.id, { ...localStep })
+    onModalClose()
+  }
+
+  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 handleMouseDown = (e: React.MouseEvent) => {
+    if (!onMouseDown) return
+    e.stopPropagation()
+    const element = e.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const relativeX = e.clientX - rect.left
+    const relativeY = e.clientY - rect.top
+    setMouseDownEvent({
+      absolute: { x: e.clientX + relativeX, y: e.clientY + relativeY },
+      relative: { x: relativeX, y: relativeY },
+    })
+  }
+
+  const handleGlobalMouseUp = () => {
+    setMouseDownEvent(undefined)
+  }
+  useEventListener('mouseup', handleGlobalMouseUp)
+
+  const handleMouseUp = () => {
+    if (mouseDownEvent) {
+      setIsEditing(true)
+    }
+  }
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!onMouseMoveBottomOfElement || !onMouseMoveTopOfElement) return
+    const isMovingAndIsMouseDown =
+      mouseDownEvent &&
+      onMouseDown &&
+      (event.movementX > 0 || event.movementY > 0)
+    if (isMovingAndIsMouseDown && step.type !== 'start') {
+      onMouseDown(mouseDownEvent, step)
+      detachStepFromBlock(step.id)
+      setMouseDownEvent(undefined)
+    }
+    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 handleCloseEditor = () => {
+    setIsEditing(false)
+  }
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setOpenedStepId(step.id)
+  }
+
+  const handleExpandClick = () => {
+    setOpenedStepId(undefined)
+    onModalOpen()
+  }
+
+  const updateOptions = () => {
+    updateStep(localStep.id, { ...localStep })
+    if (localWebhook) updateWebhook(localWebhook.id, { ...localWebhook })
+  }
+
+  const handleOptionsChange = (options: StepOptions) => {
+    setLocalStep({ ...localStep, options } as Step)
+  }
+
+  const handleContentChange = (content: BubbleStepContent) =>
+    setLocalStep({ ...localStep, content } as Step)
+
+  const handleWebhookChange = (updates: Partial<Webhook>) => {
+    if (!localWebhook) return
+    setLocalWebhook({ ...localWebhook, ...updates })
+  }
+
+  useEffect(() => {
+    if (isPopoverOpened && openedStepId !== step.id) updateOptions()
+    setIsPopoverOpened(openedStepId === step.id)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openedStepId])
+
+  return isEditing && isTextBubbleStep(localStep) ? (
+    <TextBubbleEditor
+      stepId={localStep.id}
+      initialValue={localStep.content.richText}
+      onClose={handleCloseEditor}
+    />
+  ) : (
+    <ContextMenu<HTMLDivElement>
+      renderMenu={() => <StepNodeContextMenu stepId={step.id} />}
+    >
+      {(ref, isOpened) => (
+        <Popover
+          placement="left"
+          isLazy
+          isOpen={isPopoverOpened}
+          closeOnBlur={false}
+        >
+          <PopoverTrigger>
+            <Flex
+              pos="relative"
+              ref={ref}
+              onMouseMove={handleMouseMove}
+              onMouseDown={handleMouseDown}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+              onMouseUp={handleMouseUp}
+              onClick={handleClick}
+              data-testid={`step-${step.id}`}
+              w="full"
+            >
+              <HStack
+                flex="1"
+                userSelect="none"
+                p="3"
+                borderWidth="1px"
+                borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.300'}
+                rounded="lg"
+                cursor={'pointer'}
+                bgColor="white"
+                align="flex-start"
+                w="full"
+              >
+                <StepIcon
+                  type={localStep.type}
+                  mt="1"
+                  data-testid={`${localStep.id}-icon`}
+                />
+                <StepNodeContent step={localStep} />
+                <TargetEndpoint
+                  pos="absolute"
+                  left="-32px"
+                  top="19px"
+                  stepId={localStep.id}
+                />
+                {blocksCoordinates &&
+                  isConnectable &&
+                  hasDefaultConnector(localStep) && (
+                    <SourceEndpoint
+                      source={{
+                        blockId: localStep.blockId,
+                        stepId: localStep.id,
+                      }}
+                      pos="absolute"
+                      right="15px"
+                      bottom="18px"
+                    />
+                  )}
+              </HStack>
+            </Flex>
+          </PopoverTrigger>
+          {hasSettingsPopover(localStep) && (
+            <SettingsPopoverContent
+              step={localStep}
+              webhook={localWebhook}
+              onExpandClick={handleExpandClick}
+              onOptionsChange={handleOptionsChange}
+              onWebhookChange={handleWebhookChange}
+              onTestRequestClick={updateOptions}
+            />
+          )}
+          {isMediaBubbleStep(localStep) && (
+            <MediaBubblePopoverContent
+              step={localStep}
+              onContentChange={handleContentChange}
+            />
+          )}
+          <SettingsModal isOpen={isModalOpen} onClose={handleModalClose}>
+            <StepSettings
+              step={localStep}
+              webhook={localWebhook}
+              onOptionsChange={handleOptionsChange}
+              onWebhookChange={handleWebhookChange}
+              onTestRequestClick={updateOptions}
+            />
+          </SettingsModal>
+        </Popover>
+      )}
+    </ContextMenu>
+  )
+}
+
+const hasSettingsPopover = (step: Step): step is Exclude<Step, BubbleStep> =>
+  !isBubbleStep(step)
+
+const isMediaBubbleStep = (
+  step: Step
+): step is Exclude<BubbleStep, TextBubbleStep> =>
+  isBubbleStep(step) && !isTextBubbleStep(step)
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx
@ -0,0 +1,104 @@
+import { Text } from '@chakra-ui/react'
+import {
+  Step,
+  StartStep,
+  BubbleStepType,
+  InputStepType,
+  LogicStepType,
+  IntegrationStepType,
+} from 'models'
+import { isInputStep } from 'utils'
+import { ButtonNodesList } from '../../ButtonNode'
+import {
+  ConditionContent,
+  SetVariableContent,
+  TextBubbleContent,
+  VideoBubbleContent,
+  WebhookContent,
+  WithVariableContent,
+} from './contents'
+import { ConfigureContent } from './contents/ConfigureContent'
+import { ImageBubbleContent } from './contents/ImageBubbleContent'
+import { PlaceholderContent } from './contents/PlaceholderContent'
+
+type Props = {
+  step: Step | StartStep
+  isConnectable?: boolean
+}
+export const StepNodeContent = ({ step }: Props) => {
+  if (isInputStep(step) && step.options.variableId) {
+    return <WithVariableContent step={step} />
+  }
+  switch (step.type) {
+    case BubbleStepType.TEXT: {
+      return <TextBubbleContent step={step} />
+    }
+    case BubbleStepType.IMAGE: {
+      return <ImageBubbleContent step={step} />
+    }
+    case BubbleStepType.VIDEO: {
+      return <VideoBubbleContent step={step} />
+    }
+    case InputStepType.TEXT:
+    case InputStepType.NUMBER:
+    case InputStepType.EMAIL:
+    case InputStepType.URL:
+    case InputStepType.PHONE: {
+      return (
+        <PlaceholderContent placeholder={step.options.labels.placeholder} />
+      )
+    }
+    case InputStepType.DATE: {
+      return <Text color={'gray.500'}>Pick a date...</Text>
+    }
+    case InputStepType.CHOICE: {
+      return <ButtonNodesList step={step} />
+    }
+    case LogicStepType.SET_VARIABLE: {
+      return <SetVariableContent step={step} />
+    }
+    case LogicStepType.CONDITION: {
+      return <ConditionContent step={step} />
+    }
+    case LogicStepType.REDIRECT: {
+      return (
+        <ConfigureContent
+          label={
+            step.options?.url ? `Redirect to ${step.options?.url}` : undefined
+          }
+        />
+      )
+    }
+    case IntegrationStepType.GOOGLE_SHEETS: {
+      return (
+        <ConfigureContent
+          label={
+            step.options && 'action' in step.options
+              ? step.options.action
+              : undefined
+          }
+        />
+      )
+    }
+    case IntegrationStepType.GOOGLE_ANALYTICS: {
+      return (
+        <ConfigureContent
+          label={
+            step.options?.action
+              ? `Track "${step.options?.action}" `
+              : undefined
+          }
+        />
+      )
+    }
+    case IntegrationStepType.WEBHOOK: {
+      return <WebhookContent step={step} />
+    }
+    case 'start': {
+      return <Text>Start</Text>
+    }
+    default: {
+      return <Text>No input</Text>
+    }
+  }
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ConditionContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ConditionContent.tsx
@ -0,0 +1,57 @@
+import { Flex, Stack, HStack, Tag, Text } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ConditionStep } from 'models'
+import { SourceEndpoint } from '../../../../Endpoints/SourceEndpoint'
+
+export const ConditionContent = ({ step }: { step: ConditionStep }) => {
+  const { typebot } = useTypebot()
+  return (
+    <Flex>
+      {step.options?.comparisons.allIds.length === 0 ? (
+        <Text color={'gray.500'}>Configure...</Text>
+      ) : (
+        <Stack>
+          {step.options?.comparisons.allIds.map((comparisonId, idx) => {
+            const comparison = step.options?.comparisons.byId[comparisonId]
+            const variable =
+              typebot?.variables.byId[comparison?.variableId ?? '']
+            return (
+              <HStack key={comparisonId} spacing={1}>
+                {idx > 0 && <Text>{step.options?.logicalOperator ?? ''}</Text>}
+                {variable?.name && (
+                  <Tag bgColor="orange.400">{variable.name}</Tag>
+                )}
+                {comparison.comparisonOperator && (
+                  <Text>{comparison?.comparisonOperator}</Text>
+                )}
+                {comparison?.value && (
+                  <Tag bgColor={'green.400'}>{comparison.value}</Tag>
+                )}
+              </HStack>
+            )
+          })}
+        </Stack>
+      )}
+      <SourceEndpoint
+        source={{
+          blockId: step.blockId,
+          stepId: step.id,
+          conditionType: 'true',
+        }}
+        pos="absolute"
+        top="7px"
+        right="15px"
+      />
+      <SourceEndpoint
+        source={{
+          blockId: step.blockId,
+          stepId: step.id,
+          conditionType: 'false',
+        }}
+        pos="absolute"
+        bottom="7px"
+        right="15px"
+      />
+    </Flex>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ConfigureContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ConfigureContent.tsx
@ -0,0 +1,10 @@
+import React from 'react'
+import { Text } from '@chakra-ui/react'
+
+type Props = { label?: string }
+
+export const ConfigureContent = ({ label }: Props) => (
+  <Text color={label ? 'currentcolor' : 'gray.500'} isTruncated>
+    {label ?? 'Configure...'}
+  </Text>
+)
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ImageBubbleContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ImageBubbleContent.tsx
@ -0,0 +1,16 @@
+import { Box, Text, Image } from '@chakra-ui/react'
+import { ImageBubbleStep } from 'models'
+
+export const ImageBubbleContent = ({ step }: { step: ImageBubbleStep }) =>
+  !step.content?.url ? (
+    <Text color={'gray.500'}>Click to edit...</Text>
+  ) : (
+    <Box w="full">
+      <Image
+        src={step.content?.url}
+        alt="Step image"
+        rounded="md"
+        objectFit="cover"
+      />
+    </Box>
+  )
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/PlaceholderContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/PlaceholderContent.tsx
@ -0,0 +1,8 @@
+import React from 'react'
+import { Text } from '@chakra-ui/react'
+
+type Props = { placeholder: string }
+
+export const PlaceholderContent = ({ placeholder }: Props) => (
+  <Text color={'gray.500'}>{placeholder}</Text>
+)
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/SetVariableContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/SetVariableContent.tsx
@ -0,0 +1,17 @@
+import { Text } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { SetVariableStep } from 'models'
+
+export const SetVariableContent = ({ step }: { step: SetVariableStep }) => {
+  const { typebot } = useTypebot()
+  const variableName =
+    typebot?.variables.byId[step.options?.variableId ?? '']?.name ?? ''
+  const expression = step.options?.expressionToEvaluate ?? ''
+  return (
+    <Text color={'gray.500'}>
+      {variableName === '' && expression === ''
+        ? 'Click to edit...'
+        : `${variableName} = ${expression}`}
+    </Text>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/TextBubbleContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/TextBubbleContent.tsx
@ -0,0 +1,26 @@
+import { Flex } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { TextBubbleStep } from 'models'
+import React from 'react'
+import { parseVariableHighlight } from 'services/utils'
+
+type Props = {
+  step: TextBubbleStep
+}
+
+export const TextBubbleContent = ({ step }: Props) => {
+  const { typebot } = useTypebot()
+  return (
+    <Flex
+      flexDir={'column'}
+      opacity={step.content.html === '' ? '0.5' : '1'}
+      className="slate-html-container"
+      dangerouslySetInnerHTML={{
+        __html:
+          step.content.html === ''
+            ? `<p>Click to edit...</p>`
+            : parseVariableHighlight(step.content.html, typebot),
+      }}
+    />
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/VideoBubbleContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/VideoBubbleContent.tsx
@ -0,0 +1,51 @@
+import { Box, Text } from '@chakra-ui/react'
+import { VideoBubbleStep, VideoBubbleContentType } from 'models'
+
+export const VideoBubbleContent = ({ step }: { step: VideoBubbleStep }) => {
+  if (!step.content?.url || !step.content.type)
+    return <Text color="gray.500">Click to edit...</Text>
+  switch (step.content.type) {
+    case VideoBubbleContentType.URL:
+      return (
+        <Box w="full" h="120px" pos="relative">
+          <video
+            key={step.content.url}
+            controls
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+              left: '0',
+              top: '0',
+              borderRadius: '10px',
+            }}
+          >
+            <source src={step.content.url} />
+          </video>
+        </Box>
+      )
+    case VideoBubbleContentType.VIMEO:
+    case VideoBubbleContentType.YOUTUBE: {
+      const baseUrl =
+        step.content.type === VideoBubbleContentType.VIMEO
+          ? 'https://player.vimeo.com/video'
+          : 'https://www.youtube.com/embed'
+      return (
+        <Box w="full" h="120px" pos="relative">
+          <iframe
+            src={`${baseUrl}/${step.content.id}`}
+            allowFullScreen
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+              left: '0',
+              top: '0',
+              borderRadius: '10px',
+            }}
+          />
+        </Box>
+      )
+    }
+  }
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/WebhookContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/WebhookContent.tsx
@ -0,0 +1,22 @@
+import { Text } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { WebhookStep } from 'models'
+import { useMemo } from 'react'
+
+type Props = {
+  step: WebhookStep
+}
+
+export const WebhookContent = ({ step }: Props) => {
+  const { typebot } = useTypebot()
+  const webhook = useMemo(
+    () => typebot?.webhooks.byId[step.options?.webhookId ?? ''],
+    [step.options?.webhookId, typebot?.webhooks.byId]
+  )
+  if (!webhook?.url) return <Text color="gray.500">Configure...</Text>
+  return (
+    <Text isTruncated pr="6">
+      {webhook.method} {webhook.url}
+    </Text>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/WithVariableContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/WithVariableContent.tsx
@ -0,0 +1,28 @@
+import { InputStep } from 'models'
+import { chakra, Text } from '@chakra-ui/react'
+import React from 'react'
+import { useTypebot } from 'contexts/TypebotContext'
+
+type Props = {
+  step: InputStep
+}
+
+export const WithVariableContent = ({ step }: Props) => {
+  const { typebot } = useTypebot()
+  const variableName =
+    typebot?.variables.byId[step.options.variableId as string].name
+  return (
+    <Text>
+      Collect{' '}
+      <chakra.span
+        bgColor="orange.400"
+        color="white"
+        rounded="md"
+        py="0.5"
+        px="1"
+      >
+        {variableName}
+      </chakra.span>
+    </Text>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/index.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/index.tsx
@ -0,0 +1,6 @@
+export * from './ConditionContent'
+export * from './SetVariableContent'
+export * from './WithVariableContent'
+export * from './VideoBubbleContent'
+export * from './WebhookContent'
+export * from './TextBubbleContent'
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/index.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/index.tsx
@ -0,0 +1 @@
+export { StepNodeContent } from './StepNodeContent'
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContextMenu.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContextMenu.tsx
@ -0,0 +1,17 @@
+import { MenuList, MenuItem } from '@chakra-ui/react'
+import { TrashIcon } from 'assets/icons'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+
+export const StepNodeContextMenu = ({ stepId }: { stepId: string }) => {
+  const { deleteStep } = useTypebot()
+
+  const handleDeleteClick = () => deleteStep(stepId)
+
+  return (
+    <MenuList>
+      <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
+        Delete
+      </MenuItem>
+    </MenuList>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeOverlay.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeOverlay.tsx
@ -0,0 +1,26 @@
+import { StackProps, HStack } from '@chakra-ui/react'
+import { StartStep, Step } from 'models'
+import { StepIcon } from 'components/editor/StepsSideBar/StepIcon'
+import { StepNodeContent } from './StepNodeContent/StepNodeContent'
+
+export const StepNodeOverlay = ({
+  step,
+  ...props
+}: { step: Step | StartStep } & StackProps) => {
+  return (
+    <HStack
+      p="3"
+      borderWidth="1px"
+      rounded="lg"
+      bgColor="white"
+      cursor={'grab'}
+      w="264px"
+      pointerEvents="none"
+      shadow="lg"
+      {...props}
+    >
+      <StepIcon type={step.type} />
+      <StepNodeContent step={step} />
+    </HStack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodesList.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodesList.tsx
@ -0,0 +1,152 @@
+import { useEventListener, Stack, Flex, Portal } from '@chakra-ui/react'
+import { DraggableStep } from 'models'
+import { useStepDnd } from 'contexts/StepDndContext'
+import { Coordinates, useGraph } from 'contexts/GraphContext'
+import { useMemo, useState } from 'react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { StepNode } from './StepNode'
+import { StepNodeOverlay } from './StepNodeOverlay'
+
+export const StepNodesList = ({
+  blockId,
+  stepIds,
+}: {
+  blockId: string
+  stepIds: string[]
+}) => {
+  const {
+    draggedStep,
+    setDraggedStep,
+    draggedStepType,
+    mouseOverBlockId,
+    setDraggedStepType,
+    setMouseOverBlockId,
+  } = useStepDnd()
+  const { typebot, createStep } = useTypebot()
+  const { isReadOnly } = useGraph()
+  const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
+    number | undefined
+  >()
+  const showSortPlaceholders = useMemo(
+    () => mouseOverBlockId === blockId && (draggedStep || draggedStepType),
+    [mouseOverBlockId, blockId, draggedStep, draggedStepType]
+  )
+  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()
+    setMouseOverBlockId(undefined)
+    setExpandedPlaceholderIndex(undefined)
+    if (!draggedStep && !draggedStepType) return
+    createStep(
+      blockId,
+      draggedStep || draggedStepType,
+      expandedPlaceholderIndex
+    )
+    setDraggedStep(undefined)
+    setDraggedStepType(undefined)
+  }
+
+  const handleStepMouseDown = (
+    { absolute, relative }: { absolute: Coordinates; relative: Coordinates },
+    step: DraggableStep
+  ) => {
+    if (isReadOnly) return
+    setPosition(absolute)
+    setRelativeCoordinates(relative)
+    setMouseOverBlockId(blockId)
+    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.300'}
+        visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+        rounded="lg"
+        transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+      />
+      {typebot &&
+        stepIds.map((stepId, idx) => (
+          <Stack key={stepId} spacing={1}>
+            <StepNode
+              key={stepId}
+              step={typebot.steps.byId[stepId]}
+              isConnectable={!isReadOnly && stepIds.length - 1 === idx}
+              onMouseMoveTopOfElement={handleMouseOnTopOfStep(idx)}
+              onMouseMoveBottomOfElement={handleMouseOnBottomOfStep(idx)}
+              onMouseDown={handleStepMouseDown}
+            />
+            <Flex
+              h={
+                showSortPlaceholders && expandedPlaceholderIndex === idx + 1
+                  ? '50px'
+                  : '2px'
+              }
+              bgColor={'gray.300'}
+              visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+              rounded="lg"
+              transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+            />
+          </Stack>
+        ))}
+      {draggedStep && draggedStep.blockId === blockId && (
+        <Portal>
+          <StepNodeOverlay
+            step={draggedStep}
+            pos="fixed"
+            top="0"
+            left="0"
+            style={{
+              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+            }}
+          />
+        </Portal>
+      )}
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx
@ -0,0 +1,156 @@
+import { Flex, Stack, useOutsideClick } from '@chakra-ui/react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Plate,
+  selectEditor,
+  serializeHtml,
+  TDescendant,
+  withPlate,
+} from '@udecode/plate-core'
+import { editorStyle, platePlugins } from 'libs/plate'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { BaseSelection, createEditor, Transforms } from 'slate'
+import { ToolBar } from './ToolBar'
+import { parseHtmlStringToPlainText } from 'services/utils'
+import { TextBubbleStep, Variable } from 'models'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { ReactEditor } from 'slate-react'
+
+type Props = {
+  stepId: string
+  initialValue: TDescendant[]
+  onClose: () => void
+}
+
+export const TextBubbleEditor = ({ initialValue, stepId, onClose }: Props) => {
+  const randomEditorId = useMemo(() => Math.random().toString(), [])
+  const editor = useMemo(
+    () =>
+      withPlate(createEditor(), { id: randomEditorId, plugins: platePlugins }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+  const { updateStep } = useTypebot()
+  const [value, setValue] = useState(initialValue)
+  const varDropdownRef = useRef<HTMLDivElement | null>(null)
+  const rememberedSelection = useRef<BaseSelection | null>(null)
+  const [isVariableDropdownOpen, setIsVariableDropdownOpen] = useState(false)
+
+  const textEditorRef = useRef<HTMLDivElement>(null)
+
+  useOutsideClick({
+    ref: textEditorRef,
+    handler: () => {
+      save(value)
+      onClose()
+    },
+  })
+
+  useEffect(() => {
+    if (!isVariableDropdownOpen) return
+    const el = varDropdownRef.current
+    if (!el) return
+    const { top, left } = computeTargetCoord()
+    el.style.top = `${top}px`
+    el.style.left = `${left}px`
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isVariableDropdownOpen])
+
+  const computeTargetCoord = () => {
+    const selection = window.getSelection()
+    const relativeParent = textEditorRef.current
+    if (!selection || !relativeParent) return { top: 0, left: 0 }
+    const range = selection.getRangeAt(0)
+    const selectionBoundingRect = range.getBoundingClientRect()
+    const relativeRect = relativeParent.getBoundingClientRect()
+    return {
+      top: selectionBoundingRect.bottom - relativeRect.top,
+      left: selectionBoundingRect.left - relativeRect.left,
+    }
+  }
+
+  const save = (value: unknown[]) => {
+    if (value.length === 0) return
+    const html = serializeHtml(editor, {
+      nodes: value,
+    })
+    updateStep(stepId, {
+      content: {
+        html,
+        richText: value,
+        plainText: parseHtmlStringToPlainText(html),
+      },
+    } as TextBubbleStep)
+  }
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation()
+  }
+
+  const handleVariableSelected = (variable?: Variable) => {
+    setIsVariableDropdownOpen(false)
+    if (!rememberedSelection.current || !variable) return
+    Transforms.select(editor, rememberedSelection.current)
+    Transforms.insertText(editor, '{{' + variable.name + '}}')
+    ReactEditor.focus(editor as unknown as ReactEditor)
+  }
+
+  const handleChangeEditorContent = (val: unknown[]) => {
+    setValue(val)
+    setIsVariableDropdownOpen(false)
+  }
+  return (
+    <Stack
+      flex="1"
+      ref={textEditorRef}
+      borderWidth="2px"
+      borderColor="blue.500"
+      rounded="md"
+      onMouseDown={handleMouseDown}
+      pos="relative"
+      spacing={0}
+    >
+      <ToolBar onVariablesButtonClick={() => setIsVariableDropdownOpen(true)} />
+      <Plate
+        id={randomEditorId}
+        editableProps={{
+          style: editorStyle,
+          autoFocus: true,
+          onFocus: () => {
+            if (editor.children.length === 0) return
+            selectEditor(editor, {
+              edge: 'end',
+            })
+          },
+          'aria-label': 'Text editor',
+          onBlur: () => {
+            rememberedSelection.current = editor.selection
+          },
+        }}
+        initialValue={
+          initialValue.length === 0
+            ? [{ type: 'p', children: [{ text: '' }] }]
+            : initialValue
+        }
+        onChange={handleChangeEditorContent}
+        editor={editor}
+      />
+      {isVariableDropdownOpen && (
+        <Flex
+          pos="absolute"
+          ref={varDropdownRef}
+          shadow="lg"
+          rounded="md"
+          bgColor="white"
+          w="250px"
+        >
+          <VariableSearchInput
+            onSelectVariable={handleVariableSelected}
+            placeholder="Search for a variable"
+            isDefaultOpen
+          />
+        </Flex>
+      )}
+    </Stack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/ToolBar.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/ToolBar.tsx
@ -0,0 +1,54 @@
+import { StackProps, HStack, Button } from '@chakra-ui/react'
+import {
+  MARK_BOLD,
+  MARK_ITALIC,
+  MARK_UNDERLINE,
+} from '@udecode/plate-basic-marks'
+import { usePlateEditorRef, getPluginType } from '@udecode/plate-core'
+import { LinkToolbarButton } from '@udecode/plate-ui-link'
+import { MarkToolbarButton } from '@udecode/plate-ui-toolbar'
+import { BoldIcon, ItalicIcon, UnderlineIcon, LinkIcon } from 'assets/icons'
+
+type Props = { onVariablesButtonClick: () => void } & StackProps
+export const ToolBar = (props: Props) => {
+  const editor = usePlateEditorRef()
+
+  const handleVariablesButtonMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault()
+    props.onVariablesButtonClick()
+  }
+  return (
+    <HStack
+      bgColor={'white'}
+      borderTopRadius="md"
+      p={2}
+      w="full"
+      boxSizing="border-box"
+      borderBottomWidth={1}
+      {...props}
+    >
+      <Button size="sm" onMouseDown={handleVariablesButtonMouseDown}>
+        Variables
+      </Button>
+      <span data-testid="bold-button">
+        <MarkToolbarButton
+          type={getPluginType(editor, MARK_BOLD)}
+          icon={<BoldIcon />}
+        />
+      </span>
+      <span data-testid="italic-button">
+        <MarkToolbarButton
+          type={getPluginType(editor, MARK_ITALIC)}
+          icon={<ItalicIcon />}
+        />
+      </span>
+      <span data-testid="underline-button">
+        <MarkToolbarButton
+          type={getPluginType(editor, MARK_UNDERLINE)}
+          icon={<UnderlineIcon />}
+        />
+      </span>
+      <LinkToolbarButton icon={<LinkIcon />} />
+    </HStack>
+  )
+}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/index.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/index.tsx
@ -0,0 +1 @@
+export { TextBubbleEditor } from './TextBubbleEditor'
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/index.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/index.tsx
@ -0,0 +1 @@
+export { StepNodesList } from './StepNodesList'
--- a/apps/builder/components/shared/Graph/index.tsx
+++ b/apps/builder/components/shared/Graph/index.tsx
@ -0,0 +1 @@
+export { Graph } from './Graph'
				`@ -0,0 +1 @@`
				`export { ButtonNodesList } from './ButtonNodesList'`
				`@ -0,0 +1 @@`
				`export { MediaBubblePopoverContent } from './MediaBubblePopoverContent'`
				`@ -0,0 +1 @@`
				`export { ConditionSettingsBody } from './ConditonSettingsBody'`
				`@ -0,0 +1 @@`
				`export { GoogleSheetsSettingsBody } from './GoogleSheetsSettingsBody'`
				`@ -0,0 +1 @@`
				`export { WebhookSettings } from './WebhookSettings'`
				`@ -0,0 +1 @@`
				`export { SettingsPopoverContent } from './SettingsPopoverContent'`
				`@ -0,0 +1 @@`
				`export { StepNodeContent } from './StepNodeContent'`
				`@ -0,0 +1 @@`
				`export { TextBubbleEditor } from './TextBubbleEditor'`
				`@ -0,0 +1 @@`
				`export { StepNodesList } from './StepNodesList'`