⚡ (chat) Improve chat API compatibility with preview mode

packages/js/src/utils/sessionStorage.ts

@@ -0,0 +1,17 @@
+const sessionStorageKey = 'resultId'
+
+export const getExistingResultIdFromSession = () => {
+  try {
+    return sessionStorage.getItem(sessionStorageKey) ?? undefined
+  } catch {
+    /* empty */
+  }
+}
+
+export const setResultInSession = (resultId: string) => {
+  try {
+    return sessionStorage.setItem(sessionStorageKey, resultId)
+  } catch {
+    /* empty */
+  }
+}

packages/js/src/utils/setCssVariablesValue.ts

@@ -0,0 +1,144 @@
+import {
+  Background,
+  BackgroundType,
+  ChatTheme,
+  ContainerColors,
+  GeneralTheme,
+  InputColors,
+  Theme,
+} from 'models'
+
+const cssVariableNames = {
+  general: {
+    bgImage: '--typebot-container-bg-image',
+    bgColor: '--typebot-container-bg-color',
+    fontFamily: '--typebot-container-font-family',
+  },
+  chat: {
+    hostBubbles: {
+      bgColor: '--typebot-host-bubble-bg-color',
+      color: '--typebot-host-bubble-color',
+    },
+    guestBubbles: {
+      bgColor: '--typebot-guest-bubble-bg-color',
+      color: '--typebot-guest-bubble-color',
+    },
+    inputs: {
+      bgColor: '--typebot-input-bg-color',
+      color: '--typebot-input-color',
+      placeholderColor: '--typebot-input-placeholder-color',
+    },
+    buttons: {
+      bgColor: '--typebot-button-bg-color',
+      color: '--typebot-button-color',
+    },
+  },
+}
+
+export const setCssVariablesValue = (
+  theme: Theme | undefined,
+  container: HTMLDivElement
+) => {
+  if (!theme) return
+  const documentStyle = container?.style
+  if (!documentStyle) return
+  if (theme.general) setGeneralTheme(theme.general, documentStyle)
+  if (theme.chat) setChatTheme(theme.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)
+}
+
+const setChatTheme = (
+  chatTheme: ChatTheme,
+  documentStyle: CSSStyleDeclaration
+) => {
+  const { hostBubbles, guestBubbles, buttons, inputs } = chatTheme
+  if (hostBubbles) setHostBubbles(hostBubbles, documentStyle)
+  if (guestBubbles) setGuestBubbles(guestBubbles, documentStyle)
+  if (buttons) setButtons(buttons, documentStyle)
+  if (inputs) setInputs(inputs, 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
+    )
+}
+
+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
+    )
+}
+
+const setButtons = (
+  buttons: ContainerColors,
+  documentStyle: CSSStyleDeclaration
+) => {
+  if (buttons.backgroundColor)
+    documentStyle.setProperty(
+      cssVariableNames.chat.buttons.bgColor,
+      buttons.backgroundColor
+    )
+  if (buttons.color)
+    documentStyle.setProperty(
+      cssVariableNames.chat.buttons.color,
+      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
+    )
+}
+
+const setTypebotBackground = (
+  background: Background,
+  documentStyle: CSSStyleDeclaration
+) => {
+  documentStyle.setProperty(
+    background?.type === BackgroundType.IMAGE
+      ? cssVariableNames.general.bgImage
+      : cssVariableNames.general.bgColor,
+    background.type === BackgroundType.NONE
+      ? 'transparent'
+      : background.content ?? '#ffffff'
+  )
+}