@meetelise/chat 1.20.83 → 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/Scheduler/tour-scheduler.ts

@@ -33,6 +33,7 @@ import { classMap } from "lit/directives/class-map.js";
 import postLeadSources from "../../postLeadSources";
 import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
 import { pushGtmEvent } from "../../gtm";
+import disclaimer from "../../disclaimers";
 
 const getHumanReadableLayout = (layout: string) => {
   if (layout == "studio") return "Studio";
@@ -72,6 +73,10 @@ export class TourScheduler extends LitElement {
   virtualToursLink = "";
   @property({ attribute: true })
   orgSlug = "";
+
+  @property({ attribute: true })
+  buildingName = "";
+
   onCloseClicked?: (e: MouseEvent) => void;
 
   @state()
@@ -621,7 +626,7 @@ export class TourScheduler extends LitElement {
         margin: 0;
       }
 
-      p {
+      .explanation {
         font-weight: 400;
         font-size: 12px;
         grid-row: 7;
@@ -630,6 +635,9 @@ export class TourScheduler extends LitElement {
         margin: 0;
         padding-top: 32px;
       }
+      .withDisclaimer {
+        padding-top: 16px;
+      }
 
       #schedule {
         width: 145px;
@@ -1336,10 +1344,20 @@ export class TourScheduler extends LitElement {
             : html`${this.tourTypeMenu()} ${this.dateAndTimeMenu()}
                 ${this.userInfoAndLayoutMenu()}
                 <hr />
-                <p id="explanation">
+                <p
+                  class=${this.phoneInput?.value || this.emailInput?.value
+                    ? "explanation withDisclaimer"
+                    : "explanation"}
+                >
                   We’ll send a confirmation and any follow-ups to your email
                   address.
+                  ${disclaimer({
+                    buildingName: this.buildingName,
+                    phoneNumberInput: this.phoneInput?.value,
+                    emailInput: this.emailInput?.value,
+                  })}
                 </p>
+
                 <action-confirm-button
                   id="schedule"
                   .onClick=${this.submit}
@@ -1383,6 +1401,15 @@ export class TourScheduler extends LitElement {
                     ${currentPage.nextButtonText}
                   </button>`
                 : currentPage.renderNextButton()}`}
+          ${this.mobilePageIndex + 1 === this.mobilePages.length
+            ? html`
+                ${disclaimer({
+                  buildingName: this.buildingName,
+                  phoneNumberInput: this.phoneInput?.value,
+                  emailInput: this.emailInput?.value,
+                })}
+              `
+            : html``}
         </div>
       `;
     }

package/src/WebComponent/actions/email-us-window.ts

@@ -16,6 +16,7 @@ import { InputStyles } from "./InputStyles";
 import axios from "axios";
 import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
 import { pushGtmEvent } from "../../gtm";
+import disclaimer from "../../disclaimers";
 
 @customElement("email-us-window")
 export class EmailUsWindow extends LitElement {
@@ -100,6 +101,8 @@ export class EmailUsWindow extends LitElement {
   buildingSlug = "";
   @property({ attribute: true })
   orgSlug = "";
+  @property({ attribute: true })
+  buildingName = "";
 
   @property({ attribute: true })
   featureFlagShowDropdown = "";
@@ -446,6 +449,12 @@ export class EmailUsWindow extends LitElement {
               `
             : ""}
         </div>
+
+        ${disclaimer({
+          buildingName: this.buildingName,
+          phoneNumberInput: this.phoneNumber,
+          emailInput: this.email,
+        })}
       </details-window>
     `;
   };

package/src/WebComponent/launcher/Launcher.ts

@@ -60,6 +60,8 @@ export class Launcher extends LitElement {
   @property()
   phoneNumber = "";
   @property({ attribute: true })
+  buildingName = "";
+  @property({ attribute: true })
   chatId = "";
   @property({ attribute: true })
   chatCallUsHeader = "";
@@ -528,6 +530,7 @@ export class Launcher extends LitElement {
                 featureFlagShowDropdown="${this.featureFlagShowDropdown}"
                 ${ref(this.emailUsWindowRef)}
                 .buildingId=${this.buildingId}
+                .buildingName=${this.buildingName}
               >
               </email-us-window>
             </div>`
@@ -559,6 +562,7 @@ export class Launcher extends LitElement {
                 .tourTypeOptions=${this.tourTypeOptions}
                 buildingId=${this.buildingId}
                 featureFlagShowDropdown="${this.featureFlagShowDropdown}"
+                .buildingName=${this.buildingName}
                 ${ref(this.tourSchedulerRef)}
               ></tour-scheduler>
             </div>`