@meetelise/chat 1.35.0 → 1.35.1

package/src/WebComponent/pubnub-chat.ts

@@ -0,0 +1,771 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { Building } from "../fetchBuildingInfo";
+import MyPubnub, {
+  SimpleMessageTypes,
+  SimpleChatMessage,
+  isSimpleMediaChatMessage,
+  isSimpleTextChatMessage,
+} from "../MyPubnub";
+import {
+  defaultPrimaryColor,
+  hexToAlmostWhite,
+  defaultBackgroundColor,
+  shouldUsePrimaryColorForChatFooter,
+} from "../themes";
+import { isMobile } from "../utils";
+import { InputStyles } from "./actions/InputStyles";
+import { healthChatStyles } from "./healthchat-styles";
+import { leasingChatStyles } from "./leasing-chat-styles";
+import { pubnubChatStyles } from "./pubnub-chat-styles";
+import "./pubnub-message";
+import "./pubnub-media";
+import classNames from "classnames";
+import { differenceInDays } from "date-fns";
+import { WidgetType } from "../main/MEChat";
+import { utiltiesChatStyles } from "./utilities-styles";
+import { XOutlineIcon } from "./icons/XOutlineIcon";
+import {
+  SendMessageLargeIcon,
+  SendMessageMediumIcon,
+} from "./icons/SendMessageIcon";
+import {
+  inChatThreadDisclaimer,
+  CURRENT_CONSENT_ID,
+  getConsentPreChatDisclaimer,
+} from "../disclaimers";
+
+@customElement("pubnub-chat")
+export class PubnubChat extends LitElement {
+  static styles = [
+    InputStyles,
+    pubnubChatStyles,
+    leasingChatStyles,
+    healthChatStyles,
+    utiltiesChatStyles,
+  ];
+
+  @property({ type: Number })
+  private right = undefined;
+
+  @property({ type: Number })
+  private bottom = undefined;
+
+  @property({ type: Number })
+  private top = undefined;
+
+  @property({ type: Number })
+  private left = undefined;
+
+  @property({ attribute: true })
+  onMount: () => void = () => ({});
+
+  @property({ attribute: true })
+  channel: string | undefined;
+
+  @property({ attribute: true })
+  isHealthChat = false;
+
+  @property({ attribute: true })
+  myPubnub: MyPubnub | undefined;
+
+  @property({ attribute: true })
+  orgSlug: string | undefined;
+
+  @property({ attribute: true })
+  buildingSlug: string | undefined;
+
+  @property({ attribute: true })
+  widgetType: WidgetType = WidgetType.Default;
+
+  @property({ attribute: true })
+  building: Building | undefined;
+
+  @property({ attribute: true })
+  primaryColor: string = defaultPrimaryColor;
+
+  @property({ attribute: true })
+  backgroundColor: string = defaultBackgroundColor;
+
+  @property({ attribute: true })
+  onClickExit: () => void = () => {
+    localStorage.setItem("isChatOpen", "false");
+  };
+
+  @property({ attribute: true })
+  requiresConsent = false;
+
+  @query("#message-input", true)
+  messageInput!: HTMLTextAreaElement;
+
+  @query("#conversation-body", true)
+  messageBody!: HTMLDivElement;
+
+  @state()
+  messages: SimpleChatMessage[] = [];
+
+  @state()
+  isLoadingMessages = false;
+
+  @state()
+  hasReceivedConsent = false;
+
+  @state()
+  privacyPolicyUrl = "http://bit.ly/me_privacy_policy";
+
+  @state()
+  websitePreviewMapping: {
+    [messageId: string]: {
+      title: string | null;
+      description: string | null;
+      image: string | null;
+      favicon: string | null;
+      isLoading: boolean;
+    }[];
+  } = {};
+
+  get consentKey(): string {
+    return `${this.orgSlug}Consent`;
+  }
+
+  sendMessage = async (message: string): Promise<void> => {
+    if (message.length === 0) {
+      return;
+    }
+    this.messageInput.value = "";
+    this.autoResizeMessageInput();
+
+    // The first message triggers a channel creation which can take a few seconds,
+    // so we immediately add the message to the UI to avoid a delay.
+    if (this.messages.length === 0) {
+      this.messages = [
+        {
+          timestamp: 0,
+          message,
+          isLeadMessage: true,
+          chunks: [{ text: message, order: 0, isDone: true }],
+          type: SimpleMessageTypes.text,
+        },
+      ];
+    }
+    await this.myPubnub?.sendMessage(message);
+  };
+
+  firstUpdated(): void {
+    this.messages = this.myPubnub?.simpleChatMessages || [];
+    this.myPubnub?.addChatListener(
+      (response: { messages: SimpleChatMessage[]; isLoading: boolean }) => {
+        this.messages = response.messages;
+        this.isLoadingMessages = response.isLoading;
+      }
+    );
+    this.onMount();
+
+    const rawConsentData = localStorage.getItem(this.consentKey);
+    if (!rawConsentData) {
+      this.hasReceivedConsent = false;
+      return;
+    }
+    const parsedConsentData = JSON.parse(rawConsentData);
+    const { timestamp, consentId } = parsedConsentData;
+    const ageInDays = differenceInDays(new Date(), new Date(timestamp));
+    const isConsentValid = ageInDays < 7;
+    const isConsentIdCurrent = consentId === CURRENT_CONSENT_ID;
+    if (isConsentValid && isConsentIdCurrent) {
+      this.hasReceivedConsent = true;
+    } else {
+      this.hasReceivedConsent = false;
+      localStorage.removeItem(this.consentKey);
+    }
+  }
+
+  scrollToChatBottom = (): void => {
+    this.messageBody.scrollTo({
+      top: this.messageBody.scrollHeight - this.messageBody.clientHeight,
+      behavior: "smooth",
+    });
+  };
+
+  async updated(): Promise<void> {
+    this.scrollToChatBottom();
+    try {
+      const modal = document.getElementById("#healthchat-container");
+      if (!modal) return;
+      modal.focus();
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  }
+
+  autoResizeMessageInput = (): void => {
+    this.messageInput.style.height = "auto";
+    this.messageInput.style.height = this.messageInput.scrollHeight + "px";
+  };
+
+  needsConsent = (): boolean => {
+    return this.requiresConsent && !this.hasReceivedConsent;
+  };
+
+  render(): TemplateResult {
+    if (!this.buildingSlug) {
+      return html``; // error should be here
+    }
+
+    const buildingId = this.building?.id;
+    let styles = {};
+    if (isMobile()) {
+      styles = {
+        top: undefined,
+        bottom: 0,
+        left: undefined,
+        right: 0,
+      };
+    } else {
+      styles = {
+        top:
+          this.top !== undefined && !isNaN(this.top)
+            ? `${this.top}px`
+            : undefined,
+        bottom:
+          this.bottom !== undefined && !isNaN(this.bottom)
+            ? `${this.bottom}px`
+            : "130px",
+        left:
+          this.left !== undefined && !isNaN(this.left)
+            ? `${this.left}px`
+            : undefined,
+        right:
+          this.right !== undefined && !isNaN(this.right)
+            ? `${this.right}px`
+            : "18px",
+      };
+    }
+    /**
+     * This chat window uses 'Poppins' as its font, but https://www.120ninthst.com/ seemingly installs a 'Poppins' font that is
+     * not the same as the Google Font 'Poppins'. This causes the chat window to look different from the rest of the website. This
+     * is a special case/hack to just change to a system default font for this building.
+     */
+    if (buildingId === 22320) {
+      styles = {
+        ...styles,
+        fontFamily: `"Helvetica Neue", Arial`,
+      };
+    }
+
+    if (this.widgetType === WidgetType.Utilities) {
+      return html`
+        <div
+          id="utilities-container"
+          class=${classMap({
+            ["pubnub-container__mobile"]: isMobile(),
+            ["utilities-container__desktop"]: !isMobile(),
+          })}
+          style=${styleMap(styles)}
+        >
+          <div id="utilities-header">
+            <div>
+              <div id="header-text">Utilities Chat</div>
+            </div>
+            <button
+              id="exit-chat-bttn"
+              @click=${this.onClickExit}
+              aria-label="Close chat"
+            >
+              ${XOutlineIcon("black")}
+            </button>
+          </div>
+          <div
+            class=${classMap({
+              ["hidden"]: !this.needsConsent(),
+              ["legal-confirmation-container"]: true,
+            })}
+          >
+            ${getConsentPreChatDisclaimer(
+              this.orgSlug ?? null,
+              this.privacyPolicyUrl,
+              this.consentKey,
+              (hasConsent: boolean) => {
+                this.hasReceivedConsent = hasConsent;
+              }
+            )}
+          </div>
+          <div
+            id="conversation-body"
+            class=${classMap({
+              ["hidden"]: this.needsConsent(),
+              ["utilities-conversation-body-backdrop"]: true,
+            })}
+          >
+            <ul
+              id="message-thread-list"
+              class=${classMap({
+                ["hidden"]: this.needsConsent(),
+              })}
+            >
+              <li class="utilities-disclaimer-message">
+                ${inChatThreadDisclaimer({
+                  orgSlug: this.orgSlug ?? "",
+                  type: "utilities",
+                  buildingState: this.building?.state ?? null,
+                })}
+              </li>
+              <li class="message-container ai-message">
+                <p
+                  class=${classMap({
+                    ["message-text-large"]: true,
+                    ["webchat-font__desktop"]: !isMobile(),
+                    ["webchat-font__mobile"]: isMobile(),
+                  })}
+                >
+                  Hi I'm Elise. How can I assist you today?
+                </p>
+              </li>
+              ${this.messages.map((message) => {
+                return html`
+                  <li
+                    class=${message.isLeadMessage
+                      ? "message-container lead-message"
+                      : "message-container ai-message"}
+                    key=${message.timestamp}
+                  >
+                    ${isSimpleMediaChatMessage(message)
+                      ? html` <pubnub-media
+                          .message=${message}
+                          .myPubnub=${this.myPubnub}
+                          .onMount=${() => this.scrollToChatBottom()}
+                        >
+                        </pubnub-media>`
+                      : ""}
+                    ${isSimpleTextChatMessage(message)
+                      ? html` <pubnub-message
+                          .message=${message}
+                          .myPubnub=${this.myPubnub}
+                          .onMount=${() => this.scrollToChatBottom()}
+                          .isLeadMessage=${message.isLeadMessage}
+                          .buildingSlug=${this.buildingSlug}
+                          .widgetType=${this.widgetType}
+                        >
+                        </pubnub-message>`
+                      : ""}
+                  </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="utilities-footer"
+            class=${classMap({
+              ["hidden"]: this.needsConsent(),
+            })}
+          >
+            <div id="utilities-inner-footer">
+              <textarea
+                id="message-input"
+                class=${classMap({
+                  ["webchat-font__desktop"]: !isMobile(),
+                  ["webchat-font__mobile"]: isMobile(),
+                })}
+                placeholder="Ask a Question..."
+                @keydown=${(e: KeyboardEvent) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    this.sendMessage(this.messageInput.value);
+                  }
+                }}
+                @input=${() => this.autoResizeMessageInput()}
+                rows="1"
+                tabindex="0"
+              ></textarea>
+              <button
+                id="utilities-send-message-bttn"
+                class=${classMap({
+                  ["health-bttn-allow-access"]: isMobile(),
+                })}
+                @click=${() => this.sendMessage(this.messageInput.value)}
+              >
+                ${SendMessageLargeIcon("black")}
+              </button>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    if (this.widgetType === WidgetType.Healthcare) {
+      return html`
+        <div
+          id="healthchat-container"
+          class=${classMap({
+            ["pubnub-container__mobile"]: isMobile(),
+            ["healthchat-container__desktop"]: !isMobile(),
+          })}
+          style=${styleMap(styles)}
+        >
+          <div id="healthchat-header">
+            ${this.buildingSlug === "6a9e65e5-9699-4c96-af75-1741d0df79aa"
+              ? html` <div>
+                  <div id="header-text">Premier Dematology</div>
+                  <div id="healthchat-header-subtext">
+                    Recorded by Forefront Dermatology and our vendors.
+                  </div>
+                </div>`
+              : html``}
+
+            <button
+              id="exit-chat-bttn"
+              @click=${this.onClickExit}
+              aria-label="Close chat"
+            >
+              ${XOutlineIcon("black")}
+            </button>
+          </div>
+          <div
+            class=${classMap({
+              ["hidden"]: !this.needsConsent(),
+              ["legal-confirmation-container"]: true,
+            })}
+          >
+            ${getConsentPreChatDisclaimer(
+              this.orgSlug ?? null,
+              this.privacyPolicyUrl,
+              this.consentKey,
+              (hasConsent: boolean) => {
+                this.hasReceivedConsent = hasConsent;
+              }
+            )}
+          </div>
+          <div
+            id="conversation-body"
+            class=${classMap({
+              ["hidden"]: this.needsConsent(),
+              ["healthcare-conversation-body-backdrop"]: true,
+            })}
+          >
+            <ul
+              id="message-thread-list"
+              class=${classMap({
+                ["hidden"]: this.needsConsent(),
+              })}
+            >
+              <li class="healthcare-disclaimer-message">
+                ${inChatThreadDisclaimer({
+                  orgSlug: this.orgSlug ?? "",
+                  type: "healthcare",
+                  buildingState: this.building?.state ?? null,
+                })}
+              </li>
+              <li class="message-container ai-message">
+                <p
+                  class=${classMap({
+                    ["message-text"]: true,
+                    ["webchat-font__desktop"]: !isMobile(),
+                    ["webchat-font__mobile"]: isMobile(),
+                  })}
+                >
+                  Hi I'm Elise. If this is a medical emergency, please call 911.
+                  How can I assist you today?
+                </p>
+              </li>
+              ${this.messages.map((message) => {
+                return html`
+                  <li
+                    class=${message.isLeadMessage
+                      ? "message-container lead-message"
+                      : "message-container ai-message"}
+                    key=${message.timestamp}
+                  >
+                    ${isSimpleMediaChatMessage(message)
+                      ? html` <pubnub-media
+                          .message=${message}
+                          .myPubnub=${this.myPubnub}
+                          .onMount=${() => this.scrollToChatBottom()}
+                        >
+                        </pubnub-media>`
+                      : ""}
+                    ${isSimpleTextChatMessage(message)
+                      ? html` <pubnub-message
+                          .message=${message}
+                          .myPubnub=${this.myPubnub}
+                          .onMount=${() => this.scrollToChatBottom()}
+                          .isLeadMessage=${message.isLeadMessage}
+                          .buildingSlug=${this.buildingSlug}
+                          .widgetType=${this.widgetType}
+                        >
+                        </pubnub-message>`
+                      : ""}
+                  </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="healthcare-footer"
+            class=${classMap({
+              ["hidden"]: this.needsConsent(),
+            })}
+          >
+            <div id="healthcare-inner-footer">
+              <textarea
+                id="message-input"
+                class=${classMap({
+                  ["webchat-font__desktop"]: !isMobile(),
+                  ["webchat-font__mobile"]: isMobile(),
+                })}
+                placeholder="Ask a Question..."
+                @keydown=${(e: KeyboardEvent) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    this.sendMessage(this.messageInput.value);
+                  }
+                }}
+                @input=${() => this.autoResizeMessageInput()}
+                rows="1"
+                tabindex="0"
+              ></textarea>
+              <button
+                id="healthcare-send-message-bttn"
+                class=${classMap({
+                  ["health-bttn-allow-access"]: isMobile(),
+                })}
+                @click=${() => this.sendMessage(this.messageInput.value)}
+              >
+                ${isMobile()
+                  ? SendMessageLargeIcon("black")
+                  : SendMessageMediumIcon("black")}
+              </button>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    if (!this.building) {
+      return html``;
+    }
+
+    const orgId = this.building.orgId;
+    return html`
+      <div
+        id="pubnub-chat-container"
+        class=${classMap({
+          ["pubnub-container__mobile"]: isMobile(),
+          ["pubnub-container__desktop"]: !isMobile(),
+        })}
+        style=${styleMap(styles)}
+        @keydown=${(e: KeyboardEvent) => e.stopPropagation()}
+        @keyup=${(e: KeyboardEvent) => e.stopPropagation()}
+      >
+        <div
+          id="leasing-header"
+          style=${styleMap({
+            background:
+              this.primaryColor !== defaultPrimaryColor
+                ? hexToAlmostWhite(this.primaryColor, 0.6)
+                : undefined,
+          })}
+        >
+          <div id="header-text">${this.building.name}</div>
+          <button
+            id="exit-chat-bttn"
+            @click=${this.onClickExit}
+            aria-label="Close chat"
+          >
+            ${XOutlineIcon("black")}
+          </button>
+        </div>
+        <div
+          class=${classMap({
+            ["hidden"]: !this.needsConsent(),
+            ["legal-confirmation-container"]: true,
+          })}
+        >
+          ${getConsentPreChatDisclaimer(
+            this.orgSlug ?? null,
+            this.privacyPolicyUrl,
+            this.consentKey,
+            (hasConsent: boolean) => {
+              this.hasReceivedConsent = hasConsent;
+            }
+          )}
+        </div>
+        <div
+          id="conversation-body"
+          style=${styleMap({
+            background:
+              this.building.orgId === 444
+                ? "rgba(229, 229, 229, 1);"
+                : undefined,
+          })}
+          class=${classMap({
+            ["hidden"]: this.needsConsent(),
+            ["leasing-conversation-body-backdrop"]: true,
+          })}
+        >
+          <ul
+            id="message-thread-list"
+            class=${classMap({
+              ["hidden"]: this.needsConsent(),
+            })}
+          >
+            ${inChatThreadDisclaimer({
+              orgSlug: this.orgSlug ?? "",
+              buildingState: this.building?.state ?? null,
+              type: "leasing",
+            })}
+            ${this.building.welcomeMessage
+              ? html` <li
+                  class=${classMap({
+                    "message-container": true,
+                    "ai-message": true,
+                    "with-box-shadow": orgId === 444,
+                  })}
+                >
+                  <p
+                    class=${classMap({
+                      ["message-text"]: true,
+                      ["webchat-font__desktop"]: !isMobile(),
+                      ["webchat-font__mobile"]: isMobile(),
+                    })}
+                  >
+                    ${this.building.welcomeMessage
+                      .split("\n")
+                      .map((line) => html`${line}<br />`)}
+                  </p>
+                </li>`
+              : ""}
+            ${this.messages.map((message) => {
+              return html`
+                <li
+                  class=${classNames("message-container", {
+                    "lead-message": message.isLeadMessage,
+                    "ai-message": !message.isLeadMessage,
+                    "with-box-shadow": orgId === 444,
+                  })}
+                  key=${message.timestamp}
+                >
+                  ${isSimpleMediaChatMessage(message)
+                    ? html` <pubnub-media
+                        .message=${message}
+                        .myPubnub=${this.myPubnub}
+                        .onMount=${() => this.scrollToChatBottom()}
+                      >
+                      </pubnub-media>`
+                    : ""}
+                  ${isSimpleTextChatMessage(message)
+                    ? html` <pubnub-message
+                        .message=${message}
+                        .myPubnub=${this.myPubnub}
+                        .onMount=${() => this.scrollToChatBottom()}
+                        .isLeadMessage=${message.isLeadMessage}
+                        .buildingSlug=${this.buildingSlug}
+                        .widgetType=${this.widgetType}
+                      >
+                      </pubnub-message>`
+                    : ""}
+                </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"
+          class=${classMap({
+            ["hidden"]: this.needsConsent(),
+          })}
+          style=${styleMap({
+            background:
+              shouldUsePrimaryColorForChatFooter(
+                this.building.orgId,
+                this.building.id
+              ) && this.primaryColor !== defaultPrimaryColor
+                ? hexToAlmostWhite(this.primaryColor, 0.6)
+                : undefined,
+          })}
+        >
+          <textarea
+            id="message-input"
+            class=${classMap({
+              ["webchat-font__desktop"]: !isMobile(),
+              ["webchat-font__mobile"]: isMobile(),
+            })}
+            style=${styleMap({
+              color:
+                shouldUsePrimaryColorForChatFooter(
+                  this.building.orgId,
+                  this.building.id
+                ) && this.primaryColor !== defaultPrimaryColor
+                  ? "black"
+                  : undefined,
+            })}
+            placeholder="Ask a question..."
+            @keydown=${(e: KeyboardEvent) => {
+              if (
+                e.key === "Enter" &&
+                !this.myPubnub?.isCurrentlyStreamingMessage
+              ) {
+                e.preventDefault();
+                this.sendMessage(this.messageInput.value);
+              }
+            }}
+            @input=${() => this.autoResizeMessageInput()}
+            rows="1"
+            tabindex="0"
+          ></textarea>
+          <button
+            tabindex="0"
+            id="send-message-bttn"
+            @click=${() => this.sendMessage(this.messageInput.value)}
+            ?disabled=${this.myPubnub?.isCurrentlyStreamingMessage}
+            aria-label="Send message"
+            aria-describedby="Send message"
+          >
+            ${shouldUsePrimaryColorForChatFooter(
+              this.building.orgId,
+              this.building.id
+            ) && this.primaryColor !== defaultPrimaryColor
+              ? SendMessageMediumIcon("black")
+              : SendMessageMediumIcon("white")}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+}