@meetelise/chat 1.20.90 → 1.20.92

package/src/MyPubnub.ts

@@ -9,6 +9,7 @@ import addHours from "date-fns/addHours";
 import isAfter from "date-fns/isAfter";
 import formatISO from "date-fns/formatISO";
 import isBefore from "date-fns/isBefore";
+import { LogType, sendLoggingEvent } from "./analytics";
 
 interface TokenResponse {
   auth: {
@@ -44,8 +45,11 @@ class MyPubnub {
 
   private building: Building | null = null;
   private buildingSlug: string;
+  private orgSlug: string;
   private ttlHours = 24;
 
+  private eliseResponseTimeout: NodeJS.Timeout | null = null;
+
   pubnub: Pubnub | null = null;
   leadUserId = "";
   channel = "";
@@ -72,14 +76,22 @@ class MyPubnub {
         messages: this.messages,
         isLoading: isWaitingForEliseResponse,
       });
+      if (!isWaitingForEliseResponse && this.eliseResponseTimeout) {
+        clearTimeout(this.eliseResponseTimeout);
+      }
       this.isLoadingMessages = isWaitingForEliseResponse;
     },
   };
   isLoadingMessages = false;
 
-  constructor(buildingSlug: string, buildingDetails: Building) {
+  constructor(
+    buildingSlug: string,
+    buildingDetails: Building,
+    orgSlug: string
+  ) {
     this.buildingSlug = buildingSlug;
     this.building = buildingDetails;
+    this.orgSlug = orgSlug;
   }
 
   addChatListener(
@@ -95,7 +107,17 @@ class MyPubnub {
     const storedChatKeyValues = this.getChatStorageKey();
     if (!storedChatKeyValues.leadId) {
       // eslint-disable-next-line no-console
-      console.error("Error getting chat storage key...");
+      sendLoggingEvent({
+        logTitle: "PUBNUB_ERROR_FETCHING_STORAGE_KEY",
+        logData: {
+          channel: this.channel,
+          eliseaiLocalStorageValue: storedChatKeyValues,
+          leadUserId: this.leadUserId,
+        },
+        logType: LogType.warn,
+        buildingSlug: this.buildingSlug,
+        orgSlug: this.orgSlug,
+      });
       return;
     }
 
@@ -115,6 +137,7 @@ class MyPubnub {
     }
 
     const pubnubToken = await this.fetchToken(this.leadUserId, this.channel);
+    if (!pubnubToken) return;
 
     // 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
@@ -129,17 +152,42 @@ class MyPubnub {
     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 fetchToken(
+    lead: string,
+    channel: string
+  ): Promise<TokenResponse | null> {
+    try {
+      const response = await axios.get(
+        `${this.apiHost}/platformApi/webchat/pn/request-token?user_id=${lead}&channel=${channel}`
+      );
+      return response.data;
+    } catch (error) {
+      sendLoggingEvent({
+        logTitle: "PUBNUB_ERROR_FETCHING_TOKEN",
+        logData: { error },
+        logType: LogType.error,
+        buildingSlug: this.buildingSlug,
+        orgSlug: this.orgSlug,
+      });
+    }
+    return null;
   }
   async fetchChannelExists(channel: string): Promise<boolean> {
-    const response = await axios.get(
-      `${this.apiHost}/platformApi/webchat/check-channel-exists?channel_name=${channel}`
-    );
-    return response.data;
+    try {
+      const response = await axios.get(
+        `${this.apiHost}/platformApi/webchat/check-channel-exists?channel_name=${channel}`
+      );
+      return response.data;
+    } catch (error) {
+      sendLoggingEvent({
+        logTitle: "PUBNUB_ERROR_FETCHING_CHANNEL_EXISTS",
+        logData: { error },
+        logType: LogType.error,
+        buildingSlug: this.buildingSlug,
+        orgSlug: this.orgSlug,
+      });
+    }
+    return false;
   }
 
   async withAuthToken(apiRequestFunc: () => Promise<void>): Promise<void> {
@@ -163,7 +211,15 @@ class MyPubnub {
 
           await apiRequestFunc();
         } catch (retryError) {
-          //onsole.error(retryError);
+          sendLoggingEvent({
+            logTitle: "PUBNUB_ERROR_REFETCHING_TOKEN",
+            logData: {
+              retryError,
+            },
+            logType: LogType.error,
+            buildingSlug: this.buildingSlug,
+            orgSlug: this.orgSlug,
+          });
         }
       }
     }
@@ -181,6 +237,17 @@ class MyPubnub {
             },
             (status, response) => {
               if (status.error) {
+                sendLoggingEvent({
+                  logTitle: "PUBNUB_ERROR_FETCHING_HISTORY",
+                  logData: {
+                    channel: this.channel,
+                    status: status,
+                    response: response,
+                  },
+                  logType: LogType.error,
+                  buildingSlug: this.buildingSlug,
+                  orgSlug: this.orgSlug,
+                });
                 reject(status);
               } else {
                 resolve(response);
@@ -208,14 +275,35 @@ class MyPubnub {
         this.chatListener?.({ messages: this.messages, isLoading: false });
       }
     } catch (error) {
-      // Handle the error here
+      sendLoggingEvent({
+        logTitle: "PUBNUB_ERROR_FETCHING_HISTORY",
+        logData: { error },
+        logType: LogType.error,
+        buildingSlug: this.buildingSlug,
+        orgSlug: this.orgSlug,
+      });
     }
   }
 
   handleChatListeners = (): void => {
     if (!this.pubnub || !this.channel) return;
-    this.pubnub.subscribe({ channels: [this.channel] });
-    this.pubnub.addListener(this.listenerParams);
+    try {
+      this.pubnub.subscribe({ channels: [this.channel] });
+      this.pubnub.addListener(this.listenerParams);
+    } catch (error) {
+      sendLoggingEvent({
+        logTitle: "PUBNUB_ERROR_ADDING_LISTENER",
+        logData: {
+          error,
+          channel: this.channel,
+          leadUserId: this.leadUserId,
+          website: location.href,
+        },
+        logType: LogType.error,
+        buildingSlug: this.buildingSlug,
+        orgSlug: this.orgSlug,
+      });
+    }
   };
   removeChatListeners = (): void => {
     if (this.pubnub && this.channel) {
@@ -234,6 +322,23 @@ class MyPubnub {
 
       await this.withAuthToken(async () => {
         if (!this.pubnub || !this.channel) return;
+
+        this.eliseResponseTimeout = setTimeout(() => {
+          // eslint-disable-next-line no-console
+          console.error("Elise AI did not respond in time...");
+          sendLoggingEvent({
+            logTitle: "PUBNUB_ERROR_ELISEAI_MESSAGE_TIMEOUT",
+            logData: {
+              channel: this.channel,
+              leadUserId: this.leadUserId,
+              message,
+            },
+            logType: LogType.error,
+            buildingSlug: this.buildingSlug,
+            orgSlug: this.orgSlug,
+          });
+        }, 30000); // if after 30 seconds, no message - we log error
+
         await this.pubnub.publish({
           channel: this.channel,
           message: {
@@ -269,7 +374,7 @@ class MyPubnub {
       buildingSlug: this.buildingSlug,
     };
   };
-  getChatStorageKey = (): ChatInfo => {
+  getChatStorageKey = (createNewIfNotExist = true): ChatInfo => {
     const eliseaiLocalStorageValue = localStorage.getItem(
       "com.eliseai.webchat.slug=" + this.buildingSlug
     );
@@ -300,7 +405,12 @@ class MyPubnub {
       }
     }
 
-    return this.createChatStorageKey();
+    if (createNewIfNotExist) return this.createChatStorageKey();
+    return {
+      leadId: null,
+      timestamp: null,
+      buildingSlug: null,
+    };
   };
   isChatKeyValid = (storageValueDeconstructed: ChatInfo): boolean => {
     if (

package/src/WebComponent/me-chat.ts

@@ -484,9 +484,20 @@ export class MEChat extends LitElement {
   initializePubnubVariables = async (): Promise<void> => {
     await this.setBuildingDerivedInfo();
     if (!this.building) return;
+    if (this.building.conversationMaintenanceMode) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "MeetElise Chat is in maintenance mode. Chat icon will not appear."
+      );
+      return;
+    }
 
-    this.myPubnub = new MyPubnub(this.buildingSlug, this.building);
-    if (this.myPubnub.isChatKeyValid(this.myPubnub.getChatStorageKey())) {
+    this.myPubnub = new MyPubnub(
+      this.buildingSlug,
+      this.building,
+      this.orgSlug
+    );
+    if (this.myPubnub.isChatKeyValid(this.myPubnub.getChatStorageKey(false))) {
       await this.myPubnub.initializePubnub();
     }
     this.attachOnClickToLauncher();

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

@@ -4,7 +4,7 @@ export const pubnubChatStyles = css`
   #pubnub-chat-container {
     position: fixed;
 
-    z-index: 100000;
+    z-index: 100001;
     display: flex;
     align-items: center;
 
@@ -127,7 +127,7 @@ export const pubnubChatStyles = css`
   }
 
   #loading-message {
-    padding: 16px;
+    padding: 12px;
   }
   .loading-dot {
     width: 6px;
@@ -178,6 +178,7 @@ export const pubnubChatStyles = css`
     box-sizing: border-box;
     gap: 16px;
     padding: 24px;
+    z-index: 100001;
   }
   #message-input {
     height: 40px;
@@ -189,6 +190,7 @@ export const pubnubChatStyles = css`
     border: none;
     color: white;
     background: none;
+    z-index: 1000000000000000000000000001;
   }
   #message-input:focus {
     outline: none;

package/src/WebComponent/pubnub-chat.ts

@@ -74,11 +74,6 @@ export class PubnubChat extends LitElement {
       }
     );
     this.onMount();
-    // TODO (erol): scroll to bottom on all children load
-    // this is a hacky way to do it
-    setTimeout(() => {
-      this.scrollToChatBottom();
-    }, 1000);
   }
 
   scrollToChatBottom = (): void => {

package/src/analytics.ts

@@ -1,3 +1,5 @@
+import axios from "axios";
+
 declare global {
   interface Window {
     RCTPCampaign?: { CampaignDetails: { Source: string } };
@@ -86,3 +88,40 @@ export const getCampaignSources = (): CampaignSources => {
     yardiCampaignSource,
   };
 };
+
+export enum LogType {
+  error = "error",
+  info = "info",
+  warn = "warn",
+}
+
+export const sendLoggingEvent = async ({
+  logType,
+  buildingSlug,
+  orgSlug,
+  logTitle,
+  logData,
+}: {
+  logType?: LogType;
+  buildingSlug?: string;
+  orgSlug?: string;
+  logTitle: string;
+  logData: Record<string, unknown>;
+}): Promise<void> => {
+  const host = "https://app.meetelise.com";
+  await axios.post(
+    `${host}/platformApi/webchat/logging`,
+    {
+      ...logData,
+    },
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "building-slug": buildingSlug ?? "",
+        "org-slug": orgSlug ?? "",
+        "log-type": logType ?? LogType.error,
+        "log-title": logTitle.toUpperCase().replace(/\s/g, "_"),
+      },
+    }
+  );
+};

package/src/fetchBuildingInfo.ts

@@ -1,3 +1,5 @@
+import axios from "axios";
+
 export interface LabeledOption {
   label: string;
   value: string | number;
@@ -49,20 +51,19 @@ export default async function fetchBuildingInfo(
   buildingSlug: string
 ): Promise<Building> {
   const host = "https://app.meetelise.com";
-  const url = `${host}/api/pub/v1/organization/${orgSlug}/building/${buildingSlug}`;
-  const response = await fetch(url);
-  const building: Building = await response.json();
+  const buildingUrl = `${host}/api/pub/v1/organization/${orgSlug}/building/${buildingSlug}`;
+  const unitsUrl = `${host}/eliseCrmApi/pub/building/${buildingSlug}/units`;
+  const layoutsUrl = `${host}/eliseCrmApi/pub/building/${buildingSlug}/layouts`;
+
+  const [buildingResponse, unitsResponse, layoutsResponse] = await Promise.all([
+    axios.get(buildingUrl),
+    axios.get(unitsUrl),
+    axios.get(layoutsUrl),
+  ]);
 
-  // HACK
-  // We will fetch these units/layouts from elise-crm-api and supplement the DTO
-  const unitsResponse = await fetch(
-    `${host}/eliseCrmApi/pub/building/${buildingSlug}/units?showAvailableOnly=true`
-  );
-  const units: UnitV2[] = await unitsResponse.json();
-  const layoutsResponse = await fetch(
-    `${host}/eliseCrmApi/pub/building/${buildingSlug}/layouts`
-  );
-  const layouts: string[] = await layoutsResponse.json();
+  const building: Building = buildingResponse.data;
+  const units: UnitV2[] = unitsResponse.data;
+  const layouts: string[] = layoutsResponse.data;
 
   building.unitOptionsV2 = units;
   building.layoutOptionsV2 = layouts;