@meetelise/chat 1.47.2 → 1.48.1

package/src/main/MEChat.test.ts

@@ -49,6 +49,25 @@ afterEach(() => {
   restore();
 });
 
+it("does not throw when removing a widget that already detached itself", async function () {
+  const element = document.createElement("me-chat");
+  document.body.appendChild(element);
+
+  (MEChat as unknown as { meChat: HTMLElement | null }).meChat = element;
+
+  await (
+    MEChat as unknown as { removeWidget: () => Promise<void> }
+  ).removeWidget();
+
+  expect((MEChat as unknown as { meChat: HTMLElement | null }).meChat).to.equal(
+    null
+  );
+
+  await (
+    MEChat as unknown as { removeWidget: () => Promise<void> }
+  ).removeWidget();
+});
+
 it.skip("shows the launcher", async function () {
   // Given an API that returns this building theme
   stub(window, "fetch").resolves(stubResponse);

package/src/main/MEChat.ts

@@ -34,6 +34,47 @@ interface PositioningOptions {
 export interface HealthcareOptions extends PositioningOptions {
   id: string;
 }
+
+export type StudioWebchatMode = "host_managed_context";
+
+export type StudioWebchatSessionScopeType =
+  | "building"
+  | "building_group"
+  | "site";
+
+export interface StudioWebchatSessionScope {
+  type: StudioWebchatSessionScopeType;
+  key: string;
+  buildingSlug?: string;
+  siteId?: string;
+  buildingGroupId?: string | number;
+  defaultBuildingSlug?: string;
+  allowedBuildingSlugs?: string[];
+}
+
+export interface StudioWebchatContext {
+  source?: "elise_studio";
+  siteId?: string;
+  propertyId?: string | number | null;
+  organization?: string | null;
+  building?: string | null;
+  buildingGroupId?: string | number | null;
+  sessionScope?: StudioWebchatSessionScope;
+  path?: string;
+  pageId?: string;
+}
+
+export interface StudioWebchatClearContext {
+  source?: "elise_studio";
+  reason?: "no_property_for_route" | "webchat_disabled" | "ambiguous_route" | string;
+  preserveCache?: boolean;
+}
+
+export interface StudioWebchatOptions {
+  siteId: string;
+  mode?: StudioWebchatMode;
+}
+
 export default class MEChat {
   static meChat: MEChatLitElement | null = null;
   static healthChat: HealthChatLitElement | null = null;
@@ -45,6 +86,11 @@ export default class MEChat {
   static brandColor = "";
   static backgroundColor = "";
   static healthcareId = "";
+  static activeStudioOrgSlug = "";
+  static activeStudioBuildingSlug = "";
+  static activeStudioSessionScopeKey = "";
+  static activeStudioOptions: Options | null = null;
+  static studioUpdateToken = 0;
   static overridePlacement: {
     right?: number;
     bottom?: number;
@@ -91,7 +137,7 @@ export default class MEChat {
       this.orgSlug =
         opts.organization === "Pacific Urban Residential"
           ? "cbc11aba-21c4-4571-bc43-ff9d86a029e3"
-          : opts.organization;
+          : opts.organization || "";
       this.hasBuildingSlug = !!opts.building;
       this.overridePlacement = {
         right: opts?.position?.right,
@@ -102,6 +148,11 @@ export default class MEChat {
     }
     installFont();
 
+    if (opts.studio && !opts.building) {
+      this.handleStudioContext(opts);
+      return;
+    }
+
     let meChatElement:
       | MEChatLitElement
       | UtilitiesChatElement
@@ -131,7 +182,7 @@ export default class MEChat {
       "orgSlug",
       opts.organization === "Pacific Urban Residential"
         ? "cbc11aba-21c4-4571-bc43-ff9d86a029e3"
-        : opts.organization
+        : opts.organization || ""
     );
     meChatElement.setAttribute(
       "widgetType",
@@ -216,14 +267,102 @@ export default class MEChat {
   }
 
   static async remove(): Promise<void> {
+    this.studioUpdateToken += 1;
+    await this.removeWidget();
+    this.activeStudioOrgSlug = "";
+    this.activeStudioBuildingSlug = "";
+    this.activeStudioSessionScopeKey = "";
+    this.activeStudioOptions = null;
+  }
+
+  static async removeWidget(): Promise<void> {
     if (!this.meChat) {
       return;
     }
-    await this.meChat.remove();
-    document.body.removeChild(this.meChat);
+    const meChat = this.meChat;
+    await meChat.remove();
+    meChat.parentNode?.removeChild(meChat);
     MEChat.meChat = null;
   }
 
+  static handleStudioContext(opts: Options): void {
+    if (!opts.studio) return;
+
+    this.activeStudioOptions = opts;
+  }
+
+  static updateStudioContext(context: StudioWebchatContext): void {
+    const opts = this.activeStudioOptions;
+    if (!opts?.studio) return;
+    const updateToken = ++this.studioUpdateToken;
+
+    if (context.siteId && context.siteId !== opts.studio.siteId) {
+      sendLoggingEvent({
+        logType: LogType.warn,
+        logTitle: "[STUDIO_WEBCHAT_CONTEXT_SITE_MISMATCH]",
+        logData: {
+          activeSiteId: opts.studio.siteId,
+          contextSiteId: context.siteId,
+          url: window.location.href,
+        },
+      });
+      return;
+    }
+
+    const orgSlug = coerceStudioContextString(context.organization);
+    const buildingSlug = coerceStudioContextString(context.building);
+
+    if (!orgSlug || !buildingSlug) {
+      this.clearStudioContext({
+        source: "elise_studio",
+        reason: "missing_context",
+        preserveCache: true,
+      });
+      return;
+    }
+
+    const sessionScopeKey = coerceStudioSessionScopeKey(
+      context.sessionScope,
+      buildingSlug
+    );
+    const normalizedOrgSlug = normalizeOrgSlug(orgSlug);
+
+    if (
+      this.activeStudioOrgSlug === normalizedOrgSlug &&
+      this.activeStudioBuildingSlug === buildingSlug &&
+      this.activeStudioSessionScopeKey === sessionScopeKey
+    ) {
+      return;
+    }
+
+    void this.removeWidget().then(() => {
+      if (updateToken !== this.studioUpdateToken) return;
+
+      this.activeStudioOrgSlug = normalizedOrgSlug;
+      this.activeStudioBuildingSlug = buildingSlug;
+      this.activeStudioSessionScopeKey = sessionScopeKey;
+      this.orgSlug = normalizedOrgSlug;
+
+      this.start(
+        {
+          ...opts,
+          organization: orgSlug,
+          building: buildingSlug,
+        },
+        false
+      );
+    });
+  }
+
+  static clearStudioContext(_context?: StudioWebchatClearContext): void {
+    void _context;
+    this.studioUpdateToken += 1;
+    this.activeStudioOrgSlug = "";
+    this.activeStudioBuildingSlug = "";
+    this.activeStudioSessionScopeKey = "";
+    void this.removeWidget();
+  }
+
   static async handleBuildingslug(
     meChat: MEChatLitElement,
     orgSlug?: string,
@@ -369,9 +508,35 @@ export default class MEChat {
   }
 }
 
+function coerceStudioContextString(value: string | null | undefined): string {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  return value.trim();
+}
+
+function normalizeOrgSlug(orgSlug: string): string {
+  return orgSlug === "Pacific Urban Residential"
+    ? "cbc11aba-21c4-4571-bc43-ff9d86a029e3"
+    : orgSlug;
+}
+
+function coerceStudioSessionScopeKey(
+  sessionScope: StudioWebchatSessionScope | undefined,
+  buildingSlug: string
+): string {
+  if (!sessionScope?.key) {
+    return `building:${buildingSlug}`;
+  }
+
+  return sessionScope.key;
+}
+
 export interface Options {
-  building: string;
-  organization: string;
+  building?: string;
+  organization?: string;
+  studio?: StudioWebchatOptions;
   avatarSrc?: string;
   mini?: boolean;
   launcherStyles?: StyleInfo;