@meetelise/chat 1.20.91 → 1.20.93

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,27 @@ class MyPubnub {
 
       await this.withAuthToken(async () => {
         if (!this.pubnub || !this.channel) return;
+
+        if (this.eliseResponseTimeout) {
+          clearTimeout(this.eliseResponseTimeout);
+          this.eliseResponseTimeout = null;
+        }
+        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,
+          });
+        }, 45000); // if after 45 seconds, no message - we log error
+
         await this.pubnub.publish({
           channel: this.channel,
           message: {

package/src/WebComponent/me-chat.ts

@@ -492,7 +492,11 @@ export class MEChat extends LitElement {
       return;
     }
 
-    this.myPubnub = new MyPubnub(this.buildingSlug, this.building);
+    this.myPubnub = new MyPubnub(
+      this.buildingSlug,
+      this.building,
+      this.orgSlug
+    );
     if (this.myPubnub.isChatKeyValid(this.myPubnub.getChatStorageKey(false))) {
       await this.myPubnub.initializePubnub();
     }

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

@@ -190,7 +190,7 @@ export const pubnubChatStyles = css`
     border: none;
     color: white;
     background: none;
-    z-index: 100001;
+    z-index: 1000000000000000000000000001;
   }
   #message-input:focus {
     outline: none;

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;