From 65d33e04bc6b993d2c9e3d42ee7509cd90a88aed Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Wed, 22 Mar 2023 16:43:34 +0100
Subject: [PATCH] :zap: (theme) Add corner roundness customization

Closes #415
---
 apps/builder/src/components/icons.tsx         | 39 +++++++++++++++++++
 .../inputs/RadioButtons.tsx}                  | 39 ++++++++++---------
 .../components/chat/ChatThemeSettings.tsx     | 29 ++++++++++++++
 .../components/general/BackgroundSelector.tsx | 13 +++++--
 apps/builder/src/features/theme/theme.spec.ts | 26 +++++++++++++
 packages/embeds/js/package.json               |  2 +-
 packages/embeds/js/src/assets/index.css       | 25 +++++++++---
 .../ConversationContainer.tsx                 |  2 +-
 .../PopupBlockedToast.tsx                     |  4 +-
 .../embeds/js/src/components/SendButton.tsx   |  2 +-
 .../js/src/components/bubbles/GuestBubble.tsx |  2 +-
 .../src/components/bubbles/LoadingBubble.tsx  |  2 +-
 .../bubbles/audio/components/AudioBubble.tsx  |  2 +-
 .../bubbles/embed/components/EmbedBubble.tsx  |  4 +-
 .../bubbles/image/components/ImageBubble.tsx  |  4 +-
 .../textBubble/components/TextBubble.tsx      |  4 +-
 .../bubbles/video/components/VideoBubble.tsx  |  6 +--
 .../inputs/buttons/components/ChoiceForm.tsx  |  2 +-
 .../inputs/date/components/DateForm.tsx       |  2 +-
 .../inputs/email/components/EmailInput.tsx    |  4 +-
 .../fileUpload/components/FileUploadForm.tsx  |  6 +--
 .../inputs/number/components/NumberInput.tsx  |  4 +-
 .../payment/components/StripePaymentForm.tsx  |  2 +-
 .../inputs/phone/components/PhoneInput.tsx    |  4 +-
 .../inputs/rating/components/RatingForm.tsx   |  2 +-
 .../inputs/textInput/components/TextInput.tsx |  4 +-
 .../blocks/inputs/url/components/UrlInput.tsx |  4 +-
 .../js/src/utils/setCssVariablesValue.ts      | 20 +++++++++-
 packages/embeds/react/package.json            |  2 +-
 .../schemas/features/typebot/theme/schemas.ts |  1 +
 30 files changed, 195 insertions(+), 67 deletions(-)
 rename apps/builder/src/{features/theme/components/general/BackgroundTypeRadioButtons.tsx => components/inputs/RadioButtons.tsx} (63%)

diff --git a/apps/builder/src/components/icons.tsx b/apps/builder/src/components/icons.tsx
index d80aa02581..4d09d806f8 100644
--- a/apps/builder/src/components/icons.tsx
+++ b/apps/builder/src/components/icons.tsx
@@ -552,3 +552,42 @@ export const CloseIcon = (props: IconProps) => (
     <line x1="6" y1="6" x2="18" y2="18"></line>
   </Icon>
 )
