feat(steps): ✨ Add Embed bubble

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

@@ -11,6 +11,7 @@ import {
 import { isChoiceInput, isInputStep } from 'utils'
 import { ItemNodesList } from '../../ItemNode'
 import {
+  EmbedBubbleContent,
   SetVariableContent,
   TextBubbleContent,
   VideoBubbleContent,
@@ -42,6 +43,9 @@ export const StepNodeContent = ({ step, indices }: Props) => {
     case BubbleStepType.VIDEO: {
       return <VideoBubbleContent step={step} />
     }
+    case BubbleStepType.EMBED: {
+      return <EmbedBubbleContent step={step} />
+    }
     case InputStepType.TEXT: {
       return (
         <PlaceholderContent

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

@@ -0,0 +1,20 @@
+import { Box, Text } from '@chakra-ui/react'
+import { EmbedBubbleStep } from 'models'
+
+export const EmbedBubbleContent = ({ step }: { step: EmbedBubbleStep }) => {
+  if (!step.content?.url) return <Text color="gray.500">Click to edit...</Text>
+  return (
+    <Box w="full" h="120px" pos="relative">
+      <iframe
+        id="embed-bubble-content"
+        src={step.content.url}
+        style={{
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'none',
+          borderRadius: '5px',
+        }}
+      />
+    </Box>
+  )
+}

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

@@ -3,3 +3,4 @@ export * from './WithVariableContent'
 export * from './VideoBubbleContent'
 export * from './WebhookContent'
 export * from './TextBubbleContent'
+export * from './EmbedBubbleContent'