diff --git a/apps/viewer/layouts/TypebotPage.tsx b/apps/viewer/layouts/TypebotPage.tsx index e496693c7..9ecaca0a0 100644 --- a/apps/viewer/layouts/TypebotPage.tsx +++ b/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) && customHeadCode !== '') - document.head.innerHTML = - document.head.innerHTML + - sanitizeHtml(customHeadCode ?? '', { - allowedTags: ['script', 'meta'], - }) + if (isDefined(customHeadCode)) + document.head.innerHTML = document.head.innerHTML + customHeadCode // eslint-disable-next-line react-hooks/exhaustive-deps }, []) diff --git a/apps/viewer/pages/[[...publicId]].tsx b/apps/viewer/pages/[[...publicId]].tsx index baf6890c5..3ce15a1af 100644 --- a/apps/viewer/pages/[[...publicId]].tsx +++ b/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) { diff --git a/packages/bot-engine/package.json b/packages/bot-engine/package.json index dce84a33d..6c9b3c649 100644 --- a/packages/bot-engine/package.json +++ b/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": { diff --git a/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx b/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx index 700bc5467..da26774d7 100644 --- a/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx +++ b/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 } diff --git a/packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TextBubble.tsx b/packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TextBubble.tsx index 305d1dc3c..401e2d0d2 100644 --- a/packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TextBubble.tsx +++ b/packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TextBubble.tsx @@ -48,9 +48,9 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => { return (
-
+
{ 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={{ diff --git a/yarn.lock b/yarn.lock index eb04bc46d..b35f84e23 100644 --- a/yarn.lock +++ b/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"