🦴 Add settings page backbone

apps/builder/components/settings/TypingEmulation.tsx

@@ -0,0 +1,63 @@
+import { Flex, Stack, Switch, Text } from '@chakra-ui/react'
+import { TypingEmulationSettings } from 'bot-engine'
+import React from 'react'
+import { SmartNumberInput } from './SmartNumberInput'
+
+type TypingEmulationProps = {
+  typingEmulation?: TypingEmulationSettings
+  onUpdate: (typingEmulation: TypingEmulationSettings) => void
+}
+
+export const TypingEmulation = ({
+  typingEmulation,
+  onUpdate,
+}: TypingEmulationProps) => {
+  const handleSwitchChange = () => {
+    if (!typingEmulation) return
+    onUpdate({ ...typingEmulation, enabled: !typingEmulation.enabled })
+  }
+
+  const handleSpeedChange = (speed: number) => {
+    if (!typingEmulation) return
+    onUpdate({ ...typingEmulation, speed })
+  }
+
+  const handleMaxDelayChange = (maxDelay: number) => {
+    if (!typingEmulation) return
+    onUpdate({ ...typingEmulation, maxDelay: maxDelay })
+  }
+
+  return (
+    <Stack spacing={4}>
+      <Flex justifyContent="space-between" align="center">
+        <Text>Typing emulation</Text>
+        <Switch
+          isChecked={typingEmulation?.enabled}
+          onChange={handleSwitchChange}
+        />
+      </Flex>
+      {typingEmulation?.enabled && (
+        <Stack pl={10}>
+          <Flex justify="space-between" align="center">
+            <Text>Words per minutes:</Text>
+            <SmartNumberInput
+              initialValue={typingEmulation.speed}
+              onValueChange={handleSpeedChange}
+              maxW="100px"
+              step={30}
+            />
+          </Flex>
+          <Flex justify="space-between" align="center">
+            <Text>Max delay (in seconds):</Text>
+            <SmartNumberInput
+              initialValue={typingEmulation.maxDelay}
+              onValueChange={handleMaxDelayChange}
+              maxW="100px"
+              step={0.1}
+            />
+          </Flex>
+        </Stack>
+      )}
+    </Stack>
+  )
+}