♻️ (builder) Change to features-centric folder structure

apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleContent.tsx

@@ -0,0 +1,7 @@
+import { Text } from '@chakra-ui/react'
+import { EmbedBubbleBlock } from 'models'
+
+export const EmbedBubbleContent = ({ block }: { block: EmbedBubbleBlock }) => {
+  if (!block.content?.url) return <Text color="gray.500">Click to edit...</Text>
+  return <Text>Show embed</Text>
+}

apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleIcon.tsx

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

apps/builder/src/features/blocks/bubbles/embed/components/EmbedUploadContent.tsx

@@ -0,0 +1,47 @@
+import { Input, SmartNumberInput } from '@/components/inputs'
+import { HStack, Stack, Text } from '@chakra-ui/react'
+import { EmbedBubbleContent } from 'models'
+import { sanitizeUrl } from 'utils'
+
+type Props = {
+  content: EmbedBubbleContent
+  onSubmit: (content: EmbedBubbleContent) => void
+}
+
+export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
+  const handleUrlChange = (url: string) => {
+    const iframeUrl = sanitizeUrl(
+      url.trim().startsWith('<iframe') ? extractUrlFromIframe(url) : url
+    )
+    onSubmit({ ...content, url: iframeUrl })
+  }
+
+  const handleHeightChange = (height?: number) =>
+    height && onSubmit({ ...content, height })
+
+  return (
+    <Stack p="2" spacing={6}>
+      <Stack>
+        <Input
+          placeholder="Paste the link or code..."
+          defaultValue={content?.url ?? ''}
+          onChange={handleUrlChange}
+        />
+        <Text fontSize="sm" color="gray.400" textAlign="center">
+          Works with PDFs, iframes, websites...
+        </Text>
+      </Stack>
+
+      <HStack justify="space-between">
+        <Text>Height: </Text>
+        <SmartNumberInput
+          value={content?.height}
+          onValueChange={handleHeightChange}
+        />
+      </HStack>
+    </Stack>
+  )
+}
+
+const extractUrlFromIframe = (iframe: string) =>
+  [...iframe.matchAll(/src="([^"]+)"/g)][0][1]

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

@@ -0,0 +1,55 @@
+import test, { expect } from '@playwright/test'
+import { BubbleBlockType, defaultEmbedBubbleContent } from 'models'
+import cuid from 'cuid'
+import { createTypebots } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+
+const pdfSrc = 'https://www.orimi.com/pdf-test.pdf'
+const siteSrc = 'https://app.cal.com/baptistearno/15min'
+
+test.describe.parallel('Embed bubble block', () => {
+  test.describe('Content settings', () => {
+    test('should import and parse embed correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.EMBED,
+            content: defaultEmbedBubbleContent,
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+      await page.click('text=Click to edit...')
+      await page.fill('input[placeholder="Paste the link or code..."]', pdfSrc)
+      await expect(page.locator('text="Show embed"')).toBeVisible()
+    })
+  })
+
+  test.describe('Preview', () => {
+    test('should display embed correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.EMBED,
+            content: {
+              url: siteSrc,
+              height: 700,
+            },
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+      await page.click('text=Preview')
+      await expect(
+        typebotViewer(page).locator('iframe#embed-bubble-content')
+      ).toHaveAttribute('src', siteSrc)
+    })
+  })
+})

apps/builder/src/features/blocks/bubbles/embed/index.ts

@@ -0,0 +1,3 @@
+export { EmbedBubbleContent } from './components/EmbedBubbleContent'
+export { EmbedUploadContent } from './components/EmbedUploadContent'
+export { EmbedBubbleIcon } from './components/EmbedBubbleIcon'

apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleContent.tsx

@@ -0,0 +1,21 @@
+import { Box, Text, Image } from '@chakra-ui/react'
+import { ImageBubbleBlock } from 'models'
+
+export const ImageBubbleContent = ({ block }: { block: ImageBubbleBlock }) => {
+  const containsVariables =
+    block.content?.url?.includes('{{') && block.content.url.includes('}}')
+  return !block.content?.url ? (
+    <Text color={'gray.500'}>Click to edit...</Text>
+  ) : (
+    <Box w="full">
+      <Image
+        src={
+          containsVariables ? '/images/dynamic-image.png' : block.content?.url
+        }
+        alt="Group image"
+        rounded="md"
+        objectFit="cover"
+      />
+    </Box>
+  )
+}

apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleIcon.tsx

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

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

@@ -0,0 +1,130 @@
+import test, { expect } from '@playwright/test'
+import { createTypebots } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import { BubbleBlockType, defaultImageBubbleContent } from 'models'
+import cuid from 'cuid'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+import { getTestAsset } from '@/test/utils/playwright'
+
+const unsplashImageSrc =
+  'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
+
+test.describe.parallel('Image bubble block', () => {
+  test.describe('Content settings', () => {
+    test('should upload image file correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.IMAGE,
+            content: defaultImageBubbleContent,
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+
+      await page.click('text=Click to edit...')
+      await page.setInputFiles('input[type="file"]', getTestAsset('avatar.jpg'))
+      await expect(page.locator('img')).toHaveAttribute(
+        'src',
+        `${process.env.S3_SSL === 'false' ? 'http://' : 'https://'}${
+          process.env.S3_ENDPOINT
+        }${process.env.S3_PORT ? `:${process.env.S3_PORT}` : ''}/${
+          process.env.S3_BUCKET
+        }/public/typebots/${typebotId}/blocks/block2`
+      )
+    })
+
+    test('should import image link correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.IMAGE,
+            content: defaultImageBubbleContent,
+          }),
+        },
+      ])
+
+      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
+      )
+      await expect(page.locator('img')).toHaveAttribute('src', unsplashImageSrc)
+    })
+
+    test('should import gifs correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.IMAGE,
+            content: defaultImageBubbleContent,
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+
+      await page.click('text=Click to edit...')
+      await page.click('text=Giphy')
+      const firstGiphyImage = page.locator('.giphy-gif-img >> nth=0')
+      await expect(firstGiphyImage).toHaveAttribute(
+        'src',
+        new RegExp('giphy.com/media', 'gm')
+      )
+      const trendingfirstImageSrc = await firstGiphyImage.getAttribute('src')
+      expect(trendingfirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
+      await page.type('[placeholder="Search..."]', 'fun')
+      await expect(page.locator('[placeholder="Search..."]')).toHaveValue('fun')
+      await page.waitForTimeout(500)
+      await expect(firstGiphyImage).toHaveAttribute(
+        'src',
+        new RegExp('giphy.com/media', 'gm')
+      )
+      const funFirstImageSrc = await firstGiphyImage.getAttribute('src')
+      expect(funFirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
+      expect(trendingfirstImageSrc).not.toBe(funFirstImageSrc)
+      await firstGiphyImage.click({
+        force: true,
+        position: { x: 0, y: 0 },
+      })
+      await expect(page.locator('img[alt="Group image"]')).toHaveAttribute(
+        'src',
+        new RegExp('giphy.com/media', 'gm')
+      )
+    })
+  })
+
+  test.describe('Preview', () => {
+    test('should display correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.IMAGE,
+            content: {
+              url: unsplashImageSrc,
+            },
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+      await page.click('text=Preview')
+      await expect(typebotViewer(page).locator('img')).toHaveAttribute(
+        'src',
+        unsplashImageSrc
+      )
+    })
+  })
+})

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

@@ -0,0 +1,2 @@
+export { ImageBubbleContent } from './components/ImageBubbleContent'
+export { ImageBubbleIcon } from './components/ImageBubbleIcon'

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleContent.tsx

@@ -0,0 +1,28 @@
+import { Flex } from '@chakra-ui/react'
+import { useTypebot } from '@/features/editor'
+import { TextBubbleBlock } from 'models'
+import React from 'react'
+import { parseVariableHighlight } from '@/utils/helpers'
+
+type Props = {
+  block: TextBubbleBlock
+}
+
+export const TextBubbleContent = ({ block }: Props) => {
+  const { typebot } = useTypebot()
+  if (!typebot) return <></>
+  return (
+    <Flex
+      w="90%"
+      flexDir={'column'}
+      opacity={block.content.html === '' ? '0.5' : '1'}
+      className="slate-html-container"
+      dangerouslySetInnerHTML={{
+        __html:
+          block.content.html === ''
+            ? `<p>Click to edit...</p>`
+            : parseVariableHighlight(block.content.html, typebot),
+      }}
+    />
+  )
+}

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/TextBubbleEditor.tsx

