fix(lib): 🐛 Safari context menu trap

packages/typebot-js/src/embedTypes/chat/iframe.ts

@@ -1,28 +1,33 @@
-import { createIframe } from "../../iframe";
-import { IframeParams } from "../../types";
+import { createIframe } from '../../iframe'
+import { IframeParams } from '../../types'
 
 export const createIframeContainer = (
   params: IframeParams
 ): HTMLIFrameElement => {
-  const iframe = createIframe({ ...params, loadWhenVisible: true });
-  return iframe;
-};
+  const iframe = createIframe({ ...params, loadWhenVisible: true })
+  return iframe
+}
 
 export const openIframe = (
   bubble: HTMLDivElement,
   iframe: HTMLIFrameElement
 ): void => {
-  loadTypebotIfFirstOpen(iframe);
-  bubble.classList.add("iframe-opened");
-  bubble.classList.remove("message-opened");
-};
+  loadTypebotIfFirstOpen(iframe)
+  iframe.style.display = 'flex'
+  setTimeout(() => bubble.classList.add('iframe-opened'), 50)
+  bubble.classList.remove('message-opened')
+}
 
-export const closeIframe = (bubble: HTMLDivElement): void => {
-  bubble.classList.remove("iframe-opened");
-};
+export const closeIframe = (
+  bubble: HTMLDivElement,
+  iframe: HTMLIFrameElement
+): void => {
+  bubble.classList.remove('iframe-opened')
+  setTimeout(() => (iframe.style.display = 'none'), 550)
+}
 
 export const loadTypebotIfFirstOpen = (iframe: HTMLIFrameElement): void => {
-  if (!iframe.dataset.src) return;
-  iframe.src = iframe.dataset.src;
-  iframe.removeAttribute("data-src");
-};
+  if (!iframe.dataset.src) return
+  iframe.src = iframe.dataset.src
+  iframe.removeAttribute('data-src')
+}

packages/typebot-js/src/embedTypes/chat/index.ts

@@ -60,9 +60,11 @@ const createBubble = (
       ? addProactiveMessage(params.proactiveMessage, bubbleElement)
       : undefined
   const iframeElement = createIframeContainer(params)
-  buttonElement.addEventListener('click', () =>
-    onBubbleButtonClick(bubbleElement, iframeElement)
-  )
+  buttonElement.addEventListener('click', () => {
+    iframeElement.style.display === 'none'
+      ? openIframe(bubbleElement, iframeElement)
+      : closeIframe(bubbleElement, iframeElement)
+  })
   if (proactiveMessageElement)
     proactiveMessageElement.addEventListener('click', () =>
       onProactiveMessageClick(bubbleElement, iframeElement)
@@ -71,15 +73,6 @@ const createBubble = (
   return { bubbleElement, proactiveMessageElement, iframeElement }
 }
 
-const onBubbleButtonClick = (
-  bubble: HTMLDivElement,
-  iframe: HTMLIFrameElement
-): void => {
-  loadTypebotIfFirstOpen(iframe)
-  bubble.classList.toggle('iframe-opened')
-  bubble.classList.remove('message-opened')
-}
-
 const onProactiveMessageClick = (
   bubble: HTMLDivElement,
   iframe: HTMLIFrameElement
@@ -115,7 +108,7 @@ export const getBubbleActions = (
       openIframe(existingBubbleElement, existingIframeElement)
     },
     close: () => {
-      closeIframe(existingBubbleElement)
+      closeIframe(existingBubbleElement, existingIframeElement)
     },
   }
 }

packages/typebot-js/src/embedTypes/chat/style.css

@@ -61,7 +61,6 @@
 }
 
 #typebot-bubble > iframe {
-  visibility: hidden;
   opacity: 0;
   display: flex;
   border-radius: 10px;
@@ -83,7 +82,6 @@
 
 #typebot-bubble.iframe-opened > iframe {
   transform: translate(0, 0);
-  visibility: visible;
   opacity: 1;
 }
 

packages/typebot-js/src/iframe/index.ts

@@ -18,6 +18,7 @@ export const createIframe = ({
   iframe.classList.add('typebot-iframe')
   const { onNewVariableValue, onVideoPlayed } = iframeParams
   listenForTypebotMessages({ onNewVariableValue, onVideoPlayed })
+  iframe.style.display = 'none'
   return iframe
 }