feat(editor): ✨ Start preview from any block

apps/builder/components/editor/preview/PreviewDrawer.tsx

@@ -21,7 +21,7 @@ import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 
 export const PreviewDrawer = () => {
   const { typebot } = useTypebot()
-  const { setRightPanel } = useEditor()
+  const { setRightPanel, startPreviewAtBlock } = useEditor()
   const { setPreviewingEdge } = useGraph()
   const [isResizing, setIsResizing] = useState(false)
   const [width, setWidth] = useState(500)
@@ -96,13 +96,14 @@ export const PreviewDrawer = () => {
             borderRadius={'lg'}
             h="full"
             w="full"
-            key={restartKey}
+            key={restartKey + (startPreviewAtBlock ?? '')}
             pointerEvents={isResizing ? 'none' : 'auto'}
           >
             <TypebotViewer
               typebot={publicTypebot}
               onNewBlockVisible={setPreviewingEdge}
               onNewLog={handleNewLog}
+              startBlockId={startPreviewAtBlock}
               isPreview
             />
           </Flex>

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx

@@ -2,6 +2,7 @@ import {
   Editable,
   EditableInput,
   EditablePreview,
+  IconButton,
   Stack,
 } from '@chakra-ui/react'
 import React, { useEffect, useRef, useState } from 'react'
@@ -16,6 +17,8 @@ import { BlockNodeContextMenu } from './BlockNodeContextMenu'
 import { useDebounce } from 'use-debounce'
 import { setMultipleRefs } from 'services/utils'
 import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
+import { PlayIcon } from 'assets/icons'
+import { RightPanel, useEditor } from 'contexts/EditorContext'
 
 type Props = {
   block: Block
@@ -38,6 +41,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
   const { setMouseOverBlock, mouseOverBlock } = useStepDnd()
   const [isMouseDown, setIsMouseDown] = useState(false)
   const [isConnecting, setIsConnecting] = useState(false)
+  const { setRightPanel, setStartPreviewAtBlock } = useEditor()
   const isPreviewing =
     previewingEdge?.from.blockId === block.id ||
     (previewingEdge?.to.blockId === block.id &&
@@ -99,6 +103,12 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
     setFocusedBlockId(block.id)
     setIsMouseDown(true)
   }
+
+  const startPreviewAtThisBlock = () => {
+    setStartPreviewAtBlock(block.id)
+    setRightPanel(RightPanel.PREVIEW)
+  }
+
   const onDragStop = () => setIsMouseDown(false)
   return (
     <ContextMenu<HTMLDivElement>
@@ -165,6 +175,16 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
                 isStartBlock={isStartBlock}
               />
             )}
+            <IconButton
+              icon={<PlayIcon />}
+              aria-label={'Preview bot from this group'}
+              pos="absolute"
+              right={2}
+              top={0}
+              size="sm"
+              variant="outline"
+              onClick={startPreviewAtThisBlock}
+            />
           </Stack>
         </DraggableCore>
       )}

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -23,7 +23,6 @@ export const headerHeight = 56
 
 export const TypebotHeader = () => {
   const router = useRouter()
-  const { rightPanel } = useEditor()
   const {
     typebot,
     updateOnBothTypebots,
@@ -35,13 +34,14 @@ export const TypebotHeader = () => {
     canRedo,
     isSavingLoading,
   } = useTypebot()
-  const { setRightPanel } = useEditor()
+  const { setRightPanel, rightPanel, setStartPreviewAtBlock } = useEditor()
 
   const handleNameSubmit = (name: string) => updateOnBothTypebots({ name })
 
   const handleChangeIcon = (icon: string) => updateTypebot({ icon })
 
   const handlePreviewClick = async () => {
+    setStartPreviewAtBlock(undefined)
     save().then()
     setRightPanel(RightPanel.PREVIEW)
   }