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 }) =>
-  !step.content?.url ? (
+export const ImageBubbleContent = ({ step }: { step: ImageBubbleStep }) => {
+  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}
-        alt="Step image"
+        src={
+          containsVariables ? '/images/dynamic-image.png' : step.content?.url
+        }
+        alt="Block image"
         rounded="md"
         objectFit="cover"
       />
     </Box>
   )
+}