+
+export const NoRadiusIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 20 20" {...props}>
+    <mask id="path-1-inside-1_1009_3" fill="white">
+      <path d="M0 0H20V20H0V0Z" />
+    </mask>
+    <path
+      d="M0 0V-2H-2V0H0ZM0 20H-2V22H0V20ZM0 2H20V-2H0V2ZM20 18H0V22H20V18ZM2 20V0H-2V20H2Z"
+      fill="black"
+      mask="url(#path-1-inside-1_1009_3)"
+    />
+  </Icon>
+)
+
+export const MediumRadiusIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 20 20" {...props}>
+    <mask id="path-1-inside-1_1009_4" fill="white">
+      <path d="M0 4C0 1.79086 1.79086 0 4 0H20V20H4C1.79086 20 0 18.2091 0 16V4Z" />
+    </mask>
+    <path
+      d="M-2 4C-2 0.686292 0.686292 -2 4 -2H20V2H4C2.89543 2 2 2.89543 2 4H-2ZM20 22H4C0.686292 22 -2 19.3137 -2 16H2C2 17.1046 2.89543 18 4 18H20V22ZM4 22C0.686292 22 -2 19.3137 -2 16V4C-2 0.686292 0.686292 -2 4 -2V2C2.89543 2 2 2.89543 2 4V16C2 17.1046 2.89543 18 4 18V22ZM20 0V20V0Z"
+      fill="black"
+      mask="url(#path-1-inside-1_1009_4)"
+    />
+  </Icon>
+)
+
+export const LargeRadiusIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 20 20" {...props}>
+    <mask id="path-1-inside-1_1009_5" fill="white">
+      <path d="M0 10C0 4.47715 4.47715 0 10 0H20V20H10C4.47715 20 0 15.5228 0 10V10Z" />
+    </mask>
+    <path
+      d="M-2 10C-2 3.37258 3.37258 -2 10 -2H20V2H10C5.58172 2 2 5.58172 2 10H-2ZM20 22H10C3.37258 22 -2 16.6274 -2 10H2C2 14.4183 5.58172 18 10 18H20V22ZM10 22C3.37258 22 -2 16.6274 -2 10C-2 3.37258 3.37258 -2 10 -2V2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18V22ZM20 0V20V0Z"
+      fill="black"
+      mask="url(#path-1-inside-1_1009_5)"
+    />
+  </Icon>
+)
diff --git a/apps/builder/src/features/theme/components/general/BackgroundTypeRadioButtons.tsx b/apps/builder/src/components/inputs/RadioButtons.tsx
similarity index 63%
rename from apps/builder/src/features/theme/components/general/BackgroundTypeRadioButtons.tsx
rename to apps/builder/src/components/inputs/RadioButtons.tsx
index 596c7dbd9a..8d6acb19fd 100644
--- a/apps/builder/src/features/theme/components/general/BackgroundTypeRadioButtons.tsx
+++ b/apps/builder/src/components/inputs/RadioButtons.tsx
@@ -7,35 +7,32 @@ import {
   useRadioGroup,
   UseRadioProps,
 } from '@chakra-ui/react'
-import { BackgroundType } from '@typebot.io/schemas'
 import { ReactNode } from 'react'
 
