🐛 (js) Fix default theme values css variables

Closes #1031

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",

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)
+  setGeneralTheme(theme.general ?? defaultTheme.general, documentStyle)
-  if (theme.chat) setChatTheme(theme.chat, documentStyle)
+  setChatTheme(theme.chat ?? defaultTheme.chat, documentStyle)
 }
 
 const setGeneralTheme = (
   generalTheme: GeneralTheme,
   documentStyle: CSSStyleDeclaration
 ) => {
-  const { background, font } = generalTheme
+  setTypebotBackground(
-  if (background) setTypebotBackground(background, documentStyle)
+    generalTheme.background ?? defaultTheme.general.background,
-  if (font) documentStyle.setProperty(cssVariableNames.general.fontFamily, font)
+    documentStyle
+  )
+  documentStyle.setProperty(
+    cssVariableNames.general.fontFamily,
+    generalTheme.font ?? defaultTheme.general.font
+  )
 }
 
 const setChatTheme = (
   chatTheme: ChatTheme,
   documentStyle: CSSStyleDeclaration
 ) => {
-  const { hostBubbles, guestBubbles, buttons, inputs, roundness } = chatTheme
+  setHostBubbles(
-  if (hostBubbles) setHostBubbles(hostBubbles, documentStyle)
+    chatTheme.hostBubbles ?? defaultTheme.chat.hostBubbles,
-  if (guestBubbles) setGuestBubbles(guestBubbles, documentStyle)
+    documentStyle
-  if (buttons) setButtons(buttons, documentStyle)
+  )
-  if (inputs) setInputs(inputs, documentStyle)
+  setGuestBubbles(
-  if (roundness) setRoundness(roundness, documentStyle)
+    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(
-    documentStyle.setProperty(
+    cssVariableNames.chat.hostBubbles.bgColor,
-      cssVariableNames.chat.hostBubbles.bgColor,
+    hostBubbles.backgroundColor ?? defaultTheme.chat.hostBubbles.backgroundColor
-      hostBubbles.backgroundColor
+  )
-    )
+  documentStyle.setProperty(
-  if (hostBubbles.color)
+    cssVariableNames.chat.hostBubbles.color,
-    documentStyle.setProperty(
+    hostBubbles.color ?? defaultTheme.chat.hostBubbles.color
-      cssVariableNames.chat.hostBubbles.color,
+  )
-      hostBubbles.color
-    )
 }
 
 const setGuestBubbles = (
   guestBubbles: ContainerColors,
   documentStyle: CSSStyleDeclaration
 ) => {
-  if (guestBubbles.backgroundColor)
+  documentStyle.setProperty(
-    documentStyle.setProperty(
+    cssVariableNames.chat.guestBubbles.bgColor,
-      cssVariableNames.chat.guestBubbles.bgColor,
+    guestBubbles.backgroundColor ??
-      guestBubbles.backgroundColor
+      defaultTheme.chat.guestBubbles.backgroundColor
-    )
+  )
-  if (guestBubbles.color)
+  documentStyle.setProperty(
-    documentStyle.setProperty(
+    cssVariableNames.chat.guestBubbles.color,
-      cssVariableNames.chat.guestBubbles.color,
+    guestBubbles.color ?? defaultTheme.chat.guestBubbles.color
-      guestBubbles.color
+  )
-    )
 }
 
 const setButtons = (
   buttons: ContainerColors,
   documentStyle: CSSStyleDeclaration
 ) => {
-  if (buttons.backgroundColor) {
+  const bgColor =
-    documentStyle.setProperty(
+    buttons.backgroundColor ?? defaultTheme.chat.buttons.backgroundColor
-      cssVariableNames.chat.buttons.bgColor,
+  documentStyle.setProperty(cssVariableNames.chat.buttons.bgColor, bgColor)
-      buttons.backgroundColor
+  documentStyle.setProperty(
-    )
+    cssVariableNames.chat.buttons.bgColorRgb,
-    documentStyle.setProperty(
+    hexToRgb(bgColor).join(', ')
-      cssVariableNames.chat.buttons.bgColorRgb,
+  )
-      hexToRgb(buttons.backgroundColor).join(', ')
-    )
-  }
 
-  if (buttons.color)
+  documentStyle.setProperty(
-    documentStyle.setProperty(
+    cssVariableNames.chat.buttons.color,
-      cssVariableNames.chat.buttons.color,
+    buttons.color ?? defaultTheme.chat.buttons.color
-      buttons.color
+  )
-    )
 }
 
 const setInputs = (inputs: InputColors, documentStyle: CSSStyleDeclaration) => {
-  if (inputs.backgroundColor)
+  documentStyle.setProperty(
-    documentStyle.setProperty(
+    cssVariableNames.chat.inputs.bgColor,
-      cssVariableNames.chat.inputs.bgColor,
+    inputs.backgroundColor ?? defaultTheme.chat.inputs.backgroundColor
-      inputs.backgroundColor
+  )
-    )
+  documentStyle.setProperty(
-  if (inputs.color)
+    cssVariableNames.chat.inputs.color,
-    documentStyle.setProperty(cssVariableNames.chat.inputs.color, inputs.color)
+    inputs.color ?? defaultTheme.chat.inputs.color
-  if (inputs.placeholderColor)
+  )
-    documentStyle.setProperty(
+  documentStyle.setProperty(
-      cssVariableNames.chat.inputs.placeholderColor,
+    cssVariableNames.chat.inputs.placeholderColor,
-      inputs.placeholderColor
+    inputs.placeholderColor ?? defaultTheme.chat.inputs.placeholderColor
-    )
+  )
 }
 
 const setTypebotBackground = (

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",

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",