blsmedia/bot
2
0
Fork 0
Code Activity

💄 Improve progress bar UI and make avoid starting at 0

Browse Source
This commit is contained in:
Baptiste Arnaud
2024-02-27 14:22:46 +01:00
parent 0b193101b9
commit 229453d3d3
12 changed files with 86 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/builder/src/features/theme/components/general/GeneralSettings.tsx
View File

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

58
apps/builder/src/features/theme/components/general/ProgressBarForm.tsx
View File

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

6
apps/docs/openapi/builder.json
View File

@ -19433,8 +19433,12 @@
"family": {
"type": "string"
},
"url": {
"css": {
"type": "string"
},
"url": {
"type": "string",
"description": "Deprecated, use `css` instead"
}
},
"required": [

6
apps/docs/openapi/viewer.json
View File

@ -6744,8 +6744,12 @@
"family": {
"type": "string"
},
"url": {
"css": {
"type": "string"
},
"url": {
"type": "string",
"description": "Deprecated, use `css` instead"
}
},
"required": [

17
apps/viewer/src/features/chat/api/startChat.ts
View File

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

17
apps/viewer/src/features/chat/api/startChatPreview.ts
View File

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

6
packages/bot-engine/computeCurrentProgress.ts
View File

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

2
packages/embeds/js/package.json
View File

@ -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",

12
packages/embeds/js/src/assets/index.css
View File

@ -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);

11
packages/embeds/js/src/utils/setCssVariablesValue.ts
View File

@ -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'

2
packages/embeds/nextjs/package.json
View File

@ -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",

2
packages/embeds/react/package.json
View File

@ -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",