⚡ (editor) Improve edges responsiveness

Also fixed a ton of useEffects should make everything a bit more reactive.

Closes #307

apps/builder/src/features/auth/api/getAuthenticatedUser.ts

@@ -20,9 +20,11 @@ const authenticateByToken = async (
   apiToken: string
 ): Promise<User | undefined> => {
   if (typeof window !== 'undefined') return
-  return (await prisma.user.findFirst({
+  const user = (await prisma.user.findFirst({
     where: { apiTokens: { some: { token: apiToken } } },
   })) as User
+  setUser({ id: user.id, email: user.email ?? undefined })
+  return user
 }
 
 const extractBearerToken = (req: NextApiRequest) =>

apps/builder/src/features/billing/billing.spec.ts

@@ -139,7 +139,6 @@ test('plan changes should work', async ({ page }) => {
   await expect(page.locator('text=$73.00 >> nth=0')).toBeVisible()
   await expect(page.locator('text=$30.00 >> nth=0')).toBeVisible()
   await expect(page.locator('text=$4.00 >> nth=0')).toBeVisible()
-  await expect(page.locator('text=user@email.com')).toBeVisible()
   await addSubscriptionToWorkspace(
     planChangeWorkspaceId,
     [

apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailSettings/SendEmailSettings.tsx

@@ -162,6 +162,7 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
       </Stack>
       <SwitchWithLabel
         label={'Custom content?'}
+        moreInfoContent="By default, the email body will be a recap of what has been collected so far. You can override it with this option."
         initialValue={options.isCustomBody ?? false}
         onCheckChange={handleIsCustomBodyChange}
       />

apps/builder/src/features/editor/components/EditorPage.tsx

@@ -44,7 +44,7 @@ export const EditorPage = () => {
               {!isReadOnly && <BlocksSideBar />}
               <GraphProvider isReadOnly={isReadOnly}>
                 <GroupsCoordinatesProvider groups={typebot.groups}>
-                  <Graph flex="1" typebot={typebot} />
+                  <Graph flex="1" typebot={typebot} key={typebot.id} />
                   <BoardMenuButton pos="absolute" right="40px" top="20px" />
                   <RightPanel />
                 </GroupsCoordinatesProvider>

apps/builder/src/features/editor/hooks/useUndo.ts

@@ -1,152 +1,108 @@
 import { isDefined } from '@udecode/plate-core'
 import { dequal } from 'dequal'
-// import { diff } from 'deep-object-diff'
+import { useCallback, useRef, useState } from 'react'
-import { useReducer, useCallback, useRef } from 'react'
-import { isNotDefined } from 'utils'
 
-enum ActionType {
+export interface Actions<T extends { updatedAt: Date }> {
-  Undo = 'UNDO',
+  set: (newPresent: T | ((current: T) => T) | undefined) => void
-  Redo = 'REDO',
-  Set = 'SET',
-  Flush = 'FLUSH',
-}
-
-export interface Actions<T extends { updatedAt: Date } | undefined> {
-  set: (
-    newPresent: T | ((current: T) => T),
-    options?: { updateDate: boolean }
-  ) => void
   undo: () => void
   redo: () => void
   flush: () => void
   canUndo: boolean
   canRedo: boolean
-  presentRef: React.MutableRefObject<T>
 }
 
-interface Action<T extends { updatedAt: Date } | undefined> {
+export interface History<T extends { updatedAt: Date }> {
-  type: ActionType
-  newPresent?: T
-  updateDate?: boolean
-}
-
-export interface State<T extends { updatedAt: Date } | undefined> {
   past: T[]
-  present: T
+  present: T | undefined
   future: T[]
 }
 
 const initialState = {
   past: [],
-  present: null,
+  present: undefined,
   future: [],
 }
 
-const reducer = <T extends { updatedAt: Date } | undefined>(
+export const useUndo = <T extends { updatedAt: Date }>(
-  state: State<T>,
+  initialPresent?: T
-  action: Action<T>
+): [T | undefined, Actions<T>] => {
-) => {
+  const [history, setHistory] = useState<History<T>>(initialState)
-  const { past, present, future } = state
+  const presentRef = useRef<T | null>(initialPresent ?? null)
 
-  switch (action.type) {
+  const canUndo = history.past.length !== 0
-    case ActionType.Undo: {
+  const canRedo = history.future.length !== 0
-      if (past.length === 0 || !present) {
-        return state
-      }
 
-      const previous = past[past.length - 1]
+  const undo = useCallback(() => {
-      const newPast = past.slice(0, past.length - 1)
+    const { past, present, future } = history
+    if (past.length === 0 || !present) return
 
-      return {
+    const previous = past[past.length - 1]
-        past: newPast,
+    const newPast = past.slice(0, past.length - 1)
-        present: { ...previous, updatedAt: present.updatedAt },
-        future: [present, ...future],
-      }
-    }
 
-    case ActionType.Redo: {
+    const newPresent = { ...previous, updatedAt: present.updatedAt }
-      if (future.length === 0) {
-        return state
-      }
-      const next = future[0]
-      const newFuture = future.slice(1)
 
-      return {
+    setHistory({
-        past: [...past, present],
+      past: newPast,
-        present: next,
+      present: newPresent,
-        future: newFuture,
+      future: [present, ...future],
-      }
+    })
-    }
+    presentRef.current = newPresent
+  }, [history])
 
-    case ActionType.Set: {
+  const redo = useCallback(() => {
-      const { newPresent } = action
+    const { past, present, future } = history
+    if (future.length === 0) return
+    const next = future[0]
+    const newFuture = future.slice(1)
+
+    setHistory({
+      past: present ? [...past, present] : past,
+      present: next,
+      future: newFuture,
+    })
+    presentRef.current = next
+  }, [history])
+
+  const set = useCallback(
+    (newPresentArg: T | ((current: T) => T) | undefined) => {
+      const { past, present } = history
+      const newPresent =
+        typeof newPresentArg === 'function'
+          ? newPresentArg(presentRef.current as T)
+          : newPresentArg
       if (
-        isNotDefined(newPresent) ||
+        newPresent &&
-        (present &&
+        present &&
-          dequal(
+        dequal(
-            JSON.parse(JSON.stringify(newPresent)),
+          JSON.parse(JSON.stringify(newPresent)),
-            JSON.parse(JSON.stringify(present))
+          JSON.parse(JSON.stringify(present))
-          ))
+        )
       ) {
-        return state
+        return
       }
 
-      return {
+      if (newPresent === undefined) {
+        presentRef.current = null
+        setHistory(initialState)
+        return
+      }
+      setHistory({
         past: [...past, present].filter(isDefined),
         present: newPresent,
         future: [],
-      }
+      })
-    }
+      presentRef.current = newPresent
+    },
+    [history]
+  )
 
-    case ActionType.Flush:
+  const flush = useCallback(() => {
-      return { ...initialState, present }
+    setHistory({
-  }
+      present: presentRef.current ?? undefined,
-}
+      past: [],
-
+      future: [],
-const useUndo = <T extends { updatedAt: Date } | undefined>(
-  initialPresent: T
-): [State<T>, Actions<T>] => {
-  const [state, dispatch] = useReducer(reducer, {
-    ...initialState,
-    present: initialPresent,
-  })
-  const presentRef = useRef<T>(initialPresent)
-
-  const canUndo = state.past.length !== 0
-  const canRedo = state.future.length !== 0
-
-  const undo = useCallback(() => {
-    if (canUndo) {
-      dispatch({ type: ActionType.Undo })
-    }
-  }, [canUndo])
-
-  const redo = useCallback(() => {
-    if (canRedo) {
-      dispatch({ type: ActionType.Redo })
-    }
-  }, [canRedo])
-
-  const set = useCallback((newPresent: T | ((current: T) => T)) => {
-    const updatedTypebot =
-      newPresent && typeof newPresent === 'function'
-        ? newPresent(presentRef.current)
-        : newPresent
-    presentRef.current = updatedTypebot
-    dispatch({
-      type: ActionType.Set,
-      newPresent: updatedTypebot,
     })
   }, [])
 
-  const flush = useCallback(() => {
+  return [history.present, { set, undo, redo, flush, canUndo, canRedo }]
-    dispatch({ type: ActionType.Flush })
-  }, [])
-
-  return [
-    state as State<T>,
-    { set, undo, redo, flush, canUndo, canRedo, presentRef },
-  ]
 }
-
-export default useUndo

apps/builder/src/features/editor/providers/TypebotProvider/TypebotProvider.tsx

@@ -26,7 +26,7 @@ import { variablesAction, VariablesActions } from './actions/variables'
 import { dequal } from 'dequal'
 import { useToast } from '@/hooks/useToast'
 import { useTypebotQuery } from '@/hooks/useTypebotQuery'
-import useUndo from '../../hooks/useUndo'
+import { useUndo } from '../../hooks/useUndo'
 import { useLinkedTypebots } from '@/hooks/useLinkedTypebots'
 import { updateTypebotQuery } from '../../queries/updateTypebotQuery'
 import { preventUserFromRefreshing } from '@/utils/helpers'
@@ -46,7 +46,6 @@ import {
 import { useAutoSave } from '@/hooks/useAutoSave'
 import { createWebhookQuery } from '@/features/blocks/integrations/webhook/queries/createWebhookQuery'
 import { duplicateWebhookQuery } from '@/features/blocks/integrations/webhook/queries/duplicateWebhookQuery'
-import { useSession } from 'next-auth/react'
 
 const autoSaveTimeout = 10000
 
@@ -104,27 +103,24 @@ export const TypebotProvider = ({
   children: ReactNode
   typebotId?: string
 }) => {
-  const { status } = useSession()
   const { push } = useRouter()
   const { showToast } = useToast()
 
-  const { typebot, publishedTypebot, webhooks, isReadOnly, isLoading, mutate } =
+  const {
-    useTypebotQuery({
+    typebot,
-      typebotId,
+    publishedTypebot,
-    })
+    webhooks,
+    isReadOnly,
+    isLoading: isFetchingTypebot,
+    mutate,
+  } = useTypebotQuery({
+    typebotId,
+  })
 
   const [
-    { present: localTypebot },
+    localTypebot,
-    {
+    { redo, undo, flush, canRedo, canUndo, set: setLocalTypebot },
-      redo,
+  ] = useUndo<Typebot>(undefined)
-      undo,
-      flush,
-      canRedo,
-      canUndo,
-      set: setLocalTypebot,
-      presentRef: currentTypebotRef,
-    },
-  ] = useUndo<Typebot | undefined>(undefined)
 
   const linkedTypebotIds =
     localTypebot?.groups
@@ -151,23 +147,34 @@ export const TypebotProvider = ({
   })
 
   useEffect(() => {
-    if (!typebot || !currentTypebotRef.current) return
+    if (!typebot && isDefined(localTypebot)) setLocalTypebot(undefined)
-    if (typebotId !== currentTypebotRef.current.id) {
+    if (isFetchingTypebot) return
-      setLocalTypebot({ ...typebot }, { updateDate: false })
+    if (!typebot) {
-      flush()
+      showToast({ status: 'info', description: "Couldn't find typebot" })
-    } else if (
+      push('/typebots')
+      return
+    }
+    if (
+      typebot.id !== localTypebot?.id ||
       new Date(typebot.updatedAt).getTime() >
-      new Date(currentTypebotRef.current.updatedAt).getTime()
+        new Date(localTypebot.updatedAt).getTime()
     ) {
       setLocalTypebot({ ...typebot })
+      flush()
     }
+  }, [
+    flush,
+    isFetchingTypebot,
+    localTypebot,
+    push,
+    setLocalTypebot,
+    showToast,
+    typebot,
+  ])
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  const saveTypebot = useCallback(async () => {
-  }, [typebot])
+    if (!localTypebot || !typebot) return
-
+    const typebotToSave = { ...localTypebot }
-  const saveTypebot = async () => {
-    if (!currentTypebotRef.current || !typebot) return
-    const typebotToSave = { ...currentTypebotRef.current }
     if (dequal(omit(typebot, 'updatedAt'), omit(typebotToSave, 'updatedAt')))
       return
     setIsSavingLoading(true)
@@ -187,7 +194,15 @@ export const TypebotProvider = ({
       webhooks: webhooks ?? [],
     })
     window.removeEventListener('beforeunload', preventUserFromRefreshing)
-  }
+  }, [
+    localTypebot,
+    mutate,
+    publishedTypebot,
+    setLocalTypebot,
+    showToast,
+    typebot,
+    webhooks,
+  ])
 
   const savePublishedTypebot = async (newPublishedTypebot: PublicTypebot) => {
     if (!localTypebot) return
@@ -201,7 +216,7 @@ export const TypebotProvider = ({
     if (error)
       return showToast({ title: error.name, description: error.message })
     mutate({
-      typebot: currentTypebotRef.current as Typebot,
+      typebot: localTypebot,
       publishedTypebot: newPublishedTypebot,
       webhooks: webhooks ?? [],
     })
@@ -213,7 +228,7 @@ export const TypebotProvider = ({
       item: localTypebot,
       debounceTimeout: autoSaveTimeout,
     },
-    [typebot, publishedTypebot, webhooks]
+    [saveTypebot, localTypebot]
   )
 
   useEffect(() => {
@@ -221,8 +236,7 @@ export const TypebotProvider = ({
     return () => {
       Router.events.off('routeChangeStart', saveTypebot)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [saveTypebot])
-  }, [typebot, publishedTypebot, webhooks])
 
   const [isSavingLoading, setIsSavingLoading] = useState(false)
   const [isPublishing, setIsPublishing] = useState(false)
@@ -237,26 +251,14 @@ export const TypebotProvider = ({
 
   useEffect(() => {
     if (!localTypebot || !typebot) return
-    currentTypebotRef.current = localTypebot
     if (!checkIfTypebotsAreEqual(localTypebot, typebot)) {
-      window.removeEventListener('beforeunload', preventUserFromRefreshing)
       window.addEventListener('beforeunload', preventUserFromRefreshing)
-    } else {
+    }
+
+    return () => {
       window.removeEventListener('beforeunload', preventUserFromRefreshing)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [localTypebot, typebot])
-  }, [localTypebot])
-
-  useEffect(() => {
-    if (status !== 'authenticated' || isLoading) return
-    if (!typebot) {
-      showToast({ status: 'info', description: "Couldn't find typebot" })
-      push('/typebots')
-      return
-    }
-    setLocalTypebot({ ...typebot })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status, isLoading])
 
   const updateLocalTypebot = (updates: UpdateTypebotPayload) =>
     localTypebot && setLocalTypebot({ ...localTypebot, ...updates })

apps/builder/src/features/editor/providers/TypebotProvider/actions/edges.ts

@@ -34,8 +34,10 @@ export const edgesAction = (setTypebot: SetTypebot): EdgesActions => ({
         )
         const itemIndex = edge.from.itemId
           ? (
-              typebot.groups[groupIndex].blocks[blockIndex] as BlockWithItems
+              typebot.groups[groupIndex].blocks[blockIndex] as
-            ).items.findIndex(byId(edge.from.itemId))
+                | BlockWithItems
+                | undefined
+            )?.items.findIndex(byId(edge.from.itemId))
           : null
 
         isDefined(itemIndex) && itemIndex !== -1

apps/builder/src/features/graph/components/Edges/DrawingEdge.tsx

@@ -9,20 +9,15 @@ import {
 import { useTypebot } from '@/features/editor'
 import { colors } from '@/lib/theme'
 import React, { useMemo, useState } from 'react'
-import {
+import { computeConnectingEdgePath, computeEdgePathToMouse } from '../../utils'
-  computeConnectingEdgePath,
+import { useEndpoints } from '../../providers/EndpointsProvider'
-  computeEdgePathToMouse,
-  getEndpointTopOffset,
-} from '../../utils'
 
 export const DrawingEdge = () => {
+  const { graphPosition, setConnectingIds, connectingIds } = useGraph()
   const {
-    graphPosition,
+    sourceEndpointYOffsets: sourceEndpoints,
-    setConnectingIds,
+    targetEndpointYOffsets: targetEndpoints,
-    connectingIds,
+  } = useEndpoints()
-    sourceEndpoints,
-    targetEndpoints,
-  } = useGraph()
   const { groupsCoordinates } = useGroupsCoordinates()
   const { createEdge } = useTypebot()
   const [mousePosition, setMousePosition] = useState<Coordinates | null>(null)
@@ -34,24 +29,15 @@ export const DrawingEdge = () => {
 
   const sourceTop = useMemo(() => {
     if (!connectingIds) return 0
-    return getEndpointTopOffset({
+    const endpointId =
-      endpoints: sourceEndpoints,
+      connectingIds.source.itemId ?? connectingIds.source.blockId
-      graphOffsetY: graphPosition.y,
+    return sourceEndpoints.get(endpointId)?.y
-      endpointId: connectingIds.source.itemId ?? connectingIds.source.blockId,
-      graphScale: graphPosition.scale,
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [connectingIds, sourceEndpoints])
 
   const targetTop = useMemo(() => {
     if (!connectingIds) return 0
-    return getEndpointTopOffset({
+    const endpointId = connectingIds.target?.blockId
-      endpoints: targetEndpoints,
+    return endpointId ? targetEndpoints.get(endpointId)?.y : undefined
-      graphOffsetY: graphPosition.y,
-      endpointId: connectingIds.target?.blockId,
-      graphScale: graphPosition.scale,
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [connectingIds, targetEndpoints])
 
   const path = useMemo(() => {

apps/builder/src/features/graph/components/Edges/DropOffEdge.tsx

@@ -6,18 +6,15 @@ import {
   useColorModeValue,
   theme,
 } from '@chakra-ui/react'
-import { useGraph, useGroupsCoordinates } from '../../providers'
+import { useGroupsCoordinates } from '../../providers'
 import { useTypebot } from '@/features/editor'
 import { useWorkspace } from '@/features/workspace'
 import React, { useMemo } from 'react'
 import { byId, isDefined } from 'utils'
 import { isProPlan } from '@/features/billing'
 import { AnswersCount } from '@/features/analytics'
-import {
+import { computeSourceCoordinates, computeDropOffPath } from '../../utils'
-  getEndpointTopOffset,
+import { useEndpoints } from '../../providers/EndpointsProvider'
-  computeSourceCoordinates,
-  computeDropOffPath,
-} from '../../utils'
 
 type Props = {
   groupId: string
@@ -36,7 +33,7 @@ export const DropOffEdge = ({
   )
   const { workspace } = useWorkspace()
   const { groupsCoordinates } = useGroupsCoordinates()
-  const { sourceEndpoints, graphPosition } = useGraph()
+  const { sourceEndpointYOffsets: sourceEndpoints } = useEndpoints()
   const { publishedTypebot } = useTypebot()
 
   const isWorkspaceProPlan = isProPlan(workspace)
@@ -68,17 +65,11 @@ export const DropOffEdge = ({
   }, [answersCounts, groupId, totalAnswers, publishedTypebot])
 
   const group = publishedTypebot?.groups.find(byId(groupId))
-  const sourceTop = useMemo(
+
-    () =>
+  const sourceTop = useMemo(() => {
-      getEndpointTopOffset({
+    const endpointId = group?.blocks[group.blocks.length - 1].id
-        endpoints: sourceEndpoints,
+    return endpointId ? sourceEndpoints.get(endpointId)?.y : undefined
-        graphOffsetY: graphPosition.y,
+  }, [group?.blocks, sourceEndpoints])
-        endpointId: group?.blocks[group.blocks.length - 1].id,
-        graphScale: graphPosition.scale,
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [group?.blocks, sourceEndpoints, groupsCoordinates]
-  )
 
   const labelCoordinates = useMemo(() => {
     if (!groupsCoordinates[groupId]) return

apps/builder/src/features/graph/components/Edges/Edge.tsx

@@ -1,16 +1,12 @@
 import { Coordinates, useGraph, useGroupsCoordinates } from '../../providers'
-import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Edge as EdgeProps } from 'models'
 import { Portal, useColorMode, useDisclosure } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor'
 import { EdgeMenu } from './EdgeMenu'
 import { colors } from '@/lib/theme'
-import {
+import { getAnchorsPosition, computeEdgePath } from '../../utils'
-  getEndpointTopOffset,
+import { useEndpoints } from '../../providers/EndpointsProvider'
-  getSourceEndpointId,
-  getAnchorsPosition,
-  computeEdgePath,
-} from '../../utils'
 
 export type AnchorsPositionProps = {
   sourcePosition: Coordinates
@@ -22,22 +18,17 @@ export type AnchorsPositionProps = {
 type Props = {
   edge: EdgeProps
 }
+
 export const Edge = ({ edge }: Props) => {
   const isDark = useColorMode().colorMode === 'dark'
   const { deleteEdge } = useTypebot()
-  const {
+  const { previewingEdge, graphPosition, isReadOnly, setPreviewingEdge } =
-    previewingEdge,
+    useGraph()
-    sourceEndpoints,
+  const { sourceEndpointYOffsets, targetEndpointYOffsets } = useEndpoints()
-    targetEndpoints,
-    graphPosition,
-    isReadOnly,
-    setPreviewingEdge,
-  } = useGraph()
   const { groupsCoordinates } = useGroupsCoordinates()
   const [isMouseOver, setIsMouseOver] = useState(false)
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [edgeMenuPosition, setEdgeMenuPosition] = useState({ x: 0, y: 0 })
-  const [refreshEdge, setRefreshEdge] = useState(false)
 
   const isPreviewing = isMouseOver || previewingEdge?.id === edge.id
 
@@ -46,47 +37,20 @@ export const Edge = ({ edge }: Props) => {
   const targetGroupCoordinates =
     groupsCoordinates && groupsCoordinates[edge.to.groupId]
 
-  const sourceTop = useMemo(
+  const sourceTop = useMemo(() => {
+    const endpointId = edge?.from.itemId ?? edge?.from.blockId
+    if (!endpointId) return
+    return sourceEndpointYOffsets.get(endpointId)?.y
+  }, [edge?.from.itemId, edge?.from.blockId, sourceEndpointYOffsets])
+
+  const targetTop = useMemo(
     () =>
-      getEndpointTopOffset({
+      edge?.to.blockId
-        endpoints: sourceEndpoints,
+        ? targetEndpointYOffsets.get(edge?.to.blockId)?.y
-        graphOffsetY: graphPosition.y,
+        : undefined,
-        endpointId: getSourceEndpointId(edge),
+    [edge?.to.blockId, targetEndpointYOffsets]
-        graphScale: graphPosition.scale,
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [sourceGroupCoordinates?.y, edge, sourceEndpoints, refreshEdge]
   )
 
-  useEffect(() => {
-    setTimeout(() => setRefreshEdge(true), 50)
-  }, [])
-
-  const [targetTop, setTargetTop] = useState(
-    getEndpointTopOffset({
-      endpoints: targetEndpoints,
-      graphOffsetY: graphPosition.y,
-      endpointId: edge?.to.blockId,
-      graphScale: graphPosition.scale,
-    })
-  )
-  useLayoutEffect(() => {
-    setTargetTop(
-      getEndpointTopOffset({
-        endpoints: targetEndpoints,
-        graphOffsetY: graphPosition.y,
-        endpointId: edge?.to.blockId,
-        graphScale: graphPosition.scale,
-      })
-    )
-  }, [
-    targetGroupCoordinates?.y,
-    targetEndpoints,
-    graphPosition.y,
-    edge?.to.blockId,
-    graphPosition.scale,
-  ])
-
   const path = useMemo(() => {
     if (!sourceGroupCoordinates || !targetGroupCoordinates || !sourceTop)
       return ``
@@ -98,13 +62,12 @@ export const Edge = ({ edge }: Props) => {
       graphScale: graphPosition.scale,
     })
     return computeEdgePath(anchorsPosition)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    sourceGroupCoordinates?.x,
+    sourceGroupCoordinates,
-    sourceGroupCoordinates?.y,
+    targetGroupCoordinates,
-    targetGroupCoordinates?.x,
-    targetGroupCoordinates?.y,
     sourceTop,
+    targetTop,
+    graphPosition.scale,
   ])
 
   const handleMouseEnter = () => setIsMouseOver(true)

apps/builder/src/features/graph/components/Endpoints/SourceEndpoint.tsx

@@ -6,7 +6,16 @@ import {
 } from '@chakra-ui/react'
 import { useGraph, useGroupsCoordinates } from '../../providers'
 import { Source } from 'models'
-import React, { useEffect, useRef, useState } from 'react'
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useEndpoints } from '../../providers/EndpointsProvider'
+
+const endpointHeight = 32
 
 export const SourceEndpoint = ({
   source,
@@ -17,23 +26,61 @@ export const SourceEndpoint = ({
   const color = useColorModeValue('blue.200', 'blue.100')
   const connectedColor = useColorModeValue('blue.300', 'blue.200')
   const bg = useColorModeValue('gray.100', 'gray.700')
-  const [ranOnce, setRanOnce] = useState(false)
+  const { setConnectingIds, previewingEdge, graphPosition } = useGraph()
-  const { setConnectingIds, addSourceEndpoint, previewingEdge } = useGraph()
+  const { setSourceEndpointYOffset: addSourceEndpoint } = useEndpoints()
-
   const { groupsCoordinates } = useGroupsCoordinates()
   const ref = useRef<HTMLDivElement | null>(null)
+  const [groupHeight, setGroupHeight] = useState<number>()
+  const [groupTransformProp, setGroupTransformProp] = useState<string>()
+
+  const endpointY = useMemo(
+    () =>
+      ref.current
+        ? (ref.current?.getBoundingClientRect().y +
+            (endpointHeight * graphPosition.scale) / 2 -
+            graphPosition.y) /
+          graphPosition.scale
+        : undefined,
+    // We need to force recompute whenever the group height and position changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [graphPosition.scale, graphPosition.y, groupHeight, groupTransformProp]
+  )
+
+  useLayoutEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      setGroupHeight(entries[0].contentRect.height)
+    })
+    const groupElement = document.getElementById(`group-${source.groupId}`)
+    if (!groupElement) return
+    resizeObserver.observe(groupElement)
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [source.groupId])
+
+  useLayoutEffect(() => {
+    const mutationObserver = new MutationObserver((entries) => {
+      setGroupTransformProp((entries[0].target as HTMLElement).style.transform)
+    })
+    const groupElement = document.getElementById(`group-${source.groupId}`)
+    if (!groupElement) return
+    mutationObserver.observe(groupElement, {
+      attributes: true,
+      attributeFilter: ['style'],
+    })
+    return () => {
+      mutationObserver.disconnect()
+    }
+  }, [source.groupId])
 
   useEffect(() => {
-    if (ranOnce || !ref.current || Object.keys(groupsCoordinates).length === 0)
+    if (!endpointY) return
-      return
     const id = source.itemId ?? source.blockId
-    addSourceEndpoint({
+    addSourceEndpoint?.({
       id,
-      ref,
+      y: endpointY,
     })
-    setRanOnce(true)
+  }, [addSourceEndpoint, endpointY, source.blockId, source.itemId])
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current, groupsCoordinates])
 
   useEventListener(
     'pointerdown',
@@ -55,6 +102,7 @@ export const SourceEndpoint = ({
   if (!groupsCoordinates) return <></>
   return (
     <Flex
+      ref={ref}
       data-testid="endpoint"
       boxSize="32px"
       rounded="full"
@@ -65,7 +113,6 @@ export const SourceEndpoint = ({
       {...props}
     >
       <Flex
-        ref={ref}
         boxSize="20px"
         justify="center"
         align="center"

apps/builder/src/features/graph/components/Endpoints/TargetEndpoint.tsx

@@ -1,26 +1,78 @@
 import { Box, BoxProps } from '@chakra-ui/react'
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { useGraph } from '../../providers'
-import React, { useEffect, useRef } from 'react'
+import { useEndpoints } from '../../providers/EndpointsProvider'
+
+const endpointHeight = 20
 
 export const TargetEndpoint = ({
+  groupId,
   blockId,
-  isVisible,
   ...props
 }: BoxProps & {
+  groupId: string
   blockId: string
-  isVisible?: boolean
 }) => {
-  const { addTargetEndpoint } = useGraph()
+  const { setTargetEnpointYOffset: addTargetEndpoint } = useEndpoints()
+  const { graphPosition } = useGraph()
   const ref = useRef<HTMLDivElement | null>(null)
+  const [groupHeight, setGroupHeight] = useState<number>()
+  const [groupTransformProp, setGroupTransformProp] = useState<string>()
+
+  const endpointY = useMemo(
+    () =>
+      ref.current
+        ? (ref.current?.getBoundingClientRect().y +
+            (endpointHeight * graphPosition.scale) / 2 -
+            graphPosition.y) /
+          graphPosition.scale
+        : undefined,
+    // We need to force recompute whenever the group height and position changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [graphPosition.scale, graphPosition.y, groupHeight, groupTransformProp]
+  )
+
+  useLayoutEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      setGroupHeight(entries[0].contentRect.height)
+    })
+    const groupElement = document.getElementById(`group-${groupId}`)
+    if (!groupElement) return
+    resizeObserver.observe(groupElement)
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [groupId])
+
+  useLayoutEffect(() => {
+    const mutationObserver = new MutationObserver((entries) => {
+      setGroupTransformProp((entries[0].target as HTMLElement).style.transform)
+    })
+    const groupElement = document.getElementById(`group-${groupId}`)
+    if (!groupElement) return
+    mutationObserver.observe(groupElement, {
+      attributes: true,
+      attributeFilter: ['style'],
+    })
+    return () => {
+      mutationObserver.disconnect()
+    }
+  }, [groupId])
 
   useEffect(() => {
-    if (!ref.current) return
+    if (!endpointY) return
-    addTargetEndpoint({
+    const id = blockId
-      id: blockId,
+    addTargetEndpoint?.({
-      ref,
+      id,
+      y: endpointY,
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [addTargetEndpoint, blockId, endpointY])
-  }, [ref])
 
   return (
     <Box
@@ -29,7 +81,7 @@ export const TargetEndpoint = ({
       rounded="full"
       bgColor="blue.500"
       cursor="pointer"
-      visibility={isVisible ? 'visible' : 'hidden'}
+      visibility="hidden"
       {...props}
     />
   )

apps/builder/src/features/graph/components/Graph.tsx

@@ -73,7 +73,6 @@ export const Graph = ({
     editorContainerRef.current = document.getElementById(
       'editor-container'
     ) as HTMLDivElement
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
@@ -84,8 +83,7 @@ export const Graph = ({
       y: top + debouncedGraphPosition.y,
       scale: debouncedGraphPosition.scale,
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedGraphPosition, setGlobalGraphPosition])
-  }, [debouncedGraphPosition])
 
   const handleMouseUp = (e: MouseEvent) => {
     if (!typebot) return
@@ -304,5 +302,4 @@ const useAutoMoveBoard = (
     return () => {
       clearInterval(interval)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoMoveDirection, setGraphPosition])
-  }, [autoMoveDirection])

apps/builder/src/features/graph/components/GraphElements.tsx

@@ -1,6 +1,7 @@
 import { AnswersCount } from '@/features/analytics'
 import { Edge, Group } from 'models'
 import React, { memo } from 'react'
+import { EndpointsProvider } from '../providers/EndpointsProvider'
 import { Edges } from './Edges'
 import { GroupNode } from './Nodes/GroupNode'
 
@@ -17,7 +18,7 @@ const GroupNodes = ({
   onUnlockProPlanClick,
 }: Props) => {
   return (
-    <>
+    <EndpointsProvider>
       <Edges
         edges={edges}
         answersCounts={answersCounts}
@@ -26,7 +27,7 @@ const GroupNodes = ({
       {groups.map((group, idx) => (
         <GroupNode group={group} groupIndex={idx} key={group.id} />
       ))}
-    </>
+    </EndpointsProvider>
   )
 }
 

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx

@@ -18,7 +18,7 @@ import {
   TextBubbleBlock,
   LogicBlockType,
 } from 'models'
-import { isBubbleBlock, isTextBubbleBlock } from 'utils'
+import { isBubbleBlock, isDefined, isTextBubbleBlock } from 'utils'
 import { BlockNodeContent } from './BlockNodeContent/BlockNodeContent'
 import { BlockIcon, useTypebot } from '@/features/editor'
 import { SettingsPopoverContent } from './SettingsPopoverContent'
@@ -116,8 +116,8 @@ export const BlockNode = ({
 
   const handleMouseEnter = () => {
     if (isReadOnly) return
-    if (mouseOverBlock?.id !== block.id)
+    if (mouseOverBlock?.id !== block.id && blockRef.current)
-      setMouseOverBlock({ id: block.id, ref: blockRef })
+      setMouseOverBlock({ id: block.id, element: blockRef.current })
     if (connectingIds)
       setConnectingIds({
         ...connectingIds,
@@ -165,6 +165,10 @@ export const BlockNode = ({
 
   useEventListener('pointerdown', (e) => e.stopPropagation(), blockRef.current)
 
+  const hasIcomingEdge = typebot?.edges.some((edge) => {
+    return edge.to.blockId === block.id
+  })
+
   return isEditing && isTextBubbleBlock(block) ? (
     <TextBubbleEditor
       id={block.id}
@@ -218,12 +222,15 @@ export const BlockNode = ({
                   data-testid={`${block.id}-icon`}
                 />
                 <BlockNodeContent block={block} indices={indices} />
-                <TargetEndpoint
+                {(hasIcomingEdge || isDefined(connectingIds)) && (
-                  pos="absolute"
+                  <TargetEndpoint
-                  left="-34px"
+                    pos="absolute"
-                  top="16px"
+                    left="-34px"
-                  blockId={block.id}
+                    top="16px"
-                />
+                    blockId={block.id}
+                    groupId={block.groupId}
+                  />
+                )}
                 {isConnectable && hasDefaultConnector(block) && (
                   <SourceEndpoint
                     source={{

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodesList.tsx

@@ -55,8 +55,7 @@ export const BlockNodesList = ({
 
   useEffect(() => {
     if (mouseOverGroup?.id !== groupId) setExpandedPlaceholderIndex(undefined)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groupId, mouseOverGroup?.id])
-  }, [mouseOverGroup?.id])
 
   const handleMouseMoveGlobal = (event: MouseEvent) => {
     if (!draggedBlock || draggedBlock.groupId !== groupId) return
@@ -114,14 +113,10 @@ export const BlockNodesList = ({
 
   useEventListener('mousemove', handleMouseMoveGlobal)
   useEventListener('mousemove', handleMouseMoveOnGroup, groupRef.current)
-  useEventListener(
+  useEventListener('mouseup', handleMouseUpOnGroup, mouseOverGroup?.element, {
-    'mouseup',
+    capture: true,
-    handleMouseUpOnGroup,
+  })
-    mouseOverGroup?.ref.current,
+
-    {
-      capture: true,
-    }
-  )
   return (
     <Stack
       spacing={1}

apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -7,6 +7,7 @@ import {
   IconButton,
   HStack,
   Stack,
+  useColorModeValue,
 } from '@chakra-ui/react'
 import { ExpandIcon } from '@/components/icons'
 import {
@@ -49,6 +50,7 @@ type Props = {
 }
 
 export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
+  const arrowColor = useColorModeValue('white', 'gray.800')
   const ref = useRef<HTMLDivElement | null>(null)
   const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
 
@@ -59,7 +61,7 @@ export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
   return (
     <Portal>
       <PopoverContent onMouseDown={handleMouseDown} pos="relative">
-        <PopoverArrow />
+        <PopoverArrow bgColor={arrowColor} />
         <PopoverBody
           pt="3"
           pb="6"

apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx

@@ -131,8 +131,8 @@ const NonMemoizedDraggableGroupNode = ({
 
   const handleMouseEnter = () => {
     if (isReadOnly) return
-    if (mouseOverGroup?.id !== group.id && !isStartGroup)
+    if (mouseOverGroup?.id !== group.id && !isStartGroup && groupRef.current)
-      setMouseOverGroup({ id: group.id, ref: groupRef })
+      setMouseOverGroup({ id: group.id, element: groupRef.current })
     if (connectingIds)
       setConnectingIds({ ...connectingIds, target: { groupId: group.id } })
   }
@@ -185,6 +185,7 @@ const NonMemoizedDraggableGroupNode = ({
       {(ref, isContextMenuOpened) => (
         <Stack
           ref={setMultipleRefs([ref, groupRef])}
+          id={`group-${group.id}`}
           data-testid="group"
           p="4"
           rounded="xl"
@@ -239,24 +240,26 @@ const NonMemoizedDraggableGroupNode = ({
               isStartGroup={isStartGroup}
             />
           )}
-          <SlideFade
+          {!isReadOnly && (
-            in={isFocused}
+            <SlideFade
-            style={{
+              in={isFocused}
-              position: 'absolute',
+              style={{
-              top: '-50px',
+                position: 'absolute',
-              right: 0,
+                top: '-50px',
-            }}
+                right: 0,
-            unmountOnExit
-          >
-            <GroupFocusToolbar
-              onPlayClick={startPreviewAtThisGroup}
-              onDuplicateClick={() => {
-                setIsFocused(false)
-                duplicateGroup(groupIndex)
               }}
-              onDeleteClick={() => deleteGroup(groupIndex)}
+              unmountOnExit
-            />
+            >
-          </SlideFade>
+              <GroupFocusToolbar
+                onPlayClick={startPreviewAtThisGroup}
+                onDuplicateClick={() => {
+                  setIsFocused(false)
+                  duplicateGroup(groupIndex)
+                }}
+                onDeleteClick={() => deleteGroup(groupIndex)}
+              />
+            </SlideFade>
+          )}
         </Stack>
       )}
     </ContextMenu>

apps/builder/src/features/graph/components/Nodes/ItemNode/ItemNodesList.tsx

@@ -67,19 +67,14 @@ export const ItemNodesList = ({
     if (mouseOverBlock?.id !== block.id) {
       setExpandedPlaceholderIndex(undefined)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [block.id, mouseOverBlock?.id, showPlaceholders])
-  }, [mouseOverBlock?.id, showPlaceholders])
 
   const handleMouseMoveOnBlock = (event: MouseEvent) => {
     if (!isDraggingOnCurrentBlock) return
     const index = computeNearestPlaceholderIndex(event.pageY, placeholderRefs)
     setExpandedPlaceholderIndex(index)
   }
-  useEventListener(
+  useEventListener('mousemove', handleMouseMoveOnBlock, mouseOverBlock?.element)
-    'mousemove',
-    handleMouseMoveOnBlock,
-    mouseOverBlock?.ref.current
-  )
 
   const handleMouseUpOnGroup = (e: MouseEvent) => {
     if (
@@ -99,14 +94,9 @@ export const ItemNodesList = ({
       itemIndex,
     })
   }
-  useEventListener(
+  useEventListener('mouseup', handleMouseUpOnGroup, mouseOverBlock?.element, {
-    'mouseup',
+    capture: true,
-    handleMouseUpOnGroup,
+  })
-    mouseOverBlock?.ref.current,
-    {
-      capture: true,
-    }
-  )
 
   const handleBlockMouseDown =
     (itemIndex: number) =>

apps/builder/src/features/graph/providers/EndpointsProvider.tsx

@@ -0,0 +1,58 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from 'react'
+
+export type Endpoint = {
+  id: string
+  y: number
+}
+
+export const endpointsContext = createContext<{
+  sourceEndpointYOffsets: Map<string, Endpoint>
+  setSourceEndpointYOffset?: (endpoint: Endpoint) => void
+  targetEndpointYOffsets: Map<string, Endpoint>
+  setTargetEnpointYOffset?: (endpoint: Endpoint) => void
+}>({
+  sourceEndpointYOffsets: new Map(),
+  targetEndpointYOffsets: new Map(),
+})
+
+export const EndpointsProvider = ({ children }: { children: ReactNode }) => {
+  const [sourceEndpointYOffsets, setSourceEndpoints] = useState<
+    Map<string, Endpoint>
+  >(new Map())
+  const [targetEndpointYOffsets, setTargetEndpoints] = useState<
+    Map<string, Endpoint>
+  >(new Map())
+
+  const setSourceEndpointYOffset = useCallback((endpoint: Endpoint) => {
+    setSourceEndpoints((endpoints) =>
+      new Map(endpoints).set(endpoint.id, endpoint)
+    )
+  }, [])
+
+  const setTargetEnpointYOffset = useCallback((endpoint: Endpoint) => {
+    setTargetEndpoints((endpoints) =>
+      new Map(endpoints).set(endpoint.id, endpoint)
+    )
+  }, [])
+
+  return (
+    <endpointsContext.Provider
+      value={{
+        sourceEndpointYOffsets,
+        targetEndpointYOffsets,
+        setSourceEndpointYOffset,
+        setTargetEnpointYOffset,
+      }}
+    >
+      {children}
+    </endpointsContext.Provider>
+  )
+}
+
+export const useEndpoints = () => useContext(endpointsContext)

apps/builder/src/features/graph/providers/GraphDndProvider.tsx

@@ -5,15 +5,16 @@ import {
   Dispatch,
   ReactNode,
   SetStateAction,
+  useCallback,
   useContext,
   useRef,
   useState,
 } from 'react'
 import { Coordinates } from './GraphProvider'
 
-type NodeInfo = {
+type NodeElement = {
   id: string
-  ref: React.MutableRefObject<HTMLDivElement | null>
+  element: HTMLDivElement
 }
 
 const graphDndContext = createContext<{
@@ -23,10 +24,10 @@ const graphDndContext = createContext<{
   setDraggedBlock: Dispatch<SetStateAction<DraggableBlock | undefined>>
   draggedItem?: Item
   setDraggedItem: Dispatch<SetStateAction<Item | undefined>>
-  mouseOverGroup?: NodeInfo
+  mouseOverGroup?: NodeElement
-  setMouseOverGroup: Dispatch<SetStateAction<NodeInfo | undefined>>
+  setMouseOverGroup: (node: NodeElement | undefined) => void
-  mouseOverBlock?: NodeInfo
+  mouseOverBlock?: NodeElement
-  setMouseOverBlock: Dispatch<SetStateAction<NodeInfo | undefined>>
+  setMouseOverBlock: (node: NodeElement | undefined) => void
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 }>({})
@@ -39,8 +40,24 @@ export const GraphDndProvider = ({ children }: { children: ReactNode }) => {
     DraggableBlockType | undefined
   >()
   const [draggedItem, setDraggedItem] = useState<Item | undefined>()
-  const [mouseOverGroup, setMouseOverGroup] = useState<NodeInfo>()
+  const [mouseOverGroup, _setMouseOverGroup] = useState<NodeElement>()
-  const [mouseOverBlock, setMouseOverBlock] = useState<NodeInfo>()
+  const [mouseOverBlock, _setMouseOverBlock] = useState<NodeElement>()
+
+  const setMouseOverGroup = useCallback(
+    (node: NodeElement | undefined) => {
+      if (node && !draggedBlock && !draggedBlockType) return
+      _setMouseOverGroup(node)
+    },
+    [draggedBlock, draggedBlockType]
+  )
+
+  const setMouseOverBlock = useCallback(
+    (node: NodeElement | undefined) => {
+      if (node && !draggedItem) return
+      _setMouseOverBlock(node)
+    },
+    [draggedItem]
+  )
 
   return (
     <graphDndContext.Provider

apps/builder/src/features/graph/providers/GraphProvider.tsx

@@ -2,7 +2,6 @@ import { Group, Edge, IdMap, Source, Block, Target } from 'models'
 import {
   createContext,
   Dispatch,
-  MutableRefObject,
   ReactNode,
   SetStateAction,
   useContext,
@@ -53,13 +52,6 @@ export type ConnectingIds = {
   target?: Target
 }
 
-type BlockId = string
-type ButtonId = string
-export type Endpoint = {
-  id: BlockId | ButtonId
-  ref: MutableRefObject<HTMLDivElement | null>
-}
-
 export type GroupsCoordinates = IdMap<Coordinates>
 
 type PreviewingBlock = {
@@ -76,10 +68,6 @@ const graphContext = createContext<{
   setPreviewingBlock: Dispatch<SetStateAction<PreviewingBlock | undefined>>
   previewingEdge?: Edge
   setPreviewingEdge: Dispatch<SetStateAction<Edge | undefined>>
-  sourceEndpoints: IdMap<Endpoint>
-  addSourceEndpoint: (endpoint: Endpoint) => void
-  targetEndpoints: IdMap<Endpoint>
-  addTargetEndpoint: (endpoint: Endpoint) => void
   openedBlockId?: string
   setOpenedBlockId: Dispatch<SetStateAction<string | undefined>>
   openedItemId?: string
@@ -107,26 +95,10 @@ export const GraphProvider = ({
   const [connectingIds, setConnectingIds] = useState<ConnectingIds | null>(null)
   const [previewingEdge, setPreviewingEdge] = useState<Edge>()
   const [previewingBlock, setPreviewingBlock] = useState<PreviewingBlock>()
-  const [sourceEndpoints, setSourceEndpoints] = useState<IdMap<Endpoint>>({})
-  const [targetEndpoints, setTargetEndpoints] = useState<IdMap<Endpoint>>({})
   const [openedBlockId, setOpenedBlockId] = useState<string>()
   const [openedItemId, setOpenedItemId] = useState<string>()
   const [focusedGroupId, setFocusedGroupId] = useState<string>()
 
-  const addSourceEndpoint = (endpoint: Endpoint) => {
-    setSourceEndpoints((endpoints) => ({
-      ...endpoints,
-      [endpoint.id]: endpoint,
-    }))
-  }
-
-  const addTargetEndpoint = (endpoint: Endpoint) => {
-    setTargetEndpoints((endpoints) => ({
-      ...endpoints,
-      [endpoint.id]: endpoint,
-    }))
-  }
-
   return (
     <graphContext.Provider
       value={{
@@ -136,10 +108,6 @@ export const GraphProvider = ({
         setConnectingIds,
         previewingEdge,
         setPreviewingEdge,
-        sourceEndpoints,
-        targetEndpoints,
-        addSourceEndpoint,
-        addTargetEndpoint,
         openedBlockId,
         setOpenedBlockId,
         openedItemId,

apps/builder/src/features/graph/providers/GroupsCoordinateProvider.tsx

@@ -31,14 +31,13 @@ export const GroupsCoordinatesProvider = ({
   useEffect(() => {
     setGroupsCoordinates(
       groups.reduce(
-        (coords, block) => ({
+        (coords, group) => ({
           ...coords,
-          [block.id]: block.graphCoordinates,
+          [group.id]: group.graphCoordinates,
         }),
         {}
       )
     )
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [groups])
 
   const updateGroupCoordinates = useCallback(

apps/builder/src/features/graph/utils.ts

@@ -29,8 +29,6 @@ import {
   defaultWebhookOptions,
   DraggableBlock,
   DraggableBlockType,
-  Edge,
-  IdMap,
   InputBlockType,
   IntegrationBlockType,
   Item,
@@ -43,7 +41,6 @@ import {
   stubLength,
   blockWidth,
   blockAnchorsOffset,
-  Endpoint,
   Coordinates,
 } from './providers'
 import { roundCorners } from 'svg-round-corners'
@@ -330,32 +327,6 @@ export const computeEdgePathToMouse = ({
   ).path
 }
 
-export const getEndpointTopOffset = ({
-  endpoints,
-  graphOffsetY,
-  endpointId,
-  graphScale,
-}: {
-  endpoints: IdMap<Endpoint>
-  graphOffsetY: number
-  endpointId?: string
-  graphScale: number
-}): number | undefined => {
-  if (!endpointId) return
-  const endpointRef = endpoints[endpointId]?.ref
-  if (!endpointRef?.current) return
-  const endpointHeight = 20 * graphScale
-  return (
-    (endpointRef.current.getBoundingClientRect().y +
-      endpointHeight / 2 -
-      graphOffsetY) /
-    graphScale
-  )
-}
-
-export const getSourceEndpointId = (edge?: Edge) =>
-  edge?.from.itemId ?? edge?.from.blockId
-
 export const parseNewBlock = (
   type: DraggableBlockType,
   groupId: string