-type Props = {
-  backgroundType: BackgroundType
-  onBackgroundTypeChange: (type: BackgroundType) => void
+type Props<T extends string> = {
+  options: (T | { value: T; label: ReactNode })[]
+  defaultValue: T
+  onSelect: (newValue: T) => void
 }
-export const BackgroundTypeRadioButtons = ({
-  backgroundType,
-  onBackgroundTypeChange,
-}: Props) => {
-  const options = ['Color', 'Image', 'None']
-
+export const RadioButtons = <T extends string>({
+  options,
+  defaultValue,
+  onSelect,
+}: Props<T>) => {
   const { getRootProps, getRadioProps } = useRadioGroup({
-    name: 'background-type',
-    defaultValue: backgroundType,
-    onChange: (nextVal: string) =>
-      onBackgroundTypeChange(nextVal as BackgroundType),
+    defaultValue,
+    onChange: onSelect,
   })
 
   const group = getRootProps()
 
   return (
     <HStack {...group}>
-      {options.map((value) => {
-        const radio = getRadioProps({ value })
+      {options.map((item) => {
+        const radio = getRadioProps({ value: parseValue(item) })
         return (
-          <RadioCard key={value} {...radio}>
-            {value}
+          <RadioCard key={parseValue(item)} {...radio}>
+            {parseLabel(item)}
           </RadioCard>
         )
       })}
@@ -76,3 +73,9 @@ export const RadioCard = (props: UseRadioProps & { children: ReactNode }) => {
     </Box>
   )
 }
+
+const parseValue = (item: string | { value: string; label: ReactNode }) =>
+  typeof item === 'string' ? item : item.value
+
+const parseLabel = (item: string | { value: string; label: ReactNode }) =>
+  typeof item === 'string' ? item : item.label
diff --git a/apps/builder/src/features/theme/components/chat/ChatThemeSettings.tsx b/apps/builder/src/features/theme/components/chat/ChatThemeSettings.tsx
index 57725db915..a7b36ee29b 100644
--- a/apps/builder/src/features/theme/components/chat/ChatThemeSettings.tsx
+++ b/apps/builder/src/features/theme/components/chat/ChatThemeSettings.tsx
@@ -1,3 +1,9 @@
+import {
+  LargeRadiusIcon,
+  MediumRadiusIcon,
+  NoRadiusIcon,
+} from '@/components/icons'
+import { RadioButtons } from '@/components/inputs/RadioButtons'
 import { Heading, Stack } from '@chakra-ui/react'
 import {
   AvatarProps,
@@ -59,6 +65,29 @@ 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
diff --git a/apps/builder/src/features/theme/components/general/BackgroundSelector.tsx b/apps/builder/src/features/theme/components/general/BackgroundSelector.tsx
index 3e65fc23e0..3a6858d520 100644
--- a/apps/builder/src/features/theme/components/general/BackgroundSelector.tsx
+++ b/apps/builder/src/features/theme/components/general/BackgroundSelector.tsx
@@ -1,8 +1,8 @@
+import { RadioButtons } from '@/components/inputs/RadioButtons'
 import { Stack, Text } from '@chakra-ui/react'
 import { Background, BackgroundType } from '@typebot.io/schemas'
 import React from 'react'
 import { BackgroundContent } from './BackgroundContent'
-import { BackgroundTypeRadioButtons } from './BackgroundTypeRadioButtons'
 
 type Props = {
   background?: Background
@@ -25,9 +25,14 @@ export const BackgroundSelector = ({
   return (
     <Stack spacing={4}>
       <Text>Background</Text>
-      <BackgroundTypeRadioButtons
-        backgroundType={background?.type ?? defaultBackgroundType}
-        onBackgroundTypeChange={handleBackgroundTypeChange}
+      <RadioButtons
+        options={[
+          BackgroundType.COLOR,
+          BackgroundType.IMAGE,
+          BackgroundType.NONE,
+        ]}
+        defaultValue={background?.type ?? defaultBackgroundType}
+        onSelect={handleBackgroundTypeChange}
       />
       <BackgroundContent
         background={background}
diff --git a/apps/builder/src/features/theme/theme.spec.ts b/apps/builder/src/features/theme/theme.spec.ts
index d4befeaa35..c3d0d71346 100644
--- a/apps/builder/src/features/theme/theme.spec.ts
+++ b/apps/builder/src/features/theme/theme.spec.ts
@@ -90,6 +90,32 @@ test.describe.parallel('Theme page', () => {
 
       await expect(page.locator('.typebot-container img')).toBeHidden()
 
+      // Roundness
+      await expect(page.getByRole('button', { name: 'Go' })).toHaveCSS(
+        'border-radius',
+        '6px'
+      )
+      await page
+        .getByRole('region', { name: 'Chat' })
+        .getByRole('radiogroup')
+        .locator('div')
+        .first()
+        .click()
+      await expect(page.getByRole('button', { name: 'Go' })).toHaveCSS(
+        'border-radius',
+        '0px'
+      )
+      await page
+        .getByRole('region', { name: 'Chat' })
+        .getByRole('radiogroup')
+        .locator('div')
+        .nth(2)
+        .click()
+      await expect(page.getByRole('button', { name: 'Go' })).toHaveCSS(
+        'border-radius',
+        '20px'
+      )
+
       // Host bubbles
       await page.click(
         '[data-testid="host-bubbles-theme"] >> [aria-label="Pick a color"] >> nth=0'
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 1947351b2d..e818a9b886 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/embeds/js/src/assets/index.css b/packages/embeds/js/src/assets/index.css
index ad98fd9f2a..6295671ade 100644
--- a/packages/embeds/js/src/assets/index.css
+++ b/packages/embeds/js/src/assets/index.css
@@ -23,6 +23,8 @@
   --typebot-header-bg-color: #ffffff;
   --typebot-header-color: #303235;
 
+  --typebot-border-radius: 6px;
+
   /* Phone input */
   --PhoneInputCountryFlag-borderColor: transparent;
   --PhoneInput-color--focus: transparent;
@@ -127,15 +129,11 @@ textarea {
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
 
-.custom-header {
-  color: var(--typebot-header-color);
-  background-color: var(--typebot-header-bg-color);
-}
-
 .typebot-button {
   color: var(--typebot-button-color);
   background-color: var(--typebot-button-bg-color);
   border: 1px solid var(--typebot-button-bg-color);
+  border-radius: var(--typebot-border-radius);
 }
 
 .typebot-button.selectable {
@@ -151,17 +149,26 @@ textarea {
 .typebot-host-bubble > .bubble-typing {
   background-color: var(--typebot-host-bubble-bg-color);
   border: var(--typebot-host-bubble-border);
+  border-radius: 6px;
+}
+
+.typebot-host-bubble img,
+.typebot-host-bubble iframe,
+.typebot-host-bubble video {
+  border-radius: var(--typebot-border-radius);
 }
 
 .typebot-guest-bubble {
   color: var(--typebot-guest-bubble-color);
   background-color: var(--typebot-guest-bubble-bg-color);
+  border-radius: 6px;
 }
 
 .typebot-input {
   color: var(--typebot-input-color);
   background-color: var(--typebot-input-bg-color);
   box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1);
+  border-radius: var(--typebot-border-radius);
 }
 
 .typebot-input-error-message {
@@ -202,6 +209,7 @@ textarea {
 
 .upload-progress-bar {
   background-color: var(--typebot-button-bg-color);
+  border-radius: var(--typebot-border-radius);
 }
 
 .total-files-indicator {
@@ -221,15 +229,22 @@ textarea {
 .secondary-button {
   background-color: var(--typebot-host-bubble-bg-color);
   color: var(--typebot-host-bubble-color);
+  border-radius: var(--typebot-border-radius);
 }
 
 .typebot-country-select {
   color: var(--typebot-input-color);
   background-color: var(--typebot-input-bg-color);
+  border-radius: var(--typebot-border-radius);
 }
 
 .typebot-date-input {
   color-scheme: light;
   color: var(--typebot-input-color);
   background-color: var(--typebot-input-bg-color);
+  border-radius: var(--typebot-border-radius);
+}
+
+.typebot-popup-blocked-toast {
+  border-radius: var(--typebot-border-radius);
 }
diff --git a/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx b/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
index 0701f0e717..aa341feaa1 100644
--- a/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
+++ b/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
@@ -157,7 +157,7 @@ export const ConversationContainer = (props: Props) => {
   return (
     <div
       ref={chatContainer}
-      class="overflow-y-scroll w-full min-h-full rounded px-3 pt-10 relative scrollable-container typebot-chat-view scroll-smooth"
+      class="overflow-y-scroll w-full min-h-full px-3 pt-10 relative scrollable-container typebot-chat-view scroll-smooth"
     >
       <For each={chatChunks()}>
         {(chatChunk, index) => (
diff --git a/packages/embeds/js/src/components/ConversationContainer/PopupBlockedToast.tsx b/packages/embeds/js/src/components/ConversationContainer/PopupBlockedToast.tsx
index f8a0f3907d..54f0733824 100644
--- a/packages/embeds/js/src/components/ConversationContainer/PopupBlockedToast.tsx
+++ b/packages/embeds/js/src/components/ConversationContainer/PopupBlockedToast.tsx
@@ -6,7 +6,7 @@ type Props = {
 export const PopupBlockedToast = (props: Props) => {
   return (
     <div
-      class="w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow flex flex-col gap-2"
+      class="w-full max-w-xs p-4 text-gray-500 bg-white shadow flex flex-col gap-2 typebot-popup-blocked-toast"
       role="alert"
     >
       <span class="mb-1 text-sm font-semibold text-gray-900">
@@ -19,7 +19,7 @@ export const PopupBlockedToast = (props: Props) => {
       <a
         href={props.url}
         target="_blank"
-        class="py-1 px-4 justify-center text-sm font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button"
+        class="py-1 px-4 justify-center text-sm font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button"
         rel="noreferrer"
         onClick={() => props.onLinkClick()}
       >
diff --git a/packages/embeds/js/src/components/SendButton.tsx b/packages/embeds/js/src/components/SendButton.tsx
index 325b6c968f..17fa208279 100644
--- a/packages/embeds/js/src/components/SendButton.tsx
+++ b/packages/embeds/js/src/components/SendButton.tsx
@@ -16,7 +16,7 @@ export const SendButton = (props: SendButtonProps) => {
       disabled={props.isDisabled || props.isLoading}
       {...props}
       class={
-        'py-2 px-4 justify-center font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button ' +
+        'py-2 px-4 justify-center font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button ' +
         props.class
       }
     >
diff --git a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx b/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
index 9c1eaf0db5..402561e95e 100644
--- a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
+++ b/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
@@ -13,7 +13,7 @@ export const GuestBubble = (props: Props) => (
     style={{ 'margin-left': '50px' }}
   >
     <span
-      class="px-4 py-2 rounded-lg mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble"
+      class="px-4 py-2 mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble"
       data-testid="guest-bubble"
     >
       {props.message}
diff --git a/packages/embeds/js/src/components/bubbles/LoadingBubble.tsx b/packages/embeds/js/src/components/bubbles/LoadingBubble.tsx
index 074f86a69d..12720b26ab 100644
--- a/packages/embeds/js/src/components/bubbles/LoadingBubble.tsx
+++ b/packages/embeds/js/src/components/bubbles/LoadingBubble.tsx
@@ -5,7 +5,7 @@ export const LoadingBubble = () => (
     <div class="flex mb-2 w-full items-center">
       <div class={'flex relative items-start typebot-host-bubble'}>
         <div
-          class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
+          class="flex items-center absolute px-4 py-2 bubble-typing "
           style={{
             width: '64px',
             height: '32px',
diff --git a/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
index 97cae54f7f..a99a6bc286 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
@@ -33,7 +33,7 @@ export const AudioBubble = (props: Props) => {
       <div class="flex mb-2 w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div
-            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{
               width: isTyping() ? '64px' : '100%',
               height: isTyping() ? '32px' : '100%',
diff --git a/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
index dcec05c383..133ed537f9 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
@@ -34,7 +34,7 @@ export const EmbedBubble = (props: Props) => {
           class={'flex relative z-10 items-start typebot-host-bubble w-full'}
         >
           <div
-            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{
               width: isTyping() ? '64px' : '100%',
               height: isTyping() ? '32px' : '100%',
@@ -46,7 +46,7 @@ export const EmbedBubble = (props: Props) => {
             id="embed-bubble-content"
             src={props.content.url}
             class={
-              'w-full z-20 p-4 text-fade-in rounded-2xl ' +
+              'w-full z-20 p-4 text-fade-in ' +
               (isTyping() ? 'opacity-0' : 'opacity-100')
             }
             style={{
diff --git a/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
index 13dca9a59b..50f1da5899 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
@@ -43,7 +43,7 @@ export const ImageBubble = (props: Props) => {
       <div class="flex mb-2 w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div
-            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{
               width: isTyping() ? '64px' : '100%',
               height: isTyping() ? '32px' : '100%',
@@ -56,7 +56,7 @@ export const ImageBubble = (props: Props) => {
               ref={image}
               src={props.url}
               class={
-                'text-fade-in w-full rounded-md ' +
+                'text-fade-in w-full ' +
                 (isTyping() ? 'opacity-0' : 'opacity-100')
               }
               style={{
diff --git a/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
index a6c8cba2ef..b61983419a 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
@@ -49,9 +49,9 @@ export const TextBubble = (props: Props) => {
   return (
     <div class="flex flex-col animate-fade-in">
       <div class="flex mb-2 w-full items-center">
-        <div class={'flex relative items-start typebot-host-bubble'}>
+        <div class="flex relative items-start typebot-host-bubble">
           <div
-            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
+            class="flex items-center absolute px-4 py-2 bubble-typing "
             style={{
               width: isTyping() ? '64px' : '100%',
               height: isTyping() ? '32px' : '100%',
diff --git a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
index 59589fbfdb..2eada0ebe6 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
@@ -36,7 +36,7 @@ export const VideoBubble = (props: Props) => {
       <div class="flex mb-2 w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div
-            class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
+            class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{
               width: isTyping() ? '64px' : '100%',
               height: isTyping() ? '32px' : '100%',
@@ -68,7 +68,7 @@ const VideoContent = (props: VideoContentProps) => {
         <video
           controls
           class={
-            'p-4 focus:outline-none w-full z-10 text-fade-in rounded-md ' +
+            'p-4 focus:outline-none w-full z-10 text-fade-in ' +
             (props.isTyping ? 'opacity-0' : 'opacity-100')
           }
           style={{
@@ -97,7 +97,7 @@ const VideoContent = (props: VideoContentProps) => {
               : 'https://www.youtube.com/embed'
           }/${props.content.id}`}
           class={
-            'w-full p-4 text-fade-in z-10 rounded-md ' +
+            'w-full p-4 text-fade-in z-10 ' +
             (props.isTyping ? 'opacity-0' : 'opacity-100')
           }
           height={props.isTyping ? '32px' : '200px'}
diff --git a/packages/embeds/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx b/packages/embeds/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx
index a895ff1682..ad942b9fa4 100644
--- a/packages/embeds/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx
@@ -49,7 +49,7 @@ export const ChoiceForm = (props: Props) => {
                 type="button"
                 on:click={() => handleClick(index())}
                 class={
-                  'py-2 px-4 text-left font-semibold rounded-md transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none typebot-button ' +
+                  'py-2 px-4 text-left font-semibold transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none typebot-button ' +
                   (selectedIndices().some(
                     (selectedIndex) => selectedIndex === index()
                   ) || !props.block.options?.isMultipleChoice
diff --git a/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx b/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx
index 1af7500829..7d4d18541a 100644
--- a/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx
@@ -19,7 +19,7 @@ export const DateForm = (props: Props) => {
     <div class="flex flex-col">
       <div class="flex items-center">
         <form
-          class={'flex justify-between rounded-lg typebot-input pr-2 items-end'}
+          class={'flex justify-between typebot-input pr-2 items-end'}
           onSubmit={(e) => {
             if (inputValues().from === '' && inputValues().to === '') return
             e.preventDefault()
diff --git a/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx b/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx
index ebb4fdaea3..811ff7ee7f 100644
--- a/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx
@@ -34,9 +34,7 @@ export const EmailInput = (props: Props) => {
 
   return (
     <div
-      class={
-        'flex items-end justify-between rounded-lg pr-2 typebot-input w-full'
-      }
+      class={'flex items-end justify-between pr-2 typebot-input w-full'}
       data-testid="input"
       style={{
         'max-width': '350px',
diff --git a/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx b/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
index 50e8eb4fe4..2f7d9ab2c7 100644
--- a/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
@@ -116,7 +116,7 @@ export const FileUploadForm = (props: Props) => {
       <label
         for="dropzone-file"
         class={
-          'typebot-upload-input py-6 flex flex-col justify-center items-center w-full bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer hover:bg-gray-100 px-8 mb-2 ' +
+          'typebot-upload-input py-6 flex flex-col justify-center items-center w-full bg-gray-50 border-2 border-gray-300 border-dashed cursor-pointer hover:bg-gray-100 px-8 mb-2 ' +
           (isDraggingOver() ? 'dragging-over' : '')
         }
         onDragOver={handleDragOver}
@@ -181,7 +181,7 @@ export const FileUploadForm = (props: Props) => {
         <div class="flex justify-end">
           <button
             class={
-              'py-2 px-4 justify-center font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button '
+              'py-2 px-4 justify-center font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button '
             }
             on:click={() =>
               props.onSkip(
@@ -207,7 +207,7 @@ export const FileUploadForm = (props: Props) => {
             <Show when={selectedFiles().length}>
               <button
                 class={
-                  'secondary-button py-2 px-4 justify-center font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 mr-2'
+                  'secondary-button py-2 px-4 justify-center font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 mr-2'
                 }
                 on:click={clearFiles}
               >
diff --git a/packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx b/packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx
index e0adbfe689..4dbae216e8 100644
--- a/packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx
@@ -34,9 +34,7 @@ export const NumberInput = (props: NumberInputProps) => {
 
   return (
     <div
-      class={
-        'flex items-end justify-between rounded-lg pr-2 typebot-input w-full'
-      }
+      class={'flex items-end justify-between pr-2 typebot-input w-full'}
       data-testid="input"
       style={{
         'max-width': '350px',
diff --git a/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx b/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx
index c76052d1f0..5b0f09b383 100644
--- a/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx
@@ -77,7 +77,7 @@ export const StripePaymentForm = (props: Props) => {
     <form
       id="payment-form"
       onSubmit={handleSubmit}
-      class="flex flex-col rounded-lg p-4 typebot-input w-full items-center"
+      class="flex flex-col p-4 typebot-input w-full items-center"
     >
       <slot name={slotName} ref={paymentElementSlot} />
       <Show when={isMounted()}>
diff --git a/packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx b/packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
index c557c63efa..b0be794822 100644
--- a/packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
@@ -91,7 +91,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
 
   return (
     <div
-      class={'flex items-end justify-between rounded-lg pr-2 typebot-input'}
+      class={'flex items-end justify-between pr-2 typebot-input'}
       data-testid="input"
       style={{
         'max-width': '400px',
@@ -99,7 +99,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
       onKeyDown={submitWhenEnter}
     >
       <div class="flex">
-        <div class="relative typebot-country-select flex justify-center items-center rounded-md">
+        <div class="relative typebot-country-select flex justify-center items-center">
           <div class="pl-2 pr-1 flex items-center gap-2">
             <span>
               {
diff --git a/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx b/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx
index 582a320c14..a2e17c2f9f 100644
--- a/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx
@@ -89,7 +89,7 @@ const RatingButton = (props: RatingButtonProps) => {
             props.onClick(props.idx)
           }}
           class={
-            'py-2 px-4 mr-2 mb-2 text-left font-semibold rounded-md transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none typebot-button ' +
+            'py-2 px-4 mr-2 mb-2 text-left font-semibold transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none typebot-button ' +
             (props.isOneClickSubmitEnabled ||
             (isDefined(props.rating) && props.idx <= props.rating)
               ? ''
diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
index 4edb8b935d..0725defde4 100644
--- a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
@@ -35,9 +35,7 @@ export const TextInput = (props: Props) => {
 
   return (
     <div
-      class={
-        'flex items-end justify-between rounded-lg pr-2 typebot-input w-full'
-      }
+      class={'flex items-end justify-between pr-2 typebot-input w-full'}
       data-testid="input"
       style={{
         'max-width': props.block.options.isLong ? undefined : '350px',
diff --git a/packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx b/packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx
index 5adcce7a52..4879fe2130 100644
--- a/packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx
@@ -40,9 +40,7 @@ export const UrlInput = (props: Props) => {
 
   return (
     <div
-      class={
-        'flex items-end justify-between rounded-lg pr-2 typebot-input w-full'
-      }
+      class={'flex items-end justify-between pr-2 typebot-input w-full'}
       data-testid="input"
       style={{
         'max-width': '350px',
diff --git a/packages/embeds/js/src/utils/setCssVariablesValue.ts b/packages/embeds/js/src/utils/setCssVariablesValue.ts
index c42119b535..3b958256cd 100644
--- a/packages/embeds/js/src/utils/setCssVariablesValue.ts
+++ b/packages/embeds/js/src/utils/setCssVariablesValue.ts
@@ -59,11 +59,12 @@ const setChatTheme = (
   chatTheme: ChatTheme,
   documentStyle: CSSStyleDeclaration
 ) => {
-  const { hostBubbles, guestBubbles, buttons, inputs } = chatTheme
+  const { hostBubbles, guestBubbles, buttons, inputs, roundness } = chatTheme
   if (hostBubbles) setHostBubbles(hostBubbles, documentStyle)
   if (guestBubbles) setGuestBubbles(guestBubbles, documentStyle)
   if (buttons) setButtons(buttons, documentStyle)
   if (inputs) setInputs(inputs, documentStyle)
+  if (roundness) setRoundness(roundness, documentStyle)
 }
 
 const setHostBubbles = (
@@ -151,3 +152,20 @@ const parseBackgroundValue = ({ type, content }: Background) => {
       return `url(${content})`
   }
 }
+
+const setRoundness = (
+  roundness: NonNullable<ChatTheme['roundness']>,
+  documentStyle: CSSStyleDeclaration
+) => {
+  switch (roundness) {
+    case 'none':
+      documentStyle.setProperty('--typebot-border-radius', '0')
+      break
+    case 'medium':
+      documentStyle.setProperty('--typebot-border-radius', '6px')
+      break
+    case 'large':
+      documentStyle.setProperty('--typebot-border-radius', '20px')
+      break
+  }
+}
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 43995f1b6d..f3306d04ed 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/schemas/features/typebot/theme/schemas.ts b/packages/schemas/features/typebot/theme/schemas.ts
index b10f60a876..eb4a03a33f 100644
--- a/packages/schemas/features/typebot/theme/schemas.ts
+++ b/packages/schemas/features/typebot/theme/schemas.ts
@@ -24,6 +24,7 @@ export const chatThemeSchema = z.object({
   guestBubbles: containerColorsSchema,
   buttons: containerColorsSchema,
   inputs: inputColorsSchema,
+  roundness: z.enum(['none', 'medium', 'large']).optional(),
 })
 
 const backgroundSchema = z.object({