From ac278b9916c7af9daf3bef0daa4d4a97d04b7f50 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Wed, 18 May 2022 11:52:56 -0700
Subject: [PATCH] =?UTF-8?q?fix(lib):=20=F0=9F=92=84=20Proactive=20message?=
 =?UTF-8?q?=20close=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/typebot-js/package.json                            | 2 +-
 packages/typebot-js/src/embedTypes/chat/button.ts           | 5 +++--
 packages/typebot-js/src/embedTypes/chat/proactiveMessage.ts | 2 +-
 packages/typebot-js/src/types.ts                            | 1 +
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/typebot-js/package.json b/packages/typebot-js/package.json
index 17db0d12c..eeef92cee 100644
--- a/packages/typebot-js/package.json
+++ b/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",
diff --git a/packages/typebot-js/src/embedTypes/chat/button.ts b/packages/typebot-js/src/embedTypes/chat/button.ts
index 5bbd24cdb..9f4a9abc0 100644
--- a/packages/typebot-js/src/embedTypes/chat/button.ts
+++ b/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
 }
 
diff --git a/packages/typebot-js/src/embedTypes/chat/proactiveMessage.ts b/packages/typebot-js/src/embedTypes/chat/proactiveMessage.ts
index cb5c21893..7e847593a 100644
--- a/packages/typebot-js/src/embedTypes/chat/proactiveMessage.ts
+++ b/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
 }
diff --git a/packages/typebot-js/src/types.ts b/packages/typebot-js/src/types.ts
index 8394b3335..8526c9c43 100644
--- a/packages/typebot-js/src/types.ts
+++ b/packages/typebot-js/src/types.ts
@@ -30,6 +30,7 @@ export type ButtonParams = {
   color?: string
   iconUrl?: string
   iconStyle?: string
+  closeIconColor?: string
 }
 
 export type ProactiveMessageParams = {