🐛 (embed) Fix custom close icon placement in bubble button

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
@@ -29,6 +29,7 @@
     "@typebot.io/tsconfig": "workspace:*",
     "autoprefixer": "10.4.14",
     "babel-preset-solid": "1.7.7",
+    "clsx": "2.0.0",
     "eslint": "8.44.0",
     "eslint-config-custom": "workspace:*",
     "eslint-plugin-solid": "0.12.1",

packages/embeds/js/src/features/bubble/components/BubbleButton.tsx

@@ -2,6 +2,7 @@ import { Show } from 'solid-js'
 import { isNotDefined, isSvgSrc } from '@typebot.io/lib'
 import { BubbleTheme, ButtonTheme } from '../types'
 import { isLight } from '@typebot.io/lib/hexToRgb'
+import { clsx } from 'clsx'
 
 type Props = Pick<BubbleTheme, 'placement'> &
   ButtonTheme & {
@@ -20,11 +21,11 @@ export const BubbleButton = (props: Props) => (
   <button
     part="button"
     onClick={() => props.toggleBot()}
-    class={
-      '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') +
-      (props.placement === 'left' ? ' left-5' : ' right-5')
-    }
+    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',
+      props.placement === 'left' ? ' left-5' : ' right-5'
+    )}
     style={{
       'background-color': props.backgroundColor ?? defaultButtonColor,
       'z-index': 42424242,
@@ -40,11 +41,11 @@ export const BubbleButton = (props: Props) => (
               ? defaultDarkIconColor
               : defaultLightIconColor),
         }}
-        class={
-          `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')
-        }
+        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'
+        )}
       >
         <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" />
       </svg>
@@ -53,27 +54,25 @@ export const BubbleButton = (props: Props) => (
       <img
         part="button-icon"
         src={props.customIconSrc}
-        class={
-          'duration-200 transition' +
-          (props.isBotOpened
-            ? ' scale-0 opacity-0'
-            : ' scale-100 opacity-100') +
-          (isSvgSrc(props.customIconSrc)
+        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) ? '' : ' object-cover rounded-full')
-        }
+              ? 'w-9 h-9'
+              : 'w-7 h-7'
+            : 'w-[90%] h-[90%]',
+          isSvgSrc(props.customIconSrc) ? '' : 'object-cover rounded-full'
+        )}
         alt="Bubble button icon"
       />
     </Show>
     <Show when={props.customIconSrc && !isImageSrc(props.customIconSrc)}>
       <span
-        class={
-          'text-4xl duration-200 transition' +
-          (props.isBotOpened ? ' scale-0 opacity-0' : ' scale-100 opacity-100')
-        }
+        class={clsx(
+          'text-4xl duration-200 transition',
+          props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
+        )}
         style={{
           'font-family':
             "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
@@ -92,13 +91,13 @@ export const BubbleButton = (props: Props) => (
               ? defaultDarkIconColor
               : defaultLightIconColor),
         }}
-        class={
-          `absolute duration-200 transition ` +
-          (props.isBotOpened
+        class={clsx(
+          'absolute duration-200 transition',
+          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',
+          props.size === 'large' ? ' w-9' : ' w-7'
+        )}
       >
         <path
           fill-rule="evenodd"
@@ -113,33 +112,31 @@ export const BubbleButton = (props: Props) => (
       <img
         part="button-icon"
         src={props.customCloseIconSrc}
-        class={
-          'duration-200 transition' +
-          (props.isBotOpened
+        class={clsx(
+          'absolute duration-200 transition',
+          props.isBotOpened
             ? 'scale-100 rotate-0 opacity-100'
-            : 'scale-0 -rotate-180 opacity-0') +
-          (isSvgSrc(props.customCloseIconSrc)
+            : '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)
-            ? ''
-            : ' object-cover rounded-full')
-        }
-        alt="Bubble button clost icon"
+              ? 'w-9 h-9'
+              : 'w-7 h-7'
+            : 'w-[90%] h-[90%]',
+          isSvgSrc(props.customCloseIconSrc) ? '' : 'object-cover rounded-full'
+        )}
+        alt="Bubble button close icon"
       />
     </Show>
     <Show
       when={props.customCloseIconSrc && !isImageSrc(props.customCloseIconSrc)}
     >
       <span
-        class={
-          'text-4xl duration-200 transition' +
-          (props.isBotOpened
+        class={clsx(
+          'absolute text-4xl duration-200 transition',
+          props.isBotOpened
             ? 'scale-100 rotate-0 opacity-100'
-            : 'scale-0 -rotate-180 opacity-0')
-        }
+            : 'scale-0 -rotate-180 opacity-0'
+        )}
         style={{
           'font-family':
             "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",