@meetelise/chat 1.9.1 → 1.12.0

package/src/DemoApp.tsx

@@ -1,113 +0,0 @@
-import React, { useEffect, useState } from "react";
-import ReactDOM from "react-dom";
-import { debounce } from "lodash";
-import MEChat from "./MEChat";
-
-declare global {
-  interface Window {
-    chat: MEChat;
-  }
-}
-
-const DemoApp = () => {
-  useEffect(() => {
-    const chat = MEChat.start({
-      organization: "test-company",
-      building: "e2e-test-yardi-building",
-      // mini: true
-    });
-    //////////////////////////////////////////////////
-    // The above code is all a client would need.   //
-    // Below is some code to make local dev easier. //
-    //////////////////////////////////////////////////
-
-    // Put the chat instance on window so it's available in the console.
-
-    window.chat = chat;
-
-    // Reset on button click
-    document.getElementById("reset")?.addEventListener("click", () => {
-      chat.restartConversation();
-    });
-    const onChange = debounce((e) => {
-      chat.setTheme({ [e.target.name]: e.target.value });
-    }, 300);
-    document.querySelectorAll("#theme input").forEach((input) => {
-      input.addEventListener("input", onChange);
-    });
-
-    // Open the chat window shortly after the page loads/refreshes.
-    // setTimeout(() => chat.open(), 1000);
-
-    // Every x seconds, cycle through ui states. Close the window and
-    // remove the button from the screen, then show it and open the
-    // window. Set the DEBUG_cycle_ui_states boolean to false to disable.
-    const DEBUG_cycle_ui_states = false;
-    const period_seconds = 30;
-    if (DEBUG_cycle_ui_states) {
-      let seconds = 0;
-      setInterval(() => {
-        seconds = (seconds + 1) % period_seconds;
-        if (seconds === period_seconds - 4) chat.close();
-        if (seconds === period_seconds - 3) chat.hide();
-        if (seconds === period_seconds - 2) chat.show();
-        if (seconds === period_seconds - 1) chat.open();
-      }, 1000);
-    }
-  }, []);
-
-  const [showCookieBanner, setShowCookieBanner] = useState(true);
-  return (
-    <>
-      <h1>Example Page</h1>
-      <p>This is an example page for serving the chat widget locally.</p>
-      <button id="reset" type="button">
-        Restart conversation
-      </button>
-      <form id="theme" style={{ display: "flex", flexDirection: "column" }}>
-        <label htmlFor="chatTitle">Title</label>
-        <input type="text" id="chatTitle" name="chatTitle" />
-        <label htmlFor="chatSubtitle">Subtitle</label>
-        <input type="text" id="chatSubtitle" name="chatSubtitle" />
-        <label htmlFor="bannerColor">Banner Color</label>
-        <input type="text" id="bannerColor" name="bannerColor" />
-        <label htmlFor="bannerTextColor">Banner Text Color</label>
-        <input type="text" id="bannerTextColor" name="bannerTextColor" />
-        <label htmlFor="launchButtonColor">Launch Button Color</label>
-        <input type="text" id="launchButtonColor" name="launchButtonColor" />
-        <label htmlFor="launchButtonIconColor">Launch Button Icon Color</label>
-        <input
-          type="text"
-          id="launchButtonIconColor"
-          name="launchButtonIconColor"
-        />
-      </form>
-      {showCookieBanner && (
-        <div
-          id="bottomBanner"
-          style={{
-            position: "absolute",
-            bottom: 0,
-            left: 0,
-            width: "100%",
-            height: "20vh",
-            backgroundColor: "lightpink",
-            textAlign: "center",
-          }}
-        >
-          <p style={{ marginTop: "5em" }}>
-            Hi, I'm a banner that appears at the bottom of the screen! I eat
-            chat widgets for breakfast and I'll eat yours if you aren't careful!
-          </p>
-          <div
-            style={{ position: "absolute", top: "1rem", right: "1rem" }}
-            onClick={() => setShowCookieBanner(false)}
-          >
-            ✕
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-ReactDOM.render(<DemoApp />, document.getElementById("root"));

package/src/InHouseLauncher.module.scss

@@ -1,140 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
-
-$glowBarHeight: 11.2px;
-$enterAnimationDuration: 0.5s;
-$glowBarGif: url("https://s3.us-west-2.amazonaws.com/meetelise.com/HorizontalBar-Shadow.gif");
-$desktopZIndex: 100000; // on desktop, since the widget is small, it's ok to appear above a cookie banner
-
-@keyframes slideInFromRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-.launcher {
-  // CSS reset
-  all: initial;
-  // we want to isolate the app from the host page's styles, but not undo our own subcomponents' styles
-  *:not(svg, svg *, :global(.excludeFromReset)) {
-    all: revert;
-  }
-
-  &:not(.miniLauncher) {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    background-color: rgba(white, 0.8);
-    color: #202020;
-    backdrop-filter: blur(10px);
-    box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.25);
-
-    &.mobile {
-      width: 100%;
-      bottom: 0px;
-      padding: 5px;
-    }
-
-    &.desktop {
-      width: 272px;
-      height: 112px;
-    }
-  }
-
-  font-family: Poppins;
-  user-select: none;
-  position: fixed;
-
-  &:hover {
-    background: radial-gradient(
-      36.85% 65.32% at 50% 106.31%,
-      #03ecc4 0%,
-      rgba(131, 129, 142, 1) 100%
-    );
-  }
-
-  &.desktop {
-    right: 0px;
-    overflow: hidden;
-    border-radius: 10px 0px 0px 10px;
-    bottom: 40px;
-    z-index: $desktopZIndex;
-
-    &.firstMount {
-      animation: slideInFromRight $enterAnimationDuration;
-    }
-  }
-
-  .glowBar {
-    overflow: hidden;
-    background-image: $glowBarGif;
-    background-position: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: $glowBarHeight;
-    width: 100%;
-
-    & + * {
-      margin-top: calc($glowBarHeight + 8px);
-    }
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 6px;
-
-    .header {
-      display: flex;
-      align-items: center;
-
-      .headerText {
-        font-weight: 600;
-        font-size: 20px;
-      }
-    }
-
-    .subtitle {
-      font-size: 12px;
-      font-weight: 600;
-    }
-  }
-}
-
-.miniLauncher {
-  display: flex;
-  align-items: center;
-  background-color: #202020;
-  position: fixed;
-  height: 35px;
-
-  &:hover {
-    background: radial-gradient(
-      36.85% 65.32% at 50% 106.31%,
-      #03ecc4 0%,
-      rgba(131, 129, 142, 1) 100%
-    );
-  }
-
-  &.firstMount {
-    animation: slideInFromRight $enterAnimationDuration;
-  }
-
-  &.desktop {
-    padding-right: 20px;
-    right: 0px;
-    overflow: hidden;
-    bottom: 40px;
-    z-index: $desktopZIndex;
-  }
-
-  &.mobile {
-    right: 10px;
-    bottom: 20px;
-  }
-}

package/src/InHouseLauncher.tsx

@@ -1,65 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import ChatButton from "./ChatButton";
-import styles from "./InHouseLauncher.module.scss";
-
-interface InHouseLauncherProps {
-  onChatTapped: () => void;
-  mobile: boolean;
-  firstMount: boolean;
-  backgroundColor: string;
-  textColor: string;
-  mini: boolean;
-}
-const InHouseLauncher: React.FunctionComponent<InHouseLauncherProps> = ({
-  onChatTapped,
-  mobile,
-  firstMount,
-  backgroundColor,
-  textColor,
-  mini,
-}) => {
-  if (mini) {
-    return (
-      <ChatButton
-        className={classnames(
-          styles.miniLauncher,
-          "excludeFromReset",
-          mobile ? styles.mobile : styles.desktop,
-          { [styles.firstMount]: firstMount }
-        )}
-        text="Ask a question"
-        onClick={onChatTapped}
-      />
-    );
-  }
-
-  return (
-    <div
-      className={classnames(
-        styles.launcher,
-        mobile ? styles.mobile : styles.desktop,
-        { [styles.firstMount]: firstMount }
-      )}
-      style={{ backgroundColor, color: textColor }}
-      onClick={onChatTapped}
-    >
-      <div className={styles.glowBar}></div>
-      <div className={styles.content}>
-        <div className={styles.header}>
-          <ChatButton
-            text="Ask"
-            useGlowingBorder
-            className={"excludeFromReset"}
-          />
-          <span className={styles.headerText}>a question</span>
-        </div>
-        <span className={styles.subtitle}>
-          I can also help you schedule a tour.
-        </span>
-      </div>
-    </div>
-  );
-};
-
-export default InHouseLauncher;

package/src/MEChat.module.scss

@@ -1,22 +0,0 @@
-:global(#__talkjs_launcher):not(.shouldBeVisible) {
-  display: none;
-}
-
-// This docks the chat panel at the right edge of the screen.
-// The 25px is because .ChatBox is styled by TalkJS with `width: calc(100% - 25px)`.
-:global(.meetelise-chat.pane).desktop {
-  right: -25px;
-}
-
-.inHouseLauncherContainer {
-  &.desktop {
-    width: 100px;
-    height: 100px;
-    position: relative;
-    overflow: hidden;
-  }
-  &.mobile {
-    width: 100%;
-    height: 100px;
-  }
-}

package/src/MEChat.tsx

@@ -1,293 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import Talk from "talkjs";
-
-import fetchBuildingInfo, { Building } from "./fetchBuildingInfo";
-import { getChatID, createChatID } from "./chatID";
-import createConversation from "./createConversation";
-import { Theme, ThemeIdString } from "./themes";
-import Analytics from "./analytics";
-import { isMobile } from "./utils";
-import InHouseLauncher from "./InHouseLauncher";
-import styles from "./MEChat.module.scss";
-import { getTheme } from "./themes";
-
-const LAUNCHER_CLASSES = ["meetelise-chat", "launcher"];
-
-/**
- * The interface to MeetElise chat.
- *
- * To add meetelise chat to the screen, call its static method
- * `start()` with your building and organization slug.
- *
- * @example
- * MEChat.start({
- *   organization: 'the-jacobson-group',
- *   building: 'twin-rivers-pointe'
- * });
- */
-export default class MEChat {
-  static session: Promise<Talk.Session> = Talk.ready.then(() => {
-    const me = new Talk.User({
-      id: "anonymous",
-      name: "Me",
-      email: null,
-      role: "Default",
-    });
-    return new Talk.Session({
-      appId: "ogKIvCor",
-      me,
-    });
-  });
-
-  /**
-   * Start an instance of MeetElise chat and add to the web page.
-   *
-   * @param opts The organization, building, and theme overrides.
-   * @returns An instance of MeetElise chat.
-   */
-  static start(opts: Options): MEChat {
-    return new MEChat(opts);
-  }
-
-  /**
-   * Remove the instance from the screen.
-   *
-   * Chat will be unusable after this. If you just need to hide the
-   * chat button, use {@link MEChat#hide} instead.
-   */
-  remove(): void {
-    this.popup.then((p) => p.destroy());
-  }
-
-  /**
-   * Clear all messages from the window and start a new conversation.
-   */
-  restartConversation(): void {
-    Promise.all([
-      MEChat.session,
-      this.building,
-      this.theme,
-      this.avatarSrc,
-      this.popup,
-    ]).then(([session, building, theme, avatarSrc, popup]) => {
-      this.chatId = createChatID(this.orgSlug, this.buildingSlug);
-      this.analytics.chatId = this.chatId;
-      popup.select(
-        createConversation(
-          session,
-          building,
-          theme,
-          avatarSrc || building.avatarSrc,
-          this.chatId,
-          this.isMobile
-        )
-      );
-    });
-  }
-
-  /**
-   * Update the theme of the running chat instance.
-   *
-   * @param theme The updated theme
-   */
-  // TODO: probably want to replace theme argument with themeId, avatarSrc
-  setTheme(newTheme: Partial<Theme>): void {
-    const focusedElement = document.activeElement;
-    Promise.all([
-      MEChat.session,
-      this.building,
-      this.theme,
-      this.avatarSrc,
-      this.popup,
-    ])
-      .then(([session, building, theme, avatarSrc, popup]) => {
-        popup.select(
-          createConversation(
-            session,
-            building,
-            { ...theme, ...newTheme },
-            avatarSrc || building.avatarSrc,
-            this.chatId,
-            this.isMobile
-          )
-        );
-        return new Promise(requestAnimationFrame);
-      })
-      .then(() => {
-        if (!focusedElement) return;
-        if (focusedElement instanceof HTMLElement) focusedElement.focus();
-        else focusedElement.parentElement?.focus();
-      });
-  }
-
-  /** Open the messages window */
-  open(): void {
-    this.popup.then((p) => p.show());
-  }
-
-  /** Close the messages window */
-  close(): void {
-    this.popup.then((p) => p.hide());
-  }
-
-  /** Show the chat button on the screen if it was previously hidden. */
-  // TODO: will this work with the new launcher? it needs to be display flex? will this just change the inline style and leave the stylesheet/style tag alone?
-  show(): void {
-    this.launcher.then((a) => (a.style.display = ""));
-  }
-
-  /** Hide the chat button from the screen (but don't remove from the DOM). */
-  hide(): void {
-    this.launcher.then((a) => (a.style.display = "none"));
-  }
-
-  /** Show a custom launcher designed in-house instead of the default TalkJS launcher. */
-  private async mountInHouseLauncher(
-    targetElement: HTMLElement,
-    firstMount: boolean
-  ): Promise<void> {
-    const chatTappedHandler = async () => {
-      ReactDOM.unmountComponentAtNode(targetElement);
-      (await this.popup).show();
-      this.analytics.ping("open");
-    };
-    ReactDOM.render(
-      <InHouseLauncher
-        onChatTapped={chatTappedHandler}
-        mobile={this.isMobile}
-        firstMount={firstMount}
-        backgroundColor={(await this.theme).chatPaneBackgroundColor}
-        textColor={(await this.theme).chatHeader.textColor}
-        mini={this.useMiniWidget}
-      />,
-      targetElement
-    );
-  }
-
-  private async getInHouseLauncher(): Promise<HTMLElement> {
-    const inHouseLauncherTarget = document.createElement("div");
-    inHouseLauncherTarget.classList.add(
-      styles.inHouseLauncherContainer,
-      this.isMobile ? styles.mobile : styles.desktop,
-      ...LAUNCHER_CLASSES,
-      styles.shouldBeVisible
-    );
-    document.body.appendChild(inHouseLauncherTarget);
-    this.mountInHouseLauncher(inHouseLauncherTarget, true);
-    (await this.popup).on("close", () => {
-      this.mountInHouseLauncher(inHouseLauncherTarget, false);
-    });
-    return inHouseLauncherTarget;
-  }
-
-  private buildingSlug: string;
-  private orgSlug: string;
-  private popup: Promise<Talk.Popup>;
-  private launcher: Promise<HTMLElement>;
-  private building: Promise<Building>;
-  private themeId?: ThemeIdString;
-  private theme: Promise<Theme>;
-  private avatarSrc?: Promise<null | string>;
-  private chatId: string;
-  private analytics: Analytics;
-  private useInHouseLauncher: boolean;
-  private useMiniWidget: boolean;
-  private isMobile: boolean;
-
-  private constructor({
-    organization,
-    building,
-    themeId,
-    avatarSrc,
-    mini = false,
-  }: Options) {
-    this.orgSlug = organization;
-    this.buildingSlug = building;
-    this.chatId = getChatID(organization, building);
-    this.analytics = new Analytics(organization, building, this.chatId);
-    this.analytics.ping("load");
-    this.building = fetchBuildingInfo(organization, building);
-    this.themeId = themeId;
-    this.theme = this.building.then((building) =>
-      getTheme(themeId || building.themeId)
-    );
-    this.avatarSrc = this.building.then(
-      (building) => avatarSrc || building.avatarSrc
-    );
-    this.useInHouseLauncher = true;
-    this.useMiniWidget = mini;
-    this.isMobile = isMobile();
-
-    this.popup = Promise.all([
-      this.building,
-      this.theme,
-      this.avatarSrc,
-      MEChat.session,
-    ]).then(async ([building, theme, avatarSrc, session]) => {
-      const popup = session.createPopup(
-        createConversation(
-          session,
-          building,
-          theme,
-          avatarSrc || building.avatarSrc,
-          this.chatId,
-          this.isMobile
-        ),
-        {
-          launcher: this.useInHouseLauncher ? "never" : "always",
-          showCloseInHeader: true,
-          messageField: { placeholder: "Ask a question..." },
-        }
-      );
-      if (building.conversationMaintenanceMode) {
-        return new Promise(() => {
-          // If in maintenance mode, we return an always-pending Promise
-          // eslint-disable-next-line no-console
-          console.warn(
-            "MeetElise Chat is in maintenance mode. Chat icon will not appear."
-          );
-        });
-      }
-      await popup.mount({ show: false });
-      const talkjsPopupElement = document.querySelector(".__talkjs_popup");
-      if (!talkjsPopupElement) throw new Error("Failed to find chat window");
-      talkjsPopupElement.classList.add("meetelise-chat", "pane");
-      if (!this.isMobile) {
-        talkjsPopupElement.classList.add(styles.desktop);
-      }
-      (talkjsPopupElement as HTMLElement).style.zIndex = "99999999999";
-      return popup;
-    });
-
-    this.launcher = Promise.all([this.popup]).then(async () => {
-      let launcherElement: HTMLElement;
-
-      if (this.useInHouseLauncher) {
-        // TODO: there's a big delay between page load and the launcher getting added, maybe 2s. Maybe put it earlier even if it has to wait for TalkJS to load to be functional?
-        launcherElement = await this.getInHouseLauncher();
-      } else {
-        const talkjsLauncherElement = document.querySelector<HTMLElement>(
-          "a#__talkjs_launcher"
-        );
-        if (!talkjsLauncherElement)
-          throw new Error("MeetElise Chat: Could not locate launcher.");
-        launcherElement = talkjsLauncherElement;
-        launcherElement.classList.add(
-          ...LAUNCHER_CLASSES,
-          styles.shouldBeVisible
-        );
-      }
-
-      return launcherElement;
-    });
-  }
-}
-
-export interface Options {
-  building: string;
-  organization: string;
-  themeId?: ThemeIdString;
-  avatarSrc?: string;
-  mini?: boolean;
-}