feat(theme): ✨ Add chat theme settings

apps/builder/components/settings/SettingsContent.tsx

@@ -17,7 +17,7 @@ export const SettingsContent = () => {
     <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}
+          typingEmulation={typebot?.settings?.typingEmulation}
           onUpdate={handleTypingEmulationUpdate}
         />
       </Stack>

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

@@ -0,0 +1,38 @@
+import { Stack, Flex, Text } from '@chakra-ui/react'
+import { ContainerColors } from 'models'
+import React from 'react'
+import { ColorPicker } from '../GeneralSettings/ColorPicker'
+
+type Props = {
+  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 })
+  const handleTextChange = (color: string) =>
+    onButtonsChange({ ...buttons, color })
+
+  return (
+    <Stack>
+      <Flex justify="space-between" align="center">
+        <Text>Background:</Text>
+        <ColorPicker
+          initialColor={buttons?.backgroundColor ?? defaultBackgroundColor}
+          onColorChange={handleBackgroundChange}
+        />
+      </Flex>
+      <Flex justify="space-between" align="center">
+        <Text>Text:</Text>
+        <ColorPicker
+          initialColor={buttons?.color ?? defaultTextColor}
+          onColorChange={handleTextChange}
+        />
+      </Flex>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,56 @@
+import { Heading, Stack } from '@chakra-ui/react'
+import { ChatTheme, ContainerColors, InputColors } from 'models'
+import React from 'react'
+import { ButtonsTheme } from './ButtonsTheme'
+import { GuestBubbles } from './GuestBubbles'
+import { HostBubbles } from './HostBubbles'
+import { InputsTheme } from './InputsTheme'
+
+type Props = {
+  chatTheme?: ChatTheme
+  onChatThemeChange: (chatTheme: ChatTheme) => void
+}
+
+export const ChatThemeSettings = ({ chatTheme, onChatThemeChange }: Props) => {
+  const handleHostBubblesChange = (hostBubbles: ContainerColors) =>
+    onChatThemeChange({ ...chatTheme, hostBubbles })
+  const handleGuestBubblesChange = (guestBubbles: ContainerColors) =>
+    onChatThemeChange({ ...chatTheme, guestBubbles })
+  const handleButtonsChange = (buttons: ContainerColors) =>
+    onChatThemeChange({ ...chatTheme, buttons })
+  const handleInputsChange = (inputs: InputColors) =>
+    onChatThemeChange({ ...chatTheme, inputs })
+
+  return (
+    <Stack spacing={6}>
+      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
+        <Heading fontSize="lg">Bot bubbles</Heading>
+        <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}
+          onGuestBubblesChange={handleGuestBubblesChange}
+        />
+      </Stack>
+      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
+        <Heading fontSize="lg">Buttons</Heading>
+        <ButtonsTheme
+          buttons={chatTheme?.buttons}
+          onButtonsChange={handleButtonsChange}
+        />
+      </Stack>
+      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
+        <Heading fontSize="lg">Inputs</Heading>
+        <InputsTheme
+          inputs={chatTheme?.inputs}
+          onInputsChange={handleInputsChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,37 @@
+import { Stack, Flex, Text } from '@chakra-ui/react'
+import { ContainerColors } from 'models'
+import React from 'react'
+import { ColorPicker } from '../GeneralSettings/ColorPicker'
+
+type Props = {
+  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 })
+  const handleTextChange = (color: string) =>
+    onGuestBubblesChange({ ...guestBubbles, color })
+
+  return (
+    <Stack>
+      <Flex justify="space-between" align="center">
+        <Text>Background:</Text>
+        <ColorPicker
+          initialColor={guestBubbles?.backgroundColor ?? defaultBackgroundColor}
+          onColorChange={handleBackgroundChange}
+        />
+      </Flex>
+      <Flex justify="space-between" align="center">
+        <Text>Text:</Text>
+        <ColorPicker
+          initialColor={guestBubbles?.color ?? defaultTextColor}
+          onColorChange={handleTextChange}
+        />
+      </Flex>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,38 @@
+import { Stack, Flex, Text } from '@chakra-ui/react'
+import { ContainerColors } from 'models'
+import React from 'react'
+import { ColorPicker } from '../GeneralSettings/ColorPicker'
+
+type Props = {
+  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 })
+  const handleTextChange = (color: string) =>
+    onHostBubblesChange({ ...hostBubbles, color })
+
+  return (
+    <Stack>
+      <Flex justify="space-between" align="center">
+        <Text>Background:</Text>
+        <ColorPicker
+          initialColor={hostBubbles?.backgroundColor ?? defaultBackgroundColor}
+          onColorChange={handleBackgroundChange}
+        />
+      </Flex>
+      <Flex justify="space-between" align="center">
+        <Text>Text:</Text>
+        <ColorPicker
+          initialColor={hostBubbles?.color ?? defaultTextColor}
+          onColorChange={handleTextChange}
+        />
+      </Flex>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,48 @@
+import { Stack, Flex, Text } from '@chakra-ui/react'
+import { InputColors } from 'models'
+import React from 'react'
+import { ColorPicker } from '../GeneralSettings/ColorPicker'
+
+type Props = {
+  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 })
+  const handleTextChange = (color: string) =>
+    onInputsChange({ ...inputs, color })
+  const handlePlaceholderChange = (placeholderColor: string) =>
+    onInputsChange({ ...inputs, placeholderColor })
+
+  return (
+    <Stack>
+      <Flex justify="space-between" align="center">
+        <Text>Background:</Text>
+        <ColorPicker
+          initialColor={inputs?.backgroundColor ?? defaultBackgroundColor}
+          onColorChange={handleBackgroundChange}
+        />
+      </Flex>
+      <Flex justify="space-between" align="center">
+        <Text>Text:</Text>
+        <ColorPicker
+          initialColor={inputs?.color ?? defaultTextColor}
+          onColorChange={handleTextChange}
+        />
+      </Flex>
+      <Flex justify="space-between" align="center">
+        <Text>Placeholder text:</Text>
+        <ColorPicker
+          initialColor={inputs?.placeholderColor ?? defaultPlaceholderColor}
+          onColorChange={handlePlaceholderChange}
+        />
+      </Flex>
+    </Stack>
+  )
+}

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

@@ -0,0 +1 @@
+export { ChatThemeSettings } from './ChatThemeSettings'

apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundContent.tsx → apps/builder/components/theme/GeneralSettings/BackgroundSelector/BackgroundContent.tsx

@@ -4,24 +4,26 @@ import React from 'react'
 import { ColorPicker } from '../ColorPicker'
 
 type BackgroundContentProps = {
-  background: Background
+  background?: Background
   onBackgroundContentChange: (content: string) => void
 }
 
+const defaultBackgroundColor = '#ffffff'
+
 export const BackgroundContent = ({
   background,
   onBackgroundContentChange,
 }: BackgroundContentProps) => {
   const handleContentChange = (content: string) =>
     onBackgroundContentChange(content)
 
-  switch (background.type) {
+  switch (background?.type) {
     case BackgroundType.COLOR:
       return (
         <Flex justify="space-between" align="center">
           <Text>Background color:</Text>
           <ColorPicker
-            initialColor={background.content}
+            initialColor={background.content ?? defaultBackgroundColor}
             onColorChange={handleContentChange}
           />
         </Flex>

apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundSelector.tsx → apps/builder/components/theme/GeneralSettings/BackgroundSelector/BackgroundSelector.tsx

@@ -1,43 +1,35 @@
 import { Stack, Text } from '@chakra-ui/react'
 import { Background, BackgroundType } from 'models'
-import { deepEqual } from 'fast-equals'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { BackgroundContent } from './BackgroundContent'
 import { BackgroundTypeRadioButtons } from './BackgroundTypeRadioButtons'
 
 type Props = {
-  initialBackground?: Background
+  background?: Background
   onBackgroundChange: (newBackground: Background) => void
 }
+
+const defaultBackgroundType = BackgroundType.NONE
+
 export const BackgroundSelector = ({
-  initialBackground,
+  background,
   onBackgroundChange,
 }: Props) => {
-  const [currentBackground, setCurrentBackground] = useState<Background>(
-    initialBackground ?? { type: BackgroundType.NONE, content: '' }
-  )
-
-  useEffect(() => {
-    if (deepEqual(currentBackground, initialBackground)) return
-    onBackgroundChange(currentBackground)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentBackground])
-
   const handleBackgroundTypeChange = (type: BackgroundType) =>
-    setCurrentBackground({ ...currentBackground, type })
+    background && onBackgroundChange({ ...background, type })
 
   const handleBackgroundContentChange = (content: string) =>
-    setCurrentBackground({ ...currentBackground, content })
+    background && onBackgroundChange({ ...background, content })
 
   return (
     <Stack spacing={4}>
       <Text>Background</Text>
       <BackgroundTypeRadioButtons
-        backgroundType={currentBackground.type}
+        backgroundType={background?.type ?? defaultBackgroundType}
         onBackgroundTypeChange={handleBackgroundTypeChange}
       />
       <BackgroundContent
-        background={currentBackground}
+        background={background}
         onBackgroundContentChange={handleBackgroundContentChange}
       />
     </Stack>