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/GeneralContent.tsx

@@ -1,64 +0,0 @@
-import {
-  AccordionItem,
-  AccordionButton,
-  HStack,
-  Heading,
-  AccordionIcon,
-  AccordionPanel,
-  Stack,
-} from '@chakra-ui/react'
-import { PencilIcon } from 'assets/icons'
-import { Background } from 'models'
-import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import React from 'react'
-import { BackgroundSelector } from './BackgroundSelector'
-import { FontSelector } from './FontSelector'
-
-export const GeneralContent = () => {
-  const { typebot, updateTypebot } = useTypebot()
-
-  const handleSelectFont = (font: string) => {
-    if (!typebot) return
-    updateTypebot({
-      theme: {
-        ...typebot.theme,
-        general: { ...typebot.theme.general, font },
-      },
-    })
-  }
-
-  const handleBackgroundChange = (background: Background) => {
-    if (!typebot) return
-    updateTypebot({
-      theme: {
-        ...typebot.theme,
-        general: { ...typebot.theme.general, background },
-      },
-    })
-  }
-  return (
-    <AccordionItem>
-      <AccordionButton py={6}>
-        <HStack flex="1" pl={2}>
-          <PencilIcon />
-          <Heading fontSize="lg" color="gray.700">
-            General
-          </Heading>
-        </HStack>
-        <AccordionIcon />
-      </AccordionButton>
-      {typebot && (
-        <AccordionPanel as={Stack} pb={4} spacing={6}>
-          <FontSelector
-            activeFont={typebot.theme.general.font}
-            onSelectFont={handleSelectFont}
-          />
-          <BackgroundSelector
-            initialBackground={typebot.theme.general.background}
-            onBackgroundChange={handleBackgroundChange}
-          />
-        </AccordionPanel>
-      )}
-    </AccordionItem>
-  )
-}

apps/builder/components/theme/GeneralContent/index.ts

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

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

