✨ (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 -->

apps/builder/src/features/theme/components/general/GeneralSettings.tsx

@@ -6,7 +6,7 @@ import {
   useDisclosure,
   Text,
 } from '@chakra-ui/react'
-import { Background, Font, Theme } from '@typebot.io/schemas'
+import { Background, Font, ProgressBar, Theme } from '@typebot.io/schemas'
 import React from 'react'
 import { BackgroundSelector } from './BackgroundSelector'
 import { LockTag } from '@/features/billing/components/LockTag'
@@ -24,6 +24,7 @@ import { env } from '@typebot.io/env'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { RadioButtons } from '@/components/inputs/RadioButtons'
 import { FontForm } from './FontForm'
+import { ProgressBarForm } from './ProgressBarForm'
 
 type Props = {
   isBrandingEnabled: boolean
@@ -63,6 +64,9 @@ export const GeneralSettings = ({
   const handleBackgroundChange = (background: Background) =>
     onGeneralThemeChange({ ...generalTheme, background })
 
+  const updateProgressBar = (progressBar: ProgressBar) =>
+    onGeneralThemeChange({ ...generalTheme, progressBar })
+
   const updateBranding = () => {
     if (isBrandingEnabled && isWorkspaceFreePlan) return
     if (
@@ -118,15 +122,16 @@ export const GeneralSettings = ({
           defaultValue={fontType}
           onSelect={updateFontType}
         />
-        <FontForm
-          font={generalTheme?.font ?? defaultTheme.general.font}
-          onFontChange={updateFont}
-        />
+        <FontForm font={generalTheme?.font} onFontChange={updateFont} />
       </Stack>
       <BackgroundSelector
-        background={generalTheme?.background ?? defaultTheme.general.background}
+        background={generalTheme?.background}
         onBackgroundChange={handleBackgroundChange}
       />
+      <ProgressBarForm
+        progressBar={generalTheme?.progressBar}
+        onProgressBarChange={updateProgressBar}
+      />
     </Stack>
   )
 }