@meetelise/chat 1.57.0 → 1.58.1

package/src/WebComponent/leasing-chat-styles.ts

@@ -47,8 +47,7 @@ export const leasingChatStyles = css`
     justify-content: space-between;
   }
   .leasing-conversation-body-backdrop {
-    background: rgba(193, 193, 193, 0.5);
-    backdrop-filter: blur(4px);
+    background: #efefef;
 
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);

package/src/WebComponent/me-chat.ts

@@ -144,6 +144,11 @@ export class MEChat extends LitElement {
    */
   @property({ type: String })
   private declaredBuildingSlug = "";
+  /**
+   * Org-level webchat on a host that knows the page's building by id (Elise
+   * Studio), set with `setDeclaredBuildingId`. Undefined until the host sets it.
+   */
+  private hostDeclaredBuildingId: number | null | undefined = undefined;
   /**
    * Org-level webchat (`centralConvo` started without a building). Stays true
    * after the widget adopts the org's triage general building from
@@ -700,10 +705,16 @@ export class MEChat extends LitElement {
     if (this.centralConvo) {
       const myPubnub = this.myPubnub;
       myPubnub.centralConvo = true;
-      // Not awaited: only needed once the visitor sends a message.
-      void this.fetchDeclaredBuildingId().then((id) => {
-        myPubnub.declaredBuildingId = id;
-      });
+      if (this.hostDeclaredBuildingId !== undefined) {
+        myPubnub.declaredBuildingId = this.hostDeclaredBuildingId;
+      } else {
+        // Not awaited: only needed once the visitor sends a message.
+        void this.fetchDeclaredBuildingId().then((id) => {
+          if (this.hostDeclaredBuildingId === undefined) {
+            myPubnub.declaredBuildingId = id;
+          }
+        });
+      }
     } else {
       this.myPubnub.declaredBuildingId = this.buildingWebchatView.id;
     }
@@ -814,6 +825,16 @@ export class MEChat extends LitElement {
     };
   };
 
+  /**
+   * Org-level webchat: the page's building, sent with later visitor messages as
+   * `declaredBuildingId`. For hosts that move between pages without restarting
+   * the widget; it doesn't change config or the conversation.
+   */
+  setDeclaredBuildingId(id: number | null): void {
+    this.hostDeclaredBuildingId = id;
+    if (this.myPubnub) this.myPubnub.declaredBuildingId = id;
+  }
+
   /** The numeric id of the snippet's building in org-level webchat, if it names one. */
   private fetchDeclaredBuildingId = async (): Promise<number | null> => {
     if (!this.declaredBuildingSlug || !this.orgSlug) return null;

package/src/WebComponent/pubnub-chat.ts

@@ -253,6 +253,8 @@ export class PubnubChat extends LitElement {
       return html``; // error should be here
     }
 
+    const assistantName = this.building?.userFirstName || "Elise";
+
     const buildingId = this.building?.id;
     let styles = {};
     if (this._isMobile) {
@@ -357,9 +359,8 @@ export class PubnubChat extends LitElement {
               </li>
               <li
                 class="message-container ai-message"
-                tabindex="0"
                 role="article"
-                aria-label="Elise: Hi I'm Elise. How can I assist you today?"
+                aria-label="${assistantName}: Hi I'm ${assistantName}. How can I assist you today?"
               >
                 <p
                   class=${classMap({
@@ -368,7 +369,7 @@ export class PubnubChat extends LitElement {
                     ["webchat-font__mobile"]: this._isMobile,
                   })}
                 >
-                  Hi I'm Elise. How can I assist you today?
+                  Hi I'm ${assistantName}. How can I assist you today?
                 </p>
               </li>
               ${this.messages.map((message) => {
@@ -378,11 +379,10 @@ export class PubnubChat extends LitElement {
                       ? "message-container lead-message"
                       : "message-container ai-message"}
                     key=${message.timestamp}
-                    tabindex="0"
                     role="article"
                     aria-label="${message.isLeadMessage
                       ? "You"
-                      : "Elise"}: ${messageAriaLabel(message)}"
+                      : assistantName}: ${messageAriaLabel(message)}"
                   >
                     ${isSimpleNavigationChatMessage(message)
                       ? html`<pubnub-navigation
