diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json index 170b8565b2d..4e6d570a2ee 100644 --- a/packages/embeds/js/package.json +++ b/packages/embeds/js/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/js", - "version": "0.2.17", + "version": "0.2.18", "description": "Javascript library to display typebots on your website", "type": "module", "main": "dist/index.js", diff --git a/packages/embeds/js/src/utils/setCssVariablesValue.ts b/packages/embeds/js/src/utils/setCssVariablesValue.ts index 8e008d1fc24..94d4a727691 100644 --- a/packages/embeds/js/src/utils/setCssVariablesValue.ts +++ b/packages/embeds/js/src/utils/setCssVariablesValue.ts @@ -54,98 +54,104 @@ export const setCssVariablesValue = ( if (!theme) return const documentStyle = container?.style if (!documentStyle) return - if (theme.general) setGeneralTheme(theme.general, documentStyle) - if (theme.chat) setChatTheme(theme.chat, documentStyle) + setGeneralTheme(theme.general ?? defaultTheme.general, documentStyle) + setChatTheme(theme.chat ?? defaultTheme.chat, documentStyle) } const setGeneralTheme = ( generalTheme: GeneralTheme, documentStyle: CSSStyleDeclaration ) => { - const { background, font } = generalTheme - if (background) setTypebotBackground(background, documentStyle) - if (font) documentStyle.setProperty(cssVariableNames.general.fontFamily, font) + setTypebotBackground( + generalTheme.background ?? defaultTheme.general.background, + documentStyle + ) + documentStyle.setProperty( + cssVariableNames.general.fontFamily, + generalTheme.font ?? defaultTheme.general.font + ) } const setChatTheme = ( chatTheme: ChatTheme, documentStyle: CSSStyleDeclaration ) => { - const { hostBubbles, guestBubbles, buttons, inputs, roundness } = chatTheme - if (hostBubbles) setHostBubbles(hostBubbles, documentStyle) - if (guestBubbles) setGuestBubbles(guestBubbles, documentStyle) - if (buttons) setButtons(buttons, documentStyle) - if (inputs) setInputs(inputs, documentStyle) - if (roundness) setRoundness(roundness, documentStyle) + setHostBubbles( + chatTheme.hostBubbles ?? defaultTheme.chat.hostBubbles, + documentStyle + ) + setGuestBubbles( + chatTheme.guestBubbles ?? defaultTheme.chat.guestBubbles, + documentStyle + ) + setButtons(chatTheme.buttons ?? defaultTheme.chat.buttons, documentStyle) + setInputs(chatTheme.inputs ?? defaultTheme.chat.inputs, documentStyle) + setRoundness( + chatTheme.roundness ?? defaultTheme.chat.roundness, + documentStyle + ) } const setHostBubbles = ( hostBubbles: ContainerColors, documentStyle: CSSStyleDeclaration ) => { - if (hostBubbles.backgroundColor) - documentStyle.setProperty( - cssVariableNames.chat.hostBubbles.bgColor, - hostBubbles.backgroundColor - ) - if (hostBubbles.color) - documentStyle.setProperty( - cssVariableNames.chat.hostBubbles.color, - hostBubbles.color - ) + documentStyle.setProperty( + cssVariableNames.chat.hostBubbles.bgColor, + hostBubbles.backgroundColor ?? defaultTheme.chat.hostBubbles.backgroundColor + ) + documentStyle.setProperty( + cssVariableNames.chat.hostBubbles.color, + hostBubbles.color ?? defaultTheme.chat.hostBubbles.color + ) } const setGuestBubbles = ( guestBubbles: ContainerColors, documentStyle: CSSStyleDeclaration ) => { - if (guestBubbles.backgroundColor) - documentStyle.setProperty( - cssVariableNames.chat.guestBubbles.bgColor, - guestBubbles.backgroundColor - ) - if (guestBubbles.color) - documentStyle.setProperty( - cssVariableNames.chat.guestBubbles.color, - guestBubbles.color - ) + documentStyle.setProperty( + cssVariableNames.chat.guestBubbles.bgColor, + guestBubbles.backgroundColor ?? + defaultTheme.chat.guestBubbles.backgroundColor + ) + documentStyle.setProperty( + cssVariableNames.chat.guestBubbles.color, + guestBubbles.color ?? defaultTheme.chat.guestBubbles.color + ) } const setButtons = ( buttons: ContainerColors, documentStyle: CSSStyleDeclaration ) => { - if (buttons.backgroundColor) { - documentStyle.setProperty( - cssVariableNames.chat.buttons.bgColor, - buttons.backgroundColor - ) - documentStyle.setProperty( - cssVariableNames.chat.buttons.bgColorRgb, - hexToRgb(buttons.backgroundColor).join(', ') - ) - } + const bgColor = + buttons.backgroundColor ?? defaultTheme.chat.buttons.backgroundColor + documentStyle.setProperty(cssVariableNames.chat.buttons.bgColor, bgColor) + documentStyle.setProperty( + cssVariableNames.chat.buttons.bgColorRgb, + hexToRgb(bgColor).join(', ') + ) - if (buttons.color) - documentStyle.setProperty( - cssVariableNames.chat.buttons.color, - buttons.color - ) + documentStyle.setProperty( + cssVariableNames.chat.buttons.color, + buttons.color ?? defaultTheme.chat.buttons.color + ) } const setInputs = (inputs: InputColors, documentStyle: CSSStyleDeclaration) => { - if (inputs.backgroundColor) - documentStyle.setProperty( - cssVariableNames.chat.inputs.bgColor, - inputs.backgroundColor - ) - if (inputs.color) - documentStyle.setProperty(cssVariableNames.chat.inputs.color, inputs.color) - if (inputs.placeholderColor) - documentStyle.setProperty( - cssVariableNames.chat.inputs.placeholderColor, - inputs.placeholderColor - ) + documentStyle.setProperty( + cssVariableNames.chat.inputs.bgColor, + inputs.backgroundColor ?? defaultTheme.chat.inputs.backgroundColor + ) + documentStyle.setProperty( + cssVariableNames.chat.inputs.color, + inputs.color ?? defaultTheme.chat.inputs.color + ) + documentStyle.setProperty( + cssVariableNames.chat.inputs.placeholderColor, + inputs.placeholderColor ?? defaultTheme.chat.inputs.placeholderColor + ) } const setTypebotBackground = ( diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json index a061ac05a29..5392c234327 100644 --- a/packages/embeds/nextjs/package.json +++ b/packages/embeds/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/nextjs", - "version": "0.2.17", + "version": "0.2.18", "description": "Convenient library to display typebots on your Next.js website", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json index 4447cf8b92d..99fd1fa2eb1 100644 --- a/packages/embeds/react/package.json +++ b/packages/embeds/react/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/react", - "version": "0.2.17", + "version": "0.2.18", "description": "Convenient library to display typebots on your React app", "main": "dist/index.js", "types": "dist/index.d.ts",