✨ Add picture choice block

Closes #476

apps/builder/src/components/ImageUploadContent/ImageUploadContent.tsx

@@ -57,7 +57,7 @@ export const ImageUploadContent = ({
           onClick={() => setCurrentTab('link')}
           size="sm"
         >
-          Embed link
+          Link
         </Button>
         <Button
           variant={currentTab === 'upload' ? 'solid' : 'ghost'}

apps/builder/src/components/ImageUploadContent/UnsplashPicker.tsx

@@ -2,6 +2,7 @@
 import {
   Alert,
   AlertIcon,
+  Box,
   Flex,
   Grid,
   GridItem,
@@ -157,7 +158,7 @@ export const UnsplashPicker = ({ imageSize, onImageSelect }: Props) => {
       )}
       <Stack overflowY="scroll" maxH="400px" ref={scrollContainer}>
         {images.length > 0 && (
-          <Grid templateColumns="repeat(4, 1fr)" columnGap={2} rowGap={3}>
+          <Grid templateColumns="repeat(3, 1fr)" columnGap={2} rowGap={3}>
             {images.map((image, index) => (
               <GridItem
                 as={Stack}
@@ -190,11 +191,17 @@ type UnsplashImageProps = {
 }
 
 const UnsplashImage = ({ image, onClick }: UnsplashImageProps) => {
-  const linkColor = useColorModeValue('gray.500', 'gray.400')
+  const [isImageHovered, setIsImageHovered] = useState(false)
+
   const { user, urls, alt_description } = image
 
   return (
-    <>
+    <Box
+      pos="relative"
+      onMouseEnter={() => setIsImageHovered(true)}
+      onMouseLeave={() => setIsImageHovered(false)}
+      h="full"
+    >
       <Image
         objectFit="cover"
         src={urls.thumb}
@@ -204,17 +211,28 @@ const UnsplashImage = ({ image, onClick }: UnsplashImageProps) => {
         h="100%"
         cursor="pointer"
       />
-      <TextLink
-        fontSize="xs"
-        isExternal
-        href={`https://unsplash.com/@${user.username}?utm_source=${env(
-          'UNSPLASH_APP_NAME'
-        )}&utm_medium=referral`}
-        noOfLines={1}
-        color={linkColor}
+      <Box
+        pos="absolute"
+        bottom={0}
+        left={0}
+        bgColor="rgba(0,0,0,.5)"
+        px="2"
+        rounded="md"
+        opacity={isImageHovered ? 1 : 0}
+        transition="opacity .2s ease-in-out"
       >
-        {user.name}
-      </TextLink>
-    </>
+        <TextLink
+          fontSize="xs"
+          isExternal
+          href={`https://unsplash.com/@${user.username}?utm_source=${env(
+            'UNSPLASH_APP_NAME'
+          )}&utm_medium=referral`}
+          noOfLines={1}
+          color="white"
+        >
+          {user.name}
+        </TextLink>
+      </Box>
+    </Box>
   )
 }

apps/builder/src/components/SwitchWithRelatedSettings.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { SwitchWithLabel, SwitchWithLabelProps } from './inputs/SwitchWithLabel'
+import { Stack } from '@chakra-ui/react'
+
+type Props = SwitchWithLabelProps
+
+export const SwitchWithRelatedSettings = ({ children, ...props }: Props) => (
+  <Stack
+    borderWidth={props.initialValue ? 1 : undefined}
+    rounded="md"
+    p={props.initialValue ? '4' : undefined}
+    spacing={4}
+  >
+    <SwitchWithLabel {...props} />
+    {props.initialValue && children}
+  </Stack>
+)

apps/builder/src/components/inputs/SwitchWithLabel.tsx

@@ -8,7 +8,7 @@ import {
 import React, { useState } from 'react'
 import { MoreInfoTooltip } from '../MoreInfoTooltip'
 
-type SwitchWithLabelProps = {
+export type SwitchWithLabelProps = {
   label: string
   initialValue: boolean
   moreInfoContent?: string

apps/builder/src/features/blocks/bubbles/image/image.spec.ts

@@ -48,7 +48,6 @@ test.describe.parallel('Image bubble block', () => {
       await page.goto(`/typebots/${typebotId}/edit`)
 
       await page.click('text=Click to edit...')
-      await page.click('text=Embed link')
       await page.fill(
         'input[placeholder="Paste the image link..."]',
         unsplashImageSrc

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx

@@ -1,10 +1,14 @@
 import { TextInput } from '@/components/inputs'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
-import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { FormControl, FormLabel, Stack } from '@chakra-ui/react'
-import { ChoiceInputOptions, Variable } from '@typebot.io/schemas'
+import {
+  ChoiceInputOptions,
+  Variable,
+  defaultChoiceInputOptions,
+} from '@typebot.io/schemas'
 import React from 'react'
+import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
 
 type Props = {
   options?: ChoiceInputOptions
@@ -18,6 +22,8 @@ export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
     options && onOptionsChange({ ...options, isSearchable })
   const updateButtonLabel = (buttonLabel: string) =>
     options && onOptionsChange({ ...options, buttonLabel })
+  const updateSearchInputPlaceholder = (searchInputPlaceholder: string) =>
+    options && onOptionsChange({ ...options, searchInputPlaceholder })
   const updateSaveVariable = (variable?: Variable) =>
     options && onOptionsChange({ ...options, variableId: variable?.id })
   const updateDynamicDataVariable = (variable?: Variable) =>
@@ -25,23 +31,31 @@ export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
 
   return (
     <Stack spacing={4}>
-      <SwitchWithLabel
+      <SwitchWithRelatedSettings
         label="Multiple choice?"
         initialValue={options?.isMultipleChoice ?? false}
         onCheckChange={updateIsMultiple}
-      />
-      <SwitchWithLabel
-        label="Is searchable?"
-        initialValue={options?.isSearchable ?? false}
-        onCheckChange={updateIsSearchable}
-      />
-      {options?.isMultipleChoice && (
+      >
         <TextInput
-          label="Button label:"
+          label="Submit button label:"
           defaultValue={options?.buttonLabel ?? 'Send'}
           onChange={updateButtonLabel}
         />
-      )}
+      </SwitchWithRelatedSettings>
+      <SwitchWithRelatedSettings
+        label="Is searchable?"
+        initialValue={options?.isSearchable ?? false}
+        onCheckChange={updateIsSearchable}
+      >
+        <TextInput
+          label="Input placeholder:"
+          defaultValue={
+            options?.searchInputPlaceholder ??
+            defaultChoiceInputOptions.searchInputPlaceholder
+          }
+          onChange={updateSearchInputPlaceholder}
+        />
+      </SwitchWithRelatedSettings>
       <FormControl>
         <FormLabel>
           Dynamic data:{' '}

apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceIcon.tsx

@@ -0,0 +1,7 @@
+import { ImageIcon } from '@/components/icons'
+import { IconProps } from '@chakra-ui/react'
+import React from 'react'
+
+export const PictureChoiceIcon = (props: IconProps) => (
+  <ImageIcon color="orange.500" {...props} />
+)

apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode.tsx

@@ -0,0 +1,148 @@
+import {
+  Fade,
+  IconButton,
+  Flex,
+  Image,
+  Popover,
+  Portal,
+  PopoverContent,
+  PopoverArrow,
+  PopoverBody,
+  PopoverAnchor,
+  useEventListener,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import { ImageIcon, PlusIcon } from '@/components/icons'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { ItemIndices, ItemType } from '@typebot.io/schemas'
+import React, { useRef } from 'react'
+import { PictureChoiceItem } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
+import { useGraph } from '@/features/graph/providers/GraphProvider'
+import { PictureChoiceItemSettings } from './PictureChoiceItemSettings'
+
+type Props = {
+  item: PictureChoiceItem
+  indices: ItemIndices
+  isMouseOver: boolean
+}
+
+export const PictureChoiceItemNode = ({
+  item,
+  indices,
+  isMouseOver,
+}: Props) => {
+  const emptyImageBgColor = useColorModeValue('gray.100', 'gray.700')
+  const { openedItemId, setOpenedItemId } = useGraph()
+  const { updateItem, createItem, typebot } = useTypebot()
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const handlePlusClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const itemIndex = indices.itemIndex + 1
+    createItem(
+      { blockId: item.blockId, type: ItemType.PICTURE_CHOICE },
+      { ...indices, itemIndex }
+    )
+  }
+
+  const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
+
+  const openPopover = () => {
+    setOpenedItemId(item.id)
+  }
+
+  const handleItemChange = (updates: Partial<PictureChoiceItem>) => {
+    updateItem(indices, { ...item, ...updates })
+  }
+
+  const handleMouseWheel = (e: WheelEvent) => {
+    e.stopPropagation()
+  }
+  useEventListener('wheel', handleMouseWheel, ref.current)
+
+  return (
+    <Popover
+      placement="right"
+      isLazy
+      isOpen={openedItemId === item.id}
+      closeOnBlur={false}
+    >
+      <PopoverAnchor>
+        <Flex
+          px={4}
+          py={2}
+          justify="center"
+          w="full"
+          pos="relative"
+          onClick={openPopover}
+          data-testid="item-node"
+          userSelect="none"
+        >
+          {item.pictureSrc ? (
+            <Image
+              src={item.pictureSrc}
+              alt="Picture choice image"
+              rounded="md"
+              maxH="128px"
+              w="full"
+              objectFit="cover"
+              userSelect="none"
+              draggable={false}
+            />
+          ) : (
+            <Flex
+              width="full"
+              height="100px"
+              bgColor={emptyImageBgColor}
+              rounded="md"
+              justify="center"
+              align="center"
+            >
+              <ImageIcon />
+            </Flex>
+          )}
+          <Fade
+            in={isMouseOver}
+            style={{
+              position: 'absolute',
+              bottom: '-15px',
+              zIndex: 3,
+              left: '90px',
+            }}
+            unmountOnExit
+          >
+            <IconButton
+              aria-label="Add item"
+              icon={<PlusIcon />}
+              size="xs"
+              shadow="md"
+              colorScheme="gray"
+              borderWidth={1}
+              onClick={handlePlusClick}
+            />
+          </Fade>
+        </Flex>
+      </PopoverAnchor>
+      <Portal>
+        <PopoverContent pos="relative" onMouseDown={handleMouseDown}>
+          <PopoverArrow />
+          <PopoverBody
+            py="6"
+            overflowY="scroll"
+            maxH="400px"
+            shadow="lg"
+            ref={ref}
+          >
+            {typebot && (
+              <PictureChoiceItemSettings
+                typebotId={typebot.id}
+                item={item}
+                onItemChange={handleItemChange}
+              />
+            )}
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  )
+}

apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { TextInput, Textarea } from '@/components/inputs'
+import { PictureChoiceItem } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
+import {
+  Button,
+  HStack,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  Stack,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { ImageUploadContent } from '@/components/ImageUploadContent'
+
+type Props = {
+  typebotId: string
+  item: PictureChoiceItem
+  onItemChange: (updates: Partial<PictureChoiceItem>) => void
+}
+
+export const PictureChoiceItemSettings = ({
+  typebotId,
+  item,
+  onItemChange,
+}: Props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const updateTitle = (title: string) => onItemChange({ ...item, title })
+
+  const updateImage = (pictureSrc: string) => {
+    onItemChange({ ...item, pictureSrc })
+    onClose()
+  }
+
+  const updateDescription = (description: string) =>
+    onItemChange({ ...item, description })
+
+  return (
+    <Stack>
+      <HStack>
+        <Text fontWeight="medium">Image:</Text>
+        <Popover isLazy isOpen={isOpen}>
+          <PopoverAnchor>
+            <Button size="sm" onClick={onOpen}>
+              Pick an image
+            </Button>
+          </PopoverAnchor>
+          <PopoverContent p="4" w="500px">
+            <ImageUploadContent
+              filePath={`typebots/${typebotId}/blocks/${item.blockId}/items/${item.id}`}
+              defaultUrl={item.pictureSrc}
+              onSubmit={updateImage}
+            />
+          </PopoverContent>
+        </Popover>
+      </HStack>
+      <TextInput
+        label="Title:"
+        defaultValue={item.title}
+        onChange={updateTitle}
+      />
+      <Textarea
+        label="Description:"
+        defaultValue={item.description}
+        onChange={updateDescription}
+      />
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceNode.tsx

@@ -0,0 +1,42 @@
+import { BlockIndices } from '@typebot.io/schemas'
+import React from 'react'
+import { Stack, Tag, Wrap, Text } from '@chakra-ui/react'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { SetVariableLabel } from '@/components/SetVariableLabel'
+import { ItemNodesList } from '@/features/graph/components/nodes/item/ItemNodesList'
+import { PictureChoiceBlock } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
+
+type Props = {
+  block: PictureChoiceBlock
+  indices: BlockIndices
+}
+
+export const PictureChoiceNode = ({ block, indices }: Props) => {
+  const { typebot } = useTypebot()
+  const dynamicVariableName = typebot?.variables.find(
+    (variable) =>
+      variable.id === block.options.dynamicItems?.pictureSrcsVariableId
+  )?.name
+
+  return (
+    <Stack w="full">
+      {block.options.dynamicItems?.isEnabled && dynamicVariableName ? (
+        <Wrap spacing={1}>
+          <Text>Display</Text>
+          <Tag bg="orange.400" color="white">
+            {dynamicVariableName}
+          </Tag>
+          <Text>pictures</Text>
+        </Wrap>
+      ) : (
+        <ItemNodesList block={block} indices={indices} />
+      )}
+      {block.options.variableId ? (
+        <SetVariableLabel
+          variableId={block.options.variableId}
+          variables={typebot?.variables}
+        />
+      ) : null}
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceSettings.tsx

@@ -0,0 +1,142 @@
+import { TextInput } from '@/components/inputs'
+import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { Variable } from '@typebot.io/schemas'
+import React from 'react'
+import {
+  PictureChoiceBlock,
+  defaultPictureChoiceOptions,
+} from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
+import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
+
+type Props = {
+  options?: PictureChoiceBlock['options']
+  onOptionsChange: (options: PictureChoiceBlock['options']) => void
+}
+
+export const PictureChoiceSettings = ({ options, onOptionsChange }: Props) => {
+  const updateIsMultiple = (isMultipleChoice: boolean) =>
+    options && onOptionsChange({ ...options, isMultipleChoice })
+  const updateButtonLabel = (buttonLabel: string) =>
+    options && onOptionsChange({ ...options, buttonLabel })
+  const updateSaveVariable = (variable?: Variable) =>
+    options && onOptionsChange({ ...options, variableId: variable?.id })
+  const updateSearchInputPlaceholder = (searchInputPlaceholder: string) =>
+    options && onOptionsChange({ ...options, searchInputPlaceholder })
+  const updateIsSearchable = (isSearchable: boolean) =>
+    options && onOptionsChange({ ...options, isSearchable })
+
+  const updateIsDynamicItemsEnabled = (isEnabled: boolean) =>
+    options &&
+    onOptionsChange({
+      ...options,
+      dynamicItems: {
+        ...options.dynamicItems,
+        isEnabled,
+      },
+    })
+
+  const updateDynamicItemsPictureSrcsVariable = (variable?: Variable) =>
+    options &&
+    onOptionsChange({
+      ...options,
+      dynamicItems: {
+        ...options.dynamicItems,
+        pictureSrcsVariableId: variable?.id,
+      },
+    })
+
+  const updateDynamicItemsTitlesVariable = (variable?: Variable) =>
+    options &&
+    onOptionsChange({
+      ...options,
+      dynamicItems: {
+        ...options.dynamicItems,
+        titlesVariableId: variable?.id,
+      },
+    })
+
+  const updateDynamicItemsDescriptionsVariable = (variable?: Variable) =>
+    options &&
+    onOptionsChange({
+      ...options,
+      dynamicItems: {
+        ...options.dynamicItems,
+        descriptionsVariableId: variable?.id,
+      },
+    })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithRelatedSettings
+        label="Is searchable?"
+        initialValue={options?.isSearchable ?? false}
+        onCheckChange={updateIsSearchable}
+      >
+        <TextInput
+          label="Input placeholder:"
+          defaultValue={
+            options?.searchInputPlaceholder ??
+            defaultPictureChoiceOptions.searchInputPlaceholder
+          }
+          onChange={updateSearchInputPlaceholder}
+        />
+      </SwitchWithRelatedSettings>
+      <SwitchWithRelatedSettings
+        label="Multiple choice?"
+        initialValue={options?.isMultipleChoice ?? false}
+        onCheckChange={updateIsMultiple}
+      >
+        <TextInput
+          label="Submit button label:"
+          defaultValue={options?.buttonLabel ?? 'Send'}
+          onChange={updateButtonLabel}
+        />
+      </SwitchWithRelatedSettings>
+
+      <SwitchWithRelatedSettings
+        label="Dynamic items?"
+        initialValue={options?.dynamicItems?.isEnabled ?? false}
+        onCheckChange={updateIsDynamicItemsEnabled}
+      >
+        <Stack>
+          <FormLabel mb="0" htmlFor="variable">
+            Images:
+          </FormLabel>
+          <VariableSearchInput
+            initialVariableId={options?.dynamicItems?.pictureSrcsVariableId}
+            onSelectVariable={updateDynamicItemsPictureSrcsVariable}
+          />
+        </Stack>
+        <Stack>
+          <FormLabel mb="0" htmlFor="variable">
+            Titles:
+          </FormLabel>
+          <VariableSearchInput
+            initialVariableId={options?.dynamicItems?.titlesVariableId}
+            onSelectVariable={updateDynamicItemsTitlesVariable}
+          />
+        </Stack>
+        <Stack>
+          <FormLabel mb="0" htmlFor="variable">
+            Descriptions:
+          </FormLabel>
+          <VariableSearchInput
+            initialVariableId={options?.dynamicItems?.descriptionsVariableId}
+            onSelectVariable={updateDynamicItemsDescriptionsVariable}
+          />
+        </Stack>
+      </SwitchWithRelatedSettings>
+
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options?.variableId}
+          onSelectVariable={updateSaveVariable}
+        />
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/inputs/pictureChoice/pictureChoice.spec.ts

@@ -0,0 +1,121 @@
+import test, { expect } from '@playwright/test'
+import { createTypebots } from '@typebot.io/lib/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from '@typebot.io/lib/playwright/databaseHelpers'
+import { InputBlockType, ItemType } from '@typebot.io/schemas'
+import { createId } from '@paralleldrive/cuid2'
+import { defaultPictureChoiceOptions } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
+
+const firstImageSrc =
+  'https://images.unsplash.com/flagged/photo-1575517111839-3a3843ee7f5d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80'
+
+const secondImageSrc =
+  'https://images.unsplash.com/photo-1582582621959-48d27397dc69?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2938&q=80'
+
+const thirdImageSrc =
+  'https://images.unsplash.com/photo-1564019472231-4586c552dc27?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
+
+test.describe.parallel('Picture choice input block', () => {
+  test('can edit items', async ({ page }) => {
+    const typebotId = createId()
+    await createTypebots([
+      {
+        id: typebotId,
+        ...parseDefaultGroupWithBlock({
+          type: InputBlockType.PICTURE_CHOICE,
+          items: [
+            {
+              id: 'choice1',
+              blockId: 'block1',
+              type: ItemType.PICTURE_CHOICE,
+            },
+          ],
+          options: { ...defaultPictureChoiceOptions },
+        }),
+      },
+    ])
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+    await page.getByTestId('item-node').click()
+    await page.getByRole('button', { name: 'Pick an image' }).click()
+    await page.getByPlaceholder('Paste the image link...').fill(firstImageSrc)
+    await page.getByLabel('Title:').fill('First image')
+    await page.getByLabel('Description:').fill('First description')
+    await page.getByText('Default').click()
+    await page.getByRole('img', { name: 'Picture choice image' }).hover()
+    await page.getByRole('button', { name: 'Add item' }).click()
+    await page.getByTestId('item-node').last().click()
+    await page.getByRole('button', { name: 'Pick an image' }).click()
+    await page.getByPlaceholder('Paste the image link...').fill(secondImageSrc)
+    await page.getByLabel('Title:').fill('Second image')
+    await page.getByLabel('Description:').fill('Second description')
+    await page.getByRole('img', { name: 'Picture choice image' }).last().hover()
+    await page.getByRole('button', { name: 'Add item' }).click()
+    await page.getByTestId('item-node').last().click()
+    await expect(
+      page.getByRole('button', { name: 'Pick an image' })
+    ).toHaveCount(1)
+    await page.getByRole('button', { name: 'Pick an image' }).click()
+    await page.getByPlaceholder('Paste the image link...').fill(thirdImageSrc)
+    await page.getByLabel('Title:').fill('Third image')
+    await page.getByLabel('Description:').fill('Third description')
+    await page.getByRole('button', { name: 'Preview' }).click()
+    await expect(
+      page.getByRole('button', {
+        name: 'First image First image First description',
+      })
+    ).toBeVisible()
+    await expect(
+      page.getByRole('button', {
+        name: 'Second image Second image Second description',
+      })
+    ).toBeVisible()
+    await page
+      .getByRole('button', {
+        name: 'Third image Third image Third description',
+      })
+      .click()
+    await expect(page.getByTestId('guest-bubble')).toBeVisible()
+    await expect(
+      page.locator('typebot-standard').getByText('Third image')
+    ).toBeVisible()
+
+    await page.getByTestId('block2-icon').click()
+    await page.getByText('Multiple choice?').click()
+    await page.getByLabel('Submit button label:').fill('Go')
+    await page.getByRole('button', { name: 'Restart' }).click()
+    await page
+      .getByRole('checkbox', {
+        name: 'First image First image First description',
+      })
+      .click()
+    await page
+      .getByRole('checkbox', {
+        name: 'Second image Second image Second description',
+      })
+      .click()
+    await page.getByRole('button', { name: 'Go' }).click()
+    await expect(
+      page.locator('typebot-standard').getByText('First image, Second image')
+    ).toBeVisible()
+
+    await page.getByTestId('block2-icon').click()
+    await page.getByText('Is searchable?').click()
+    await page.getByLabel('Input placeholder:').fill('Search...')
+    await page.getByRole('button', { name: 'Restart' }).click()
+    await page.getByPlaceholder('Search...').fill('second')
+    await expect(
+      page.getByRole('checkbox', {
+        name: 'First image First image First description',
+      })
+    ).toBeHidden()
+    await page
+      .getByRole('checkbox', {
+        name: 'Second image Second image Second description',
+      })
+      .click()
+    await page.getByRole('button', { name: 'Go' }).click()
+    await expect(
+      page.locator('typebot-standard').getByText('Second image')
+    ).toBeVisible()
+  })
+})

apps/builder/src/features/blocks/logic/condition/components/ConditionItemNode.tsx

@@ -6,7 +6,6 @@ import {
   Wrap,
   Fade,
   IconButton,
-  PopoverTrigger,
   Popover,
   Portal,
   PopoverContent,
@@ -14,6 +13,7 @@ import {
   PopoverBody,
   useEventListener,
   useColorModeValue,
+  PopoverAnchor,
 } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import {
@@ -79,7 +79,7 @@ export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
       isOpen={openedItemId === item.id}
       closeOnBlur={false}
     >
-      <PopoverTrigger>
+      <PopoverAnchor>
         <Flex p={3} pos="relative" w="full" onClick={openPopover}>
           {item.content.comparisons.length === 0 ||
           comparisonIsEmpty(item.content.comparisons[0]) ? (
@@ -101,7 +101,7 @@ export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
                       </Tag>
                     )}
                     {comparison.comparisonOperator && (
-                      <Text>
+                      <Text fontSize="sm">
                         {parseComparisonOperatorSymbol(
                           comparison.comparisonOperator
                         )}
@@ -137,7 +137,7 @@ export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
             />
           </Fade>
         </Flex>
-      </PopoverTrigger>
+      </PopoverAnchor>
       <Portal>
         <PopoverContent pos="relative" onMouseDown={handleMouseDown}>
           <PopoverArrow />
@@ -164,7 +164,9 @@ const comparisonIsEmpty = (comparison: Comparison) =>
   isNotDefined(comparison.value) &&
   isNotDefined(comparison.variableId)
 
-const parseComparisonOperatorSymbol = (operator: ComparisonOperators) => {
+const parseComparisonOperatorSymbol = (
+  operator: ComparisonOperators
+): string => {
   switch (operator) {
     case ComparisonOperators.CONTAINS:
       return 'contains'
@@ -178,5 +180,13 @@ const parseComparisonOperatorSymbol = (operator: ComparisonOperators) => {
       return '<'
     case ComparisonOperators.NOT_EQUAL:
       return '!='
+    case ComparisonOperators.ENDS_WITH:
+      return 'ends with'
+    case ComparisonOperators.STARTS_WITH:
+      return 'starts with'
+    case ComparisonOperators.IS_EMPTY:
+      return 'is empty'
+    case ComparisonOperators.NOT_CONTAINS:
+      return 'not contains'
   }
 }

apps/builder/src/features/editor/components/BlockIcon.tsx

@@ -38,6 +38,7 @@ import { RedirectIcon } from '@/features/blocks/logic/redirect/components/Redire
 import { SetVariableIcon } from '@/features/blocks/logic/setVariable/components/SetVariableIcon'
 import { TypebotLinkIcon } from '@/features/blocks/logic/typebotLink/components/TypebotLinkIcon'
 import { AbTestIcon } from '@/features/blocks/logic/abTest/components/AbTestIcon'
+import { PictureChoiceIcon } from '@/features/blocks/inputs/pictureChoice/components/PictureChoiceIcon'
 
 type BlockIconProps = { type: BlockType } & IconProps
 
@@ -72,6 +73,8 @@ export const BlockIcon = ({ type, ...props }: BlockIconProps): JSX.Element => {
       return <PhoneInputIcon color={orange} {...props} />
     case InputBlockType.CHOICE:
       return <ButtonsInputIcon color={orange} {...props} />
+    case InputBlockType.PICTURE_CHOICE:
+      return <PictureChoiceIcon color={orange} {...props} />
     case InputBlockType.PAYMENT:
       return <PaymentInputIcon color={orange} {...props} />
     case InputBlockType.RATING:

apps/builder/src/features/editor/components/BlockLabel.tsx

@@ -13,69 +13,71 @@ type Props = { type: BlockType }
 export const BlockLabel = ({ type }: Props): JSX.Element => {
   switch (type) {
     case 'start':
-      return <Text>Start</Text>
+      return <Text fontSize="sm">Start</Text>
     case BubbleBlockType.TEXT:
     case InputBlockType.TEXT:
-      return <Text>Text</Text>
+      return <Text fontSize="sm">Text</Text>
     case BubbleBlockType.IMAGE:
-      return <Text>Image</Text>
+      return <Text fontSize="sm">Image</Text>
     case BubbleBlockType.VIDEO:
-      return <Text>Video</Text>
+      return <Text fontSize="sm">Video</Text>
     case BubbleBlockType.EMBED:
-      return <Text>Embed</Text>
+      return <Text fontSize="sm">Embed</Text>
     case BubbleBlockType.AUDIO:
-      return <Text>Audio</Text>
+      return <Text fontSize="sm">Audio</Text>
     case InputBlockType.NUMBER:
-      return <Text>Number</Text>
+      return <Text fontSize="sm">Number</Text>
     case InputBlockType.EMAIL:
-      return <Text>Email</Text>
+      return <Text fontSize="sm">Email</Text>
     case InputBlockType.URL:
-      return <Text>Website</Text>
+      return <Text fontSize="sm">Website</Text>
     case InputBlockType.DATE:
-      return <Text>Date</Text>
+      return <Text fontSize="sm">Date</Text>
     case InputBlockType.PHONE:
-      return <Text>Phone</Text>
+      return <Text fontSize="sm">Phone</Text>
     case InputBlockType.CHOICE:
-      return <Text>Button</Text>
+      return <Text fontSize="sm">Button</Text>
+    case InputBlockType.PICTURE_CHOICE:
+      return <Text fontSize="sm">Pic choice</Text>
     case InputBlockType.PAYMENT:
-      return <Text>Payment</Text>
+      return <Text fontSize="sm">Payment</Text>
     case InputBlockType.RATING:
-      return <Text>Rating</Text>
+      return <Text fontSize="sm">Rating</Text>
     case InputBlockType.FILE:
-      return <Text>File</Text>
+      return <Text fontSize="sm">File</Text>
     case LogicBlockType.SET_VARIABLE:
-      return <Text>Set variable</Text>
+      return <Text fontSize="sm">Set variable</Text>
     case LogicBlockType.CONDITION:
-      return <Text>Condition</Text>
+      return <Text fontSize="sm">Condition</Text>
     case LogicBlockType.REDIRECT:
-      return <Text>Redirect</Text>
+      return <Text fontSize="sm">Redirect</Text>
     case LogicBlockType.SCRIPT:
-      return <Text>Script</Text>
+      return <Text fontSize="sm">Script</Text>
     case LogicBlockType.TYPEBOT_LINK:
-      return <Text>Typebot</Text>
+      return <Text fontSize="sm">Typebot</Text>
     case LogicBlockType.WAIT:
-      return <Text>Wait</Text>
+      return <Text fontSize="sm">Wait</Text>
     case LogicBlockType.JUMP:
-      return <Text>Jump</Text>
+      return <Text fontSize="sm">Jump</Text>
     case LogicBlockType.AB_TEST:
-      return <Text>AB Test</Text>
+      return <Text fontSize="sm">AB Test</Text>
     case IntegrationBlockType.GOOGLE_SHEETS:
-      return <Text>Sheets</Text>
+      return <Text fontSize="sm">Sheets</Text>
     case IntegrationBlockType.GOOGLE_ANALYTICS:
-      return <Text>Analytics</Text>
+      return <Text fontSize="sm">Analytics</Text>
     case IntegrationBlockType.WEBHOOK:
-      return <Text>Webhook</Text>
+      return <Text fontSize="sm">Webhook</Text>
     case IntegrationBlockType.ZAPIER:
-      return <Text>Zapier</Text>
+      return <Text fontSize="sm">Zapier</Text>
     case IntegrationBlockType.MAKE_COM:
-      return <Text>Make.com</Text>
+      return <Text fontSize="sm">Make.com</Text>
     case IntegrationBlockType.PABBLY_CONNECT:
-      return <Text>Pabbly</Text>
+      return <Text fontSize="sm">Pabbly</Text>
     case IntegrationBlockType.EMAIL:
-      return <Text>Email</Text>
+      return <Text fontSize="sm">Email</Text>
     case IntegrationBlockType.CHATWOOT:
-      return <Text>Chatwoot</Text>
+      return <Text fontSize="sm">Chatwoot</Text>
     case IntegrationBlockType.OPEN_AI:
-      return <Text>OpenAI</Text>
+      return <Text fontSize="sm">OpenAI</Text>
   }
 }

apps/builder/src/features/editor/providers/typebotActions/items.ts

@@ -3,24 +3,24 @@ import {
   Item,
   BlockWithItems,
   defaultConditionContent,
-  ItemType,
   Block,
   LogicBlockType,
   InputBlockType,
   ConditionItem,
   ButtonItem,
+  PictureChoiceItem,
 } from '@typebot.io/schemas'
 import { SetTypebot } from '../TypebotProvider'
 import { Draft, produce } from 'immer'
 import { cleanUpEdgeDraft } from './edges'
 import { byId, blockHasItems } from '@typebot.io/lib'
 import { createId } from '@paralleldrive/cuid2'
+import { DraggabbleItem } from '@/features/graph/providers/GraphDndProvider'
 
-type NewItem = Pick<
-  ConditionItem | ButtonItem,
-  'blockId' | 'outgoingEdgeId' | 'type'
-> &
-  Partial<ConditionItem | ButtonItem>
+type NewItem = Pick<DraggabbleItem, 'blockId' | 'outgoingEdgeId' | 'type'> &
+  Partial<DraggabbleItem>
+
+type BlockWithCreatableItems = Extract<Block, { items: DraggabbleItem[] }>
 
 export type ItemsActions = {
   createItem: (item: NewItem, indices: ItemIndices) => void
@@ -29,31 +29,40 @@ export type ItemsActions = {
   deleteItem: (indices: ItemIndices) => void
 }
 
-const createItem = (block: Draft<Block>, item: NewItem, itemIndex: number) => {
+const createItem = (
+  block: Draft<BlockWithCreatableItems>,
+  item: NewItem,
+  itemIndex: number
+): Item => {
   switch (block.type) {
     case LogicBlockType.CONDITION: {
-      if (item.type === ItemType.CONDITION) {
-        const newItem = {
-          ...item,
-          id: 'id' in item && item.id ? item.id : createId(),
-          content: item.content ?? defaultConditionContent,
-        }
-        block.items.splice(itemIndex, 0, newItem)
-        return newItem
+      const baseItem = item as ConditionItem
+      const newItem = {
+        ...baseItem,
+        id: 'id' in item && item.id ? item.id : createId(),
+        content: baseItem.content ?? defaultConditionContent,
       }
-      break
+      block.items.splice(itemIndex, 0, newItem)
+      return newItem
     }
     case InputBlockType.CHOICE: {
-      if (item.type === ItemType.BUTTON) {
-        const newItem = {
-          ...item,
-          id: 'id' in item && item.id ? item.id : createId(),
-          content: item.content,
-        }
-        block.items.splice(itemIndex, 0, newItem)
-        return newItem
+      const baseItem = item as ButtonItem
+      const newItem = {
+        ...baseItem,
+        id: 'id' in item && item.id ? item.id : createId(),
+        content: baseItem.content,
       }
-      break
+      block.items.splice(itemIndex, 0, newItem)
+      return newItem
+    }
+    case InputBlockType.PICTURE_CHOICE: {
+      const baseItem = item as PictureChoiceItem
+      const newItem = {
+        ...baseItem,
+        id: 'id' in baseItem && item.id ? item.id : createId(),
+      }
+      block.items.splice(itemIndex, 0, newItem)
+      return newItem
     }
   }
 }
@@ -65,7 +74,9 @@ const itemsAction = (setTypebot: SetTypebot): ItemsActions => ({
   ) =>
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {
-        const block = typebot.groups[groupIndex].blocks[blockIndex]
+        const block = typebot.groups[groupIndex].blocks[
+          blockIndex
+        ] as BlockWithCreatableItems
 
         const newItem = createItem(block, item, itemIndex)
 

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)
   }

apps/builder/src/features/settings/settings.spec.ts

@@ -77,7 +77,7 @@ test.describe.parallel('Settings page', () => {
       await expect(favIconImg).toHaveAttribute('src', '/favicon.png')
       await favIconImg.click()
       await expect(page.locator('text=Giphy')).toBeHidden()
-      await page.click('button:has-text("Embed link")')
+      await page.click('button:has-text("Link")')
       await page.fill(
         'input[placeholder="Paste the image link..."]',
         favIconUrl
@@ -92,7 +92,7 @@ test.describe.parallel('Settings page', () => {
       await expect(websiteImg).toHaveAttribute('src', '/viewer-preview.png')
       await websiteImg.click()
       await expect(page.locator('text=Giphy')).toBeHidden()
-      await page.click('button >> text="Embed link"')
+      await page.click('button >> text="Link"')
       await page.fill('input[placeholder="Paste the image link..."]', imageUrl)
       await expect(websiteImg).toHaveAttribute('src', imageUrl)
 

apps/builder/src/features/theme/theme.spec.ts

@@ -76,7 +76,7 @@ test.describe.parallel('Theme page', () => {
       // Host avatar
       await expect(page.locator('[data-testid="default-avatar"]')).toBeVisible()
       await page.click('[data-testid="default-avatar"]')
-      await page.click('button:has-text("Embed link")')
+      await page.click('button:has-text("Link")')
       await page.fill(
         'input[placeholder="Paste the image link..."]',
         hostAvatarUrl
@@ -169,7 +169,7 @@ test.describe.parallel('Theme page', () => {
         page.locator('[data-testid="default-avatar"] >> nth=-1')
       ).toBeVisible()
       await page.click('[data-testid="default-avatar"]')
-      await page.click('button:has-text("Embed link")')
+      await page.click('button:has-text("Link")')
       await page
         .locator('input[placeholder="Paste the image link..."]')
         .fill(guestAvatarUrl)

apps/builder/src/features/typebot/helpers/hasDefaultConnector.ts

@@ -1,9 +1,18 @@
-import { isChoiceInput, isConditionBlock, isDefined } from '@typebot.io/lib'
+import {
+  isChoiceInput,
+  isConditionBlock,
+  isDefined,
+  isPictureChoiceInput,
+} from '@typebot.io/lib'
 import { Block, InputBlockType, LogicBlockType } from '@typebot.io/schemas'
 
 export const hasDefaultConnector = (block: Block) =>
   (!isChoiceInput(block) &&
+    !isPictureChoiceInput(block) &&
     !isConditionBlock(block) &&
     block.type !== LogicBlockType.AB_TEST) ||
   (block.type === InputBlockType.CHOICE &&
-    isDefined(block.options.dynamicVariableId))
+    isDefined(block.options.dynamicVariableId)) ||
+  (block.type === InputBlockType.PICTURE_CHOICE &&
+    block.options.dynamicItems?.isEnabled &&
+    block.options.dynamicItems?.pictureSrcsVariableId)

apps/builder/src/features/typebot/helpers/parseNewBlock.ts

@@ -43,18 +43,19 @@ import {
   ItemType,
   LogicBlockType,
   defaultAbTestOptions,
+  BlockWithItems,
 } from '@typebot.io/schemas'
+import { defaultPictureChoiceOptions } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
 
 const parseDefaultItems = (
-  type:
-    | LogicBlockType.CONDITION
-    | InputBlockType.CHOICE
-    | LogicBlockType.AB_TEST,
+  type: BlockWithItems['type'],
   blockId: string
 ): Item[] => {
   switch (type) {
     case InputBlockType.CHOICE:
       return [{ id: createId(), blockId, type: ItemType.BUTTON }]
+    case InputBlockType.PICTURE_CHOICE:
+      return [{ id: createId(), blockId, type: ItemType.PICTURE_CHOICE }]
     case LogicBlockType.CONDITION:
       return [
         {
@@ -103,6 +104,8 @@ const parseDefaultBlockOptions = (type: BlockWithOptionsType): BlockOptions => {
       return defaultUrlInputOptions
     case InputBlockType.CHOICE:
       return defaultChoiceInputOptions
+    case InputBlockType.PICTURE_CHOICE:
+      return defaultPictureChoiceOptions
     case InputBlockType.PAYMENT:
       return defaultPaymentInputOptions
     case InputBlockType.RATING:

apps/docs/docs/editor/blocks/inputs/picture-choice.md

@@ -0,0 +1,11 @@
+# Picture choice
+
+The Picture choice input block allows you to offer your user predefined choices illustrated with a picture, either single choice options or multiple choices
+
+<img
+src="/img/blocks/inputs/picture-choice.png"
+width="100%"
+alt="Picture choice overview"
+/>
+
+For advanced configuration, check out the [Buttons block](./buttons) documentation. It works the same way.

apps/viewer/src/features/blocks/inputs/pictureChoice/injectVariableValuesInPictureChoiceBlock.ts

@@ -0,0 +1,55 @@
+import {
+  SessionState,
+  VariableWithValue,
+  ItemType,
+  PictureChoiceBlock,
+} from '@typebot.io/schemas'
+import { isDefined } from '@typebot.io/lib'
+import { deepParseVariables } from '@/features/variables/deepParseVariable'
+
+export const injectVariableValuesInPictureChoiceBlock =
+  (variables: SessionState['typebot']['variables']) =>
+  (block: PictureChoiceBlock): PictureChoiceBlock => {
+    if (
+      block.options.dynamicItems?.isEnabled &&
+      block.options.dynamicItems.pictureSrcsVariableId
+    ) {
+      const pictureSrcsVariable = variables.find(
+        (variable) =>
+          variable.id === block.options.dynamicItems?.pictureSrcsVariableId &&
+          isDefined(variable.value)
+      ) as VariableWithValue | undefined
+      if (!pictureSrcsVariable || typeof pictureSrcsVariable.value === 'string')
+        return block
+      const titlesVariable = block.options.dynamicItems.titlesVariableId
+        ? (variables.find(
+            (variable) =>
+              variable.id === block.options.dynamicItems?.titlesVariableId &&
+              isDefined(variable.value)
+          ) as VariableWithValue | undefined)
+        : undefined
+      const descriptionsVariable = block.options.dynamicItems
+        .descriptionsVariableId
+        ? (variables.find(
+            (variable) =>
+              variable.id ===
+                block.options.dynamicItems?.descriptionsVariableId &&
+              isDefined(variable.value)
+          ) as VariableWithValue | undefined)
+        : undefined
+      return {
+        ...block,
+        items: pictureSrcsVariable.value
+          .filter(isDefined)
+          .map((pictureSrc, idx) => ({
+            id: idx.toString(),
+            type: ItemType.PICTURE_CHOICE,
+            blockId: block.id,
+            pictureSrc,
+            title: titlesVariable?.value?.[idx] ?? '',
+            description: descriptionsVariable?.value?.[idx] ?? '',
+          })),
+      }
+    }
+    return deepParseVariables(variables)(block)
+  }

apps/viewer/src/features/chat/helpers/executeGroup.ts

@@ -21,6 +21,7 @@ import { executeIntegration } from './executeIntegration'
 import { injectVariableValuesInButtonsInputBlock } from '@/features/blocks/inputs/buttons/injectVariableValuesInButtonsInputBlock'
 import { deepParseVariables } from '@/features/variables/deepParseVariable'
 import { computePaymentInputRuntimeOptions } from '@/features/blocks/inputs/payment/computePaymentInputRuntimeOptions'
+import { injectVariableValuesInPictureChoiceBlock } from '@/features/blocks/inputs/pictureChoice/injectVariableValuesInPictureChoiceBlock'
 
 export const executeGroup =
   (
@@ -185,6 +186,11 @@ const injectVariablesValueInBlock =
           block
         )
       }
+      case InputBlockType.PICTURE_CHOICE: {
+        return injectVariableValuesInPictureChoiceBlock(
+          state.typebot.variables
+        )(block)
+      }
       default: {
         return deepParseVariables(state.typebot.variables)({
           ...block,

packages/deprecated/bot-engine/src/components/ChatGroup/ChatBlock/InputChatBlock.tsx

@@ -170,5 +170,7 @@ const Input = ({
       return (
         <FileUploadForm block={block} onSubmit={onSubmit} onSkip={onSkip} />
       )
+    default:
+      return null
   }
 }

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/assets/index.css

@@ -297,3 +297,40 @@ textarea {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
+
+.typebot-picture-button {
+  color: var(--typebot-button-color);
+  background-color: var(--typebot-button-bg-color);
+  border-radius: var(--typebot-border-radius);
+  transition: all 0.3s ease;
+  width: 236px;
+}
+
+.typebot-picture-button > img,
+.typebot-selectable-picture > img {
+  border-radius: var(--typebot-border-radius) var(--typebot-border-radius) 0 0;
+  min-width: 200px;
+  width: 100%;
+  max-height: 200px;
+  height: 100%;
+  object-fit: cover;
+}
+
+.typebot-selectable-picture {
+  border: 1px solid rgba(var(--typebot-button-bg-color-rgb), 0.25);
+  border-radius: var(--typebot-border-radius);
+  color: var(--typebot-container-color);
+  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.08);
+  transition: all 0.3s ease;
+  width: 236px;
+}
+
+.typebot-selectable-picture:hover {
+  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.12);
+  border-color: rgba(var(--typebot-button-bg-color-rgb), 0.3);
+}
+
+.typebot-selectable-picture.selected {
+  background-color: rgba(var(--typebot-button-bg-color-rgb), 0.18);
+  border-color: rgba(var(--typebot-button-bg-color-rgb), 0.35);
+}

packages/embeds/js/src/components/InputChatBlock.tsx

@@ -12,6 +12,7 @@ import type {
   TextInputBlock,
   Theme,
   UrlInputBlock,
+  PictureChoiceBlock,
 } from '@typebot.io/schemas'
 import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/enums'
 import { GuestBubble } from './bubbles/GuestBubble'
@@ -30,8 +31,8 @@ import { isMobile } from '@/utils/isMobileSignal'
 import { PaymentForm } from '@/features/blocks/inputs/payment'
 import { MultipleChoicesForm } from '@/features/blocks/inputs/buttons/components/MultipleChoicesForm'
 import { Buttons } from '@/features/blocks/inputs/buttons/components/Buttons'
-import { SearchableButtons } from '@/features/blocks/inputs/buttons/components/SearchableButtons'
-import { SearchableMultipleChoicesForm } from '@/features/blocks/inputs/buttons/components/SearchableMultipleChoicesForm'
+import { SinglePictureChoice } from '@/features/blocks/inputs/pictureChoice/SinglePictureChoice'
+import { MultiplePictureChoice } from '@/features/blocks/inputs/pictureChoice/MultiplePictureChoice'
 
 type Props = {
   block: NonNullable<ChatReply['input']>
@@ -165,42 +166,40 @@ const Input = (props: {
         {(block) => (
           <Switch>
             <Match when={!block.options.isMultipleChoice}>
-              <Switch>
-                <Match when={block.options.isSearchable}>
-                  <SearchableButtons
-                    inputIndex={props.inputIndex}
-                    defaultItems={block.items}
-                    onSubmit={onSubmit}
-                  />
-                </Match>
-                <Match when={!block.options.isSearchable}>
-                  <Buttons
-                    inputIndex={props.inputIndex}
-                    items={block.items}
-                    onSubmit={onSubmit}
-                  />
-                </Match>
-              </Switch>
+              <Buttons
+                inputIndex={props.inputIndex}
+                defaultItems={block.items}
+                options={block.options}
+                onSubmit={onSubmit}
+              />
             </Match>
             <Match when={block.options.isMultipleChoice}>
-              <Switch>
-                <Match when={block.options.isSearchable}>
-                  <SearchableMultipleChoicesForm
-                    inputIndex={props.inputIndex}
-                    defaultItems={block.items}
-                    options={block.options}
-                    onSubmit={onSubmit}
-                  />
-                </Match>
-                <Match when={!block.options.isSearchable}>
-                  <MultipleChoicesForm
-                    inputIndex={props.inputIndex}
-                    items={block.items}
-                    options={block.options}
-                    onSubmit={onSubmit}
-                  />
-                </Match>
-              </Switch>
+              <MultipleChoicesForm
+                inputIndex={props.inputIndex}
+                defaultItems={block.items}
+                options={block.options}
+                onSubmit={onSubmit}
+              />
+            </Match>
+          </Switch>
+        )}
+      </Match>
+      <Match when={isPictureChoiceBlock(props.block)} keyed>
+        {(block) => (
+          <Switch>
+            <Match when={!block.options.isMultipleChoice}>
+              <SinglePictureChoice
+                defaultItems={block.items}
+                options={block.options}
+                onSubmit={onSubmit}
+              />
+            </Match>
+            <Match when={block.options.isMultipleChoice}>
+              <MultiplePictureChoice
+                defaultItems={block.items}
+                options={block.options}
+                onSubmit={onSubmit}
+              />
             </Match>
           </Switch>
         )}
@@ -240,3 +239,8 @@ const isButtonsBlock = (
   block: ChatReply['input']
 ): ChoiceInputBlock | undefined =>
   block?.type === InputBlockType.CHOICE ? block : undefined
+
+const isPictureChoiceBlock = (
+  block: ChatReply['input']
+): PictureChoiceBlock | undefined =>
+  block?.type === InputBlockType.PICTURE_CHOICE ? block : undefined

packages/embeds/js/src/features/blocks/inputs/buttons/components/Buttons.tsx

@@ -1,41 +1,82 @@
 import { Button } from '@/components/Button'
+import { SearchInput } from '@/components/inputs/SearchInput'
 import { InputSubmitContent } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
 import type { ChoiceInputBlock } from '@typebot.io/schemas'
-import { For } from 'solid-js'
+import { defaultChoiceInputOptions } from '@typebot.io/schemas/features/blocks/inputs/choice'
+import { For, Show, createSignal, onMount } from 'solid-js'
 
 type Props = {
   inputIndex: number
-  items: ChoiceInputBlock['items']
+  defaultItems: ChoiceInputBlock['items']
+  options: ChoiceInputBlock['options']
   onSubmit: (value: InputSubmitContent) => void
 }
 
 export const Buttons = (props: Props) => {
+  let inputRef: HTMLInputElement | undefined
+  const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
+
+  onMount(() => {
+    if (!isMobile() && inputRef) inputRef.focus()
+  })
+
   // eslint-disable-next-line solid/reactivity
   const handleClick = (itemIndex: number) => () =>
-    props.onSubmit({ value: props.items[itemIndex].content ?? '' })
+    props.onSubmit({ value: filteredItems()[itemIndex].content ?? '' })
+
+  const filterItems = (inputValue: string) => {
+    setFilteredItems(
+      props.defaultItems.filter((item) =>
+        item.content?.toLowerCase().includes((inputValue ?? '').toLowerCase())
+      )
+    )
+  }
 
   return (
-    <div class="flex flex-wrap justify-end gap-2">
-      <For each={props.items}>
-        {(item, index) => (
-          <span class={'relative' + (isMobile() ? ' w-full' : '')}>
-            <Button
-              on:click={handleClick(index())}
-              data-itemid={item.id}
-              class="w-full"
-            >
-              {item.content}
-            </Button>
-            {props.inputIndex === 0 && props.items.length === 1 && (
-              <span class="flex h-3 w-3 absolute top-0 right-0 -mt-1 -mr-1 ping">
-                <span class="animate-ping absolute inline-flex h-full w-full rounded-full brightness-200 opacity-75" />
-                <span class="relative inline-flex rounded-full h-3 w-3 brightness-150" />
-              </span>
-            )}
-          </span>
-        )}
-      </For>
+    <div class="flex flex-col gap-2 w-full">
+      <Show when={props.options.isSearchable}>
+        <div class="flex items-end typebot-input w-full">
+          <SearchInput
+            ref={inputRef}
+            onInput={filterItems}
+            placeholder={
+              props.options.searchInputPlaceholder ??
+              defaultChoiceInputOptions.searchInputPlaceholder
+            }
+            onClear={() => setFilteredItems(props.defaultItems)}
+          />
+        </div>
+      </Show>
+
+      <div
+        class={
+          'flex flex-wrap justify-end gap-2' +
+          (props.options.isSearchable
+            ? ' overflow-y-scroll max-h-80 rounded-md hide-scrollbar'
+            : '')
+        }
+      >
+        <For each={filteredItems()}>
+          {(item, index) => (
+            <span class={'relative' + (isMobile() ? ' w-full' : '')}>
+              <Button
+                on:click={handleClick(index())}
+                data-itemid={item.id}
+                class="w-full"
+              >
+                {item.content}
+              </Button>
+              {props.inputIndex === 0 && props.defaultItems.length === 1 && (
+                <span class="flex h-3 w-3 absolute top-0 right-0 -mt-1 -mr-1 ping">
+                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full brightness-200 opacity-75" />
+                  <span class="relative inline-flex rounded-full h-3 w-3 brightness-150" />
+                </span>
+              )}
+            </span>
+          )}
+        </For>
+      </div>
     </div>
   )
 }

packages/embeds/js/src/features/blocks/inputs/buttons/components/Checkbox.tsx

@@ -3,12 +3,17 @@ import { Show } from 'solid-js'
 
 type Props = {
   isChecked: boolean
+  class?: string
 }
 
 export const Checkbox = (props: Props) => {
   return (
     <div
-      class={'w-4 h-4 typebot-checkbox' + (props.isChecked ? ' checked' : '')}
+      class={
+        'w-4 h-4 typebot-checkbox' +
+        (props.isChecked ? ' checked' : '') +
+        (props.class ? ` ${props.class}` : '')
+      }
     >
       <Show when={props.isChecked}>
         <CheckIcon />

packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx

@@ -1,58 +1,98 @@
 import { SendButton } from '@/components/SendButton'
 import { InputSubmitContent } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
-import type { ChoiceInputBlock } from '@typebot.io/schemas'
-import { createSignal, For } from 'solid-js'
+import { ChoiceInputBlock } from '@typebot.io/schemas'
+import { createSignal, For, onMount, Show } from 'solid-js'
 import { Checkbox } from './Checkbox'
+import { SearchInput } from '@/components/inputs/SearchInput'
+import { defaultChoiceInputOptions } from '@typebot.io/schemas/features/blocks/inputs/choice'
 
 type Props = {
   inputIndex: number
-  items: ChoiceInputBlock['items']
+  defaultItems: ChoiceInputBlock['items']
   options: ChoiceInputBlock['options']
   onSubmit: (value: InputSubmitContent) => void
 }
 
 export const MultipleChoicesForm = (props: Props) => {
-  const [selectedIndices, setSelectedIndices] = createSignal<number[]>([])
+  let inputRef: HTMLInputElement | undefined
+  const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
+  const [selectedItemIds, setSelectedItemIds] = createSignal<string[]>([])
 
-  const handleClick = (itemIndex: number) => {
-    toggleSelectedItemIndex(itemIndex)
+  onMount(() => {
+    if (!isMobile() && inputRef) inputRef.focus()
+  })
+
+  const handleClick = (itemId: string) => {
+    toggleSelectedItemId(itemId)
   }
 
-  const toggleSelectedItemIndex = (itemIndex: number) => {
-    const existingIndex = selectedIndices().indexOf(itemIndex)
+  const toggleSelectedItemId = (itemId: string) => {
+    const existingIndex = selectedItemIds().indexOf(itemId)
     if (existingIndex !== -1) {
-      setSelectedIndices((selectedIndices) =>
-        selectedIndices.filter((index) => index !== itemIndex)
+      setSelectedItemIds((selectedItemIds) =>
+        selectedItemIds.filter((selectedItemId) => selectedItemId !== itemId)
       )
     } else {
-      setSelectedIndices((selectedIndices) => [...selectedIndices, itemIndex])
+      setSelectedItemIds((selectedIndices) => [...selectedIndices, itemId])
     }
   }
 
   const handleSubmit = () =>
     props.onSubmit({
-      value: selectedIndices()
-        .map((itemIndex) => props.items[itemIndex].content)
+      value: selectedItemIds()
+        .map(
+          (selectedItemId) =>
+            props.defaultItems.find((item) => item.id === selectedItemId)
+              ?.content
+        )
         .join(', '),
     })
 
+  const filterItems = (inputValue: string) => {
+    setFilteredItems(
+      props.defaultItems.filter((item) =>
+        item.content?.toLowerCase().includes((inputValue ?? '').toLowerCase())
+      )
+    )
+  }
+
   return (
-    <form class="flex flex-col items-end gap-2" onSubmit={handleSubmit}>
-      <div class="flex flex-wrap justify-end gap-2">
-        <For each={props.items}>
-          {(item, index) => (
+    <form class="flex flex-col items-end gap-2 w-full" onSubmit={handleSubmit}>
+      <Show when={props.options.isSearchable}>
+        <div class="flex items-end typebot-input w-full">
+          <SearchInput
+            ref={inputRef}
+            onInput={filterItems}
+            placeholder={
+              props.options.searchInputPlaceholder ??
+              defaultChoiceInputOptions.searchInputPlaceholder
+            }
+            onClear={() => setFilteredItems(props.defaultItems)}
+          />
+        </div>
+      </Show>
+      <div
+        class={
+          'flex flex-wrap justify-end gap-2' +
+          (props.options.isSearchable
+            ? ' overflow-y-scroll max-h-80 rounded-md hide-scrollbar'
+            : '')
+        }
+      >
+        <For each={filteredItems()}>
+          {(item) => (
             <span class={'relative' + (isMobile() ? ' w-full' : '')}>
               <div
                 role="checkbox"
-                aria-checked={selectedIndices().some(
-                  (selectedIndex) => selectedIndex === index()
+                aria-checked={selectedItemIds().some(
+                  (selectedItemId) => selectedItemId === item.id
                 )}
-                on:click={() => handleClick(index())}
+                on:click={() => handleClick(item.id)}
                 class={
                   'w-full py-2 px-4 font-semibold focus:outline-none cursor-pointer select-none typebot-selectable' +
-                  (selectedIndices().some(
-                    (selectedIndex) => selectedIndex === index()
+                  (selectedItemIds().some(
+                    (selectedItemId) => selectedItemId === item.id
                   )
                     ? ' selected'
                     : '')
@@ -61,8 +101,8 @@ export const MultipleChoicesForm = (props: Props) => {
               >
                 <div class="flex items-center gap-2">
                   <Checkbox
-                    isChecked={selectedIndices().some(
-                      (selectedIndex) => selectedIndex === index()
+                    isChecked={selectedItemIds().some(
+                      (selectedItemId) => selectedItemId === item.id
                     )}
                   />
                   <span>{item.content}</span>
@@ -71,8 +111,38 @@ export const MultipleChoicesForm = (props: Props) => {
             </span>
           )}
         </For>
+        <For
+          each={selectedItemIds().filter((selectedItemId) =>
+            filteredItems().every((item) => item.id !== selectedItemId)
+          )}
+        >
+          {(selectedItemId) => (
+            <span class={'relative' + (isMobile() ? ' w-full' : '')}>
+              <div
+                role="checkbox"
+                aria-checked
+                on:click={() => handleClick(selectedItemId)}
+                class={
+                  'w-full py-2 px-4 font-semibold focus:outline-none cursor-pointer select-none typebot-selectable selected'
+                }
+                data-itemid={selectedItemId}
+              >
+                <div class="flex items-center gap-2">
+                  <Checkbox isChecked />
+                  <span>
+                    {
+                      props.defaultItems.find(
+                        (item) => item.id === selectedItemId
+                      )?.content
+                    }
+                  </span>
+                </div>
+              </div>
+            </span>
+          )}
+        </For>
       </div>
-      {selectedIndices().length > 0 && (
+      {selectedItemIds().length > 0 && (
         <SendButton disableIcon>
           {props.options?.buttonLabel ?? 'Send'}
         </SendButton>

packages/embeds/js/src/features/blocks/inputs/buttons/components/SearchableButtons.tsx

@@ -1,68 +0,0 @@
-import { Button } from '@/components/Button'
-import { SearchInput } from '@/components/inputs/SearchInput'
-import { InputSubmitContent } from '@/types'
-import { isMobile } from '@/utils/isMobileSignal'
-import type { ChoiceInputBlock } from '@typebot.io/schemas'
-import { For, createSignal, onMount } from 'solid-js'
-
-type Props = {
-  inputIndex: number
-  defaultItems: ChoiceInputBlock['items']
-  onSubmit: (value: InputSubmitContent) => void
-}
-
-export const SearchableButtons = (props: Props) => {
-  let inputRef: HTMLInputElement | undefined
-  const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
-
-  onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
-  })
-
-  // eslint-disable-next-line solid/reactivity
-  const handleClick = (itemIndex: number) => () =>
-    props.onSubmit({ value: filteredItems()[itemIndex].content ?? '' })
-
-  const filterItems = (inputValue: string) => {
-    setFilteredItems(
-      props.defaultItems.filter((item) =>
-        item.content?.toLowerCase().includes((inputValue ?? '').toLowerCase())
-      )
-    )
-  }
-
-  return (
-    <div class="flex flex-col gap-2 w-full">
-      <div class="flex items-end typebot-input w-full">
-        <SearchInput
-          ref={inputRef}
-          onInput={filterItems}
-          placeholder="Filter the options..."
-          onClear={() => setFilteredItems(props.defaultItems)}
-        />
-      </div>
-
-      <div class="flex flex-wrap justify-end gap-2 overflow-y-scroll max-h-80 rounded-md hide-scrollbar">
-        <For each={filteredItems()}>
-          {(item, index) => (
-            <span class={'relative' + (isMobile() ? ' w-full' : '')}>
-              <Button
-                on:click={handleClick(index())}
-                data-itemid={item.id}
-                class="w-full"
-              >
-                {item.content}
-              </Button>
-              {props.inputIndex === 0 && props.defaultItems.length === 1 && (
-                <span class="flex h-3 w-3 absolute top-0 right-0 -mt-1 -mr-1 ping">
-                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full brightness-200 opacity-75" />
-                  <span class="relative inline-flex rounded-full h-3 w-3 brightness-150" />
-                </span>
-              )}
-            </span>
-          )}
-        </For>
-      </div>
-    </div>
-  )
-}

packages/embeds/js/src/features/blocks/inputs/buttons/components/SearchableMultipleChoicesForm.tsx

@@ -1,132 +0,0 @@
-import { SendButton } from '@/components/SendButton'
-import { InputSubmitContent } from '@/types'
-import { isMobile } from '@/utils/isMobileSignal'
-import type { ChoiceInputBlock } from '@typebot.io/schemas'
-import { createSignal, For } from 'solid-js'
-import { Checkbox } from './Checkbox'
-import { SearchInput } from '@/components/inputs/SearchInput'
-
-type Props = {
-  inputIndex: number
-  defaultItems: ChoiceInputBlock['items']
-  options: ChoiceInputBlock['options']
-  onSubmit: (value: InputSubmitContent) => void
-}
-
-export const SearchableMultipleChoicesForm = (props: Props) => {
-  let inputRef: HTMLInputElement | undefined
-  const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
-  const [selectedItemIds, setSelectedItemIds] = createSignal<string[]>([])
-
-  const handleClick = (itemId: string) => {
-    toggleSelectedItemId(itemId)
-  }
-
-  const toggleSelectedItemId = (itemId: string) => {
-    const existingIndex = selectedItemIds().indexOf(itemId)
-    if (existingIndex !== -1) {
-      setSelectedItemIds((selectedItemIds) =>
-        selectedItemIds.filter((selectedItemId) => selectedItemId !== itemId)
-      )
-    } else {
-      setSelectedItemIds((selectedIndices) => [...selectedIndices, itemId])
-    }
-  }
-
-  const handleSubmit = () =>
-    props.onSubmit({
-      value: props.defaultItems
-        .filter((item) => selectedItemIds().includes(item.id))
-        .map((item) => item.content)
-        .join(', '),
-    })
-
-  const filterItems = (inputValue: string) => {
-    setFilteredItems(
-      props.defaultItems.filter((item) =>
-        item.content?.toLowerCase().includes((inputValue ?? '').toLowerCase())
-      )
-    )
-  }
-
-  return (
-    <form class="flex flex-col items-end gap-2 w-full" onSubmit={handleSubmit}>
-      <div class="flex items-end typebot-input w-full">
-        <SearchInput
-          ref={inputRef}
-          onInput={filterItems}
-          placeholder="Filter the options..."
-          onClear={() => setFilteredItems(props.defaultItems)}
-        />
-      </div>
-      <div class="flex flex-wrap justify-end gap-2 overflow-y-scroll max-h-80 rounded-md hide-scrollbar">
-        <For each={filteredItems()}>
-          {(item) => (
-            <span class={'relative' + (isMobile() ? ' w-full' : '')}>
-              <div
-                role="checkbox"
-                aria-checked={selectedItemIds().some(
-                  (selectedItemId) => selectedItemId === item.id
-                )}
-                on:click={() => handleClick(item.id)}
-                class={
-                  'w-full py-2 px-4 font-semibold focus:outline-none cursor-pointer select-none typebot-selectable' +
-                  (selectedItemIds().some(
-                    (selectedItemId) => selectedItemId === item.id
-                  )
-                    ? ' selected'
-                    : '')
-                }
-                data-itemid={item.id}
-              >
-                <div class="flex items-center gap-2">
-                  <Checkbox
-                    isChecked={selectedItemIds().some(
-                      (selectedItemId) => selectedItemId === item.id
-                    )}
-                  />
-                  <span>{item.content}</span>
-                </div>
-              </div>
-            </span>
-          )}
-        </For>
-        <For
-          each={selectedItemIds().filter((selectedItemId) =>
-            filteredItems().every((item) => item.id !== selectedItemId)
-          )}
-        >
-          {(selectedItemId) => (
-            <span class={'relative' + (isMobile() ? ' w-full' : '')}>
-              <div
-                role="checkbox"
-                aria-checked
-                on:click={() => handleClick(selectedItemId)}
-                class={
-                  'w-full py-2 px-4 font-semibold focus:outline-none cursor-pointer select-none typebot-selectable selected'
-                }
-                data-itemid={selectedItemId}
-              >
-                <div class="flex items-center gap-2">
-                  <Checkbox isChecked />
-                  <span>
-                    {
-                      props.defaultItems.find(
-                        (item) => item.id === selectedItemId
-                      )?.content
-                    }
-                  </span>
-                </div>
-              </div>
-            </span>
-          )}
-        </For>
-      </div>
-      {selectedItemIds().length > 0 && (
-        <SendButton disableIcon>
-          {props.options?.buttonLabel ?? 'Send'}
-        </SendButton>
-      )}
-    </form>
-  )
-}

packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx

@@ -0,0 +1,215 @@
+import { InputSubmitContent } from '@/types'
+import {
+  PictureChoiceBlock,
+  defaultPictureChoiceOptions,
+} from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
+import { For, Show, createSignal, onMount } from 'solid-js'
+import { Checkbox } from '../buttons/components/Checkbox'
+import { SendButton } from '@/components'
+import { isDefined, isEmpty } from '@typebot.io/lib'
+import { SearchInput } from '@/components/inputs/SearchInput'
+import { isMobile } from '@/utils/isMobileSignal'
+
+type Props = {
+  defaultItems: PictureChoiceBlock['items']
+  options: PictureChoiceBlock['options']
+  onSubmit: (value: InputSubmitContent) => void
+}
+
+export const MultiplePictureChoice = (props: Props) => {
+  let inputRef: HTMLInputElement | undefined
+  const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
+  const [selectedItemIds, setSelectedItemIds] = createSignal<string[]>([])
+
+  onMount(() => {
+    if (!isMobile() && inputRef) inputRef.focus()
+  })
+
+  const handleClick = (itemId: string) => {
+    toggleSelectedItemId(itemId)
+  }
+
+  const toggleSelectedItemId = (itemId: string) => {
+    const existingIndex = selectedItemIds().indexOf(itemId)
+    if (existingIndex !== -1) {
+      setSelectedItemIds((selectedItemIds) =>
+        selectedItemIds.filter((selectedItemId) => selectedItemId !== itemId)
+      )
+    } else {
+      setSelectedItemIds((selectedIndices) => [...selectedIndices, itemId])
+    }
+  }
+
+  const handleSubmit = () =>
+    props.onSubmit({
+      value: selectedItemIds()
+        .map((selectedItemId) => {
+          const item = props.defaultItems.find(
+            (item) => item.id === selectedItemId
+          )
+          return item?.title ?? item?.pictureSrc
+        })
+        .join(', '),
+    })
+
+  const filterItems = (inputValue: string) => {
+    setFilteredItems(
+      props.defaultItems.filter(
+        (item) =>
+          item.title
+            ?.toLowerCase()
+            .includes((inputValue ?? '').toLowerCase()) ||
+          item.description
+            ?.toLowerCase()
+            .includes((inputValue ?? '').toLowerCase())
+      )
+    )
+  }
+
+  return (
+    <form class="flex flex-col gap-2 w-full items-end" onSubmit={handleSubmit}>
+      <Show when={props.options.isSearchable}>
+        <div class="flex items-end typebot-input w-full">
+          <SearchInput
+            ref={inputRef}
+            onInput={filterItems}
+            placeholder={
+              props.options.searchInputPlaceholder ??
+              defaultPictureChoiceOptions.searchInputPlaceholder
+            }
+            onClear={() => setFilteredItems(props.defaultItems)}
+          />
+        </div>
+      </Show>
+      <div
+        class={
+          'flex flex-wrap justify-end gap-2' +
+          (props.options.isSearchable
+            ? ' overflow-y-scroll max-h-[464px] rounded-md hide-scrollbar'
+            : '')
+        }
+      >
+        <For each={filteredItems()}>
+          {(item, index) => (
+            <div
+              role="checkbox"
+              aria-checked={selectedItemIds().some(
+                (selectedItemId) => selectedItemId === item.id
+              )}
+              on:click={() => handleClick(item.id)}
+              class={
+                'flex flex-col focus:outline-none cursor-pointer select-none typebot-selectable-picture' +
+                (selectedItemIds().some(
+                  (selectedItemId) => selectedItemId === item.id
+                )
+                  ? ' selected'
+                  : '')
+              }
+              data-itemid={item.id}
+            >
+              <img
+                src={item.pictureSrc}
+                alt={item.title ?? `Picture ${index() + 1}`}
+                elementtiming={`Picture choice ${index() + 1}`}
+                fetchpriority={'high'}
+              />
+              <div
+                class={
+                  'flex gap-3 py-2 flex-shrink-0' +
+                  (isEmpty(item.title) && isEmpty(item.description)
+                    ? ' justify-center'
+                    : ' pl-4')
+                }
+              >
+                <Checkbox
+                  isChecked={selectedItemIds().some(
+                    (selectedItemId) => selectedItemId === item.id
+                  )}
+                  class={item.title || item.description ? 'mt-1' : undefined}
+                />
+                <Show when={item.title || item.description}>
+                  <div class="flex flex-col gap-1 ">
+                    <Show when={item.title}>
+                      <span class="font-semibold">{item.title}</span>
+                    </Show>
+                    <Show when={item.description}>
+                      <span class="text-sm">{item.description}</span>
+                    </Show>
+                  </div>
+                </Show>
+              </div>
+            </div>
+          )}
+        </For>
+        <For
+          each={selectedItemIds()
+            .filter((selectedItemId) =>
+              filteredItems().every((item) => item.id !== selectedItemId)
+            )
+            .map((selectedItemId) =>
+              props.defaultItems.find((item) => item.id === selectedItemId)
+            )
+            .filter(isDefined)}
+        >
+          {(selectedItem, index) => (
+            <div
+              role="checkbox"
+              aria-checked
+              on:click={() => handleClick(selectedItem.id)}
+              class={
+                'flex flex-col focus:outline-none cursor-pointer select-none typebot-selectable-picture selected'
+              }
+              data-itemid={selectedItem.id}
+            >
+              <img
+                src={
+                  props.defaultItems.find((item) => item.id === selectedItem.id)
+                    ?.pictureSrc
+                }
+                alt={selectedItem.title ?? `Selected picture ${index() + 1}`}
+                elementtiming={`Selected picture choice ${index() + 1}`}
+                fetchpriority={'high'}
+              />
+              <div
+                class={
+                  'flex gap-3 py-2 flex-shrink-0' +
+                  (isEmpty(selectedItem.title) &&
+                  isEmpty(selectedItem.description)
+                    ? ' justify-center'
+                    : ' pl-4')
+                }
+              >
+                <Checkbox
+                  isChecked={selectedItemIds().some(
+                    (selectedItemId) => selectedItemId === selectedItem.id
+                  )}
+                  class={
+                    selectedItem.title || selectedItem.description
+                      ? 'mt-1'
+                      : undefined
+                  }
+                />
+                <Show when={selectedItem.title || selectedItem.description}>
+                  <div class="flex flex-col gap-1 ">
+                    <Show when={selectedItem.title}>
+                      <span class="font-semibold">{selectedItem.title}</span>
+                    </Show>
+                    <Show when={selectedItem.description}>
+                      <span class="text-sm">{selectedItem.description}</span>
+                    </Show>
+                  </div>
+                </Show>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+      {selectedItemIds().length > 0 && (
+        <SendButton disableIcon>
+          {props.options?.buttonLabel ??
+            defaultPictureChoiceOptions.buttonLabel}
+        </SendButton>
+      )}
+    </form>
+  )
+}

packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx

@@ -0,0 +1,93 @@
+import { SearchInput } from '@/components/inputs/SearchInput'
+import { InputSubmitContent } from '@/types'
+import { isMobile } from '@/utils/isMobileSignal'
+import { PictureChoiceBlock } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
+import { For, Show, createSignal, onMount } from 'solid-js'
+
+type Props = {
+  defaultItems: PictureChoiceBlock['items']
+  options: PictureChoiceBlock['options']
+  onSubmit: (value: InputSubmitContent) => void
+}
+
+export const SinglePictureChoice = (props: Props) => {
+  let inputRef: HTMLInputElement | undefined
+  const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
+
+  onMount(() => {
+    if (!isMobile() && inputRef) inputRef.focus()
+  })
+
+  // eslint-disable-next-line solid/reactivity
+  const handleClick = (itemIndex: number) => () => {
+    const pictureSrc = filteredItems()[itemIndex].pictureSrc
+    if (!pictureSrc) return
+    return props.onSubmit({
+      value: filteredItems()[itemIndex].title ?? pictureSrc,
+    })
+  }
+
+  const filterItems = (inputValue: string) => {
+    setFilteredItems(
+      props.defaultItems.filter(
+        (item) =>
+          item.title
+            ?.toLowerCase()
+            .includes((inputValue ?? '').toLowerCase()) ||
+          item.description
+            ?.toLowerCase()
+            .includes((inputValue ?? '').toLowerCase())
+      )
+    )
+  }
+
+  return (
+    <div class="flex flex-col gap-2 w-full">
+      <Show when={props.options.isSearchable}>
+        <div class="flex items-end typebot-input w-full">
+          <SearchInput
+            ref={inputRef}
+            onInput={filterItems}
+            placeholder={props.options.searchInputPlaceholder ?? ''}
+            onClear={() => setFilteredItems(props.defaultItems)}
+          />
+        </div>
+      </Show>
+      <div
+        class={
+          'gap-2 flex flex-wrap justify-end' +
+          (props.options.isSearchable
+            ? ' overflow-y-scroll max-h-[464px] rounded-md hide-scrollbar'
+            : '')
+        }
+      >
+        <For each={filteredItems()}>
+          {(item, index) => (
+            <button
+              // eslint-disable-next-line solid/reactivity
+              on:click={handleClick(index())}
+              data-itemid={item.id}
+              class="flex flex-col typebot-picture-button focus:outline-none filter hover:brightness-90 active:brightness-75"
+            >
+              <img
+                src={item.pictureSrc}
+                alt={item.title ?? `Picture ${index() + 1}`}
+                elementtiming={`Picture choice ${index() + 1}`}
+                fetchpriority={'high'}
+              />
+              <div
+                class={
+                  'flex flex-col gap-1 py-2 flex-shrink-0 px-4 w-full' +
+                  (item.description ? ' items-start' : '')
+                }
+              >
+                <span class="font-semibold">{item.title}</span>
+                <span class="text-sm">{item.description}</span>
+              </div>
+            </button>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/src/stories/assets/leadGenerationTypebot.ts

@@ -3,6 +3,7 @@ import {
   BubbleBlockType,
   ComparisonOperators,
   InputBlockType,
+  ItemType,
   LogicalOperator,
   LogicBlockType,
   StartTypebot,
@@ -292,7 +293,7 @@ export const leadGenerationTypebot: StartTypebot = {
             {
               id: 'clckrlksq00113b6sz8naxdwx',
               blockId: 'clckrlksq00103b6s3exi90al',
-              type: 1,
+              type: ItemType.CONDITION,
               content: {
                 comparisons: [
                   {
@@ -323,7 +324,7 @@ export const leadGenerationTypebot: StartTypebot = {
             {
               id: 'clckrm1zr001a3b6s1hlfm2jh',
               blockId: 'clckrm1zr00193b6szpz37plc',
-              type: 1,
+              type: ItemType.CONDITION,
               content: {
                 comparisons: [
                   {

packages/lib/utils.ts

@@ -18,6 +18,7 @@ import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/enums
 import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/enums'
 import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/enums'
 import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/enums'
+import { PictureChoiceBlock } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
 
 export const sendRequest = async <ResponseData>(
   params:
@@ -90,6 +91,10 @@ export const isTextInputBlock = (block: Block): block is TextInputBlock =>
 export const isChoiceInput = (block: Block): block is ChoiceInputBlock =>
   block.type === InputBlockType.CHOICE
 
+export const isPictureChoiceInput = (
+  block: Block
+): block is PictureChoiceBlock => block.type === InputBlockType.PICTURE_CHOICE
+
 export const isSingleChoiceInput = (block: Block): block is ChoiceInputBlock =>
   block.type === InputBlockType.CHOICE &&
   'options' in block &&
@@ -138,7 +143,8 @@ export const blockTypeHasItems = (
   | LogicBlockType.AB_TEST =>
   type === LogicBlockType.CONDITION ||
   type === InputBlockType.CHOICE ||
-  type === LogicBlockType.AB_TEST
+  type === LogicBlockType.AB_TEST ||
+  type === InputBlockType.PICTURE_CHOICE
 
 export const blockHasItems = (
   block: Block
@@ -158,7 +164,7 @@ interface Omit {
 
 export const omit: Omit = (obj, ...keys) => {
   const ret = {} as {
-    [K in keyof typeof obj]: typeof obj[K]
+    [K in keyof typeof obj]: (typeof obj)[K]
   }
   let key: keyof typeof obj
   for (key in obj) {

packages/schemas/features/blocks/inputs/choice.ts

@@ -11,14 +11,16 @@ export const choiceInputOptionsSchema = optionBaseSchema.merge(
     buttonLabel: z.string(),
     dynamicVariableId: z.string().optional(),
     isSearchable: z.boolean().optional(),
+    searchInputPlaceholder: z.string().optional(),
   })
 )
 
-export const defaultChoiceInputOptions: ChoiceInputOptions = {
+export const defaultChoiceInputOptions = {
   buttonLabel: defaultButtonLabel,
+  searchInputPlaceholder: 'Filter the options...',
   isMultipleChoice: false,
   isSearchable: false,
-}
+} as const
 
 export const buttonItemSchema = itemBaseSchema.merge(
   z.object({

packages/schemas/features/blocks/inputs/enums.ts

@@ -6,6 +6,7 @@ export enum InputBlockType {
   DATE = 'date input',
   PHONE = 'phone number input',
   CHOICE = 'choice input',
+  PICTURE_CHOICE = 'picture choice input',
   PAYMENT = 'payment input',
   RATING = 'rating input',
   FILE = 'file input',

packages/schemas/features/blocks/inputs/index.ts

@@ -10,3 +10,4 @@ export * from './phone'
 export * from './rating'
 export * from './text'
 export * from './url'
+export * from './pictureChoice'

packages/schemas/features/blocks/inputs/pictureChoice.ts

@@ -0,0 +1,48 @@
+import { z } from 'zod'
+import { ItemType } from '../../items/enums'
+import { itemBaseSchema } from '../../items/baseSchemas'
+import { optionBaseSchema, blockBaseSchema } from '../baseSchemas'
+import { defaultButtonLabel } from './constants'
+import { InputBlockType } from './enums'
+
+export const pictureChoiceOptionsSchema = optionBaseSchema.merge(
+  z.object({
+    isMultipleChoice: z.boolean().optional(),
+    isSearchable: z.boolean().optional(),
+    buttonLabel: z.string(),
+    searchInputPlaceholder: z.string(),
+    dynamicItems: z
+      .object({
+        isEnabled: z.boolean().optional(),
+        titlesVariableId: z.string().optional(),
+        descriptionsVariableId: z.string().optional(),
+        pictureSrcsVariableId: z.string().optional(),
+      })
+      .optional(),
+  })
+)
+
+export const pictureChoiceItemSchema = itemBaseSchema.merge(
+  z.object({
+    type: z.literal(ItemType.PICTURE_CHOICE),
+    pictureSrc: z.string().optional(),
+    title: z.string().optional(),
+    description: z.string().optional(),
+  })
+)
+
+export const pictureChoiceBlockSchema = blockBaseSchema.merge(
+  z.object({
+    type: z.enum([InputBlockType.PICTURE_CHOICE]),
+    items: z.array(pictureChoiceItemSchema),
+    options: pictureChoiceOptionsSchema,
+  })
+)
+
+export type PictureChoiceItem = z.infer<typeof pictureChoiceItemSchema>
+export type PictureChoiceBlock = z.infer<typeof pictureChoiceBlockSchema>
+
+export const defaultPictureChoiceOptions: PictureChoiceBlock['options'] = {
+  buttonLabel: defaultButtonLabel,
+  searchInputPlaceholder: 'Filter the options...',
+}

packages/schemas/features/blocks/schemas.ts

@@ -1,6 +1,6 @@
-import { z } from 'zod'
+import { ZodDiscriminatedUnionOption, z } from 'zod'
 import { BubbleBlockType } from './bubbles/enums'
-import { ChoiceInputBlock, choiceInputSchema } from './inputs/choice'
+import { choiceInputSchema } from './inputs/choice'
 import { InputBlockType } from './inputs/enums'
 import { IntegrationBlockType } from './integrations/enums'
 import { ConditionBlock, conditionBlockSchema } from './logic/condition'
@@ -43,9 +43,10 @@ import {
   typebotLinkBlockSchema,
   waitBlockSchema,
   abTestBlockSchema,
-  AbTestBlock,
 } from './logic'
 import { jumpBlockSchema } from './logic/jump'
+import { pictureChoiceBlockSchema } from './inputs/pictureChoice'
+import { Item } from '../items'
 
 export type DraggableBlock =
   | BubbleBlock
@@ -66,10 +67,7 @@ export type DraggableBlockType =
   | LogicBlockType
   | IntegrationBlockType
 
-export type BlockWithOptions =
-  | InputBlock
-  | Exclude<LogicBlock, ConditionBlock>
-  | IntegrationBlock
+export type BlockWithOptions = Extract<Block, { options: any }>
 
 export type BlockWithOptionsType =
   | InputBlockType
@@ -81,8 +79,6 @@ export type BlockOptions =
   | LogicBlockOptions
   | IntegrationBlockOptions
 
-export type BlockWithItems = ConditionBlock | ChoiceInputBlock | AbTestBlock
-
 export type BlockBase = z.infer<typeof blockBaseSchema>
 
 export type BlockIndices = {
@@ -90,18 +86,7 @@ export type BlockIndices = {
   blockIndex: number
 }
 
-const bubbleBlockSchema = z.discriminatedUnion('type', [
-  textBubbleBlockSchema,
-  imageBubbleBlockSchema,
-  videoBubbleBlockSchema,
-  embedBubbleBlockSchema,
-  audioBubbleBlockSchema,
-])
-
-export type BubbleBlock = z.infer<typeof bubbleBlockSchema>
-export type BubbleBlockContent = BubbleBlock['content']
-
-export const inputBlockSchema = z.discriminatedUnion('type', [
+export const inputBlockSchemas = [
   textInputSchema,
   choiceInputSchema,
   emailInputSchema,
@@ -112,12 +97,17 @@ export const inputBlockSchema = z.discriminatedUnion('type', [
   paymentInputSchema,
   ratingInputBlockSchema,
   fileInputStepSchema,
-])
+  pictureChoiceBlockSchema,
+] as const
 
-export type InputBlock = z.infer<typeof inputBlockSchema>
-export type InputBlockOptions = InputBlock['options']
-
-export const logicBlockSchema = z.discriminatedUnion('type', [
+export const blockSchema = z.discriminatedUnion('type', [
+  startBlockSchema,
+  textBubbleBlockSchema,
+  imageBubbleBlockSchema,
+  videoBubbleBlockSchema,
+  embedBubbleBlockSchema,
+  audioBubbleBlockSchema,
+  ...inputBlockSchemas,
   scriptBlockSchema,
   conditionBlockSchema,
   redirectBlockSchema,
@@ -126,19 +116,6 @@ export const logicBlockSchema = z.discriminatedUnion('type', [
   waitBlockSchema,
   jumpBlockSchema,
   abTestBlockSchema,
-])
-
-export type LogicBlock = z.infer<typeof logicBlockSchema>
-
-export type LogicBlockOptions = LogicBlock extends
-  | {
-      options?: infer Options
-    }
-  | {}
-  ? Options
-  : never
-
-export const integrationBlockSchema = z.discriminatedUnion('type', [
   chatwootBlockSchema,
   googleAnalyticsBlockSchema,
   googleSheetsBlockSchema,
@@ -150,15 +127,24 @@ export const integrationBlockSchema = z.discriminatedUnion('type', [
   zapierBlockSchema,
 ])
 
-export type IntegrationBlock = z.infer<typeof integrationBlockSchema>
+export type Block = z.infer<typeof blockSchema>
+
+export type BubbleBlock = Extract<Block, { type: BubbleBlockType }>
+export type BubbleBlockContent = BubbleBlock['content']
+
+export type InputBlock = Extract<Block, { type: InputBlockType }>
+export type InputBlockOptions = InputBlock['options']
+
+export type LogicBlock = Extract<Block, { type: LogicBlockType }>
+export type LogicBlockOptions = LogicBlock extends
+  | {
+      options?: infer Options
+    }
+  | {}
+  ? Options
+  : never
+
+export type IntegrationBlock = Extract<Block, { type: IntegrationBlockType }>
 export type IntegrationBlockOptions = IntegrationBlock['options']
 
-export const blockSchema = z.union([
-  startBlockSchema,
-  bubbleBlockSchema,
-  inputBlockSchema,
-  logicBlockSchema,
-  integrationBlockSchema,
-])
-
-export type Block = z.infer<typeof blockSchema>
+export type BlockWithItems = Extract<Block, { items: Item[] }>

packages/schemas/features/chat.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import { ZodDiscriminatedUnion, z } from 'zod'
 import {
   googleAnalyticsOptionsSchema,
   paymentInputRuntimeOptionsSchema,
@@ -16,7 +16,7 @@ import {
 } from './blocks/bubbles'
 import { answerSchema } from './answer'
 import { BubbleBlockType } from './blocks/bubbles/enums'
-import { inputBlockSchema } from './blocks/schemas'
+import { inputBlockSchemas } from './blocks/schemas'
 
 const typebotInSessionStateSchema = publicTypebotSchema.pick({
   id: true,
@@ -229,7 +229,8 @@ const clientSideActionSchema = z
 
 export const chatReplySchema = z.object({
   messages: z.array(chatMessageSchema),
-  input: inputBlockSchema
+  input: z
+    .discriminatedUnion('type', [...inputBlockSchemas])
     .and(
       z.object({
         prefilledValue: z.string().optional(),

packages/schemas/features/items/enums.ts

@@ -2,4 +2,5 @@ export enum ItemType {
   BUTTON,
   CONDITION,
   AB_TEST,
+  PICTURE_CHOICE,
 }

packages/schemas/features/items/schemas.ts

@@ -2,10 +2,14 @@ import { z } from 'zod'
 import { buttonItemSchema } from '../blocks/inputs/choice'
 import { conditionItemSchema } from '../blocks/logic/condition'
 import { aItemSchema, bItemSchema } from '../blocks'
+import { pictureChoiceItemSchema } from '../blocks/inputs/pictureChoice'
 
-const itemSchema = buttonItemSchema
-  .or(conditionItemSchema)
-  .or(aItemSchema)
-  .or(bItemSchema)
+const itemSchema = z.union([
+  buttonItemSchema,
+  conditionItemSchema,
+  pictureChoiceItemSchema,
+  aItemSchema,
+  bItemSchema,
+])
 
 export type Item = z.infer<typeof itemSchema>