@meetelise/chat 1.20.84 → 1.20.85

package/public/dist/index.js.LICENSE.txt

@@ -10,6 +10,23 @@ object-assign
   http://jedwatson.github.io/classnames
 */
 
+/*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+/*! lil-uuid - v0.1 - MIT License - https://github.com/lil-js/uuid */
+
 /**
  * @license
  * Copyright 2017 Google LLC

package/src/MyPubnub.ts

@@ -0,0 +1,236 @@
+import { AxiosError } from "axios";
+import Pubnub, { ListenerParameters, MessageEvent } from "pubnub";
+
+import axios from "axios";
+import { Building } from "./fetchBuildingInfo";
+
+interface TokenResponse {
+  auth: {
+    result: {
+      token: string;
+    };
+  };
+  keys: {
+    subscribe_key: string;
+    publish_key: string;
+  };
+}
+
+export interface ChatMessage {
+  channel: string;
+  message: {
+    text: string;
+    customType: string;
+  };
+  publisher: string;
+  subscription: string;
+  timetoken: number;
+}
+
+class MyPubnub {
+  private apiHost = "https://app.meetelise.com";
+
+  private building: Building | null = null;
+  private buildingSlug: string;
+  private orgSlug: string;
+
+  pubnub: Pubnub | null = null;
+  leadUserId = "";
+  channel = "";
+
+  chatListener:
+    | ((res: { messages: ChatMessage[]; isLoading: boolean }) => void)
+    | null = null;
+
+  messages: ChatMessage[] = [];
+  listenerParams: ListenerParameters = {
+    message: (messageEvent: MessageEvent) => {
+      this.messages = [
+        ...this.messages,
+        {
+          channel: messageEvent.channel,
+          message: messageEvent.message,
+          publisher: messageEvent.publisher,
+          subscription: messageEvent.subscription,
+          timetoken: +messageEvent.timetoken,
+        },
+      ];
+      const isWaitingForEliseResponse = messageEvent.publisher !== "eliseai";
+      this.chatListener?.({
+        messages: this.messages,
+        isLoading: isWaitingForEliseResponse,
+      });
+      this.isLoadingMessages = isWaitingForEliseResponse;
+    },
+  };
+  isLoadingMessages = false;
+
+  constructor(
+    orgSlug: string,
+    buildingSlug: string,
+    buildingDetails: Building
+  ) {
+    this.orgSlug = orgSlug;
+    this.buildingSlug = buildingSlug;
+    this.building = buildingDetails;
+  }
+
+  addChatListener(
+    listener: (response: {
+      messages: ChatMessage[];
+      isLoading: boolean;
+    }) => void
+  ): void {
+    this.chatListener = listener;
+  }
+
+  async initializePubnub(): Promise<Pubnub | undefined> {
+    //const currentChatId = getChatID(this.orgSlug, this.buildingSlug);
+    const existingUserId = localStorage.getItem("_uetsid"); // apartments.com user_id
+    const uniqueUserId =
+      existingUserId ?? Math.floor(Math.random() * 1000000000);
+
+    this.leadUserId = `lead_${uniqueUserId}_${this.buildingSlug}`;
+    this.channel = `webchat_${this.leadUserId}`;
+
+    const pubnubToken = await this.fetchToken(this.leadUserId, this.channel);
+
+    // These keys are OK to expose live, the authKey generated by the BE is what
+    // is used to authenticate the user. Ideally, should also add rate limiting
+    // and/or IP whitelisting to the BE endpoint that generates the token.
+    this.pubnub = new Pubnub({
+      publishKey: pubnubToken.keys.publish_key,
+      subscribeKey: pubnubToken.keys.subscribe_key,
+      userId: this.leadUserId,
+      authKey: pubnubToken.auth.result.token,
+    });
+    this.withAuthToken(() => new Promise(() => this.handleChatListeners()));
+    await this.withAuthToken(() => this.getChannelHistory());
+    return this.pubnub;
+  }
+  async fetchToken(lead: string, channel: string): Promise<TokenResponse> {
+    const response = await axios.get(
+      `${this.apiHost}/platformApi/webchat/pn/request-token?user_id=${lead}&channel=${channel}`
+    );
+    return response.data;
+  }
+  async fetchChannelExists(channel: string): Promise<boolean> {
+    const response = await axios.get(
+      `${this.apiHost}/platformApi/webchat/check-channel-exists?channel_name=${channel}`
+    );
+    return response.data;
+  }
+
+  async withAuthToken(apiRequestFunc: () => Promise<void>): Promise<void> {
+    try {
+      await apiRequestFunc();
+    } catch (error: unknown) {
+      // only want to retry with new token if the error is a 403
+      if (
+        error instanceof AxiosError &&
+        error &&
+        error.response &&
+        error.response.status === 403
+      ) {
+        try {
+          if (!this.pubnub || !this.leadUserId || !this.channel) return;
+
+          const newToken = await this.fetchToken(this.leadUserId, this.channel);
+          if (!newToken) return;
+
+          this.pubnub.setAuthKey(newToken.auth.result.token);
+
+          await apiRequestFunc();
+        } catch (retryError) {
+          //onsole.error(retryError);
+        }
+      }
+    }
+  }
+
+  async getChannelHistory(): Promise<void> {
+    try {
+      const response: Pubnub.FetchMessagesResponse = await new Promise(
+        (resolve, reject) => {
+          if (!this.pubnub || !this.channel) return;
+          this.pubnub.fetchMessages(
+            {
+              channels: [this.channel],
+              count: 100,
+            },
+            (status, response) => {
+              if (status.error) {
+                reject(status);
+              } else {
+                resolve(response);
+              }
+            }
+          );
+        }
+      );
+
+      if (this.channel && Object.keys(response.channels).length !== 0) {
+        const currentChannelMessages = response.channels[this.channel];
+        const parsedCurrentChannelMessages: ChatMessage[] = [];
+        currentChannelMessages.forEach((message) => {
+          if (message.uuid) {
+            parsedCurrentChannelMessages.push({
+              channel: message.channel,
+              message: message.message,
+              publisher: message.uuid,
+              subscription: message.channel,
+              timetoken: +message.timetoken,
+            });
+          }
+        });
+        this.messages = parsedCurrentChannelMessages;
+        this.chatListener?.({ messages: this.messages, isLoading: false });
+      }
+    } catch (error) {
+      // Handle the error here
+    }
+  }
+
+  handleChatListeners = (): void => {
+    if (!this.pubnub || !this.channel) return;
+    this.pubnub.subscribe({ channels: [this.channel] });
+    this.pubnub.addListener(this.listenerParams);
+  };
+  removeChatListeners = (): void => {
+    if (this.pubnub && this.channel) {
+      this.pubnub.unsubscribe({ channels: [this.channel] });
+      this.pubnub.removeListener(this.listenerParams);
+    }
+  };
+
+  sendMessage = async (message: string): Promise<void> => {
+    if (message) {
+      if (!this.pubnub) {
+        // ONLY create/gets a chat session if user actually wants to chat
+        const myPubnub = await this.initializePubnub();
+        if (!myPubnub) return;
+      }
+
+      await this.withAuthToken(async () => {
+        if (!this.pubnub || !this.channel) return;
+        await this.pubnub.publish({
+          channel: this.channel,
+          message: {
+            text: message,
+            customType: "lead_message",
+            buildingId: this.building?.id,
+            buildingSlug: this.buildingSlug,
+            userId: this.building?.userId, // this userid is actually the AI user!
+            // leadSource: DEFAULT_LEAD_SOURCE,
+          },
+        });
+      });
+      if (this.isLoadingMessages === false) this.isLoadingMessages = true;
+    }
+  };
+  isLeadMessage = (message: ChatMessage): boolean =>
+    message.publisher.includes("lead_") &&
+    message.message.customType === "lead_message";
+}
+
+export default MyPubnub;

package/src/WebComponent/me-chat.ts

@@ -13,6 +13,7 @@ import {
   FeatureFlagsShowDropdown,
   fetchFeatureFlagShowMarketingSourceDropdown,
   fetchFeatureFlagUsePhoneNumberBySource,
+  fetchFeatureFlagUsePubnub,
 } from "../fetchFeatureFlag";
 import fetchWebchatPreferences, {
   DesignConcepts,
@@ -37,10 +38,16 @@ import addMinutes from "date-fns/addMinutes";
 import formatISO from "date-fns/formatISO";
 import fetchLeadSources from "../fetchLeadSources";
 import { formatPhoneNumber } from "./actions/formatPhoneNumber";
+import MyPubnub from "../MyPubnub";
 
 import "./actions/minimize-expand-button";
 import "./launcher/mobile-launcher";
+import "./pubnub-chat";
 
+enum ChatProviders {
+  TALKJS = "talkjs",
+  PUBNUB = "pubnub",
+}
 @customElement("me-chat")
 export class MEChat extends LitElement {
   static styles = css`
@@ -66,7 +73,8 @@ export class MEChat extends LitElement {
       justify-content: space-between;
       gap: 32px;
     }
-    #chatAdditionalActions {
+    #chatAdditionalActionsTalkjs,
+    #chatAdditionalActionsPubnub {
       position: fixed;
       box-sizing: border-box;
 
@@ -78,7 +86,8 @@ export class MEChat extends LitElement {
 
       z-index: 1000000000;
     }
-    #chatAdditionalActions::after {
+    #chatAdditionalActionsPubnub::after,
+    #chatAdditionalActionsTalkjs::after {
       content: "";
       position: absolute;
       top: -6px;
@@ -88,6 +97,10 @@ export class MEChat extends LitElement {
       border-bottom: 22px solid transparent;
       border-right: 30px solid black;
     }
+    #pubnub-bottom {
+      position: fixed;
+      bottom: 0;
+    }
   `;
   @property({ type: String })
   private buildingSlug = "";
@@ -147,6 +160,15 @@ export class MEChat extends LitElement {
   @state()
   private talkjsPopupElement: Element | null = null;
 
+  @state()
+  private chatProvider: ChatProviders = ChatProviders.TALKJS;
+
+  @state()
+  private displayPubnubChat = false;
+
+  @state()
+  private myPubnub: MyPubnub | null = null;
+
   private yardiDNIScriptInterval: NodeJS.Timer | null = null;
   launcherRef: Ref<Launcher> = createRef();
 
@@ -378,11 +400,7 @@ export class MEChat extends LitElement {
     (talkjsPopupElement as HTMLElement).style.zIndex = "99999999999";
     this.popup = popup;
 
-    const autoOpenedTimestamp = sessionStorage.getItem("autoOpenedTimestamp");
-    const shouldAutoOpen =
-      !autoOpenedTimestamp ||
-      (autoOpenedTimestamp && isPast(parseISO(autoOpenedTimestamp)));
-    if (building.autoOpenChatWidget && shouldAutoOpen && !isMobile()) {
+    if (this.shouldAutoOpenChatWidget(building.autoOpenChatWidget)) {
       this.popup.show();
       this.hideLauncher = true;
       this.hasMounted = true;
@@ -394,6 +412,18 @@ export class MEChat extends LitElement {
     }
   };
 
+  private shouldAutoOpenChatWidget = (
+    buildingHasAutoOpen: boolean
+  ): boolean => {
+    const autoOpenedTimestamp = sessionStorage.getItem("autoOpenedTimestamp");
+    const shouldAutoOpen =
+      !autoOpenedTimestamp ||
+      (autoOpenedTimestamp && isPast(parseISO(autoOpenedTimestamp)));
+    if (buildingHasAutoOpen && shouldAutoOpen && !isMobile()) {
+      return true;
+    }
+    return false;
+  };
   /**
    * Remove the instance from the screen.
    *
@@ -432,26 +462,70 @@ export class MEChat extends LitElement {
     this.launcher.style.display = "none";
   }
 
-  firstUpdated = (): void => {
-    this.initializeInstanceVariables();
+  firstUpdated = async (): Promise<void> => {
+    const usePubnubProviderFlag = await fetchFeatureFlagUsePubnub(
+      this.buildingSlug
+    );
+
+    if (usePubnubProviderFlag) {
+      this.chatProvider = ChatProviders.PUBNUB;
+      this.initializePubnubVariables();
+    } else {
+      this.initializeInstanceVariables();
+    }
+  };
+
+  initializePubnubVariables = async (): Promise<void> => {
+    await this.setBuildingDerivedInfo();
+    if (!this.building) return;
+
+    const pubnubRaw = new MyPubnub(
+      this.orgSlug,
+      this.buildingSlug,
+      this.building
+    );
+    await pubnubRaw.initializePubnub();
+    this.myPubnub = pubnubRaw;
+    this.attachOnClickToLauncher();
+    if (this.shouldAutoOpenChatWidget(this.building.autoOpenChatWidget)) {
+      this.displayPubnubChat = true;
+      this.hideLauncher = true;
+      this.hasMounted = true;
+      sessionStorage.setItem(
+        "autoOpenedTimestamp",
+        formatISO(addMinutes(new Date(), 15))
+      );
+    }
+    this.isLoading = false;
   };
 
   handleContactClicked = (e: MouseEvent): void => {
-    this.popup?.hide();
+    if (this.chatProvider === ChatProviders.TALKJS) {
+      this.popup?.hide();
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      this.displayPubnubChat = false;
+    }
     this.hideLauncher = false;
 
     this.launcherRef.value?.onClickEmailOption(e);
   };
 
   handleTourClicked = (e: MouseEvent): void => {
-    this.popup?.hide();
+    if (this.chatProvider === ChatProviders.TALKJS) {
+      this.popup?.hide();
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      this.displayPubnubChat = false;
+    }
     this.hideLauncher = false;
-
     this.launcherRef.value?.onClickSSTOption(e);
   };
 
   handleContactTabClicked = (e: MouseEvent): void => {
-    this.popup?.hide();
+    if (this.chatProvider === ChatProviders.TALKJS) {
+      this.popup?.hide();
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      this.displayPubnubChat = false;
+    }
     this.hideLauncher = false;
 
     this.launcherRef.value?.onClickPhoneOption(e);
@@ -461,14 +535,25 @@ export class MEChat extends LitElement {
   //  For the top header contact, we change its pos based on the current x and y
   //  of the talkjs popup - so we must adjust its coords on resize and mount
   adjustTopHeaderContactCoords = (): void => {
-    if (this.talkjsPopupElement) {
+    const headerRef = this.shadowRoot?.getElementById(
+      this.chatProvider === ChatProviders.TALKJS
+        ? "chatAdditionalActionsTalkjs"
+        : "chatAdditionalActionsPubnub"
+    );
+    if (!headerRef) return;
+    if (this.chatProvider === ChatProviders.TALKJS && this.talkjsPopupElement) {
       const talkjsPopupCoords = this.talkjsPopupElement.getBoundingClientRect();
-      const headerRef = this.shadowRoot?.getElementById(
-        "chatAdditionalActions"
-      );
-      if (!headerRef) return;
       headerRef.style.left = `${talkjsPopupCoords.left + 20}px`;
       headerRef.style.top = `${talkjsPopupCoords.bottom - 24}px`;
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      const pubnubContainerElement = this.shadowRoot
+        ?.getElementById("pubnub-chat")
+        ?.shadowRoot?.getElementById("pubnub-chat-container");
+
+      const pubnubPopupCoords = pubnubContainerElement?.getBoundingClientRect();
+      if (!pubnubPopupCoords) return;
+      headerRef.style.left = `${pubnubPopupCoords.left}px`;
+      headerRef.style.top = `${pubnubPopupCoords.bottom}px`;
     }
   };
   connectedCallback(): void {
@@ -476,6 +561,7 @@ export class MEChat extends LitElement {
     window.addEventListener("resize", this.adjustTopHeaderContactCoords);
   }
   disconnectedCallback(): void {
+    this.myPubnub?.removeChatListeners();
     window.removeEventListener("resize", this.adjustTopHeaderContactCoords);
     super.disconnectedCallback();
   }
@@ -501,6 +587,34 @@ export class MEChat extends LitElement {
           EliseAI widget that allows you to chat with a virtual assistant, book
           a tour, contact the leasing office, and more.
         </div>
+
+        ${
+          this.chatProvider === ChatProviders.PUBNUB &&
+          this.displayPubnubChat &&
+          this.myPubnub
+            ? html`
+                <pubnub-chat
+                  id="pubnub-chat"
+                  .channel=${this.myPubnub.channel}
+                  .myPubnub=${this.myPubnub}
+                  .buildingSlug=${this.buildingSlug}
+                  .building=${this.building}
+                  .brandColor=${this.brandColor}
+                  .onClickExit=${() => {
+                    this.displayPubnubChat = false;
+                    this.hideLauncher = false;
+                  }}
+                  .onMount=${() => {
+                    this.adjustTopHeaderContactCoords();
+                  }}
+                ></pubnub-chat>
+                ${this.renderChatAdditionalActions(
+                  "chatAdditionalActionsPubnub",
+                  showChatAdditionalActions
+                )}
+              `
+            : ""
+        }
         <div
           class=${classMap({
             launcherContainer: true,
@@ -568,54 +682,65 @@ export class MEChat extends LitElement {
           }
           
         </div>
-        <div
-          id="chatAdditionalActions"
-          class=${classMap({
-            ["showTab"]: showChatAdditionalActions,
-            ["hideTab"]: !showChatAdditionalActions,
-          })}
-        >
-          <mobile-launcher
-          .onClickMinimize=${this.onClickMinimize}
-          .onClickEmailOption=${this.handleContactClicked}
-          .onClickPhoneOption=${this.handleContactTabClicked}
-          .onClickSSTOption=${this.handleTourClicked}
-          .isMobile=${this.isMobile}
-          .brandColor=${this.brandColor}
-          .hideChat=${true}
-          .hasChatEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("CHAT")
-          }
-          .hasEmailEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("EMAIL")
-          }
-          .hasCallUsEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("CALL")
-          }
-          .hasSSTEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("SST")
-          }
-        ></mobile-launcher>
-         <minimize-expand-button 
-          .brandColor=${this.brandColor}
-          .onClick=${() => {
-            this.popup?.hide();
-            this.hideLauncher = false;
-          }}
-         ></minimize-expand-button>
-        </div>
+        ${
+          this.chatProvider === ChatProviders.TALKJS
+            ? this.renderChatAdditionalActions(
+                "chatAdditionalActionsTalkjs",
+                showChatAdditionalActions
+              )
+            : ""
+        }
+        
       </meta>
     `;
   }
 
+  private renderChatAdditionalActions = (
+    id: string,
+    showChatAdditionalActions: boolean
+  ): TemplateResult => {
+    return html` <div
+      id=${id}
+      class=${classMap({
+        ["showTab"]: showChatAdditionalActions,
+        ["hideTab"]: !showChatAdditionalActions,
+      })}
+    >
+      <mobile-launcher
+        .onClickMinimize=${this.onClickMinimize}
+        .onClickEmailOption=${this.handleContactClicked}
+        .onClickPhoneOption=${this.handleContactTabClicked}
+        .onClickSSTOption=${this.handleTourClicked}
+        .isMobile=${this.isMobile}
+        .brandColor=${this.brandColor}
+        .hideChat=${true}
+        .hasChatEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("CHAT")}
+        .hasEmailEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("EMAIL")}
+        .hasCallUsEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("CALL")}
+        .hasSSTEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("SST")}
+      ></mobile-launcher>
+      <minimize-expand-button
+        .brandColor=${this.brandColor}
+        .onClick=${() => {
+          if (this.chatProvider === ChatProviders.PUBNUB) {
+            this.displayPubnubChat = false;
+          } else if (this.chatProvider === ChatProviders.TALKJS) {
+            this.popup?.hide();
+          }
+          this.hideLauncher = false;
+        }}
+      ></minimize-expand-button>
+    </div>`;
+  };
+
   private attachOnClickToLauncher = () => {
     const launcher = this.launcherRef.value;
     if (!launcher) {
@@ -623,12 +748,13 @@ export class MEChat extends LitElement {
     }
 
     launcher.onChatTapped = async () => {
-      if (!this.popup) {
-        return;
+      if (this.chatProvider === ChatProviders.PUBNUB) {
+        this.displayPubnubChat = true;
+      } else if (this.chatProvider === ChatProviders.TALKJS) {
+        if (!this.popup) return;
+        this.popup.show();
+        this.analytics?.ping("open");
       }
-
-      this.popup.show();
-      this.analytics?.ping("open");
       this.hideLauncher = true;
       this.hasMounted = true;
     };