♻️ Re-organize workspace folders

packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx

@@ -0,0 +1,58 @@
+import { TypingBubble } from '@/components'
+import type { AudioBubbleContent } from '@typebot.io/schemas'
+import { createSignal, onCleanup, onMount } from 'solid-js'
+
+type Props = {
+  url: AudioBubbleContent['url']
+  onTransitionEnd: () => void
+}
+
+const showAnimationDuration = 400
+const typingDuration = 500
+
+let typingTimeout: NodeJS.Timeout
+
+export const AudioBubble = (props: Props) => {
+  const [isTyping, setIsTyping] = createSignal(true)
+
+  onMount(() => {
+    typingTimeout = setTimeout(() => {
+      setIsTyping(false)
+      setTimeout(() => {
+        props.onTransitionEnd()
+      }, showAnimationDuration)
+    }, typingDuration)
+  })
+
+  onCleanup(() => {
+    if (typingTimeout) clearTimeout(typingTimeout)
+  })
+
+  return (
+    <div class="flex flex-col animate-fade-in">
+      <div class="flex mb-2 w-full items-center">
+        <div class={'flex relative z-10 items-start typebot-host-bubble'}>
+          <div
+            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            style={{
+              width: isTyping() ? '64px' : '100%',
+              height: isTyping() ? '32px' : '100%',
+            }}
+          >
+            {isTyping() && <TypingBubble />}
+          </div>
+          <audio
+            src={props.url}
+            class={
+              'z-10 text-fade-in m-2 ' +
+              (isTyping() ? 'opacity-0' : 'opacity-100')
+            }
+            style={{ height: isTyping() ? '32px' : 'revert' }}
+            autoplay
+            controls
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

packages/embeds/js/src/features/blocks/bubbles/audio/components/index.ts

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

packages/embeds/js/src/features/blocks/bubbles/audio/index.ts

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

packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx

@@ -0,0 +1,60 @@
+import { TypingBubble } from '@/components'
+import type { EmbedBubbleContent } from '@typebot.io/schemas'
+import { createSignal, onCleanup, onMount } from 'solid-js'
+
+type Props = {
+  content: EmbedBubbleContent
+  onTransitionEnd: () => void
+}
+
+let typingTimeout: NodeJS.Timeout
+
+export const showAnimationDuration = 400
+
+export const EmbedBubble = (props: Props) => {
+  const [isTyping, setIsTyping] = createSignal(true)
+
+  onMount(() => {
+    typingTimeout = setTimeout(() => {
+      setIsTyping(false)
+      setTimeout(() => {
+        props.onTransitionEnd()
+      }, showAnimationDuration)
+    }, 2000)
+  })
+
+  onCleanup(() => {
+    if (typingTimeout) clearTimeout(typingTimeout)
+  })
+
+  return (
+    <div class="flex flex-col w-full animate-fade-in">
+      <div class="flex mb-2 w-full items-center">
+        <div
+          class={'flex relative z-10 items-start typebot-host-bubble w-full'}
+        >
+          <div
+            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            style={{
+              width: isTyping() ? '64px' : '100%',
+              height: isTyping() ? '32px' : '100%',
+            }}
+          >
+            {isTyping() && <TypingBubble />}
+          </div>
+          <iframe
+            id="embed-bubble-content"
+            src={props.content.url}
+            class={
+              'w-full z-20 p-4 text-fade-in rounded-2xl ' +
+              (isTyping() ? 'opacity-0' : 'opacity-100')
+            }
+            style={{
+              height: isTyping() ? '32px' : `${props.content.height}px`,
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

packages/embeds/js/src/features/blocks/bubbles/embed/components/index.ts

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

packages/embeds/js/src/features/blocks/bubbles/embed/index.ts

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

packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx

@@ -0,0 +1,73 @@
+import { TypingBubble } from '@/components'
+import type { ImageBubbleContent } from '@typebot.io/schemas'
+import { createSignal, onCleanup, onMount } from 'solid-js'
+
+type Props = {
+  url: ImageBubbleContent['url']
+  onTransitionEnd: () => void
+}
+
+export const showAnimationDuration = 400
+
+export const mediaLoadingFallbackTimeout = 5000
+
+let typingTimeout: NodeJS.Timeout
+
+export const ImageBubble = (props: Props) => {
+  let image: HTMLImageElement | undefined
+  const [isTyping, setIsTyping] = createSignal(true)
+
+  const onTypingEnd = () => {
+    if (!isTyping()) return
+    setIsTyping(false)
+    setTimeout(() => {
+      props.onTransitionEnd()
+    }, showAnimationDuration)
+  }
+
+  onMount(() => {
+    if (!image) return
+    typingTimeout = setTimeout(onTypingEnd, mediaLoadingFallbackTimeout)
+    image.onload = () => {
+      clearTimeout(typingTimeout)
+      onTypingEnd()
+    }
+  })
+
+  onCleanup(() => {
+    if (typingTimeout) clearTimeout(typingTimeout)
+  })
+
+  return (
+    <div class="flex flex-col animate-fade-in">
+      <div class="flex mb-2 w-full items-center">
+        <div class={'flex relative z-10 items-start typebot-host-bubble'}>
+          <div
+            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            style={{
+              width: isTyping() ? '64px' : '100%',
+              height: isTyping() ? '32px' : '100%',
+            }}
+          >
+            {isTyping() ? <TypingBubble /> : null}
+          </div>
+          <figure class="p-4 z-10">
+            <img
+              ref={image}
+              src={props.url}
+              class={
+                'text-fade-in w-full rounded-md ' +
+                (isTyping() ? 'opacity-0' : 'opacity-100')
+              }
+              style={{
+                'max-height': '512px',
+                height: isTyping() ? '32px' : 'auto',
+              }}
+              alt="Bubble image"
+            />
+          </figure>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/embeds/js/src/features/blocks/bubbles/image/index.ts

@@ -0,0 +1 @@
+export { ImageBubble } from './components/ImageBubble'

packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx

@@ -0,0 +1,74 @@
+import { TypingBubble } from '@/components'
+import type { TextBubbleContent, TypingEmulation } from '@typebot.io/schemas'
+import { createSignal, onCleanup, onMount } from 'solid-js'
+import { computeTypingDuration } from '../utils/computeTypingDuration'
+
+type Props = {
+  content: Pick<TextBubbleContent, 'html' | 'plainText'>
+  typingEmulation: TypingEmulation
+  onTransitionEnd: () => void
+}
+
+export const showAnimationDuration = 400
+
+const defaultTypingEmulation = {
+  enabled: true,
+  speed: 300,
+  maxDelay: 1.5,
+}
+
+let typingTimeout: NodeJS.Timeout
+
+export const TextBubble = (props: Props) => {
+  const [isTyping, setIsTyping] = createSignal(true)
+
+  const onTypingEnd = () => {
+    if (!isTyping()) return
+    setIsTyping(false)
+    setTimeout(() => {
+      props.onTransitionEnd()
+    }, showAnimationDuration)
+  }
+
+  onMount(() => {
+    if (!isTyping) return
+    const typingDuration =
+      props.typingEmulation?.enabled === false
+        ? 0
+        : computeTypingDuration(
+            props.content.plainText,
+            props.typingEmulation ?? defaultTypingEmulation
+          )
+    typingTimeout = setTimeout(onTypingEnd, typingDuration)
+  })
+
+  onCleanup(() => {
+    if (typingTimeout) clearTimeout(typingTimeout)
+  })
+
+  return (
+    <div class="flex flex-col animate-fade-in">
+      <div class="flex mb-2 w-full items-center">
+        <div class={'flex relative items-start typebot-host-bubble'}>
+          <div
+            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
+            style={{
+              width: isTyping() ? '64px' : '100%',
+              height: isTyping() ? '32px' : '100%',
+            }}
+            data-testid="host-bubble"
+          >
+            {isTyping() && <TypingBubble />}
+          </div>
+          <p
+            class={
+              'overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative text-ellipsis ' +
+              (isTyping() ? 'opacity-0 h-6' : 'opacity-100 h-full')
+            }
+            innerHTML={props.content.html}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

packages/embeds/js/src/features/blocks/bubbles/textBubble/index.ts

@@ -0,0 +1 @@
+export { TextBubble } from './components/TextBubble'

packages/embeds/js/src/features/blocks/bubbles/textBubble/utils/computeTypingDuration.ts

@@ -0,0 +1,16 @@
+import type { TypingEmulation } from '@typebot.io/schemas'
+
+export const computeTypingDuration = (
+  bubbleContent: string,
+  typingSettings: TypingEmulation
+) => {
+  let wordCount = bubbleContent.match(/(\w+)/g)?.length ?? 0
+  if (wordCount === 0) wordCount = bubbleContent.length
+  const typedWordsPerMinute = typingSettings.speed
+  let typingTimeout = typingSettings.enabled
+    ? (wordCount / typedWordsPerMinute) * 60000
+    : 0
+  if (typingTimeout > typingSettings.maxDelay * 1000)
+    typingTimeout = typingSettings.maxDelay * 1000
+  return typingTimeout
+}

packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx

@@ -0,0 +1,110 @@
+import { TypingBubble } from '@/components'
+import type { VideoBubbleContent } from '@typebot.io/schemas'
+import { VideoBubbleContentType } from '@typebot.io/schemas/features/blocks/bubbles/video/enums'
+import { createSignal, Match, onCleanup, onMount, Switch } from 'solid-js'
+
+type Props = {
+  content: VideoBubbleContent
+  onTransitionEnd: () => void
+}
+
+export const showAnimationDuration = 400
+
+let typingTimeout: NodeJS.Timeout
+
+export const VideoBubble = (props: Props) => {
+  const [isTyping, setIsTyping] = createSignal(true)
+
+  const onTypingEnd = () => {
+    if (!isTyping()) return
+    setIsTyping(false)
+    setTimeout(() => {
+      props.onTransitionEnd()
+    }, showAnimationDuration)
+  }
+
+  onMount(() => {
+    typingTimeout = setTimeout(onTypingEnd, 2000)
+  })
+
+  onCleanup(() => {
+    if (typingTimeout) clearTimeout(typingTimeout)
+  })
+
+  return (
+    <div class="flex flex-col animate-fade-in">
+      <div class="flex mb-2 w-full items-center">
+        <div class={'flex relative z-10 items-start typebot-host-bubble'}>
+          <div
+            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            style={{
+              width: isTyping() ? '64px' : '100%',
+              height: isTyping() ? '32px' : '100%',
+            }}
+          >
+            {isTyping() && <TypingBubble />}
+          </div>
+          <VideoContent content={props.content} isTyping={isTyping()} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+type VideoContentProps = {
+  content: VideoBubbleContent
+  isTyping: boolean
+}
+
+const VideoContent = (props: VideoContentProps) => {
+  return (
+    <Switch>
+      <Match
+        when={
+          props.content?.type &&
+          props.content.type === VideoBubbleContentType.URL
+        }
+      >
+        <video
+          controls
+          class={
+            'p-4 focus:outline-none w-full z-10 text-fade-in rounded-md ' +
+            (props.isTyping ? 'opacity-0' : 'opacity-100')
+          }
+          style={{
+            height: props.isTyping ? '32px' : 'auto',
+            'max-height': window.navigator.vendor.match(/apple/i) ? '40vh' : '',
+          }}
+          autoplay
+        >
+          <source src={props.content.url} type="video/mp4" />
+          Sorry, your browser doesn&apos;t support embedded videos.
+        </video>
+      </Match>
+      <Match
+        when={
+          props.content?.type &&
+          [
+            VideoBubbleContentType.VIMEO,
+            VideoBubbleContentType.YOUTUBE,
+          ].includes(props.content.type)
+        }
+      >
+        <iframe
+          src={`${
+            props.content.type === VideoBubbleContentType.VIMEO
+              ? 'https://player.vimeo.com/video'
+              : 'https://www.youtube.com/embed'
+          }/${props.content.id}`}
+          class={
+            'w-full p-4 text-fade-in z-10 rounded-md ' +
+            (props.isTyping ? 'opacity-0' : 'opacity-100')
+          }
+          height={props.isTyping ? '32px' : '200px'}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+        />
+      </Match>
+    </Switch>
+  )
+}

packages/embeds/js/src/features/blocks/bubbles/video/index.ts

@@ -0,0 +1 @@
+export { VideoBubble } from './components/VideoBubble'