@meetelise/chat 1.59.0 → 1.59.2

package/src/chatKeyboard.test.ts

@@ -0,0 +1,430 @@
+import { expect } from "@esm-bundle/chai";
+import { sendKeys } from "@web/test-runner-commands";
+import "../public/dist/index";
+import { CURRENT_CONSENT_ID } from "./disclaimers";
+import type { BuildingWebchatView } from "./fetchBuildingWebchatView";
+import type { MEChat } from "./WebComponent/me-chat";
+import type { MESelect } from "./WebComponent/me-select";
+import type { PubnubChat } from "./WebComponent/pubnub-chat";
+import type { TourScheduler } from "./WebComponent/Scheduler/tour-scheduler";
+
+declare const afterEach: (callback: () => void) => void;
+declare const it: (name: string, callback: () => void | Promise<void>) => void;
+
+type MeChatTest = MEChat & {
+  updateComplete: Promise<boolean>;
+  displayPubnubChat: boolean;
+  buildingWebchatView: BuildingWebchatView | null;
+  buildingSlug: string;
+  orgSlug: string;
+  focusChatOnMount: boolean;
+  requiresConsent: boolean;
+  launcherButton: HTMLElement | null;
+  hideLauncher: boolean;
+  isLoading: boolean;
+  _isMobile: boolean;
+};
+
+const building = {
+  id: 1,
+  orgId: 1,
+  name: "Aventine",
+  welcomeMessage: "Welcome",
+  state: "NY",
+  country: "US",
+  layoutOptions: [],
+  tourTypeOptions: [],
+} as unknown as BuildingWebchatView;
+
+const nextTask = (): Promise<void> =>
+  new Promise((resolve) => {
+    setTimeout(resolve, 0);
+  });
+
+const deepActive = (): Element | null => {
+  let active: Element | null = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active;
+};
+
+const tabStops = (container: HTMLElement): HTMLElement[] => {
+  const stops: HTMLElement[] = [];
+  const visit = (node: ParentNode): void => {
+    if (node instanceof Element && node.shadowRoot) visit(node.shadowRoot);
+    node.querySelectorAll<HTMLElement>("*").forEach((el) => {
+      const focusable =
+        el.tagName === "BUTTON" ||
+        el.tagName === "TEXTAREA" ||
+        el.tagName === "INPUT" ||
+        (el.tagName === "A" && el.hasAttribute("href"));
+      if (
+        focusable &&
+        el.getAttribute("tabindex") !== "-1" &&
+        el.getClientRects().length > 0 &&
+        !("disabled" in el && (el as HTMLButtonElement).disabled)
+      ) {
+        stops.push(el);
+      }
+      if (el.shadowRoot) visit(el.shadowRoot);
+    });
+  };
+  visit(container);
+  return stops;
+};
+
+const dispatchTab = (target: HTMLElement, shiftKey = false): KeyboardEvent => {
+  const event = new KeyboardEvent("keydown", {
+    key: "Tab",
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    shiftKey,
+  });
+  target.dispatchEvent(event);
+  return event;
+};
+
+const mountChat = async (mobile: boolean): Promise<PubnubChat> => {
+  const chat = document.createElement("pubnub-chat") as PubnubChat;
+  chat.buildingSlug = "test-building";
+  chat.orgSlug = "test-org";
+  chat.building = building;
+  chat._isMobile = mobile;
+  document.body.appendChild(chat);
+  await chat.updateComplete;
+  return chat;
+};
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+it("keeps the desktop dialog non-modal and does not wrap Tab", async () => {
+  const chat = await mountChat(false);
+  const container = chat.shadowRoot?.getElementById("pubnub-chat-container");
+  expect(container?.getAttribute("role")).to.equal("dialog");
+  expect(container?.hasAttribute("aria-modal")).to.equal(false);
+
+  const stops = tabStops(container as HTMLElement);
+  const last = stops[stops.length - 1];
+  last.focus();
+  const event = dispatchTab(last);
+  expect(event.defaultPrevented).to.equal(false);
+  expect(deepActive()).to.equal(last);
+});
+
+it("wraps Tab inside the tour overlay and does not wrap on desktop chat", async () => {
+  const chat = await mountChat(false);
+  const container = chat.shadowRoot?.getElementById(
+    "pubnub-chat-container"
+  ) as HTMLElement;
+  expect(container.hasAttribute("aria-modal")).to.equal(false);
+  const chatStops = tabStops(container);
+  const chatLast = chatStops[chatStops.length - 1];
+  chatLast.focus();
+  const chatTab = dispatchTab(chatLast);
+  expect(chatTab.defaultPrevented).to.equal(false);
+  expect(deepActive()).to.equal(chatLast);
+
+  const tour = document.createElement("tour-scheduler") as TourScheduler & {
+    firstUpdated: () => Promise<void>;
+    _loadForCurrentBuilding: () => Promise<void>;
+    waitingForAvailabilities: boolean;
+    shouldAllowScheduleLoading: boolean;
+    shouldAllowScheduling: boolean;
+    updateComplete: Promise<boolean>;
+  };
+  tour.firstUpdated = async () => undefined;
+  tour._loadForCurrentBuilding = async () => undefined;
+  tour.waitingForAvailabilities = false;
+  tour.shouldAllowScheduleLoading = false;
+  tour.shouldAllowScheduling = true;
+  tour.primaryColor = "#646987";
+  document.body.appendChild(tour);
+  await tour.updateComplete;
+  tour.waitingForAvailabilities = false;
+  tour.shouldAllowScheduleLoading = false;
+  tour.shouldAllowScheduling = true;
+  await tour.updateComplete;
+
+  const stops = tabStops(tour);
+  expect(stops.length).to.be.greaterThan(1);
+  expect(stops.includes(deepActive() as HTMLElement)).to.equal(true);
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  last.focus();
+  const wrapped = dispatchTab(last);
+  expect(wrapped.defaultPrevented).to.equal(true);
+  expect(deepActive()).to.equal(first);
+});
+
+it("keeps Tab inside the tour overlay while it is loading", async () => {
+  const tour = document.createElement("tour-scheduler") as TourScheduler & {
+    firstUpdated: () => Promise<void>;
+    _loadForCurrentBuilding: () => Promise<void>;
+    updateComplete: Promise<boolean>;
+  };
+  tour.firstUpdated = async () => undefined;
+  tour._loadForCurrentBuilding = async () => undefined;
+  tour.primaryColor = "#646987";
+  document.body.appendChild(tour);
+  await tour.updateComplete;
+
+  expect(tabStops(tour).length).to.equal(0);
+  expect(deepActive()).to.equal(tour);
+  const held = dispatchTab(tour);
+  expect(held.defaultPrevented).to.equal(true);
+  expect(deepActive()).to.equal(tour);
+});
+
+it("makes the mobile dialog modal and wraps Tab inside it", async () => {
+  const chat = await mountChat(true);
+  const container = chat.shadowRoot?.getElementById(
+    "pubnub-chat-container"
+  ) as HTMLElement;
+  expect(container.getAttribute("aria-modal")).to.equal("true");
+
+  const stops = tabStops(container);
+  expect(stops.length).to.be.greaterThan(1);
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+
+  last.focus();
+  const forward = dispatchTab(last);
+  expect(forward.defaultPrevented).to.equal(true);
+  expect(deepActive()).to.equal(first);
+
+  first.focus();
+  const backward = dispatchTab(first, true);
+  expect(backward.defaultPrevented).to.equal(true);
+  expect(deepActive()).to.equal(last);
+
+  const outside = document.createElement("button");
+  outside.textContent = "Page";
+  document.body.appendChild(outside);
+  outside.focus();
+  const leaked = dispatchTab(outside);
+  expect(leaked.defaultPrevented).to.equal(false);
+  expect(deepActive()).to.equal(outside);
+});
+
+it("focuses the message field on a user open and not on auto-open", async () => {
+  const pageInput = document.createElement("input");
+  document.body.appendChild(pageInput);
+  pageInput.focus();
+
+  (window as unknown as { eliseAi: Record<string, unknown> }).eliseAi = {};
+  const widget = document.createElement("me-chat") as MeChatTest;
+  document.body.appendChild(widget);
+  await widget.updateComplete;
+  widget.buildingSlug = "test-building";
+  widget.orgSlug = "test-org";
+  widget.primaryColor = "#646987";
+  widget.backgroundColor = "#ffffff";
+  widget.buildingWebchatView = building;
+  widget.focusChatOnMount = false;
+  widget.displayPubnubChat = true;
+  await widget.updateComplete;
+  const pubnub = widget.shadowRoot?.getElementById("pubnub-chat") as PubnubChat;
+  await pubnub.updateComplete;
+  expect(deepActive()).to.equal(pageInput);
+  expect(widget.focusChatOnMount).to.equal(false);
+
+  widget.displayPubnubChat = false;
+  await widget.updateComplete;
+  widget.focusChatOnMount = true;
+  widget.displayPubnubChat = true;
+  await widget.updateComplete;
+  const reopened = widget.shadowRoot?.getElementById(
+    "pubnub-chat"
+  ) as PubnubChat;
+  await reopened.updateComplete;
+  await nextTask();
+  expect(deepActive()?.id).to.equal("message-input");
+  expect(widget.focusChatOnMount).to.equal(false);
+});
+
+it("focuses the message field on open when consent is already stored", async () => {
+  const consentKey = "stored-consent-orgConsent";
+  localStorage.setItem(
+    consentKey,
+    JSON.stringify({
+      consentGiven: true,
+      timestamp: Date.now(),
+      consentId: CURRENT_CONSENT_ID,
+    })
+  );
+
+  const pageInput = document.createElement("input");
+  document.body.appendChild(pageInput);
+  pageInput.focus();
+
+  (window as unknown as { eliseAi: Record<string, unknown> }).eliseAi = {};
+  const widget = document.createElement("me-chat") as MeChatTest;
+  document.body.appendChild(widget);
+  await widget.updateComplete;
+  widget.buildingSlug = "test-building";
+  widget.orgSlug = "stored-consent-org";
+  widget.primaryColor = "#646987";
+  widget.backgroundColor = "#ffffff";
+  widget.buildingWebchatView = building;
+  widget.requiresConsent = true;
+  widget.focusChatOnMount = false;
+  widget.displayPubnubChat = true;
+  await widget.updateComplete;
+  const pubnub = widget.shadowRoot?.getElementById("pubnub-chat") as PubnubChat;
+  await pubnub.updateComplete;
+  await nextTask();
+  expect(deepActive()).to.equal(pageInput);
+
+  widget.displayPubnubChat = false;
+  await widget.updateComplete;
+  widget.focusChatOnMount = true;
+  widget.displayPubnubChat = true;
+  await widget.updateComplete;
+  const reopened = widget.shadowRoot?.getElementById(
+    "pubnub-chat"
+  ) as PubnubChat;
+  await reopened.updateComplete;
+  await nextTask();
+  expect(deepActive()?.id).to.equal("message-input");
+  localStorage.removeItem(consentKey);
+});
+
+it("focuses the dialog until consent, then the message field", async () => {
+  localStorage.removeItem("consent-gate-orgConsent");
+  (window as unknown as { eliseAi: Record<string, unknown> }).eliseAi = {};
+  const widget = document.createElement("me-chat") as MeChatTest;
+  document.body.appendChild(widget);
+  await widget.updateComplete;
+  widget.buildingSlug = "test-building";
+  widget.orgSlug = "consent-gate-org";
+  widget.primaryColor = "#646987";
+  widget.backgroundColor = "#ffffff";
+  widget.buildingWebchatView = building;
+  widget.requiresConsent = true;
+  widget.focusChatOnMount = true;
+  widget.displayPubnubChat = true;
+  await widget.updateComplete;
+  const pubnub = widget.shadowRoot?.getElementById("pubnub-chat") as PubnubChat;
+  await pubnub.updateComplete;
+  await nextTask();
+  expect(deepActive()?.id).to.equal("pubnub-chat-container");
+
+  const agree = pubnub.shadowRoot?.querySelector(
+    ".agreeButton"
+  ) as HTMLButtonElement | null;
+  expect(agree?.textContent?.trim()).to.equal("I agree");
+  agree?.click();
+  await pubnub.updateComplete;
+  await nextTask();
+  expect(deepActive()?.id).to.equal("message-input");
+  const footer = pubnub.shadowRoot?.getElementById("footer");
+  expect(footer?.classList.contains("hidden")).to.equal(false);
+});
+
+it("returns focus to the launcher from Minimize chat", async () => {
+  const launcher = document.createElement("button");
+  launcher.textContent = "Chat with us";
+  document.body.appendChild(launcher);
+
+  (window as unknown as { eliseAi: Record<string, unknown> }).eliseAi = {};
+  const widget = document.createElement("me-chat") as MeChatTest;
+  document.body.appendChild(widget);
+  await widget.updateComplete;
+  widget.buildingSlug = "test-building";
+  widget.orgSlug = "test-org";
+  widget.primaryColor = "#646987";
+  widget.backgroundColor = "#ffffff";
+  widget.buildingWebchatView = building;
+  widget._isMobile = false;
+  widget.isLoading = false;
+  widget.hideLauncher = true;
+  widget.displayPubnubChat = true;
+  await widget.updateComplete;
+  widget.launcherButton = launcher;
+
+  const actions = widget.shadowRoot?.getElementById(
+    "chatAdditionalActionsPubnub"
+  );
+  const miniHost = actions?.shadowRoot?.querySelector(
+    "minimize-expand-button"
+  ) as HTMLElement & { updateComplete?: Promise<boolean> };
+  await miniHost?.updateComplete;
+  const minimize = miniHost?.shadowRoot?.querySelector("button");
+  expect(minimize?.getAttribute("aria-label")).to.equal("Minimize chat");
+  minimize?.click();
+  await widget.updateComplete;
+  expect(widget.displayPubnubChat).to.equal(false);
+  expect(deepActive()).to.equal(launcher);
+});
+
+it("returns focus to the launcher on Escape", async () => {
+  const launcher = document.createElement("button");
+  launcher.setAttribute("aria-label", "Chat with us");
+  launcher.textContent = "Chat with us";
+  document.body.appendChild(launcher);
+
+  (window as unknown as { eliseAi: Record<string, unknown> }).eliseAi = {};
+  const widget = document.createElement("me-chat") as MeChatTest;
+  document.body.appendChild(widget);
+  await widget.updateComplete;
+  widget.buildingSlug = "test-building";
+  widget.orgSlug = "test-org";
+  widget.primaryColor = "#646987";
+  widget.backgroundColor = "#ffffff";
+  widget.buildingWebchatView = building;
+  widget._isMobile = false;
+  widget.isLoading = false;
+  widget.hideLauncher = true;
+  widget.displayPubnubChat = true;
+  await widget.updateComplete;
+  widget.launcherButton = launcher;
+
+  const pubnub = widget.shadowRoot?.getElementById("pubnub-chat") as PubnubChat;
+  await pubnub.updateComplete;
+  const container = pubnub.shadowRoot?.getElementById(
+    "pubnub-chat-container"
+  ) as HTMLElement;
+  const input = pubnub.shadowRoot?.getElementById(
+    "message-input"
+  ) as HTMLTextAreaElement;
+  input.focus();
+  container.dispatchEvent(
+    new KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      composed: true,
+    })
+  );
+  await widget.updateComplete;
+  expect(widget.displayPubnubChat).to.equal(false);
+  expect(deepActive()).to.equal(launcher);
+});
+
+it("moves Tab from an open, scrolling select to the next control", async () => {
+  const select = document.createElement("me-select") as MESelect & {
+    updateComplete: Promise<boolean>;
+  };
+  select.options = Array.from({ length: 20 }, (_, i) => ({
+    label: `Option ${i}`,
+    value: `${i}`,
+  }));
+  const next = document.createElement("button");
+  next.textContent = "Next";
+  document.body.append(select, next);
+  await select.updateComplete;
+
+  const input = select.shadowRoot?.querySelector<HTMLInputElement>(
+    "#selectText"
+  ) as HTMLInputElement;
+  input.focus();
+  input.click();
+  await select.updateComplete;
+  expect(select.shadowRoot?.querySelector('[role="listbox"]')).to.exist;
+
+  await sendKeys({ press: "Tab" });
+  expect(deepActive()).to.equal(next);
+});

