✨ Add AB test block

Closes #449

apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx

@@ -39,6 +39,7 @@ import { TypebotLinkNode } from '@/features/blocks/logic/typebotLink/components/
 import { ItemNodesList } from '../item/ItemNodesList'
 import { GoogleAnalyticsNodeBody } from '@/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsNodeBody'
 import { ChatwootNodeBody } from '@/features/blocks/integrations/chatwoot/components/ChatwootNodeBody'
+import { AbTestNodeBody } from '@/features/blocks/logic/abTest/components/AbTestNodeBody'
 
 type Props = {
   block: Block | StartBlock
@@ -142,6 +143,9 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
     case LogicBlockType.JUMP: {
       return <JumpNodeBody options={block.options} />
     }
+    case LogicBlockType.AB_TEST: {
+      return <AbTestNodeBody block={block} />
+    }
     case LogicBlockType.TYPEBOT_LINK:
       return <TypebotLinkNode block={block} />
     case LogicBlockType.CONDITION:

apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx

@@ -45,6 +45,7 @@ import { DateInputSettings } from '@/features/blocks/inputs/date/components/Date
 import { PhoneInputSettings } from '@/features/blocks/inputs/phone/components/PhoneInputSettings'
 import { GoogleSheetsSettings } from '@/features/blocks/integrations/googleSheets/components/GoogleSheetsSettings'
 import { ChatwootSettings } from '@/features/blocks/integrations/chatwoot/components/ChatwootSettings'
+import { AbTestSettings } from '@/features/blocks/logic/abTest/components/AbTestSettings'
 
 type Props = {
   block: BlockWithOptions
@@ -229,6 +230,14 @@ export const BlockSettings = ({
         />
       )
     }
+    case LogicBlockType.AB_TEST: {
+      return (
+        <AbTestSettings
+          options={block.options}
+          onOptionsChange={updateOptions}
+        />
+      )
+    }
     case IntegrationBlockType.GOOGLE_SHEETS: {
       return (
         <GoogleSheetsSettings

apps/builder/src/features/graph/components/nodes/item/ItemNode.tsx

@@ -1,6 +1,11 @@
 import { Flex, useColorModeValue } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { ChoiceInputBlock, Item, ItemIndices } from '@typebot.io/schemas'
+import {
+  ChoiceInputBlock,
+  Item,
+  ItemIndices,
+  ItemType,
+} from '@typebot.io/schemas'
 import React, { useRef, useState } from 'react'
 import { SourceEndpoint } from '../../endpoints/SourceEndpoint'
 import { ItemNodeContent } from './ItemNodeContent'
@@ -9,6 +14,7 @@ import { ContextMenu } from '@/components/ContextMenu'
 import { isDefined } from '@typebot.io/lib'
 import { Coordinates } from '@/features/graph/types'
 import {
+  DraggabbleItem,
   NodePosition,
   useDragDistance,
 } from '@/features/graph/providers/GraphDndProvider'
@@ -20,7 +26,7 @@ type Props = {
   indices: ItemIndices
   onMouseDown?: (
     blockNodePosition: { absolute: Coordinates; relative: Coordinates },
-    item: Item
+    item: DraggabbleItem
   ) => void
   connectionDisabled?: boolean
 }
@@ -33,7 +39,7 @@ export const ItemNode = ({
 }: Props) => {
   const previewingBorderColor = useColorModeValue('blue.400', 'blue.300')
   const borderColor = useColorModeValue('gray.200', 'gray.700')
-  const bg = useColorModeValue('white', undefined)
+  const bg = useColorModeValue('white', 'gray.850')
   const { typebot } = useTypebot()
   const { previewingEdge } = useGraph()
   const [isMouseOver, setIsMouseOver] = useState(false)
@@ -48,7 +54,7 @@ export const ItemNode = ({
         | undefined
     )?.options?.isMultipleChoice
   const onDrag = (position: NodePosition) => {
-    if (!onMouseDown) return
+    if (!onMouseDown || item.type === ItemType.AB_TEST) return
     onMouseDown(position, item)
   }
   useDragDistance({

apps/builder/src/features/graph/components/nodes/item/ItemNodeContent.tsx

@@ -28,5 +28,7 @@ export const ItemNodeContent = ({ item, indices, isMouseOver }: Props) => {
           indices={indices}
         />
       )
+    case ItemType.AB_TEST:
+      return <></>
   }
 }

apps/builder/src/features/graph/components/nodes/item/ItemNodesList.tsx

@@ -11,7 +11,6 @@ import {
   BlockIndices,
   BlockWithItems,
   LogicBlockType,
-  Item,
 } from '@typebot.io/schemas'
 import React, { useEffect, useRef, useState } from 'react'
 import { ItemNode } from './ItemNode'
@@ -20,6 +19,7 @@ import { isDefined } from '@typebot.io/lib'
 import {
   useBlockDnd,
   computeNearestPlaceholderIndex,
+  DraggabbleItem,
 } from '@/features/graph/providers/GraphDndProvider'
 import { useGraph } from '@/features/graph/providers/GraphProvider'
 import { Coordinates } from '@dnd-kit/utilities'
@@ -107,7 +107,7 @@ export const ItemNodesList = ({
     (itemIndex: number) =>
     (
       { absolute, relative }: { absolute: Coordinates; relative: Coordinates },
-      item: Item
+      item: DraggabbleItem
     ) => {
       if (!typebot || block.items.length <= 1) return
       placeholderRefs.current.splice(itemIndex + 1, 1)