{
return (
{
- 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,
+ 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({