💄 Fix audio element UI overflow on Firefox

Also added better display when a media bubble src is a variable

Closes #1742

apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleNode.tsx

@@ -1,16 +1,27 @@
-import { Text } from '@chakra-ui/react'
+import { chakra, Text } from '@chakra-ui/react'
 import { isDefined } from '@typebot.io/lib'
 import { useTranslate } from '@tolgee/react'
 import { AudioBubbleBlock } from '@typebot.io/schemas'
+import { findUniqueVariable } from '@typebot.io/variables/findUniqueVariableValue'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { VariableTag } from '@/features/graph/components/nodes/block/VariableTag'
 
 type Props = {
   url: NonNullable<AudioBubbleBlock['content']>['url']
 }
 
 export const AudioBubbleNode = ({ url }: Props) => {
+  const { typebot } = useTypebot()
   const { t } = useTranslate()
+  const variable = typebot ? findUniqueVariable(typebot?.variables)(url) : null
   return isDefined(url) ? (
-    <audio src={url} controls />
+    variable ? (
+      <Text>
+        Play <VariableTag variableName={variable.name} />
+      </Text>
+    ) : (
+      <chakra.audio src={url} controls maxW="calc(100% - 25px)" rounded="md" />
+    )
   ) : (
     <Text color={'gray.500'}>{t('clickToEdit')}</Text>
   )

apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleContent.tsx

@@ -1,24 +1,31 @@
 import { useTranslate } from '@tolgee/react'
 import { Box, Text, Image } from '@chakra-ui/react'
 import { ImageBubbleBlock } from '@typebot.io/schemas'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { findUniqueVariable } from '@typebot.io/variables/findUniqueVariableValue'
+import { VariableTag } from '@/features/graph/components/nodes/block/VariableTag'
 
 type Props = {
   block: ImageBubbleBlock
 }
 
 export const ImageBubbleContent = ({ block }: Props) => {
+  const { typebot } = useTypebot()
   const { t } = useTranslate()
-  const containsVariables =
-    block.content?.url?.includes('{{') && block.content.url.includes('}}')
+  const variable = typebot
+    ? findUniqueVariable(typebot?.variables)(block.content?.url)
+    : null
   return !block.content?.url ? (
     <Text color={'gray.500'}>{t('clickToEdit')}</Text>
+  ) : variable ? (
+    <Text>
+      Display <VariableTag variableName={variable.name} />
+    </Text>
   ) : (
     <Box w="full">
       <Image
         pointerEvents="none"
-        src={
-          containsVariables ? '/images/dynamic-image.png' : block.content?.url
-        }
+        src={block.content?.url}
         alt="Group image"
         rounded="md"
         objectFit="cover"

apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx

@@ -1,31 +1,34 @@
 import { useTranslate } from '@tolgee/react'
-import { Box, Text, Image } from '@chakra-ui/react'
+import { Box, Text } from '@chakra-ui/react'
 import { VideoBubbleBlock } from '@typebot.io/schemas'
 import {
   VideoBubbleContentType,
   embedBaseUrls,
 } from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
+import { VariableTag } from '@/features/graph/components/nodes/block/VariableTag'
+import { findUniqueVariable } from '@typebot.io/variables/findUniqueVariableValue'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 
 type Props = {
   block: VideoBubbleBlock
 }
 
 export const VideoBubbleContent = ({ block }: Props) => {
+  const { typebot } = useTypebot()
   const { t } = useTranslate()
   if (!block.content?.url || !block.content.type)
     return <Text color="gray.500">{t('clickToEdit')}</Text>
-  const containsVariables =
-    block.content?.url?.includes('{{') && block.content.url.includes('}}')
+  const variable = typebot
+    ? findUniqueVariable(typebot?.variables)(block.content?.url)
+    : null
   switch (block.content.type) {
     case VideoBubbleContentType.URL:
       return (
-        <Box w="full" h="120px" pos="relative">
-          {containsVariables ? (
-            <Image
-              src="/images/dynamic-image.png"
-              alt="Dynamic video thumbnail"
-              rounded="md"
-            />
+        <Box w="full" h={variable ? undefined : ' 120px'} pos="relative">
+          {variable ? (
+            <Text>
+              Display <VariableTag variableName={variable.name} />
+            </Text>
           ) : (
             <video
               key={block.content.url}

apps/builder/src/features/graph/components/nodes/block/VariableTag.tsx

@@ -0,0 +1,11 @@
+import { chakra } from '@chakra-ui/react'
+
+type Props = {
+  variableName: string
+}
+
+export const VariableTag = ({ variableName }: Props) => (
+  <chakra.span bgColor="orange.400" color="white" rounded="md" py="0.5" px="1">
+    {variableName}
+  </chakra.span>
+)

apps/builder/src/features/graph/components/nodes/block/WithVariableContent.tsx

@@ -1,7 +1,8 @@
-import { chakra, Text, TextProps } from '@chakra-ui/react'
+import { Text, TextProps } from '@chakra-ui/react'
 import React from 'react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { byId } from '@typebot.io/lib'
+import { VariableTag } from './VariableTag'
 
 type Props = {
   variableId: string
@@ -13,16 +14,7 @@ export const WithVariableContent = ({ variableId, ...props }: Props) => {
 
   return (
     <Text w="calc(100% - 25px)" {...props}>
-      Collect{' '}
-      <chakra.span
-        bgColor="orange.400"
-        color="white"
-        rounded="md"
-        py="0.5"
-        px="1"
-      >
-        {variableName}
-      </chakra.span>
+      Collect <VariableTag variableName={variableName ?? ''} />
     </Text>
   )
 }