🦴 Add settings page backbone

apps/builder/pages/api/typebots.ts

@@ -1,4 +1,10 @@
-import { BackgroundType, StartBlock, StepType, Theme } from 'bot-engine'
+import {
+  BackgroundType,
+  Settings,
+  StartBlock,
+  StepType,
+  Theme,
+} from 'bot-engine'
 import { Typebot, User } from 'db'
 import prisma from 'libs/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -44,8 +50,15 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
           background: { type: BackgroundType.NONE, content: '#ffffff' },
         },
       }
+      const settings: Settings = {
+        typingEmulation: {
+          enabled: true,
+          speed: 300,
+          maxDelay: 1.5,
+        },
+      }
       const typebot = await prisma.typebot.create({
-        data: { ...data, ownerId: user.id, startBlock, theme },
+        data: { ...data, ownerId: user.id, startBlock, theme, settings },
       })
       return res.send(typebot)
     }

apps/builder/pages/typebots/[id]/settings.tsx

@@ -0,0 +1,23 @@
+import { Flex } from '@chakra-ui/layout'
+import withAuth from 'components/HOC/withUser'
+import { Seo } from 'components/Seo'
+import { SettingsContent } from 'components/settings/SettingsContent'
+import { TypebotHeader } from 'components/shared/TypebotHeader'
+import { TypebotContext } from 'contexts/TypebotContext'
+import { useRouter } from 'next/router'
+import React from 'react'
+
+const SettingsPage = () => {
+  const { query } = useRouter()
+  return (
+    <TypebotContext typebotId={query.id?.toString()}>
+      <Seo title="Settings" />
+      <Flex overflow="hidden" h="100vh" flexDir="column">
+        <TypebotHeader />
+        <SettingsContent />
+      </Flex>
+    </TypebotContext>
+  )
+}
+
+export default withAuth(SettingsPage)