feat(inputs): ✨ Add Condition step

2022-01-15 17:30:20 +01:00
parent 4ccb7bca49
commit 2814a352b2
30 changed files with 1178 additions and 243 deletions
--- a/apps/builder/components/analytics/graph/Edges/Edge.tsx
+++ b/apps/builder/components/analytics/graph/Edges/Edge.tsx
@ -1,41 +1,76 @@
 import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
-import React, { useMemo } from 'react'
+import { useGraph } from 'contexts/GraphContext'
+import React, { useEffect, useMemo, useState } from 'react'
 import {
  getAnchorsPosition,
-  computeFlowChartConnectorPath,
+  computeEdgePath,
+  getEndpointTopOffset,
 } from 'services/graph'

 type Props = { stepId: string }

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

-  const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
+  useEffect(() => {
+    const newSourceTop = getEndpointTopOffset(
+      graphPosition,
+      sourceEndpoints,
+      stepId
+    )
+    const sensibilityThreshold = 10
+    const newSourceTopIsTooClose =
+      sourceTop < newSourceTop + sensibilityThreshold &&
+      sourceTop > newSourceTop - sensibilityThreshold
+    if (newSourceTopIsTooClose) return
+    setSourceTop(newSourceTop)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [graphPosition])
+
+  useEffect(() => {
+    const newTargetTop = getEndpointTopOffset(
+      graphPosition,
+      targetEndpoints,
+      step?.target?.stepId
+    )
+    const sensibilityThreshold = 10
+    const newSourceTopIsTooClose =
+      targetTop < newTargetTop + sensibilityThreshold &&
+      targetTop > newTargetTop - sensibilityThreshold
+    if (newSourceTopIsTooClose) return
+    setTargetTop(newTargetTop)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [graphPosition])
+
+  const { sourceBlock, targetBlock } = useMemo(() => {
    if (!typebot) return {}
-    const step = typebot.steps.byId[stepId]
-    if (!step.target) return {}
+    if (!step?.target) return {}
    const targetBlock = typebot.blocks.byId[step.target.blockId]
-    const targetStepIndex = step.target.stepId
-      ? targetBlock.stepIds.indexOf(step.target.stepId)
-      : undefined
    const sourceBlock = typebot.blocks.byId[step.blockId]
    return {
      sourceBlock,
      targetBlock,
-      targetStepIndex,
    }
-  }, [stepId, typebot])
+  }, [step?.blockId, step?.target, typebot])

  const path = useMemo(() => {
    if (!sourceBlock || !targetBlock) return ``
    const anchorsPosition = getAnchorsPosition({
      sourceBlock,
      targetBlock,
-      sourceStepIndex: sourceBlock.stepIds.indexOf(stepId),
-      sourceChoiceItemIndex: targetStepIndex,
+      sourceTop,
+      targetTop,
    })
-    return computeFlowChartConnectorPath(anchorsPosition)
-  }, [sourceBlock, stepId, targetBlock, targetStepIndex])
+    return computeEdgePath(anchorsPosition)
+  }, [sourceBlock, sourceTop, targetBlock, targetTop])

  return (
    <path
--- a/apps/builder/components/board/StepTypesList/StepIcon.tsx
+++ b/apps/builder/components/board/StepTypesList/StepIcon.tsx
@ -5,6 +5,7 @@ import {
  CheckSquareIcon,
  EditIcon,
  EmailIcon,
+  FilterIcon,
  FlagIcon,
  GlobeIcon,
  NumberIcon,
@ -45,6 +46,9 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
    case LogicStepType.SET_VARIABLE: {
      return <EditIcon {...props} />
    }
+    case LogicStepType.CONDITION: {
+      return <FilterIcon {...props} />
+    }
    case 'start': {
      return <FlagIcon {...props} />
    }
--- a/apps/builder/components/board/StepTypesList/StepTypeLabel.tsx
+++ b/apps/builder/components/board/StepTypesList/StepTypeLabel.tsx
@ -31,6 +31,9 @@ export const StepTypeLabel = ({ type }: Props) => {
    case LogicStepType.SET_VARIABLE: {
      return <Text>Set variable</Text>
    }
+    case LogicStepType.CONDITION: {
+      return <Text>Condition</Text>
+    }
    default: {
      return <></>
    }
--- a/apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
@ -1,7 +1,13 @@
-import { PopoverContent, PopoverArrow, PopoverBody } from '@chakra-ui/react'
+import {
+  PopoverContent,
+  PopoverArrow,
+  PopoverBody,
+  useEventListener,
+} from '@chakra-ui/react'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import {
  ChoiceInputOptions,
+  ConditionOptions,
  InputStep,
  InputStepType,
  LogicStepType,
@ -9,6 +15,7 @@ import {
  Step,
  TextInputOptions,
 } from 'models'
+import { useRef } from 'react'
 import {
  TextInputSettingsBody,
  NumberInputSettingsBody,
@ -17,6 +24,7 @@ import {
  DateInputSettingsBody,
 } from './bodies'
 import { ChoiceInputSettingsBody } from './bodies/ChoiceInputSettingsBody'
+import { ConditionSettingsBody } from './bodies/ConditionSettingsBody'
 import { PhoneNumberSettingsBody } from './bodies/PhoneNumberSettingsBody'
 import { SetVariableSettingsBody } from './bodies/SetVariableSettingsBody'

@ -25,12 +33,17 @@ type Props = {
 }

 export const SettingsPopoverContent = ({ step }: 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 (
    <PopoverContent onMouseDown={handleMouseDown}>
      <PopoverArrow />
-      <PopoverBody p="6">
+      <PopoverBody p="6" overflowY="scroll" maxH="400px" ref={ref}>
        <SettingsPopoverBodyContent step={step} />
      </PopoverBody>
    </PopoverContent>
@ -40,7 +53,11 @@ export const SettingsPopoverContent = ({ step }: Props) => {
 const SettingsPopoverBodyContent = ({ step }: Props) => {
  const { updateStep } = useTypebot()
  const handleOptionsChange = (
-    options: TextInputOptions | ChoiceInputOptions | SetVariableOptions
+    options:
+      | TextInputOptions
+      | ChoiceInputOptions
+      | SetVariableOptions
+      | ConditionOptions
  ) => updateStep(step.id, { options } as Partial<InputStep>)

  switch (step.type) {
@ -108,6 +125,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
        />
      )
    }
+    case LogicStepType.CONDITION: {
+      return (
+        <ConditionSettingsBody
+          options={step.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
    default: {
      return <></>
    }
--- a/apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsList.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsList.tsx
@ -0,0 +1,157 @@
+import { Button, Fade, Flex, IconButton, Stack } from '@chakra-ui/react'
+import { PlusIcon, TrashIcon } from 'assets/icons'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { DropdownList } from 'components/shared/DropdownList'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import {
+  Comparison,
+  ComparisonOperators,
+  LogicalOperator,
+  Table,
+  Variable,
+} from 'models'
+import React, { useEffect, useState } from 'react'
+import { generate } from 'short-uuid'
+import { useImmer } from 'use-immer'
+
+type Props = {
+  initialComparisons: Table<Comparison>
+  logicalOperator: LogicalOperator
+  onLogicalOperatorChange: (logicalOperator: LogicalOperator) => void
+  onComparisonsChange: (comparisons: Table<Comparison>) => void
+}
+
+export const ComparisonsList = ({
+  initialComparisons,
+  logicalOperator,
+  onLogicalOperatorChange,
+  onComparisonsChange,
+}: Props) => {
+  const [comparisons, setComparisons] = useImmer(initialComparisons)
+  const [showDeleteId, setShowDeleteId] = useState<string | undefined>()
+
+  useEffect(() => {
+    onComparisonsChange(comparisons)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [comparisons])
+
+  const createComparison = () => {
+    setComparisons((comparisons) => {
+      const id = generate()
+      comparisons.byId[id] = {
+        id,
+        comparisonOperator: ComparisonOperators.EQUAL,
+      }
+      comparisons.allIds.push(id)
+    })
+  }
+
+  const updateComparison = (
+    comparisonId: string,
+    updates: Partial<Omit<Comparison, 'id'>>
+  ) =>
+    setComparisons((comparisons) => {
+      comparisons.byId[comparisonId] = {
+        ...comparisons.byId[comparisonId],
+        ...updates,
+      }
+    })
+
+  const deleteComparison = (comparisonId: string) => () => {
+    setComparisons((comparisons) => {
+      delete comparisons.byId[comparisonId]
+      const index = comparisons.allIds.indexOf(comparisonId)
+      if (index !== -1) comparisons.allIds.splice(index, 1)
+    })
+  }
+
+  const handleVariableSelected =
+    (comparisonId: string) => (variable: Variable) => {
+      updateComparison(comparisonId, { variableId: variable.id })
+    }
+
+  const handleComparisonOperatorSelected =
+    (comparisonId: string) => (dropdownItem: ComparisonOperators) =>
+      updateComparison(comparisonId, {
+        comparisonOperator: dropdownItem,
+      })
+  const handleLogicalOperatorSelected = (dropdownItem: LogicalOperator) =>
+    onLogicalOperatorChange(dropdownItem)
+
+  const handleValueChange = (comparisonId: string) => (value: string) =>
+    updateComparison(comparisonId, { value })
+
+  const handleMouseEnter = (comparisonId: string) => () => {
+    setShowDeleteId(comparisonId)
+  }
+
+  const handleMouseLeave = () => setShowDeleteId(undefined)
+
+  return (
+    <Stack spacing="4" py="4">
+      {comparisons.allIds.map((comparisonId, idx) => (
+        <>
+          {idx > 0 && (
+            <Flex justify="center">
+              <DropdownList<LogicalOperator>
+                currentItem={logicalOperator}
+                onItemSelect={handleLogicalOperatorSelected}
+                items={Object.values(LogicalOperator)}
+              />
+            </Flex>
+          )}
+          <Flex
+            pos="relative"
+            onMouseEnter={handleMouseEnter(comparisonId)}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Stack
+              key={comparisonId}
+              bgColor="blue.50"
+              p="4"
+              rounded="md"
+              flex="1"
+            >
+              <VariableSearchInput
+                initialVariableId={comparisons.byId[comparisonId].variableId}
+                onSelectVariable={handleVariableSelected(comparisonId)}
+                bgColor="white"
+                placeholder="Search for a variable"
+              />
+              <DropdownList<ComparisonOperators>
+                currentItem={comparisons.byId[comparisonId].comparisonOperator}
+                onItemSelect={handleComparisonOperatorSelected(comparisonId)}
+                items={Object.values(ComparisonOperators)}
+                bgColor="white"
+              />
+              {comparisons.byId[comparisonId].comparisonOperator !==
+                ComparisonOperators.IS_SET && (
+                <DebouncedInput
+                  delay={100}
+                  initialValue={comparisons.byId[comparisonId].value ?? ''}
+                  onChange={handleValueChange(comparisonId)}
+                  bgColor="white"
+                  placeholder="Type a value..."
+                />
+              )}
+            </Stack>
+            <Fade in={showDeleteId === comparisonId}>
+              <IconButton
+                icon={<TrashIcon />}
+                aria-label="Remove comparison"
+                onClick={deleteComparison(comparisonId)}
+                pos="absolute"
+                left="-10px"
+                top="-10px"
+                size="sm"
+              />
+            </Fade>
+          </Flex>
+        </>
+      ))}
+      <Button leftIcon={<PlusIcon />} onClick={createComparison} flexShrink={0}>
+        Add
+      </Button>
+    </Stack>
+  )
+}
--- a/apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ConditonSettingsBody.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ConditonSettingsBody.tsx
@ -0,0 +1,27 @@
+import { Comparison, ConditionOptions, LogicalOperator, Table } from 'models'
+import React from 'react'
+import { ComparisonsList } from './ComparisonsList'
+
+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 (
+    <ComparisonsList
+      initialComparisons={options.comparisons}
+      logicalOperator={options.logicalOperator ?? LogicalOperator.AND}
+      onLogicalOperatorChange={handleLogicalOperatorChange}
+      onComparisonsChange={handleComparisonsChange}
+    />
+  )
+}
--- a/apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/index.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/index.tsx
@ -0,0 +1 @@
+export { ConditionSettingsBody } from './ConditonSettingsBody'
--- a/apps/builder/components/board/graph/BlockNode/StepNode/SourceEndpoint.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/SourceEndpoint.tsx
@ -1,6 +1,6 @@
 import { Box, BoxProps } from '@chakra-ui/react'
 import { ConnectingSourceIds, useGraph } from 'contexts/GraphContext'
-import React, { MouseEvent } from 'react'
+import React, { MouseEvent, useEffect, useRef } from 'react'

 export const SourceEndpoint = ({
  source,
@ -8,15 +8,28 @@ export const SourceEndpoint = ({
 }: BoxProps & {
  source: ConnectingSourceIds
 }) => {
-  const { setConnectingIds } = useGraph()
+  const { setConnectingIds, addSourceEndpoint: addEndpoint } = useGraph()
+  const ref = useRef<HTMLDivElement | null>(null)

  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
    e.stopPropagation()
    setConnectingIds({ source })
  }

+  useEffect(() => {
+    if (!ref.current) return
+    const id =
+      source.choiceItemId ?? source.stepId + (source.conditionType ?? '')
+    addEndpoint({
+      id,
+      ref,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref])
+
  return (
    <Box
+      ref={ref}
      boxSize="15px"
      rounded="full"
      bgColor="gray.500"
--- a/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
@ -10,13 +10,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { Block, Step } from 'models'
 import { useGraph } from 'contexts/GraphContext'
 import { StepIcon } from 'components/board/StepTypesList/StepIcon'
-import {
-  isChoiceInput,
-  isDefined,
-  isInputStep,
-  isLogicStep,
-  isTextBubbleStep,
-} from 'utils'
+import { isDefined, isInputStep, isLogicStep, isTextBubbleStep } from 'utils'
 import { Coordinates } from '@dnd-kit/core/dist/types'
 import { TextEditor } from './TextEditor/TextEditor'
 import { StepNodeContent } from './StepNodeContent'
@ -26,6 +20,8 @@ import { SettingsPopoverContent } from './SettingsPopoverContent'
 import { DraggableStep } from 'contexts/DndContext'
 import { StepNodeContextMenu } from './StepNodeContextMenu'
 import { SourceEndpoint } from './SourceEndpoint'
+import { hasDefaultConnector } from 'services/typebots'
+import { TargetEndpoint } from './TargetEndpoint'

 export const StepNode = ({
  step,
@ -192,7 +188,13 @@ export const StepNode = ({
              >
                <StepIcon type={step.type} mt="1" />
                <StepNodeContent step={step} />
-                {isConnectable && !isChoiceInput(step) && (
+                <TargetEndpoint
+                  pos="absolute"
+                  left="-32px"
+                  top="19px"
+                  stepId={step.id}
+                />
+                {isConnectable && hasDefaultConnector(step) && (
                  <SourceEndpoint
                    source={{
                      blockId: step.blockId,
@ -205,17 +207,23 @@ export const StepNode = ({
                )}
              </HStack>

-              {isDefined(connectedStubPosition) && !isChoiceInput(step) && (
-                <Box
-                  h="2px"
-                  pos="absolute"
-                  right={connectedStubPosition === 'left' ? undefined : '-18px'}
-                  left={connectedStubPosition === 'left' ? '-18px' : undefined}
-                  top="25px"
-                  w="18px"
-                  bgColor="gray.500"
-                />
-              )}
+              {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>
          {(isInputStep(step) || isLogicStep(step)) && (
--- a/apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent.tsx
@ -1,4 +1,4 @@
-import { Flex, Text } from '@chakra-ui/react'
+import { Flex, HStack, Stack, Tag, Text } from '@chakra-ui/react'
 import { useTypebot } from 'contexts/TypebotContext'
 import {
  Step,
@ -7,8 +7,10 @@ import {
  InputStepType,
  LogicStepType,
  SetVariableStep,
+  ConditionStep,
 } from 'models'
 import { ChoiceItemsList } from './ChoiceInputStepNode/ChoiceItemsList'
+import { SourceEndpoint } from './SourceEndpoint'

 type Props = {
  step: Step | StartStep
@ -79,6 +81,9 @@ export const StepNodeContent = ({ step }: Props) => {
    case LogicStepType.SET_VARIABLE: {
      return <SetVariableNodeContent step={step} />
    }
+    case LogicStepType.CONDITION: {
+      return <ConditionNodeContent step={step} />
+    }
    case 'start': {
      return <Text>{step.label}</Text>
    }
@ -101,3 +106,51 @@ const SetVariableNodeContent = ({ step }: { step: SetVariableStep }) => {
    </Text>
  )
 }
+
+const ConditionNodeContent = ({ step }: { step: ConditionStep }) => {
+  const { typebot } = useTypebot()
+  return (
+    <Flex>
+      <Stack color={'gray.500'}>
+        {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/board/graph/BlockNode/StepNode/TargetEndpoint.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/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/board/graph/BlockNode/StepNode/TextEditor/TextEditor.tsx
+++ b/apps/builder/components/board/graph/BlockNode/StepNode/TextEditor/TextEditor.tsx
@ -8,7 +8,6 @@ import {
  withPlate,
 } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from 'libs/plate'
-import { useDebounce } from 'use-debounce'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { BaseSelection, createEditor, Transforms } from 'slate'
 import { ToolBar } from './ToolBar'
@ -37,7 +36,6 @@ export const TextEditor = ({
  )
  const { updateStep } = useTypebot()
  const [value, setValue] = useState(initialValue)
-  const [debouncedValue] = useDebounce(value, 500)
  const varDropdownRef = useRef<HTMLDivElement | null>(null)
  const rememberedSelection = useRef<BaseSelection | null>(null)
  const [isVariableDropdownOpen, setIsVariableDropdownOpen] = useState(false)
@ -45,16 +43,15 @@ export const TextEditor = ({
  const textEditorRef = useRef<HTMLDivElement>(null)
  useOutsideClick({
    ref: textEditorRef,
-    handler: () => {
-      save(value)
-      onClose()
-    },
+    handler: onClose,
  })

  useEffect(() => {
-    save(debouncedValue)
+    return () => {
+      save(value)
+    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue])
+  }, [value])

  useEffect(() => {
    if (!isVariableDropdownOpen) return
@ -107,6 +104,7 @@ export const TextEditor = ({

  const handleChangeEditorContent = (val: unknown[]) => {
    setValue(val)
+    save(val)
    setIsVariableDropdownOpen(false)
  }
  return (
--- a/apps/builder/components/board/graph/Edges/DrawingEdge.tsx
+++ b/apps/builder/components/board/graph/Edges/DrawingEdge.tsx
@ -2,15 +2,22 @@ import { useEventListener } from '@chakra-ui/hooks'
 import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 import { useGraph, ConnectingIds } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import { Target } from 'models'
+import { Step, Target } from 'models'
 import React, { useMemo, useState } from 'react'
 import {
-  computeDrawingConnectedPath,
-  computeDrawingPathToMouse,
+  computeConnectingEdgePath,
+  computeEdgePathToMouse,
+  getEndpointTopOffset,
 } from 'services/graph'

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

@ -20,22 +27,44 @@ export const DrawingEdge = () => {
    [connectingIds]
  )

+  const sourceTop = useMemo(() => {
+    if (!sourceBlock || !connectingIds) return 0
+    return getEndpointTopOffset(
+      graphPosition,
+      sourceEndpoints,
+      connectingIds.source.choiceItemId ??
+        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) return ``

    return connectingIds?.target
-      ? computeDrawingConnectedPath(
+      ? computeConnectingEdgePath(
          connectingIds as Omit<ConnectingIds, 'target'> & { target: Target },
          sourceBlock,
+          sourceTop,
+          targetTop,
          typebot
        )
-      : computeDrawingPathToMouse(
-          sourceBlock,
-          connectingIds,
+      : computeEdgePathToMouse({
+          blockPosition: sourceBlock.graphCoordinates,
          mousePosition,
-          typebot.steps
-        )
-  }, [sourceBlock, typebot, connectingIds, mousePosition])
+          sourceTop,
+        })
+  }, [sourceBlock, typebot, connectingIds, sourceTop, targetTop, mousePosition])

  const handleMouseMove = (e: MouseEvent) => {
    setMousePosition({
@ -49,14 +78,25 @@ export const DrawingEdge = () => {
    setConnectingIds(null)
  })

-  const createNewEdge = (connectingIds: ConnectingIds) =>
-    connectingIds.source.choiceItemId
-      ? updateChoiceItem(connectingIds.source.choiceItemId, {
-          target: connectingIds.target,
-        })
-      : updateStep(connectingIds.source.stepId, {
-          target: connectingIds.target,
-        })
+  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,
+      })
+    }
+  }

  if ((mousePosition.x === 0 && mousePosition.y === 0) || !connectingIds)
    return <></>
--- a/apps/builder/components/board/graph/Edges/Edge.tsx
+++ b/apps/builder/components/board/graph/Edges/Edge.tsx
@ -3,13 +3,13 @@ import assert from 'assert'
 import { Coordinates, useGraph } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { ChoiceItem } from 'models'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import {
  getAnchorsPosition,
-  computeFlowChartConnectorPath,
-  getSourceChoiceItemIndex,
+  computeEdgePath,
+  getEndpointTopOffset,
+  getTarget,
 } from 'services/graph'
-import { isChoiceInput } from 'utils'

 export type AnchorsPositionProps = {
  sourcePosition: Coordinates
@ -18,15 +18,25 @@ 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
 }) => {
  const { typebot } = useTypebot()
-  const { previewingIds } = useGraph()
+  const { previewingIds, sourceEndpoints, targetEndpoints, graphPosition } =
+    useGraph()
  const step = typebot?.steps.byId[stepId]
  const isPreviewing = useMemo(
    () =>
@ -34,40 +44,83 @@ export const Edge = ({
      previewingIds.targetId === step?.target?.blockId,
    [previewingIds.sourceId, previewingIds.targetId, step]
  )
+  const [sourceTop, setSourceTop] = useState(
+    getEndpointTopOffset(graphPosition, sourceEndpoints, item?.id ?? step?.id)
+  )
+  const [targetTop, setTargetTop] = useState(
+    getEndpointTopOffset(graphPosition, targetEndpoints, step?.id)
+  )

-  const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
+  useEffect(() => {
+    const newSourceTop = getEndpointTopOffset(
+      graphPosition,
+      sourceEndpoints,
+      getSourceEndpointId()
+    )
+    const sensibilityThreshold = 10
+    const newSourceTopIsTooClose =
+      sourceTop < newSourceTop + sensibilityThreshold &&
+      sourceTop > newSourceTop - sensibilityThreshold
+    if (newSourceTopIsTooClose) return
+    setSourceTop(newSourceTop)
+    // 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)
+    const newTargetTop = getEndpointTopOffset(
+      graphPosition,
+      targetEndpoints,
+      target?.blockId ?? target?.stepId
+    )
+    const sensibilityThreshold = 10
+    const newSourceTopIsTooClose =
+      targetTop < newTargetTop + sensibilityThreshold &&
+      targetTop > newTargetTop - sensibilityThreshold
+    if (newSourceTopIsTooClose) return
+    setTargetTop(newTargetTop)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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 = item?.target?.blockId ?? step.target?.blockId
+    const targetBlockId = getTarget(step, type)?.blockId
    assert(isDefined(targetBlockId))
    const targetBlock = typebot.blocks.byId[targetBlockId]
-    const targetStepId = item?.target?.stepId ?? step.target?.stepId
-    const targetStepIndex = targetStepId
-      ? targetBlock.stepIds.indexOf(targetStepId)
-      : undefined
    return {
      sourceBlock,
      targetBlock,
-      targetStepIndex,
    }
-  }, [item?.target?.blockId, item?.target?.stepId, stepId, typebot])
+  }, [stepId, type, typebot])

  const path = useMemo(() => {
    if (!sourceBlock || !targetBlock || !step) return ``
-    const sourceChoiceItemIndex = isChoiceInput(step)
-      ? getSourceChoiceItemIndex(step, item?.id)
-      : undefined
    const anchorsPosition = getAnchorsPosition({
      sourceBlock,
      targetBlock,
-      sourceStepIndex: sourceBlock.stepIds.indexOf(stepId),
-      targetStepIndex,
-      sourceChoiceItemIndex,
+      sourceTop,
+      targetTop,
    })
-    return computeFlowChartConnectorPath(anchorsPosition)
-  }, [item, sourceBlock, step, stepId, targetBlock, targetStepIndex])
+    return computeEdgePath(anchorsPosition)
+  }, [sourceBlock, sourceTop, step, targetBlock, targetTop])

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

 export const Edges = () => {
  const { typebot } = useTypebot()
@ -26,6 +26,14 @@ export const Edges = () => {
      )
      .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
@ -38,10 +46,18 @@ export const Edges = () => {
    >
      <DrawingEdge />
      {stepIdsWithTarget.map((stepId) => (
-        <Edge key={stepId} stepId={stepId} />
+        <Edge key={stepId} stepId={stepId} type={EdgeType.STEP} />
      ))}
      {singleChoiceItemsWithTarget.map((item) => (
-        <Edge key={item.id} stepId={item.stepId} item={item} />
+        <Edge
+          key={item.id}
+          stepId={item.stepId}
+          item={item}
+          type={EdgeType.CHOICE_ITEM}
+        />
+      ))}
+      {conditionStepIdsWithTarget?.map((stepId) => (
+        <ConditionStepEdges key={stepId} stepId={stepId} />
      ))}
      <marker
        id={'arrow'}
@ -61,3 +77,18 @@ 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/shared/DropdownList.tsx
+++ b/apps/builder/components/shared/DropdownList.tsx
@ -0,0 +1,61 @@
+import {
+  Button,
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  MenuItem,
+  MenuList,
+  Stack,
+} from '@chakra-ui/react'
+import { ChevronLeftIcon } from 'assets/icons'
+import React from 'react'
+
+type Props<T> = {
+  currentItem: T
+  onItemSelect: (item: T) => void
+  items: T[]
+}
+
+export const DropdownList = <T,>({
+  currentItem,
+  onItemSelect,
+  items,
+  ...props
+}: Props<T> & MenuButtonProps) => {
+  const handleMenuItemClick = (operator: T) => () => {
+    onItemSelect(operator)
+  }
+  return (
+    <>
+      <Menu isLazy placement="bottom-end">
+        <MenuButton
+          as={Button}
+          rightIcon={<ChevronLeftIcon transform={'rotate(-90deg)'} />}
+          colorScheme="gray"
+          isTruncated
+          justifyContent="space-between"
+          textAlign="left"
+          {...props}
+        >
+          {currentItem}
+        </MenuButton>
+        <MenuList maxW="500px">
+          <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+            {items.map((item) => (
+              <MenuItem
+                key={item as unknown as string}
+                maxW="500px"
+                overflow="hidden"
+                whiteSpace="nowrap"
+                textOverflow="ellipsis"
+                onClick={handleMenuItemClick(item)}
+              >
+                {item}
+              </MenuItem>
+            ))}
+          </Stack>
+        </MenuList>
+      </Menu>
+    </>
+  )
+}
--- a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
+++ b/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
@ -13,7 +13,7 @@ export const headerHeight = 56

 export const TypebotHeader = () => {
  const router = useRouter()
-  const { typebot } = useTypebot()
+  const { typebot, updateTypebot } = useTypebot()
  const { setRightPanel } = useEditor()

  const handleBackClick = () => {
@ -23,6 +23,7 @@ export const TypebotHeader = () => {
    })
  }

+  const handleNameSubmit = (name: string) => updateTypebot({ name })
  return (
    <Flex
      w="full"
@ -87,7 +88,7 @@ export const TypebotHeader = () => {
          />
          <EditableTypebotName
            name={typebot?.name}
-            onNewName={(newName) => console.log(newName)}
+            onNewName={handleNameSubmit}
          />
        </Flex>
      </Flex>
				`@ -0,0 +1 @@`
				`export { ConditionSettingsBody } from './ConditonSettingsBody'`