💄 Improve progress bar UI and make avoid starting at 0

baptisteArno · Feb 27, 2024 · 229453d · 229453d
1 parent 0b19310
commit 229453d
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 61 deletions.
diff --git a/apps/builder/src/features/theme/components/general/GeneralSettings.tsx b/apps/builder/src/features/theme/components/general/GeneralSettings.tsx
@@ -115,6 +115,10 @@ export const GeneralSettings = ({
           onChange={updateBranding}
         />
       </Flex>
+      <ProgressBarForm
+        progressBar={generalTheme?.progressBar}
+        onProgressBarChange={updateProgressBar}
+      />
       <Stack>
         <Text>{t('theme.sideMenu.global.font')}</Text>
         <RadioButtons
@@ -128,10 +132,6 @@ export const GeneralSettings = ({
         background={generalTheme?.background}
         onBackgroundChange={handleBackgroundChange}
       />
-      <ProgressBarForm
-        progressBar={generalTheme?.progressBar}
-        onProgressBarChange={updateProgressBar}
-      />
     </Stack>
   )
 }
diff --git a/apps/builder/src/features/theme/components/general/ProgressBarForm.tsx b/apps/builder/src/features/theme/components/general/ProgressBarForm.tsx
@@ -2,7 +2,7 @@ import { ColorPicker } from '@/components/ColorPicker'
 import { DropdownList } from '@/components/DropdownList'
 import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
 import { NumberInput } from '@/components/inputs'
-import { HStack, Text } from '@chakra-ui/react'
+import { FormLabel, HStack } from '@chakra-ui/react'
 import { ProgressBar } from '@typebot.io/schemas'
 import {
   defaultTheme,
@@ -25,9 +25,6 @@ export const ProgressBarForm = ({
   const updateColor = (color: string) =>
     onProgressBarChange({ ...progressBar, color })
 
-  const updateBackgroundColor = (backgroundColor: string) =>
-    onProgressBarChange({ ...progressBar, backgroundColor })
-
   const updatePlacement = (placement: (typeof progressBarPlacements)[number]) =>
     onProgressBarChange({ ...progressBar, placement })
 
@@ -55,6 +52,29 @@ export const ProgressBarForm = ({
         onItemSelect={updatePlacement}
         items={progressBarPlacements}
       />
+
+      <HStack justifyContent="space-between">
+        <FormLabel mb="0" mr="0">
+          Color:
+        </FormLabel>
+        <ColorPicker
+          defaultValue={
+            progressBar?.color ?? defaultTheme.general.progressBar.color
+          }
+          onColorChange={updateColor}
+        />
+      </HStack>
+      <NumberInput
+        label="Thickness:"
+        direction="row"
+        withVariableButton={false}
+        maxW="100px"
+        defaultValue={
+          progressBar?.thickness ?? defaultTheme.general.progressBar.thickness
+        }
+        onValueChange={updateThickness}
+        size="sm"
+      />
       <DropdownList
         size="sm"
         direction="row"
@@ -66,36 +86,6 @@ export const ProgressBarForm = ({
         onItemSelect={updatePosition}
         items={progressBarPositions}
       />
-      <HStack justifyContent="space-between">
-        <Text>Color:</Text>
-        <ColorPicker
-          defaultValue={
-            progressBar?.color ?? defaultTheme.general.progressBar.color
-          }
-          onColorChange={updateColor}
-        />
-      </HStack>
-      <HStack justifyContent="space-between">
-        <Text>Background color:</Text>
-        <ColorPicker
-          defaultValue={
-            progressBar?.backgroundColor ??
-            defaultTheme.general.progressBar.backgroundColor
-          }
-          onColorChange={updateBackgroundColor}
-        />
-      </HStack>
-      <HStack justifyContent="space-between">
-        <Text>Thickness:</Text>
-        <NumberInput
-          withVariableButton={false}
-          defaultValue={
-            progressBar?.thickness ?? defaultTheme.general.progressBar.thickness
-          }
-          onValueChange={updateThickness}
-          size="sm"
-        />
-      </HStack>
     </SwitchWithRelatedSettings>
   )
 }
diff --git a/apps/docs/openapi/builder.json b/apps/docs/openapi/builder.json
@@ -19433,8 +19433,12 @@
                           "family": {
                             "type": "string"
                           },
-                          "url": {
+                          "css": {
                             "type": "string"
+                          },
+                          "url": {
+                            "type": "string",
+                            "description": "Deprecated, use `css` instead"
                           }
                         },
                         "required": [

diff --git a/apps/docs/openapi/viewer.json b/apps/docs/openapi/viewer.json
@@ -6744,8 +6744,12 @@
                           "family": {
                             "type": "string"
                           },
-                          "url": {
+                          "css": {
                             "type": "string"
+                          },
+                          "url": {
+                            "type": "string",
+                            "description": "Deprecated, use `css` instead"
                           }
                         },
                         "required": [

diff --git a/apps/viewer/src/features/chat/api/startChat.ts b/apps/viewer/src/features/chat/api/startChat.ts
@@ -7,6 +7,7 @@ import { startSession } from '@typebot.io/bot-engine/startSession'
 import { saveStateToDatabase } from '@typebot.io/bot-engine/saveStateToDatabase'
 import { restartSession } from '@typebot.io/bot-engine/queries/restartSession'
 import { filterPotentiallySensitiveLogs } from '@typebot.io/bot-engine/logs/filterPotentiallySensitiveLogs'
+import { computeCurrentProgress } from '@typebot.io/bot-engine/computeCurrentProgress'
 
 export const startChat = publicProcedure
   .meta({
@@ -83,6 +84,12 @@ export const startChat = publicProcedure
             ),
           })
 
+      const isEnded =
+        newSessionState.progressMetadata &&
+        !input?.id &&
+        (clientSideActions?.filter((c) => c.expectsDedicatedReply).length ??
+          0) === 0
+
       return {
         sessionId: session.id,
         typebot: {
@@ -96,7 +103,15 @@ export const startChat = publicProcedure
         dynamicTheme,
         logs: logs?.filter(filterPotentiallySensitiveLogs),
         clientSideActions,
-        progress: newSessionState.progressMetadata ? 0 : undefined,
+        progress: newSessionState.progressMetadata
+          ? isEnded
+            ? 100
+            : computeCurrentProgress({
+                typebotsQueue: newSessionState.typebotsQueue,
+                progressMetadata: newSessionState.progressMetadata,
+                currentInputBlockId: input?.id as string,
+              })
+          : undefined,
       }
     }
   )
diff --git a/apps/viewer/src/features/chat/api/startChatPreview.ts b/apps/viewer/src/features/chat/api/startChatPreview.ts
@@ -6,6 +6,7 @@ import { startSession } from '@typebot.io/bot-engine/startSession'
 import { saveStateToDatabase } from '@typebot.io/bot-engine/saveStateToDatabase'
 import { restartSession } from '@typebot.io/bot-engine/queries/restartSession'
 import { publicProcedure } from '@/helpers/server/trpc'
+import { computeCurrentProgress } from '@typebot.io/bot-engine/computeCurrentProgress'
 
 export const startChatPreview = publicProcedure
   .meta({
@@ -71,6 +72,12 @@ export const startChatPreview = publicProcedure
             ),
           })
 
+      const isEnded =
+        newSessionState.progressMetadata &&
+        !input?.id &&
+        (clientSideActions?.filter((c) => c.expectsDedicatedReply).length ??
+          0) === 0
+
       return {
         sessionId: session.id,
         typebot: {
@@ -83,7 +90,15 @@ export const startChatPreview = publicProcedure
         dynamicTheme,
         logs,
         clientSideActions,
-        progress: newSessionState.progressMetadata ? 0 : undefined,
+        progress: newSessionState.progressMetadata
+          ? isEnded
+            ? 100
+            : computeCurrentProgress({
+                typebotsQueue: newSessionState.typebotsQueue,
+                progressMetadata: newSessionState.progressMetadata,
+                currentInputBlockId: input?.id as string,
+              })
+          : undefined,
       }
     }
   )
diff --git a/packages/bot-engine/computeCurrentProgress.ts b/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
   )
 }

diff --git a/packages/embeds/js/package.json b/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",

diff --git a/packages/embeds/js/src/assets/index.css b/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);

diff --git a/packages/embeds/js/src/utils/setCssVariablesValue.ts b/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'

diff --git a/packages/embeds/nextjs/package.json b/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",

diff --git a/packages/embeds/react/package.json b/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",