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>