@@ -4,10 +4,12 @@ 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,
@@ -15,13 +17,13 @@ export const BackgroundContent = ({
   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/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>

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

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

apps/builder/components/theme/GeneralSettings/index.ts

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

apps/builder/components/theme/SideMenu.tsx

@@ -8,26 +8,58 @@ import {
   HStack,
   Stack,
 } from '@chakra-ui/react'
-import { ChatIcon, CodeIcon, LayoutIcon } from 'assets/icons'
+import { ChatIcon, CodeIcon, LayoutIcon, PencilIcon } from 'assets/icons'
+import { headerHeight } from 'components/shared/TypebotHeader'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ChatTheme, GeneralTheme } from 'models'
 import React from 'react'
-import { GeneralContent } from './GeneralContent'
+import { ChatThemeSettings } from './ChatSettings'
+import { GeneralSettings } from './GeneralSettings'
 
 export const SideMenu = () => {
+  const { typebot, updateTypebot } = useTypebot()
+
+  const handleChatThemeChange = (chat: ChatTheme) =>
+    updateTypebot({ theme: { ...typebot?.theme, chat } })
+
+  const handleGeneralThemeChange = (general: GeneralTheme) =>
+    updateTypebot({ theme: { ...typebot?.theme, general } })
+
   return (
-    <Stack flex="1" maxW="400px" borderRightWidth={1} pt={10} spacing={10}>
+    <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">
         Customize the theme
       </Heading>
       <Accordion allowMultiple allowToggle>
-        <GeneralContent />
-
+        <AccordionItem>
+          <AccordionButton py={6}>
+            <HStack flex="1" pl={2}>
+              <PencilIcon />
+              <Heading fontSize="lg">General</Heading>
+            </HStack>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4}>
+            <GeneralSettings
+              generalTheme={typebot?.theme?.general}
+              onGeneralThemeChange={handleGeneralThemeChange}
+            />
+          </AccordionPanel>
+        </AccordionItem>
         <AccordionItem>
           <AccordionButton py={6}>
             <HStack flex="1" pl={2}>
               <LayoutIcon />
-              <Heading fontSize="lg" color="gray.700">
-                Layout
-              </Heading>
+              <Heading fontSize="lg">Layout</Heading>
             </HStack>
             <AccordionIcon />
           </AccordionButton>
@@ -42,26 +74,22 @@ export const SideMenu = () => {
           <AccordionButton py={6}>
             <HStack flex="1" pl={2}>
               <ChatIcon />
-              <Heading fontSize="lg" color="gray.700">
-                Chat
-              </Heading>
+              <Heading fontSize="lg">Chat</Heading>
             </HStack>
             <AccordionIcon />
           </AccordionButton>
           <AccordionPanel pb={4}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            <ChatThemeSettings
+              chatTheme={typebot?.theme?.chat}
+              onChatThemeChange={handleChatThemeChange}
+            />
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem>
           <AccordionButton py={6}>
             <HStack flex="1" pl={2}>
               <CodeIcon />
-              <Heading fontSize="lg" color="gray.700">
-                Custom CSS
-              </Heading>
+              <Heading fontSize="lg">Custom CSS</Heading>
             </HStack>
             <AccordionIcon />
           </AccordionButton>

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

@@ -0,0 +1,148 @@
+{
+  "id": "typebot4",
+  "createdAt": "2022-01-21T07:55:14.727Z",
+  "updatedAt": "2022-01-21T07:55:14.727Z",
+  "name": "My typebot",
+  "ownerId": "user2",
+  "publishedTypebotId": null,
+  "folderId": null,
+  "blocks": {
+    "byId": {
+      "3kH2sUjVThQDWmqdoKnGk5": {
+        "id": "3kH2sUjVThQDWmqdoKnGk5",
+        "title": "Start",
+        "stepIds": ["oxTsU2C1RX5QHuyY8qjHAM"],
+        "graphCoordinates": { "x": 42, "y": 13 }
+      },
+      "bdFW2HHjMoEFmqHtFre9Xi8": {
+        "id": "bdFW2HHjMoEFmqHtFre9Xi8",
+        "title": "Block #2",
+        "stepIds": ["sgkADMK25y9P9V3vjwjBaac", "ssEiEECKSFkA44dGDceHxKw"],
+        "graphCoordinates": { "x": 121, "y": 227 }
+      },
+      "bhKHKi1SQb5woZEy1y4fNsJ": {
+        "id": "bhKHKi1SQb5woZEy1y4fNsJ",
+        "title": "Block #3",
+        "graphCoordinates": { "x": 605, "y": 454 },
+        "stepIds": ["sseUQEWCMdiZquk8EbxHYtk"]
+      }
+    },
+    "allIds": [
+      "3kH2sUjVThQDWmqdoKnGk5",
+      "bdFW2HHjMoEFmqHtFre9Xi8",
+      "bhKHKi1SQb5woZEy1y4fNsJ"
+    ]
+  },
+  "steps": {
+    "byId": {
+      "oxTsU2C1RX5QHuyY8qjHAM": {
+        "id": "oxTsU2C1RX5QHuyY8qjHAM",
+        "type": "start",
+        "label": "Start",
+        "edgeId": "25yX9DnQgdafpdAjfAu5Fp",
+        "blockId": "3kH2sUjVThQDWmqdoKnGk5"
+      },
+      "sgkADMK25y9P9V3vjwjBaac": {
+        "id": "sgkADMK25y9P9V3vjwjBaac",
+        "type": "text",
+        "blockId": "bdFW2HHjMoEFmqHtFre9Xi8",
+        "content": {
+          "html": "<div>Ready?</div>",
+          "richText": [{ "type": "p", "children": [{ "text": "Ready?" }] }],
+          "plainText": "Ready?"
+        }
+      },
+      "ssEiEECKSFkA44dGDceHxKw": {
+        "id": "ssEiEECKSFkA44dGDceHxKw",
+        "type": "choice input",
+        "edgeId": "6e4Sbp8pGTvBQYtCk2qXbN",
+        "blockId": "bdFW2HHjMoEFmqHtFre9Xi8",
+        "options": { "itemIds": ["q69Ex7LacPrH9QUMeosRnB"] }
+      },
+      "sseUQEWCMdiZquk8EbxHYtk": {
+        "id": "sseUQEWCMdiZquk8EbxHYtk",
+        "blockId": "bhKHKi1SQb5woZEy1y4fNsJ",
+        "type": "text input"
+      }
+    },
+    "allIds": [
+      "oxTsU2C1RX5QHuyY8qjHAM",
+      "sgkADMK25y9P9V3vjwjBaac",
+      "ssEiEECKSFkA44dGDceHxKw",
+      "sseUQEWCMdiZquk8EbxHYtk"
+    ]
+  },
+  "choiceItems": {
+    "byId": {
+      "q69Ex7LacPrH9QUMeosRnB": {
+        "id": "q69Ex7LacPrH9QUMeosRnB",
+        "stepId": "ssEiEECKSFkA44dGDceHxKw",
+        "content": "Go"
+      }
+    },
+    "allIds": ["q69Ex7LacPrH9QUMeosRnB"]
+  },
+  "variables": {
+    "byId": {
+      "4tvkRmf32wiTsXrYoqyhfr": {
+        "id": "4tvkRmf32wiTsXrYoqyhfr",
+        "name": "secret 2"
+      },
+      "jEg1FvkCU5S5owNAxXFsHL": {
+        "id": "jEg1FvkCU5S5owNAxXFsHL",
+        "name": "secret 3"
+      },
+      "oASkBtoLqkYNqeakcjZH4L": {
+        "id": "oASkBtoLqkYNqeakcjZH4L",
+        "name": "secret 1"
+      },
+      "rEoE1ehHzgx8X3d3UPGDHg": {
+        "id": "rEoE1ehHzgx8X3d3UPGDHg",
+        "name": "secret 4"
+      }
+    },
+    "allIds": [
+      "oASkBtoLqkYNqeakcjZH4L",
+      "4tvkRmf32wiTsXrYoqyhfr",
+      "jEg1FvkCU5S5owNAxXFsHL",
+      "rEoE1ehHzgx8X3d3UPGDHg"
+    ]
+  },
+  "webhooks": {
+    "byId": {
+      "4h4Kk3Q1qGy7gFzpZtWVpU": { "id": "4h4Kk3Q1qGy7gFzpZtWVpU", "url": "" }
+    },
+    "allIds": ["4h4Kk3Q1qGy7gFzpZtWVpU"]
+  },
+  "edges": {
+    "byId": {
+      "25yX9DnQgdafpdAjfAu5Fp": {
+        "id": "25yX9DnQgdafpdAjfAu5Fp",
+        "to": { "blockId": "bdFW2HHjMoEFmqHtFre9Xi8" },
+        "from": {
+          "stepId": "oxTsU2C1RX5QHuyY8qjHAM",
+          "blockId": "3kH2sUjVThQDWmqdoKnGk5"
+        }
+      },
+      "6e4Sbp8pGTvBQYtCk2qXbN": {
+        "from": {
+          "blockId": "bdFW2HHjMoEFmqHtFre9Xi8",
+          "stepId": "ssEiEECKSFkA44dGDceHxKw"
+        },
+        "to": { "blockId": "bhKHKi1SQb5woZEy1y4fNsJ" },
+        "id": "6e4Sbp8pGTvBQYtCk2qXbN"
+      }
+    },
+    "allIds": ["25yX9DnQgdafpdAjfAu5Fp", "6e4Sbp8pGTvBQYtCk2qXbN"]
+  },
+  "theme": {
+    "general": {
+      "font": "Open Sans",
+      "background": { "type": "None", "content": "#ffffff" }
+    }
+  },
+  "settings": {
+    "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
+  },
+  "publicId": null
+}

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

@@ -0,0 +1,90 @@
+import { getIframeBody } from 'cypress/support'
+
+describe('General theme settings', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    cy.signOut()
+  })
+
+  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()
+
+    // Host bubbles
+    cy.findAllByRole('button', { name: 'Pick a color' }).first().click()
+    cy.findByRole('textbox', { name: 'Color value' }).clear().type('#2a9d8f')
+    cy.findAllByRole('button', { name: 'Pick a color' })
+      .eq(1)
+      .click({ force: true })
+    cy.findByRole('textbox', { name: 'Color value' }).clear().type('#ffffff')
+    getIframeBody()
+      .findByTestId('host-bubble')
+      .should('have.css', 'background-color')
+      .should('eq', 'rgb(42, 157, 143)')
+    getIframeBody()
+      .findByTestId('host-bubble')
+      .should('have.css', 'color')
+      .should('eq', 'rgb(255, 255, 255)')
+
+    // Buttons
+    cy.findAllByRole('button', { name: 'Pick a color' })
+      .eq(4)
+      .click({ force: true })
+    cy.findByRole('textbox', { name: 'Color value' }).clear().type('#7209b7')
+    cy.findAllByRole('button', { name: 'Pick a color' })
+      .eq(5)
+      .click({ force: true })
+    cy.findByRole('textbox', { name: 'Color value' }).clear().type('#e9c46a')
+    getIframeBody()
+      .findByTestId('button')
+      .should('have.css', 'background-color')
+      .should('eq', 'rgb(114, 9, 183)')
+    getIframeBody()
+      .findByTestId('button')
+      .should('have.css', 'color')
+      .should('eq', 'rgb(233, 196, 106)')
+
+    // Guest bubbles
+    cy.findAllByRole('button', { name: 'Pick a color' })
+      .eq(2)
+      .click({ force: true })
+    cy.findByRole('textbox', { name: 'Color value' }).clear().type('#d8f3dc')
+    cy.findAllByRole('button', { name: 'Pick a color' })
+      .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')
+      .should('have.css', 'background-color')
+      .should('eq', 'rgb(216, 243, 220)')
+    getIframeBody()
+      .findByTestId('guest-bubble')
+      .should('have.css', 'color')
+      .should('eq', 'rgb(38, 70, 83)')
+
+    cy.findByRole('textbox', { name: 'Color value' }).clear().type('#ffe8d6')
+    cy.findAllByRole('button', { name: 'Pick a color' })
+      .eq(7)
+      .click({ force: true })
+    cy.findByRole('textbox', { name: 'Color value' }).clear().type('#023e8a')
+    cy.findAllByRole('button', { name: 'Pick a color' })
+      .eq(8)
+      .click({ force: true })
+    cy.findByRole('textbox', { name: 'Color value' }).clear().type('red')
+    getIframeBody()
+      .findByTestId('input')
+      .should('have.css', 'background-color')
+      .should('eq', 'rgb(255, 232, 214)')
+    getIframeBody()
+      .findByTestId('input')
+      .should('have.css', 'color')
+      .should('eq', 'rgb(2, 61, 138)')
+  })
+})

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

@@ -6,8 +6,8 @@ describe('General theme settings', () => {
     cy.signOut()
   })
 
-  it.only('should reflect changes in real time', () => {
-    cy.loadTypebotFixtureInDatabase('typebots/integrations/webhook.json')
+  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/services/typebots.ts

@@ -2,10 +2,7 @@ import {
   Block,
   TextBubbleStep,
   PublicTypebot,
-  BackgroundType,
-  Settings,
   StartStep,
-  Theme,
   BubbleStepType,
   InputStepType,
   ChoiceInputStep,
@@ -216,19 +213,6 @@ export const parseNewTypebot = ({
     graphCoordinates: { x: 0, y: 0 },
     stepIds: [startStepId],
   }
-  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 {
     folderId,
     name,
@@ -239,8 +223,6 @@ export const parseNewTypebot = ({
     variables: { byId: {}, allIds: [] },
     edges: { byId: {}, allIds: [] },
     webhooks: { byId: {}, allIds: [] },
-    theme,
-    settings,
   }
 }