145 lines
3.8 KiB
TypeScript
145 lines
3.8 KiB
TypeScript
import {
|
|
Background,
|
|
ChatTheme,
|
|
ContainerColors,
|
|
GeneralTheme,
|
|
InputColors,
|
|
Theme,
|
|
} from '@typebot.io/schemas'
|
|
import { BackgroundType } from '@typebot.io/schemas/features/typebot/theme/enums'
|
|
|
|
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'
|
|
)
|
|
}
|