From 5a4787be44bc0c301587d104f6237c3a8687f6e8 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Mon, 18 Aug 2025 11:04:06 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20invalid=20chat=20window=20?= =?UTF-8?q?background=20URL=20in=20default=20Bubble=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #2264 --- .../instructions/FramerBubbleInstructions.tsx | 4 +-- .../instructions/GtmBubbleInstructions.tsx | 4 +-- .../Javascript/JavascriptBubbleSnippet.tsx | 7 +--- .../JavascriptBubbleInstructions.tsx | 33 +++++++++++++++---- .../instructions/NextjsBubbleInstructions.tsx | 4 +-- .../instructions/ReactBubbleInstructions.tsx | 4 +-- .../instructions/ScriptBubbleInstructions.tsx | 4 +-- .../ShopifyBubbleInstructions.tsx | 4 +-- .../WebflowBubbleInstructions.tsx | 4 +-- .../instructions/WixBubbleInstructions.tsx | 4 +-- .../WordpressBubbleInstructions.tsx | 11 ++----- 11 files changed, 46 insertions(+), 37 deletions(-) diff --git a/apps/builder/src/features/publish/components/embeds/modals/FramerModal/instructions/FramerBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/FramerModal/instructions/FramerBubbleInstructions.tsx index 26b83133a..dc918dc3b 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/FramerModal/instructions/FramerBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/FramerModal/instructions/FramerBubbleInstructions.tsx @@ -5,13 +5,13 @@ import type { BubbleProps } from "@typebot.io/js"; import { useState } from "react"; import { BubbleSettings } from "../../../settings/BubbleSettings/BubbleSettings"; import { JavascriptBubbleSnippet } from "../../Javascript/JavascriptBubbleSnippet"; -import { parseDefaultBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; +import { getInitialBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; export const FramerBubbleInstructions = () => { const { typebot } = useTypebot(); const [theme, setTheme] = useState( - parseDefaultBubbleTheme(typebot), + getInitialBubbleTheme(typebot), ); const [previewMessage, setPreviewMessage] = useState(); diff --git a/apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx index b71bf9aab..31244dd71 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx @@ -4,12 +4,12 @@ import type { BubbleProps } from "@typebot.io/js"; import { useState } from "react"; import { BubbleSettings } from "../../../settings/BubbleSettings/BubbleSettings"; import { JavascriptBubbleSnippet } from "../../Javascript/JavascriptBubbleSnippet"; -import { parseDefaultBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; +import { getInitialBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; export const GtmBubbleInstructions = () => { const { typebot } = useTypebot(); const [theme, setTheme] = useState( - parseDefaultBubbleTheme(typebot), + getInitialBubbleTheme(typebot), ); const [previewMessage, setPreviewMessage] = useState(); diff --git a/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx index 74bbea965..40a6f9b9c 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx @@ -17,12 +17,7 @@ export const JavascriptBubbleSnippet = ({ theme, previewMessage }: Props) => { ${parseInitBubbleCode({ typebot: typebot?.publicId ?? "", customDomain: typebot?.customDomain, - theme: { - ...theme, - chatWindow: { - backgroundColor: typebot?.theme.general?.background?.content ?? "#fff", - }, - }, + theme, previewMessage, })}`, { diff --git a/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx index a9e9faedd..af2da0bcb 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx @@ -1,23 +1,42 @@ import { useTypebot } from "@/features/editor/providers/TypebotProvider"; import { Code, Stack, Text } from "@chakra-ui/react"; import type { BubbleProps } from "@typebot.io/js"; +import { + BackgroundType, + defaultBackgroundColor, + defaultBackgroundType, +} from "@typebot.io/theme/constants"; import type { Typebot } from "@typebot.io/typebot/schemas/typebot"; import { colors } from "@typebot.io/ui/colors"; import { useState } from "react"; import { BubbleSettings } from "../../../settings/BubbleSettings/BubbleSettings"; import { JavascriptBubbleSnippet } from "../JavascriptBubbleSnippet"; -export const parseDefaultBubbleTheme = (typebot?: Typebot) => ({ - button: { - backgroundColor: - typebot?.theme.chat?.buttons?.backgroundColor ?? colors.gray.dark["2"], - }, -}); +export const getInitialBubbleTheme = ( + typebot?: Typebot, +): BubbleProps["theme"] => { + return { + chatWindow: { + backgroundColor: + (typebot?.theme.general?.background?.type ?? defaultBackgroundType) === + BackgroundType.COLOR + ? (typebot?.theme.general?.background?.content ?? + defaultBackgroundColor[ + (typebot?.version ?? "6.1") as keyof typeof defaultBackgroundColor + ]) + : undefined, + }, + button: { + backgroundColor: + typebot?.theme.chat?.buttons?.backgroundColor ?? colors.gray.dark["2"], + }, + }; +}; export const JavascriptBubbleInstructions = () => { const { typebot } = useTypebot(); const [theme, setTheme] = useState( - parseDefaultBubbleTheme(typebot), + getInitialBubbleTheme(typebot), ); const [previewMessage, setPreviewMessage] = useState(); diff --git a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx index 7bdc19031..57d22d26a 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx @@ -3,14 +3,14 @@ import { ListItem, OrderedList, Stack, Text } from "@chakra-ui/react"; import type { BubbleProps } from "@typebot.io/js"; import { useState } from "react"; import { BubbleSettings } from "../../../settings/BubbleSettings/BubbleSettings"; -import { parseDefaultBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; +import { getInitialBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; import { InstallNextjsPackageSnippet } from "../InstallNextjsPackageSnippet"; import { NextjsBubbleSnippet } from "../NextjsBubbleSnippet"; export const NextjsBubbleInstructions = () => { const { typebot } = useTypebot(); const [theme, setTheme] = useState( - parseDefaultBubbleTheme(typebot), + getInitialBubbleTheme(typebot), ); const [previewMessage, setPreviewMessage] = useState(); diff --git a/apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx index 4acb9bcf9..769373d00 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx @@ -3,14 +3,14 @@ import { ListItem, OrderedList, Stack, Text } from "@chakra-ui/react"; import type { BubbleProps } from "@typebot.io/js"; import { useState } from "react"; import { BubbleSettings } from "../../../settings/BubbleSettings/BubbleSettings"; -import { parseDefaultBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; +import { getInitialBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; import { InstallReactPackageSnippet } from "../InstallReactPackageSnippet"; import { ReactBubbleSnippet } from "../ReactBubbleSnippet"; export const ReactBubbleInstructions = () => { const { typebot } = useTypebot(); const [theme, setTheme] = useState( - parseDefaultBubbleTheme(typebot), + getInitialBubbleTheme(typebot), ); const [previewMessage, setPreviewMessage] = useState(); diff --git a/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx index 56f59750e..bd8aa1bef 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx @@ -9,12 +9,12 @@ import { parseInlineScript, typebotImportCode, } from "../../../snippetParsers/shared"; -import { parseDefaultBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; +import { getInitialBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; export const ScriptBubbleInstructions = () => { const { typebot } = useTypebot(); const [theme, setTheme] = useState( - parseDefaultBubbleTheme(typebot), + getInitialBubbleTheme(typebot), ); const [previewMessage, setPreviewMessage] = useState(); diff --git a/apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx index f8cb4f75c..12ded66db 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx @@ -4,13 +4,13 @@ import type { BubbleProps } from "@typebot.io/js"; import { useState } from "react"; import { BubbleSettings } from "../../../settings/BubbleSettings/BubbleSettings"; import { JavascriptBubbleSnippet } from "../../Javascript/JavascriptBubbleSnippet"; -import { parseDefaultBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; +import { getInitialBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; export const ShopifyBubbleInstructions = () => { const { typebot } = useTypebot(); const [theme, setTheme] = useState( - parseDefaultBubbleTheme(typebot), + getInitialBubbleTheme(typebot), ); const [previewMessage, setPreviewMessage] = useState(); diff --git a/apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx index 986732674..777b1ff35 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx @@ -4,13 +4,13 @@ import type { BubbleProps } from "@typebot.io/js"; import { useState } from "react"; import { BubbleSettings } from "../../../settings/BubbleSettings/BubbleSettings"; import { JavascriptBubbleSnippet } from "../../Javascript/JavascriptBubbleSnippet"; -import { parseDefaultBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; +import { getInitialBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; export const WebflowBubbleInstructions = () => { const { typebot } = useTypebot(); const [theme, setTheme] = useState( - parseDefaultBubbleTheme(typebot), + getInitialBubbleTheme(typebot), ); const [previewMessage, setPreviewMessage] = useState(); diff --git a/apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx index fe3d50e29..cd49037b5 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx @@ -4,13 +4,13 @@ import type { BubbleProps } from "@typebot.io/js"; import { useState } from "react"; import { BubbleSettings } from "../../../settings/BubbleSettings/BubbleSettings"; import { JavascriptBubbleSnippet } from "../../Javascript/JavascriptBubbleSnippet"; -import { parseDefaultBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; +import { getInitialBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; export const WixBubbleInstructions = () => { const { typebot } = useTypebot(); const [theme, setTheme] = useState( - parseDefaultBubbleTheme(typebot), + getInitialBubbleTheme(typebot), ); const [previewMessage, setPreviewMessage] = useState(); diff --git a/apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx index b77b72676..4fa143a7a 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx @@ -16,7 +16,7 @@ import { useState } from "react"; import packageJson from "../../../../../../../../../../packages/embeds/js/package.json"; import { BubbleSettings } from "../../../settings/BubbleSettings/BubbleSettings"; import { parseInitBubbleCode } from "../../../snippetParsers/bubble"; -import { parseDefaultBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; +import { getInitialBubbleTheme } from "../../Javascript/instructions/JavascriptBubbleInstructions"; import { typebotCloudLibraryVersion } from "./constants"; type Props = { @@ -26,7 +26,7 @@ export const WordpressBubbleInstructions = ({ publicId }: Props) => { const { typebot } = useTypebot(); const [theme, setTheme] = useState( - parseDefaultBubbleTheme(typebot), + getInitialBubbleTheme(typebot), ); const [previewMessage, setPreviewMessage] = useState(); @@ -34,12 +34,7 @@ export const WordpressBubbleInstructions = ({ publicId }: Props) => { const initCode = parseInitBubbleCode({ typebot: publicId, customDomain: typebot?.customDomain, - theme: { - ...theme, - chatWindow: { - backgroundColor: typebot?.theme.general?.background?.content ?? "#fff", - }, - }, + theme, previewMessage, });