@meetelise/chat 1.58.0 → 1.59.0

package/src/MyPubnub.ts

@@ -1,3 +1,4 @@
+import { getTrackingParams } from "./trackingParams";
 import { AxiosError } from "axios";
 import Pubnub, { ListenerParameters, MessageEvent } from "pubnub";
 
@@ -792,6 +793,7 @@ class MyPubnub {
               buildingSlug: this.buildingSlug,
               userId: this.buildingWebchatView?.userId, // this userid is actually the AI user!
               leadSource: this.leadSource,
+              trackingParams: getTrackingParams(this.orgSlug),
               widgetType: this.widgetType,
               isDevState: shouldCreateAsDevState(location.href),
               // Read by the backend only for orgs in the org-level webchat rollout.

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { getTrackingParams } from "../../trackingParams";
 import { html, LitElement, PropertyValueMap, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import "../actions/international-phone-input";
@@ -872,6 +873,7 @@ export class TourScheduler extends LitElement {
       email_address: this.email,
       phone_number: phoneNumber,
       building_id: this.buildingId,
+      tracking_params: getTrackingParams(this.orgSlug),
       first_name: this.firstNameInput?.value ?? this.firstNameInputValue,
       last_name: this.lastNameInput?.value ?? this.lastNameInputValue,
       tour_type: tourTypeForSubmission[this.tourType],

package/src/WebComponent/actions/call-us-window.ts

@@ -1,3 +1,4 @@
+import { getTrackingParams } from "../../trackingParams";
 import axios from "axios";
 import { css, html, LitElement, TemplateResult } from "lit";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -512,6 +513,7 @@ const createTextWithUs = async (
     // @ts-ignore
     query_params: Object.fromEntries(queryParams.entries()),
     conversation_tracking_id: chatId,
+    tracking_params: getTrackingParams(orgSlug),
     lead_sources_with_timestamps: (leadSourcesWithTimestamps ?? []).map(
       (source) => snakify({ ...source })
     ),

package/src/WebComponent/actions/email-us-window.ts

@@ -1,3 +1,4 @@
+import { getTrackingParams } from "../../trackingParams";
 import { css, html, LitElement, TemplateResult } from "lit";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { customElement, property, query, state } from "lit/decorators.js";
@@ -865,6 +866,7 @@ const createEmail = async (
     // @ts-ignore
     query_params: Object.fromEntries(queryParams.entries()),
     conversation_tracking_id: chatId,
+    tracking_params: getTrackingParams(orgSlug),
     lead_sources_with_timestamps: (leadSourcesWithTimestamps ?? []).map(
       (source) => snakify({ ...source })
     ),

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

@@ -1,3 +1,4 @@
+import { getTrackingParams } from "../trackingParams";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -1519,6 +1520,7 @@ const overrideContactUsForm = async (
       first_message: formValues.message,
       building_id: buildingWebchatView.id,
       is_external_form: true,
+      tracking_params: getTrackingParams(orgSlug),
       lead_sources: [
         ...new Set(
           leadSource

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/trackingParams.test.ts

@@ -0,0 +1,32 @@
+import { expect } from "@esm-bundle/chai";
+import { getTrackingParams } from "./trackingParams";
+
+const originalUrl = window.location.href;
+
+afterEach(() => {
+  localStorage.removeItem("xdtid");
+  window.history.replaceState(null, "", originalUrl);
+});
+
+it("reads Greystar's xdtid from localStorage", () => {
+  localStorage.setItem("xdtid", "from-storage");
+  window.history.replaceState(null, "", "?xdtid=from-url");
+
+  expect(getTrackingParams("greystar")).to.deep.equal({
+    xdtid: "from-storage",
+  });
+});
+
+it("falls back to the xdtid URL param", () => {
+  window.history.replaceState(null, "", "?xdtid=from-url");
+
+  expect(getTrackingParams("greystar")).to.deep.equal({ xdtid: "from-url" });
+});
+
+it("returns null when nothing is found or the org has no config", () => {
+  expect(getTrackingParams("greystar")).to.equal(null);
+
+  localStorage.setItem("xdtid", "from-storage");
+  expect(getTrackingParams("avb")).to.equal(null);
+  expect(getTrackingParams(null)).to.equal(null);
+});

package/src/trackingParams.ts

@@ -0,0 +1,42 @@
+interface TrackingParamSource {
+  key: string;
+  localStorageKey?: string;
+  queryParam?: string;
+}
+
+// Client-specific values sent with each new lead and passed to the client's PMS. Add a client here.
+const TRACKING_PARAMS_BY_ORG_SLUG: Record<string, TrackingParamSource[]> = {
+  // Greystar's cross-domain tracking id, set by their GTM; localStorage outlives the landing URL.
+  greystar: [{ key: "xdtid", localStorageKey: "xdtid", queryParam: "xdtid" }],
+};
+
+const readLocalStorage = (key: string): string | null => {
+  try {
+    return localStorage.getItem(key);
+  } catch (_) {
+    return null;
+  }
+};
+
+const readQueryParam = (key: string): string | null => {
+  try {
+    return new URLSearchParams(window.location.search).get(key);
+  } catch (_) {
+    return null;
+  }
+};
+
+export const getTrackingParams = (
+  orgSlug: string | null | undefined
+): Record<string, string> | null => {
+  const sources = orgSlug ? TRACKING_PARAMS_BY_ORG_SLUG[orgSlug] : undefined;
+  if (!sources) return null;
+  const params: Record<string, string> = {};
+  for (const source of sources) {
+    const value =
+      (source.localStorageKey && readLocalStorage(source.localStorageKey)) ||
+      (source.queryParam && readQueryParam(source.queryParam));
+    if (value) params[source.key] = value;
+  }
+  return Object.keys(params).length ? params : null;
+};