🦴 Add settings page backbone

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/HostMessageBubble.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useHostAvatars } from '../../../../contexts/HostAvatarsContext'
+import { useTypebot } from '../../../../contexts/TypebotContext'
 import { StepType, TextStep } from '../../../../models'
+import { computeTypingTimeout } from '../../../../services/chat'
 import { TypingContent } from './TypingContent'
 
 type HostMessageBubbleProps = {
@@ -16,15 +18,18 @@ export const HostMessageBubble = ({
   step,
   onTransitionEnd,
 }: HostMessageBubbleProps) => {
+  const { typebot } = useTypebot()
+  const { typingEmulation } = typebot.settings
   const { updateLastAvatarOffset } = useHostAvatars()
   const messageContainer = useRef<HTMLDivElement | null>(null)
   const [isTyping, setIsTyping] = useState(true)
 
   useEffect(() => {
-    const wordCount = step.content.plainText.match(/(\w+)/g)?.length ?? 0
-    const typedWordsPerMinute = 250
-    const typingTimeout = (wordCount / typedWordsPerMinute) * 60000
     sendAvatarOffset()
+    const typingTimeout = computeTypingTimeout(
+      step.content.plainText,
+      typingEmulation
+    )
     setTimeout(() => {
       onTypingEnd()
     }, typingTimeout)

packages/bot-engine/src/models/publicTypebot.ts

@@ -1,11 +1,12 @@
 import { PublicTypebot as PublicTypebotFromPrisma } from 'db'
-import { Block, StartBlock, Theme } from '.'
+import { Block, Settings, StartBlock, Theme } from '.'
 
 export type PublicTypebot = Omit<
   PublicTypebotFromPrisma,
-  'blocks' | 'startBlock' | 'theme'
+  'blocks' | 'startBlock' | 'theme' | 'settings'
 > & {
   blocks: Block[]
   startBlock: StartBlock
   theme: Theme
+  settings: Settings
 }

packages/bot-engine/src/models/typebot.ts

@@ -2,11 +2,12 @@ import { Typebot as TypebotFromPrisma } from 'db'
 
 export type Typebot = Omit<
   TypebotFromPrisma,
-  'blocks' | 'startBlock' | 'theme'
+  'blocks' | 'startBlock' | 'theme' | 'settings'
 > & {
   blocks: Block[]
   startBlock: StartBlock
   theme: Theme
+  settings: Settings
 }
 
 export type StartBlock = {
@@ -74,3 +75,13 @@ export type Background = {
   type: BackgroundType
   content: string
 }
+
+export type Settings = {
+  typingEmulation: TypingEmulationSettings
+}
+
+export type TypingEmulationSettings = {
+  enabled: boolean
+  speed: number
+  maxDelay: number
+}

packages/bot-engine/src/services/chat.ts

@@ -0,0 +1,15 @@
+import { TypingEmulationSettings } from '../models'
+
+export const computeTypingTimeout = (
+  bubbleContent: string,
+  typingSettings: TypingEmulationSettings
+) => {
+  const wordCount = bubbleContent.match(/(\w+)/g)?.length ?? 0
+  const typedWordsPerMinute = typingSettings.speed
+  let typingTimeout = typingSettings.enabled
+    ? (wordCount / typedWordsPerMinute) * 60000
+    : 0
+  if (typingTimeout > typingSettings.maxDelay * 1000)
+    typingTimeout = typingSettings.maxDelay * 1000
+  return typingTimeout
+}