✨ (theme) Add progress bar option (#1276)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced progress bar functionality across various components for a
more interactive user experience.
	- Added progress tracking and display in chat sessions.
- **Enhancements**
- Adjusted layout height calculations in the settings and theme pages
for consistency.
- Improved theme customization options with progress bar styling and
placement settings.
- **Bug Fixes**
- Fixed dynamic height calculation issues in settings and theme side
menus by standardizing heights.
- **Style**
- Added custom styling properties for the progress bar in chat
interfaces.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -19,6 +19,14 @@ const cssVariableNames = {
     bgColor: '--typebot-container-bg-color',
     fontFamily: '--typebot-container-font-family',
     color: '--typebot-container-color',
+    progressBar: {
+      position: '--typebot-progress-bar-position',
+      color: '--typebot-progress-bar-color',
+      backgroundColor: '--typebot-progress-bar-bg-color',
+      height: '--typebot-progress-bar-height',
+      top: '--typebot-progress-bar-top',
+      bottom: '--typebot-progress-bar-bottom',
+    },
   },
   chat: {
     hostBubbles: {
@@ -49,18 +57,24 @@ const cssVariableNames = {
 
 export const setCssVariablesValue = (
   theme: Theme | undefined,
-  container: HTMLDivElement
+  container: HTMLDivElement,
+  isPreview?: boolean
 ) => {
   if (!theme) return
   const documentStyle = container?.style
   if (!documentStyle) return
-  setGeneralTheme(theme.general ?? defaultTheme.general, documentStyle)
+  setGeneralTheme(
+    theme.general ?? defaultTheme.general,
+    documentStyle,
+    isPreview
+  )
   setChatTheme(theme.chat ?? defaultTheme.chat, documentStyle)
 }
 
 const setGeneralTheme = (
   generalTheme: GeneralTheme,
-  documentStyle: CSSStyleDeclaration
+  documentStyle: CSSStyleDeclaration,
+  isPreview?: boolean
 ) => {
   setTypebotBackground(
     generalTheme.background ?? defaultTheme.general.background,
@@ -72,6 +86,51 @@ const setGeneralTheme = (
       ? generalTheme.font
       : generalTheme.font?.family) ?? defaultTheme.general.font.family
   )
+  setProgressBar(
+    generalTheme.progressBar ?? defaultTheme.general.progressBar,
+    documentStyle,
+    isPreview
+  )
+}
+
+const setProgressBar = (
+  progressBar: NonNullable<GeneralTheme['progressBar']>,
+  documentStyle: CSSStyleDeclaration,
+  isPreview?: boolean
+) => {
+  const position =
+    progressBar.position ?? defaultTheme.general.progressBar.position
+
+  documentStyle.setProperty(
+    cssVariableNames.general.progressBar.position,
+    position === 'fixed' ? (isPreview ? 'absolute' : 'fixed') : position
+  )
+  documentStyle.setProperty(
+    cssVariableNames.general.progressBar.color,
+    progressBar.color ?? defaultTheme.general.progressBar.color
+  )
+  documentStyle.setProperty(
+    cssVariableNames.general.progressBar.backgroundColor,
+    progressBar.backgroundColor ??
+      defaultTheme.general.progressBar.backgroundColor
+  )
+  documentStyle.setProperty(
+    cssVariableNames.general.progressBar.height,
+    `${progressBar.thickness ?? defaultTheme.general.progressBar.thickness}px`
+  )
+
+  const placement =
+    progressBar.placement ?? defaultTheme.general.progressBar.placement
+
+  documentStyle.setProperty(
+    cssVariableNames.general.progressBar.top,
+    placement === 'Top' ? '0' : 'auto'
+  )
+
+  documentStyle.setProperty(
+    cssVariableNames.general.progressBar.bottom,
+    placement === 'Bottom' ? '0' : 'auto'
+  )
 }
 
 const setChatTheme = (