✨ Add picture choice block

Closes #476

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

@@ -40,6 +40,7 @@ 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'
+import { PictureChoiceNode } from '@/features/blocks/inputs/pictureChoice/components/PictureChoiceNode'
 
 type Props = {
   block: Block | StartBlock
@@ -98,6 +99,9 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
     case InputBlockType.CHOICE: {
       return <ButtonsBlockNode block={block} indices={indices} />
     }
+    case InputBlockType.PICTURE_CHOICE: {
+      return <PictureChoiceNode block={block} indices={indices} />
+    }
     case InputBlockType.PHONE: {
       return (
         <PhoneNodeContent

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

@@ -30,7 +30,7 @@ export const HelpDocButton = ({ blockType }: HelpDocButtonProps) => {
   )
 }
 
-const getHelpDocUrl = (blockType: BlockWithOptions['type']): string | null => {
+const getHelpDocUrl = (blockType: BlockWithOptions['type']): string => {
   switch (blockType) {
     case LogicBlockType.TYPEBOT_LINK:
       return 'https://docs.typebot.io/editor/blocks/logic/typebot-link'
@@ -76,7 +76,15 @@ const getHelpDocUrl = (blockType: BlockWithOptions['type']): string | null => {
       return 'https://docs.typebot.io/editor/blocks/integrations/pabbly'
     case IntegrationBlockType.WEBHOOK:
       return 'https://docs.typebot.io/editor/blocks/integrations/webhook'
-    default:
-      return null
+    case InputBlockType.PICTURE_CHOICE:
+      return 'https://docs.typebot.io/editor/blocks/inputs/picture-choice'
+    case IntegrationBlockType.OPEN_AI:
+      return 'https://docs.typebot.io/editor/blocks/integrations/openai'
+    case IntegrationBlockType.MAKE_COM:
+      return 'https://docs.typebot.io/editor/blocks/integrations/make-com'
+    case LogicBlockType.AB_TEST:
+      return 'https://docs.typebot.io/editor/blocks/logic/abTest'
+    case LogicBlockType.JUMP:
+      return 'https://docs.typebot.io/editor/blocks/logic/jump'
   }
 }

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

@@ -46,6 +46,7 @@ import { PhoneInputSettings } from '@/features/blocks/inputs/phone/components/Ph
 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'
+import { PictureChoiceSettings } from '@/features/blocks/inputs/pictureChoice/components/PictureChoiceSettings'
 
 type Props = {
   block: BlockWithOptions
@@ -160,6 +161,14 @@ export const BlockSettings = ({
         />
       )
     }
+    case InputBlockType.PICTURE_CHOICE: {
+      return (
+        <PictureChoiceSettings
+          options={block.options}
+          onOptionsChange={updateOptions}
+        />
+      )
+    }
     case InputBlockType.PAYMENT: {
       return (
         <PaymentSettings

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

@@ -109,6 +109,7 @@ export const ItemNode = ({
                 }}
                 pos="absolute"
                 right="-49px"
+                bottom="9px"
                 pointerEvents="all"
               />
             )}

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

@@ -1,4 +1,5 @@
 import { ButtonsItemNode } from '@/features/blocks/inputs/buttons/components/ButtonsItemNode'
+import { PictureChoiceItemNode } from '@/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode'
 import { ConditionItemNode } from '@/features/blocks/logic/condition/components/ConditionItemNode'
 import { Item, ItemIndices, ItemType } from '@typebot.io/schemas'
 import React from 'react'
@@ -9,7 +10,11 @@ type Props = {
   isMouseOver: boolean
 }
 
-export const ItemNodeContent = ({ item, indices, isMouseOver }: Props) => {
+export const ItemNodeContent = ({
+  item,
+  indices,
+  isMouseOver,
+}: Props): JSX.Element => {
   switch (item.type) {
     case ItemType.BUTTON:
       return (
@@ -20,6 +25,14 @@ export const ItemNodeContent = ({ item, indices, isMouseOver }: Props) => {
           indices={indices}
         />
       )
+    case ItemType.PICTURE_CHOICE:
+      return (
+        <PictureChoiceItemNode
+          item={item}
+          isMouseOver={isMouseOver}
+          indices={indices}
+        />
+      )
     case ItemType.CONDITION:
       return (
         <ConditionItemNode

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

@@ -75,7 +75,7 @@ export const ItemNodesList = ({
   }, [block.id, mouseOverBlock?.id, showPlaceholders])
 
   const handleMouseMoveOnBlock = (event: MouseEvent) => {
-    if (!isDraggingOnCurrentBlock) return
+    if (!isDraggingOnCurrentBlock || !showPlaceholders) return
     const index = computeNearestPlaceholderIndex(event.pageY, placeholderRefs)
     setExpandedPlaceholderIndex(index)
   }