⚡ (embedBubble) Enable variable embed height

packages/bot-engine/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx

@@ -36,6 +36,12 @@ export const EmbedBubble = ({ block, onTransitionEnd }: Props) => {
     }
   }, [isLoading, isTyping, onTypingEnd])
 
+  const height = block.content.height
+    ? typeof block.content.height === 'string'
+      ? parseVariables(typebot.variables)(block.content.height) + 'px'
+      : block.content.height
+    : '2rem'
+
   return (
     <div className="flex flex-col w-full" ref={messageContainer}>
       <div className="flex mb-2 w-full lg:w-11/12 items-center">
@@ -61,7 +67,7 @@ export const EmbedBubble = ({ block, onTransitionEnd }: Props) => {
               (isTyping ? 'opacity-0' : 'opacity-100')
             }
             style={{
-              height: isTyping ? '2rem' : block.content.height,
+              height: isTyping ? '2rem' : height,
               borderRadius: '15px',
             }}
           />

packages/models/features/blocks/bubbles/embed.ts

@@ -1,10 +1,11 @@
 import { z } from 'zod'
+import { variableStringSchema } from '../../utils'
 import { blockBaseSchema } from '../baseSchemas'
 import { BubbleBlockType } from './enums'
 
 export const embedBubbleContentSchema = z.object({
   url: z.string().optional(),
-  height: z.number(),
+  height: z.number().or(variableStringSchema),
 })
 
 export const embedBubbleBlockSchema = blockBaseSchema.and(

packages/models/features/chat.ts

@@ -84,7 +84,11 @@ const audioMessageSchema = z.object({
 
 const embedMessageSchema = z.object({
   type: z.enum([BubbleBlockType.EMBED]),
-  content: embedBubbleContentSchema,
+  content: embedBubbleContentSchema
+    .omit({
+      height: true,
+    })
+    .and(z.object({ height: z.number().optional() })),
 })
 
 const chatMessageSchema = z

packages/models/features/utils.ts

@@ -7,3 +7,9 @@ export const schemaForType =
   <S extends z.ZodType<T, any, any>>(arg: S) => {
     return arg
   }
+
+export const variableStringSchema = z.custom<`{{${string}}}`>((val) =>
+  /^{{.+}}$/g.test(val as string)
+)
+
+export type VariableString = z.infer<typeof variableStringSchema>