🚸 Better embed button size prop now acception …

baptisteArno · Feb 19, 2024 · 54f51b6 · 54f51b6
1 parent 6735ecc
commit 54f51b6
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 27 deletions.
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.41",
+  "version": "0.2.42",
   "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
@@ -47,6 +47,13 @@ export const Bubble = (props: BubbleProps) => {
 
   const [isBotOpened, setIsBotOpened] = createSignal(false)
   const [isBotStarted, setIsBotStarted] = createSignal(false)
+  const [buttonSize, setButtonSize] = createSignal(
+    // eslint-disable-next-line solid/reactivity
+    parseButtonSize(bubbleProps.theme?.button?.size ?? 'medium')
+  )
+  createEffect(() => {
+    setButtonSize(parseButtonSize(bubbleProps.theme?.button?.size ?? 'medium'))
+  })
 
   onMount(() => {
     window.addEventListener('message', processIncomingEvent)
@@ -145,7 +152,7 @@ export const Bubble = (props: BubbleProps) => {
           {...previewMessage()}
           placement={bubbleProps.theme?.placement}
           previewMessageTheme={bubbleProps.theme?.previewMessage}
-          buttonSize={bubbleProps.theme?.button?.size}
+          buttonSize={buttonSize()}
           onClick={handlePreviewMessageClick}
           onCloseClick={hideMessage}
         />
@@ -155,6 +162,7 @@ export const Bubble = (props: BubbleProps) => {
         placement={bubbleProps.theme?.placement}
         toggleBot={toggleBot}
         isBotOpened={isBotOpened()}
+        buttonSize={buttonSize()}
       />
       <div
         part="bot"
@@ -173,13 +181,11 @@ export const Bubble = (props: BubbleProps) => {
           'box-shadow': 'rgb(0 0 0 / 16%) 0px 5px 40px',
           'background-color': bubbleProps.theme?.chatWindow?.backgroundColor,
           'z-index': 42424242,
+          bottom: `calc(${buttonSize()} + 32px)`,
         }}
         class={
           'fixed rounded-lg w-full' +
           (isBotOpened() ? ' opacity-1' : ' opacity-0 pointer-events-none') +
-          (props.theme?.button?.size === 'large'
-            ? ' bottom-24'
-            : ' bottom-20') +
           (props.theme?.placement === 'left' ? ' left-5' : ' right-5')
         }
       >
@@ -194,3 +200,8 @@ export const Bubble = (props: BubbleProps) => {
     </Show>
   )
 }
+
+const parseButtonSize = (
+  size: NonNullable<NonNullable<BubbleProps['theme']>['button']>['size']
+): `${number}px` =>
+  size === 'medium' ? '48px' : size === 'large' ? '64px' : size ? size : '48px'
diff --git a/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx b/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
@@ -8,6 +8,7 @@ type Props = Pick<BubbleTheme, 'placement'> &
   ButtonTheme & {
     isBotOpened: boolean
     toggleBot: () => void
+    buttonSize: `${number}px`
   }
 
 const defaultButtonColor = '#0042DA'
@@ -22,13 +23,14 @@ export const BubbleButton = (props: Props) => (
     part="button"
     onClick={() => props.toggleBot()}
     class={clsx(
-      'fixed bottom-5 shadow-md  rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in',
-      props.size === 'large' ? ' w-16 h-16' : ' w-12 h-12',
+      `fixed bottom-5 shadow-md  rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in`,
       props.placement === 'left' ? ' left-5' : ' right-5'
     )}
     style={{
       'background-color': props.backgroundColor ?? defaultButtonColor,
       'z-index': 42424242,
+      width: props.buttonSize,
+      height: props.buttonSize,
     }}
     aria-label="Open chatbot"
   >
@@ -45,9 +47,8 @@ export const BubbleButton = (props: Props) => (
               : defaultLightIconColor),
         }}
         class={clsx(
-          'stroke-2 fill-transparent absolute duration-200 transition',
-          props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100',
-          props.size === 'large' ? 'w-9' : 'w-7'
+          'stroke-2 fill-transparent absolute duration-200 transition w-[60%]',
+          props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
         )}
       >
         <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
@@ -60,11 +61,7 @@ export const BubbleButton = (props: Props) => (
         class={clsx(
           'duration-200 transition',
           props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100',
-          isSvgSrc(props.customIconSrc)
-            ? props.size === 'large'
-              ? 'w-9 h-9'
-              : 'w-7 h-7'
-            : 'w-[90%] h-[90%]',
+          isSvgSrc(props.customIconSrc) ? 'w-[60%]' : 'w-full h-full',
           isSvgSrc(props.customIconSrc) ? '' : 'object-cover rounded-full'
         )}
         alt="Bubble button icon"
@@ -98,11 +95,10 @@ export const BubbleButton = (props: Props) => (
               : defaultLightIconColor),
         }}
         class={clsx(
-          'absolute duration-200 transition',
+          'absolute duration-200 transition w-[60%]',
           props.isBotOpened
             ? 'scale-100 rotate-0 opacity-100'
-            : 'scale-0 -rotate-180 opacity-0',
-          props.size === 'large' ? ' w-9' : ' w-7'
+            : 'scale-0 -rotate-180 opacity-0'
         )}
       >
         <path
@@ -123,11 +119,7 @@ export const BubbleButton = (props: Props) => (
           props.isBotOpened
             ? 'scale-100 rotate-0 opacity-100'
             : 'scale-0 -rotate-180 opacity-0',
-          isSvgSrc(props.customCloseIconSrc)
-            ? props.size === 'large'
-              ? 'w-9 h-9'
-              : 'w-7 h-7'
-            : 'w-[90%] h-[90%]',
+          isSvgSrc(props.customCloseIconSrc) ? 'w-[60%]' : 'w-full h-full',
           isSvgSrc(props.customCloseIconSrc) ? '' : 'object-cover rounded-full'
         )}
         alt="Bubble button close icon"

diff --git a/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx b/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx
@@ -27,14 +27,14 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
       onClick={() => props.onClick()}
       class={
         'fixed max-w-[256px] rounded-md duration-200 flex items-center gap-4 shadow-md animate-fade-in cursor-pointer hover:shadow-lg p-4' +
-        (props.buttonSize === 'large' ? ' bottom-24' : ' bottom-20') +
         (props.placement === 'left' ? ' left-5' : ' right-5')
       }
       style={{
         'background-color':
           props.previewMessageTheme?.backgroundColor ?? defaultBackgroundColor,
         color: props.previewMessageTheme?.textColor ?? defaultTextColor,
         'z-index': 42424242,
+        bottom: `calc(${props.buttonSize} + 32px)`,
       }}
       onMouseEnter={() => setIsPreviewMessageHovered(true)}
       onMouseLeave={() => setIsPreviewMessageHovered(false)}

diff --git a/packages/embeds/js/src/features/bubble/types.ts b/packages/embeds/js/src/features/bubble/types.ts
@@ -18,7 +18,7 @@ export type ChatWindowTheme = {
 }
 
 export type ButtonTheme = {
-  size?: 'medium' | 'large'
+  size?: 'medium' | 'large' | `${number}px`
   backgroundColor?: string
   iconColor?: string
   customIconSrc?: string

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.41",
+  "version": "0.2.42",
   "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.41",
+  "version": "0.2.42",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",