@@ -436,6 +436,7 @@ export class PubnubChat extends LitElement {
             <div id="utilities-inner-footer">
               <textarea
                 id="message-input"
+                aria-label="Message"
                 class=${classMap({
                   ["webchat-font__desktop"]: !this._isMobile,
                   ["webchat-font__mobile"]: this._isMobile,
@@ -535,9 +536,8 @@ export class PubnubChat extends LitElement {
               </li>
               <li
                 class="message-container ai-message"
-                tabindex="0"
                 role="article"
-                aria-label="Elise: Hi I'm Elise. If this is a medical emergency, please call 911. How can I assist you today?"
+                aria-label="${assistantName}: Hi I'm ${assistantName}. If this is a medical emergency, please call 911. How can I assist you today?"
               >
                 <p
                   class=${classMap({
@@ -546,8 +546,8 @@ export class PubnubChat extends LitElement {
                     ["webchat-font__mobile"]: this._isMobile,
                   })}
                 >
-                  Hi I'm Elise. If this is a medical emergency, please call 911.
-                  How can I assist you today?
+                  Hi I'm ${assistantName}. If this is a medical emergency,
+                  please call 911. How can I assist you today?
                 </p>
               </li>
               ${this.messages.map((message) => {
@@ -557,11 +557,10 @@ export class PubnubChat extends LitElement {
                       ? "message-container lead-message"
                       : "message-container ai-message"}
                     key=${message.timestamp}
-                    tabindex="0"
                     role="article"
                     aria-label="${message.isLeadMessage
                       ? "You"
-                      : "Elise"}: ${messageAriaLabel(message)}"
+                      : assistantName}: ${messageAriaLabel(message)}"
                   >
                     ${isSimpleNavigationChatMessage(message)
                       ? html`<pubnub-navigation
@@ -615,6 +614,7 @@ export class PubnubChat extends LitElement {
             <div id="healthcare-inner-footer">
               <textarea
                 id="message-input"
+                aria-label="Message"
                 class=${classMap({
                   ["webchat-font__desktop"]: !this._isMobile,
                   ["webchat-font__mobile"]: this._isMobile,
@@ -734,9 +734,8 @@ export class PubnubChat extends LitElement {
                     "ai-message": true,
                     "with-box-shadow": orgId === 444,
                   })}
-                  tabindex="0"
                   role="article"
-                  aria-label="Elise: ${this.building.welcomeMessage}"
+                  aria-label="${assistantName}: ${this.building.welcomeMessage}"
                 >
                   <p
                     class=${classMap({
@@ -760,11 +759,10 @@ export class PubnubChat extends LitElement {
                     "with-box-shadow": orgId === 444,
                   })}
                   key=${message.timestamp}
-                  tabindex="0"
                   role="article"
                   aria-label="${message.isLeadMessage
                     ? "You"
-                    : "Elise"}: ${messageAriaLabel(message)}"
+                    : assistantName}: ${messageAriaLabel(message)}"
                 >
                   ${isSimpleNavigationChatMessage(message)
                     ? html`<pubnub-navigation
@@ -822,6 +820,7 @@ export class PubnubChat extends LitElement {
         >
           <textarea
             id="message-input"
+            aria-label="Message"
             class=${classMap({
               ["webchat-font__desktop"]: !this._isMobile,
               ["webchat-font__mobile"]: this._isMobile,
@@ -855,7 +854,6 @@ export class PubnubChat extends LitElement {
             @click=${() => this.sendMessage(this.messageInput.value)}
             ?disabled=${this.myPubnub?.isCurrentlyStreamingMessage}
             aria-label="Send message"
-            aria-describedby="Send message"
           >
             ${shouldUsePrimaryColorForChatFooter(
               this.building.orgId,

package/src/assistantName.test.ts

@@ -0,0 +1,152 @@
+import { expect } from "@esm-bundle/chai";
+import "../public/dist/index";
+import { BuildingWebchatView } from "./fetchBuildingWebchatView";
+import type { SimpleChatMessage } from "./MyPubnub";
+import type { PubnubChat } from "./WebComponent/pubnub-chat";
+
+type WidgetTypeName = "default" | "healthcare" | "utilities";
+
+declare const afterEach: (callback: () => void) => void;
+declare const it: (name: string, callback: () => void | Promise<void>) => void;
+
+const text = (visible: string): string => visible.replace(/\s+/g, " ").trim();
+
+const conversation = (): SimpleChatMessage[] => [
+  {
+    timestamp: 1,
+    message: "Do you have a two bedroom?",
+    isLeadMessage: true,
+    chunks: [{ text: "Do you have a two bedroom?", order: 0, isDone: true }],
+    type: "text",
+  },
+  {
+    timestamp: 2,
+    message: "Yes, I can help with that.",
+    isLeadMessage: false,
+    chunks: [{ text: "Yes, I can help with that.", order: 0, isDone: true }],
+    type: "text",
+  },
+  {
+    timestamp: 3,
+    media: [{ title: null, description: null, url: null }],
+    isLeadMessage: false,
+    type: "media",
+  },
+  {
+    timestamp: 4,
+    navigation: {
+      url: "https://example.com/floor-plans",
+      label: "the floor plans",
+    },
+    isLeadMessage: false,
+    type: "navigation",
+  },
+];
+
+const mount = async (
+  widgetType: WidgetTypeName,
+  assistantName: string | null
+): Promise<PubnubChat> => {
+  const chat = document.createElement("pubnub-chat") as PubnubChat;
+  chat.buildingSlug = "alta-federal-hill";
+  chat.orgSlug = "greystar";
+  chat.widgetType = widgetType;
+  if (assistantName !== null) {
+    chat.building = {
+      id: 1,
+      orgId: 1,
+      name: "Alta Federal Hill",
+      userFirstName: assistantName,
+      welcomeMessage: `Hi, I'm ${assistantName}. How can I help you today?`,
+      state: "MD",
+      country: "US",
+      customAdditionalDisclaimer: null,
+    } as BuildingWebchatView;
+  }
+  document.body.appendChild(chat);
+  await chat.updateComplete;
+  // firstUpdated clears messages until PubNub has history.
+  chat.messages = conversation();
+  await chat.updateComplete;
+  return chat;
+};
+
+const labels = (chat: PubnubChat): string[] =>
+  Array.from(
+    chat.shadowRoot?.querySelectorAll<HTMLElement>('[role="article"]') ?? []
+  ).map((article) => article.getAttribute("aria-label") ?? "");
+
+afterEach(() => {
+  document.querySelectorAll("pubnub-chat").forEach((chat) => chat.remove());
+});
+
+it("announces leasing messages as the configured assistant", async () => {
+  const chat = await mount("default", "Emily");
+  const articles = Array.from(
+    chat.shadowRoot?.querySelectorAll<HTMLElement>('[role="article"]') ?? []
+  );
+
+  expect(text(articles[0].innerText)).to.equal(
+    "Hi, I'm Emily. How can I help you today?"
+  );
+  expect(labels(chat)).to.deep.equal([
+    "Emily: Hi, I'm Emily. How can I help you today?",
+    "You: Do you have a two bedroom?",
+    "Emily: Yes, I can help with that.",
+    "Emily: Media message",
+    "Emily: Take me to the floor plans",
+  ]);
+});
+
+it("announces healthcare messages as the configured assistant", async () => {
+  const chat = await mount("healthcare", "Ezra");
+  const greeting = chat.shadowRoot?.querySelector<HTMLElement>(
+    "#message-thread-list > li.message-container"
+  );
+
+  expect(text(greeting?.innerText ?? "")).to.equal(
+    "Hi I'm Ezra. If this is a medical emergency, please call 911. How can I assist you today?"
+  );
+  expect(labels(chat)[0]).to.equal(
+    "Ezra: Hi I'm Ezra. If this is a medical emergency, please call 911. How can I assist you today?"
+  );
+  expect(labels(chat).slice(1)).to.deep.equal([
+    "You: Do you have a two bedroom?",
+    "Ezra: Yes, I can help with that.",
+    "Ezra: Media message",
+    "Ezra: Take me to the floor plans",
+  ]);
+});
+
+it("announces utilities messages as the configured assistant", async () => {
+  const chat = await mount("utilities", "Emily");
+  const greeting = chat.shadowRoot?.querySelector<HTMLElement>(
+    "#message-thread-list > li.message-container"
+  );
+
+  expect(text(greeting?.innerText ?? "")).to.equal(
+    "Hi I'm Emily. How can I assist you today?"
+  );
+  expect(labels(chat)).to.deep.equal([
+    "Emily: Hi I'm Emily. How can I assist you today?",
+    "You: Do you have a two bedroom?",
+    "Emily: Yes, I can help with that.",
+    "Emily: Media message",
+    "Emily: Take me to the floor plans",
+  ]);
+});
+
+it("keeps Elise when a chat has no configured assistant name", async () => {
+  const chat = await mount("utilities", null);
+  const greeting = chat.shadowRoot?.querySelector<HTMLElement>(
+    "#message-thread-list > li.message-container"
+  );
+
+  expect(text(greeting?.innerText ?? "")).to.equal(
+    "Hi I'm Elise. How can I assist you today?"
+  );
+  expect(labels(chat)[0]).to.equal(
+    "Elise: Hi I'm Elise. How can I assist you today?"
+  );
+  expect(labels(chat)[2]).to.equal("Elise: Yes, I can help with that.");
+});

package/src/main/MEChat.ts

@@ -40,7 +40,8 @@ export type StudioWebchatMode = "host_managed_context";
 export type StudioWebchatSessionScopeType =
   | "building"
   | "building_group"
-  | "site";
+  | "site"
+  | "org";
 
 export interface StudioWebchatSessionScope {
   type: StudioWebchatSessionScopeType;
@@ -60,6 +61,11 @@ export interface StudioWebchatContext {
   building?: string | null;
   buildingGroupId?: string | number | null;
   sessionScope?: StudioWebchatSessionScope;
+  /**
+   * Org scope only: the page's building, sent with visitor messages as
+   * `declaredBuildingId`. Null on pages with no single building.
+   */
+  declaredBuildingId?: number | null;
   path?: string;
   pageId?: string;
 }
@@ -323,6 +329,11 @@ export default class MEChat {
       return;
     }
 
+    if (context.sessionScope?.type === "org") {
+      this.updateStudioOrgContext(context, opts, updateToken);
+      return;
+    }
+
     const orgSlug = coerceStudioContextString(context.organization);
     const buildingSlug = coerceStudioContextString(context.building);
 
@@ -368,6 +379,64 @@ export default class MEChat {
     });
   }
 
+  /**
+   * Org-level webchat on a Studio site: one org-anchored widget for the whole
+   * site, started as the org-level pixel starts it. Route changes only move the
+   * page's declared building, so the conversation carries across pages.
+   */
+  static updateStudioOrgContext(
+    context: StudioWebchatContext,
+    opts: Options,
+    updateToken: number
+  ): void {
+    const orgSlug = coerceStudioContextString(context.organization);
+    if (!orgSlug) {
+      this.clearStudioContext({
+        source: "elise_studio",
+        reason: "missing_context",
+        preserveCache: true,
+      });
+      return;
+    }
+
+    const normalizedOrgSlug = normalizeOrgSlug(orgSlug);
+    const sessionScopeKey = context.sessionScope?.key || `org:${orgSlug}`;
+    const declaredBuildingId = coerceDeclaredBuildingId(
+      context.declaredBuildingId
+    );
+
+    if (
+      this.meChat &&
+      this.activeStudioOrgSlug === normalizedOrgSlug &&
+      !this.activeStudioBuildingSlug &&
+      this.activeStudioSessionScopeKey === sessionScopeKey
+    ) {
+      this.meChat.setDeclaredBuildingId(declaredBuildingId);
+      return;
+    }
+
+    void this.removeWidget().then(() => {
+      if (updateToken !== this.studioUpdateToken) return;
+
+      this.activeStudioOrgSlug = normalizedOrgSlug;
+      this.activeStudioBuildingSlug = "";
+      this.activeStudioSessionScopeKey = sessionScopeKey;
+      this.orgSlug = normalizedOrgSlug;
+
+      this.start(
+        {
+          ...opts,
+          studio: undefined,
+          organization: orgSlug,
+          building: undefined,
+          centralConvo: true,
+        },
+        false
+      );
+      this.meChat?.setDeclaredBuildingId(declaredBuildingId);
+    });
+  }
+
   static clearStudioContext(_context?: StudioWebchatClearContext): void {
     void _context;
     this.studioUpdateToken += 1;
@@ -536,6 +605,11 @@ function normalizeOrgSlug(orgSlug: string): string {
     : orgSlug;
 }
 
+function coerceDeclaredBuildingId(value: unknown): number | null {
+  const id = typeof value === "string" ? Number(value) : value;
+  return typeof id === "number" && Number.isInteger(id) && id > 0 ? id : null;
+}
+
 function coerceStudioSessionScopeKey(
   sessionScope: StudioWebchatSessionScope | undefined,
   buildingSlug: string

package/src/orgLevelNavigation.test.ts

@@ -1,6 +1,6 @@
 import { expect } from "@esm-bundle/chai";
 import { restore, stub, useFakeXMLHttpRequest } from "sinon/pkg/sinon-esm";
-import "../public/dist/index";
+import MEChat from "../public/dist/index";
 import type MyPubnub from "./MyPubnub";
 import type { SimpleChatMessage } from "./MyPubnub";
 import type { PubnubChat } from "./WebComponent/pubnub-chat";
@@ -623,3 +623,116 @@ it("still opens a per-building widget's tour scheduler from its tour link", asyn
   expect(widgetTakesOverClick(buildingTourLink)).to.equal(true);
   [buildingTourLink, ...others].forEach((link) => link.remove());
 });
+
+// --- Org mode on an Elise Studio site ---
+
+const STUDIO_SITE = "site-1";
+
+const studioOrgContext = (declaredBuildingId: number | null) => ({
+  source: "elise_studio" as const,
+  siteId: STUDIO_SITE,
+  organization: "test-org",
+  sessionScope: { type: "org" as const, key: "org:test-org" },
+  declaredBuildingId,
+});
+
+const studioWidget = async (): Promise<MeChatInternals> => {
+  for (let i = 0; i < 200; i++) {
+    const meChat = document.querySelector("me-chat") as MeChatInternals | null;
+    if (meChat && !meChat.isLoading) {
+      await meChat.updateComplete;
+      return meChat;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  }
+  throw new Error("Studio widget never finished loading");
+};
+
+it("runs a Studio site's org scope as org-level webchat, one widget across pages", async () => {
+  const requests = fakeBackend(inRollout);
+  MEChat.start({
+    studio: { siteId: STUDIO_SITE, mode: "host_managed_context" },
+  });
+  try {
+    // The homepage: no building.
+    MEChat.updateStudioContext(studioOrgContext(null));
+    const meChat = await studioWidget();
+
+    expect(initBodies(requests)).to.deep.equal([
+      { building_slug: "", org_slug: "test-org", central_convo: true },
+    ]);
+    expect(meChat.buildingSlug).to.equal(GENERAL_BUILDING);
+    expect(meChat.myPubnub?.declaredBuildingId).to.equal(null);
+
+    // A property page: same widget and conversation, with the page's building.
+    MEChat.updateStudioContext(studioOrgContext(445038));
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(document.querySelectorAll("me-chat")).to.have.length(1);
+    expect(document.querySelector("me-chat")).to.equal(meChat);
+    expect(initBodies(requests)).to.have.length(1);
+    const message = await publishedMessage(meChat.myPubnub as MyPubnub);
+    expect(message).to.include({ declaredBuildingId: 445038 });
+
+    // Back to a page with no building.
+    MEChat.updateStudioContext(studioOrgContext(null));
+    expect(meChat.myPubnub?.declaredBuildingId).to.equal(null);
+  } finally {
+    await MEChat.remove();
+  }
+});
+
+it("swaps a Studio site's building widget for org-level webchat", async () => {
+  const requests = fakeBackend(inRollout);
+  MEChat.start({
+    studio: { siteId: STUDIO_SITE, mode: "host_managed_context" },
+  });
+  try {
+    MEChat.updateStudioContext({
+      source: "elise_studio",
+      siteId: STUDIO_SITE,
+      organization: "test-org",
+      building: "test-building",
+      sessionScope: { type: "building", key: "building:test-building" },
+    });
+    const buildingWidget = await studioWidget();
+    expect(buildingWidget.myPubnub?.centralConvo).to.not.equal(true);
+
+    MEChat.updateStudioContext(studioOrgContext(445038));
+    for (
+      let i = 0;
+      i < 100 && document.querySelector("me-chat") === buildingWidget;
+      i++
+    ) {
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    }
+    const orgWidget = await studioWidget();
+
+    expect(orgWidget).to.not.equal(buildingWidget);
+    expect(document.querySelectorAll("me-chat")).to.have.length(1);
+    expect(orgWidget.myPubnub?.centralConvo).to.equal(true);
+    expect(orgWidget.myPubnub?.declaredBuildingId).to.equal(445038);
+    expect(initBodies(requests).at(-1)).to.deep.equal({
+      building_slug: "",
+      org_slug: "test-org",
+      central_convo: true,
+    });
+  } finally {
+    await MEChat.remove();
+  }
+});
+
+it("clears a Studio site's org scope without an organization", async () => {
+  fakeBackend(inRollout);
+  MEChat.start({
+    studio: { siteId: STUDIO_SITE, mode: "host_managed_context" },
+  });
+  try {
+    MEChat.updateStudioContext({ ...studioOrgContext(null), organization: "" });
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(document.querySelector("me-chat")).to.equal(null);
+  } finally {
+    await MEChat.remove();
+  }
+});