✨ Introduce bot v2 in builder (#328)

Also, the new engine is the default for updated typebots for viewer

Closes #211

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx

@@ -64,6 +64,7 @@ export const BlockNode = ({
     setFocusedGroupId,
     previewingEdge,
     isReadOnly,
+    previewingBlock,
   } = useGraph()
   const { mouseOverBlock, setMouseOverBlock } = useBlockDnd()
   const { typebot, updateBlock } = useTypebot()
@@ -76,7 +77,10 @@ export const BlockNode = ({
   )
   const blockRef = useRef<HTMLDivElement | null>(null)
 
-  const isPreviewing = isConnecting || previewingEdge?.to.blockId === block.id
+  const isPreviewing =
+    isConnecting ||
+    previewingEdge?.to.blockId === block.id ||
+    previewingBlock?.id === block.id
 
   const onDrag = (position: NodePosition) => {
     if (block.type === 'start' || !onMouseDown) return

apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx

@@ -61,6 +61,7 @@ const NonMemoizedDraggableGroupNode = ({
     connectingIds,
     setConnectingIds,
     previewingEdge,
+    previewingBlock,
     isReadOnly,
     focusedGroupId,
     setFocusedGroupId,
@@ -91,6 +92,7 @@ const NonMemoizedDraggableGroupNode = ({
   }, [group.title])
 
   const isPreviewing =
+    previewingBlock?.groupId === group.id ||
     previewingEdge?.from.groupId === group.id ||
     (previewingEdge?.to.groupId === group.id &&
       isNotDefined(previewingEdge.to.blockId))

apps/builder/src/features/graph/providers/GraphProvider.tsx

@@ -62,11 +62,18 @@ export type Endpoint = {
 
 export type GroupsCoordinates = IdMap<Coordinates>
 
+type PreviewingBlock = {
+  id: string
+  groupId: string
+}
+
 const graphContext = createContext<{
   graphPosition: Position
   setGraphPosition: Dispatch<SetStateAction<Position>>
   connectingIds: ConnectingIds | null
   setConnectingIds: Dispatch<SetStateAction<ConnectingIds | null>>
+  previewingBlock?: PreviewingBlock
+  setPreviewingBlock: Dispatch<SetStateAction<PreviewingBlock | undefined>>
   previewingEdge?: Edge
   setPreviewingEdge: Dispatch<SetStateAction<Edge | undefined>>
   sourceEndpoints: IdMap<Endpoint>
@@ -99,6 +106,7 @@ export const GraphProvider = ({
   )
   const [connectingIds, setConnectingIds] = useState<ConnectingIds | null>(null)
   const [previewingEdge, setPreviewingEdge] = useState<Edge>()
+  const [previewingBlock, setPreviewingBlock] = useState<PreviewingBlock>()
   const [sourceEndpoints, setSourceEndpoints] = useState<IdMap<Endpoint>>({})
   const [targetEndpoints, setTargetEndpoints] = useState<IdMap<Endpoint>>({})
   const [openedBlockId, setOpenedBlockId] = useState<string>()
@@ -139,6 +147,8 @@ export const GraphProvider = ({
         isReadOnly,
         focusedGroupId,
         setFocusedGroupId,
+        setPreviewingBlock,
+        previewingBlock,
       }}
     >
       {children}