refactor(editor): ♻️ Undo / Redo buttons + structure refacto

Yet another huge refacto... While implementing undo and redo features I understood that I updated the stored typebot too many times (i.e. on each key input) so I had to rethink it entirely. I also moved around some files.

apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/MediaBubblePopoverContent.tsx

@@ -0,0 +1,56 @@
+import {
+  Portal,
+  PopoverContent,
+  PopoverArrow,
+  PopoverBody,
+} from '@chakra-ui/react'
+import { ImageUploadContent } from 'components/shared/ImageUploadContent'
+import {
+  BubbleStep,
+  BubbleStepContent,
+  BubbleStepType,
+  TextBubbleStep,
+} from 'models'
+import { useRef } from 'react'
+import { VideoUploadContent } from './VideoUploadContent'
+
+type Props = {
+  step: Exclude<BubbleStep, TextBubbleStep>
+  onContentChange: (content: BubbleStepContent) => void
+}
+
+export const MediaBubblePopoverContent = (props: Props) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
+
+  return (
+    <Portal>
+      <PopoverContent onMouseDown={handleMouseDown} w="500px">
+        <PopoverArrow />
+        <PopoverBody ref={ref} shadow="lg">
+          <MediaBubbleContent {...props} />
+        </PopoverBody>
+      </PopoverContent>
+    </Portal>
+  )
+}
+
+export const MediaBubbleContent = ({ step, onContentChange }: Props) => {
+  const handleImageUrlChange = (url: string) => onContentChange({ url })
+
+  switch (step.type) {
+    case BubbleStepType.IMAGE: {
+      return (
+        <ImageUploadContent
+          url={step.content?.url}
+          onSubmit={handleImageUrlChange}
+        />
+      )
+    }
+    case BubbleStepType.VIDEO: {
+      return (
+        <VideoUploadContent content={step.content} onSubmit={onContentChange} />
+      )
+    }
+  }
+}

apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/VideoUploadContent.tsx

@@ -0,0 +1,37 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/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}
+      />
+      <Text fontSize="sm" color="gray.400" textAlign="center">
+        Works with Youtube, Vimeo and others
+      </Text>
+    </Stack>
+  )
+}

apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/index.tsx

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