package/src/disclaimers.ts

@@ -314,6 +314,36 @@ export const getConsentPreChatDisclaimer = (
     ? CANADA_PRIVACY_POLICY_URL
     : privacyPolicyUrl;
 
+  const focusMessageInput = (event: Event): void => {
+    const root = (event.currentTarget as HTMLElement | null)?.getRootNode();
+    if (!(root instanceof ShadowRoot)) return;
+    const host = root.host as HTMLElement & {
+      updateComplete?: Promise<unknown>;
+      focusMessageField?: () => boolean;
+    };
+    // The agree control is what has focus. Hiding it sends focus to the dialog
+    // (tabindex=-1). Move the caret to the message field after that.
+    const focus = (): void => {
+      if (typeof host.focusMessageField === "function") {
+        host.focusMessageField();
+        return;
+      }
+      const input = root.getElementById("message-input");
+      if (input instanceof HTMLElement && input.getClientRects().length > 0) {
+        input.focus();
+      }
+    };
+    const afterUpdate = (): void => {
+      focus();
+      setTimeout(focus, 0);
+    };
+    if (host.updateComplete) {
+      void host.updateComplete.then(afterUpdate);
+    } else {
+      afterUpdate();
+    }
+  };
+
   if (orgSlug === "avb" && !localStorage.getItem(consentKey ?? "")) {
     return html`
       <div class="legal-confirmation-inner-container">
@@ -349,8 +379,9 @@ export const getConsentPreChatDisclaimer = (
 
         <button
           class="agreeButton"
-          @click=${() => {
+          @click=${(e: Event) => {
             changeConsent(true);
+            focusMessageInput(e);
             const consentData = {
               consentGiven: true,
               timestamp: new Date().getTime(),
@@ -379,8 +410,9 @@ export const getConsentPreChatDisclaimer = (
         <div class="confirmation-with-checkbox">
           <div
             class="checkbox"
-            @click=${() => {
+            @click=${(e: Event) => {
               changeConsent(true);
+              focusMessageInput(e);
             }}
           >
             ${CheckboxEmpty}
@@ -422,8 +454,9 @@ export const getConsentPreChatDisclaimer = (
 
     <button
       class="agreeButton"
-      @click=${() => {
+      @click=${(e: Event) => {
         changeConsent(true);
+        focusMessageInput(e);
       }}
     >
       I agree

package/src/meChatAutoOpen.test.ts

@@ -0,0 +1,143 @@
+import { expect } from "@esm-bundle/chai";
+import { restore, stub, useFakeXMLHttpRequest } from "sinon/pkg/sinon-esm";
+import "../public/dist/index";
+import type { BuildingWebchatView } from "./fetchBuildingWebchatView";
+
+declare const afterEach: (callback: () => void) => void;
+declare const beforeEach: (callback: () => void) => void;
+declare const it: (name: string, callback: () => void | Promise<void>) => void;
+
+type FakeRequest = XMLHttpRequest & {
+  method: string;
+  url: string;
+  requestBody?: string;
+  respond: (
+    status: number,
+    headers?: Record<string, string>,
+    body?: string
+  ) => void;
+  onSend?: () => void;
+};
+
+type MeChatInternals = HTMLElement & {
+  updateComplete: Promise<boolean>;
+  isLoading: boolean;
+  displayPubnubChat: boolean;
+  onExitChat: () => void;
+};
+
+const view = (overrides: Partial<BuildingWebchatView>) => ({
+  id: 445038,
+  orgId: 53,
+  name: "Test Building",
+  userId: 7,
+  active: 1,
+  userFirstName: "Elise",
+  welcomeMessage: "Welcome, I'm Elise!",
+  launchedDateTime: "2024-01-01T00:00:00Z",
+  webchatScopeConfigured: true,
+  displayStyle: "pills",
+  shouldShowChatDesktop: true,
+  shouldShowChatMobile: true,
+  phoneNumber: null,
+  layoutOptions: [],
+  tourTypeOptions: [],
+  autoOpenChat: true,
+  ...overrides,
+});
+
+const fakeBackend = (): FakeRequest[] => {
+  const requests: FakeRequest[] = [];
+  const fakeXhr = useFakeXMLHttpRequest();
+  fakeXhr.onCreate = (request: FakeRequest) => {
+    requests.push(request);
+    request.onSend = () =>
+      setTimeout(() => {
+        const json = (status: number, body: unknown) =>
+          request.respond(
+            status,
+            { "Content-Type": "application/json" },
+            JSON.stringify(body)
+          );
+        const { url } = request;
+        if (url.includes("/organization/test-org/building/test-building/v2")) {
+          return json(200, view({}));
+        }
+        if (url.includes("/organization/test-org/webchat/v2")) {
+          return json(200, view({ id: 0, userId: null, name: "Test Org" }));
+        }
+        if (url.endsWith("/webchat/init")) {
+          return json(200, {
+            session_token: "session",
+            lead_id: "lead_test",
+            channel: "webchat_lead_test",
+            expires_in_seconds: 3600,
+          });
+        }
+        if (url.includes("chat-ui-feature-flag")) return json(200, false);
+        return json(200, null);
+      });
+  };
+  return requests;
+};
+
+const startWidget = async (): Promise<MeChatInternals> => {
+  const meChat = document.createElement("me-chat") as MeChatInternals;
+  meChat.setAttribute("orgslug", "test-org");
+  meChat.setAttribute("buildingslug", "test-building");
+  document.body.appendChild(meChat);
+  for (let i = 0; i < 200 && meChat.isLoading; i++) {
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  }
+  expect(meChat.isLoading, "widget finished loading").to.equal(false);
+  await meChat.updateComplete;
+  return meChat;
+};
+
+const dismissKey = "com.elise.webchat.autoOpenDismissed=test-org=test-building";
+
+beforeEach(() => {
+  localStorage.clear();
+  sessionStorage.clear();
+  (window as unknown as { eliseAi: unknown }).eliseAi = {};
+  stub(window, "fetch").resolves(new Response("{}"));
+});
+
+afterEach(() => {
+  document
+    .querySelectorAll("me-chat, pubnub-chat")
+    .forEach((el) => el.remove());
+  restore();
+  localStorage.clear();
+  sessionStorage.clear();
+});
+
+it("auto-opens on first visit and records suppression in localStorage", async () => {
+  fakeBackend();
+  const meChat = await startWidget();
+
+  expect(meChat.displayPubnubChat).to.equal(true);
+  expect(localStorage.getItem(dismissKey)).to.equal("true");
+});
+
+it("does not auto-open on a later visit after dismissal", async () => {
+  localStorage.setItem(dismissKey, "true");
+  sessionStorage.clear();
+  fakeBackend();
+  const meChat = await startWidget();
+  expect(meChat.displayPubnubChat).to.equal(false);
+});
+
+it("still opens chat manually when auto-open was dismissed", async () => {
+  localStorage.setItem(dismissKey, "true");
+  fakeBackend();
+  const meChat = await startWidget();
+  expect(meChat.displayPubnubChat).to.equal(false);
+
+  (
+    window as unknown as { eliseAi: { onOpenChat: () => void } }
+  ).eliseAi.onOpenChat();
+  await meChat.updateComplete;
+
+  expect(meChat.displayPubnubChat).to.equal(true);
+});