♿ (js) Add "large" bubble button size and part attr

Closes #411

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

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

@@ -122,6 +122,7 @@ export const Bubble = (props: BubbleProps) => {
         <PreviewMessage
           {...previewMessage()}
           previewMessageTheme={bubbleProps.theme?.previewMessage}
+          buttonSize={bubbleProps.theme?.button?.size}
           onClick={handlePreviewMessageClick}
           onCloseClick={hideMessage}
         />
@@ -132,6 +133,7 @@ export const Bubble = (props: BubbleProps) => {
         isBotOpened={isBotOpened()}
       />
       <div
+        part="bot"
         style={{
           height: 'calc(100% - 80px)',
           transition:
@@ -143,8 +145,9 @@ export const Bubble = (props: BubbleProps) => {
           'z-index': 42424242,
         }}
         class={
-          'fixed bottom-20 sm:right-4 rounded-lg w-full sm:w-[400px] max-h-[704px] ' +
+          'fixed sm:right-5 rounded-lg w-full sm:w-[400px] max-h-[704px]' +
-          (isBotOpened() ? 'opacity-1' : 'opacity-0 pointer-events-none')
+          (isBotOpened() ? ' opacity-1' : ' opacity-0 pointer-events-none') +
+          (props.theme?.button?.size === 'large' ? ' bottom-24' : ' bottom-20')
         }
       >
         <Show when={isBotStarted()}>

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

@@ -13,9 +13,11 @@ const defaultIconColor = 'white'
 export const BubbleButton = (props: Props) => {
   return (
     <button
+      part="button"
       onClick={() => props.toggleBot()}
       class={
-        'fixed bottom-4 right-4 shadow-md w-12 h-12 rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in'
+        'fixed bottom-5 right-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')
       }
       style={{
         'background-color': props.backgroundColor ?? defaultButtonColor,
@@ -29,8 +31,11 @@ export const BubbleButton = (props: Props) => {
             stroke: props.iconColor ?? defaultIconColor,
           }}
           class={
-            `w-7 stroke-2 fill-transparent absolute duration-200 transition ` +
+            `stroke-2 fill-transparent absolute duration-200 transition ` +
-            (props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100')
+            (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" />
@@ -39,7 +44,10 @@ export const BubbleButton = (props: Props) => {
       <Show when={props.customIconSrc}>
         <img
           src={props.customIconSrc}
-          class="w-7 h-7 rounded-full object-cover"
+          class={
+            'rounded-full object-cover' +
+            (props.size === 'large' ? ' w-9 h-9' : ' w-7 h-7')
+          }
           alt="Bubble button icon"
         />
       </Show>
@@ -48,10 +56,11 @@ export const BubbleButton = (props: Props) => {
         viewBox="0 0 24 24"
         style={{ fill: props.iconColor ?? 'white' }}
         class={
-          `w-7 absolute duration-200 transition ` +
+          `absolute duration-200 transition ` +
           (props.isBotOpened
             ? 'scale-100 rotate-0 opacity-100'
-            : 'scale-0 -rotate-180 opacity-0')
+            : 'scale-0 -rotate-180 opacity-0') +
+          (props.size === 'large' ? ' w-9' : ' w-7')
         }
       >
         <path

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

@@ -1,10 +1,15 @@
 import { createSignal, Show } from 'solid-js'
-import { PreviewMessageParams, PreviewMessageTheme } from '../types'
+import {
+  ButtonTheme,
+  PreviewMessageParams,
+  PreviewMessageTheme,
+} from '../types'
 
 export type PreviewMessageProps = Pick<
   PreviewMessageParams,
   'avatarUrl' | 'message'
 > & {
+  buttonSize: ButtonTheme['size']
   previewMessageTheme?: PreviewMessageTheme
   onClick: () => void
   onCloseClick: () => void
@@ -19,8 +24,12 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
 
   return (
     <div
+      part="preview-message"
       onClick={() => props.onClick()}
-      class="fixed bottom-20 right-4 max-w-[256px] rounded-md duration-200 flex items-center gap-4 shadow-md animate-fade-in cursor-pointer hover:shadow-lg p-4"
+      class={
+        'fixed right-5 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')
+      }
       style={{
         'background-color':
           props.previewMessageTheme?.backgroundColor ?? defaultBackgroundColor,

packages/embeds/js/src/features/bubble/types.ts

@@ -14,6 +14,7 @@ export type ChatWindowTheme = {
 }
 
 export type ButtonTheme = {
+  size?: 'medium' | 'large'
   backgroundColor?: string
   iconColor?: string
   customIconSrc?: string

packages/embeds/react/package.json

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

packages/embeds/react/src/Bubble.tsx

@@ -9,7 +9,7 @@ declare global {
       'typebot-bubble': React.DetailedHTMLProps<
         React.HTMLAttributes<HTMLElement>,
         HTMLElement
-      > & { class?: string }
+      >
     }
   }
 }

packages/embeds/react/src/stories/assets/index.css

@@ -0,0 +1 @@
+

packages/embeds/react/src/stories/bubble.stories.tsx

@@ -9,6 +9,7 @@ import {
 } from '@typebot.io/js'
 import { useState } from 'react'
 import { leadGenerationTypebot } from './assets/leadGenerationTypebot'
+import './assets/index.css'
 
 export const Default = () => {
   const [name, setName] = useState('John')
@@ -47,6 +48,7 @@ export const Default = () => {
           button: {
             backgroundColor: '#FF7537',
             iconColor: 'white',
+            size: 'large',
           },
         }}
         isPreview