feat(bubbles): ✨ Add video bubble

apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/ContentPopover.tsx

@@ -4,16 +4,17 @@ import {
   PopoverArrow,
   PopoverBody,
 } from '@chakra-ui/react'
-import { ImagePopoverContent } from 'components/shared/ImageUploadContent'
+import { ImageUploadContent } from 'components/shared/ImageUploadContent'
 import { useTypebot } from 'contexts/TypebotContext'
 import {
   BubbleStep,
+  BubbleStepContent,
   BubbleStepType,
-  ImageBubbleContent,
   ImageBubbleStep,
   TextBubbleStep,
 } from 'models'
 import { useRef } from 'react'
+import { VideoUploadContent } from './VideoUploadContent'
 
 type Props = {
   step: Exclude<BubbleStep, TextBubbleStep>
@@ -25,7 +26,7 @@ export const ContentPopover = ({ step }: Props) => {
 
   return (
     <Portal>
-      <PopoverContent onMouseDown={handleMouseDown} w="500px">
+      <PopoverContent onMouseDown={handleMouseDown}>
         <PopoverArrow />
         <PopoverBody ref={ref} shadow="lg">
           <StepContent step={step} />
@@ -37,16 +38,24 @@ export const ContentPopover = ({ step }: Props) => {
 
 export const StepContent = ({ step }: Props) => {
   const { updateStep } = useTypebot()
-  const handleContentChange = (content: ImageBubbleContent) =>
+
+  const handleContentChange = (content: BubbleStepContent) =>
     updateStep(step.id, { content } as Partial<ImageBubbleStep>)
 
-  const handleNewImageSubmit = (url: string) => handleContentChange({ url })
   switch (step.type) {
     case BubbleStepType.IMAGE: {
       return (
-        <ImagePopoverContent
-          url={step.content?.url}
-          onSubmit={handleNewImageSubmit}
+        <ImageUploadContent
+          content={step.content}
+          onSubmit={handleContentChange}
+        />
+      )
+    }
+    case BubbleStepType.VIDEO: {
+      return (
+        <VideoUploadContent
+          content={step.content}
+          onSubmit={handleContentChange}
         />
       )
     }

apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/VideoUploadContent.tsx

@@ -0,0 +1,38 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
+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'
+
+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">
+      <InputWithVariableButton
+        placeholder="Paste the video link..."
+        initialValue={content?.url ?? ''}
+        onChange={handleUrlChange}
+        delay={100}
+      />
+      <Text fontSize="sm" color="gray.400" textAlign="center">
+        Works with Youtube, Vimeo and others
+      </Text>
+    </Stack>
+  )
+}