@meetelise/chat 1.55.3 → 1.56.0

package/src/MyPubnub.ts

@@ -11,6 +11,11 @@ import { shouldCreateAsDevState } from "./shouldCreateAsDevState";
 import { WidgetType } from "./main/MEChat";
 import { BuildingWebchatView } from "./fetchBuildingWebchatView";
 import { LeadSourceMultitouchClient } from "./WebComponent/LeadSourceMultitouchClient";
+import {
+  getWebchatPageContext,
+  parseWebchatNavigation,
+  WebchatNavigation,
+} from "./webchatNavigation";
 
 interface TokenResponse {
   auth: {
@@ -29,6 +34,7 @@ enum MessageType {
   noReply = "no-reply",
   text = "text",
   media = "media",
+  navigation = "navigation",
 }
 
 interface RawPubnubMessage {
@@ -43,6 +49,7 @@ interface RawPubnubMessage {
     order?: number;
     stream_id?: string;
     media?: ChatMediaFile[];
+    navigation?: unknown;
   };
   publisher: string;
   subscription: string;
@@ -73,7 +80,18 @@ export interface SimpleMediaChatMessage {
   type: SimpleMessageTypes.media;
 }
 
-export type SimpleChatMessage = SimpleTextChatMessage | SimpleMediaChatMessage;
+/** A "Take me to {label}" button the agent sends after a reply's text. */
+export interface SimpleNavigationChatMessage {
+  timestamp: number;
+  navigation: WebchatNavigation;
+  isLeadMessage: boolean;
+  type: SimpleMessageTypes.navigation;
+}
+
+export type SimpleChatMessage =
+  | SimpleTextChatMessage
+  | SimpleMediaChatMessage
+  | SimpleNavigationChatMessage;
 
 export const isSimpleTextChatMessage = (
   message: SimpleChatMessage
@@ -87,9 +105,16 @@ export const isSimpleMediaChatMessage = (
   return message.type === SimpleMessageTypes.media;
 };
 
+export const isSimpleNavigationChatMessage = (
+  message: SimpleChatMessage
+): message is SimpleNavigationChatMessage => {
+  return message.type === SimpleMessageTypes.navigation;
+};
+
 export enum SimpleMessageTypes {
   text = "text",
   media = "media",
+  navigation = "navigation",
 }
 
 class MyPubnub {
@@ -111,6 +136,22 @@ class MyPubnub {
 
   private widgetType: WidgetType = WidgetType.Default;
 
+  /**
+   * Org-level webchat (`centralConvo: true`): the session is org-anchored, so it
+   * must come from /webchat/init and never from the per-lead v1 token fallback.
+   */
+  centralConvo = false;
+
+  /** The numeric id of the building the snippet names, sent as `declaredBuildingId`. */
+  declaredBuildingId: number | null = null;
+
+  /**
+   * The localStorage key the conversation (lead id) is saved under. It is the
+   * building slug, except in org-level webchat, where the conversation stays
+   * org-level even after the widget adopts the org's triage general building.
+   */
+  chatStorageSlug: string;
+
   pubnub: Pubnub | null = null;
   leadUserId = "";
   channel = "";
@@ -193,6 +234,7 @@ class MyPubnub {
     widgetType: WidgetType = WidgetType.Default
   ) {
     this.buildingSlug = buildingSlug;
+    this.chatStorageSlug = buildingSlug;
     this.buildingWebchatView = buildingDetails;
     this.orgSlug = orgSlug;
     this.leadSource = leadSource;
@@ -212,12 +254,20 @@ class MyPubnub {
     lead_id: string;
     channel: string;
     expires_in_seconds: number;
+    /**
+     * Org-level webchat only: the org's triage general building, which the
+     * widget then runs as.
+     */
+    building_slug?: string;
   } | null> {
     try {
-      const payload: Record<string, string> = {
+      const payload: Record<string, string | boolean> = {
         building_slug: buildingSlug,
         org_slug: orgSlug,
       };
+      if (this.centralConvo) {
+        payload.central_convo = true;
+      }
       if (existingLeadId) {
         payload.lead_id = existingLeadId;
       }
@@ -244,6 +294,18 @@ class MyPubnub {
     }
   }
 
+  /**
+   * Org-level webchat: run as the building /webchat/init resolved (the org's
+   * triage general building), so messages carry its id, slug and AI user.
+   */
+  adoptBuilding(
+    buildingSlug: string,
+    buildingDetails: BuildingWebchatView
+  ): void {
+    this.buildingSlug = buildingSlug;
+    this.buildingWebchatView = buildingDetails;
+  }
+
   private checkAndHandleDelayStreamingMessages = ({
     delayToFetchHistoryInMs = 10000,
   }: { delayToFetchHistoryInMs?: number } = {}): void => {
@@ -407,6 +469,10 @@ class MyPubnub {
         return response.data;
       }
 
+      // Org-level sessions only exist through /webchat/init, so there is no
+      // v1 session to fall back to.
+      if (this.centralConvo) return null;
+
       // v1 fallback for returning users with existing localStorage sessions
       const response = await axios.get(
         `${
@@ -665,7 +731,7 @@ class MyPubnub {
       if (!this.pubnub) {
         // ONLY create/gets a chat session if user actually wants to chat
         const chatStorageKey = createChatStorageKey(
-          this.buildingSlug,
+          this.chatStorageSlug,
           true,
           this.leadUserId
         );
@@ -728,6 +794,8 @@ class MyPubnub {
               leadSource: this.leadSource,
               widgetType: this.widgetType,
               isDevState: shouldCreateAsDevState(location.href),
+              // Read by the backend only for orgs in the org-level webchat rollout.
+              ...getWebchatPageContext(this.declaredBuildingId),
               lead_sources_with_timestamps: (
                 this.leadSourceMultitouchClient?.getSafeLeadSourceTouchpointsWithDefault(
                   { includedUserSelectedLeadSource: null }
@@ -815,14 +883,28 @@ class MyPubnub {
     const uniqueMessages = this.removeDuplicatedRawPubnubMessages(messages);
 
     uniqueMessages.forEach((message: RawPubnubMessage) => {
-      // Translate media messages
-      if (message.message.messageType === "media") {
+      if (message.message.messageType === MessageType.navigation) {
+        // A "Take me there" button; dropped if its url or label is unusable.
+        const navigation = parseWebchatNavigation(message.message.navigation);
+        if (navigation) {
+          parsedMessages.push({
+            timestamp: message.timetoken,
+            navigation,
+            isLeadMessage: false,
+            type: SimpleMessageTypes.navigation,
+          });
+        }
+      } else if (message.message.messageType === "media") {
+        // Translate media messages
         parsedMessages.push({
           timestamp: message.timetoken,
           media: message.message.media ?? [],
           isLeadMessage: this.isLeadMessage(message),
           type: SimpleMessageTypes.media,
         });
+      } else if (typeof message.message.text !== "string") {
+        // A message type this widget doesn't know, with no text to show.
+        return;
       } else if (
         // Translate non-streaming messages
         !message.message.stream_id ||

package/src/WebComponent/me-chat.ts

@@ -76,6 +76,7 @@ import {
   shouldOpenTourSchedulerFromUrl,
   storeGoogleReserveReferral,
 } from "../googleReserve";
+import { consumeReopenChatAfterNavigation } from "../webchatNavigation";
 
 @customElement("me-chat")
 export class MEChat extends LitElement {
@@ -136,6 +137,19 @@ export class MEChat extends LitElement {
   private orgSlug = "";
   @property({ type: Boolean })
   private centralConvo = false;
+  /**
+   * Org-level webchat only: the building the snippet names (`building` in
+   * `MEChat.start`). It doesn't change config or the conversation, which stay
+   * org-anchored; its id is sent with visitor messages as `declaredBuildingId`.
+   */
+  @property({ type: String })
+  private declaredBuildingSlug = "";
+  /**
+   * Org-level webchat (`centralConvo` started without a building). Stays true
+   * after the widget adopts the org's triage general building from
+   * /webchat/init, which sets `buildingSlug`.
+   */
+  private orgLevel = false;
   @property({ type: Object })
   launcherStyles: StyleInfo = {};
   @property()
@@ -284,26 +298,30 @@ export class MEChat extends LitElement {
   private setupWebchat = async (): Promise<void> => {
     if (!this.orgSlug) return;
     if (!this.centralConvo && !this.buildingSlug) return;
+    if (this.centralConvo && !this.buildingSlug) this.orgLevel = true;
     const buildingWebchatView = this.centralConvo
       ? await fetchOrgCentralWebchatView(this.orgSlug)
       : await fetchBuildingWebchatView(this.orgSlug, this.buildingSlug);
 
-    if (Math.random() < 0.2) {
+    // Both post per-building data, keyed by the building slug.
+    if (!this.isOrgMode()) {
+      if (Math.random() < 0.2) {
+        try {
+          updateRentgrataToken(this.buildingSlug, this.orgSlug);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.warn("Error updating rentgrata token", e);
+        }
+      }
+
       try {
-        updateRentgrataToken(this.buildingSlug, this.orgSlug);
+        logCdnVersion(this.orgSlug, this.buildingSlug);
       } catch (e) {
         // eslint-disable-next-line no-console
-        console.warn("Error updating rentgrata token", e);
+        console.warn("Error logging CDN version", e);
       }
     }
 
-    try {
-      logCdnVersion(this.orgSlug, this.buildingSlug);
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn("Error logging CDN version", e);
-    }
-
     const shouldShowWebchat = await getShouldShowWebchat(
       buildingWebchatView,
       this.buildingSlug,
@@ -325,6 +343,9 @@ export class MEChat extends LitElement {
     }
     this.buildingWebchatView = buildingWebchatView;
 
+    // A "Take me there" click on the previous page.
+    const reopenAfterNavigation = consumeReopenChatAfterNavigation();
+
     await this.initializeChatVariables();
     await this.handleChatInitializeAnalytics();
     await this.setBuildingDerivedInfo();
@@ -333,7 +354,13 @@ export class MEChat extends LitElement {
 
     storeGoogleReserveReferral(this.buildingWebchatView?.id ?? 0);
 
-    if (
+    if (reopenAfterNavigation) {
+      // Reopen the chat the visitor was using. initializeChatVariables has
+      // already loaded the saved conversation, so it is drawn on open.
+      this.displayPubnubChat = true;
+      this.hideLauncher = true;
+      this.hasMounted = true;
+    } else if (
       shouldOpenTourSchedulerFromUrl() &&
       (this.enabledChatWidgets.sstDesktop || this.enabledChatWidgets.sstMobile)
     ) {
@@ -355,7 +382,9 @@ export class MEChat extends LitElement {
   setBuildingDerivedInfo = async (): Promise<void> => {
     const buildingDetails = this.buildingWebchatView;
     if (!buildingDetails) return;
-    if (buildingDetails && this.orgSlug) {
+    // Org-level webchat runs on the org's own pages, so it leaves their links,
+    // forms and phone numbers alone rather than pointing them at its building.
+    if (buildingDetails && this.orgSlug && !this.orgLevel) {
       overrideContactUsForm(
         this.orgSlug,
         this.LeadSourceClient?.chatId ?? null,
@@ -385,7 +414,10 @@ export class MEChat extends LitElement {
       bedroomPreferenceRequired,
       brokerIntakeEnabled,
     ] = await Promise.all([
-      fetchLeadSources(this.orgSlug, this.buildingSlug),
+      // Per-building endpoint; org mode has no building to ask about.
+      this.isOrgMode()
+        ? Promise.resolve([])
+        : fetchLeadSources(this.orgSlug, this.buildingSlug),
       fetchFeatureFlagUseApplicationsLinkReplacement(this.buildingSlug),
       fetchBuildingAip(this.buildingSlug),
       fetchTrackedRolloutBedroomPreferenceRequired(this.buildingSlug),
@@ -405,7 +437,10 @@ export class MEChat extends LitElement {
     this.brokerIntakeEnabled = brokerIntakeEnabled;
 
     // The backend is cached for ~4 hours, so falling back to the existing api request until the cache propagates all the changes
-    const buildingPhoneNumber = buildingDetails.textWithUsPhoneNumber
+    // Org-level webchat never offers Text Us, so it needs no number for it.
+    const buildingPhoneNumber = this.orgLevel
+      ? null
+      : buildingDetails.textWithUsPhoneNumber
       ? buildingDetails.textWithUsPhoneNumber
       : await getBuildingPhoneNumber(this.buildingSlug);
 
@@ -435,9 +470,15 @@ export class MEChat extends LitElement {
       calcMobile: shouldShowCalcMobile,
     };
 
-    this.enabledChatWidgets = getWidgetOverrides(baseEnabledWidgets);
+    this.enabledChatWidgets = this.withOrgLevelContactOptions(
+      getWidgetOverrides(baseEnabledWidgets),
+      this.buildingWebchatView?.phoneNumber ?? ""
+    );
 
-    if (
+    if (this.orgLevel) {
+      // Org-level webchat leaves the org site's tour links alone too; they'd
+      // otherwise open the triage general building's scheduler.
+    } else if (
       this.enabledChatWidgets.sstDesktop ||
       this.enabledChatWidgets.sstMobile ||
       this.orgSlug === "radco"
@@ -501,7 +542,8 @@ export class MEChat extends LitElement {
 
     const buildingsPhoneNumber = this.buildingWebchatView?.phoneNumber ?? "";
     let phoneNumberForSource = null;
-    if (featureFlagUseDNI) {
+    // Org-level webchat calls its building's own number, never a DNI number.
+    if (featureFlagUseDNI && !this.orgLevel) {
       phoneNumberForSource = await fetchPhoneNumberFromSource(
         this.buildingSlug,
         this.LeadSourceClient?.leadSource ?? null
@@ -560,12 +602,18 @@ export class MEChat extends LitElement {
         this.leadSources.push(currentLeadSource);
       }
     }
-    getRawAvailabilities(buildingDetails.id); // we're not using this here, just want to cache the result
+    if (!this.isOrgMode()) {
+      getRawAvailabilities(buildingDetails.id); // we're not using this here, just want to cache the result
+    }
     const isApplicationLinkReplacementEnabled =
       (featureFlagUseApplicationsLinkReplacement ||
         this.buildingWebchatView?.isAip) &&
       this.buildingWebchatView?.isLiveOnApplications;
-    if (isApplicationLinkReplacementEnabled && this.buildingSlug) {
+    if (
+      isApplicationLinkReplacementEnabled &&
+      this.buildingSlug &&
+      !this.orgLevel
+    ) {
       const totalReplacements = replaceSelectButtonsWithNewLink(
         `https://applications.eliseai.com/building/${this.buildingSlug}/units`,
         this.orgSlug,
@@ -586,7 +634,7 @@ export class MEChat extends LitElement {
       }
     }
 
-    if (this.buildingSlug && this.orgSlug) {
+    if (this.buildingSlug && this.orgSlug && !this.orgLevel) {
       try {
         replaceOutdatedApplicationLinks(this.buildingSlug);
       } catch {
@@ -597,6 +645,7 @@ export class MEChat extends LitElement {
 
     if (
       this.buildingSlug &&
+      !this.orgLevel &&
       !!this.buildingWebchatView?.isLiveOnApplications &&
       this.buildingWebchatView?.applicationLink &&
       shouldOverwriteCheckAvail(this.orgSlug)
@@ -613,9 +662,10 @@ export class MEChat extends LitElement {
     if (!this.buildingWebchatView) return;
 
     // important to distinguish between a user who has never opened the chat and a user who has opened the chat but closed it
-    const currentChatStorageKey = getChatStorageKey(this.buildingSlug);
+    const chatStorageSlug = this.chatStorageSlug();
+    const currentChatStorageKey = getChatStorageKey(chatStorageSlug);
     const isReturningUser = isChatKeyValid(
-      this.buildingSlug,
+      chatStorageSlug,
       currentChatStorageKey
     );
 
@@ -623,7 +673,7 @@ export class MEChat extends LitElement {
     // temporary client-generated one (will be overwritten by server session below).
     const updatedChatStorageKey = isReturningUser
       ? currentChatStorageKey
-      : createChatStorageKey(this.buildingSlug, false);
+      : createChatStorageKey(chatStorageSlug, false);
 
     if (!updatedChatStorageKey.leadId) {
       throw new Error("Lead ID is null");
@@ -646,6 +696,17 @@ export class MEChat extends LitElement {
       this.LeadSourceClient,
       this.widgetType
     );
+    this.myPubnub.chatStorageSlug = chatStorageSlug;
+    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;
+      });
+    } else {
+      this.myPubnub.declaredBuildingId = this.buildingWebchatView.id;
+    }
 
     // Always create/resume a server-side session so the client has a fresh
     // sessionToken and never falls back to the insecure V1 token endpoint.
@@ -658,10 +719,13 @@ export class MEChat extends LitElement {
     if (session) {
       // Persist the server-provided leadId to localStorage, preserving initiatedChat flag
       createChatStorageKey(
-        this.buildingSlug,
+        chatStorageSlug,
         updatedChatStorageKey.initiatedChat,
         session.lead_id
       );
+      if (this.isOrgMode() && session.building_slug) {
+        await this.adoptBuilding(session.building_slug);
+      }
     }
 
     this.LeadSourceClient.chatId = this.myPubnub.channel;
@@ -693,12 +757,77 @@ export class MEChat extends LitElement {
     }
     // Re-read from localStorage so initializePubnub gets the server-provided
     // leadId (not the stale reference captured before initSession).
-    const finalChatStorageKey = getChatStorageKey(this.buildingSlug);
+    const finalChatStorageKey = getChatStorageKey(chatStorageSlug);
     if (finalChatStorageKey.initiatedChat) {
       await this.myPubnub.initializePubnub(finalChatStorageKey);
     }
   };
 
+  /**
+   * Org-level webchat with no building: config comes from the org, and there is
+   * no building slug for the per-building endpoints.
+   */
+  private isOrgMode = (): boolean => this.centralConvo && !this.buildingSlug;
+
+  /** Where the conversation is saved: org-level webchat keeps one per org. */
+  private chatStorageSlug = (): string =>
+    this.orgLevel ? "" : this.buildingSlug;
+
+  /**
+   * Org-level webchat: /webchat/init chose the org's triage general building,
+   * so run as a widget for that building from here on (its config, and its
+   * slug for the per-building endpoints). The conversation stays the org-level
+   * one /webchat/init returned. If its config can't be loaded, stay in org mode.
+   */
+  private adoptBuilding = async (buildingSlug: string): Promise<void> => {
+    try {
+      const view = await fetchBuildingWebchatView(this.orgSlug, buildingSlug);
+      if (!view?.id) return;
+      this.buildingSlug = buildingSlug;
+      this.buildingWebchatView = view;
+      this.myPubnub?.adoptBuilding(buildingSlug, view);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn("Error loading the org-level webchat building", e);
+    }
+  };
+
+  /**
+   * Org-level webchat offers no Email or Text Us, and offers Call Us only with
+   * its building's number (the org's triage line).
+   */
+  private withOrgLevelContactOptions = <
+    T extends typeof this.enabledChatWidgets
+  >(
+    widgets: T,
+    callNumber: string
+  ): T => {
+    if (!this.orgLevel) return widgets;
+    return {
+      ...widgets,
+      emailDesktop: false,
+      emailMobile: false,
+      textDesktop: false,
+      textMobile: false,
+      callDesktop: widgets.callDesktop && !!callNumber,
+      callMobile: widgets.callMobile && !!callNumber,
+    };
+  };
+
+  /** 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;
+    try {
+      const view = await fetchBuildingWebchatView(
+        this.orgSlug,
+        this.declaredBuildingSlug
+      );
+      return typeof view?.id === "number" && view.id > 0 ? view.id : null;
+    } catch {
+      return null;
+    }
+  };
+
   private shouldAutoOpenChat = (buildingHasAutoOpen: boolean): boolean => {
     const alreadyAutoOpenedTimestamp = sessionStorage.getItem(
       "alreadyAutoOpenedTimestamp"
@@ -728,7 +857,9 @@ export class MEChat extends LitElement {
 
   public async restartConversation(): Promise<void> {
     this.myPubnub?.handleDisconnect();
-    clearChatStorageKey(this.buildingSlug);
+    clearChatStorageKey(this.chatStorageSlug());
+    // Org-level webchat asks /webchat/init for its building again.
+    if (this.orgLevel) this.buildingSlug = "";
     this.myPubnub = null;
     this.displayPubnubChat = false;
     await this.setupWebchat();
@@ -981,6 +1112,7 @@ export class MEChat extends LitElement {
                   .myPubnub=${this.myPubnub}
                   .orgSlug=${this.orgSlug}
                   .buildingSlug=${this.buildingSlug}
+                  .centralConvo=${this.centralConvo}
                   .widgetType=${WidgetType.Default}
                   .building=${this.buildingWebchatView}
                   .primaryColor=${this.primaryColor}

package/src/WebComponent/pubnub-chat.ts

@@ -6,6 +6,7 @@ import MyPubnub, {
   SimpleMessageTypes,
   SimpleChatMessage,
   isSimpleMediaChatMessage,
+  isSimpleNavigationChatMessage,
   isSimpleTextChatMessage,
 } from "../MyPubnub";
 import {
@@ -21,6 +22,7 @@ import { leasingChatStyles } from "./leasing-chat-styles";
 import { pubnubChatStyles } from "./pubnub-chat-styles";
 import "./pubnub-message";
 import "./pubnub-media";
+import "./pubnub-navigation";
 import classNames from "classnames";
 import { differenceInDays } from "date-fns";
 import { WidgetType } from "../main/MEChat";
@@ -79,6 +81,10 @@ export class PubnubChat extends LitElement {
   @property({ attribute: true })
   buildingSlug: string | undefined;
 
+  /** Org-level webchat, which has no building slug. */
+  @property({ attribute: true })
+  centralConvo = false;
+
   @property({ attribute: true })
   widgetType: WidgetType = WidgetType.Default;
 
@@ -243,7 +249,7 @@ export class PubnubChat extends LitElement {
   };
 
   render(): TemplateResult {
-    if (!this.buildingSlug) {
+    if (!this.buildingSlug && !this.centralConvo) {
       return html``; // error should be here
     }
 
@@ -376,10 +382,14 @@ export class PubnubChat extends LitElement {
                     role="article"
                     aria-label="${message.isLeadMessage
                       ? "You"
-                      : "Elise"}: ${isSimpleTextChatMessage(message)
-                      ? message.message
-                      : "Media message"}"
+                      : "Elise"}: ${messageAriaLabel(message)}"
                   >
+                    ${isSimpleNavigationChatMessage(message)
+                      ? html`<pubnub-navigation
+                          .message=${message}
+                          .onMount=${() => this.scrollToChatBottom()}
+                        ></pubnub-navigation>`
+                      : ""}
                     ${isSimpleMediaChatMessage(message)
                       ? html` <pubnub-media
                           .message=${message}
@@ -551,10 +561,14 @@ export class PubnubChat extends LitElement {
                     role="article"
                     aria-label="${message.isLeadMessage
                       ? "You"
-                      : "Elise"}: ${isSimpleTextChatMessage(message)
-                      ? message.message
-                      : "Media message"}"
+                      : "Elise"}: ${messageAriaLabel(message)}"
                   >
+                    ${isSimpleNavigationChatMessage(message)
+                      ? html`<pubnub-navigation
+                          .message=${message}
+                          .onMount=${() => this.scrollToChatBottom()}
+                        ></pubnub-navigation>`
+                      : ""}
                     ${isSimpleMediaChatMessage(message)
                       ? html` <pubnub-media
                           .message=${message}
@@ -750,10 +764,14 @@ export class PubnubChat extends LitElement {
                   role="article"
                   aria-label="${message.isLeadMessage
                     ? "You"
-                    : "Elise"}: ${isSimpleTextChatMessage(message)
-                    ? message.message
-                    : "Media message"}"
+                    : "Elise"}: ${messageAriaLabel(message)}"
                 >
+                  ${isSimpleNavigationChatMessage(message)
+                    ? html`<pubnub-navigation
+                        .message=${message}
+                        .onMount=${() => this.scrollToChatBottom()}
+                      ></pubnub-navigation>`
+                    : ""}
                   ${isSimpleMediaChatMessage(message)
                     ? html` <pubnub-media
                         .message=${message}
@@ -851,3 +869,11 @@ export class PubnubChat extends LitElement {
     `;
   }
 }
+
+const messageAriaLabel = (message: SimpleChatMessage): string => {
+  if (isSimpleTextChatMessage(message)) return message.message;
+  if (isSimpleNavigationChatMessage(message)) {
+    return `Take me to ${message.navigation.label}`;
+  }
+  return "Media message";
+};