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

packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx

@@ -4,7 +4,7 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group'
 import { ChatStep } from './ChatStep'
 import { AvatarSideContainer } from './AvatarSideContainer'
 import { HostAvatarsContext } from '../../contexts/HostAvatarsContext'
-import { Step, Target } from 'models'
+import { Edge, Step, Target } from 'models'
 import { useTypebot } from '../../contexts/TypebotContext'
 import {
   isChoiceInput,
@@ -20,7 +20,7 @@ import { executeIntegration } from 'services/integration'
 type ChatBlockProps = {
   stepIds: string[]
   startStepId?: string
-  onBlockEnd: (target?: Target) => void
+  onBlockEnd: (edgeId?: string) => void
 }
 
 export const ChatBlock = ({
@@ -46,20 +46,20 @@ export const ChatBlock = ({
     const currentStep = [...displayedSteps].pop()
     if (!currentStep) return
     if (isLogicStep(currentStep)) {
-      const target = executeLogic(
+      const nextEdgeId = executeLogic(
         currentStep,
         typebot.variables,
         updateVariableValue
       )
-      target ? onBlockEnd(target) : displayNextStep()
+      nextEdgeId ? onBlockEnd(nextEdgeId) : displayNextStep()
     }
     if (isIntegrationStep(currentStep)) {
-      const target = await executeIntegration(
+      const nextEdgeId = await executeIntegration(
         currentStep,
         typebot.variables,
         updateVariableValue
       )
-      target ? onBlockEnd(target) : displayNextStep()
+      nextEdgeId ? onBlockEnd(nextEdgeId) : displayNextStep()
     }
   }
 
@@ -90,11 +90,8 @@ export const ChatBlock = ({
             answerContent
           )
         )
-      if (
-        currentStep?.target?.blockId ||
-        displayedSteps.length === stepIds.length
-      )
-        return onBlockEnd(currentStep?.target)
+      if (currentStep?.edgeId || displayedSteps.length === stepIds.length)
+        return onBlockEnd(currentStep.edgeId)
     }
     const nextStep = typebot.steps.byId[stepIds[displayedSteps.length]]
     if (nextStep) setDisplayedSteps([...displayedSteps, nextStep])

packages/bot-engine/src/components/ConversationContainer.tsx

@@ -5,11 +5,11 @@ import { useFrame } from 'react-frame-component'
 import { setCssVariablesValue } from '../services/theme'
 import { useAnswers } from '../contexts/AnswersContext'
 import { deepEqual } from 'fast-equals'
-import { Answer, Block, PublicTypebot, Target } from 'models'
+import { Answer, Block, Edge, PublicTypebot } from 'models'
 
 type Props = {
   typebot: PublicTypebot
-  onNewBlockVisible: (blockId: string) => void
+  onNewBlockVisible: (edgeId: string) => void
   onNewAnswer: (answer: Answer) => void
   onCompleted: () => void
 }
@@ -27,22 +27,24 @@ export const ConversationContainer = ({
   const { answers } = useAnswers()
   const bottomAnchor = useRef<HTMLDivElement | null>(null)
 
-  const displayNextBlock = (target?: Target) => {
-    if (!target) return onCompleted()
+  const displayNextBlock = (edgeId?: string) => {
+    const edge = typebot.edges.byId[edgeId ?? '']
+    if (!edge) return onCompleted()
     const nextBlock = {
-      block: typebot.blocks.byId[target.blockId],
-      startStepId: target.stepId,
+      block: typebot.blocks.byId[edge.to.blockId],
+      startStepId: edge.to.stepId,
     }
     if (!nextBlock) return onCompleted()
-    onNewBlockVisible(target.blockId)
+    onNewBlockVisible(edge.id)
     setDisplayedBlocks([...displayedBlocks, nextBlock])
   }
 
   useEffect(() => {
     const blocks = typebot.blocks
-    const firstTarget =
-      typebot.steps.byId[blocks.byId[blocks.allIds[0]].stepIds[0]].target
-    if (firstTarget) displayNextBlock(firstTarget)
+    const firstEdgeId =
+      typebot.steps.byId[blocks.byId[blocks.allIds[0]].stepIds[0]].edgeId
+    if (!firstEdgeId) return
+    displayNextBlock(firstEdgeId)
   }, [])
 
   useEffect(() => {

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -11,7 +11,7 @@ import { Answer, BackgroundType, PublicTypebot } from 'models'
 
 export type TypebotViewerProps = {
   typebot: PublicTypebot
-  onNewBlockVisible?: (blockId: string) => void
+  onNewBlockVisible?: (edgeId: string) => void
   onNewAnswer?: (answer: Answer) => void
   onCompleted?: () => void
 }