@meetelise/chat 1.21.0 → 1.21.2

package/src/WebComponent/pubnub-chat.ts

@@ -0,0 +1,707 @@
+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 {
+  CheckboxEmpty,
+  HeyThereEmoji,
+  SendMessageIconBlack,
+  SendMessageIconBlackLarge,
+  SendMessageIconWhite,
+  XBlackOutlineIcon,
+} from "../svgIcons";
+import {
+  defaultBrandColor,
+  hexToAlmostWhite,
+  defaultBackgroundColor,
+} 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";
+
+@customElement("pubnub-chat")
+export class PubnubChat extends LitElement {
+  static styles = [
+    InputStyles,
+    pubnubChatStyles,
+    leasingChatStyles,
+    healthChatStyles,
+  ];
+
+  @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 })
+  building: Building | undefined;
+
+  @property({ attribute: true })
+  brandColor: string = defaultBrandColor;
+
+  @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> => {
+    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
+    }
+
+    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",
+      };
+    }
+
+    if (this.isHealthChat) {
+      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}>
+              ${XBlackOutlineIcon}
+            </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">
+                <p class="healthcare-disclaimer-inner">
+                  Hi! I am a third-party bot. Your messages with me are recorded
+                  by Forefront Dermatology and our vendors. By replying, you
+                  consent to
+                  <a
+                    href="https://www.eliseai.com/privacy/healthcare"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    this privacy policy</a
+                  >
+                  and to being contacted by a bot.
+                </p>
+              </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}
+                        >
+                        </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() ? SendMessageIconBlackLarge : SendMessageIconBlack}
+              </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)}
+      >
+        <div
+          id="leasing-header"
+          style=${styleMap({
+            background:
+              this.brandColor !== defaultBrandColor
+                ? hexToAlmostWhite(this.brandColor, 0.6)
+                : undefined,
+          })}
+        >
+          <div id="header-text">${this.building.name}</div>
+          <button id="exit-chat-bttn" @click=${this.onClickExit}>
+            ${XBlackOutlineIcon}
+          </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(),
+            })}
+          >
+            ${getChatDisclaimer(this.orgSlug ?? "")}
+            ${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}
+                  </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}
+                      >
+                      </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(),
+          })}
+        >
+          <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" &&
+                !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}
+          >
+            ${SendMessageIconWhite}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export const CURRENT_CONSENT_ID = "currentConsentId";
+
+const getChatDisclaimer = (orgSlug: string) => {
+  if (orgSlug === "avb") {
+    return html`
+      <li class="message-container disclaimer-message">
+        <p class="disclaimer-inner">
+          Chats may be recorded by us and our vendors.
+        </p>
+      </li>
+    `;
+  }
+  return html`<li class="message-container disclaimer-message">
+    <p class="disclaimer-inner">
+      By interacting with this system, you consent to
+      <a
+        href="http://bit.ly/me_privacy_policy"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        this privacy policy</a
+      >, including being contacted by AI or a human & having your conversation
+      recorded by a third party.
+    </p>
+  </li>`;
+};
+
+const getConsentPreChatDisclaimer = (
+  orgSlug: string | null,
+  privacyPolicyUrl: string,
+  consentKey: string,
+  changeConsent: (hasConsent: boolean) => void
+): TemplateResult => {
+  if (orgSlug === "avb" && !localStorage.getItem(consentKey ?? "")) {
+    return html`
+      <div class="legal-confirmation-inner-container">
+        <div>${HeyThereEmoji}</div>
+        <div>
+          <span style="font-weight: 600">Confirm to continue</span>
+          <p>
+            By using this feature you accept our
+            <a
+              href="https://www.avaloncommunities.com/terms-of-use"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="privacy-policy-link"
+              >Terms</a
+            >,
+            <a
+              href="https://www.avaloncommunities.com/privacy-policy"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="privacy-policy-link"
+              >Privacy Policy</a
+            >,
+            <a
+              href="https://www.avaloncommunities.com/us-state-privacy-notice"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="privacy-policy-link"
+              >U.S. State Privacy Notice</a
+            >, and that chats may use automated or AI responses from a bot and
+            may be recorded by us and our vendors.
+          </p>
+        </div>
+
+        <button
+          class="agreeButton"
+          @click=${() => {
+            changeConsent(true);
+            const consentData = {
+              consentGiven: true,
+              timestamp: new Date().getTime(),
+              consentId: CURRENT_CONSENT_ID,
+            };
+            localStorage.setItem(consentKey ?? "", JSON.stringify(consentData));
+          }}
+        >
+          I agree
+        </button>
+      </div>
+    `;
+  }
+  if (orgSlug === "mill-creek") {
+    return html`<div class="legal-confirmation-inner-container">
+      <div>${HeyThereEmoji}</div>
+      <div>
+        <span style="font-weight: 600">Confirm to continue</span>
+        <p>
+          Hello! I’m your virtual assistant, Milly, and I am here to help you
+          today. Before I can answer any questions, it is important that you
+          know I am a third-party bot, and I will be collecting our
+          communications and other information you provide, consistent with our
+          privacy policy.
+        </p>
+        <div class="confirmation-with-checkbox">
+          <div
+            class="checkbox"
+            @click=${() => {
+              changeConsent(true);
+            }}
+          >
+            ${CheckboxEmpty}
+          </div>
+          <p>
+            I agree to the
+            <a
+              href=${privacyPolicyUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="privacy-policy-link"
+            >
+              privacy policy</a
+            >
+            and terms and conditions, Let’s go!
+          </p>
+        </div>
+      </div>
+    </div>`;
+  }
+  return html` <div class="legal-confirmation-inner-container">
+    <div>${HeyThereEmoji}</div>
+    <div>
+      <span style="font-weight: 600">Confirm to continue</span>
+      <p>
+        Hello, before I can answer questions for you, it’s important that I let
+        you know that I am a third-party AI Assistant that will collect our
+        conversation and other information you provide, consistent with our
+        <a
+          href=${privacyPolicyUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="privacy-policy-link"
+        >
+          privacy policy</a
+        >.
+      </p>
+    </div>
+
+    <button
+      class="agreeButton"
+      @click=${() => {
+        changeConsent(true);
+      }}
+    >
+      I agree
+    </button>
+  </div>`;
+};