⚡ Add maxWidth and maxHeight bubble them props

Closes #458
baptisteArno · Nov 14, 2023 · 74dd169 · 74dd169 · vercel · Nov 14, 2023
1 parent c59df18
commit 74dd169
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",