💄 Improve progress bar UI and make avoid starting at 0

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>
   )
 }

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>
   )
 }

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": [

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": [

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,
       }
     }
   )

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,
       }
     }
   )