fix(engine): 📦️ Compatible with iPhone 6

apps/viewer/layouts/TypebotPage.tsx

@@ -7,12 +7,12 @@ import { isDefined } from 'utils'
 import { SEO } from '../components/Seo'
 import { createResult, updateResult } from '../services/result'
 import { ErrorPage } from './ErrorPage'
-import sanitizeHtml from 'sanitize-html'
 
 export type TypebotPageProps = {
   typebot?: PublicTypebot
   url: string
   isIE: boolean
+  customHeadCode: string | null
 }
 
 const sessionStorageKey = 'resultId'
@@ -21,6 +21,7 @@ export const TypebotPage = ({
   typebot,
   isIE,
   url,
+  customHeadCode,
 }: TypebotPageProps & { typebot: PublicTypebot }) => {
   const { asPath, push } = useRouter()
   const [showTypebot, setShowTypebot] = useState(false)
@@ -41,13 +42,8 @@ export const TypebotPage = ({
     })
     setPredefinedVariables(predefinedVariables)
     initializeResult().then()
-    const { customHeadCode } = typebot.settings.metadata
+    if (isDefined(customHeadCode))
-    if (isDefined(customHeadCode) && customHeadCode !== '')
+      document.head.innerHTML = document.head.innerHTML + customHeadCode
-      document.head.innerHTML =
-        document.head.innerHTML +
-        sanitizeHtml(customHeadCode ?? '', {
-          allowedTags: ['script', 'meta'],
-        })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

apps/viewer/pages/[[...publicId]].tsx

@@ -2,6 +2,7 @@ import { IncomingMessage } from 'http'
 import { NotFoundPage } from 'layouts/NotFoundPage'
 import { PublicTypebot } from 'models'
 import { GetServerSideProps, GetServerSidePropsContext } from 'next'
+import sanitizeHtml from 'sanitize-html'
 import { isDefined, isNotDefined, omit } from 'utils'
 import { TypebotPage, TypebotPageProps } from '../layouts/TypebotPage'
 import prisma from '../libs/prisma'
@@ -36,11 +37,16 @@ export const getServerSideProps: GetServerSideProps = async (
           ? `Couldn't find publicId: ${context.query.publicId?.toString()}`
           : `Couldn't find customDomain: ${customDomain}`
       )
+    const headCode = typebot?.settings.metadata.customHeadCode
     return {
       props: {
         typebot,
         isIE,
         url: `https://${forwardedHost ?? host}${pathname}`,
+        customHeadCode:
+          isDefined(headCode) && headCode !== ''
+            ? sanitizeHtml(headCode, { allowedTags: ['script', 'meta'] })
+            : null,
       },
     }
   } catch (err) {

packages/bot-engine/package.json

@@ -14,6 +14,7 @@
     "react-phone-number-input": "^3.1.52",
     "react-scroll": "^1.8.7",
     "react-transition-group": "^4.4.2",
+    "resize-observer": "^1.0.4",
     "utils": "*"
   },
   "devDependencies": {

packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx

@@ -9,6 +9,7 @@ import React, {
 import { Avatar } from '../avatars/Avatar'
 import { useFrame } from 'react-frame-component'
 import { CSSTransition } from 'react-transition-group'
+import { ResizeObserver } from 'resize-observer'
 
 type Props = { hostAvatarSrc?: string; keepShowing: boolean }
 

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TextBubble.tsx

@@ -48,9 +48,9 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
   return (
     <div className="flex flex-col" ref={messageContainer}>
       <div className="flex mb-2 w-full items-center">
-        <div className={'flex relative z-10 items-start typebot-host-bubble'}>
+        <div className={'flex relative items-start typebot-host-bubble'}>
           <div
-            className="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            className="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
             style={{
               width: isTyping ? '4rem' : '100%',
               height: isTyping ? '2rem' : '100%',
@@ -65,7 +65,7 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
                 textOverflow: 'ellipsis',
               }}
               className={
-                'overflow-hidden content-opacity z-50 mx-4 my-2 whitespace-pre-wrap slate-html-container ' +
+                'overflow-hidden content-opacity mx-4 my-2 whitespace-pre-wrap slate-html-container relative ' +
                 (isTyping ? 'opacity-0 h-6' : 'opacity-100 h-full')
               }
               dangerouslySetInnerHTML={{

yarn.lock

@@ -12929,6 +12929,11 @@ resize-observer-polyfill@^1.5.1:
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
+resize-observer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/resize-observer/-/resize-observer-1.0.4.tgz#48beb64602ce408ebd1a433784d64ef76f38d321"
+  integrity sha512-AQ2MdkWTng9d6JtjHvljiQR949qdae91pjSNugGGeOFzKIuLHvoZIYhUTjePla5hCFDwQHrnkciAIzjzdsTZew==
+
 resolve-alpn@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"