From 4d98de2c7014e3c9d8e22b1050ccd0cd36753ebe Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 28 Apr 2022 12:41:28 -0700
Subject: [PATCH] =?UTF-8?q?fix(engine):=20=F0=9F=90=9B=20Embed=20bubble=20?=
 =?UTF-8?q?variable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatBlock/ChatStep/bubbles/EmbedBubble.tsx       | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/EmbedBubble.tsx b/packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/EmbedBubble.tsx
index 10e08e51c9..3531290705 100644
--- a/packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/EmbedBubble.tsx
+++ b/packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/EmbedBubble.tsx
@@ -1,6 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { EmbedBubbleStep } from 'models'
 import { TypingContent } from './TypingContent'
+import { parseVariables } from 'services/variable'
+import { useTypebot } from 'contexts/TypebotContext'
 
 type Props = {
   step: EmbedBubbleStep
@@ -10,9 +12,15 @@ type Props = {
 export const showAnimationDuration = 400
 
 export const EmbedBubble = ({ step, onTransitionEnd }: Props) => {
+  const { typebot } = useTypebot()
   const messageContainer = useRef<HTMLDivElement | null>(null)
   const [isTyping, setIsTyping] = useState(true)
 
+  const url = useMemo(
+    () => parseVariables(typebot.variables)(step.content?.url),
+    [step.content?.url, typebot.variables]
+  )
+
   useEffect(() => {
     showContentAfterMediaLoad()
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -51,7 +59,7 @@ export const EmbedBubble = ({ step, onTransitionEnd }: Props) => {
           </div>
           <iframe
             id="embed-bubble-content"
-            src={step.content.url}
+            src={url}
             className={
               'w-full z-20 p-4 content-opacity ' +
               (isTyping ? 'opacity-0' : 'opacity-100')