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

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) => {
-              setColor(e.target.value)
-            }}
+            onChange={handleColorChange}
           />
         </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
-              generalTheme={typebot?.theme?.general}
-              onGeneralThemeChange={handleGeneralThemeChange}
-            />
+            {typebot && (
+              <GeneralSettings
+                generalTheme={typebot.theme.general}
+                onGeneralThemeChange={handleGeneralThemeChange}
+              />
+            )}
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem>
@@ -68,10 +70,12 @@ export const SideMenu = () => {
             <AccordionIcon />
           </AccordionButton>
           <AccordionPanel pb={4}>
-            <ChatThemeSettings
-              chatTheme={typebot?.theme?.chat}
-              onChatThemeChange={handleChatThemeChange}
-            />
+            {typebot && (
+              <ChatThemeSettings
+                chatTheme={typebot.theme.chat}
+                onChatThemeChange={handleChatThemeChange}
+              />
+            )}
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem>
@@ -83,10 +87,12 @@ export const SideMenu = () => {
             <AccordionIcon />
           </AccordionButton>
           <AccordionPanel pb={4}>
-            <CustomCssSettings
-              customCss={typebot?.theme?.customCss}
-              onCustomCssChange={handleCustomCssChange}
-            />
+            {typebot && (
+              <CustomCssSettings
+                customCss={typebot.theme.customCss}
+                onCustomCssChange={handleCustomCssChange}
+              />
+            )}
           </AccordionPanel>
         </AccordionItem>
       </Accordion>