♻️ Re-organize workspace folders

packages/embeds/js/src/utils/executeClientSideActions.ts

@@ -0,0 +1,26 @@
+import { executeChatwoot } from '@/features/blocks/integrations/chatwoot'
+import { executeGoogleAnalyticsBlock } from '@/features/blocks/integrations/googleAnalytics/utils/executeGoogleAnalytics'
+import { executeRedirect } from '@/features/blocks/logic/redirect'
+import { executeScript } from '@/features/blocks/logic/script/executeScript'
+import { executeWait } from '@/features/blocks/logic/wait/utils/executeWait'
+import type { ChatReply } from '@typebot.io/schemas'
+
+export const executeClientSideAction = async (
+  clientSideAction: NonNullable<ChatReply['clientSideActions']>[0]
+): Promise<{ blockedPopupUrl: string } | void> => {
+  if ('chatwoot' in clientSideAction) {
+    return executeChatwoot(clientSideAction.chatwoot)
+  }
+  if ('googleAnalytics' in clientSideAction) {
+    return executeGoogleAnalyticsBlock(clientSideAction.googleAnalytics)
+  }
+  if ('scriptToExecute' in clientSideAction) {
+    return executeScript(clientSideAction.scriptToExecute)
+  }
+  if ('redirect' in clientSideAction) {
+    return executeRedirect(clientSideAction.redirect)
+  }
+  if ('wait' in clientSideAction) {
+    return executeWait(clientSideAction.wait)
+  }
+}

packages/embeds/js/src/utils/guessApiHost.ts

@@ -0,0 +1,6 @@
+import { env } from '@typebot.io/lib'
+
+const cloudViewerUrl = 'https://viewer.typebot.io'
+
+export const guessApiHost = () =>
+  env('VIEWER_URL')?.split(',')[0] ?? cloudViewerUrl

packages/embeds/js/src/utils/injectHeadCode.ts

@@ -0,0 +1,3 @@
+export const injectHeadCode = (headCode: string) => {
+  document.head.innerHTML = document.head.innerHTML + headCode
+}

packages/embeds/js/src/utils/isMobileSignal.ts

@@ -0,0 +1,3 @@
+import { createSignal } from 'solid-js'
+
+export const [isMobile, setIsMobile] = createSignal<boolean>()

packages/embeds/js/src/utils/sessionStorage.ts

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

packages/embeds/js/src/utils/setCssVariablesValue.ts

@@ -0,0 +1,144 @@
+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'
+  )
+}