From 74dd169b50013ed5603e605ee01aac4dcdf5bf93 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 14 Nov 2023 08:25:32 +0100
Subject: [PATCH] :zap: Add maxWidth and maxHeight bubble them props

Closes #458
---
 apps/docs/docs/embed/html-javascript.md                      | 2 +-
 packages/embeds/js/package.json                              | 2 +-
 packages/embeds/js/src/features/bubble/components/Bubble.tsx | 4 +++-
 packages/embeds/js/src/features/bubble/types.ts              | 2 ++
 packages/embeds/nextjs/package.json                          | 2 +-
 packages/embeds/react/package.json                           | 2 +-
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/docs/docs/embed/html-javascript.md b/apps/docs/docs/embed/html-javascript.md
index 59adac618..2b16bace3 100644
--- a/apps/docs/docs/embed/html-javascript.md
+++ b/apps/docs/docs/embed/html-javascript.md
@@ -116,7 +116,7 @@ Here is an example:
     theme: {
       button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
       previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
-      chatWindow: { backgroundColor: '#ffffff' },
+      chatWindow: { backgroundColor: '#ffffff', maxWidth: '100%' },
     },
   })
 </script>
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index b21fc36a1..170b8565b 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/embeds/js/src/features/bubble/components/Bubble.tsx b/packages/embeds/js/src/features/bubble/components/Bubble.tsx
index 79076a029..b1f3a6db5 100644
--- a/packages/embeds/js/src/features/bubble/components/Bubble.tsx
+++ b/packages/embeds/js/src/features/bubble/components/Bubble.tsx
@@ -160,6 +160,8 @@ export const Bubble = (props: BubbleProps) => {
         part="bot"
         style={{
           height: 'calc(100% - 80px)',
+          'max-height': props.theme?.chatWindow?.maxHeight ?? '704px',
+          'max-width': props.theme?.chatWindow?.maxWidth ?? '400px',
           transition:
             'transform 200ms cubic-bezier(0, 1.2, 1, 1), opacity 150ms ease-out',
           'transform-origin':
@@ -170,7 +172,7 @@ export const Bubble = (props: BubbleProps) => {
           'z-index': 42424242,
         }}
         class={
-          'fixed rounded-lg w-full sm:w-[400px] max-h-[704px]' +
+          'fixed rounded-lg w-full' +
           (isBotOpened() ? ' opacity-1' : ' opacity-0 pointer-events-none') +
           (props.theme?.button?.size === 'large'
             ? ' bottom-24'
diff --git a/packages/embeds/js/src/features/bubble/types.ts b/packages/embeds/js/src/features/bubble/types.ts
index 1d8c5866a..ebd37c206 100644
--- a/packages/embeds/js/src/features/bubble/types.ts
+++ b/packages/embeds/js/src/features/bubble/types.ts
@@ -13,6 +13,8 @@ export type BubbleTheme = {
 
 export type ChatWindowTheme = {
   backgroundColor?: string
+  maxWidth?: string
+  maxHeight?: string
 }
 
 export type ButtonTheme = {
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index d5eba3376..a061ac05a 100644
--- a/packages/embeds/nextjs/package.json
+++ b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 26fd6ba1a..4447cf8b9 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",