@meetelise/chat 1.20.85 → 1.20.87

package/src/MyPubnub.ts

@@ -3,6 +3,12 @@ import Pubnub, { ListenerParameters, MessageEvent } from "pubnub";
 
 import axios from "axios";
 import { Building } from "./fetchBuildingInfo";
+import parseISO from "date-fns/parseISO";
+import { v4 as uuid } from "uuid";
+import addHours from "date-fns/addHours";
+import isAfter from "date-fns/isAfter";
+import formatISO from "date-fns/formatISO";
+import isBefore from "date-fns/isBefore";
 
 interface TokenResponse {
   auth: {
@@ -27,12 +33,18 @@ export interface ChatMessage {
   timetoken: number;
 }
 
+interface ChatInfo {
+  leadId: string | null;
+  timestamp: Date | null;
+  buildingSlug: string | null;
+}
+
 class MyPubnub {
   private apiHost = "https://app.meetelise.com";
 
   private building: Building | null = null;
   private buildingSlug: string;
-  private orgSlug: string;
+  private ttlHours = 24;
 
   pubnub: Pubnub | null = null;
   leadUserId = "";
@@ -65,12 +77,7 @@ class MyPubnub {
   };
   isLoadingMessages = false;
 
-  constructor(
-    orgSlug: string,
-    buildingSlug: string,
-    buildingDetails: Building
-  ) {
-    this.orgSlug = orgSlug;
+  constructor(buildingSlug: string, buildingDetails: Building) {
     this.buildingSlug = buildingSlug;
     this.building = buildingDetails;
   }
@@ -85,14 +92,28 @@ class MyPubnub {
   }
 
   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);
+    const storedChatKeyValues = this.getChatStorageKey();
+    if (!storedChatKeyValues.leadId) {
+      // eslint-disable-next-line no-console
+      console.error("Error getting chat storage key...");
+      return;
+    }
 
-    this.leadUserId = `lead_${uniqueUserId}_${this.buildingSlug}`;
+    this.leadUserId = storedChatKeyValues.leadId;
     this.channel = `webchat_${this.leadUserId}`;
 
+    // If the user comes back to the page after closing it out, we get a new token to persist
+    //  the chat for another this.ttlHours hours.
+    if (
+      storedChatKeyValues.timestamp &&
+      isAfter(
+        storedChatKeyValues.timestamp,
+        addHours(new Date(), this.ttlHours)
+      )
+    ) {
+      this.createChatStorageKey(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
@@ -221,7 +242,6 @@ class MyPubnub {
             buildingId: this.building?.id,
             buildingSlug: this.buildingSlug,
             userId: this.building?.userId, // this userid is actually the AI user!
-            // leadSource: DEFAULT_LEAD_SOURCE,
           },
         });
       });
@@ -231,6 +251,69 @@ class MyPubnub {
   isLeadMessage = (message: ChatMessage): boolean =>
     message.publisher.includes("lead_") &&
     message.message.customType === "lead_message";
+
+  createChatStorageKey = (existingUserId?: string): ChatInfo => {
+    const storageTimestamp = formatISO(new Date());
+    const leadUserId = existingUserId ?? `lead_${uuid()}_${this.buildingSlug}`;
+    localStorage.setItem(
+      "com.eliseai.webchat.slug=" + this.buildingSlug,
+      JSON.stringify({
+        buildingSlug: this.buildingSlug,
+        leadId: leadUserId,
+        timestamp: storageTimestamp,
+      })
+    );
+    return {
+      leadId: leadUserId,
+      timestamp: parseISO(storageTimestamp),
+      buildingSlug: this.buildingSlug,
+    };
+  };
+  getChatStorageKey = (): ChatInfo => {
+    const eliseaiLocalStorageValue = localStorage.getItem(
+      "com.eliseai.webchat.slug=" + this.buildingSlug
+    );
+    if (eliseaiLocalStorageValue) {
+      try {
+        const eliseaiLocalStorageValueParsed = JSON.parse(
+          eliseaiLocalStorageValue
+        );
+        const lsBuildingSlug = eliseaiLocalStorageValueParsed.buildingSlug;
+        const lsLeadId = eliseaiLocalStorageValueParsed.leadId;
+        const lsExpiration = new Date(eliseaiLocalStorageValueParsed.timestamp);
+
+        if (
+          this.isChatKeyValid({
+            leadId: lsLeadId,
+            timestamp: lsExpiration,
+            buildingSlug: lsBuildingSlug,
+          })
+        )
+          return {
+            leadId: lsLeadId,
+            timestamp: lsExpiration,
+            buildingSlug: lsBuildingSlug,
+          };
+      } catch (_) {
+        // eslint-disable-next-line no-console
+        console.warn("Error getting chat storage key");
+      }
+    }
+
+    return this.createChatStorageKey();
+  };
+  isChatKeyValid = (storageValueDeconstructed: ChatInfo): boolean => {
+    if (
+      storageValueDeconstructed.buildingSlug !== this.buildingSlug ||
+      !storageValueDeconstructed.leadId ||
+      !storageValueDeconstructed.timestamp
+    ) {
+      return false;
+    }
+
+    const expirationDate = addHours(new Date(), this.ttlHours);
+    return isBefore(storageValueDeconstructed.timestamp, expirationDate);
+  };
 }
 
 export default MyPubnub;

package/src/WebComponent/me-chat.ts

@@ -400,30 +400,35 @@ export class MEChat extends LitElement {
     (talkjsPopupElement as HTMLElement).style.zIndex = "99999999999";
     this.popup = popup;
 
-    if (this.shouldAutoOpenChatWidget(building.autoOpenChatWidget)) {
+    if (this.shouldAutoOpenChat(building.autoOpenChatWidget)) {
       this.popup.show();
       this.hideLauncher = true;
       this.hasMounted = true;
-      sessionStorage.setItem(
-        "autoOpenedTimestamp",
-        formatISO(addMinutes(new Date(), 15))
-      );
+      this.updateAlreadyAutoOpenedTimestamp();
       this.analytics?.ping("autoOpen");
     }
   };
 
-  private shouldAutoOpenChatWidget = (
-    buildingHasAutoOpen: boolean
-  ): boolean => {
-    const autoOpenedTimestamp = sessionStorage.getItem("autoOpenedTimestamp");
+  private shouldAutoOpenChat = (buildingHasAutoOpen: boolean): boolean => {
+    const alreadyAutoOpenedTimestamp = sessionStorage.getItem(
+      "alreadyAutoOpenedTimestamp"
+    ); // we dont want to autoopen on EVERY single page load, so we'll only do it once every 15 minutes max
     const shouldAutoOpen =
-      !autoOpenedTimestamp ||
-      (autoOpenedTimestamp && isPast(parseISO(autoOpenedTimestamp)));
-    if (buildingHasAutoOpen && shouldAutoOpen && !isMobile()) {
-      return true;
-    }
-    return false;
+      !alreadyAutoOpenedTimestamp ||
+      !(
+        alreadyAutoOpenedTimestamp &&
+        !isPast(parseISO(alreadyAutoOpenedTimestamp))
+      );
+    return !!buildingHasAutoOpen && !!shouldAutoOpen && !isMobile();
   };
+
+  private updateAlreadyAutoOpenedTimestamp = (): void => {
+    sessionStorage.setItem(
+      "alreadyAutoOpenedTimestamp",
+      formatISO(addMinutes(new Date(), 15))
+    );
+  };
+
   /**
    * Remove the instance from the screen.
    *
@@ -479,22 +484,16 @@ export class MEChat extends LitElement {
     await this.setBuildingDerivedInfo();
     if (!this.building) return;
 
-    const pubnubRaw = new MyPubnub(
-      this.orgSlug,
-      this.buildingSlug,
-      this.building
-    );
-    await pubnubRaw.initializePubnub();
-    this.myPubnub = pubnubRaw;
+    this.myPubnub = new MyPubnub(this.buildingSlug, this.building);
+    if (this.myPubnub.isChatKeyValid(this.myPubnub.getChatStorageKey())) {
+      await this.myPubnub.initializePubnub();
+    }
     this.attachOnClickToLauncher();
-    if (this.shouldAutoOpenChatWidget(this.building.autoOpenChatWidget)) {
+    if (this.shouldAutoOpenChat(this.building.autoOpenChatWidget)) {
       this.displayPubnubChat = true;
       this.hideLauncher = true;
       this.hasMounted = true;
-      sessionStorage.setItem(
-        "autoOpenedTimestamp",
-        formatISO(addMinutes(new Date(), 15))
-      );
+      this.updateAlreadyAutoOpenedTimestamp();
     }
     this.isLoading = false;
   };
@@ -589,13 +588,11 @@ export class MEChat extends LitElement {
         </div>
 
         ${
-          this.chatProvider === ChatProviders.PUBNUB &&
-          this.displayPubnubChat &&
-          this.myPubnub
+          this.chatProvider === ChatProviders.PUBNUB && this.displayPubnubChat
             ? html`
                 <pubnub-chat
                   id="pubnub-chat"
-                  .channel=${this.myPubnub.channel}
+                  .channel=${this.myPubnub?.channel}
                   .myPubnub=${this.myPubnub}
                   .buildingSlug=${this.buildingSlug}
                   .building=${this.building}
@@ -607,6 +604,7 @@ export class MEChat extends LitElement {
                   .onMount=${() => {
                     this.adjustTopHeaderContactCoords();
                   }}
+                  .isMobile=${this.isMobile}
                 ></pubnub-chat>
                 ${this.renderChatAdditionalActions(
                   "chatAdditionalActionsPubnub",

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

@@ -3,22 +3,33 @@ import { css } from "lit";
 export const pubnubChatStyles = css`
   #pubnub-chat-container {
     position: fixed;
-    right: 0px;
-    bottom: 110px;
+
     z-index: 100000;
     display: flex;
     align-items: center;
 
-    width: 340px;
-    height: 600px;
-
     display: flex;
     flex-direction: column;
-    border-radius: 24px 24px 0px 24px;
     overflow: hidden;
 
     box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
       rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+
+    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+  }
+  .pubnub-container__mobile {
+    right: 0px;
+    bottom: 0px;
+    width: 100%;
+    height: 100%;
+    border-radius: 0px;
+  }
+  .pubnub-container__desktop {
+    right: 0px;
+    bottom: 110px;
+    width: 340px;
+    height: 600px;
+    border-radius: 24px 24px 0px 24px;
   }
   #header {
     height: 70px;
@@ -37,7 +48,6 @@ export const pubnubChatStyles = css`
   #header-text {
     font-size: 14px;
     font-weight: bold;
-    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
   }
   #exit-chat-bttn {
     display: flex;
@@ -66,6 +76,11 @@ export const pubnubChatStyles = css`
     position: relative;
     padding: 0px 16px;
     gap: 16px;
+    list-style: none;
+  }
+
+  .disclaimer-message {
+    font-size: 12px;
   }
 
   .message-container {
@@ -93,8 +108,7 @@ export const pubnubChatStyles = css`
     word-break: break-word;
     margin: 0;
     padding: 6px 12px;
-    line-height: 150%;
-    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+    line-height: 130%;
   }
 
   .loading-dot {
@@ -157,7 +171,6 @@ export const pubnubChatStyles = css`
     border: none;
     color: white;
     background: none;
-    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
   }
   #message-input:focus {
     outline: none;

package/src/WebComponent/pubnub-chat.ts

@@ -1,5 +1,6 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { Building } from "../fetchBuildingInfo";
 import MyPubnub, { ChatMessage } from "../MyPubnub";
@@ -42,6 +43,9 @@ export class PubnubChat extends LitElement {
   @state()
   messages: ChatMessage[] = [];
 
+  @state()
+  isMobile = false;
+
   @state()
   isLoadingMessages = false;
 
@@ -71,23 +75,24 @@ export class PubnubChat extends LitElement {
   }
 
   render(): TemplateResult {
-    if (
-      !this.channel ||
-      !this.myPubnub ||
-      !this.buildingSlug ||
-      !this.building
-    ) {
+    if (!this.buildingSlug || !this.building) {
       return html``; // error here
     }
     return html`
-      <div id="pubnub-chat-container">
+      <div
+        id="pubnub-chat-container"
+        class=${classMap({
+          ["pubnub-container__mobile"]: this.isMobile,
+          ["pubnub-container__desktop"]: !this.isMobile,
+        })}
+      >
         <div
           id="header"
           style=${styleMap({
             background:
               this.brandColor !== defaultBrandColor
                 ? hexToAlmostWhite(this.brandColor, 0.6)
-                : this.brandColor,
+                : undefined,
           })}
         >
           <div id="header-text">${this.building.name}</div>
@@ -97,6 +102,11 @@ export class PubnubChat extends LitElement {
         </div>
         <div id="conversation-body">
           <ul id="message-thread-list">
+            <li class="message-container disclaimer-message">
+              By interacting with this system, you acknowledge that EliseAI may
+              log and retain any actions that you take and information that you
+              provide. Replies may be computer or human-generated.
+            </li>
             ${this.building.welcomeMessage
               ? html` <li class="message-container ai-message">
                   <p class="message-text">${this.building.welcomeMessage}</p>