feat: Add the SDK method to programatically toggle live chat bubble (#4223)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/sdk/IFrameHelper.js

@@ -175,9 +175,6 @@ export const IFrameHelper = {
     },
 
     setBubbleLabel(message) {
-      if (window.$chatwoot.hideMessageBubble) {
-        return;
-      }
       setBubbleText(window.$chatwoot.launcherTitle || message.label);
     },
 
@@ -263,33 +260,32 @@ export const IFrameHelper = {
     if (IFrameHelper.getBubbleHolder().length) {
       return;
     }
-    createBubbleHolder();
+    createBubbleHolder(window.$chatwoot.hideMessageBubble);
     onLocationChangeListener();
-    if (!window.$chatwoot.hideMessageBubble) {
-      let className = 'woot-widget-bubble';
-      let closeBtnClassName = `woot-elements--${window.$chatwoot.position} woot-widget-bubble woot--close woot--hide`;
 
-      if (isFlatWidgetStyle(window.$chatwoot.widgetStyle)) {
-        className += ' woot-widget-bubble--flat';
-        closeBtnClassName += ' woot-widget-bubble--flat';
-      }
+    let className = 'woot-widget-bubble';
+    let closeBtnClassName = `woot-elements--${window.$chatwoot.position} woot-widget-bubble woot--close woot--hide`;
 
-      const chatIcon = createBubbleIcon({
-        className,
-        src: bubbleImg,
-        target: chatBubble,
-      });
-
-      addClass(closeBubble, closeBtnClassName);
-
-      chatIcon.style.background = widgetColor;
-      closeBubble.style.background = widgetColor;
-
-      bubbleHolder.appendChild(chatIcon);
-      bubbleHolder.appendChild(closeBubble);
-      bubbleHolder.appendChild(createNotificationBubble());
-      onClickChatBubble();
+    if (isFlatWidgetStyle(window.$chatwoot.widgetStyle)) {
+      className += ' woot-widget-bubble--flat';
+      closeBtnClassName += ' woot-widget-bubble--flat';
     }
+
+    const chatIcon = createBubbleIcon({
+      className,
+      src: bubbleImg,
+      target: chatBubble,
+    });
+
+    addClass(closeBubble, closeBtnClassName);
+
+    chatIcon.style.background = widgetColor;
+    closeBubble.style.background = widgetColor;
+
+    bubbleHolder.appendChild(chatIcon);
+    bubbleHolder.appendChild(closeBubble);
+    bubbleHolder.appendChild(createNotificationBubble());
+    onClickChatBubble();
   },
   toggleCloseButton: () => {
     let isMobile = false;

app/javascript/sdk/bubbleHelpers.js

@@ -39,7 +39,10 @@ export const createBubbleIcon = ({ className, src, target }) => {
   return target;
 };
 
-export const createBubbleHolder = () => {
+export const createBubbleHolder = hideMessageBubble => {
+  if (hideMessageBubble) {
+    addClass(bubbleHolder, 'woot-hidden');
+  }
   addClass(bubbleHolder, 'woot--bubble-holder');
   body.appendChild(bubbleHolder);
 };

app/javascript/sdk/sdk.js

@@ -227,4 +227,8 @@ export const SDK_CSS = `
     width: 400px !important;
  }
 }
+
+.woot-hidden {
+  display: none !important;
+}
 `;