✨ (theme) Add theme templates

Allows you to save your themes and select a theme from Typebot's gallery

Closes #275

apps/builder/src/features/theme/components/chat/ButtonsTheme.tsx

@@ -19,16 +19,13 @@ export const ButtonsTheme = ({ buttons, onButtonsChange }: Props) => {
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker
-          initialColor={buttons.backgroundColor}
+          value={buttons.backgroundColor}
           onColorChange={handleBackgroundChange}
         />
       </Flex>
       <Flex justify="space-between" align="center">
         <Text>Text:</Text>
-        <ColorPicker
-          initialColor={buttons.color}
-          onColorChange={handleTextChange}
-        />
+        <ColorPicker value={buttons.color} onColorChange={handleTextChange} />
       </Flex>
     </Stack>
   )

apps/builder/src/features/theme/components/chat/ChatThemeSettings.tsx

@@ -65,29 +65,7 @@ export const ChatThemeSettings = ({
           onHostBubblesChange={handleHostBubblesChange}
         />
       </Stack>
-      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
-        <Heading fontSize="lg">Corners roundness</Heading>
-        <RadioButtons
-          options={[
-            {
-              label: <NoRadiusIcon />,
-              value: 'none',
-            },
-            {
-              label: <MediumRadiusIcon />,
-              value: 'medium',
-            },
-            {
-              label: <LargeRadiusIcon />,
-              value: 'large',
-            },
-          ]}
-          defaultValue={chatTheme.roundness ?? 'medium'}
-          onSelect={(roundness) =>
-            onChatThemeChange({ ...chatTheme, roundness })
-          }
-        />
-      </Stack>
+
       <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
         <Heading fontSize="lg">User bubbles</Heading>
         <GuestBubbles
@@ -109,6 +87,29 @@ export const ChatThemeSettings = ({
           onInputsChange={handleInputsChange}
         />
       </Stack>
+      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
+        <Heading fontSize="lg">Corners roundness</Heading>
+        <RadioButtons
+          options={[
+            {
+              label: <NoRadiusIcon />,
+              value: 'none',
+            },
+            {
+              label: <MediumRadiusIcon />,
+              value: 'medium',
+            },
+            {
+              label: <LargeRadiusIcon />,
+              value: 'large',
+            },
+          ]}
+          value={chatTheme.roundness ?? 'medium'}
+          onSelect={(roundness) =>
+            onChatThemeChange({ ...chatTheme, roundness })
+          }
+        />
+      </Stack>
     </Stack>
   )
 }

apps/builder/src/features/theme/components/chat/GuestBubbles.tsx

@@ -19,14 +19,14 @@ export const GuestBubbles = ({ guestBubbles, onGuestBubblesChange }: Props) => {
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker
-          initialColor={guestBubbles.backgroundColor}
+          value={guestBubbles.backgroundColor}
           onColorChange={handleBackgroundChange}
         />
       </Flex>
       <Flex justify="space-between" align="center">
         <Text>Text:</Text>
         <ColorPicker
-          initialColor={guestBubbles.color}
+          value={guestBubbles.color}
           onColorChange={handleTextChange}
         />
       </Flex>

apps/builder/src/features/theme/components/chat/HostBubbles.tsx

@@ -19,14 +19,14 @@ export const HostBubbles = ({ hostBubbles, onHostBubblesChange }: Props) => {
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker
-          initialColor={hostBubbles.backgroundColor}
+          value={hostBubbles.backgroundColor}
           onColorChange={handleBackgroundChange}
         />
       </Flex>
       <Flex justify="space-between" align="center">
         <Text>Text:</Text>
         <ColorPicker
-          initialColor={hostBubbles.color}
+          value={hostBubbles.color}
           onColorChange={handleTextChange}
         />
       </Flex>

apps/builder/src/features/theme/components/chat/InputsTheme.tsx

@@ -21,21 +21,18 @@ export const InputsTheme = ({ inputs, onInputsChange }: Props) => {
       <Flex justify="space-between" align="center">
         <Text>Background:</Text>
         <ColorPicker
-          initialColor={inputs.backgroundColor}
+          value={inputs.backgroundColor}
           onColorChange={handleBackgroundChange}
         />
       </Flex>
       <Flex justify="space-between" align="center">
         <Text>Text:</Text>
-        <ColorPicker
-          initialColor={inputs.color}
-          onColorChange={handleTextChange}
-        />
+        <ColorPicker value={inputs.color} onColorChange={handleTextChange} />
       </Flex>
       <Flex justify="space-between" align="center">
         <Text>Placeholder text:</Text>
         <ColorPicker
-          initialColor={inputs.placeholderColor}
+          value={inputs.placeholderColor}
           onColorChange={handlePlaceholderChange}
         />
       </Flex>