refactor(♻️ Add defaults everywhere (+ settings page)):

apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/ContentPopover.tsx

@@ -8,10 +8,11 @@ import { ImageUploadContent } from 'components/shared/ImageUploadContent'
 import { useTypebot } from 'contexts/TypebotContext'
 import {
   BubbleStep,
-  BubbleStepContent,
   BubbleStepType,
   ImageBubbleStep,
   TextBubbleStep,
+  VideoBubbleContent,
+  VideoBubbleStep,
 } from 'models'
 import { useRef } from 'react'
 import { VideoUploadContent } from './VideoUploadContent'
@@ -39,14 +40,17 @@ export const ContentPopover = ({ step }: Props) => {
 export const StepContent = ({ step }: Props) => {
   const { updateStep } = useTypebot()
 
-  const handleContentChange = (content: BubbleStepContent) =>
+  const handleContentChange = (url: string) =>
-    updateStep(step.id, { content } as Partial<ImageBubbleStep>)
+    updateStep(step.id, { content: { url } } as Partial<ImageBubbleStep>)
+
+  const handleVideoContentChange = (content: VideoBubbleContent) =>
+    updateStep(step.id, { content } as Partial<VideoBubbleStep>)
 
   switch (step.type) {
     case BubbleStepType.IMAGE: {
       return (
         <ImageUploadContent
-          content={step.content}
+          url={step.content?.url}
           onSubmit={handleContentChange}
         />
       )
@@ -55,7 +59,7 @@ export const StepContent = ({ step }: Props) => {
       return (
         <VideoUploadContent
           content={step.content}
-          onSubmit={handleContentChange}
+          onSubmit={handleVideoContentChange}
         />
       )
     }

apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/VideoUploadContent.tsx

@@ -1,5 +1,5 @@
 import { Stack, Text } from '@chakra-ui/react'
-import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
 import { VideoBubbleContent, VideoBubbleContentType } from 'models'
 import urlParser from 'js-video-url-parser/lib/base'
 import 'js-video-url-parser/lib/provider/vimeo'

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@chakra-ui/react'
 import { DropdownList } from 'components/shared/DropdownList'
-import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
 import { TableListItemProps } from 'components/shared/TableList'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { Comparison, Variable, ComparisonOperators } from 'models'

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx

@@ -6,7 +6,7 @@ import { DateInputOptions, Variable } from 'models'
 import React from 'react'
 
 type DateInputSettingsBodyProps = {
-  options?: DateInputOptions
+  options: DateInputOptions
   onOptionsChange: (options: DateInputOptions) => void
 }
 
@@ -32,23 +32,23 @@ export const DateInputSettingsBody = ({
       <SwitchWithLabel
         id="is-range"
         label={'Is range?'}
-        initialValue={options?.isRange ?? false}
+        initialValue={options.isRange}
         onCheckChange={handleIsRangeChange}
       />
       <SwitchWithLabel
         id="with-time"
         label={'With time?'}
-        initialValue={options?.isRange ?? false}
+        initialValue={options.isRange}
         onCheckChange={handleHasTimeChange}
       />
-      {options?.isRange && (
+      {options.isRange && (
         <Stack>
           <FormLabel mb="0" htmlFor="from">
             From label:
           </FormLabel>
           <DebouncedInput
             id="from"
-            initialValue={options?.labels?.from ?? 'From:'}
+            initialValue={options.labels.from}
             delay={100}
             onChange={handleFromChange}
           />
@@ -61,7 +61,7 @@ export const DateInputSettingsBody = ({
           </FormLabel>
           <DebouncedInput
             id="to"
-            initialValue={options?.labels?.to ?? 'To:'}
+            initialValue={options.labels.to}
             delay={100}
             onChange={handleToChange}
           />
@@ -73,7 +73,7 @@ export const DateInputSettingsBody = ({
         </FormLabel>
         <DebouncedInput
           id="button"
-          initialValue={options?.labels?.button ?? 'Send'}
+          initialValue={options.labels.button}
           delay={100}
           onChange={handleButtonLabelChange}
         />
@@ -83,7 +83,7 @@ export const DateInputSettingsBody = ({
           Save answer in a variable:
         </FormLabel>
         <VariableSearchInput
-          initialVariableId={options?.variableId}
+          initialVariableId={options.variableId}
           onSelectVariable={handleVariableChange}
         />
       </Stack>

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx

@@ -5,7 +5,7 @@ import { EmailInputOptions, Variable } from 'models'
 import React from 'react'
 
 type EmailInputSettingsBodyProps = {
-  options?: EmailInputOptions
+  options: EmailInputOptions
   onOptionsChange: (options: EmailInputOptions) => void
 }
 
@@ -14,9 +14,9 @@ export const EmailInputSettingsBody = ({
   onOptionsChange,
 }: EmailInputSettingsBodyProps) => {
   const handlePlaceholderChange = (placeholder: string) =>
-    onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>
-    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
   const handleVariableChange = (variable?: Variable) =>
     onOptionsChange({ ...options, variableId: variable?.id })
 
@@ -28,7 +28,7 @@ export const EmailInputSettingsBody = ({
         </FormLabel>
         <DebouncedInput
           id="placeholder"
-          initialValue={options?.labels?.placeholder ?? 'Type your email...'}
+          initialValue={options.labels.placeholder}
           delay={100}
           onChange={handlePlaceholderChange}
         />
@@ -39,7 +39,7 @@ export const EmailInputSettingsBody = ({
         </FormLabel>
         <DebouncedInput
           id="button"
-          initialValue={options?.labels?.button ?? 'Send'}
+          initialValue={options.labels.button}
           delay={100}
           onChange={handleButtonLabelChange}
         />
@@ -49,7 +49,7 @@ export const EmailInputSettingsBody = ({
           Save answer in a variable:
         </FormLabel>
         <VariableSearchInput
-          initialVariableId={options?.variableId}
+          initialVariableId={options.variableId}
           onSelectVariable={handleVariableChange}
         />
       </Stack>

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx

@@ -10,7 +10,7 @@ import {
   Tag,
 } from '@chakra-ui/react'
 import { DebouncedInput } from 'components/shared/DebouncedInput'
-import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
 import { GoogleAnalyticsOptions } from 'models'
 import React from 'react'
 

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@chakra-ui/react'
 import { DropdownList } from 'components/shared/DropdownList'
-import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
 import { TableListItemProps } from 'components/shared/TableList'
 import { Cell } from 'models'
 

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx

@@ -1,5 +1,5 @@
 import { FormLabel, HStack, Stack } from '@chakra-ui/react'
-import { SmartNumberInput } from 'components/settings/SmartNumberInput'
+import { SmartNumberInput } from 'components/shared/SmartNumberInput'
 import { DebouncedInput } from 'components/shared/DebouncedInput'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { NumberInputOptions, Variable } from 'models'
@@ -7,7 +7,7 @@ import React from 'react'
 import { removeUndefinedFields } from 'services/utils'
 
 type NumberInputSettingsBodyProps = {
-  options?: NumberInputOptions
+  options: NumberInputOptions
   onOptionsChange: (options: NumberInputOptions) => void
 }
 
@@ -16,9 +16,9 @@ export const NumberInputSettingsBody = ({
   onOptionsChange,
 }: NumberInputSettingsBodyProps) => {
   const handlePlaceholderChange = (placeholder: string) =>
-    onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>
-    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
   const handleMinChange = (min?: number) =>
     onOptionsChange(removeUndefinedFields({ ...options, min }))
   const handleMaxChange = (max?: number) =>
@@ -36,7 +36,7 @@ export const NumberInputSettingsBody = ({
         </FormLabel>
         <DebouncedInput
           id="placeholder"
-          initialValue={options?.labels?.placeholder ?? 'Type your answer...'}
+          initialValue={options.labels.placeholder}
           delay={100}
           onChange={handlePlaceholderChange}
         />
@@ -58,7 +58,7 @@ export const NumberInputSettingsBody = ({
         </FormLabel>
         <SmartNumberInput
           id="min"
-          initialValue={options?.min}
+          value={options.min}
           onValueChange={handleMinChange}
         />
       </HStack>
@@ -68,7 +68,7 @@ export const NumberInputSettingsBody = ({
         </FormLabel>
         <SmartNumberInput
           id="max"
-          initialValue={options?.max}
+          value={options.max}
           onValueChange={handleMaxChange}
         />
       </HStack>
@@ -78,7 +78,7 @@ export const NumberInputSettingsBody = ({
         </FormLabel>
         <SmartNumberInput
           id="step"
-          initialValue={options?.step}
+          value={options.step}
           onValueChange={handleStepChange}
         />
       </HStack>
@@ -87,7 +87,7 @@ export const NumberInputSettingsBody = ({
           Save answer in a variable:
         </FormLabel>
         <VariableSearchInput
-          initialVariableId={options?.variableId}
+          initialVariableId={options.variableId}
           onSelectVariable={handleVariableChange}
         />
       </Stack>

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx

@@ -5,7 +5,7 @@ import { EmailInputOptions, Variable } from 'models'
 import React from 'react'
 
 type PhoneNumberSettingsBodyProps = {
-  options?: EmailInputOptions
+  options: EmailInputOptions
   onOptionsChange: (options: EmailInputOptions) => void
 }
 
@@ -14,9 +14,9 @@ export const PhoneNumberSettingsBody = ({
   onOptionsChange,
 }: PhoneNumberSettingsBodyProps) => {
   const handlePlaceholderChange = (placeholder: string) =>
-    onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>
-    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
   const handleVariableChange = (variable?: Variable) =>
     onOptionsChange({ ...options, variableId: variable?.id })
 
@@ -28,7 +28,7 @@ export const PhoneNumberSettingsBody = ({
         </FormLabel>
         <DebouncedInput
           id="placeholder"
-          initialValue={options?.labels?.placeholder ?? 'Your phone number...'}
+          initialValue={options.labels.placeholder}
           delay={100}
           onChange={handlePlaceholderChange}
         />
@@ -39,7 +39,7 @@ export const PhoneNumberSettingsBody = ({
         </FormLabel>
         <DebouncedInput
           id="button"
-          initialValue={options?.labels?.button ?? 'Send'}
+          initialValue={options.labels.button}
           delay={100}
           onChange={handleButtonLabelChange}
         />
@@ -49,7 +49,7 @@ export const PhoneNumberSettingsBody = ({
           Save answer in a variable:
         </FormLabel>
         <VariableSearchInput
-          initialVariableId={options?.variableId}
+          initialVariableId={options.variableId}
           onSelectVariable={handleVariableChange}
         />
       </Stack>

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx

@@ -5,14 +5,14 @@ import { RedirectOptions } from 'models'
 import React from 'react'
 
 type Props = {
-  options?: RedirectOptions
+  options: RedirectOptions
   onOptionsChange: (options: RedirectOptions) => void
 }
 
 export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
   const handleUrlChange = (url?: string) => onOptionsChange({ ...options, url })
 
-  const handleIsNewTabChange = (isNewTab?: boolean) =>
+  const handleIsNewTabChange = (isNewTab: boolean) =>
     onOptionsChange({ ...options, isNewTab })
 
   return (
@@ -23,7 +23,7 @@ export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
         </FormLabel>
         <DebouncedInput
           id="tracking-id"
-          initialValue={options?.url ?? ''}
+          initialValue={options.url ?? ''}
           placeholder="Type a URL..."
           delay={100}
           onChange={handleUrlChange}
@@ -32,7 +32,7 @@ export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
       <SwitchWithLabel
         id="new-tab"
         label="Open in new tab?"
-        initialValue={options?.isNewTab ?? false}
+        initialValue={options.isNewTab}
         onCheckChange={handleIsNewTabChange}
       />
     </Stack>

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/SetVariableSettingsBody.tsx

@@ -5,7 +5,7 @@ import { SetVariableOptions, Variable } from 'models'
 import React from 'react'
 
 type Props = {
-  options?: SetVariableOptions
+  options: SetVariableOptions
   onOptionsChange: (options: SetVariableOptions) => void
 }
 
@@ -26,7 +26,7 @@ export const SetVariableSettingsBody = ({
         </FormLabel>
         <VariableSearchInput
           onSelectVariable={handleVariableChange}
-          initialVariableId={options?.variableId}
+          initialVariableId={options.variableId}
           id="variable-search"
         />
       </Stack>
@@ -36,7 +36,7 @@ export const SetVariableSettingsBody = ({
         </FormLabel>
         <DebouncedTextarea
           id="expression"
-          initialValue={options?.expressionToEvaluate ?? ''}
+          initialValue={options.expressionToEvaluate ?? ''}
           delay={100}
           onChange={handleExpressionChange}
         />

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx

@@ -6,7 +6,7 @@ import { TextInputOptions, Variable } from 'models'
 import React from 'react'
 
 type TextInputSettingsBodyProps = {
-  options?: TextInputOptions
+  options: TextInputOptions
   onOptionsChange: (options: TextInputOptions) => void
 }
 
@@ -15,9 +15,9 @@ export const TextInputSettingsBody = ({
   onOptionsChange,
 }: TextInputSettingsBodyProps) => {
   const handlePlaceholderChange = (placeholder: string) =>
-    onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>
-    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
   const handleLongChange = (isLong: boolean) =>
     onOptionsChange({ ...options, isLong })
   const handleVariableChange = (variable?: Variable) =>
@@ -37,7 +37,7 @@ export const TextInputSettingsBody = ({
         </FormLabel>
         <DebouncedInput
           id="placeholder"
-          initialValue={options?.labels?.placeholder ?? 'Type your answer...'}
+          initialValue={options.labels.placeholder}
           delay={100}
           onChange={handlePlaceholderChange}
         />
@@ -48,7 +48,7 @@ export const TextInputSettingsBody = ({
         </FormLabel>
         <DebouncedInput
           id="button"
-          initialValue={options?.labels?.button ?? 'Send'}
+          initialValue={options.labels.button}
           delay={100}
           onChange={handleButtonLabelChange}
         />
@@ -58,7 +58,7 @@ export const TextInputSettingsBody = ({
           Save answer in a variable:
         </FormLabel>
         <VariableSearchInput
-          initialVariableId={options?.variableId}
+          initialVariableId={options.variableId}
           onSelectVariable={handleVariableChange}
         />
       </Stack>

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx

@@ -5,7 +5,7 @@ import { UrlInputOptions, Variable } from 'models'
 import React from 'react'
 
 type UrlInputSettingsBodyProps = {
-  options?: UrlInputOptions
+  options: UrlInputOptions
   onOptionsChange: (options: UrlInputOptions) => void
 }
 
@@ -14,9 +14,9 @@ export const UrlInputSettingsBody = ({
   onOptionsChange,
 }: UrlInputSettingsBodyProps) => {
   const handlePlaceholderChange = (placeholder: string) =>
-    onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>
-    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
   const handleVariableChange = (variable?: Variable) =>
     onOptionsChange({ ...options, variableId: variable?.id })
 
@@ -28,7 +28,7 @@ export const UrlInputSettingsBody = ({
         </FormLabel>
         <DebouncedInput
           id="placeholder"
-          initialValue={options?.labels?.placeholder ?? 'Type your URL...'}
+          initialValue={options.labels.placeholder}
           delay={100}
           onChange={handlePlaceholderChange}
         />
@@ -39,7 +39,7 @@ export const UrlInputSettingsBody = ({
         </FormLabel>
         <DebouncedInput
           id="button"
-          initialValue={options?.labels?.button ?? 'Send'}
+          initialValue={options.labels.button}
           delay={100}
           onChange={handleButtonLabelChange}
         />
@@ -49,7 +49,7 @@ export const UrlInputSettingsBody = ({
           Save answer in a variable:
         </FormLabel>
         <VariableSearchInput
-          initialVariableId={options?.variableId}
+          initialVariableId={options.variableId}
           onSelectVariable={handleVariableChange}
         />
       </Stack>

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/WebhookSettings/KeyValueInputs.tsx

@@ -1,5 +1,5 @@
 import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
-import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
 import { TableListItemProps } from 'components/shared/TableList'
 import { KeyValue } from 'models'
 

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx

@@ -10,7 +10,7 @@ import {
   Stack,
   useToast,
 } from '@chakra-ui/react'
-import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
 import { useTypebot } from 'contexts/TypebotContext'
 import {
   HttpMethod,

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent/StepNodeContent.tsx

@@ -103,7 +103,7 @@ export const StepNodeContent = ({ step }: Props) => {
       return <ConditionNodeContent step={step} />
     }
     case LogicStepType.REDIRECT: {
-      if (!step.options) return <Text color={'gray.500'}>Configure...</Text>
+      if (!step.options.url) return <Text color={'gray.500'}>Configure...</Text>
       return <Text isTruncated>Redirect to {step.options?.url}</Text>
     }
     case IntegrationStepType.GOOGLE_SHEETS: {

apps/builder/components/settings/GeneralSettingsForm.tsx

@@ -0,0 +1,33 @@
+import { Flex, FormLabel, Stack, Switch, Text } from '@chakra-ui/react'
+import { GeneralSettings } from 'models'
+import React from 'react'
+
+type Props = {
+  generalSettings: GeneralSettings
+  onGeneralSettingsChange: (generalSettings: GeneralSettings) => void
+}
+
+export const GeneralSettingsForm = ({
+  generalSettings,
+  onGeneralSettingsChange,
+}: Props) => {
+  const handleSwitchChange = () =>
+    onGeneralSettingsChange({
+      isBrandingEnabled: !generalSettings?.isBrandingEnabled,
+    })
+
+  return (
+    <Stack spacing={6}>
+      <Flex justifyContent="space-between" align="center">
+        <FormLabel htmlFor="branding" mb="0">
+          Typebot.io branding
+        </FormLabel>
+        <Switch
+          id="branding"
+          isChecked={generalSettings.isBrandingEnabled}
+          onChange={handleSwitchChange}
+        />
+      </Flex>
+    </Stack>
+  )
+}

apps/builder/components/settings/MetadataForm.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { Metadata } from 'models'
+import {
+  FormLabel,
+  Popover,
+  PopoverTrigger,
+  Stack,
+  Image,
+  PopoverContent,
+} from '@chakra-ui/react'
+import { ImageUploadContent } from 'components/shared/ImageUploadContent'
+import {
+  InputWithVariableButton,
+  TextareaWithVariableButton,
+} from 'components/shared/TextboxWithVariableButton'
+
+type Props = {
+  typebotName: string
+  metadata: Metadata
+  onMetadataChange: (metadata: Metadata) => void
+}
+
+export const MetadataForm = ({
+  typebotName,
+  metadata,
+  onMetadataChange,
+}: Props) => {
+  const handleTitleChange = (title: string) =>
+    onMetadataChange({ ...metadata, title })
+  const handleDescriptionChange = (description: string) =>
+    onMetadataChange({ ...metadata, description })
+  const handleFavIconSubmit = (favIconUrl: string) =>
+    onMetadataChange({ ...metadata, favIconUrl })
+  const handleImageSubmit = (imageUrl: string) =>
+    onMetadataChange({ ...metadata, imageUrl })
+
+  return (
+    <Stack spacing="6">
+      <Stack>
+        <FormLabel mb="0" htmlFor="icon">
+          Icon:
+        </FormLabel>
+        <Popover isLazy>
+          <PopoverTrigger>
+            <Image
+              src={metadata.favIconUrl ?? '/favicon.png'}
+              w="20px"
+              alt="Fav icon"
+              cursor="pointer"
+              _hover={{ filter: 'brightness(.9)' }}
+              transition="filter 200ms"
+              rounded="md"
+            />
+          </PopoverTrigger>
+          <PopoverContent p="4">
+            <ImageUploadContent
+              url={metadata.favIconUrl ?? ''}
+              onSubmit={handleFavIconSubmit}
+              isGiphyEnabled={false}
+            />
+          </PopoverContent>
+        </Popover>
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="image">
+          Image:
+        </FormLabel>
+        <Popover isLazy>
+          <PopoverTrigger>
+            <Image
+              src={metadata.imageUrl ?? '/viewer-preview.png'}
+              alt="Website image"
+              cursor="pointer"
+              _hover={{ filter: 'brightness(.9)' }}
+              transition="filter 200ms"
+              rounded="md"
+            />
+          </PopoverTrigger>
+          <PopoverContent p="4">
+            <ImageUploadContent
+              url={metadata.imageUrl}
+              onSubmit={handleImageSubmit}
+              isGiphyEnabled={false}
+            />
+          </PopoverContent>
+        </Popover>
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="title">
+          Title:
+        </FormLabel>
+        <InputWithVariableButton
+          id="title"
+          initialValue={metadata.title ?? typebotName}
+          delay={100}
+          onChange={handleTitleChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="description">
+          Description:
+        </FormLabel>
+        <TextareaWithVariableButton
+          id="description"
+          initialValue={metadata.description}
+          delay={100}
+          onChange={handleDescriptionChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/components/settings/SettingsContent.tsx

@@ -1,26 +0,0 @@
-import { Flex, Stack } from '@chakra-ui/react'
-import { TypingEmulationSettings } from 'models'
-import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import React from 'react'
-import { TypingEmulation } from './TypingEmulation'
-
-export const SettingsContent = () => {
-  const { typebot, updateTypebot } = useTypebot()
-
-  const handleTypingEmulationUpdate = (
-    typingEmulation: TypingEmulationSettings
-  ) => {
-    if (!typebot) return
-    updateTypebot({ settings: { ...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/SettingsSideMenu.tsx

@@ -0,0 +1,103 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Heading,
+  HStack,
+  Stack,
+} from '@chakra-ui/react'
+import { ChatIcon, CodeIcon, MoreVerticalIcon } from 'assets/icons'
+import { headerHeight } from 'components/shared/TypebotHeader'
+import { useTypebot } from 'contexts/TypebotContext'
+import { GeneralSettings, Metadata, TypingEmulation } from 'models'
+import React from 'react'
+import { GeneralSettingsForm } from './GeneralSettingsForm'
+import { MetadataForm } from './MetadataForm'
+import { TypingEmulationForm } from './TypingEmulationForm'
+
+export const SettingsSideMenu = () => {
+  const { typebot, updateTypebot } = useTypebot()
+
+  const handleTypingEmulationChange = (typingEmulation: TypingEmulation) =>
+    typebot &&
+    updateTypebot({ settings: { ...typebot.settings, typingEmulation } })
+
+  const handleGeneralSettingsChange = (general: GeneralSettings) =>
+    typebot && updateTypebot({ settings: { ...typebot.settings, general } })
+
+  const handleMetadataChange = (metadata: Metadata) =>
+    typebot && updateTypebot({ settings: { ...typebot.settings, metadata } })
+
+  return (
+    <Stack
+      flex="1"
+      maxW="400px"
+      height={`calc(100vh - ${headerHeight}px)`}
+      borderRightWidth={1}
+      pt={10}
+      spacing={10}
+      overflowY="scroll"
+      pb="20"
+    >
+      <Heading fontSize="xl" textAlign="center">
+        Settings
+      </Heading>
+      <Accordion allowMultiple allowToggle>
+        <AccordionItem>
+          <AccordionButton py={6}>
+            <HStack flex="1" pl={2}>
+              <MoreVerticalIcon transform={'rotate(90deg)'} />
+              <Heading fontSize="lg">General</Heading>
+            </HStack>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} px="6">
+            {typebot && (
+              <GeneralSettingsForm
+                generalSettings={typebot.settings.general}
+                onGeneralSettingsChange={handleGeneralSettingsChange}
+              />
+            )}
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionButton py={6}>
+            <HStack flex="1" pl={2}>
+              <ChatIcon />
+              <Heading fontSize="lg">Typing emulation</Heading>
+            </HStack>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} px="6">
+            {typebot && (
+              <TypingEmulationForm
+                typingEmulation={typebot.settings.typingEmulation}
+                onUpdate={handleTypingEmulationChange}
+              />
+            )}
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionButton py={6}>
+            <HStack flex="1" pl={2}>
+              <CodeIcon />
+              <Heading fontSize="lg">Metadata</Heading>
+            </HStack>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} px="6">
+            {typebot && (
+              <MetadataForm
+                typebotName={typebot.name}
+                metadata={typebot.settings.metadata}
+                onMetadataChange={handleMetadataChange}
+              />
+            )}
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Stack>
+  )
+}

apps/builder/components/settings/TypingEmulation.tsx

@@ -1,63 +0,0 @@
-import { Flex, Stack, Switch, Text } from '@chakra-ui/react'
-import { TypingEmulationSettings } from 'models'
-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: speed ?? 0 })
-  }
-
-  const handleMaxDelayChange = (maxDelay?: number) => {
-    if (!typingEmulation) return
-    onUpdate({ ...typingEmulation, maxDelay: maxDelay ?? 0 })
-  }
-
-  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/settings/TypingEmulationForm.tsx

@@ -0,0 +1,69 @@
+import { Flex, FormLabel, Stack, Switch, Text } from '@chakra-ui/react'
+import { TypingEmulation } from 'models'
+import React from 'react'
+import { isDefined } from 'utils'
+import { SmartNumberInput } from '../shared/SmartNumberInput'
+
+type Props = {
+  typingEmulation: TypingEmulation
+  onUpdate: (typingEmulation: TypingEmulation) => void
+}
+
+export const TypingEmulationForm = ({ typingEmulation, onUpdate }: Props) => {
+  const handleSwitchChange = () =>
+    onUpdate({
+      ...typingEmulation,
+      enabled: !typingEmulation.enabled,
+    })
+
+  const handleSpeedChange = (speed?: number) =>
+    isDefined(speed) && onUpdate({ ...typingEmulation, speed })
+
+  const handleMaxDelayChange = (maxDelay?: number) =>
+    isDefined(maxDelay) && onUpdate({ ...typingEmulation, maxDelay })
+
+  return (
+    <Stack spacing={6}>
+      <Flex justifyContent="space-between" align="center">
+        <FormLabel htmlFor="typing-emulation" mb="0">
+          Typing emulation
+        </FormLabel>
+        <Switch
+          id="typing-emulation"
+          isChecked={typingEmulation.enabled}
+          onChange={handleSwitchChange}
+        />
+      </Flex>
+      {typingEmulation.enabled && (
+        <Stack pl={10}>
+          <Flex justify="space-between" align="center">
+            <FormLabel htmlFor="speed" mb="0">
+              Words per minutes:
+            </FormLabel>
+            <SmartNumberInput
+              id="speed"
+              data-testid="speed"
+              value={typingEmulation.speed}
+              onValueChange={handleSpeedChange}
+              maxW="100px"
+              step={30}
+            />
+          </Flex>
+          <Flex justify="space-between" align="center">
+            <FormLabel htmlFor="max-delay" mb="0">
+              Max delay (in seconds):
+            </FormLabel>
+            <SmartNumberInput
+              id="max-delay"
+              data-testid="max-delay"
+              value={typingEmulation.maxDelay}
+              onValueChange={handleMaxDelayChange}
+              maxW="100px"
+              step={0.1}
+            />
+          </Flex>
+        </Stack>
+      )}
+    </Stack>
+  )
+}

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -1,22 +1,27 @@
-import { ChangeEvent, FormEvent, useState } from 'react'
+import { ChangeEvent, FormEvent, useEffect, useState } from 'react'
 import { Button, HStack, Input, Stack } from '@chakra-ui/react'
 import { SearchContextManager } from '@giphy/react-components'
 import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearch } from './GiphySearch'
 import { useTypebot } from 'contexts/TypebotContext'
-import { ImageBubbleContent } from 'models'
+import { useDebounce } from 'use-debounce'
 
 type Props = {
-  content?: ImageBubbleContent
+  url?: string
-  onSubmit: (content: ImageBubbleContent) => void
+  onSubmit: (url: string) => void
+  isGiphyEnabled?: boolean
 }
 
-export const ImageUploadContent = ({ content, onSubmit }: Props) => {
+export const ImageUploadContent = ({
+  url,
+  onSubmit,
+  isGiphyEnabled = true,
+}: Props) => {
   const [currentTab, setCurrentTab] = useState<'link' | 'upload' | 'giphy'>(
     'upload'
   )
 
-  const handleSubmit = (url: string) => onSubmit({ url })
+  const handleSubmit = (url: string) => onSubmit(url)
   return (
     <Stack>
       <HStack>
@@ -34,7 +39,7 @@ export const ImageUploadContent = ({ content, onSubmit }: Props) => {
         >
           Embed link
         </Button>
-        {process.env.NEXT_PUBLIC_GIPHY_API_KEY && (
+        {process.env.NEXT_PUBLIC_GIPHY_API_KEY && isGiphyEnabled && (
           <Button
             variant={currentTab === 'giphy' ? 'solid' : 'ghost'}
             onClick={() => setCurrentTab('giphy')}
@@ -45,11 +50,7 @@ export const ImageUploadContent = ({ content, onSubmit }: Props) => {
         )}
       </HStack>
 
-      <BodyContent
+      <BodyContent tab={currentTab} onSubmit={handleSubmit} url={url} />
-        tab={currentTab}
-        onSubmit={handleSubmit}
-        url={content?.url}
-      />
     </Stack>
   )
 }
@@ -93,26 +94,23 @@ const UploadFileContent = ({ onNewUrl }: ContentProps) => {
 
 const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => {
   const [imageUrl, setImageUrl] = useState(initialUrl ?? '')
+  const [debouncedImageUrl] = useDebounce(imageUrl, 100)
+
+  useEffect(() => {
+    if (initialUrl === debouncedImageUrl) return
+    onNewUrl(imageUrl)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedImageUrl])
 
   const handleImageUrlChange = (e: ChangeEvent<HTMLInputElement>) =>
     setImageUrl(e.target.value)
 
-  const handleUrlSubmit = (e: FormEvent) => {
-    e.preventDefault()
-    onNewUrl(imageUrl)
-  }
-
   return (
-    <Stack as="form" onSubmit={handleUrlSubmit}>
+    <Input
-      <Input
+      placeholder={'Paste the image link...'}
-        placeholder={'Paste the image link...'}
+      onChange={handleImageUrlChange}
-        onChange={handleImageUrlChange}
+      value={imageUrl}
-        value={imageUrl}
+    />
-      />
-      <Button type="submit" disabled={imageUrl === ''} colorScheme="blue">
-        Embed image
-      </Button>
-    </Stack>
   )
 }
 

apps/builder/components/shared/Info.tsx

@@ -0,0 +1,9 @@
+import { Alert, AlertIcon, AlertProps } from '@chakra-ui/react'
+import React from 'react'
+
+export const Info = (props: AlertProps) => (
+  <Alert status="info" bgColor={'blue.50'} rounded="md" {...props}>
+    <AlertIcon />
+    {props.children}
+  </Alert>
+)

apps/builder/components/shared/SmartNumberInput.tsx

@@ -6,29 +6,29 @@ import {
   NumberIncrementStepper,
   NumberDecrementStepper,
 } from '@chakra-ui/react'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 
 export const SmartNumberInput = ({
-  initialValue,
+  value,
   onValueChange,
   ...props
 }: {
-  initialValue?: number
+  value?: number
   onValueChange: (value?: number) => void
 } & NumberInputProps) => {
-  const [value, setValue] = useState(initialValue?.toString() ?? '')
+  const [currentValue, setCurrentValue] = useState(value?.toString() ?? '')
 
-  useEffect(() => {
+  const handleValueChange = (value: string) => {
+    setCurrentValue(value)
     if (value.endsWith('.') || value.endsWith(',')) return
-    if (value === '') onValueChange(undefined)
+    if (value === '') return onValueChange(undefined)
     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}>
+    <NumberInput onChange={handleValueChange} value={currentValue} {...props}>
       <NumberInputField />
       <NumberInputStepper>
         <NumberIncrementStepper />

apps/builder/components/shared/TextboxWithVariableButton/InputWithVariableButton.tsx

@@ -0,0 +1,10 @@
+import { Input } from '@chakra-ui/react'
+import React from 'react'
+import {
+  TextBoxWithVariableButton,
+  TextBoxWithVariableButtonProps,
+} from './TextboxWithVariableButton'
+
+export const InputWithVariableButton = (
+  props: Omit<TextBoxWithVariableButtonProps, 'TextBox'>
+) => <TextBoxWithVariableButton TextBox={Input} {...props} />

apps/builder/components/shared/TextboxWithVariableButton/TextareaWithVariableButton.tsx

@@ -0,0 +1,10 @@
+import { Textarea } from '@chakra-ui/react'
+import React from 'react'
+import {
+  TextBoxWithVariableButton,
+  TextBoxWithVariableButtonProps,
+} from './TextboxWithVariableButton'
+
+export const TextareaWithVariableButton = (
+  props: Omit<TextBoxWithVariableButtonProps, 'TextBox'>
+) => <TextBoxWithVariableButton TextBox={Textarea} {...props} />

apps/builder/components/shared/TextboxWithVariableButton/TextboxWithVariableButton.tsx

@@ -1,31 +1,40 @@
 import {
+  ComponentWithAs,
   Flex,
   HStack,
   IconButton,
-  Input,
   InputProps,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  TextareaProps,
   Tooltip,
 } from '@chakra-ui/react'
 import { UserIcon } from 'assets/icons'
 import { Variable } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
 import { useDebounce } from 'use-debounce'
-import { VariableSearchInput } from './VariableSearchInput'
+import { VariableSearchInput } from '../VariableSearchInput'
 
-export const InputWithVariableButton = ({
+export type TextBoxWithVariableButtonProps = {
-  initialValue,
-  onChange,
-  delay,
-  ...props
-}: {
   initialValue: string
   onChange: (value: string) => void
   delay?: number
-} & Omit<InputProps, 'onChange'>) => {
+  TextBox:
-  const inputRef = useRef<HTMLInputElement | null>(null)
+    | ComponentWithAs<'textarea', TextareaProps>
+    | ComponentWithAs<'input', InputProps>
+} & Omit<InputProps & TextareaProps, 'onChange'>
+
+export const TextBoxWithVariableButton = ({
+  initialValue,
+  onChange,
+  delay,
+  TextBox,
+  ...props
+}: TextBoxWithVariableButtonProps) => {
+  const textBoxRef = useRef<(HTMLInputElement & HTMLTextAreaElement) | null>(
+    null
+  )
   const [value, setValue] = useState(initialValue)
   const [debouncedValue] = useDebounce(value, delay ?? 100)
   const [carretPosition, setCarretPosition] = useState<number>(0)
@@ -36,48 +45,49 @@ export const InputWithVariableButton = ({
   }, [debouncedValue])
 
   const handleVariableSelected = (variable?: Variable) => {
-    if (!inputRef.current || !variable) return
+    if (!textBoxRef.current || !variable) return
     const cursorPosition = carretPosition
-    const textBeforeCursorPosition = inputRef.current.value.substring(
+    const textBeforeCursorPosition = textBoxRef.current.value.substring(
       0,
       cursorPosition
     )
-    const textAfterCursorPosition = inputRef.current.value.substring(
+    const textAfterCursorPosition = textBoxRef.current.value.substring(
       cursorPosition,
-      inputRef.current.value.length
+      textBoxRef.current.value.length
     )
     setValue(
       textBeforeCursorPosition +
         `{{${variable.name}}}` +
         textAfterCursorPosition
     )
-    inputRef.current.focus()
+    textBoxRef.current.focus()
     setTimeout(() => {
-      if (!inputRef.current) return
+      if (!textBoxRef.current) return
-      inputRef.current.selectionStart = inputRef.current.selectionEnd =
+      textBoxRef.current.selectionStart = textBoxRef.current.selectionEnd =
         carretPosition + `{{${variable.name}}}`.length
-      setCarretPosition(inputRef.current.selectionStart)
+      setCarretPosition(textBoxRef.current.selectionStart)
     }, 100)
   }
 
   const handleKeyUp = () => {
-    if (!inputRef.current?.selectionStart) return
+    if (!textBoxRef.current?.selectionStart) return
-    setCarretPosition(inputRef.current.selectionStart)
+    setCarretPosition(textBoxRef.current.selectionStart)
   }
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+  const handleChange = (
-    setValue(e.target.value)
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => setValue(e.target.value)
 
   return (
-    <HStack spacing={0}>
+    <HStack spacing={0} align={'flex-end'}>
-      <Input
+      <TextBox
-        ref={inputRef}
+        ref={textBoxRef}
         onKeyUp={handleKeyUp}
         onClick={handleKeyUp}
         value={value}
         onChange={handleChange}
-        {...props}
         bgColor={'white'}
+        {...props}
       />
       <Popover matchWidth isLazy>
         <PopoverTrigger>

apps/builder/components/shared/TextboxWithVariableButton/index.tsx

@@ -0,0 +1,2 @@
+export { InputWithVariableButton } from './InputWithVariableButton'
+export { TextareaWithVariableButton } from './TextareaWithVariableButton'

apps/builder/components/theme/ChatSettings/ButtonsTheme.tsx

@@ -4,13 +4,10 @@ import React from 'react'
 import { ColorPicker } from '../GeneralSettings/ColorPicker'
 
 type Props = {
-  buttons?: ContainerColors
+  buttons: ContainerColors
   onButtonsChange: (buttons: ContainerColors) => void
 }
 
-const defaultBackgroundColor = '#0042da'
-const defaultTextColor = '#ffffff'
-
 export const ButtonsTheme = ({ buttons, onButtonsChange }: Props) => {
   const handleBackgroundChange = (backgroundColor: string) =>
     onButtonsChange({ ...buttons, backgroundColor })
@@ -22,14 +19,14 @@ export const ButtonsTheme = ({ buttons, onButtonsChange }: Props) => {
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker
-          initialColor={buttons?.backgroundColor ?? defaultBackgroundColor}
+          initialColor={buttons.backgroundColor}
           onColorChange={handleBackgroundChange}
         />
       </Flex>
       <Flex justify="space-between" align="center">
         <Text>Text:</Text>
         <ColorPicker
-          initialColor={buttons?.color ?? defaultTextColor}
+          initialColor={buttons.color}
           onColorChange={handleTextChange}
         />
       </Flex>

apps/builder/components/theme/ChatSettings/ChatThemeSettings.tsx

@@ -7,7 +7,7 @@ import { HostBubbles } from './HostBubbles'
 import { InputsTheme } from './InputsTheme'
 
 type Props = {
-  chatTheme?: ChatTheme
+  chatTheme: ChatTheme
   onChatThemeChange: (chatTheme: ChatTheme) => void
 }
 
@@ -26,28 +26,28 @@ export const ChatThemeSettings = ({ chatTheme, onChatThemeChange }: Props) => {
       <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
         <Heading fontSize="lg">Bot bubbles</Heading>
         <HostBubbles
-          hostBubbles={chatTheme?.hostBubbles}
+          hostBubbles={chatTheme.hostBubbles}
           onHostBubblesChange={handleHostBubblesChange}
         />
       </Stack>
       <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
         <Heading fontSize="lg">User bubbles</Heading>
         <GuestBubbles
-          guestBubbles={chatTheme?.guestBubbles}
+          guestBubbles={chatTheme.guestBubbles}
           onGuestBubblesChange={handleGuestBubblesChange}
         />
       </Stack>
       <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
         <Heading fontSize="lg">Buttons</Heading>
         <ButtonsTheme
-          buttons={chatTheme?.buttons}
+          buttons={chatTheme.buttons}
           onButtonsChange={handleButtonsChange}
         />
       </Stack>
       <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
         <Heading fontSize="lg">Inputs</Heading>
         <InputsTheme
-          inputs={chatTheme?.inputs}
+          inputs={chatTheme.inputs}
           onInputsChange={handleInputsChange}
         />
       </Stack>

apps/builder/components/theme/ChatSettings/GuestBubbles.tsx

@@ -4,12 +4,10 @@ import React from 'react'
 import { ColorPicker } from '../GeneralSettings/ColorPicker'
 
 type Props = {
-  guestBubbles?: ContainerColors
+  guestBubbles: ContainerColors
   onGuestBubblesChange: (hostBubbles: ContainerColors) => void
 }
 
-const defaultBackgroundColor = '#ff8e21'
-const defaultTextColor = '#ffffff'
 export const GuestBubbles = ({ guestBubbles, onGuestBubblesChange }: Props) => {
   const handleBackgroundChange = (backgroundColor: string) =>
     onGuestBubblesChange({ ...guestBubbles, backgroundColor })
@@ -21,14 +19,14 @@ export const GuestBubbles = ({ guestBubbles, onGuestBubblesChange }: Props) => {
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker
-          initialColor={guestBubbles?.backgroundColor ?? defaultBackgroundColor}
+          initialColor={guestBubbles.backgroundColor}
           onColorChange={handleBackgroundChange}
         />
       </Flex>
       <Flex justify="space-between" align="center">
         <Text>Text:</Text>
         <ColorPicker
-          initialColor={guestBubbles?.color ?? defaultTextColor}
+          initialColor={guestBubbles.color}
           onColorChange={handleTextChange}
         />
       </Flex>

apps/builder/components/theme/ChatSettings/HostBubbles.tsx

@@ -4,13 +4,10 @@ import React from 'react'
 import { ColorPicker } from '../GeneralSettings/ColorPicker'
 
 type Props = {
-  hostBubbles?: ContainerColors
+  hostBubbles: ContainerColors
   onHostBubblesChange: (hostBubbles: ContainerColors) => void
 }
 
-const defaultBackgroundColor = '#f7f8ff'
-const defaultTextColor = '#303235'
-
 export const HostBubbles = ({ hostBubbles, onHostBubblesChange }: Props) => {
   const handleBackgroundChange = (backgroundColor: string) =>
     onHostBubblesChange({ ...hostBubbles, backgroundColor })
@@ -22,14 +19,14 @@ export const HostBubbles = ({ hostBubbles, onHostBubblesChange }: Props) => {
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker
-          initialColor={hostBubbles?.backgroundColor ?? defaultBackgroundColor}
+          initialColor={hostBubbles.backgroundColor}
           onColorChange={handleBackgroundChange}
         />
       </Flex>
       <Flex justify="space-between" align="center">
         <Text>Text:</Text>
         <ColorPicker
-          initialColor={hostBubbles?.color ?? defaultTextColor}
+          initialColor={hostBubbles.color}
           onColorChange={handleTextChange}
         />
       </Flex>

apps/builder/components/theme/ChatSettings/InputsTheme.tsx

@@ -4,14 +4,10 @@ import React from 'react'
 import { ColorPicker } from '../GeneralSettings/ColorPicker'
 
 type Props = {
-  inputs?: InputColors
+  inputs: InputColors
   onInputsChange: (buttons: InputColors) => void
 }
 
-const defaultBackgroundColor = '#ffffff'
-const defaultTextColor = '#303235'
-const defaultPlaceholderColor = '#9095A0'
-
 export const InputsTheme = ({ inputs, onInputsChange }: Props) => {
   const handleBackgroundChange = (backgroundColor: string) =>
     onInputsChange({ ...inputs, backgroundColor })
@@ -25,21 +21,21 @@ export const InputsTheme = ({ inputs, onInputsChange }: Props) => {
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker
-          initialColor={inputs?.backgroundColor ?? defaultBackgroundColor}
+          initialColor={inputs.backgroundColor}
           onColorChange={handleBackgroundChange}
         />
       </Flex>
       <Flex justify="space-between" align="center">
         <Text>Text:</Text>
         <ColorPicker
-          initialColor={inputs?.color ?? defaultTextColor}
+          initialColor={inputs.color}
           onColorChange={handleTextChange}
         />
       </Flex>
       <Flex justify="space-between" align="center">
         <Text>Placeholder text:</Text>
         <ColorPicker
-          initialColor={inputs?.placeholderColor ?? defaultPlaceholderColor}
+          initialColor={inputs.placeholderColor}
           onColorChange={handlePlaceholderChange}
         />
       </Flex>

apps/builder/components/theme/GeneralSettings/ColorPicker.tsx

@@ -11,7 +11,7 @@ import {
   Input,
   Button,
 } from '@chakra-ui/react'
-import React, { useEffect, useState } from 'react'
+import React, { ChangeEvent, useEffect, useState } from 'react'
 
 const colorsSelection: `#${string}`[] = [
   '#264653',
@@ -38,6 +38,9 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [color])
 
+  const handleColorChange = (e: ChangeEvent<HTMLInputElement>) =>
+    setColor(e.target.value)
+
   return (
     <Popover variant="picker">
       <PopoverTrigger>
@@ -89,9 +92,7 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
             aria-label="Color value"
             size="sm"
             value={color}
-            onChange={(e) => {
+            onChange={handleColorChange}
-              setColor(e.target.value)
-            }}
           />
         </PopoverBody>
       </PopoverContent>

apps/builder/components/theme/GeneralSettings/GeneralSettings.tsx

@@ -1,16 +1,14 @@
 import { Stack } from '@chakra-ui/react'
-import { Background, BackgroundType, GeneralTheme } from 'models'
+import { Background, GeneralTheme } from 'models'
 import React from 'react'
 import { BackgroundSelector } from './BackgroundSelector'
 import { FontSelector } from './FontSelector'
 
 type Props = {
-  generalTheme?: GeneralTheme
+  generalTheme: GeneralTheme
   onGeneralThemeChange: (general: GeneralTheme) => void
 }
 
-const defaultFont = 'Open Sans'
-
 export const GeneralSettings = ({
   generalTheme,
   onGeneralThemeChange,
@@ -24,11 +22,11 @@ export const GeneralSettings = ({
   return (
     <Stack spacing={6}>
       <FontSelector
-        activeFont={generalTheme?.font ?? defaultFont}
+        activeFont={generalTheme.font}
         onSelectFont={handleSelectFont}
       />
       <BackgroundSelector
-        background={generalTheme?.background ?? { type: BackgroundType.NONE }}
+        background={generalTheme.background}
         onBackgroundChange={handleBackgroundChange}
       />
     </Stack>

apps/builder/components/theme/ThemeSideMenu.tsx

@@ -17,17 +17,17 @@ import { ChatThemeSettings } from './ChatSettings'
 import { CustomCssSettings } from './CustomCssSettings/CustomCssSettings'
 import { GeneralSettings } from './GeneralSettings'
 
-export const SideMenu = () => {
+export const ThemeSideMenu = () => {
   const { typebot, updateTypebot } = useTypebot()
 
   const handleChatThemeChange = (chat: ChatTheme) =>
-    updateTypebot({ theme: { ...typebot?.theme, chat } })
+    typebot && updateTypebot({ theme: { ...typebot.theme, chat } })
 
   const handleGeneralThemeChange = (general: GeneralTheme) =>
-    updateTypebot({ theme: { ...typebot?.theme, general } })
+    typebot && updateTypebot({ theme: { ...typebot.theme, general } })
 
   const handleCustomCssChange = (customCss: string) =>
-    updateTypebot({ theme: { ...typebot?.theme, customCss } })
+    typebot && updateTypebot({ theme: { ...typebot.theme, customCss } })
 
   return (
     <Stack
@@ -53,10 +53,12 @@ export const SideMenu = () => {
             <AccordionIcon />
           </AccordionButton>
           <AccordionPanel pb={4}>
-            <GeneralSettings
+            {typebot && (
-              generalTheme={typebot?.theme?.general}
+              <GeneralSettings
-              onGeneralThemeChange={handleGeneralThemeChange}
+                generalTheme={typebot.theme.general}
-            />
+                onGeneralThemeChange={handleGeneralThemeChange}
+              />
+            )}
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem>
@@ -68,10 +70,12 @@ export const SideMenu = () => {
             <AccordionIcon />
           </AccordionButton>
           <AccordionPanel pb={4}>
-            <ChatThemeSettings
+            {typebot && (
-              chatTheme={typebot?.theme?.chat}
+              <ChatThemeSettings
-              onChatThemeChange={handleChatThemeChange}
+                chatTheme={typebot.theme.chat}
-            />
+                onChatThemeChange={handleChatThemeChange}
+              />
+            )}
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem>
@@ -83,10 +87,12 @@ export const SideMenu = () => {
             <AccordionIcon />
           </AccordionButton>
           <AccordionPanel pb={4}>
-            <CustomCssSettings
+            {typebot && (
-              customCss={typebot?.theme?.customCss}
+              <CustomCssSettings
-              onCustomCssChange={handleCustomCssChange}
+                customCss={typebot.theme.customCss}
-            />
+                onCustomCssChange={handleCustomCssChange}
+              />
+            )}
           </AccordionPanel>
         </AccordionItem>
       </Accordion>

apps/builder/contexts/UserContext.tsx

@@ -62,9 +62,12 @@ export const UserContext = ({ children }: { children: ReactNode }) => {
   useEffect(() => {
     if (!router.isReady) return
     if (status === 'loading') return
-    if (status === 'unauthenticated') router.replace('/signin')
+    if (status === 'unauthenticated' && !isSigningIn())
+      router.replace('/signin')
   }, [status, router])
 
+  const isSigningIn = () => ['/signin', '/register'].includes(router.pathname)
+
   const updateUser = (newUser: Partial<User>) => {
     if (!isDefined(user)) return
     setUser({ ...user, ...newUser })

apps/builder/cypress/fixtures/typebots/integrations/googleSheets.json

@@ -94,12 +94,23 @@
     "allIds": ["benDCcLMUWNvi6Fg6CXE9H", "6Tax9rw7L8kmRn9JRD2Mrg"]
   },
   "theme": {
-    "general": {
+    "chat": {
-      "font": "Open Sans",
+      "inputs": {
-      "background": { "type": "None", "content": "#ffffff" }
+        "color": "#303235",
-    }
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
   },
   "settings": {
+    "general": { "isBrandingEnabled": true },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
     "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
   },
   "publicId": null

apps/builder/cypress/fixtures/typebots/integrations/googleSheetsGet.json

@@ -132,12 +132,23 @@
     ]
   },
   "theme": {
-    "general": {
+    "chat": {
-      "font": "Open Sans",
+      "inputs": {
-      "background": { "type": "None", "content": "#ffffff" }
+        "color": "#303235",
-    }
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
   },
   "settings": {
+    "general": { "isBrandingEnabled": true },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
     "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
   },
   "publicId": null

apps/builder/cypress/fixtures/typebots/integrations/webhook.json

@@ -138,12 +138,23 @@
     "allIds": ["25yX9DnQgdafpdAjfAu5Fp", "oxEEtym3NfDf34NCipzjRQ"]
   },
   "theme": {
-    "general": {
+    "chat": {
-      "font": "Open Sans",
+      "inputs": {
-      "background": { "type": "None", "content": "#ffffff" }
+        "color": "#303235",
-    }
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
   },
   "settings": {
+    "general": { "isBrandingEnabled": true },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
     "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
   },
   "publicId": null

apps/builder/cypress/fixtures/typebots/integrations/webhookPreview.json

@@ -252,12 +252,23 @@
     ]
   },
   "theme": {
-    "general": {
+    "chat": {
-      "font": "Open Sans",
+      "inputs": {
-      "background": { "type": "None", "content": "#ffffff" }
+        "color": "#303235",
-    }
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
   },
   "settings": {
+    "general": { "isBrandingEnabled": true },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
     "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
   },
   "publicId": null

apps/builder/cypress/fixtures/typebots/logic/condition.json

@@ -235,12 +235,23 @@
     ]
   },
   "theme": {
-    "general": {
+    "chat": {
-      "font": "Open Sans",
+      "inputs": {
-      "background": { "type": "None", "content": "#ffffff" }
+        "color": "#303235",
-    }
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
   },
   "settings": {
+    "general": { "isBrandingEnabled": true },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
     "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
   },
   "publicId": null

apps/builder/cypress/fixtures/typebots/logic/redirect.json

@@ -52,7 +52,8 @@
       "sqNGop2aYkXRvJqb9nGtFbD": {
         "id": "sqNGop2aYkXRvJqb9nGtFbD",
         "blockId": "bnsxmer7DD2R9DogoXTsvHJ",
-        "type": "Redirect"
+        "type": "Redirect",
+        "options": { "isNewTab": false }
       }
     },
     "allIds": [
@@ -96,12 +97,23 @@
     "allIds": ["totLsWG6AQfcFT39CsZwDy", "7KgqWB88ufzhDwzvwHuEbN"]
   },
   "theme": {
-    "general": {
+    "chat": {
-      "font": "Open Sans",
+      "inputs": {
-      "background": { "type": "None", "content": "#ffffff" }
+        "color": "#303235",
-    }
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
   },
   "settings": {
+    "general": { "isBrandingEnabled": true },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
     "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
   },
   "publicId": null

apps/builder/cypress/fixtures/typebots/logic/setVariable.json

@@ -54,7 +54,12 @@
         "id": "s8n3nJajsBaYqrFeRYVvcf6",
         "blockId": "bwWRAaX5m6NZyZ9jjpXmWSb",
         "type": "number input",
-        "edgeId": "dcJedLC7qsLtsmm1wbiFFc"
+        "edgeId": "dcJedLC7qsLtsmm1wbiFFc",
+        "options": {
+          "labels": {
+            "placeholder": "Type a number..."
+          }
+        }
       },
       "sqMVMXeRYp4inLcRqej2Wac": {
         "id": "sqMVMXeRYp4inLcRqej2Wac",
@@ -71,13 +76,15 @@
       "shfL5ueQDuj2RPcJPWZGArT": {
         "id": "shfL5ueQDuj2RPcJPWZGArT",
         "blockId": "baUyUnNBxZzPe1z5PqE4NkD",
-        "type": "Set variable"
+        "type": "Set variable",
+        "options": {}
       },
       "sugJ6xN3jFys1CjWfsxGhiJ": {
         "id": "sugJ6xN3jFys1CjWfsxGhiJ",
         "blockId": "baUyUnNBxZzPe1z5PqE4NkD",
         "type": "Set variable",
-        "edgeId": "sA5gvCVVBVYdGsdeSGF5ei"
+        "edgeId": "sA5gvCVVBVYdGsdeSGF5ei",
+        "options": {}
       },
       "shR7ae3iNEvB6arCSu7wVFF": {
         "id": "shR7ae3iNEvB6arCSu7wVFF",
@@ -141,12 +148,23 @@
     ]
   },
   "theme": {
-    "general": {
+    "chat": {
-      "font": "Open Sans",
+      "inputs": {
-      "background": { "type": "None", "content": "#ffffff" }
+        "color": "#303235",
-    }
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
   },
   "settings": {
+    "general": { "isBrandingEnabled": true },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
     "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
   },
   "publicId": null

apps/builder/cypress/fixtures/typebots/singleChoiceTarget.json

@@ -154,12 +154,23 @@
     ]
   },
   "theme": {
-    "general": {
+    "chat": {
-      "font": "Open Sans",
+      "inputs": {
-      "background": { "type": "None", "content": "#ffffff" }
+        "color": "#303235",
-    }
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
   },
   "settings": {
+    "general": { "isBrandingEnabled": true },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
     "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
   },
   "publicId": null

apps/builder/cypress/fixtures/typebots/theme/theme.json

@@ -136,12 +136,23 @@
     "allIds": ["25yX9DnQgdafpdAjfAu5Fp", "6e4Sbp8pGTvBQYtCk2qXbN"]
   },
   "theme": {
-    "general": {
+    "chat": {
-      "font": "Open Sans",
+      "inputs": {
-      "background": { "type": "None", "content": "#ffffff" }
+        "color": "#303235",
-    }
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
   },
   "settings": {
+    "general": { "isBrandingEnabled": true },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
     "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
   },
   "publicId": null

apps/builder/cypress/plugins/data.ts

@@ -1,7 +1,10 @@
-import { Step, InputStepType } from 'models'
+import { Step } from 'models'
 import { parseTestTypebot } from './utils'
 
-export const userIds = ['user1', 'user2']
+export const users = [
+  { id: 'user1', email: 'test1@gmail.com' },
+  { id: 'user2', email: 'test2@gmail.com' },
+]
 
 export const createTypebotWithStep = (step: Omit<Step, 'id' | 'blockId'>) => {
   cy.task(
@@ -9,21 +12,15 @@ export const createTypebotWithStep = (step: Omit<Step, 'id' | 'blockId'>) => {
     parseTestTypebot({
       id: 'typebot3',
       name: 'Typebot #3',
-      ownerId: userIds[1],
+      ownerId: users[1].id,
       steps: {
         byId: {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          //@ts-ignore
           step1: {
             ...step,
             id: 'step1',
             blockId: 'block1',
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-ignore
-            options:
-              step.type === InputStepType.CHOICE
-                ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                  //@ts-ignore
-                  { itemIds: ['item1'] }
-                : undefined,
           },
         },
         allIds: ['step1'],
@@ -39,13 +36,10 @@ export const createTypebotWithStep = (step: Omit<Step, 'id' | 'blockId'>) => {
         },
         allIds: ['block1'],
       },
-      choiceItems:
+      choiceItems: {
-        step.type === InputStepType.CHOICE
+        byId: { item1: { stepId: 'step1', id: 'item1' } },
-          ? {
+        allIds: ['item1'],
-              byId: { item1: { stepId: 'step1', id: 'item1' } },
+      },
-              allIds: ['item1'],
-            }
-          : undefined,
     })
   )
 }

apps/builder/cypress/plugins/database.ts

@@ -1,7 +1,13 @@
-import { InputStepType, PublicTypebot, Typebot } from 'models'
+import {
+  defaultTextInputOptions,
+  InputStepType,
+  PublicTypebot,
+  TextInputStep,
+  Typebot,
+} from 'models'
 import { CredentialsType, Plan, PrismaClient } from 'db'
 import { parseTestTypebot } from './utils'
-import { userIds } from './data'
+import { users } from './data'
 
 const prisma = new PrismaClient()
 
@@ -23,10 +29,9 @@ export const createTypebot = (typebot: Typebot) =>
 const createUsers = () =>
   prisma.user.createMany({
     data: [
-      { id: userIds[0], email: 'test1@gmail.com', emailVerified: new Date() },
+      { ...users[0], emailVerified: new Date() },
       {
-        id: userIds[1],
+        ...users[1],
-        email: 'test2@gmail.com',
         emailVerified: new Date(),
         plan: Plan.PRO,
         stripeId: 'stripe-test2',
@@ -39,7 +44,7 @@ const createCredentials = (refresh_token: string) =>
     data: [
       {
         name: 'test2@gmail.com',
-        ownerId: userIds[1],
+        ownerId: users[1].id,
         type: CredentialsType.GOOGLE_SHEETS,
         data: {
           expiry_date: 1642441058842,
@@ -53,7 +58,7 @@ const createCredentials = (refresh_token: string) =>
 
 const createFolders = () =>
   prisma.dashboardFolder.createMany({
-    data: [{ ownerId: userIds[1], name: 'Folder #1', id: 'folder1' }],
+    data: [{ ownerId: users[1].id, name: 'Folder #1', id: 'folder1' }],
   })
 
 const createTypebots = async () => {
@@ -61,7 +66,7 @@ const createTypebots = async () => {
     ...parseTestTypebot({
       id: 'typebot2',
       name: 'Typebot #2',
-      ownerId: userIds[1],
+      ownerId: users[1].id,
       blocks: {
         byId: {
           block1: {
@@ -79,7 +84,8 @@ const createTypebots = async () => {
             id: 'step1',
             type: InputStepType.TEXT,
             blockId: 'block1',
-          },
+            options: defaultTextInputOptions,
+          } as TextInputStep,
         },
         allIds: ['step1'],
       },
@@ -91,7 +97,7 @@ const createTypebots = async () => {
         ...parseTestTypebot({
           id: 'typebot1',
           name: 'Typebot #1',
-          ownerId: userIds[1],
+          ownerId: users[1].id,
           blocks: { byId: {}, allIds: [] },
           steps: { byId: {}, allIds: [] },
         }),
@@ -115,6 +121,7 @@ const createResults = () => {
           createdAt: new Date(
             today.setTime(today.getTime() + 1000 * 60 * 60 * 24 * idx)
           ),
+          isCompleted: false,
         }
       }),
     ],
@@ -153,5 +160,5 @@ const parseTypebotToPublicTypebot = (
 
 export const loadRawTypebotInDatabase = (typebot: Typebot) =>
   prisma.typebot.create({
-    data: { ...typebot, id: 'typebot4', ownerId: userIds[1] } as any,
+    data: { ...typebot, id: 'typebot4', ownerId: users[1].id } as any,
   })

apps/builder/cypress/plugins/utils.ts

@@ -1,12 +1,11 @@
 import {
   Block,
-  Theme,
-  BackgroundType,
-  Settings,
   Typebot,
   Table,
   Step,
   ChoiceItem,
+  defaultTheme,
+  defaultSettings,
 } from 'models'
 
 export const parseTestTypebot = ({
@@ -24,26 +23,13 @@ export const parseTestTypebot = ({
   steps: Table<Step>
   choiceItems?: Table<ChoiceItem>
 }): Typebot => {
-  const theme: Theme = {
-    general: {
-      font: 'Open Sans',
-      background: { type: BackgroundType.NONE, content: '#ffffff' },
-    },
-  }
-  const settings: Settings = {
-    typingEmulation: {
-      enabled: true,
-      speed: 300,
-      maxDelay: 1.5,
-    },
-  }
   return {
     id,
     folderId: null,
     name,
     ownerId,
-    theme,
+    theme: defaultTheme,
-    settings,
+    settings: defaultSettings,
     createdAt: new Date(),
     blocks: {
       byId: {

apps/builder/cypress/support/index.ts

@@ -40,12 +40,25 @@ declare global {
   }
 }
 
+const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
 Cypress.on('uncaught:exception', (err) => {
-  if (err.message.includes('ResizeObserver loop limit exceeded')) {
+  if (resizeObserverLoopErrRe.test(err.message)) {
     return false
   }
 })
 
+export const prepareDbAndSignIn = () => {
+  cy.signOut()
+  cy.task('seed')
+  cy.signIn(users[1].email)
+}
+
+export const removePreventReload = () => {
+  cy.window().then((win) => {
+    win.removeEventListener('beforeunload', preventUserFromRefreshing)
+  })
+}
+
 export const getIframeBody = () => {
   return cy
     .get('#typebot-iframe')
@@ -57,6 +70,8 @@ export const getIframeBody = () => {
 // Import commands.js using ES2015 syntax:
 import '@testing-library/cypress/add-commands'
 import 'cypress-file-upload'
+import { users } from 'cypress/plugins/data'
+import { preventUserFromRefreshing } from 'cypress/plugins/utils'
 import './commands'
 
 // Alternatively you can use CommonJS syntax:

apps/builder/cypress/tests/account.ts

@@ -1,4 +1,5 @@
-import { userIds } from 'cypress/plugins/data'
+import { users } from 'cypress/plugins/data'
+import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
 
 describe('Account page', () => {
   before(() => {
@@ -11,13 +12,12 @@ describe('Account page', () => {
     )
   })
 
-  beforeEach(() => {
+  beforeEach(prepareDbAndSignIn)
-    cy.task('seed')
+
-    cy.signOut()
+  afterEach(removePreventReload)
-  })
 
   it('should edit user info properly', () => {
-    cy.signIn('test1@gmail.com')
+    cy.signIn(users[0].email)
     cy.visit('/account')
     cy.findByRole('button', { name: 'Save' }).should('not.exist')
     cy.findByRole('textbox', { name: 'Email address' }).should(
@@ -35,23 +35,19 @@ describe('Account page', () => {
       .should('have.attr', 'src')
       .should(
         'include',
-        `https://s3.eu-west-3.amazonaws.com/typebot/users/${userIds[0]}/avatar`
+        `https://s3.eu-west-3.amazonaws.com/typebot/users/${users[0].id}/avatar`
       )
     cy.findByRole('button', { name: 'Save' }).should('exist').click()
     cy.wait('@getUpdatedSession')
-    cy.reload()
+      .then((interception) => {
-    cy.findByRole('textbox', { name: 'Name' }).should('have.value', 'John Doe')
+        return interception.response?.statusCode
-    cy.findByRole('img')
+      })
-      .should('have.attr', 'src')
+      .should('eq', 200)
-      .should(
-        'include',
-        `https://s3.eu-west-3.amazonaws.com/typebot/users/${userIds[0]}/avatar`
-      )
     cy.findByRole('button', { name: 'Save' }).should('not.exist')
   })
 
   it('should display valid plans', () => {
-    cy.signIn('test1@gmail.com')
+    cy.signIn(users[0].email)
     cy.visit('/account')
     cy.findByText('Free plan').should('exist')
     cy.findByRole('link', { name: 'Manage my subscription' }).should(
@@ -59,7 +55,7 @@ describe('Account page', () => {
     )
     cy.findByRole('button', { name: 'Upgrade' }).should('exist')
     cy.signOut()
-    cy.signIn('test2@gmail.com')
+    cy.signIn(users[1].email)
     cy.visit('/account')
     cy.findByText('Pro plan').should('exist')
     cy.findByRole('link', { name: 'Manage my subscription' })

apps/builder/cypress/tests/bubbles/image.ts

@@ -1,7 +1,10 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import {
-import { getIframeBody } from 'cypress/support'
+  getIframeBody,
-import { BubbleStepType, Step } from 'models'
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+import { BubbleStepType, defaultImageBubbleContent, Step } from 'models'
 
 const unsplashImageSrc =
   'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
@@ -13,19 +16,14 @@ describe('Image bubbles', () => {
       method: 'POST',
     }).as('postImage')
   })
-  afterEach(() => {
+
-    cy.window().then((win) => {
-      win.removeEventListener('beforeunload', preventUserFromRefreshing)
-    })
-  })
   describe('Content settings', () => {
     beforeEach(() => {
-      cy.task('seed')
+      prepareDbAndSignIn()
       createTypebotWithStep({
         type: BubbleStepType.IMAGE,
-      } as Omit<Step, 'id' | 'blockId'>)
+        content: defaultImageBubbleContent,
-      cy.signOut()
+      } as Step)
-      cy.signIn('test2@gmail.com')
       cy.visit('/typebots/typebot3/edit')
       cy.findByText('Click to edit...').click()
     })
@@ -46,7 +44,6 @@ describe('Image bubbles', () => {
       cy.findByPlaceholderText('Paste the image link...')
         .clear()
         .type(unsplashImageSrc)
-      cy.findByRole('button', { name: 'Embed image' }).click()
       cy.findByRole('img')
         .should('have.attr', 'src')
         .should('include', unsplashImageSrc)
@@ -62,20 +59,18 @@ describe('Image bubbles', () => {
     })
   })
   describe('Preview', () => {
-    beforeEach(() => {
+    before(() => {
-      cy.task('seed')
+      prepareDbAndSignIn()
       createTypebotWithStep({
         type: BubbleStepType.IMAGE,
         content: {
           url: unsplashImageSrc,
         },
       } as Omit<Step, 'id' | 'blockId'>)
-      cy.signOut()
-      cy.signIn('test2@gmail.com')
-      cy.visit('/typebots/typebot3/edit')
     })
 
     it('should display correctly', () => {
+      cy.visit('/typebots/typebot3/edit')
       cy.findByRole('button', { name: 'Preview' }).click()
       getIframeBody()
         .findByRole('img')

apps/builder/cypress/tests/bubbles/text.ts

@@ -1,27 +1,23 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import {
-import { getIframeBody } from 'cypress/support'
+  getIframeBody,
-import { BubbleStepType, Step } from 'models'
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+import { BubbleStepType, defaultTextBubbleContent, Step } from 'models'
 
 describe('Text bubbles', () => {
   beforeEach(() => {
-    cy.task('seed')
+    prepareDbAndSignIn()
     createTypebotWithStep({
       type: BubbleStepType.TEXT,
-      content: { html: '', plainText: '', richText: [] },
+      content: defaultTextBubbleContent,
     } as Omit<Step, 'id' | 'blockId'>)
-    cy.signOut()
+    cy.visit('/typebots/typebot3/edit')
-  })
-
-  afterEach(() => {
-    cy.window().then((win) => {
-      win.removeEventListener('beforeunload', preventUserFromRefreshing)
-    })
   })
+  afterEach(removePreventReload)
 
   it('rich text features should work', () => {
-    cy.signIn('test2@gmail.com')
-    cy.visit('/typebots/typebot3/edit')
     cy.findByTestId('bold-button').click()
     cy.findByRole('textbox', { name: 'Text editor' }).type('Bold text{enter}')
     cy.findByTestId('bold-button').click()

apps/builder/cypress/tests/bubbles/video.ts

@@ -1,7 +1,15 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import {
-import { getIframeBody } from 'cypress/support'
+  getIframeBody,
-import { BubbleStepType, Step, VideoBubbleContentType } from 'models'
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+import {
+  BubbleStepType,
+  defaultVideoBubbleContent,
+  Step,
+  VideoBubbleContentType,
+} from 'models'
 
 const videoSrc =
   'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
@@ -9,22 +17,17 @@ const youtubeVideoSrc = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
 const vimeoVideoSrc = 'https://vimeo.com/649301125'
 
 describe('Video bubbles', () => {
-  afterEach(() => {
-    cy.window().then((win) => {
-      win.removeEventListener('beforeunload', preventUserFromRefreshing)
-    })
-  })
   describe('Content settings', () => {
     beforeEach(() => {
-      cy.task('seed')
+      prepareDbAndSignIn()
       createTypebotWithStep({
         type: BubbleStepType.VIDEO,
+        content: defaultVideoBubbleContent,
       } as Omit<Step, 'id' | 'blockId'>)
-      cy.signOut()
     })
+    afterEach(removePreventReload)
 
     it('upload image file correctly', () => {
-      cy.signIn('test2@gmail.com')
       cy.visit('/typebots/typebot3/edit')
       cy.findByText('Click to edit...').click()
       cy.findByPlaceholderText('Paste the video link...').type(videoSrc, {
@@ -53,10 +56,8 @@ describe('Video bubbles', () => {
   })
 
   describe('Preview', () => {
-    beforeEach(() => {
+    beforeEach(prepareDbAndSignIn)
-      cy.task('seed')
+    afterEach(removePreventReload)
-      cy.signOut()
-    })
 
     it('should display video correctly', () => {
       createTypebotWithStep({
@@ -66,7 +67,6 @@ describe('Video bubbles', () => {
           url: videoSrc,
         },
       } as Omit<Step, 'id' | 'blockId'>)
-      cy.signIn('test2@gmail.com')
       cy.visit('/typebots/typebot3/edit')
       cy.findByRole('button', { name: 'Preview' }).click()
       getIframeBody()
@@ -84,7 +84,6 @@ describe('Video bubbles', () => {
           id: 'dQw4w9WgXcQ',
         },
       } as Omit<Step, 'id' | 'blockId'>)
-      cy.signIn('test2@gmail.com')
       cy.visit('/typebots/typebot3/edit')
       cy.findByRole('button', { name: 'Preview' }).click()
       getIframeBody()
@@ -103,7 +102,6 @@ describe('Video bubbles', () => {
           id: '649301125',
         },
       } as Omit<Step, 'id' | 'blockId'>)
-      cy.signIn('test2@gmail.com')
       cy.visit('/typebots/typebot3/edit')
       cy.findByRole('button', { name: 'Preview' }).click()
       getIframeBody()

apps/builder/cypress/tests/dashboard.ts

@@ -1,11 +1,13 @@
+import { users } from 'cypress/plugins/data'
+import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
+
 describe('Dashboard page', () => {
-  beforeEach(() => {
+  beforeEach(prepareDbAndSignIn)
-    cy.task('seed')
+
-    cy.signOut()
+  afterEach(removePreventReload)
-  })
 
   it('folders navigation should work', () => {
-    cy.signIn('test1@gmail.com')
+    cy.signIn(users[0].email)
     cy.visit('/typebots')
     createFolder('My folder #1')
     cy.findByTestId('folder-button').click()
@@ -27,7 +29,6 @@ describe('Dashboard page', () => {
   })
 
   it('folders and typebots should be deletable', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots')
     cy.findByText('Folder #1').should('exist')
     cy.findAllByRole('button', { name: 'Show folder menu' }).first().click()
@@ -42,7 +43,6 @@ describe('Dashboard page', () => {
   })
 
   it('folders should be draggable and droppable', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots')
     cy.findByTestId('typebot-button-typebot1').mouseMoveBy(-100, 0, {
       delay: 120,

apps/builder/cypress/tests/inputs/button.ts

@@ -1,16 +1,22 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { getIframeBody } from 'cypress/support'
+import {
-import { InputStepType } from 'models'
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+import { defaultChoiceInputOptions, InputStepType, Step } from 'models'
 
 describe('Button input', () => {
   beforeEach(() => {
-    cy.task('seed')
+    prepareDbAndSignIn()
-    createTypebotWithStep({ type: InputStepType.CHOICE })
+    createTypebotWithStep({
-    cy.signOut()
+      type: InputStepType.CHOICE,
+      options: { ...defaultChoiceInputOptions, itemIds: ['item1'] },
+    } as Step)
   })
+  afterEach(removePreventReload)
 
   it('Can edit choice items', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByDisplayValue('Click to edit').type('Item 1{enter}')
     cy.findByText('Item 1').trigger('mouseover')
@@ -46,7 +52,6 @@ describe('Button input', () => {
 
   it('Single choice targets should work', () => {
     cy.loadTypebotFixtureInDatabase('typebots/singleChoiceTarget.json')
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot4/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
     getIframeBody().findByRole('button', { name: 'Burgers' }).click()

apps/builder/cypress/tests/inputs/date.ts

@@ -1,16 +1,22 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { getIframeBody } from 'cypress/support'
+import {
-import { InputStepType } from 'models'
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+import { defaultDateInputOptions, InputStepType, Step } from 'models'
 
 describe('Date input', () => {
   beforeEach(() => {
-    cy.task('seed')
+    prepareDbAndSignIn()
-    createTypebotWithStep({ type: InputStepType.DATE })
+    createTypebotWithStep({
-    cy.signOut()
+      type: InputStepType.DATE,
+      options: defaultDateInputOptions,
+    } as Step)
   })
+  afterEach(removePreventReload)
 
   it('options should work', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
     getIframeBody()

apps/builder/cypress/tests/inputs/email.ts

@@ -1,16 +1,22 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { getIframeBody } from 'cypress/support'
+import {
-import { InputStepType } from 'models'
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+import { defaultEmailInputOptions, InputStepType, Step } from 'models'
 
 describe('Email input', () => {
   beforeEach(() => {
-    cy.task('seed')
+    prepareDbAndSignIn()
-    createTypebotWithStep({ type: InputStepType.EMAIL })
+    createTypebotWithStep({
-    cy.signOut()
+      type: InputStepType.EMAIL,
+      options: defaultEmailInputOptions,
+    } as Step)
   })
+  afterEach(removePreventReload)
 
   it('options should work', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
     getIframeBody()
@@ -18,7 +24,9 @@ describe('Email input', () => {
       .should('have.attr', 'type')
       .should('equal', 'email')
     getIframeBody().findByRole('button', { name: 'Send' })
-    getIframeBody().findByPlaceholderText('Type your email...').should('exist')
+    getIframeBody()
+      .findByPlaceholderText(defaultEmailInputOptions.labels.placeholder)
+      .should('exist')
     getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
     cy.findByTestId('step-step1').click({ force: true })
     cy.findByRole('textbox', { name: 'Placeholder:' })

apps/builder/cypress/tests/inputs/number.ts

@@ -1,20 +1,26 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { getIframeBody } from 'cypress/support'
+import {
-import { InputStepType } from 'models'
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+import { defaultNumberInputOptions, InputStepType, Step } from 'models'
 
 describe('Number input', () => {
   beforeEach(() => {
-    cy.task('seed')
+    prepareDbAndSignIn()
-    createTypebotWithStep({ type: InputStepType.NUMBER })
+    createTypebotWithStep({
-    cy.signOut()
+      type: InputStepType.NUMBER,
+      options: defaultNumberInputOptions,
+    } as Step)
   })
+  afterEach(removePreventReload)
 
   it('options should work', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
     getIframeBody()
-      .findByPlaceholderText('Type your answer...')
+      .findByPlaceholderText(defaultNumberInputOptions.labels.placeholder)
       .should('have.attr', 'type')
       .should('equal', 'number')
     getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')

apps/builder/cypress/tests/inputs/phone.ts

@@ -1,20 +1,26 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { getIframeBody } from 'cypress/support'
+import {
-import { InputStepType } from 'models'
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+import { defaultPhoneInputOptions, InputStepType, Step } from 'models'
 
 describe('Phone number input', () => {
   beforeEach(() => {
-    cy.task('seed')
+    prepareDbAndSignIn()
-    createTypebotWithStep({ type: InputStepType.PHONE })
+    createTypebotWithStep({
-    cy.signOut()
+      type: InputStepType.PHONE,
+      options: defaultPhoneInputOptions,
+    } as Step)
   })
+  afterEach(removePreventReload)
 
   it('options should work', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
     getIframeBody()
-      .findByPlaceholderText('Your phone number...')
+      .findByPlaceholderText(defaultPhoneInputOptions.labels.placeholder)
       .should('have.attr', 'type')
       .should('eq', 'tel')
     getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')

apps/builder/cypress/tests/inputs/text.ts

@@ -1,27 +1,26 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import {
-import { getIframeBody } from 'cypress/support'
+  getIframeBody,
-import { InputStepType } from 'models'
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+import { defaultTextInputOptions, InputStepType, Step } from 'models'
 
 describe('Text input', () => {
   beforeEach(() => {
-    cy.task('seed')
+    prepareDbAndSignIn()
-    createTypebotWithStep({ type: InputStepType.TEXT })
+    createTypebotWithStep({
-    cy.signOut()
+      type: InputStepType.TEXT,
-  })
+      options: defaultTextInputOptions,
-
+    } as Step)
-  afterEach(() => {
-    cy.window().then((win) => {
-      win.removeEventListener('beforeunload', preventUserFromRefreshing)
-    })
   })
+  afterEach(removePreventReload)
 
   it('options should work', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
     getIframeBody()
-      .findByPlaceholderText('Type your answer...')
+      .findByPlaceholderText(defaultTextInputOptions.labels.placeholder)
       .should('have.attr', 'type')
       .should('equal', 'text')
     getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')

apps/builder/cypress/tests/inputs/url.ts

@@ -1,20 +1,27 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { getIframeBody } from 'cypress/support'
+import {
-import { InputStepType } from 'models'
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+import { defaultUrlInputOptions, InputStepType, Step } from 'models'
 
 describe('URL input', () => {
+  afterEach(removePreventReload)
+
   beforeEach(() => {
-    cy.task('seed')
+    prepareDbAndSignIn()
-    createTypebotWithStep({ type: InputStepType.URL })
+    createTypebotWithStep({
-    cy.signOut()
+      type: InputStepType.URL,
+      options: defaultUrlInputOptions,
+    } as Step)
   })
 
   it('options should work', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
     getIframeBody()
-      .findByPlaceholderText('Type your URL...')
+      .findByPlaceholderText(defaultUrlInputOptions.labels.placeholder)
       .should('have.attr', 'type')
       .should('eq', 'url')
     getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')

apps/builder/cypress/tests/integrations/googleAnalytics.ts

@@ -1,22 +1,23 @@
 import { createTypebotWithStep } from 'cypress/plugins/data'
-import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
-import { IntegrationStepType } from 'models'
+import {
+  defaultGoogleAnalyticsOptions,
+  IntegrationStepType,
+  Step,
+} from 'models'
 
 describe('Google Analytics', () => {
-  beforeEach(() => {
+  afterEach(removePreventReload)
-    cy.task('seed')
-    createTypebotWithStep({ type: IntegrationStepType.GOOGLE_ANALYTICS })
-    cy.signOut()
-  })
 
-  afterEach(() => {
+  beforeEach(() => {
-    cy.window().then((win) => {
+    prepareDbAndSignIn()
-      win.removeEventListener('beforeunload', preventUserFromRefreshing)
+    createTypebotWithStep({
-    })
+      type: IntegrationStepType.GOOGLE_ANALYTICS,
+      options: defaultGoogleAnalyticsOptions,
+    } as Step)
   })
 
   it('can be filled correctly', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.intercept({
       url: '/g/collect',

apps/builder/cypress/tests/integrations/googleSheets.ts

@@ -1,16 +1,13 @@
-import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import { users } from 'cypress/plugins/data'
-import { getIframeBody } from 'cypress/support'
+import { getIframeBody, removePreventReload } from 'cypress/support'
 
 describe('Google sheets', () => {
-  beforeEach(() => {
+  afterEach(removePreventReload)
-    cy.task('seed', Cypress.env('GOOGLE_SHEETS_REFRESH_TOKEN'))
-    cy.signOut()
-  })
 
-  afterEach(() => {
+  beforeEach(() => {
-    cy.window().then((win) => {
+    cy.signOut()
-      win.removeEventListener('beforeunload', preventUserFromRefreshing)
+    cy.task('seed', Cypress.env('GOOGLE_SHEETS_REFRESH_TOKEN'))
-    })
+    cy.signIn(users[1].email)
   })
 
   it('Insert row should work', () => {
@@ -19,7 +16,6 @@ describe('Google sheets', () => {
       method: 'POST',
     }).as('insertRowInGoogleSheets')
     cy.loadTypebotFixtureInDatabase('typebots/integrations/googleSheets.json')
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot4/edit')
 
     fillInSpreadsheetInfo()
@@ -55,7 +51,6 @@ describe('Google sheets', () => {
       method: 'PATCH',
     }).as('updateRowInGoogleSheets')
     cy.loadTypebotFixtureInDatabase('typebots/integrations/googleSheets.json')
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot4/edit')
 
     fillInSpreadsheetInfo()
@@ -87,7 +82,6 @@ describe('Google sheets', () => {
     cy.loadTypebotFixtureInDatabase(
       'typebots/integrations/googleSheetsGet.json'
     )
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot4/edit')
 
     fillInSpreadsheetInfo()

apps/builder/cypress/tests/integrations/webhooks.ts

@@ -1,22 +1,17 @@
-import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import {
-import { getIframeBody } from 'cypress/support'
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
 
 describe('Webhook step', () => {
-  beforeEach(() => {
+  beforeEach(prepareDbAndSignIn)
-    cy.task('seed')
-    cy.signOut()
-  })
 
-  afterEach(() => {
+  afterEach(removePreventReload)
-    cy.window().then((win) => {
-      win.removeEventListener('beforeunload', preventUserFromRefreshing)
-    })
-  })
 
   describe('Configuration', () => {
     it('configuration is working', () => {
       cy.loadTypebotFixtureInDatabase('typebots/integrations/webhook.json')
-      cy.signIn('test2@gmail.com')
       cy.visit('/typebots/typebot4/edit')
       cy.findByText('Configure...').click()
       cy.findByRole('button', { name: 'GET' }).click()
@@ -80,7 +75,6 @@ describe('Webhook step', () => {
       cy.loadTypebotFixtureInDatabase(
         'typebots/integrations/webhookPreview.json'
       )
-      cy.signIn('test2@gmail.com')
       cy.visit('/typebots/typebot4/edit')
       cy.findByRole('button', { name: 'Preview' }).click()
       getIframeBody().findByRole('button', { name: 'Go' }).click()

apps/builder/cypress/tests/logic/condition.ts

@@ -1,21 +1,16 @@
-import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import {
-import { getIframeBody } from 'cypress/support'
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
 
 describe('Condition step', () => {
-  beforeEach(() => {
+  beforeEach(prepareDbAndSignIn)
-    cy.task('seed')
-    cy.signOut()
-  })
 
-  afterEach(() => {
+  afterEach(removePreventReload)
-    cy.window().then((win) => {
-      win.removeEventListener('beforeunload', preventUserFromRefreshing)
-    })
-  })
 
   it('options should work', () => {
     cy.loadTypebotFixtureInDatabase('typebots/logic/condition.json')
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot4/edit')
 
     cy.findAllByText('Equal to').first().click()

apps/builder/cypress/tests/logic/redirect.ts

@@ -1,21 +1,16 @@
-import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import {
-import { getIframeBody } from 'cypress/support'
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
 
 describe('Redirect', () => {
-  beforeEach(() => {
+  beforeEach(prepareDbAndSignIn)
-    cy.task('seed')
-    cy.signOut()
-  })
 
-  afterEach(() => {
+  afterEach(removePreventReload)
-    cy.window().then((win) => {
-      win.removeEventListener('beforeunload', preventUserFromRefreshing)
-    })
-  })
 
   it('should redirect to URL correctly', () => {
     cy.loadTypebotFixtureInDatabase('typebots/logic/redirect.json')
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot4/edit')
     cy.findByText('Configure...').click()
     cy.findByPlaceholderText('Type a URL...').type('google.com')

apps/builder/cypress/tests/logic/setVariable.ts

@@ -1,23 +1,18 @@
-import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import {
-import { getIframeBody } from 'cypress/support'
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
 
 describe('Set variables', () => {
-  beforeEach(() => {
+  beforeEach(prepareDbAndSignIn)
-    cy.task('seed')
-    cy.signOut()
-  })
 
-  afterEach(() => {
+  afterEach(removePreventReload)
-    cy.window().then((win) => {
-      win.removeEventListener('beforeunload', preventUserFromRefreshing)
-    })
-  })
 
-  it('options should work', () => {
+  it.only('options should work', () => {
     cy.loadTypebotFixtureInDatabase('typebots/logic/setVariable.json')
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot4/edit')
-    cy.findByText('Type your answer...').click()
+    cy.findByText('Type a number...').click()
     cy.createVariable('Num')
     cy.findAllByText('Click to edit...').first().click()
     cy.createVariable('Total')
@@ -31,9 +26,7 @@ describe('Set variables', () => {
       'Custom value'
     )
     cy.findByRole('button', { name: 'Preview' }).click()
-    getIframeBody()
+    getIframeBody().findByPlaceholderText('Type a number...').type('365{enter}')
-      .findByPlaceholderText('Type your answer...')
-      .type('365{enter}')
     getIframeBody().findByText('Total: 365000').should('exist')
     getIframeBody().findByText('Custom var: Custom value')
   })

apps/builder/cypress/tests/results.ts

@@ -1,19 +1,21 @@
 import path from 'path'
 import { parse } from 'papaparse'
+import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
+
+const downloadsFolder = Cypress.config('downloadsFolder')
 
 describe('Results page', () => {
   beforeEach(() => {
+    prepareDbAndSignIn()
     cy.intercept({ url: '/api/typebots/typebot2/results*', method: 'GET' }).as(
       'getResults'
     )
-    cy.task('seed')
-    cy.signOut()
   })
 
+  afterEach(removePreventReload)
+
   it('results should be deletable', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot2/results')
-    cy.wait('@getResults')
     cy.findByText('content198').should('exist')
     cy.findByText('content197').should('exist')
     cy.findAllByRole('checkbox').eq(2).check({ force: true })
@@ -30,7 +32,6 @@ describe('Results page', () => {
   })
 
   it('submissions table should have infinite scroll', () => {
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot2/results')
     cy.findByText('content50').should('not.exist')
     cy.findByText('content199').should('exist')
@@ -44,8 +45,6 @@ describe('Results page', () => {
   })
 
   it('should correctly export selection in CSV', () => {
-    const downloadsFolder = Cypress.config('downloadsFolder')
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot2/results')
     cy.wait('@getResults')
     cy.findByRole('button', { name: 'Export' }).should('not.exist')

apps/builder/cypress/tests/settings/general.ts

@@ -0,0 +1,27 @@
+import {
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
+
+describe('General settings', () => {
+  beforeEach(prepareDbAndSignIn)
+
+  afterEach(removePreventReload)
+
+  it('should reflect changes in real time', () => {
+    cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
+    cy.visit('/typebots/typebot4/settings')
+    getIframeBody()
+      .findByRole('link', { name: 'Made with Typebot.' })
+      .should('have.attr', 'href')
+      .should('eq', 'https://www.typebot.io/?utm_source=litebadge')
+    cy.findByRole('button', { name: 'General' }).click()
+    cy.findByRole('checkbox', { name: 'Typebot.io branding' }).uncheck({
+      force: true,
+    })
+    getIframeBody()
+      .findByRole('link', { name: 'Made with Typebot.' })
+      .should('not.exist')
+  })
+})

apps/builder/cypress/tests/settings/metadata.ts

@@ -0,0 +1,51 @@
+import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
+
+const favIconUrl = 'https://www.baptistearno.com/favicon.png'
+const imageUrl = 'https://www.baptistearno.com/images/site-preview.png'
+
+describe('Typing emulation', () => {
+  beforeEach(prepareDbAndSignIn)
+
+  afterEach(removePreventReload)
+
+  it('should reflect changes in real time', () => {
+    cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
+    cy.visit('/typebots/typebot4/settings')
+    cy.findByRole('button', { name: 'Metadata' }).click()
+
+    // Fav icon
+    cy.findAllByRole('img', { name: 'Fav icon' })
+      .click()
+      .should('have.attr', 'src')
+      .should('eq', '/favicon.png')
+    cy.findByRole('button', { name: 'Giphy' }).should('not.exist')
+    cy.findByRole('button', { name: 'Embed link' }).click()
+    cy.findByPlaceholderText('Paste the image link...').type(favIconUrl)
+    cy.findAllByRole('img', { name: 'Fav icon' })
+      .should('have.attr', 'src')
+      .should('eq', favIconUrl)
+
+    // Image
+    cy.findAllByRole('img', { name: 'Website image' })
+      .click()
+      .should('have.attr', 'src')
+      .should('eq', '/viewer-preview.png')
+    cy.findByRole('button', { name: 'Giphy' }).should('not.exist')
+    cy.findByRole('button', { name: 'Embed link' }).click()
+    cy.findByPlaceholderText('Paste the image link...').type(imageUrl)
+    cy.findAllByRole('img', { name: 'Website image' })
+      .should('have.attr', 'src')
+      .should('eq', imageUrl)
+
+    // Title
+    cy.findByRole('textbox', { name: 'Title:' })
+      .click({ force: true })
+      .clear()
+      .type('Awesome typebot')
+
+    // Description
+    cy.findByRole('textbox', { name: 'Description:' })
+      .clear()
+      .type('Lorem ipsum')
+  })
+})

apps/builder/cypress/tests/settings/typingEmulation.ts

@@ -0,0 +1,20 @@
+import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
+
+describe('Typing emulation', () => {
+  beforeEach(prepareDbAndSignIn)
+
+  afterEach(removePreventReload)
+
+  it('should reflect changes in real time', () => {
+    cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
+    cy.visit('/typebots/typebot4/settings')
+    cy.findByRole('button', { name: 'Typing emulation' }).click()
+    cy.findByTestId('speed').clear().type('350')
+    cy.findByTestId('max-delay').clear().type('1.5')
+    cy.findByRole('checkbox', { name: 'Typing emulation' }).uncheck({
+      force: true,
+    })
+    cy.findByTestId('speed').should('not.exist')
+    cy.findByTestId('max-delay').should('not.exist')
+  })
+})

apps/builder/cypress/tests/theme/chat.ts

@@ -1,14 +1,16 @@
-import { getIframeBody } from 'cypress/support'
+import {
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
 
 describe('General theme settings', () => {
-  beforeEach(() => {
+  beforeEach(prepareDbAndSignIn)
-    cy.task('seed')
+
-    cy.signOut()
+  afterEach(removePreventReload)
-  })
 
   it('should reflect changes in real time', () => {
     cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot4/theme')
     getIframeBody().findByText('Ready?').should('exist')
     cy.findByRole('button', { name: 'Chat' }).click()
@@ -56,9 +58,6 @@ describe('General theme settings', () => {
       .eq(3)
       .click({ force: true })
     cy.findByRole('textbox', { name: 'Color value' }).clear().type('#264653')
-    cy.findAllByRole('button', { name: 'Pick a color' })
-      .eq(6)
-      .click({ force: true })
     getIframeBody().findByRole('button', { name: 'Go' }).click()
     getIframeBody()
       .findByTestId('guest-bubble')
@@ -68,8 +67,17 @@ describe('General theme settings', () => {
       .findByTestId('guest-bubble')
       .should('have.css', 'color')
       .should('eq', 'rgb(38, 70, 83)')
+    cy.findAllByRole('button', { name: 'Pick a color' })
+      .eq(3)
+      .click({ force: true })
 
-    cy.findByRole('textbox', { name: 'Color value' }).clear().type('#ffe8d6')
+    // Input
+    cy.findAllByRole('button', { name: 'Pick a color' })
+      .eq(6)
+      .click({ force: true })
+    cy.findByRole('textbox', { name: 'Color value' })
+      .clear({ force: true })
+      .type('#ffe8d6')
     cy.findAllByRole('button', { name: 'Pick a color' })
       .eq(7)
       .click({ force: true })
@@ -85,6 +93,6 @@ describe('General theme settings', () => {
     getIframeBody()
       .findByTestId('input')
       .should('have.css', 'color')
-      .should('eq', 'rgb(2, 61, 138)')
+      .should('eq', 'rgb(2, 62, 138)')
   })
 })

apps/builder/cypress/tests/theme/customCss.ts

@@ -1,14 +1,16 @@
-import { getIframeBody } from 'cypress/support'
+import {
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
 
 describe('Custom CSS settings', () => {
-  beforeEach(() => {
+  beforeEach(prepareDbAndSignIn)
-    cy.task('seed')
+
-    cy.signOut()
+  afterEach(removePreventReload)
-  })
 
   it('should reflect changes in real time', () => {
     cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot4/theme')
     cy.findByRole('button', { name: 'Custom CSS' }).click()
 

apps/builder/cypress/tests/theme/general.ts

@@ -1,14 +1,16 @@
-import { getIframeBody } from 'cypress/support'
+import {
+  getIframeBody,
+  prepareDbAndSignIn,
+  removePreventReload,
+} from 'cypress/support'
 
 describe('General theme settings', () => {
-  beforeEach(() => {
+  beforeEach(prepareDbAndSignIn)
-    cy.task('seed')
+
-    cy.signOut()
+  afterEach(removePreventReload)
-  })
 
   it('should reflect changes in real time', () => {
     cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
-    cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot4/theme')
     cy.findByRole('button', { name: 'General' }).click()
 

apps/builder/layouts/settings/SettingsContent.tsx

@@ -0,0 +1,24 @@
+import { Flex } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import React, { useMemo } from 'react'
+import { TypebotViewer } from 'bot-engine'
+import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
+import { SettingsSideMenu } from 'components/settings/SettingsSideMenu'
+
+export const SettingsContent = () => {
+  const { typebot } = useTypebot()
+  const publicTypebot = useMemo(
+    () => (typebot ? parseTypebotToPublicTypebot(typebot) : undefined),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [typebot?.settings]
+  )
+
+  return (
+    <Flex h="full" w="full">
+      <SettingsSideMenu />
+      <Flex flex="1">
+        {publicTypebot && <TypebotViewer typebot={publicTypebot} />}
+      </Flex>
+    </Flex>
+  )
+}

apps/builder/layouts/theme/ThemeContent.tsx

@@ -3,7 +3,7 @@ import { TypebotViewer } from 'bot-engine'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
-import { SideMenu } from '../../components/theme/SideMenu'
+import { ThemeSideMenu } from '../../components/theme/ThemeSideMenu'
 
 export const ThemeContent = () => {
   const { typebot } = useTypebot()
@@ -14,7 +14,7 @@ export const ThemeContent = () => {
   )
   return (
     <Flex h="full" w="full">
-      <SideMenu />
+      <ThemeSideMenu />
       <Flex flex="1">
         {publicTypebot && <TypebotViewer typebot={publicTypebot} />}
       </Flex>

apps/builder/pages/api/typebots/[typebotId].ts

@@ -31,7 +31,11 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     const data = JSON.parse(req.body)
     const typebots = await prisma.typebot.update({
       where: { id: typebotId },
-      data,
+      data: {
+        ...data,
+        theme: data.theme ?? undefined,
+        settings: data.settings ?? undefined,
+      },
     })
     return res.send({ typebots })
   }

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

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/layout'
 import { Seo } from 'components/Seo'
-import { SettingsContent } from 'components/settings/SettingsContent'
+import { SettingsContent } from 'layouts/settings/SettingsContent'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
 import React from 'react'
 

apps/builder/services/typebots.ts

@@ -1,23 +1,41 @@
 import {
   Block,
-  TextBubbleStep,
   PublicTypebot,
   StartStep,
   BubbleStepType,
   InputStepType,
-  ChoiceInputStep,
   LogicStepType,
   Step,
-  ConditionStep,
-  ComparisonOperators,
-  LogicalOperator,
   DraggableStepType,
   DraggableStep,
+  defaultTheme,
+  defaultSettings,
+  StepOptions,
+  BubbleStepContent,
+  IntegrationStepType,
+  defaultTextBubbleContent,
+  defaultImageBubbleContent,
+  defaultVideoBubbleContent,
+  defaultTextInputOptions,
+  defaultNumberInputOptions,
+  defaultEmailInputOptions,
+  defaultDateInputOptions,
+  defaultPhoneInputOptions,
+  defaultUrlInputOptions,
+  defaultChoiceInputOptions,
+  defaultSetVariablesOptions,
+  defaultConditionOptions,
+  defaultRedirectOptions,
+  defaultGoogleSheetsOptions,
+  defaultGoogleAnalyticsOptions,
+  defaultWebhookOptions,
+  StepWithOptionsType,
 } from 'models'
-import shortId, { generate } from 'short-uuid'
+import shortId from 'short-uuid'
 import { Typebot } from 'models'
 import useSWR from 'swr'
 import { fetcher, toKebabCase } from './utils'
+import { isBubbleStepType, stepTypeHasOption } from 'utils'
 import { deepEqual } from 'fast-equals'
 import { stringify } from 'qs'
 import { isChoiceInput, isConditionStep, sendRequest } from 'utils'
@@ -114,56 +132,56 @@ export const parseNewStep = (
   blockId: string
 ): DraggableStep => {
   const id = `s${shortId.generate()}`
+  return {
+    id,
+    blockId,
+    type,
+    content: isBubbleStepType(type) ? parseDefaultContent(type) : undefined,
+    options: stepTypeHasOption(type)
+      ? parseDefaultStepOptions(type)
+      : undefined,
+  } as DraggableStep
+}
+
+const parseDefaultContent = (type: BubbleStepType): BubbleStepContent => {
   switch (type) {
-    case BubbleStepType.TEXT: {
+    case BubbleStepType.TEXT:
-      const textStep: Pick<TextBubbleStep, 'type' | 'content'> = {
+      return defaultTextBubbleContent
-        type,
+    case BubbleStepType.IMAGE:
-        content: { html: '', richText: [], plainText: '' },
+      return defaultImageBubbleContent
-      }
+    case BubbleStepType.VIDEO:
-      return {
+      return defaultVideoBubbleContent
-        id,
+  }
-        blockId,
+}
-        ...textStep,
+
-      }
+const parseDefaultStepOptions = (type: StepWithOptionsType): StepOptions => {
-    }
+  switch (type) {
-    case InputStepType.CHOICE: {
+    case InputStepType.TEXT:
-      const choiceInput: Pick<ChoiceInputStep, 'type' | 'options'> = {
+      return defaultTextInputOptions
-        type,
+    case InputStepType.NUMBER:
-        options: { itemIds: [] },
+      return defaultNumberInputOptions
-      }
+    case InputStepType.EMAIL:
-      return {
+      return defaultEmailInputOptions
-        id,
+    case InputStepType.DATE:
-        blockId,
+      return defaultDateInputOptions
-        ...choiceInput,
+    case InputStepType.PHONE:
-      }
+      return defaultPhoneInputOptions
-    }
+    case InputStepType.URL:
-    case LogicStepType.CONDITION: {
+      return defaultUrlInputOptions
-      const id = generate()
+    case InputStepType.CHOICE:
-      const conditionStep: Pick<ConditionStep, 'type' | 'options'> = {
+      return defaultChoiceInputOptions
-        type,
+    case LogicStepType.SET_VARIABLE:
-        options: {
+      return defaultSetVariablesOptions
-          comparisons: {
+    case LogicStepType.CONDITION:
-            byId: {
+      return defaultConditionOptions
-              [id]: { id, comparisonOperator: ComparisonOperators.EQUAL },
+    case LogicStepType.REDIRECT:
-            },
+      return defaultRedirectOptions
-            allIds: [id],
+    case IntegrationStepType.GOOGLE_SHEETS:
-          },
+      return defaultGoogleSheetsOptions
-          logicalOperator: LogicalOperator.AND,
+    case IntegrationStepType.GOOGLE_ANALYTICS:
-        },
+      return defaultGoogleAnalyticsOptions
-      }
+    case IntegrationStepType.WEBHOOK:
-      return {
+      return defaultWebhookOptions
-        id,
-        blockId,
-        ...conditionStep,
-      }
-    }
-    default: {
-      return {
-        id,
-        blockId,
-        type,
-      }
-    }
   }
 }
 
@@ -223,6 +241,8 @@ export const parseNewTypebot = ({
     variables: { byId: {}, allIds: [] },
     edges: { byId: {}, allIds: [] },
     webhooks: { byId: {}, allIds: [] },
+    theme: defaultTheme,
+    settings: defaultSettings,
   }
 }
 

apps/viewer/pages/api/results.ts

@@ -4,9 +4,9 @@ import { methodNotAllowed } from 'utils'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === 'POST') {
-    const { typebotId } = JSON.parse(req.body)
+    const { typebotId } = JSON.parse(req.body) as { typebotId: string }
     const result = await prisma.result.create({
-      data: { typebotId },
+      data: { typebotId, isCompleted: false },
     })
     return res.send(result)
   }

apps/viewer/pages/api/results/[id].ts

@@ -1,10 +1,11 @@
 import prisma from 'libs/prisma'
+import { Result } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { methodNotAllowed } from 'utils'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === 'PATCH') {
-    const data = JSON.parse(req.body)
+    const data = JSON.parse(req.body) as Result
     const id = req.query.id.toString()
     const result = await prisma.result.update({
       where: { id },

packages/bot-engine/.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  ignorePatterns: ['node_modules'],
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'next/core-web-vitals',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+  plugins: ['prettier', 'react', 'cypress', '@typescript-eslint'],
+  ignorePatterns: 'dist',
+  rules: {
+    'react/no-unescaped-entities': [0],
+    'prettier/prettier': 'error',
+    'react/display-name': [0],
+    '@next/next/no-img-element': [0],
+  },
+}

packages/bot-engine/lib/gtag.ts

@@ -1,5 +1,6 @@
 import { GoogleAnalyticsOptions } from 'models'
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const gtag: any
 
 const initGoogleAnalytics = (id: string): Promise<void> =>

packages/bot-engine/package.json

@@ -34,13 +34,20 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "tailwindcss": "^3.0.11",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "@typescript-eslint/eslint-plugin": "^5.9.0",
+    "eslint": "<8.0.0",
+    "eslint-config-next": "12.0.7",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-prettier": "^4.0.0"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "scripts": {
     "build": "yarn rollup -c",
-    "dev": "yarn rollup -c --watch"
+    "dev": "yarn rollup -c --watch",
+    "lint": "eslint --fix -c ./.eslintrc.js \"./src/**/*.ts*\""
   }
 }

packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTypebot } from '../../contexts/TypebotContext'
 import { HostAvatar } from '../avatars/HostAvatar'
 import { useFrame } from 'react-frame-component'
@@ -22,6 +22,7 @@ export const AvatarSideContainer = () => {
     return () => {
       resizeObserver.disconnect()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (

packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx

@@ -35,11 +35,13 @@ export const ChatBlock = ({
     const nextStep =
       typebot.steps.byId[startStepId ?? stepIds[displayedSteps.length]]
     if (nextStep) setDisplayedSteps([...displayedSteps, nextStep])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
     autoScrollToBottom()
     onNewStepDisplayed()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [displayedSteps])
 
   const onNewStepDisplayed = async () => {

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

@@ -42,6 +42,7 @@ const InputChatStep = ({
 
   useEffect(() => {
     addNewAvatarOffset()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const handleSubmit = (value: string) => {

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

@@ -24,11 +24,12 @@ export const ImageBubble = ({ step, onTransitionEnd }: Props) => {
   const url = useMemo(
     () =>
       parseVariables({ text: step.content?.url, variables: typebot.variables }),
-    [typebot.variables]
+    [step.content?.url, typebot.variables]
   )
 
   useEffect(() => {
     showContentAfterMediaLoad()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const showContentAfterMediaLoad = () => {
@@ -83,6 +84,7 @@ export const ImageBubble = ({ step, onTransitionEnd }: Props) => {
               height: isTyping ? '2rem' : 'auto',
               maxWidth: '100%',
             }}
+            alt="Bubble image"
           />
         </div>
       </div>

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

@@ -28,6 +28,7 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
   const content = useMemo(
     () =>
       parseVariables({ text: step.content.html, variables: typebot.variables }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [typebot.variables]
   )
 
@@ -40,6 +41,7 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
     setTimeout(() => {
       onTypingEnd()
     }, typingTimeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const onTypingEnd = () => {

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

@@ -28,6 +28,7 @@ export const VideoBubble = ({ step, onTransitionEnd }: Props) => {
 
   useEffect(() => {
     showContentAfterMediaLoad()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const showContentAfterMediaLoad = () => {
@@ -86,6 +87,7 @@ const VideoContent = ({
 }) => {
   const url = useMemo(
     () => parseVariables({ text: content?.url, variables: variables }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [variables]
   )
   if (!content?.type) return <></>

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/ChoiceForm.tsx

@@ -13,6 +13,7 @@ export const ChoiceForm = ({ options, onSubmit }: ChoiceFormProps) => {
   const { typebot } = useTypebot()
   const items = useMemo(
     () => filterTable(options?.itemIds ?? [], typebot.choiceItems),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   )
   const [selectedIds, setSelectedIds] = useState<string[]>([])
@@ -41,6 +42,7 @@ export const ChoiceForm = ({ options, onSubmit }: ChoiceFormProps) => {
       <div className="flex flex-wrap">
         {options?.itemIds.map((itemId) => (
           <button
+            key={itemId}
             role={options?.isMultipleChoice ? 'checkbox' : 'button'}
             onClick={handleClick(itemId)}
             className={

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx

@@ -26,7 +26,7 @@ type TextInputProps = {
 }
 
 export const TextInput = ({ step, onChange }: TextInputProps) => {
-  const inputRef = useRef<any>(null)
+  const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null)
 
   useEffect(() => {
     if (!inputRef.current) return
@@ -102,7 +102,8 @@ export const TextInput = ({ step, onChange }: TextInputProps) => {
     case InputStepType.PHONE: {
       return (
         <PhoneInput
-          ref={inputRef}
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ref={inputRef as any}
           onChange={handlePhoneNumberChange}
           placeholder={
             step.options?.labels?.placeholder ?? 'Your phone number...'

packages/bot-engine/src/components/ConversationContainer.tsx

@@ -5,7 +5,7 @@ import { useFrame } from 'react-frame-component'
 import { setCssVariablesValue } from '../services/theme'
 import { useAnswers } from '../contexts/AnswersContext'
 import { deepEqual } from 'fast-equals'
-import { Answer, Block, Edge, PublicTypebot } from 'models'
+import { Answer, Block, PublicTypebot } from 'models'
 
 type Props = {
   typebot: PublicTypebot
@@ -45,6 +45,7 @@ export const ConversationContainer = ({
       typebot.steps.byId[blocks.byId[blocks.allIds[0]].stepIds[0]].edgeId
     if (!firstEdgeId) return
     displayNextBlock(firstEdgeId)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
@@ -56,6 +57,7 @@ export const ConversationContainer = ({
     if (!answer || deepEqual(localAnswer, answer)) return
     setLocalAnswer(answer)
     onNewAnswer(answer)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [answers])
 
   return (

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useMemo } from 'react'
 import { TypebotContext } from '../contexts/TypebotContext'
 import Frame from 'react-frame-component'
@@ -61,7 +62,7 @@ export const TypebotViewer = ({
         }}
       />
       <TypebotContext typebot={typebot}>
-        <AnswersContext typebotId={typebot.id}>
+        <AnswersContext>
           <div
             className="flex text-base overflow-hidden bg-cover h-screen w-screen flex-col items-center typebot-container"
             style={{
@@ -78,6 +79,17 @@ export const TypebotViewer = ({
                 onCompleted={handleCompleted}
               />
             </div>
+            {typebot.settings.general.isBrandingEnabled && (
+              <a
+                href={'https://www.typebot.io/?utm_source=litebadge'}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="fixed py-1 px-2 bg-white z-50 rounded shadow-md"
+                style={{ bottom: '20px' }}
+              >
+                Made with <span className="text-blue-500">Typebot</span>.
+              </a>
+            )}
           </div>
         </AnswersContext>
       </TypebotContext>

packages/bot-engine/src/contexts/AnswersContext.tsx

@@ -4,16 +4,11 @@ import React, { createContext, ReactNode, useContext, useState } from 'react'
 const answersContext = createContext<{
   answers: Answer[]
   addAnswer: (answer: Answer) => void
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 }>({})
 
-export const AnswersContext = ({
+export const AnswersContext = ({ children }: { children: ReactNode }) => {
-  children,
-  typebotId,
-}: {
-  children: ReactNode
-  typebotId: string
-}) => {
   const [answers, setAnswers] = useState<Answer[]>([])
 
   const addAnswer = (answer: Answer) =>

packages/bot-engine/src/contexts/HostAvatarsContext.tsx

@@ -5,6 +5,7 @@ const hostAvatarsContext = createContext<{
   lastBubblesTopOffset: number[]
   addNewAvatarOffset: () => void
   updateLastAvatarOffset: (newOffset: number) => void
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 }>({})
 

packages/bot-engine/src/contexts/TypebotContext.tsx

@@ -4,6 +4,7 @@ import React, { createContext, ReactNode, useContext, useState } from 'react'
 const typebotContext = createContext<{
   typebot: PublicTypebot
   updateVariableValue: (variableId: string, value: string) => void
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 }>({})