✨ Add audio bubble block

Closes #167

packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/HostBubble.tsx

@@ -1,3 +1,4 @@
+import { AudioBubble } from '@/features/blocks/bubbles/audio'
 import { EmbedBubble } from '@/features/blocks/bubbles/embed'
 import { ImageBubble } from '@/features/blocks/bubbles/image'
 import { TextBubble } from '@/features/blocks/bubbles/textBubble'
@@ -20,5 +21,12 @@ export const HostBubble = ({ block, onTransitionEnd }: Props) => {
       return <VideoBubble block={block} onTransitionEnd={onTransitionEnd} />
     case BubbleBlockType.EMBED:
       return <EmbedBubble block={block} onTransitionEnd={onTransitionEnd} />
+    case BubbleBlockType.AUDIO:
+      return (
+        <AudioBubble
+          url={block.content.url}
+          onTransitionEnd={onTransitionEnd}
+        />
+      )
   }
 }

packages/bot-engine/src/features/blocks/bubbles/audio/components/AudioBubble.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useTypebot } from '@/providers/TypebotProvider'
+import { AudioBubbleContent } from 'models'
+import { TypingBubble } from '@/components/TypingBubble'
+import { parseVariables } from '@/features/variables'
+
+type Props = {
+  url: AudioBubbleContent['url']
+  onTransitionEnd: () => void
+}
+
+const showAnimationDuration = 400
+const typingDuration = 500
+
+export const AudioBubble = ({ url, onTransitionEnd }: Props) => {
+  const { typebot, isLoading } = useTypebot()
+  const audio = useRef<HTMLAudioElement | null>(null)
+  const [isTyping, setIsTyping] = useState(true)
+
+  const parsedUrl = useMemo(
+    () => parseVariables(typebot.variables)(url),
+    [url, typebot.variables]
+  )
+
+  useEffect(() => {
+    if (!isTyping || isLoading) return
+
+    const typingTimeout = setTimeout(() => {
+      setIsTyping(false)
+      setTimeout(() => {
+        onTransitionEnd()
+      }, showAnimationDuration)
+    }, typingDuration)
+
+    return () => {
+      clearTimeout(typingTimeout)
+    }
+  }, [isLoading, isTyping, onTransitionEnd])
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex mb-2 w-full lg:w-11/12 items-center">
+        <div className={'flex relative z-10 items-start typebot-host-bubble'}>
+          <div
+            className="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            style={{
+              width: isTyping ? '4rem' : '100%',
+              height: isTyping ? '2rem' : '100%',
+            }}
+          >
+            {isTyping ? <TypingBubble /> : null}
+          </div>
+          <audio
+            ref={audio}
+            src={parsedUrl}
+            className={
+              'z-10 content-opacity m-2 ' +
+              (isTyping ? 'opacity-0' : 'opacity-100')
+            }
+            style={{ height: isTyping ? '2rem' : 'revert' }}
+            autoPlay
+            controls
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

packages/bot-engine/src/features/blocks/bubbles/audio/components/index.ts

@@ -0,0 +1 @@
+export * from './AudioBubble'

packages/bot-engine/src/features/blocks/bubbles/audio/index.ts

@@ -0,0 +1 @@
+export * from './components'