♻️ Normalize data

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

@@ -1,21 +1,21 @@
 import React, { useEffect, useState } from 'react'
-import { Block, Step } from '../../models'
 import { animateScroll as scroll } from 'react-scroll'
 import { TransitionGroup, CSSTransition } from 'react-transition-group'
 import { ChatStep } from './ChatStep'
 import { AvatarSideContainer } from './AvatarSideContainer'
 import { HostAvatarsContext } from '../../contexts/HostAvatarsContext'
+import { Step, Table } from 'models'
 
 type ChatBlockProps = {
-  block: Block
+  steps: Table<Step>
   onBlockEnd: (nextBlockId?: string) => void
 }
 
-export const ChatBlock = ({ block, onBlockEnd }: ChatBlockProps) => {
+export const ChatBlock = ({ steps, onBlockEnd }: ChatBlockProps) => {
   const [displayedSteps, setDisplayedSteps] = useState<Step[]>([])
 
   useEffect(() => {
-    setDisplayedSteps([block.steps[0]])
+    setDisplayedSteps([steps.byId[steps.allIds[0]]])
   }, [])
 
   useEffect(() => {
@@ -33,10 +33,10 @@ export const ChatBlock = ({ block, onBlockEnd }: ChatBlockProps) => {
     const currentStep = [...displayedSteps].pop()
     if (
       currentStep?.target?.blockId ||
-      displayedSteps.length === block.steps.length
+      displayedSteps.length === steps.allIds.length
     )
       return onBlockEnd(currentStep?.target?.blockId)
-    const nextStep = block.steps[displayedSteps.length]
+    const nextStep = steps.byId[displayedSteps.length]
     if (nextStep) setDisplayedSteps([...displayedSteps, nextStep])
   }
 

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useAnswers } from '../../../contexts/AnswersContext'
 import { useHostAvatars } from '../../../contexts/HostAvatarsContext'
-import { Step } from '../../../models'
+import { Step } from 'models'
 import { isTextInputStep, isTextStep } from '../../../services/utils'
 import { GuestBubble } from './bubbles/GuestBubble'
 import { HostMessageBubble } from './bubbles/HostMessageBubble'

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/HostMessageBubble.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useHostAvatars } from '../../../../contexts/HostAvatarsContext'
 import { useTypebot } from '../../../../contexts/TypebotContext'
-import { StepType, TextStep } from '../../../../models'
+import { StepType, TextStep } from 'models'
 import { computeTypingTimeout } from '../../../../services/chat'
 import { TypingContent } from './TypingContent'
 

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

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { Answer, PublicTypebot } from '..'
 
-import { Block } from '..'
 import { ChatBlock } from './ChatBlock/ChatBlock'
 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 } from 'models'
+import { filterTable } from 'utils'
 
 type Props = {
   typebot: PublicTypebot
@@ -28,14 +28,17 @@ export const ConversationContainer = ({
 
   const displayNextBlock = (blockId?: string) => {
     if (!blockId) return onCompleted()
-    const nextBlock = typebot.blocks.find((b) => b.id === blockId)
+    const nextBlock = typebot.blocks.byId[blockId]
     if (!nextBlock) return onCompleted()
     onNewBlockVisible(blockId)
     setDisplayedBlocks([...displayedBlocks, nextBlock])
   }
 
   useEffect(() => {
-    const firstBlockId = typebot.startBlock.steps[0].target?.blockId
+    const blocks = typebot.blocks
+    const firstBlockId =
+      typebot.steps.byId[blocks.byId[blocks.allIds[0]].stepIds[0]].target
+        ?.blockId
     if (firstBlockId) displayNextBlock(firstBlockId)
   }, [])
 
@@ -58,7 +61,7 @@ export const ConversationContainer = ({
       {displayedBlocks.map((block, idx) => (
         <ChatBlock
           key={block.id + idx}
-          block={block}
+          steps={filterTable(block.stepIds, typebot.steps)}
           onBlockEnd={displayNextBlock}
         />
       ))}

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

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react'
-import { Answer, BackgroundType, PublicTypebot } from '../models'
 import { TypebotContext } from '../contexts/TypebotContext'
 import Frame from 'react-frame-component'
 //@ts-ignore
 import style from '../assets/style.css'
 import { ConversationContainer } from './ConversationContainer'
 import { AnswersContext } from '../contexts/AnswersContext'
+import { Answer, BackgroundType, PublicTypebot } from 'models'
 
 export type TypebotViewerProps = {
   typebot: PublicTypebot