✨ (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/assets/index.css

@@ -31,6 +31,13 @@
 
   --typebot-border-radius: 6px;
 
+  --typebot-progress-bar-position: fixed;
+  --typebot-progress-bar-bg-color: #f7f8ff;
+  --typebot-progress-bar-color: #0042da;
+  --typebot-progress-bar-height: 6px;
+  --typebot-progress-bar-top: 0;
+  --typebot-progress-bar-bottom: auto;
+
   /* Phone input */
   --PhoneInputCountryFlag-borderColor: transparent;
   --PhoneInput-color--focus: transparent;
@@ -400,3 +407,21 @@ select option {
   color: var(--typebot-input-color);
   background-color: var(--typebot-input-bg-color);
 }
+
+.typebot-progress-bar-container {
+  background-color: var(--typebot-progress-bar-bg-color);
+  height: var(--typebot-progress-bar-height);
+  position: var(--typebot-progress-bar-position);
+  top: var(--typebot-progress-bar-top);
+  bottom: var(--typebot-progress-bar-bottom);
+  left: 0;
+  width: 100%;
+  z-index: 42424242;
+}
+
+.typebot-progress-bar-container > .typebot-progress-bar {
+  background-color: var(--typebot-progress-bar-color);
+  position: absolute;
+  height: 100%;
+  transition: width 0.25s ease;
+}