refactor(graph): ♻️ Add Edges table in Typebot

2022-01-19 18:54:49 +01:00
parent ab34f95cce
commit 8bbd8977b2
59 changed files with 1118 additions and 991 deletions
--- a/apps/builder/components/analytics/graph/Edges/Edge.tsx
+++ b/apps/builder/components/analytics/graph/Edges/Edge.tsx
@ -5,26 +5,31 @@ import {
  getAnchorsPosition,
  computeEdgePath,
  getEndpointTopOffset,
+  getSourceEndpointId,
 } from 'services/graph'

-type Props = { stepId: string }
+type Props = { edgeId: string }

-export const Edge = ({ stepId }: Props) => {
+export const Edge = ({ edgeId }: Props) => {
  const { typebot } = useAnalyticsGraph()
-  const step = typebot?.steps.byId[stepId]
+  const edge = typebot?.edges.byId[edgeId]
  const { sourceEndpoints, targetEndpoints, graphPosition } = useGraph()
  const [sourceTop, setSourceTop] = useState(
-    getEndpointTopOffset(graphPosition, sourceEndpoints, stepId)
+    getEndpointTopOffset(
+      graphPosition,
+      sourceEndpoints,
+      getSourceEndpointId(edge)
+    )
  )
  const [targetTop, setTargetTop] = useState(
-    getEndpointTopOffset(graphPosition, sourceEndpoints, step?.target?.stepId)
+    getEndpointTopOffset(graphPosition, sourceEndpoints, edge?.to.stepId)
  )

  useEffect(() => {
    const newSourceTop = getEndpointTopOffset(
      graphPosition,
      sourceEndpoints,
-      stepId
+      getSourceEndpointId(edge)
    )
    const sensibilityThreshold = 10
    const newSourceTopIsTooClose =
@ -39,7 +44,7 @@ export const Edge = ({ stepId }: Props) => {
    const newTargetTop = getEndpointTopOffset(
      graphPosition,
      targetEndpoints,
-      step?.target?.stepId
+      edge?.to.stepId
    )
    const sensibilityThreshold = 10
    const newSourceTopIsTooClose =
@ -51,15 +56,14 @@ export const Edge = ({ stepId }: Props) => {
  }, [graphPosition])

  const { sourceBlock, targetBlock } = useMemo(() => {
-    if (!typebot) return {}
-    if (!step?.target) return {}
-    const targetBlock = typebot.blocks.byId[step.target.blockId]
-    const sourceBlock = typebot.blocks.byId[step.blockId]
+    if (!typebot || !edge) return {}
+    const targetBlock = typebot.blocks.byId[edge.to.blockId]
+    const sourceBlock = typebot.blocks.byId[edge.from.blockId]
    return {
      sourceBlock,
      targetBlock,
    }
-  }, [step?.blockId, step?.target, typebot])
+  }, [edge, typebot])

  const path = useMemo(() => {
    if (!sourceBlock || !targetBlock) return ``
--- a/apps/builder/components/analytics/graph/Edges/Edges.tsx
+++ b/apps/builder/components/analytics/graph/Edges/Edges.tsx
@ -1,8 +1,7 @@
 import { chakra } from '@chakra-ui/system'
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { AnswersCount } from 'services/analytics'
-import { isDefined } from 'utils'
 import { DropOffBlock } from '../blocks/DropOffBlock'
 import { DropOffEdge } from './DropOffEdge'
 import { Edge } from './Edge'
@ -12,13 +11,6 @@ type Props = { answersCounts?: AnswersCount[] }
 export const Edges = ({ answersCounts }: Props) => {
  const { typebot } = useAnalyticsGraph()

-  const stepIdsWithTarget: string[] = useMemo(() => {
-    if (!typebot) return []
-    return typebot.steps.allIds.filter((stepId) =>
-      isDefined(typebot.steps.byId[stepId].target)
-    )
-  }, [typebot])
-
  return (
    <>
      <chakra.svg
@ -29,8 +21,8 @@ export const Edges = ({ answersCounts }: Props) => {
        left="0"
        top="0"
      >
-        {stepIdsWithTarget.map((stepId) => (
-          <Edge key={stepId} stepId={stepId} />
+        {typebot?.edges.allIds.map((edgeId) => (
+          <Edge key={edgeId} edgeId={edgeId} />
        ))}
        <marker
          id={'arrow'}
--- a/apps/builder/components/analytics/graph/blocks/DropOffBlock.tsx
+++ b/apps/builder/components/analytics/graph/blocks/DropOffBlock.tsx
@ -3,6 +3,7 @@ import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
 import React, { useMemo } from 'react'
 import { AnswersCount } from 'services/analytics'
 import { computeSourceCoordinates } from 'services/graph'
+import { isDefined } from 'utils'

 type Props = {
  answersCounts: AnswersCount[]
@ -20,11 +21,12 @@ export const DropOffBlock = ({ answersCounts, blockId }: Props) => {
  const { totalDroppedUser, dropOffRate } = useMemo(() => {
    if (!typebot || totalAnswers === undefined)
      return { previousTotal: undefined, dropOffRate: undefined }
-    const previousBlockIds = typebot.blocks.allIds.filter(() =>
-      typebot.steps.allIds.find(
-        (sId) => typebot.steps.byId[sId].target?.blockId === blockId
-      )
-    )
+    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)
--- a/apps/builder/components/board/graph/BlockNode/BlockNode.tsx
+++ b/apps/builder/components/board/graph/BlockNode/BlockNode.tsx
@ -20,18 +20,17 @@ type Props = {
 }

 export const BlockNode = ({ block }: Props) => {
-  const { connectingIds, setConnectingIds, previewingIds } = useGraph()
+  const { connectingIds, setConnectingIds, previewingEdgeId } = useGraph()
  const { typebot, updateBlock } = useTypebot()
  const { setMouseOverBlockId } = useDnd()
  const { draggedStep, draggedStepType } = useDnd()
  const [isMouseDown, setIsMouseDown] = useState(false)
  const [isConnecting, setIsConnecting] = useState(false)
-  const isPreviewing = useMemo(
-    () =>
-      previewingIds.sourceId === block.id ||
-      previewingIds.targetId === block.id,
-    [block.id, previewingIds.sourceId, previewingIds.targetId]
-  )
+  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])

  useEffect(() => {
    setIsConnecting(
--- a/apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx
@ -128,7 +128,7 @@ export const ChoiceItemNode = ({
              source={{
                blockId: typebot.steps.byId[item.stepId].blockId,
                stepId: item.stepId,
-                choiceItemId: item.id,
+                nodeId: item.id,
              }}
              pos="absolute"
              right="15px"
--- a/apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
@ -49,9 +49,7 @@ export const SettingsPopoverContent = ({ step, onExpandClick }: Props) => {
      <PopoverContent onMouseDown={handleMouseDown} pos="relative">
        <PopoverArrow />
        <PopoverBody
-          px="6"
-          pb="6"
-          pt="4"
+          p="6"
          overflowY="scroll"
          maxH="400px"
          ref={ref}
--- a/apps/builder/components/board/graph/BlockNode/StepNode/SourceEndpoint.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/SourceEndpoint.tsx
@ -1,12 +1,13 @@
 import { Box, BoxProps, Flex } from '@chakra-ui/react'
-import { ConnectingSourceIds, useGraph } from 'contexts/GraphContext'
+import { useGraph } from 'contexts/GraphContext'
+import { Source } from 'models'
 import React, { MouseEvent, useEffect, useRef } from 'react'

 export const SourceEndpoint = ({
  source,
  ...props
 }: BoxProps & {
-  source: ConnectingSourceIds
+  source: Source
 }) => {
  const { setConnectingIds, addSourceEndpoint: addEndpoint } = useGraph()
  const ref = useRef<HTMLDivElement | null>(null)
@ -18,8 +19,7 @@ export const SourceEndpoint = ({

  useEffect(() => {
    if (!ref.current) return
-    const id =
-      source.choiceItemId ?? source.stepId + (source.conditionType ?? '')
+    const id = source.nodeId ?? source.stepId + (source.conditionType ?? '')
    addEndpoint({
      id,
      ref,
--- a/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
@ -1,5 +1,4 @@
 import {
-  Box,
  Flex,
  HStack,
  Popover,
@ -7,12 +6,11 @@ import {
  useDisclosure,
  useEventListener,
 } from '@chakra-ui/react'
-import React, { useEffect, useMemo, useState } from 'react'
-import { Block, DraggableStep, Step } from 'models'
+import React, { useEffect, useState } from 'react'
+import { DraggableStep, Step } from 'models'
 import { useGraph } from 'contexts/GraphContext'
 import { StepIcon } from 'components/board/StepTypesList/StepIcon'
 import {
-  isDefined,
  isInputStep,
  isLogicStep,
  isTextBubbleStep,
@ -50,7 +48,7 @@ export const StepNode = ({
 }) => {
  const { query } = useRouter()
  const { setConnectingIds, connectingIds } = useGraph()
-  const { moveStep, typebot } = useTypebot()
+  const { moveStep } = useTypebot()
  const [isConnecting, setIsConnecting] = useState(false)
  const [mouseDownEvent, setMouseDownEvent] =
    useState<{ absolute: Coordinates; relative: Coordinates }>()
@ -132,30 +130,6 @@ export const StepNode = ({
    setIsEditing(false)
  }

-  const connectedStubPosition: 'right' | 'left' | undefined = useMemo(() => {
-    if (!typebot) return
-    const currentBlock = typebot.blocks?.byId[step.blockId]
-    const isDragginConnectorFromCurrentBlock =
-      connectingIds?.source.blockId === currentBlock?.id &&
-      connectingIds?.target?.blockId
-    const targetBlockId = isDragginConnectorFromCurrentBlock
-      ? connectingIds.target?.blockId
-      : step.target?.blockId
-    const targetedBlock = targetBlockId && typebot.blocks.byId[targetBlockId]
-    return targetedBlock
-      ? targetedBlock.graphCoordinates.x <
-        (currentBlock as Block).graphCoordinates.x
-        ? 'left'
-        : 'right'
-      : undefined
-  }, [
-    typebot,
-    step.blockId,
-    step.target?.blockId,
-    connectingIds?.source.blockId,
-    connectingIds?.target?.blockId,
-  ])
-
  return isEditing && isTextBubbleStep(step) ? (
    <TextEditor
      stepId={step.id}
@ -184,16 +158,6 @@ export const StepNode = ({
              data-testid={`step-${step.id}`}
              w="full"
            >
-              {connectedStubPosition === 'left' && (
-                <Box
-                  h="2px"
-                  pos="absolute"
-                  left="-18px"
-                  top="25px"
-                  w="18px"
-                  bgColor="blue.500"
-                />
-              )}
              <HStack
                flex="1"
                userSelect="none"
@ -225,24 +189,6 @@ export const StepNode = ({
                  />
                )}
              </HStack>
-
-              {isDefined(connectedStubPosition) &&
-                hasDefaultConnector(step) &&
-                isConnectable && (
-                  <Box
-                    h="2px"
-                    pos="absolute"
-                    right={
-                      connectedStubPosition === 'left' ? undefined : '-18px'
-                    }
-                    left={
-                      connectedStubPosition === 'left' ? '-18px' : undefined
-                    }
-                    top="25px"
-                    w="18px"
-                    bgColor="gray.500"
-                  />
-                )}
            </Flex>
          </PopoverTrigger>
          {hasPopover(step) && (
--- a/apps/builder/components/board/graph/Edges/DrawingEdge.tsx
+++ b/apps/builder/components/board/graph/Edges/DrawingEdge.tsx
@ -1,8 +1,9 @@
 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 { Step, Target } from 'models'
+import { Target } from 'models'
 import React, { useMemo, useState } from 'react'
 import {
  computeConnectingEdgePath,
@ -18,7 +19,7 @@ export const DrawingEdge = () => {
    sourceEndpoints,
    targetEndpoints,
  } = useGraph()
-  const { typebot, updateStep, updateChoiceItem } = useTypebot()
+  const { typebot, createEdge } = useTypebot()
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })

  const sourceBlock = useMemo(
@ -32,7 +33,7 @@ export const DrawingEdge = () => {
    return getEndpointTopOffset(
      graphPosition,
      sourceEndpoints,
-      connectingIds.source.choiceItemId ??
+      connectingIds.source.nodeId ??
        connectingIds.source.stepId + (connectingIds.source.conditionType ?? '')
    )
    // eslint-disable-next-line react-hooks/exhaustive-deps
@ -79,23 +80,8 @@ export const DrawingEdge = () => {
  })

  const createNewEdge = (connectingIds: ConnectingIds) => {
-    if (connectingIds.source.choiceItemId) {
-      updateChoiceItem(connectingIds.source.choiceItemId, {
-        target: connectingIds.target,
-      })
-    } else if (connectingIds.source.conditionType === 'true') {
-      updateStep(connectingIds.source.stepId, {
-        trueTarget: connectingIds.target,
-      } as Step)
-    } else if (connectingIds.source.conditionType === 'false') {
-      updateStep(connectingIds.source.stepId, {
-        falseTarget: connectingIds.target,
-      } as Step)
-    } else {
-      updateStep(connectingIds.source.stepId, {
-        target: connectingIds.target,
-      })
-    }
+    assert(connectingIds.target)
+    createEdge({ from: connectingIds.source, to: connectingIds.target })
  }

  if ((mousePosition.x === 0 && mousePosition.y === 0) || !connectingIds)
--- a/apps/builder/components/board/graph/Edges/Edge.tsx
+++ b/apps/builder/components/board/graph/Edges/Edge.tsx
@ -1,14 +1,11 @@
-import { isDefined } from '@udecode/plate-core'
-import assert from 'assert'
 import { Coordinates, useGraph } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import { ChoiceItem } from 'models'
 import React, { useEffect, useMemo, useState } from 'react'
 import {
  getAnchorsPosition,
  computeEdgePath,
  getEndpointTopOffset,
-  getTarget,
+  getSourceEndpointId,
 } from 'services/graph'

 export type AnchorsPositionProps = {
@ -18,44 +15,31 @@ export type AnchorsPositionProps = {
  totalSegments: number
 }

-export enum EdgeType {
-  STEP,
-  CHOICE_ITEM,
-  CONDITION_TRUE,
-  CONDITION_FALSE,
-}
-
-export const Edge = ({
-  type,
-  stepId,
-  item,
-}: {
-  type: EdgeType
-  stepId: string
-  item?: ChoiceItem
-}) => {
+export const Edge = ({ edgeId }: { edgeId: string }) => {
  const { typebot } = useTypebot()
-  const { previewingIds, sourceEndpoints, targetEndpoints, graphPosition } =
+  const { previewingEdgeId, sourceEndpoints, targetEndpoints, graphPosition } =
    useGraph()
-  const step = typebot?.steps.byId[stepId]
-  const isPreviewing = useMemo(
-    () =>
-      previewingIds.sourceId === step?.blockId &&
-      previewingIds.targetId === step?.target?.blockId,
-    [previewingIds.sourceId, previewingIds.targetId, step]
+  const edge = useMemo(
+    () => typebot?.edges.byId[edgeId],
+    [edgeId, typebot?.edges.byId]
  )
+  const isPreviewing = previewingEdgeId === edgeId
  const [sourceTop, setSourceTop] = useState(
-    getEndpointTopOffset(graphPosition, sourceEndpoints, item?.id ?? step?.id)
+    getEndpointTopOffset(
+      graphPosition,
+      sourceEndpoints,
+      getSourceEndpointId(edge)
+    )
  )
  const [targetTop, setTargetTop] = useState(
-    getEndpointTopOffset(graphPosition, targetEndpoints, step?.id)
+    getEndpointTopOffset(graphPosition, targetEndpoints, edge?.to.stepId)
  )

  useEffect(() => {
    const newSourceTop = getEndpointTopOffset(
      graphPosition,
      sourceEndpoints,
-      getSourceEndpointId()
+      getSourceEndpointId(edge)
    )
    const sensibilityThreshold = 10
    const newSourceTopIsTooClose =
@ -66,26 +50,12 @@ export const Edge = ({
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [typebot?.blocks, typebot?.steps, graphPosition, sourceEndpoints])

-  const getSourceEndpointId = () => {
-    switch (type) {
-      case EdgeType.STEP:
-        return step?.id
-      case EdgeType.CHOICE_ITEM:
-        return item?.id
-      case EdgeType.CONDITION_TRUE:
-        return step?.id + 'true'
-      case EdgeType.CONDITION_FALSE:
-        return step?.id + 'false'
-    }
-  }
-
  useEffect(() => {
-    if (!step) return
-    const target = getTarget(step, type)
+    if (!edge) return
    const newTargetTop = getEndpointTopOffset(
      graphPosition,
      targetEndpoints,
-      target?.blockId ?? target?.stepId
+      edge?.to.stepId
    )
    const sensibilityThreshold = 10
    const newSourceTopIsTooClose =
@ -97,20 +67,17 @@ export const Edge = ({
  }, [typebot?.blocks, typebot?.steps, graphPosition, targetEndpoints])

  const { sourceBlock, targetBlock } = useMemo(() => {
-    if (!typebot) return {}
-    const step = typebot.steps.byId[stepId]
-    const sourceBlock = typebot.blocks.byId[step.blockId]
-    const targetBlockId = getTarget(step, type)?.blockId
-    assert(isDefined(targetBlockId))
-    const targetBlock = typebot.blocks.byId[targetBlockId]
+    if (!typebot || !edge?.from.stepId) return {}
+    const sourceBlock = typebot.blocks.byId[edge.from.blockId]
+    const targetBlock = typebot.blocks.byId[edge.to.blockId]
    return {
      sourceBlock,
      targetBlock,
    }
-  }, [stepId, type, typebot])
+  }, [edge?.from.blockId, edge?.from.stepId, edge?.to.blockId, typebot])

  const path = useMemo(() => {
-    if (!sourceBlock || !targetBlock || !step) return ``
+    if (!sourceBlock || !targetBlock) return ``
    const anchorsPosition = getAnchorsPosition({
      sourceBlock,
      targetBlock,
@ -118,7 +85,7 @@ export const Edge = ({
      targetTop,
    })
    return computeEdgePath(anchorsPosition)
-  }, [sourceBlock, sourceTop, step, targetBlock, targetTop])
+  }, [sourceBlock, sourceTop, targetBlock, targetTop])

  if (sourceTop === 0) return <></>
  return (
--- a/apps/builder/components/board/graph/Edges/Edges.tsx
+++ b/apps/builder/components/board/graph/Edges/Edges.tsx
@ -1,39 +1,11 @@
 import { chakra } from '@chakra-ui/system'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import { ChoiceItem, ConditionStep } from 'models'
-import React, { useMemo } from 'react'
-import { isConditionStep, isDefined, isSingleChoiceInput } from 'utils'
+import React from 'react'
 import { DrawingEdge } from './DrawingEdge'
-import { Edge, EdgeType } from './Edge'
+import { Edge } from './Edge'

 export const Edges = () => {
  const { typebot } = useTypebot()
-  const stepIdsWithTarget: string[] = useMemo(() => {
-    if (!typebot) return []
-    return typebot.steps.allIds.filter((stepId) =>
-      isDefined(typebot.steps.byId[stepId].target)
-    )
-  }, [typebot])
-  const singleChoiceItemsWithTarget: ChoiceItem[] = useMemo(() => {
-    if (!typebot) return []
-    return typebot.choiceItems.allIds
-      .filter(
-        (itemId) =>
-          isDefined(typebot.choiceItems.byId[itemId].target) &&
-          isSingleChoiceInput(
-            typebot.steps.byId[typebot.choiceItems.byId[itemId].stepId]
-          )
-      )
-      .map((itemId) => typebot.choiceItems.byId[itemId])
-  }, [typebot])
-  const conditionStepIdsWithTarget = useMemo(
-    () =>
-      typebot?.steps.allIds.filter((stepId) => {
-        const step = typebot.steps.byId[stepId]
-        return isConditionStep(step) && (step.trueTarget || step.falseTarget)
-      }),
-    [typebot?.steps.allIds, typebot?.steps.byId]
-  )

  return (
    <chakra.svg
@ -45,19 +17,8 @@ export const Edges = () => {
      top="0"
    >
      <DrawingEdge />
-      {stepIdsWithTarget.map((stepId) => (
-        <Edge key={stepId} stepId={stepId} type={EdgeType.STEP} />
-      ))}
-      {singleChoiceItemsWithTarget.map((item) => (
-        <Edge
-          key={item.id}
-          stepId={item.stepId}
-          item={item}
-          type={EdgeType.CHOICE_ITEM}
-        />
-      ))}
-      {conditionStepIdsWithTarget?.map((stepId) => (
-        <ConditionStepEdges key={stepId} stepId={stepId} />
+      {typebot?.edges.allIds.map((edgeId) => (
+        <Edge key={edgeId} edgeId={edgeId} />
      ))}
      <marker
        id={'arrow'}
@ -92,18 +53,3 @@ export const Edges = () => {
    </chakra.svg>
  )
 }
-
-const ConditionStepEdges = ({ stepId }: { stepId: string }) => {
-  const { typebot } = useTypebot()
-  const step = typebot?.steps.byId[stepId] as ConditionStep
-  return (
-    <>
-      {step.trueTarget && (
-        <Edge type={EdgeType.CONDITION_TRUE} stepId={stepId} />
-      )}
-      {step.falseTarget && (
-        <Edge type={EdgeType.CONDITION_FALSE} stepId={stepId} />
-      )}
-    </>
-  )
-}
--- a/apps/builder/components/board/preview/PreviewDrawer.tsx
+++ b/apps/builder/components/board/preview/PreviewDrawer.tsx
@ -19,7 +19,7 @@ import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 export const PreviewDrawer = () => {
  const { typebot } = useTypebot()
  const { setRightPanel } = useEditor()
-  const { previewingIds, setPreviewingIds } = useGraph()
+  const { setPreviewingEdgeId } = useGraph()
  const [isResizing, setIsResizing] = useState(false)
  const [width, setWidth] = useState(500)
  const [isResizeHandleVisible, setIsResizeHandleVisible] = useState(false)
@ -45,13 +45,7 @@ export const PreviewDrawer = () => {
  }
  useEventListener('mouseup', handleMouseUp)

-  const handleNewBlockVisible = (targetId: string) =>
-    setPreviewingIds({
-      sourceId: !previewingIds.sourceId
-        ? typebot?.blocks.allIds[0]
-        : previewingIds.targetId,
-      targetId: targetId,
-    })
+  const handleNewBlockVisible = (edgeId: string) => setPreviewingEdgeId(edgeId)

  const handleRestartClick = () => setRestartKey((key) => key + 1)

--- a/apps/builder/components/shared/InputWithVariableButton.tsx
+++ b/apps/builder/components/shared/InputWithVariableButton.tsx
@ -1,9 +1,8 @@
 import {
+  HStack,
  IconButton,
  Input,
-  InputGroup,
  InputProps,
-  InputRightElement,
  Popover,
  PopoverContent,
  PopoverTrigger,
@ -55,6 +54,7 @@ export const InputWithVariableButton = ({
      if (!inputRef.current) return
      inputRef.current.selectionStart = inputRef.current.selectionEnd =
        carretPosition + `{{${variable.name}}}`.length
+      setCarretPosition(inputRef.current.selectionStart)
    }, 100)
  }

@ -67,7 +67,7 @@ export const InputWithVariableButton = ({
    setValue(e.target.value)

  return (
-    <InputGroup>
+    <HStack>
      <Input
        ref={inputRef}
        onKeyUp={handleKeyUp}
@ -77,26 +77,24 @@ export const InputWithVariableButton = ({
        {...props}
        bgColor={'white'}
      />
-      <InputRightElement>
-        <Popover matchWidth isLazy closeOnBlur={false}>
-          <PopoverTrigger>
-            <IconButton
-              aria-label="Insert a variable"
-              icon={<UserIcon />}
-              size="sm"
-              pos="relative"
-            />
-          </PopoverTrigger>
-          <PopoverContent w="full">
-            <VariableSearchInput
-              onSelectVariable={handleVariableSelected}
-              placeholder="Search for a variable"
-              shadow="lg"
-              isDefaultOpen
-            />
-          </PopoverContent>
-        </Popover>
-      </InputRightElement>
-    </InputGroup>
+      <Popover matchWidth isLazy>
+        <PopoverTrigger>
+          <IconButton
+            aria-label="Insert a variable"
+            icon={<UserIcon />}
+            pos="relative"
+            ml="2"
+          />
+        </PopoverTrigger>
+        <PopoverContent w="full">
+          <VariableSearchInput
+            onSelectVariable={handleVariableSelected}
+            placeholder="Search for a variable"
+            shadow="lg"
+            isDefaultOpen
+          />
+        </PopoverContent>
+      </Popover>
+    </HStack>
  )
 }
--- a/apps/builder/components/shared/VariableSearchInput.tsx
+++ b/apps/builder/components/shared/VariableSearchInput.tsx
@ -9,7 +9,6 @@ import {
  Button,
  InputProps,
  IconButton,
-  Portal,
 } from '@chakra-ui/react'
 import { PlusIcon, TrashIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext'
@ -98,8 +97,8 @@ export const VariableSearchInput = ({
        isOpen={isOpen}
        initialFocusRef={inputRef}
        matchWidth
-        offset={[0, 0]}
        isLazy
+        offset={[0, 2]}
      >
        <PopoverTrigger>
          <Input