blsmedia/bot
2
0
Fork 0
Code Activity

✨ Add picture choice block

Browse Source 
Closes #476
This commit is contained in:
Baptiste Arnaud
2023-05-04 09:20:30 -04:00
parent 65c6f66a5c
commit 035dded654
54 changed files with 6282 additions and 4938 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/builder/src/components/ImageUploadContent/ImageUploadContent.tsx
View File

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

46
apps/builder/src/components/ImageUploadContent/UnsplashPicker.tsx
View File

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

17
apps/builder/src/components/SwitchWithRelatedSettings.tsx Normal file
View File

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

2
apps/builder/src/components/inputs/SwitchWithLabel.tsx
View File

@@ -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

1
apps/builder/src/features/blocks/bubbles/image/image.spec.ts
View File

@@ -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

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

@@ -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:{' '}

7
apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceIcon.tsx Normal file
View File

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

148
apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode.tsx Normal file
View File

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

69
apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx Normal file
View File

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

42
apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceNode.tsx Normal file
View File

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

142
apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceSettings.tsx Normal file
View File

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

121
apps/builder/src/features/blocks/inputs/pictureChoice/pictureChoice.spec.ts Normal file
View File

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

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

@@ -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'
}
}

3
apps/builder/src/features/editor/components/BlockIcon.tsx
View File

@@ -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:

66
apps/builder/src/features/editor/components/BlockLabel.tsx
View File

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

63
apps/builder/src/features/editor/providers/typebotActions/items.ts
View File

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

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

@@ -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

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

@@ -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'
}
}

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

@@ -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

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

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

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

@@ -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

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

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

4
apps/builder/src/features/settings/settings.spec.ts
View File

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

4
apps/builder/src/features/theme/theme.spec.ts
View File

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

13
apps/builder/src/features/typebot/helpers/hasDefaultConnector.ts
View File

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

11
apps/builder/src/features/typebot/helpers/parseNewBlock.ts
View File

@@ -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: