feat(editor): ⚡️ Image picker and dynamic preview

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ImageBubbleContent.tsx

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

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useState } from 'react'
+import { ChangeEvent, useState } from 'react'
 import {
   Button,
   Flex,
@@ -13,10 +13,9 @@ import { SearchContextManager } from '@giphy/react-components'
 import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearch } from './GiphySearch'
 import { useTypebot } from 'contexts/TypebotContext'
-import { useDebounce } from 'use-debounce'
-import { Input } from '../Textbox'
 import { BaseEmoji, emojiIndex } from 'emoji-mart'
 import { emojis } from './emojis'
+import { Input } from '../Textbox/Input'
 
 type Props = {
   url?: string
@@ -123,26 +122,15 @@ const UploadFileContent = ({ onNewUrl }: ContentProps) => {
   )
 }
 
-const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => {
+const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => (
-  const [imageUrl, setImageUrl] = useState(initialUrl ?? '')
+  <Stack py="2">
-  const [debouncedImageUrl] = useDebounce(imageUrl, 100)
+    <Input
-
+      placeholder={'Paste the image link...'}
-  useEffect(() => {
+      onChange={onNewUrl}
-    if (initialUrl === debouncedImageUrl) return
+      defaultValue={initialUrl ?? ''}
-    onNewUrl(imageUrl)
+    />
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  </Stack>
-  }, [debouncedImageUrl])
+)
-
-  return (
-    <Stack py="2">
-      <Input
-        placeholder={'Paste the image link...'}
-        onChange={setImageUrl}
-        defaultValue={imageUrl}
-      />
-    </Stack>
-  )
-}
 
 const EmojiContent = ({
   onEmojiSelected,