chatwoot/app/javascript/entrypoints/sdk.js

import Cookies from 'js-cookie';
import { IFrameHelper } from '../sdk/IFrameHelper';
import {
  getBubbleView,
  getDarkMode,
  getWidgetStyle,
} from '../sdk/settingsHelper';
import {
  computeHashForUserData,
  getUserCookieName,
  hasUserKeys,
} from '../sdk/cookieHelpers';
import {
  addClasses,
  removeClasses,
  restoreWidgetInDOM,
} from '../sdk/DOMHelpers';
import { setCookieWithDomain } from '../sdk/cookieHelpers';
import { SDK_SET_BUBBLE_VISIBILITY } from 'shared/constants/sharedFrameEvents';

const runSDK = ({ baseUrl, websiteToken }) => {
  console.log('runSDK called with:', { baseUrl, websiteToken });

  if (window.$chatwoot) {
    console.log('Chatwoot already initialized.');
    return;
  }

  if (window.Turbo) {
    console.log('Turbo detected.');
    document.addEventListener('turbo:before-render', event => {
      console.log('Turbo before render triggered.');
      restoreWidgetInDOM(event.detail.newBody);
    });
  }

  if (window.Turbolinks) {
    console.log('Turbolinks detected.');
    document.addEventListener('turbolinks:before-render', event => {
      console.log('Turbolinks before render triggered.');
      restoreWidgetInDOM(event.data.newBody);
    });
  }

  console.log('Checking for Astro app...');
  document.addEventListener('astro:before-swap', event => {
    console.log('Astro before swap triggered.');
    restoreWidgetInDOM(event.newDocument.body);
  });

  const chatwootSettings = window.chatwootSettings || {};
  console.log('Chatwoot settings:', chatwootSettings);

  let locale = chatwootSettings.locale;
  let baseDomain = chatwootSettings.baseDomain;
  console.log('Initial locale and baseDomain:', { locale, baseDomain });

  if (chatwootSettings.useBrowserLanguage) {
    locale = window.navigator.language.replace('-', '_');
    console.log('Using browser language:', locale);
  }

  window.$chatwoot = {
    baseUrl,
    baseDomain,
    hasLoaded: false,
    hideMessageBubble: chatwootSettings.hideMessageBubble || false,
    isOpen: false,
    position: chatwootSettings.position === 'left' ? 'left' : 'right',
    websiteToken,
    locale,
    useBrowserLanguage: chatwootSettings.useBrowserLanguage || false,
    type: getBubbleView(chatwootSettings.type),
    launcherTitle: chatwootSettings.launcherTitle || '',
    showPopoutButton: chatwootSettings.showPopoutButton || false,
    showUnreadMessagesDialog: chatwootSettings.showUnreadMessagesDialog ?? true,
    widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard',
    resetTriggered: false,
    darkMode: getDarkMode(chatwootSettings.darkMode),

    toggle(state) {
      console.log('Toggling bubble state:', state);
      IFrameHelper.events.toggleBubble(state);
    },

    toggleBubbleVisibility(visibility) {
      console.log('Toggling bubble visibility:', visibility);
      let widgetElm = document.querySelector('.woot--bubble-holder');
      let widgetHolder = document.querySelector('.woot-widget-holder');
      if (visibility === 'hide') {
        addClasses(widgetHolder, 'woot-widget--without-bubble');
        addClasses(widgetElm, 'woot-hidden');
        window.$chatwoot.hideMessageBubble = true;
      } else if (visibility === 'show') {
        removeClasses(widgetElm, 'woot-hidden');
        removeClasses(widgetHolder, 'woot-widget--without-bubble');
        window.$chatwoot.hideMessageBubble = false;
      }
      IFrameHelper.sendMessage(SDK_SET_BUBBLE_VISIBILITY, {
        hideMessageBubble: window.$chatwoot.hideMessageBubble,
      });
    },

    popoutChatWindow() {
      console.log('Popout chat window triggered.');
      IFrameHelper.events.popoutChatWindow({
        baseUrl: window.$chatwoot.baseUrl,
        websiteToken: window.$chatwoot.websiteToken,
        locale,
      });
    },

    setUser(identifier, user) {
      console.log('Setting user:', { identifier, user });
      if (typeof identifier !== 'string' && typeof identifier !== 'number') {
        console.error('Invalid identifier type:', identifier);
        throw new Error('Identifier should be a string or a number');
      }

      if (!hasUserKeys(user)) {
        console.error('User object is missing required keys:', user);
        throw new Error(
          'User object should have one of the keys [avatar_url, email, name]'
        );
      }

      const userCookieName = getUserCookieName();
      const existingCookieValue = Cookies.get(userCookieName);
      const hashToBeStored = computeHashForUserData({ identifier, user });
      console.log('User cookie name and hash:', {
        userCookieName,
        hashToBeStored,
      });

      if (hashToBeStored === existingCookieValue) {
        console.log('User hash matches existing cookie. No update needed.');
        return;
      }

      window.$chatwoot.identifier = identifier;
      window.$chatwoot.user = user;
      IFrameHelper.sendMessage('set-user', { identifier, user });

      setCookieWithDomain(userCookieName, hashToBeStored, {
        baseDomain,
      });
    },

    setCustomAttributes(customAttributes = {}) {
      console.log('Setting custom attributes:', customAttributes);
      if (!customAttributes || !Object.keys(customAttributes).length) {
        console.error('Invalid custom attributes:', customAttributes);
        throw new Error('Custom attributes should have at least one key');
      } else {
        IFrameHelper.sendMessage('set-custom-attributes', { customAttributes });
      }
    },

    deleteCustomAttribute(customAttribute = '') {
      console.log('Deleting custom attribute:', customAttribute);
      if (!customAttribute) {
        console.error('Custom attribute is missing.');
        throw new Error('Custom attribute is required');
      } else {
        IFrameHelper.sendMessage('delete-custom-attribute', {
          customAttribute,
        });
      }
    },

    setConversationCustomAttributes(customAttributes = {}) {
      console.log('Setting conversation custom attributes:', customAttributes);
      if (!customAttributes || !Object.keys(customAttributes).length) {
        console.error(
          'Invalid conversation custom attributes:',
          customAttributes
        );
        throw new Error('Custom attributes should have at least one key');
      } else {
        IFrameHelper.sendMessage('set-conversation-custom-attributes', {
          customAttributes,
        });
      }
    },

    deleteConversationCustomAttribute(customAttribute = '') {
      console.log('Deleting conversation custom attribute:', customAttribute);
      if (!customAttribute) {
        console.error('Conversation custom attribute is missing.');
        throw new Error('Custom attribute is required');
      } else {
        IFrameHelper.sendMessage('delete-conversation-custom-attribute', {
          customAttribute,
        });
      }
    },

    setLabel(label = '') {
      console.log('Setting label:', label);
      IFrameHelper.sendMessage('set-label', { label });
    },

    removeLabel(label = '') {
      console.log('Removing label:', label);
      IFrameHelper.sendMessage('remove-label', { label });
    },

    setLocale(localeToBeUsed = 'en') {
      console.log('Setting locale:', localeToBeUsed);
      IFrameHelper.sendMessage('set-locale', { locale: localeToBeUsed });
    },

    setColorScheme(darkMode = 'light') {
      console.log('Setting color scheme to:', darkMode);
      IFrameHelper.sendMessage('set-color-scheme', {
        darkMode: getDarkMode(darkMode),
      });
    },

    reset() {
      console.log('Resetting Chatwoot.');
      if (window.$chatwoot.isOpen) {
        IFrameHelper.events.toggleBubble();
      }

      Cookies.remove('cw_conversation');
      Cookies.remove(getUserCookieName());

      const iframe = IFrameHelper.getAppFrame();
      console.log('Reloading iframe with new URL.');
      iframe.src = IFrameHelper.getUrl({
        baseUrl: window.$chatwoot.baseUrl,
        websiteToken: window.$chatwoot.websiteToken,
      });

      window.$chatwoot.resetTriggered = true;
    },
  };

  console.log('Creating iframe for Chatwoot...');
  IFrameHelper.createFrame({
    baseUrl,
    websiteToken,
  });
};

window.chatwootSDK = {
  run: runSDK,
};