fix(lib): 💄 Proactive message close icon

packages/typebot-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typebot-js",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "main": "dist/index.js",
   "unpkg": "dist/index.umd.min.js",
   "license": "AGPL-3.0-or-later",

packages/typebot-js/src/embedTypes/chat/button.ts

@@ -5,7 +5,7 @@ export const createButton = (params?: ButtonParams): HTMLButtonElement => {
   button.id = 'typebot-bubble-button'
   button.style.backgroundColor = params?.color ?? '#0042DA'
   button.appendChild(createButtonIcon(params?.iconUrl, params?.iconStyle))
-  button.appendChild(createCloseIcon())
+  button.appendChild(createCloseIcon(params?.closeIconColor))
   return button
 }
 
@@ -29,11 +29,12 @@ const createDefaultIcon = (): SVGElement => {
   return icon
 }
 
-const createCloseIcon = (): SVGElement => {
+const createCloseIcon = (closeIconColor?: string): SVGElement => {
   const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
   icon.setAttribute('viewBox', '0 0 24 24')
   icon.innerHTML = closeSvgPath
   icon.classList.add('close-icon')
+  icon.style.stroke = closeIconColor ?? '#ffffff'
   return icon
 }
 

packages/typebot-js/src/embedTypes/chat/proactiveMessage.ts

@@ -39,7 +39,7 @@ const createTextElement = (text: string): HTMLParagraphElement => {
 const createCloseButton = (bubble: HTMLDivElement): HTMLButtonElement => {
   const button = document.createElement('button')
   button.classList.add('close-button')
-  button.innerHTML = `<svg viewBox="0 0 512 512">${closeSvgPath}</svg>`
+  button.innerHTML = `<svg viewBox="0 0 24 24" style="stroke:black; stroke-width:2px; margin:4px">${closeSvgPath}</svg>`
   button.addEventListener('click', (e) => onCloseButtonClick(e, bubble))
   return button
 }

packages/typebot-js/src/types.ts

@@ -30,6 +30,7 @@ export type ButtonParams = {
   color?: string
   iconUrl?: string
   iconStyle?: string
+  closeIconColor?: string
 }
 
 export type ProactiveMessageParams = {