CodeCow/typebot.io
1
0
Fork 0
mirror of https://github.com/baptisteArno/typebot.io.git synced 2026-06-22 21:06:40 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

🐛 Fix invalid chat window background URL in default Bubble theme

Browse Source 
Closes #2264
This commit is contained in:
Baptiste Arnaud 2025-08-18 11:04:06 +02:00
parent f97c9780d2
commit 5a4787be44
No known key found for this signature in database
11 changed files with 46 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/builder/src/features/publish/components/embeds/modals/FramerModal/instructions/FramerBubbleInstructions.tsx
View File

@ -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<BubbleProps["theme"]>(
parseDefaultBubbleTheme(typebot),
getInitialBubbleTheme(typebot),
);
const [previewMessage, setPreviewMessage] =
useState<BubbleProps["previewMessage"]>();

4
apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx
View File

@ -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<BubbleProps["theme"]>(
parseDefaultBubbleTheme(typebot),
getInitialBubbleTheme(typebot),
);
const [previewMessage, setPreviewMessage] =
useState<BubbleProps["previewMessage"]>();

7
apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx
View File

@ -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,
})}</script>`,
{

33
apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx
View File

@ -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<BubbleProps["theme"]>(
parseDefaultBubbleTheme(typebot),
getInitialBubbleTheme(typebot),
);
const [previewMessage, setPreviewMessage] =
useState<BubbleProps["previewMessage"]>();

4
apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx
View File

@ -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<BubbleProps["theme"]>(
parseDefaultBubbleTheme(typebot),
getInitialBubbleTheme(typebot),
);
const [previewMessage, setPreviewMessage] =
useState<BubbleProps["previewMessage"]>();

4
apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx
View File

@ -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<BubbleProps["theme"]>(
parseDefaultBubbleTheme(typebot),
getInitialBubbleTheme(typebot),
);
const [previewMessage, setPreviewMessage] =
useState<BubbleProps["previewMessage"]>();

4
apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx
View File

@ -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<BubbleProps["theme"]>(
parseDefaultBubbleTheme(typebot),
getInitialBubbleTheme(typebot),
);
const [previewMessage, setPreviewMessage] =
useState<BubbleProps["previewMessage"]>();

4
apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx
View File

@ -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<BubbleProps["theme"]>(
parseDefaultBubbleTheme(typebot),
getInitialBubbleTheme(typebot),
);
const [previewMessage, setPreviewMessage] =
useState<BubbleProps["previewMessage"]>();

4
apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx
View File

@ -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<BubbleProps["theme"]>(
parseDefaultBubbleTheme(typebot),
getInitialBubbleTheme(typebot),
);
const [previewMessage, setPreviewMessage] =
useState<BubbleProps["previewMessage"]>();

4
apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx
View File

@ -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<BubbleProps["theme"]>(
parseDefaultBubbleTheme(typebot),
getInitialBubbleTheme(typebot),
);
const [previewMessage, setPreviewMessage] =
useState<BubbleProps["previewMessage"]>();

11
apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx
View File

@ -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<BubbleProps["theme"]>(
parseDefaultBubbleTheme(typebot),
getInitialBubbleTheme(typebot),
);
const [previewMessage, setPreviewMessage] =
useState<BubbleProps["previewMessage"]>();
@ -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,
});