✨ (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/schemas/features/chat/schema.ts

@@ -310,6 +310,12 @@ const chatResponseBaseSchema = z.object({
     .describe(
       'If the typebot contains dynamic avatars, dynamicTheme returns the new avatar URLs whenever their variables are updated.'
     ),
+  progress: z
+    .number()
+    .optional()
+    .describe(
+      'If progress bar is enabled, this field will return a number between 0 and 100 indicating the current progress based on the longest remaining path of the flow.'
+    ),
 })
 
 export const startChatResponseSchema = z

packages/schemas/features/chat/sessionState.ts

@@ -81,6 +81,11 @@ const sessionStateSchemaV2 = z.object({
     .describe('Expiry timeout in milliseconds'),
   typingEmulation: settingsSchema.shape.typingEmulation.optional(),
   currentVisitedEdgeIndex: z.number().optional(),
+  progressMetadata: z
+    .object({
+      totalAnswers: z.number(),
+    })
+    .optional(),
 })
 
 const sessionStateSchemaV3 = sessionStateSchemaV2

packages/schemas/features/typebot/theme/constants.ts

@@ -8,6 +8,9 @@ export enum BackgroundType {
 
 export const fontTypes = ['Google', 'Custom'] as const
 
+export const progressBarPlacements = ['Top', 'Bottom'] as const
+export const progressBarPositions = ['fixed', 'absolute'] as const
+
 export const defaultTheme = {
   chat: {
     roundness: 'medium',
@@ -32,5 +35,13 @@ export const defaultTheme = {
       family: 'Open Sans',
     },
     background: { type: BackgroundType.COLOR, content: '#ffffff' },
+    progressBar: {
+      isEnabled: false,
+      color: '#0042DA',
+      backgroundColor: '#e0edff',
+      thickness: 4,
+      position: 'fixed',
+      placement: 'Top',
+    },
   },
 } as const satisfies Theme

packages/schemas/features/typebot/theme/schema.ts

@@ -1,6 +1,11 @@
 import { ThemeTemplate as ThemeTemplatePrisma } from '@typebot.io/prisma'
 import { z } from '../../../zod'
-import { BackgroundType, fontTypes } from './constants'
+import {
+  BackgroundType,
+  fontTypes,
+  progressBarPlacements,
+  progressBarPositions,
+} from './constants'
 
 const avatarPropsSchema = z.object({
   isEnabled: z.boolean().optional(),
@@ -51,9 +56,20 @@ export const fontSchema = z
   .or(z.discriminatedUnion('type', [googleFontSchema, customFontSchema]))
 export type Font = z.infer<typeof fontSchema>
 
+const progressBarSchema = z.object({
+  isEnabled: z.boolean().optional(),
+  color: z.string().optional(),
+  backgroundColor: z.string().optional(),
+  placement: z.enum(progressBarPlacements).optional(),
+  thickness: z.number().optional(),
+  position: z.enum(progressBarPositions).optional(),
+})
+export type ProgressBar = z.infer<typeof progressBarSchema>
+
 const generalThemeSchema = z.object({
   font: fontSchema.optional(),
   background: backgroundSchema.optional(),
+  progressBar: progressBarSchema.optional(),
 })
 
 export const themeSchema = z