feat(editor): ✨ Start preview from any block

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

@@ -33,10 +33,13 @@ type ChatBlockProps = {
   startStepIndex: number
   blockTitle: string
   keepShowingHostAvatar: boolean
-  onBlockEnd: (
-    edgeId?: string,
+  onBlockEnd: ({
+    edgeId,
+    updatedTypebot,
+  }: {
+    edgeId?: string
     updatedTypebot?: PublicTypebot | LinkedTypebot
-  ) => void
+  }) => void
 }
 
 type ChatDisplayChunk = { bubbles: BubbleStep[]; input?: InputStep }
@@ -129,7 +132,9 @@ export const ChatBlock = ({
         currentStep.type === LogicStepType.REDIRECT &&
         currentStep.options.isNewTab === false
       if (isRedirecting) return
-      nextEdgeId ? onBlockEnd(nextEdgeId, linkedTypebot) : displayNextStep()
+      nextEdgeId
+        ? onBlockEnd({ edgeId: nextEdgeId, updatedTypebot: linkedTypebot })
+        : displayNextStep()
     }
     if (isIntegrationStep(currentStep)) {
       const nextEdgeId = await executeIntegration({
@@ -149,9 +154,10 @@ export const ChatBlock = ({
           resultId,
         },
       })
-      nextEdgeId ? onBlockEnd(nextEdgeId) : displayNextStep()
+      nextEdgeId ? onBlockEnd({ edgeId: nextEdgeId }) : displayNextStep()
     }
-    if (currentStep.type === 'start') onBlockEnd(currentStep.outgoingEdgeId)
+    if (currentStep.type === 'start')
+      onBlockEnd({ edgeId: currentStep.outgoingEdgeId })
   }
 
   const displayNextStep = (answerContent?: string, isRetry?: boolean) => {
@@ -175,14 +181,14 @@ export const ChatBlock = ({
         const nextEdgeId = currentStep.items.find(
           (i) => i.content === answerContent
         )?.outgoingEdgeId
-        if (nextEdgeId) return onBlockEnd(nextEdgeId)
+        if (nextEdgeId) return onBlockEnd({ edgeId: nextEdgeId })
       }
 
       if (currentStep?.outgoingEdgeId || processedSteps.length === steps.length)
-        return onBlockEnd(currentStep.outgoingEdgeId)
+        return onBlockEnd({ edgeId: currentStep.outgoingEdgeId })
     }
     const nextStep = steps[processedSteps.length + startStepIndex]
-    nextStep ? insertStepInStack(nextStep) : onBlockEnd()
+    nextStep ? insertStepInStack(nextStep) : onBlockEnd({})
   }
 
   const avatarSrc = typebot.theme.chat.hostAvatar?.url

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

@@ -13,12 +13,14 @@ import { ChatContext } from 'contexts/ChatContext'
 type Props = {
   theme: Theme
   predefinedVariables?: { [key: string]: string | undefined }
+  startBlockId?: string
   onNewBlockVisible: (edge: Edge) => void
   onCompleted: () => void
 }
 export const ConversationContainer = ({
   theme,
   predefinedVariables,
+  startBlockId,
   onNewBlockVisible,
   onCompleted,
 }: Props) => {
@@ -36,17 +38,35 @@ export const ConversationContainer = ({
   const bottomAnchor = useRef<HTMLDivElement | null>(null)
   const scrollableContainer = useRef<HTMLDivElement | null>(null)
 
-  const displayNextBlock = (
-    edgeId?: string,
+  const displayNextBlock = ({
+    edgeId,
+    updatedTypebot,
+    blockId,
+  }: {
+    edgeId?: string
+    blockId?: string
     updatedTypebot?: PublicTypebot | LinkedTypebot
-  ) => {
+  }) => {
     const currentTypebot = updatedTypebot ?? typebot
+    if (blockId) {
+      const nextBlock = currentTypebot.blocks.find(byId(blockId))
+      if (!nextBlock) return
+      onNewBlockVisible({
+        id: 'edgeId',
+        from: { blockId: 'block', stepId: 'step' },
+        to: { blockId },
+      })
+      return setDisplayedBlocks([
+        ...displayedBlocks,
+        { block: nextBlock, startStepIndex: 0 },
+      ])
+    }
     const nextEdge = currentTypebot.edges.find(byId(edgeId))
     if (!nextEdge) {
       if (linkedBotQueue.length > 0) {
         const nextEdgeId = linkedBotQueue[0].edgeId
         popEdgeIdFromLinkedTypebotQueue()
-        displayNextBlock(nextEdgeId)
+        displayNextBlock({ edgeId: nextEdgeId })
       }
       return onCompleted()
     }
@@ -65,7 +85,12 @@ export const ConversationContainer = ({
   useEffect(() => {
     const prefilledVariables = injectPredefinedVariables(predefinedVariables)
     updateVariables(prefilledVariables)
-    displayNextBlock(typebot.blocks[0].steps[0].outgoingEdgeId)
+    displayNextBlock({
+      edgeId: startBlockId
+        ? undefined
+        : typebot.blocks[0].steps[0].outgoingEdgeId,
+      blockId: startBlockId,
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

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

@@ -30,6 +30,7 @@ export type TypebotViewerProps = {
   style?: CSSProperties
   predefinedVariables?: { [key: string]: string | undefined }
   resultId?: string
+  startBlockId?: string
   onNewBlockVisible?: (edge: Edge) => void
   onNewAnswer?: (answer: Answer) => Promise<void>
   onNewLog?: (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) => void
@@ -43,6 +44,7 @@ export const TypebotViewer = ({
   isPreview = false,
   style,
   resultId,
+  startBlockId,
   predefinedVariables,
   onNewLog,
   onNewBlockVisible,
@@ -116,6 +118,7 @@ export const TypebotViewer = ({
                 onNewBlockVisible={handleNewBlockVisible}
                 onCompleted={handleCompleted}
                 predefinedVariables={predefinedVariables}
+                startBlockId={startBlockId}
               />
             </div>
             {typebot.settings.general.isBrandingEnabled && <LiteBadge />}