✨ (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/viewer/src/features/chat/api/continueChat.ts

@@ -8,6 +8,7 @@ import { parseDynamicTheme } from '@typebot.io/bot-engine/parseDynamicTheme'
 import { isDefined, isNotDefined } from '@typebot.io/lib/utils'
 import { z } from 'zod'
 import { filterPotentiallySensitiveLogs } from '@typebot.io/bot-engine/logs/filterPotentiallySensitiveLogs'
+import { computeCurrentProgress } from '@typebot.io/bot-engine/computeCurrentProgress'
 
 export const continueChat = publicProcedure
   .meta({
@@ -93,6 +94,12 @@ export const continueChat = publicProcedure
 
     const isPreview = isNotDefined(session.state.typebotsQueue[0].resultId)
 
+    const isEnded =
+      newSessionState.progressMetadata &&
+      !input?.id &&
+      (clientSideActions?.filter((c) => c.expectsDedicatedReply).length ??
+        0) === 0
+
     return {
       messages,
       input,
@@ -100,5 +107,14 @@ export const continueChat = publicProcedure
       dynamicTheme: parseDynamicTheme(newSessionState),
       logs: isPreview ? logs : logs?.filter(filterPotentiallySensitiveLogs),
       lastMessageNewFormat,
+      progress: newSessionState.progressMetadata
+        ? isEnded
+          ? 100
+          : computeCurrentProgress({
+              typebotsQueue: newSessionState.typebotsQueue,
+              progressMetadata: newSessionState.progressMetadata,
+              currentInputBlockId: input?.id as string,
+            })
+        : undefined,
     }
   })

apps/viewer/src/features/chat/api/startChat.ts

@@ -96,6 +96,7 @@ export const startChat = publicProcedure
         dynamicTheme,
         logs: logs?.filter(filterPotentiallySensitiveLogs),
         clientSideActions,
+        progress: newSessionState.progressMetadata ? 0 : undefined,
       }
     }
   )

apps/viewer/src/features/chat/api/startChatPreview.ts

@@ -83,6 +83,7 @@ export const startChatPreview = publicProcedure
         dynamicTheme,
         logs,
         clientSideActions,
+        progress: newSessionState.progressMetadata ? 0 : undefined,
       }
     }
   )