💄 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>
   )
 }

packages/bot-engine/blocks/integrations/sendEmail/executeSendEmailBlock.tsx

@@ -13,7 +13,7 @@ import Mail from 'nodemailer/lib/mailer'
 import { byId, isDefined, isEmpty, isNotDefined, omit } from '@typebot.io/lib'
 import { decrypt } from '@typebot.io/lib/api/encryption/decrypt'
 import { defaultFrom, defaultTransportOptions } from './constants'
-import { findUniqueVariableValue } from '@typebot.io/variables/findUniqueVariableValue'
+import { findUniqueVariable } from '@typebot.io/variables/findUniqueVariableValue'
 import { env } from '@typebot.io/env'
 import { ExecuteIntegrationResponse } from '../../../types'
 import prisma from '@typebot.io/lib/prisma'
@@ -43,9 +43,9 @@ export const executeSendEmailBlock = async (
       ],
     }
 
-  const bodyUniqueVariable = findUniqueVariableValue(typebot.variables)(
+  const bodyUniqueVariable = findUniqueVariable(typebot.variables)(
     options?.body
-  )
+  )?.value
   const body = bodyUniqueVariable
     ? stringifyUniqueVariableValueAsHtml(bodyUniqueVariable)
     : parseVariables(typebot.variables, { isInsideHtml: !options?.isBodyCode })(

packages/logic/executeCondition.ts

@@ -1,6 +1,6 @@
 import { isNotDefined, isDefined } from '@typebot.io/lib'
 import { Comparison, Condition, Variable } from '@typebot.io/schemas'
-import { findUniqueVariableValue } from '@typebot.io/variables/findUniqueVariableValue'
+import { findUniqueVariable } from '@typebot.io/variables/findUniqueVariableValue'
 import { parseVariables } from '@typebot.io/variables/parseVariables'
 import {
   LogicalOperator,
@@ -30,7 +30,7 @@ const executeComparison =
     const value =
       comparison.value === 'undefined' || comparison.value === 'null'
         ? null
-        : findUniqueVariableValue(variables)(comparison.value) ??
+        : findUniqueVariable(variables)(comparison.value)?.value ??
           parseVariables(variables)(comparison.value)
     if (isNotDefined(comparison.comparisonOperator)) return false
     switch (comparison.comparisonOperator) {

packages/variables/findUniqueVariableValue.ts

@@ -1,12 +1,12 @@
 import { Variable } from './types'
 
-export const findUniqueVariableValue =
+export const findUniqueVariable =
   (variables: Variable[]) =>
-  (value: string | undefined): Variable['value'] => {
+  (value: string | undefined): Variable | null => {
     if (!value || !value.startsWith('{{') || !value.endsWith('}}')) return null
     const variableName = value.slice(2, -2)
     const variable = variables.find(
       (variable) => variable.name === variableName
     )
-    return variable?.value ?? null
+    return variable ?? null
   }