💄 Improve progress bar UI and make avoid starting at 0

packages/bot-engine/computeCurrentProgress.ts

@@ -13,7 +13,6 @@ export const computeCurrentProgress = ({
   progressMetadata,
   currentInputBlockId,
 }: Props) => {
-  if (progressMetadata.totalAnswers === 0) return 0
   const paths = computePossibleNextInputBlocks({
     typebotsQueue: typebotsQueue,
     blockId: currentInputBlockId,
@@ -22,11 +21,10 @@ export const computeCurrentProgress = ({
     },
     currentPath: [],
   })
-
   return (
-    (progressMetadata.totalAnswers /
+    ((progressMetadata.totalAnswers + 1) /
       (Math.max(...paths.map((b) => b.length)) +
-        progressMetadata.totalAnswers)) *
+        (progressMetadata.totalAnswers + 1))) *
     100
   )
 }

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.44",
+  "version": "0.2.45",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/assets/index.css

@@ -242,12 +242,6 @@ pre {
   border-radius: 6px;
 }
 
-.typebot-host-bubble img,
-.typebot-host-bubble iframe,
-.typebot-host-bubble video {
-  border-radius: var(--typebot-border-radius);
-}
-
 .typebot-guest-bubble {
   color: var(--typebot-guest-bubble-color);
   background-color: var(--typebot-guest-bubble-bg-color);
@@ -409,7 +403,11 @@ select option {
 }
 
 .typebot-progress-bar-container {
-  background-color: var(--typebot-progress-bar-bg-color);
+  background-color: rgba(
+    var(--typebot-button-bg-color-rgb),
+    calc(var(--selectable-base-alpha) + 0.12)
+  );
+
   height: var(--typebot-progress-bar-height);
   position: var(--typebot-progress-bar-position);
   top: var(--typebot-progress-bar-top);

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

@@ -22,7 +22,7 @@ const cssVariableNames = {
     progressBar: {
       position: '--typebot-progress-bar-position',
       color: '--typebot-progress-bar-color',
-      backgroundColor: '--typebot-progress-bar-bg-color',
+      colorRgb: '--typebot-progress-bar-color-rgb',
       height: '--typebot-progress-bar-height',
       top: '--typebot-progress-bar-top',
       bottom: '--typebot-progress-bar-bottom',
@@ -110,9 +110,11 @@ const setProgressBar = (
     progressBar.color ?? defaultTheme.general.progressBar.color
   )
   documentStyle.setProperty(
-    cssVariableNames.general.progressBar.backgroundColor,
-    progressBar.backgroundColor ??
-      defaultTheme.general.progressBar.backgroundColor
+    cssVariableNames.general.progressBar.colorRgb,
+    hexToRgb(
+      progressBar.backgroundColor ??
+        defaultTheme.general.progressBar.backgroundColor
+    ).join(', ')
   )
   documentStyle.setProperty(
     cssVariableNames.general.progressBar.height,
@@ -254,7 +256,6 @@ const setTypebotBackground = (
 }
 
 const parseBackgroundValue = ({ type, content }: Background = {}) => {
-  console.log('parseBackgroundValue', type, content)
   switch (type) {
     case BackgroundType.NONE:
       return 'transparent'

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.44",
+  "version": "0.2.45",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.44",
+  "version": "0.2.45",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",