@meetelise/chat 1.20.83 → 1.20.85

package/src/WebComponent/me-chat.ts

@@ -13,6 +13,7 @@ import {
   FeatureFlagsShowDropdown,
   fetchFeatureFlagShowMarketingSourceDropdown,
   fetchFeatureFlagUsePhoneNumberBySource,
+  fetchFeatureFlagUsePubnub,
 } from "../fetchFeatureFlag";
 import fetchWebchatPreferences, {
   DesignConcepts,
@@ -37,10 +38,16 @@ import addMinutes from "date-fns/addMinutes";
 import formatISO from "date-fns/formatISO";
 import fetchLeadSources from "../fetchLeadSources";
 import { formatPhoneNumber } from "./actions/formatPhoneNumber";
+import MyPubnub from "../MyPubnub";
 
 import "./actions/minimize-expand-button";
 import "./launcher/mobile-launcher";
+import "./pubnub-chat";
 
+enum ChatProviders {
+  TALKJS = "talkjs",
+  PUBNUB = "pubnub",
+}
 @customElement("me-chat")
 export class MEChat extends LitElement {
   static styles = css`
@@ -66,7 +73,8 @@ export class MEChat extends LitElement {
       justify-content: space-between;
       gap: 32px;
     }
-    #chatAdditionalActions {
+    #chatAdditionalActionsTalkjs,
+    #chatAdditionalActionsPubnub {
       position: fixed;
       box-sizing: border-box;
 
@@ -78,7 +86,8 @@ export class MEChat extends LitElement {
 
       z-index: 1000000000;
     }
-    #chatAdditionalActions::after {
+    #chatAdditionalActionsPubnub::after,
+    #chatAdditionalActionsTalkjs::after {
       content: "";
       position: absolute;
       top: -6px;
@@ -88,6 +97,10 @@ export class MEChat extends LitElement {
       border-bottom: 22px solid transparent;
       border-right: 30px solid black;
     }
+    #pubnub-bottom {
+      position: fixed;
+      bottom: 0;
+    }
   `;
   @property({ type: String })
   private buildingSlug = "";
@@ -147,6 +160,15 @@ export class MEChat extends LitElement {
   @state()
   private talkjsPopupElement: Element | null = null;
 
+  @state()
+  private chatProvider: ChatProviders = ChatProviders.TALKJS;
+
+  @state()
+  private displayPubnubChat = false;
+
+  @state()
+  private myPubnub: MyPubnub | null = null;
+
   private yardiDNIScriptInterval: NodeJS.Timer | null = null;
   launcherRef: Ref<Launcher> = createRef();
 
@@ -378,11 +400,7 @@ export class MEChat extends LitElement {
     (talkjsPopupElement as HTMLElement).style.zIndex = "99999999999";
     this.popup = popup;
 
-    const autoOpenedTimestamp = sessionStorage.getItem("autoOpenedTimestamp");
-    const shouldAutoOpen =
-      !autoOpenedTimestamp ||
-      (autoOpenedTimestamp && isPast(parseISO(autoOpenedTimestamp)));
-    if (building.autoOpenChatWidget && shouldAutoOpen && !isMobile()) {
+    if (this.shouldAutoOpenChatWidget(building.autoOpenChatWidget)) {
       this.popup.show();
       this.hideLauncher = true;
       this.hasMounted = true;
@@ -394,6 +412,18 @@ export class MEChat extends LitElement {
     }
   };
 
+  private shouldAutoOpenChatWidget = (
+    buildingHasAutoOpen: boolean
+  ): boolean => {
+    const autoOpenedTimestamp = sessionStorage.getItem("autoOpenedTimestamp");
+    const shouldAutoOpen =
+      !autoOpenedTimestamp ||
+      (autoOpenedTimestamp && isPast(parseISO(autoOpenedTimestamp)));
+    if (buildingHasAutoOpen && shouldAutoOpen && !isMobile()) {
+      return true;
+    }
+    return false;
+  };
   /**
    * Remove the instance from the screen.
    *
@@ -432,26 +462,70 @@ export class MEChat extends LitElement {
     this.launcher.style.display = "none";
   }
 
-  firstUpdated = (): void => {
-    this.initializeInstanceVariables();
+  firstUpdated = async (): Promise<void> => {
+    const usePubnubProviderFlag = await fetchFeatureFlagUsePubnub(
+      this.buildingSlug
+    );
+
+    if (usePubnubProviderFlag) {
+      this.chatProvider = ChatProviders.PUBNUB;
+      this.initializePubnubVariables();
+    } else {
+      this.initializeInstanceVariables();
+    }
+  };
+
+  initializePubnubVariables = async (): Promise<void> => {
+    await this.setBuildingDerivedInfo();
+    if (!this.building) return;
+
+    const pubnubRaw = new MyPubnub(
+      this.orgSlug,
+      this.buildingSlug,
+      this.building
+    );
+    await pubnubRaw.initializePubnub();
+    this.myPubnub = pubnubRaw;
+    this.attachOnClickToLauncher();
+    if (this.shouldAutoOpenChatWidget(this.building.autoOpenChatWidget)) {
+      this.displayPubnubChat = true;
+      this.hideLauncher = true;
+      this.hasMounted = true;
+      sessionStorage.setItem(
+        "autoOpenedTimestamp",
+        formatISO(addMinutes(new Date(), 15))
+      );
+    }
+    this.isLoading = false;
   };
 
   handleContactClicked = (e: MouseEvent): void => {
-    this.popup?.hide();
+    if (this.chatProvider === ChatProviders.TALKJS) {
+      this.popup?.hide();
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      this.displayPubnubChat = false;
+    }
     this.hideLauncher = false;
 
     this.launcherRef.value?.onClickEmailOption(e);
   };
 
   handleTourClicked = (e: MouseEvent): void => {
-    this.popup?.hide();
+    if (this.chatProvider === ChatProviders.TALKJS) {
+      this.popup?.hide();
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      this.displayPubnubChat = false;
+    }
     this.hideLauncher = false;
-
     this.launcherRef.value?.onClickSSTOption(e);
   };
 
   handleContactTabClicked = (e: MouseEvent): void => {
-    this.popup?.hide();
+    if (this.chatProvider === ChatProviders.TALKJS) {
+      this.popup?.hide();
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      this.displayPubnubChat = false;
+    }
     this.hideLauncher = false;
 
     this.launcherRef.value?.onClickPhoneOption(e);
@@ -461,14 +535,25 @@ export class MEChat extends LitElement {
   //  For the top header contact, we change its pos based on the current x and y
   //  of the talkjs popup - so we must adjust its coords on resize and mount
   adjustTopHeaderContactCoords = (): void => {
-    if (this.talkjsPopupElement) {
+    const headerRef = this.shadowRoot?.getElementById(
+      this.chatProvider === ChatProviders.TALKJS
+        ? "chatAdditionalActionsTalkjs"
+        : "chatAdditionalActionsPubnub"
+    );
+    if (!headerRef) return;
+    if (this.chatProvider === ChatProviders.TALKJS && this.talkjsPopupElement) {
       const talkjsPopupCoords = this.talkjsPopupElement.getBoundingClientRect();
-      const headerRef = this.shadowRoot?.getElementById(
-        "chatAdditionalActions"
-      );
-      if (!headerRef) return;
       headerRef.style.left = `${talkjsPopupCoords.left + 20}px`;
       headerRef.style.top = `${talkjsPopupCoords.bottom - 24}px`;
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      const pubnubContainerElement = this.shadowRoot
+        ?.getElementById("pubnub-chat")
+        ?.shadowRoot?.getElementById("pubnub-chat-container");
+
+      const pubnubPopupCoords = pubnubContainerElement?.getBoundingClientRect();
+      if (!pubnubPopupCoords) return;
+      headerRef.style.left = `${pubnubPopupCoords.left}px`;
+      headerRef.style.top = `${pubnubPopupCoords.bottom}px`;
     }
   };
   connectedCallback(): void {
@@ -476,6 +561,7 @@ export class MEChat extends LitElement {
     window.addEventListener("resize", this.adjustTopHeaderContactCoords);
   }
   disconnectedCallback(): void {
+    this.myPubnub?.removeChatListeners();
     window.removeEventListener("resize", this.adjustTopHeaderContactCoords);
     super.disconnectedCallback();
   }
@@ -501,6 +587,34 @@ export class MEChat extends LitElement {
           EliseAI widget that allows you to chat with a virtual assistant, book
           a tour, contact the leasing office, and more.
         </div>
+
+        ${
+          this.chatProvider === ChatProviders.PUBNUB &&
+          this.displayPubnubChat &&
+          this.myPubnub
+            ? html`
+                <pubnub-chat
+                  id="pubnub-chat"
+                  .channel=${this.myPubnub.channel}
+                  .myPubnub=${this.myPubnub}
+                  .buildingSlug=${this.buildingSlug}
+                  .building=${this.building}
+                  .brandColor=${this.brandColor}
+                  .onClickExit=${() => {
+                    this.displayPubnubChat = false;
+                    this.hideLauncher = false;
+                  }}
+                  .onMount=${() => {
+                    this.adjustTopHeaderContactCoords();
+                  }}
+                ></pubnub-chat>
+                ${this.renderChatAdditionalActions(
+                  "chatAdditionalActionsPubnub",
+                  showChatAdditionalActions
+                )}
+              `
+            : ""
+        }
         <div
           class=${classMap({
             launcherContainer: true,
@@ -534,6 +648,7 @@ export class MEChat extends LitElement {
                   phoneNumber="${this.phoneNumberForSource?.number ??
                   this.building?.phoneNumber ??
                   ""}"
+                  buildingName=${this.building?.name ?? ""}
                   textColor="${this.theme.chatHeader.textColor}"
                   backgroundColor="${this.theme.chatPaneBackgroundColor}"
                   orgSlug="${this.orgSlug}"
@@ -567,54 +682,65 @@ export class MEChat extends LitElement {
           }
           
         </div>
-        <div
-          id="chatAdditionalActions"
-          class=${classMap({
-            ["showTab"]: showChatAdditionalActions,
-            ["hideTab"]: !showChatAdditionalActions,
-          })}
-        >
-          <mobile-launcher
-          .onClickMinimize=${this.onClickMinimize}
-          .onClickEmailOption=${this.handleContactClicked}
-          .onClickPhoneOption=${this.handleContactTabClicked}
-          .onClickSSTOption=${this.handleTourClicked}
-          .isMobile=${this.isMobile}
-          .brandColor=${this.brandColor}
-          .hideChat=${true}
-          .hasChatEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("CHAT")
-          }
-          .hasEmailEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("EMAIL")
-          }
-          .hasCallUsEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("CALL")
-          }
-          .hasSSTEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("SST")
-          }
-        ></mobile-launcher>
-         <minimize-expand-button 
-          .brandColor=${this.brandColor}
-          .onClick=${() => {
-            this.popup?.hide();
-            this.hideLauncher = false;
-          }}
-         ></minimize-expand-button>
-        </div>
+        ${
+          this.chatProvider === ChatProviders.TALKJS
+            ? this.renderChatAdditionalActions(
+                "chatAdditionalActionsTalkjs",
+                showChatAdditionalActions
+              )
+            : ""
+        }
+        
       </meta>
     `;
   }
 
+  private renderChatAdditionalActions = (
+    id: string,
+    showChatAdditionalActions: boolean
+  ): TemplateResult => {
+    return html` <div
+      id=${id}
+      class=${classMap({
+        ["showTab"]: showChatAdditionalActions,
+        ["hideTab"]: !showChatAdditionalActions,
+      })}
+    >
+      <mobile-launcher
+        .onClickMinimize=${this.onClickMinimize}
+        .onClickEmailOption=${this.handleContactClicked}
+        .onClickPhoneOption=${this.handleContactTabClicked}
+        .onClickSSTOption=${this.handleTourClicked}
+        .isMobile=${this.isMobile}
+        .brandColor=${this.brandColor}
+        .hideChat=${true}
+        .hasChatEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("CHAT")}
+        .hasEmailEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("EMAIL")}
+        .hasCallUsEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("CALL")}
+        .hasSSTEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("SST")}
+      ></mobile-launcher>
+      <minimize-expand-button
+        .brandColor=${this.brandColor}
+        .onClick=${() => {
+          if (this.chatProvider === ChatProviders.PUBNUB) {
+            this.displayPubnubChat = false;
+          } else if (this.chatProvider === ChatProviders.TALKJS) {
+            this.popup?.hide();
+          }
+          this.hideLauncher = false;
+        }}
+      ></minimize-expand-button>
+    </div>`;
+  };
+
   private attachOnClickToLauncher = () => {
     const launcher = this.launcherRef.value;
     if (!launcher) {
@@ -622,12 +748,13 @@ export class MEChat extends LitElement {
     }
 
     launcher.onChatTapped = async () => {
-      if (!this.popup) {
-        return;
+      if (this.chatProvider === ChatProviders.PUBNUB) {
+        this.displayPubnubChat = true;
+      } else if (this.chatProvider === ChatProviders.TALKJS) {
+        if (!this.popup) return;
+        this.popup.show();
+        this.analytics?.ping("open");
       }
-
-      this.popup.show();
-      this.analytics?.ping("open");
       this.hideLauncher = true;
       this.hasMounted = true;
     };

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

@@ -0,0 +1,172 @@
+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;
+  }
+  #header {
+    height: 70px;
+    width: 100%;
+    background: white;
+    overflow: hidden;
+
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    padding: 24px;
+    justify-content: space-between;
+  }
+
+  #header-text {
+    font-size: 14px;
+    font-weight: bold;
+    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+  }
+  #exit-chat-bttn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+
+  #conversation-body {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    background: rgba(193, 193, 193, 0.5);
+    backdrop-filter: blur(4px);
+    overflow-y: scroll;
+
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  #message-thread-list {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 0px 16px;
+    gap: 16px;
+  }
+
+  .message-container {
+    display: flex;
+    padding: 6px;
+    width: fit-content;
+    max-width: calc(100% - 60px);
+    box-sizing: border-box;
+  }
+
+  .lead-message {
+    background: black;
+    border-radius: 8px 8px 0px 8px;
+
+    align-self: flex-end;
+    color: white;
+  }
+  .ai-message {
+    background: white;
+    border-radius: 10px 10px 10px 0px;
+    color: black;
+  }
+  .message-text {
+    font-size: 14px;
+    word-break: break-word;
+    margin: 0;
+    padding: 6px 12px;
+    line-height: 150%;
+    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+  }
+
+  .loading-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin: 5px;
+    animation: pulse 4s linear infinite;
+  }
+
+  .dot-1 {
+    background-color: #7d7d7d;
+    animation-delay: 0s;
+  }
+
+  .dot-2 {
+    background-color: #7d7d7d;
+    animation-delay: 1s;
+  }
+
+  .dot-3 {
+    background-color: #7d7d7d;
+    animation-delay: 2s;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-color: #7d7d7d;
+      transform: scale(1);
+    }
+    50% {
+      background-color: #c7c7c7;
+      transform: scale(2);
+    }
+    100% {
+      background-color: #7d7d7d;
+      transform: scale(1);
+    }
+  }
+
+  #footer {
+    height: 70px;
+    width: 100%;
+    background: black;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    gap: 16px;
+    padding: 24px;
+  }
+  #message-input {
+    height: 40px;
+    width: 100%;
+    box-sizing: border-box;
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 150%;
+    border: none;
+    color: white;
+    background: none;
+    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+  }
+  #message-input:focus {
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  #send-message-bttn {
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+`;

package/src/WebComponent/pubnub-chat.ts

@@ -0,0 +1,155 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { Building } from "../fetchBuildingInfo";
+import MyPubnub, { ChatMessage } from "../MyPubnub";
+import { SendMessageIconWhite, XBlackOutlineIcon } from "../svgIcons";
+import { defaultBrandColor } from "../themes";
+import { hexToAlmostWhite } from "../utils";
+import { pubnubChatStyles } from "./pubnub-chat-styles";
+
+@customElement("pubnub-chat")
+export class PubnubChat extends LitElement {
+  static styles = [pubnubChatStyles];
+
+  @property({ attribute: true })
+  channel: string | undefined;
+
+  @property({ attribute: true })
+  myPubnub: MyPubnub | undefined;
+
+  @property({ attribute: true })
+  buildingSlug: string | undefined;
+
+  @property({ attribute: true })
+  building: Building | undefined;
+
+  @property({ attribute: true })
+  brandColor: string = defaultBrandColor;
+
+  @property({ attribute: true })
+  onClickExit: () => void = () => ({});
+
+  @property({ attribute: true })
+  onMount: () => void = () => ({});
+
+  @query("#message-input", true)
+  messageInput!: HTMLInputElement;
+
+  @query("#conversation-body", true)
+  messageBody!: HTMLDivElement;
+
+  @state()
+  messages: ChatMessage[] = [];
+
+  @state()
+  isLoadingMessages = false;
+
+  sendMessage = async (message: string): Promise<void> => {
+    this.messageInput.value = "";
+    await this.myPubnub?.sendMessage(message);
+  };
+  firstUpdated(): void {
+    this.messages = this.myPubnub?.messages || [];
+    this.myPubnub?.addChatListener(
+      (response: { messages: ChatMessage[]; isLoading: boolean }) => {
+        this.messages = response.messages;
+        this.isLoadingMessages = response.isLoading;
+      }
+    );
+    this.onMount();
+  }
+  scrollToChatBottom = (): void => {
+    this.messageBody.scrollTo({
+      top: this.messageBody.scrollHeight - this.messageBody.clientHeight,
+      behavior: "smooth",
+    });
+  };
+
+  updated(): void {
+    this.scrollToChatBottom();
+  }
+
+  render(): TemplateResult {
+    if (
+      !this.channel ||
+      !this.myPubnub ||
+      !this.buildingSlug ||
+      !this.building
+    ) {
+      return html``; // error here
+    }
+    return html`
+      <div id="pubnub-chat-container">
+        <div
+          id="header"
+          style=${styleMap({
+            background:
+              this.brandColor !== defaultBrandColor
+                ? hexToAlmostWhite(this.brandColor, 0.6)
+                : this.brandColor,
+          })}
+        >
+          <div id="header-text">${this.building.name}</div>
+          <button id="exit-chat-bttn" @click=${this.onClickExit}>
+            ${XBlackOutlineIcon}
+          </button>
+        </div>
+        <div id="conversation-body">
+          <ul id="message-thread-list">
+            ${this.building.welcomeMessage
+              ? html` <li class="message-container ai-message">
+                  <p class="message-text">${this.building.welcomeMessage}</p>
+                </li>`
+              : ""}
+            ${this.messages.map((message) => {
+              return html`
+                <li
+                  class=${this.myPubnub?.isLeadMessage(message)
+                    ? "message-container lead-message"
+                    : "message-container ai-message"}
+                  key=${message.timetoken}
+                  style=${styleMap({
+                    background: this.myPubnub?.isLeadMessage(message)
+                      ? this.brandColor
+                      : undefined,
+                  })}
+                >
+                  <p class="message-text">
+                    ${message.message.text
+                      .split("\n")
+                      .map((line) => html`${line}<br />`)}
+                  </p>
+                </li>
+              `;
+            })}
+            ${this.isLoadingMessages
+              ? html`
+                  <li id="loading-message" class="message-container ai-message">
+                    <div class="loading-dot dot-1"></div>
+                    <div class="loading-dot dot-2"></div>
+                    <div class="loading-dot dot-3"></div>
+                  </li>
+                `
+              : ""}
+          </ul>
+        </div>
+        <div id="footer">
+          <input
+            id="message-input"
+            placeholder="Ask a question..."
+            @keydown=${(e: KeyboardEvent) => {
+              if (e.key === "Enter") this.sendMessage(this.messageInput.value);
+            }}
+          />
+          <button
+            id="send-message-bttn"
+            @click=${() => this.sendMessage(this.messageInput.value)}
+          >
+            ${SendMessageIconWhite}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+}