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
 }

packages/bot-engine/src/services/inputs.ts

@@ -4,10 +4,10 @@ export const getSingleChoiceTargetId = (
   currentStep: ChoiceInputStep,
   choiceItems: Table<ChoiceItem>,
   answerContent?: string
-): Target | undefined => {
+): string | undefined => {
   const itemId = currentStep.options.itemIds.find(
     (itemId) => choiceItems.byId[itemId].content === answerContent
   )
   if (!itemId) throw new Error('itemId should exist')
-  return choiceItems.byId[itemId].target ?? currentStep.target
+  return choiceItems.byId[itemId].edgeId ?? currentStep.edgeId
 }

packages/bot-engine/src/services/integration.ts

@@ -44,7 +44,7 @@ const executeGoogleSheetIntegration = async (
   variables: Table<Variable>,
   updateVariableValue: (variableId: string, value: string) => void
 ) => {
-  if (!step.options) return step.target
+  if (!step.options) return step.edgeId
   switch (step.options?.action) {
     case GoogleSheetsAction.INSERT_ROW:
       await insertRowInGoogleSheets(step.options, variables)
@@ -56,7 +56,7 @@ const executeGoogleSheetIntegration = async (
       await getRowFromGoogleSheets(step.options, variables, updateVariableValue)
       break
   }
-  return step.target
+  return step.edgeId
 }
 
 const insertRowInGoogleSheets = async (

packages/bot-engine/src/services/logic.ts

@@ -15,7 +15,7 @@ export const executeLogic = (
   step: LogicStep,
   variables: Table<Variable>,
   updateVariableValue: (variableId: string, expression: string) => void
-): Target | undefined => {
+): string | undefined => {
   switch (step.type) {
     case LogicStepType.SET_VARIABLE: {
       if (!step.options?.variableId || !step.options.expressionToEvaluate)
@@ -36,7 +36,7 @@ export const executeLogic = (
           : step.options?.comparisons.allIds.some(
               executeComparison(step, variables)
             )
-      return isConditionPassed ? step.trueTarget : step.falseTarget
+      return isConditionPassed ? step.trueEdgeId : step.falseEdgeId
     }
   }
 }