@@ -0,0 +1,179 @@
+import { Flex, Stack, useOutsideClick } from '@chakra-ui/react'
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  Plate,
+  PlateProvider,
+  selectEditor,
+  TElement,
+  usePlateEditorRef,
+} from '@udecode/plate-core'
+import { editorStyle, platePlugins } from '@/lib/plate'
+import { BaseEditor, BaseSelection, Transforms } from 'slate'
+import { ToolBar } from './ToolBar'
+import { defaultTextBubbleContent, TextBubbleContent, Variable } from 'models'
+import { ReactEditor } from 'slate-react'
+import { serializeHtml } from '@udecode/plate-serializer-html'
+import { parseHtmlStringToPlainText } from '../../utils'
+import { VariableSearchInput } from '@/components/VariableSearchInput'
+
+type TextBubbleEditorContentProps = {
+  id: string
+  textEditorValue: TElement[]
+  onClose: (newContent: TextBubbleContent) => void
+}
+
+const TextBubbleEditorContent = ({
+  id,
+  textEditorValue,
+  onClose,
+}: TextBubbleEditorContentProps) => {
+  const editor = usePlateEditorRef()
+  const varDropdownRef = useRef<HTMLDivElement | null>(null)
+  const rememberedSelection = useRef<BaseSelection | null>(null)
+  const [isVariableDropdownOpen, setIsVariableDropdownOpen] = useState(false)
+
+  const textEditorRef = useRef<HTMLDivElement>(null)
+
+  const closeEditor = () => onClose(convertValueToBlockContent(textEditorValue))
+
+  useOutsideClick({
+    ref: textEditorRef,
+    handler: closeEditor,
+  })
+
+  useEffect(() => {
+    if (!isVariableDropdownOpen) return
+    const el = varDropdownRef.current
+    if (!el) return
+    const { top, left } = computeTargetCoord()
+    el.style.top = `${top}px`
+    el.style.left = `${left}px`
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isVariableDropdownOpen])
+
+  const computeTargetCoord = () => {
+    const selection = window.getSelection()
+    const relativeParent = textEditorRef.current
+    if (!selection || !relativeParent) return { top: 0, left: 0 }
+    const range = selection.getRangeAt(0)
+    const selectionBoundingRect = range.getBoundingClientRect()
+    const relativeRect = relativeParent.getBoundingClientRect()
+    return {
+      top: selectionBoundingRect.bottom - relativeRect.top,
+      left: selectionBoundingRect.left - relativeRect.left,
+    }
+  }
+
+  const convertValueToBlockContent = (value: TElement[]): TextBubbleContent => {
+    if (value.length === 0) defaultTextBubbleContent
+    const html = serializeHtml(editor, {
+      nodes: value,
+    })
+    return {
+      html,
+      richText: value,
+      plainText: parseHtmlStringToPlainText(html),
+    }
+  }
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation()
+  }
+
+  const handleVariableSelected = (variable?: Variable) => {
+    setIsVariableDropdownOpen(false)
+    if (!rememberedSelection.current || !variable) return
+    Transforms.select(editor as BaseEditor, rememberedSelection.current)
+    Transforms.insertText(editor as BaseEditor, '{{' + variable.name + '}}')
+    ReactEditor.focus(editor as unknown as ReactEditor)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.shiftKey) return
+    if (e.key === 'Enter') closeEditor()
+  }
+
+  return (
+    <Stack
+      flex="1"
+      ref={textEditorRef}
+      borderWidth="2px"
+      borderColor="blue.400"
+      rounded="md"
+      onMouseDown={handleMouseDown}
+      pos="relative"
+      spacing={0}
+      cursor="text"
+    >
+      <ToolBar onVariablesButtonClick={() => setIsVariableDropdownOpen(true)} />
+      <Plate
+        id={id}
+        editableProps={{
+          style: editorStyle,
+          autoFocus: true,
+          onFocus: () => {
+            if (editor.children.length === 0) return
+            selectEditor(editor, {
+              edge: 'end',
+            })
+          },
+          'aria-label': 'Text editor',
+          onBlur: () => {
+            rememberedSelection.current = editor.selection
+          },
+          onKeyDown: handleKeyDown,
+        }}
+      />
+      {isVariableDropdownOpen && (
+        <Flex
+          pos="absolute"
+          ref={varDropdownRef}
+          shadow="lg"
+          rounded="md"
+          bgColor="white"
+          w="250px"
+          zIndex={10}
+        >
+          <VariableSearchInput
+            onSelectVariable={handleVariableSelected}
+            placeholder="Search for a variable"
+            isDefaultOpen
+          />
+        </Flex>
+      )}
+    </Stack>
+  )
+}
+
+type TextBubbleEditorProps = {
+  id: string
+  initialValue: TElement[]
+  onClose: (newContent: TextBubbleContent) => void
+}
+
+export const TextBubbleEditor = ({
+  id,
+  initialValue,
+  onClose,
+}: TextBubbleEditorProps) => {
+  const [textEditorValue, setTextEditorValue] = useState(initialValue)
+
+  return (
+    <PlateProvider
+      id={id}
+      plugins={platePlugins}
+      initialValue={
+        initialValue.length === 0
+          ? [{ type: 'p', children: [{ text: '' }] }]
+          : initialValue
+      }
+      onChange={setTextEditorValue}
+    >
+      <TextBubbleEditorContent
+        id={id}
+        textEditorValue={textEditorValue}
+        onClose={onClose}
+      />
+    </PlateProvider>
+  )
+}

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/ToolBar.tsx

