✨ Add audio bubble block

Closes #167

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx

@@ -36,6 +36,7 @@ import { ZapierContent } from '@/features/blocks/integrations/zapier'
 import { SendEmailContent } from '@/features/blocks/integrations/sendEmail'
 import { isInputBlock, isChoiceInput, blockHasItems } from 'utils'
 import { MakeComNodeContent } from '@/features/blocks/integrations/makeCom'
+import { AudioBubbleNode } from '@/features/blocks/bubbles/audio'
 
 type Props = {
   block: Block | StartBlock
@@ -66,6 +67,9 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
     case BubbleBlockType.EMBED: {
       return <EmbedBubbleContent block={block} />
     }
+    case BubbleBlockType.AUDIO: {
+      return <AudioBubbleNode url={block.content.url} />
+    }
     case InputBlockType.TEXT: {
       return (
         <TextInputNodeContent

apps/builder/src/features/graph/components/Nodes/BlockNode/MediaBubblePopoverContent.tsx

@@ -1,4 +1,5 @@
 import { ImageUploadContent } from '@/components/ImageUploadContent'
+import { AudioBubbleForm } from '@/features/blocks/bubbles/audio/components/AudioBubbleForm'
 import { EmbedUploadContent } from '@/features/blocks/bubbles/embed'
 import { VideoUploadContent } from '@/features/blocks/bubbles/video'
 import {
@@ -73,5 +74,14 @@ export const MediaBubbleContent = ({
         />
       )
     }
+    case BubbleBlockType.AUDIO: {
+      return (
+        <AudioBubbleForm
+          content={block.content}
+          fileUploadPath={`typebots/${typebotId}/blocks/${block.id}`}
+          onSubmit={onContentChange}
+        />
+      )
+    }
   }
 }

apps/builder/src/features/graph/utils.ts

@@ -15,6 +15,7 @@ import {
   defaultGoogleAnalyticsOptions,
   defaultGoogleSheetsOptions,
   defaultImageBubbleContent,
+  defaultAudioBubbleContent,
   defaultNumberInputOptions,
   defaultPaymentInputOptions,
   defaultPhoneInputOptions,
@@ -400,6 +401,8 @@ const parseDefaultContent = (type: BubbleBlockType): BubbleBlockContent => {
       return defaultVideoBubbleContent
     case BubbleBlockType.EMBED:
       return defaultEmbedBubbleContent
+    case BubbleBlockType.AUDIO:
+      return defaultAudioBubbleContent
   }
 }