🦴 Add settings page backbone

apps/builder/components/settings/SettingsContent.tsx

@@ -0,0 +1,26 @@
+import { Flex, Stack } from '@chakra-ui/react'
+import { TypingEmulationSettings } from 'bot-engine'
+import { useTypebot } from 'contexts/TypebotContext'
+import React from 'react'
+import { TypingEmulation } from './TypingEmulation'
+
+export const SettingsContent = () => {
+  const { typebot, updateSettings } = useTypebot()
+
+  const handleTypingEmulationUpdate = (
+    typingEmulation: TypingEmulationSettings
+  ) => {
+    if (!typebot) return
+    updateSettings({ ...typebot.settings, typingEmulation })
+  }
+  return (
+    <Flex h="full" w="full" justifyContent="center" align="flex-start">
+      <Stack p="6" rounded="md" borderWidth={1} w="600px" minH="500px" mt={10}>
+        <TypingEmulation
+          typingEmulation={typebot?.settings.typingEmulation}
+          onUpdate={handleTypingEmulationUpdate}
+        />
+      </Stack>
+    </Flex>
+  )
+}

apps/builder/components/settings/SmartNumberInput.tsx

@@ -0,0 +1,39 @@
+import {
+  NumberInputProps,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from '@chakra-ui/react'
+import { useState, useEffect } from 'react'
+
+export const SmartNumberInput = ({
+  initialValue,
+  onValueChange,
+  ...props
+}: {
+  initialValue: number
+  onValueChange: (value: number) => void
+} & NumberInputProps) => {
+  const [value, setValue] = useState(initialValue.toString())
+
+  useEffect(() => {
+    if (value.endsWith('.') || value.endsWith(',')) return
+    if (value === '') onValueChange(0)
+    const newValue = parseFloat(value)
+    if (isNaN(newValue)) return
+    onValueChange(newValue)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return (
+    <NumberInput onChange={setValue} value={value} {...props}>
+      <NumberInputField />
+      <NumberInputStepper>
+        <NumberIncrementStepper />
+        <NumberDecrementStepper />
+      </NumberInputStepper>
+    </NumberInput>
+  )
+}

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

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -53,9 +53,9 @@ export const TypebotHeader = () => {
         </Button>
         <Button
           as={NextChakraLink}
-          href={`/typebots/${typebot?.id}/design`}
-          colorScheme={router.pathname.endsWith('share') ? 'blue' : 'gray'}
-          variant={router.pathname.endsWith('share') ? 'outline' : 'ghost'}
+          href={`/typebots/${typebot?.id}/settings`}
+          colorScheme={router.pathname.endsWith('settings') ? 'blue' : 'gray'}
+          variant={router.pathname.endsWith('settings') ? 'outline' : 'ghost'}
         >
           Settings
         </Button>