@@ -0,0 +1,67 @@
+import { StackProps, HStack, IconButton } from '@chakra-ui/react'
+import {
+  MARK_BOLD,
+  MARK_ITALIC,
+  MARK_UNDERLINE,
+} from '@udecode/plate-basic-marks'
+import { getPluginType, usePlateEditorRef } from '@udecode/plate-core'
+import { LinkToolbarButton } from '@udecode/plate-ui-link'
+import { MarkToolbarButton } from '@udecode/plate-ui-toolbar'
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  LinkIcon,
+  UserIcon,
+} from '@/components/icons'
+
+type Props = {
+  onVariablesButtonClick: () => void
+} & StackProps
+
+export const ToolBar = ({ onVariablesButtonClick, ...props }: Props) => {
+  const editor = usePlateEditorRef()
+  const handleVariablesButtonMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault()
+    onVariablesButtonClick()
+  }
+  return (
+    <HStack
+      bgColor={'white'}
+      borderTopRadius="md"
+      p={2}
+      w="full"
+      boxSizing="border-box"
+      borderBottomWidth={1}
+      {...props}
+    >
+      <IconButton
+        aria-label="Insert variable"
+        size="sm"
+        onMouseDown={handleVariablesButtonMouseDown}
+        icon={<UserIcon />}
+      />
+      <span data-testid="bold-button">
+        <MarkToolbarButton
+          type={getPluginType(editor, MARK_BOLD)}
+          icon={<BoldIcon />}
+        />
+      </span>
+      <span data-testid="italic-button">
+        <MarkToolbarButton
+          type={getPluginType(editor, MARK_ITALIC)}
+          icon={<ItalicIcon />}
+        />
+      </span>
+      <span data-testid="underline-button">
+        <MarkToolbarButton
+          type={getPluginType(editor, MARK_UNDERLINE)}
+          icon={<UnderlineIcon />}
+        />
+      </span>
+      <span data-testid="link-button">
+        <LinkToolbarButton icon={<LinkIcon />} />
+      </span>
+    </HStack>
+  )
+}

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/index.tsx

@@ -0,0 +1 @@
+export { TextBubbleEditor } from './TextBubbleEditor'

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleIcon.tsx

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

apps/builder/src/features/blocks/bubbles/textBubble/index.ts

@@ -0,0 +1,3 @@
+export { TextBubbleEditor } from './components/TextBubbleEditor'
+export { TextBubbleContent } from './components/TextBubbleContent'
+export { TextBubbleIcon } from './components/TextBubbleIcon'

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

