@meetelise/chat 1.21.0 → 1.21.2

package/src/MyPubnub.ts

@@ -0,0 +1,657 @@
+import { AxiosError } from "axios";
+import Pubnub, { ListenerParameters, MessageEvent } from "pubnub";
+
+import axios from "axios";
+import { Building } from "./fetchBuildingInfo";
+import { LogType, sendLoggingEvent } from "./analytics";
+import { ChatStorageKey, createChatStorageKey } from "./handleChatId";
+import LeadSourceClient from "./WebComponent/LeadSourceClient";
+import { pushGtmEvent } from "./gtm";
+import { isContainingEmail } from "./utils";
+
+interface TokenResponse {
+  auth: {
+    result: {
+      token: string;
+    };
+  };
+  keys: {
+    subscribe_key: string;
+    publish_key: string;
+  };
+}
+
+// This is what we expect from our BE
+enum MessageType {
+  noReply = "no-reply",
+  text = "text",
+  media = "media",
+}
+
+interface RawPubnubMessage {
+  channel: string;
+  message: {
+    // all the possible options from our BE
+    text: string;
+    customType: string;
+    messageType?: MessageType;
+    is_streaming?: boolean;
+    is_done?: boolean;
+    order?: number;
+    stream_id?: string;
+    media?: ChatMediaFile[];
+  };
+  publisher: string;
+  subscription: string;
+  timetoken: number;
+}
+
+export interface SimpleTextChatMessage {
+  timestamp: number;
+  message: string;
+  isLeadMessage: boolean;
+  chunks: {
+    text: string;
+    order: number;
+    isDone: boolean;
+  }[];
+  type: SimpleMessageTypes.text;
+}
+
+interface ChatMediaFile {
+  title: string | null;
+  description: string | null;
+  url: string | null;
+}
+export interface SimpleMediaChatMessage {
+  timestamp: number;
+  media: ChatMediaFile[];
+  isLeadMessage: boolean;
+  type: SimpleMessageTypes.media;
+}
+
+export type SimpleChatMessage = SimpleTextChatMessage | SimpleMediaChatMessage;
+
+export const isSimpleTextChatMessage = (
+  message: SimpleChatMessage
+): message is SimpleTextChatMessage => {
+  return message.type === SimpleMessageTypes.text;
+};
+
+export const isSimpleMediaChatMessage = (
+  message: SimpleChatMessage
+): message is SimpleMediaChatMessage => {
+  return message.type === SimpleMessageTypes.media;
+};
+
+export enum SimpleMessageTypes {
+  text = "text",
+  media = "media",
+}
+
+class MyPubnub {
+  private apiHost = "https://app.meetelise.com";
+
+  private leadSourceClient: LeadSourceClient | null = null;
+  private building: Building | null = null;
+  private buildingSlug: string;
+  private orgSlug: string;
+
+  private eliseResponseTimeout: NodeJS.Timeout | null = null;
+
+  pubnub: Pubnub | null = null;
+  leadUserId = "";
+  channel = "";
+  leadSource: string | null = null;
+
+  isCurrentlyStreamingMessage = false;
+
+  chatListener:
+    | ((res: { messages: SimpleChatMessage[]; isLoading: boolean }) => void)
+    | null = null;
+
+  rawPubnubMessages: RawPubnubMessage[] = [];
+  simpleChatMessages: SimpleChatMessage[] = [];
+
+  listenerParams: ListenerParameters = {
+    message: (messageEvent: MessageEvent) => {
+      // if the messageEvent is a no-reply, we ignore it and stop loading
+      if (messageEvent.message.messageType !== MessageType.noReply) {
+        this.rawPubnubMessages = [
+          ...this.rawPubnubMessages,
+          {
+            channel: messageEvent.channel,
+            message: messageEvent.message,
+            publisher: messageEvent.publisher,
+            subscription: messageEvent.subscription,
+            timetoken: +messageEvent.timetoken,
+          },
+        ];
+        this.simpleChatMessages =
+          this.translatePubnubMessagesIntoSimpleChatMessages(
+            this.rawPubnubMessages
+          );
+      }
+
+      const isWaitingForEliseResponse =
+        messageEvent.publisher !== "eliseai" &&
+        messageEvent.publisher !== "elise_health_ai";
+      this.chatListener?.({
+        messages: this.simpleChatMessages,
+        isLoading: isWaitingForEliseResponse,
+      });
+      if (!isWaitingForEliseResponse && this.eliseResponseTimeout) {
+        clearTimeout(this.eliseResponseTimeout);
+      }
+      this.isLoadingMessages = isWaitingForEliseResponse;
+
+      if (messageEvent.message.customType === "ai_message") {
+        const containsConfirmedTour = this.simpleChatMessages.some(
+          (message) => {
+            return (
+              message.type === SimpleMessageTypes.text &&
+              message.message.includes("confirmed for your tour")
+            );
+          }
+        );
+        if (containsConfirmedTour) {
+          pushGtmEvent("scheduledTourEvent", {
+            tourDetails: messageEvent.message,
+            buildingId: this.building?.id,
+            buildingSlug: this.buildingSlug,
+            orgSlug: this.orgSlug,
+            leadUserId: this.leadUserId,
+            channel: this.channel,
+          });
+        }
+      }
+
+      this.checkAndHandleGTMForLeadEmail(messageEvent);
+    },
+  };
+  isLoadingMessages = false;
+  isFirstChatMessageSent = false;
+
+  constructor(
+    buildingSlug: string,
+    buildingDetails: Building | null,
+    orgSlug: string,
+    leadSource: string | null = null,
+    leadUserId: string,
+    leadSourceClient: LeadSourceClient | null = null
+  ) {
+    this.buildingSlug = buildingSlug;
+    this.building = buildingDetails;
+    this.orgSlug = orgSlug;
+    this.leadSource = leadSource;
+    this.leadUserId = leadUserId;
+    this.channel = `webchat_${leadUserId}`;
+    this.leadSourceClient = leadSourceClient;
+  }
+
+  checkAndHandleGTMForLeadEmail = (messageEvent: Pubnub.MessageEvent): void => {
+    try {
+      if (messageEvent.message.customType !== "lead_message") {
+        return;
+      }
+      if (!isContainingEmail(messageEvent.message.text)) {
+        return;
+      }
+      pushGtmEvent("leadProvidedEmail", {
+        buildingId: this.building?.id,
+        buildingSlug: this.buildingSlug,
+        orgSlug: this.orgSlug,
+        leadUserId: this.leadUserId,
+        channel: this.channel,
+      });
+    } catch (error) {
+      return;
+    }
+  };
+
+  addChatListener(
+    listener: (response: {
+      messages: SimpleChatMessage[];
+      isLoading: boolean;
+    }) => void
+  ): void {
+    this.chatListener = listener;
+  }
+
+  async initializePubnub(
+    chatStorageKey: ChatStorageKey
+  ): Promise<Pubnub | undefined> {
+    if (!chatStorageKey.leadId) return;
+    this.leadUserId = chatStorageKey.leadId;
+
+    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
+    // 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,
+      origin: "meetelise.pubnubapi.com",
+    });
+    this.withAuthToken(() => new Promise(() => this.handleChatListeners()));
+    await this.withAuthToken(() => this.getChannelHistory());
+    return this.pubnub;
+  }
+  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}&${
+          this.building ? "" : `industry=health_care`
+        }`
+      );
+      return response.data;
+    } catch (error) {
+      if (this.building) {
+        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> {
+    try {
+      const response = await axios.get(
+        `${this.apiHost}/platformApi/webchat/check-channel-exists?channel_name=${channel}`
+      );
+      return response.data;
+    } catch (error) {
+      if (this.building) {
+        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> {
+    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) {
+          if (this.building) {
+            sendLoggingEvent({
+              logTitle: "PUBNUB_ERROR_REFETCHING_TOKEN",
+              logData: {
+                retryError,
+              },
+              logType: LogType.error,
+              buildingSlug: this.buildingSlug,
+              orgSlug: this.orgSlug,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  async getChannelHistory(maxTotalMessageChunksToFetch = 1500): Promise<void> {
+    try {
+      let allMessages: RawPubnubMessage[] = [];
+      let startTimeToken: string | number | null = null;
+      const maxCountPerFetch = 100;
+      for (
+        let totalCount = 0;
+        totalCount < maxTotalMessageChunksToFetch;
+        totalCount += maxCountPerFetch
+      ) {
+        const response: Pubnub.FetchMessagesResponse = await new Promise(
+          (resolve, reject) => {
+            if (!this.pubnub || !this.channel) return [];
+            const countToFetch = Math.min(
+              maxCountPerFetch,
+              maxTotalMessageChunksToFetch - totalCount
+            );
+            this.pubnub.fetchMessages(
+              {
+                channels: [this.channel],
+                count: countToFetch,
+                start: startTimeToken ?? undefined,
+              },
+              (status, response) => {
+                if (status.error) {
+                  reject(status);
+                } else {
+                  resolve(response);
+                }
+              }
+            );
+          }
+        );
+
+        const messages = response.channels[this.channel];
+        if (!messages) {
+          break;
+        }
+        messages.sort((a, b) => +a.timetoken - +b.timetoken);
+
+        if (!messages || messages.length === 0) {
+          break;
+        }
+        if (this.channel && Object.keys(response.channels).length !== 0) {
+          const currentChannelMessages = response.channels[this.channel];
+          const parsedCurrentChannelMessages: RawPubnubMessage[] = [];
+          currentChannelMessages.forEach((message) => {
+            if (message.uuid) {
+              parsedCurrentChannelMessages.push({
+                channel: message.channel,
+                message: message.message,
+                publisher: message.uuid,
+                subscription: message.channel,
+                timetoken: +message.timetoken,
+              });
+            }
+          });
+          allMessages = allMessages.concat(
+            parsedCurrentChannelMessages.filter(
+              (m) => m.message.messageType !== MessageType.noReply
+            )
+          );
+        }
+        startTimeToken = messages[0].timetoken;
+
+        if (
+          allMessages.length >= maxTotalMessageChunksToFetch ||
+          messages.length < maxCountPerFetch
+        ) {
+          break;
+        }
+      }
+      this.rawPubnubMessages = allMessages.slice(
+        0,
+        maxTotalMessageChunksToFetch
+      );
+
+      this.simpleChatMessages =
+        this.translatePubnubMessagesIntoSimpleChatMessages(
+          this.rawPubnubMessages
+        );
+
+      this.chatListener?.({
+        messages: this.simpleChatMessages,
+        isLoading: false,
+      });
+    } catch (error) {
+      if (this.building) {
+        sendLoggingEvent({
+          logTitle: "PUBNUB_WARN_FETCHING_HISTORY",
+          logData: { error },
+          logType: LogType.warn,
+          buildingSlug: this.buildingSlug,
+          orgSlug: this.orgSlug,
+        });
+      }
+    }
+  }
+
+  handleChatListeners = (): void => {
+    if (!this.pubnub || !this.channel) return;
+    try {
+      this.pubnub.subscribe({ channels: [this.channel] });
+      this.pubnub.addListener(this.listenerParams);
+    } catch (error) {
+      if (this.building) {
+        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,
+        });
+      }
+    }
+  };
+  handleDisconnect = (): void => {
+    if (this.eliseResponseTimeout) {
+      clearTimeout(this.eliseResponseTimeout);
+      this.eliseResponseTimeout = null;
+    }
+    this.removeChatListeners();
+  };
+  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 chatStorageKey = createChatStorageKey(
+          this.buildingSlug,
+          true,
+          this.leadUserId
+        );
+        const myPubnub = await this.initializePubnub(chatStorageKey);
+        if (!myPubnub) return;
+      }
+
+      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...");
+          if (this.building) {
+            sendLoggingEvent({
+              logTitle: "PUBNUB_ERROR_ELISEAI_MESSAGE_TIMEOUT",
+              logData: {
+                channel: this.channel,
+                leadUserId: this.leadUserId,
+                message,
+              },
+              logType: LogType.error,
+              buildingSlug: this.buildingSlug,
+              orgSlug: this.orgSlug,
+            });
+          }
+        }, 90000); // if after 90 seconds, no message - we log error
+
+        if (this.simpleChatMessages.length === 0) {
+          this.leadSourceClient?.checkAndHandleForLogLeadSource({
+            webchatAction: "chat",
+            stateId: null,
+          });
+        }
+        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: this.leadSource,
+            isDevState: this.shouldCreateAsDevState(),
+          },
+        });
+
+        if (!this.isFirstChatMessageSent) {
+          pushGtmEvent("firstChatMessageSent", {
+            message,
+            buildingId: this.building?.id,
+            buildingSlug: this.buildingSlug,
+            orgSlug: this.orgSlug,
+            leadUserId: this.leadUserId,
+            channel: this.channel,
+          });
+          this.isFirstChatMessageSent = true;
+        }
+
+        pushGtmEvent("chatMessageSent", {
+          message,
+          buildingId: this.building?.id,
+          buildingSlug: this.buildingSlug,
+          orgSlug: this.orgSlug,
+          leadUserId: this.leadUserId,
+          channel: this.channel,
+        });
+      });
+
+      if (this.isLoadingMessages === false) this.isLoadingMessages = true;
+    }
+  };
+  private shouldCreateAsDevState(): boolean {
+    return location.href.startsWith(
+      "https://app.meetelise.com/settings/widgets"
+    );
+  }
+
+  isLeadMessage = (message: RawPubnubMessage): boolean =>
+    message.publisher.includes("lead_") &&
+    message.message.customType === "lead_message";
+
+  translatePubnubMessagesIntoSimpleChatMessages = (
+    messages: RawPubnubMessage[]
+  ): SimpleChatMessage[] => {
+    const parsedMessages: SimpleChatMessage[] = [];
+    const streamingIdToMessageChunks: {
+      [streamId: string]: RawPubnubMessage[];
+    } = {};
+    messages.forEach((message: RawPubnubMessage) => {
+      // Translate media messages
+      if (message.message.messageType === "media") {
+        parsedMessages.push({
+          timestamp: message.timetoken,
+          media: message.message.media ?? [],
+          isLeadMessage: this.isLeadMessage(message),
+          type: SimpleMessageTypes.media,
+        });
+      } else if (
+        // Translate non-streaming messages
+        !message.message.stream_id ||
+        (message.message.is_done && message.message.order === 0)
+      ) {
+        parsedMessages.push({
+          timestamp: message.timetoken,
+          message: message.message.text,
+          isLeadMessage: this.isLeadMessage(message),
+          chunks: [
+            {
+              text: message.message.text,
+              order: 0,
+              isDone: true,
+            },
+          ],
+          type: SimpleMessageTypes.text,
+        });
+      } else {
+        // Translate streaming messages
+        if (streamingIdToMessageChunks[message.message.stream_id]) {
+          streamingIdToMessageChunks[message.message.stream_id].push(message);
+        } else {
+          streamingIdToMessageChunks[message.message.stream_id] = [message];
+        }
+      }
+    });
+    Object.keys(streamingIdToMessageChunks).forEach((streamId) => {
+      const messages = streamingIdToMessageChunks[streamId];
+      const sortedChunks = this.getConsecutiveChunks(
+        messages.sort((a, b) => (a.message.order ?? 0) - (b.message.order ?? 0))
+      );
+      const text = sortedChunks.map((message) => message.message.text).join("");
+      const firstMessage = sortedChunks[0];
+      const newMessage: SimpleTextChatMessage = {
+        timestamp: firstMessage.timetoken,
+        message: text,
+        isLeadMessage: this.isLeadMessage(firstMessage),
+        chunks: sortedChunks.map((message) => ({
+          text: message.message.text,
+          order: message.message.order ?? 0,
+          isDone: message.message.is_done ?? false,
+        })),
+        type: SimpleMessageTypes.text,
+      };
+      this.isCurrentlyStreamingMessage =
+        this.isMessageStillStreamingChunks(sortedChunks);
+      parsedMessages.push(newMessage);
+    });
+    parsedMessages.sort((a, b) => a.timestamp - b.timestamp);
+    return parsedMessages;
+  };
+
+  private getConsecutiveChunks = (
+    rawPubnubMessages: RawPubnubMessage[]
+  ): RawPubnubMessage[] => {
+    const sortedRawPubnubMessages = rawPubnubMessages.sort(
+      (a, b) => (a.message.order ?? 0) - (b.message.order ?? 0)
+    );
+    const consecutiveMessages = [];
+
+    // get the LOWEST order that exists
+    let expectedOrder = sortedRawPubnubMessages[0].message.order ?? 0;
+    for (const message of sortedRawPubnubMessages) {
+      if ((message.message.order ?? -1) === expectedOrder) {
+        consecutiveMessages.push(message);
+        expectedOrder++;
+      } else {
+        break;
+      }
+    }
+    return consecutiveMessages;
+  };
+
+  private isMessageStillStreamingChunks = (
+    rawPubnubMessages: RawPubnubMessage[]
+  ): boolean => {
+    const messageChunkMarkedAsDone = rawPubnubMessages.find(
+      (message) => message.message.is_done
+    );
+    if (!messageChunkMarkedAsDone) return true;
+
+    // We check to see if ALL the chunks have been received
+    return rawPubnubMessages.length === messageChunkMarkedAsDone.message.order;
+  };
+}
+
+export default MyPubnub;