blsmedia/bot
2
0
Fork 0
Code Activity

✨ (settings) Add delay between bubbles option and typing disabling on first message

Browse Source
This commit is contained in:
Baptiste Arnaud
2024-01-24 12:03:41 +01:00
parent e80f297e74
commit f052b4c805
16 changed files with 159 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/builder/src/features/settings/components/SettingsSideMenu.tsx
View File

@ -84,7 +84,7 @@ export const SettingsSideMenu = () => {
<AccordionButton py={6}>
<HStack flex="1" pl={2}>
<ChatIcon />
<Heading fontSize="lg">Typing emulation</Heading>
<Heading fontSize="lg">Typing</Heading>
</HStack>
<AccordionIcon />
</AccordionButton>

100
apps/builder/src/features/settings/components/TypingEmulationForm.tsx
View File

@ -1,10 +1,11 @@
import { Stack } from '@chakra-ui/react'
import { HStack, Stack, Text } from '@chakra-ui/react'
import { Settings } from '@typebot.io/schemas'
import React from 'react'
import { isDefined } from '@typebot.io/lib'
import { NumberInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { defaultSettings } from '@typebot.io/schemas/features/typebot/settings/constants'
import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
import { isDefined } from '@typebot.io/lib'
type Props = {
typingEmulation: Settings['typingEmulation']
@ -18,51 +19,92 @@ export const TypingEmulationForm = ({ typingEmulation, onUpdate }: Props) => {
enabled,
})
const handleSpeedChange = (speed?: number) =>
isDefined(speed) && onUpdate({ ...typingEmulation, speed })
const updateSpeed = (speed?: number) =>
onUpdate({ ...typingEmulation, speed })
const handleMaxDelayChange = (maxDelay?: number) =>
isDefined(maxDelay) && onUpdate({ ...typingEmulation, maxDelay })
const updateMaxDelay = (maxDelay?: number) =>
onUpdate({
...typingEmulation,
maxDelay: isDefined(maxDelay)
? Math.max(Math.min(maxDelay, 5), 0)
: undefined,
})
const isEnabled =
typingEmulation?.enabled ?? defaultSettings.typingEmulation.enabled
const updateIsDisabledOnFirstMessage = (isDisabledOnFirstMessage: boolean) =>
onUpdate({
...typingEmulation,
isDisabledOnFirstMessage,
})
const updateDelayBetweenBubbles = (delayBetweenBubbles?: number) =>
onUpdate({ ...typingEmulation, delayBetweenBubbles })
return (
<Stack spacing={6}>
<SwitchWithLabel
<SwitchWithRelatedSettings
label={'Typing emulation'}
initialValue={isEnabled}
initialValue={
typingEmulation?.enabled ?? defaultSettings.typingEmulation.enabled
}
onCheckChange={updateIsEnabled}
/>
{isEnabled && (
<Stack pl={10}>
>
<NumberInput
label="Words per minutes:"
data-testid="speed"
defaultValue={
typingEmulation?.speed ?? defaultSettings.typingEmulation.speed
}
onValueChange={updateSpeed}
withVariableButton={false}
maxW="100px"
step={30}
direction="row"
/>
<HStack>
<NumberInput
label="Words per minutes:"
data-testid="speed"
defaultValue={
typingEmulation?.speed ?? defaultSettings.typingEmulation.speed
}
onValueChange={handleSpeedChange}
withVariableButton={false}
maxW="100px"
step={30}
direction="row"
/>
<NumberInput
label="Max delay (in seconds):"
label="Max delay:"
data-testid="max-delay"
defaultValue={
typingEmulation?.maxDelay ??
defaultSettings.typingEmulation.maxDelay
}
onValueChange={handleMaxDelayChange}
onValueChange={updateMaxDelay}
withVariableButton={false}
maxW="100px"
step={0.1}
direction="row"
size="sm"
/>
</Stack>
)}
<Text>seconds</Text>
</HStack>
<SwitchWithLabel
label={'Disable on first message'}
moreInfoContent="When checked, typing emulation will be disabled for the first message sent by the bot."
onCheckChange={updateIsDisabledOnFirstMessage}
initialValue={
typingEmulation?.isDisabledOnFirstMessage ??
defaultSettings.typingEmulation.isDisabledOnFirstMessage
}
/>
</SwitchWithRelatedSettings>
<HStack>
<NumberInput
label="Delay between messages:"
defaultValue={
typingEmulation?.delayBetweenBubbles ??
defaultSettings.typingEmulation.delayBetweenBubbles
}
withVariableButton={false}
onValueChange={updateDelayBetweenBubbles}
direction="row"
maxW={'100px'}
min={0}
max={5}
size="sm"
/>
<Text>seconds</Text>
</HStack>
</Stack>
)
}

1
apps/builder/src/features/whatsapp/startWhatsAppPreview.ts
View File

@ -128,6 +128,7 @@ export const startWhatsAppPreview = authenticatedProcedure
messages,
input,
clientSideActions,
isFirstChatChunk: true,
credentials: {
phoneNumberId: env.WHATSAPP_PREVIEW_FROM_PHONE_NUMBER_ID,
systemUserAccessToken: env.META_SYSTEM_USER_TOKEN,

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

@ -27386,6 +27386,14 @@
},
"maxDelay": {
"type": "number"
},
"delayBetweenBubbles": {
"type": "number",
"minimum": 0,
"maximum": 5
},
"isDisabledOnFirstMessage": {
"type": "boolean"
}
}
},

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

@ -7623,6 +7623,14 @@
},
"maxDelay": {
"type": "number"
},
"delayBetweenBubbles": {
"type": "number",
"minimum": 0,
"maximum": 5
},
"isDisabledOnFirstMessage": {
"type": "boolean"
}
}
},

3
apps/docs/settings/overview.mdx
View File

@ -28,6 +28,9 @@ You can customize this typing speed in the settings:
The goal of a typebot is not to pretend that the bot is a real human. So we suggest not setting the typing speed too low.
The `Disable on first message` allows you to disable the typing emulation on the first message. This is useful if you want to lower the first message display time since the site can take some time to load first.
The `Delay between messages` by default is 0 and you can increase it up to 5 seconds if you want to add a delay between **every** messages sent by the typebot.
Sometimes you want to pause the bot for a few seconds between one message and another, regardless of the typing speed. You can achieve this by adding a Code block with the following content:
```js