@@ -0,0 +1,67 @@
+import test, { expect } from '@playwright/test'
+import { createTypebots } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import { BubbleBlockType, defaultTextBubbleContent } from 'models'
+import cuid from 'cuid'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+
+test.describe('Text bubble block', () => {
+  test('rich text features should work', async ({ page }) => {
+    const typebotId = cuid()
+    await createTypebots([
+      {
+        id: typebotId,
+        ...parseDefaultGroupWithBlock({
+          type: BubbleBlockType.TEXT,
+          content: defaultTextBubbleContent,
+        }),
+      },
+    ])
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+
+    await page.click('[data-testid="bold-button"]')
+    await page.type('div[role="textbox"]', 'Bold text')
+    await page.press('div[role="textbox"]', 'Shift+Enter')
+
+    await page.click('[data-testid="bold-button"]')
+    await page.click('[data-testid="italic-button"]')
+    await page.type('div[role="textbox"]', 'Italic text')
+    await page.press('div[role="textbox"]', 'Shift+Enter')
+
+    await page.click('[data-testid="underline-button"]')
+    await page.click('[data-testid="italic-button"]')
+    await page.type('div[role="textbox"]', 'Underlined text')
+    await page.press('div[role="textbox"]', 'Shift+Enter')
+
+    await page.click('[data-testid="bold-button"]')
+    await page.click('[data-testid="italic-button"]')
+    await page.type('div[role="textbox"]', 'Everything text')
+    await page.press('div[role="textbox"]', 'Shift+Enter')
+
+    await page.type('div[role="textbox"]', 'My super link')
+    await page.waitForTimeout(300)
+    await page.press('div[role="textbox"]', 'Shift+Meta+ArrowLeft')
+    await page.click('[data-testid="link-button"]')
+    await page.fill('input[placeholder="Paste link"]', 'https://github.com')
+    await page.press('input[placeholder="Paste link"]', 'Enter')
+    await page.press('div[role="textbox"]', 'Shift+Enter')
+    await page.click('button[aria-label="Insert variable"]')
+    await page.fill('[data-testid="variables-input"]', 'test')
+    await page.click('text=Create "test"')
+
+    await page.click('text=Preview')
+    await expect(
+      typebotViewer(page).locator('span.slate-bold >> nth=0')
+    ).toHaveText('Bold text')
+    await expect(
+      typebotViewer(page).locator('span.slate-italic >> nth=0')
+    ).toHaveText('Italic text')
+    await expect(
+      typebotViewer(page).locator('span.slate-underline >> nth=0')
+    ).toHaveText('Underlined text')
+    await expect(
+      typebotViewer(page).locator('a[href="https://github.com"]')
+    ).toHaveText('My super link')
+  })
+})

apps/builder/src/features/blocks/bubbles/textBubble/utils.ts

@@ -0,0 +1,13 @@
+import { Parser } from 'htmlparser2'
+
+export const parseHtmlStringToPlainText = (html: string): string => {
+  let label = ''
+  const parser = new Parser({
+    ontext(text) {
+      label += `${text}`
+    },
+  })
+  parser.write(html)
+  parser.end()
+  return label
+}

apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx

@@ -0,0 +1,52 @@
+import { Box, Text } from '@chakra-ui/react'
+import { VideoBubbleBlock, VideoBubbleContentType } from 'models'
+
+export const VideoBubbleContent = ({ block }: { block: VideoBubbleBlock }) => {
+  if (!block.content?.url || !block.content.type)
+    return <Text color="gray.500">Click to edit...</Text>
+  switch (block.content.type) {
+    case VideoBubbleContentType.URL:
+      return (
+        <Box w="full" h="120px" pos="relative">
+          <video
+            key={block.content.url}
+            controls
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+              left: '0',
+              top: '0',
+              borderRadius: '10px',
+            }}
+          >
+            <source src={block.content.url} />
+          </video>
+        </Box>
+      )
+    case VideoBubbleContentType.VIMEO:
+    case VideoBubbleContentType.YOUTUBE: {
+      const baseUrl =
+        block.content.type === VideoBubbleContentType.VIMEO
+          ? 'https://player.vimeo.com/video'
+          : 'https://www.youtube.com/embed'
+      return (
+        <Box w="full" h="120px" pos="relative">
+          <iframe
+            src={`${baseUrl}/${block.content.id}`}
+            allowFullScreen
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+              left: '0',
+              top: '0',
+              borderRadius: '10px',
+              pointerEvents: 'none',
+            }}
+          />
+        </Box>
+      )
+    }
+  }
+}

apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleIcon.tsx

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

apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx

@@ -0,0 +1,37 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { VideoBubbleContent, VideoBubbleContentType } from 'models'
+import urlParser from 'js-video-url-parser/lib/base'
+import 'js-video-url-parser/lib/provider/vimeo'
+import 'js-video-url-parser/lib/provider/youtube'
+import { isDefined } from 'utils'
+import { Input } from '@/components/inputs'
+
+type Props = {
+  content?: VideoBubbleContent
+  onSubmit: (content: VideoBubbleContent) => void
+}
+
+export const VideoUploadContent = ({ content, onSubmit }: Props) => {
+  const handleUrlChange = (url: string) => {
+    const info = urlParser.parse(url)
+    return isDefined(info) && info.provider && info.id
+      ? onSubmit({
+          type: info.provider as VideoBubbleContentType,
+          url,
+          id: info.id,
+        })
+      : onSubmit({ type: VideoBubbleContentType.URL, url })
+  }
+  return (
+    <Stack p="2">
+      <Input
+        placeholder="Paste the video link..."
+        defaultValue={content?.url ?? ''}
+        onChange={handleUrlChange}
+      />
+      <Text fontSize="sm" color="gray.400" textAlign="center">
+        Works with Youtube, Vimeo and others
+      </Text>
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/bubbles/video/index.ts

@@ -0,0 +1,3 @@
+export { VideoUploadContent } from './components/VideoUploadContent'
+export { VideoBubbleContent } from './components/VideoBubbleContent'
+export { VideoBubbleIcon } from './components/VideoBubbleIcon'

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

@@ -0,0 +1,113 @@
+import test, { expect } from '@playwright/test'
+import { createTypebots } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import {
+  BubbleBlockType,
+  defaultVideoBubbleContent,
+  VideoBubbleContentType,
+} from 'models'
+import cuid from 'cuid'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+
+const videoSrc =
+  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
+const youtubeVideoSrc = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
+const vimeoVideoSrc = 'https://vimeo.com/649301125'
+
+test.describe.parallel('Video bubble block', () => {
+  test.describe('Content settings', () => {
+    test('should import video url correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.VIDEO,
+            content: defaultVideoBubbleContent,
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+
+      await page.click('text=Click to edit...')
+      await page.fill('input[placeholder="Paste the video link..."]', videoSrc)
+      await expect(page.locator('video > source')).toHaveAttribute(
+        'src',
+        videoSrc
+      )
+    })
+  })
+
+  test.describe('Preview', () => {
+    test('should display video correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.VIDEO,
+            content: {
+              type: VideoBubbleContentType.URL,
+              url: videoSrc,
+            },
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+      await page.click('text=Preview')
+      await expect(
+        typebotViewer(page).locator('video > source')
+      ).toHaveAttribute('src', videoSrc)
+    })
+
+    test('should display youtube video correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.VIDEO,
+            content: {
+              type: VideoBubbleContentType.YOUTUBE,
+              url: youtubeVideoSrc,
+              id: 'dQw4w9WgXcQ',
+            },
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+      await page.click('text=Preview')
+      await expect(typebotViewer(page).locator('iframe')).toHaveAttribute(
+        'src',
+        'https://www.youtube.com/embed/dQw4w9WgXcQ'
+      )
+    })
+
+    test('should display vimeo video correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.VIDEO,
+            content: {
+              type: VideoBubbleContentType.VIMEO,
+              url: vimeoVideoSrc,
+              id: '649301125',
+            },
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+      await page.click('text=Preview')
+      await expect(typebotViewer(page).locator('iframe')).toHaveAttribute(
+        'src',
+        'https://player.vimeo.com/video/649301125'
+      )
+    })
+  })
+})