@meetelise/chat 1.3.0 → 1.4.2

package/{dist/src → public/ts-loader-build}/fetchBuildingInfo.d.ts

@@ -5,6 +5,7 @@ export interface Building {
     id: number;
     avatarInitials: string | null;
     avatarSrc: string | null;
+    avatarType: "image" | "initials" | null;
     backgroundColor: string | null;
     bannerColor: string | null;
     bannerTextColor: string | null;

package/public/ts-loader-build/utils.d.ts

@@ -0,0 +1 @@
+export declare function useInterval(callback: () => void, delay: number | null): void;

package/src/ChatBubble.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface ChatBubbleProps {
+  messages: {
+    title: string;
+    text: string;
+  }[];
+  triggerBounce: () => void;
+  onClick: () => void;
+}
+declare const ChatBubble: React.FunctionComponent<ChatBubbleProps>;
+export default ChatBubble;

package/src/ChatBubble.module.scss

@@ -0,0 +1,58 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;900&display=swap");
+
+$chatBubbleBackgroundColor: white;
+
+.chatBubble,
+.chatBubble * {
+  all: initial;
+}
+.chatBubble {
+  position: absolute;
+  right: 90px;
+  top: -55px;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  padding: 20px;
+  margin: auto;
+  background-color: $chatBubbleBackgroundColor;
+  color: #28273e;
+  border-radius: 20px 20px 0px 20px;
+  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 25%));
+}
+
+$chatBubbleTailWidth: 23px;
+
+.chatBubble::after {
+  content: "";
+  position: absolute;
+  background: radial-gradient(
+    ellipse 181% 42px at 90% 10%,
+    transparent 0,
+    transparent 50%,
+    $chatBubbleBackgroundColor 50%
+  );
+  width: $chatBubbleTailWidth;
+  height: $chatBubbleTailWidth;
+  right: -($chatBubbleTailWidth);
+  bottom: 0;
+}
+
+.title {
+  all: unset;
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 900;
+  font-size: 20px;
+  line-height: 22px;
+  margin: 0 0 0.05em 0;
+}
+
+.text {
+  all: unset;
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 22px;
+}

package/src/ChatBubble.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { useInterval } from "./utils";
+import styles from "./ChatBubble.module.scss";
+
+interface ChatBubbleProps {
+  messages: { title: string; text: string }[];
+  triggerBounce: () => void;
+  bounceIntervalInSeconds: number;
+  onClick: () => void;
+}
+
+const ChatBubble: React.FunctionComponent<ChatBubbleProps> = ({
+  messages,
+  triggerBounce,
+  bounceIntervalInSeconds,
+  onClick,
+}: ChatBubbleProps) => {
+  const [messageIndex, setMessageIndex] = useState(0);
+  const [message, setMessage] = useState(messages[messageIndex]);
+  const [weBouncedLauncher, setWeBouncedLauncher] = useState(false);
+
+  // if there are multiple messages, toggle between them and bounce the launcher
+  useInterval(
+    () => {
+      if (messageIndex + 1 < messages.length) {
+        const newIndex = messageIndex + 1;
+        const message = messages[newIndex];
+        triggerBounce();
+        setMessageIndex(newIndex);
+        setMessage(message);
+      }
+    },
+    messages.length > 1 ? bounceIntervalInSeconds * 1000 : null
+  );
+
+  // if there is only one message, bounce the launcher
+  useInterval(
+    () => {
+      triggerBounce();
+      setWeBouncedLauncher(true);
+    },
+    messages.length === 1 && !weBouncedLauncher
+      ? bounceIntervalInSeconds * 1000
+      : null
+  );
+
+  return (
+    <div className={styles.chatBubble} onClick={onClick}>
+      <h1 className={styles.title}>{message.title}</h1>
+      <span className={styles.text}>{message.text}</span>
+    </div>
+  );
+};
+
+export default ChatBubble;

package/src/DemoApp.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect } 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",
+    });
+    //////////////////////////////////////////////////
+    // 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);
+    }
+  }, []);
+
+  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>
+      <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>
+    </>
+  );
+};
+ReactDOM.render(<DemoApp />, document.getElementById("root"));

package/src/MEChat.d.ts

@@ -0,0 +1,65 @@
+import Talk from "talkjs";
+import { Theme } from "./resolveTheme";
+/**
+ * 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>;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * Clear all messages from the window and start a new conversation.
+   */
+  restartConversation(): void;
+  /**
+   * Update the theme of the running chat instance.
+   *
+   * @param theme The updated theme
+   */
+  setTheme(theme: Partial<Theme>): void;
+  /** Open the messages window */
+  open(): void;
+  /** Close the messages window */
+  close(): void;
+  /** Show the chat button on the screen if it was previously hidden. */
+  show(): void;
+  /** Hide the chat button from the screen (but don't remove from the DOM). */
+  hide(): void;
+  private buildingSlug;
+  private orgSlug;
+  private popup;
+  private launcher;
+  private building;
+  private theme;
+  private chatId;
+  private analytics;
+  private launchDarklyClient;
+  private launchDarklyIsReady;
+  private constructor();
+}
+export interface Options {
+  building: string;
+  organization: string;
+  theme?: Partial<Theme>;
+}

package/src/MEChat.module.scss

@@ -0,0 +1,59 @@
+.wrapper {
+  position: fixed;
+  display: flex;
+  bottom: 10vh;
+  right: 10vh;
+  z-index: 100000;
+}
+
+:global(#__talkjs_launcher):not(.shouldBeVisible) {
+  display: none;
+}
+
+:global(a#__talkjs_launcher) {
+  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.25);
+  background-position: 50% 50%;
+  background-size: 27px 27px;
+  background-color: white; // TODO: this makes the background color from the theme not apply. temporary because the icon looks bad with other colors right now.
+}
+
+:global(a#__talkjs_launcher).bouncingLauncherButton {
+  animation-name: bounce;
+  animation-duration: 1s;
+  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
+}
+
+/* https://css-tricks.com/making-css-animations-feel-natural/ */
+@keyframes bounce {
+  0% {
+    transform: scale(1, 1) translateY(0);
+  }
+  10% {
+    transform: scale(1.1, 0.9) translateY(0);
+  }
+  30% {
+    transform: scale(0.9, 1.1) translateY(-100px);
+  }
+  50% {
+    transform: scale(1.05, 0.95) translateY(0);
+  }
+  57% {
+    transform: scale(1, 1) translateY(-7px);
+  }
+  64% {
+    transform: scale(1, 1) translateY(0);
+  }
+  100% {
+    transform: scale(1, 1) translateY(0);
+  }
+}
+
+.fadeOut {
+  animation: fadeOut 0.5s;
+}
+
+@keyframes fadeOut {
+  to {
+    opacity: 0;
+  }
+}

package/src/MEChat.test.ts

@@ -1,7 +1,6 @@
 import { expect } from "@esm-bundle/chai";
 import { stub, restore } from "sinon/pkg/sinon-esm";
-import TalkJS from "talkjs";
-import MEChat from "./MEChat";
+import MEChat from "../public/dist/bundle";
 
 const stubResponse = {
   json: stub().resolves({
@@ -15,10 +14,6 @@ const stubResponse = {
   }),
 };
 
-beforeEach(async () => {
-  await TalkJS.ready;
-});
-
 afterEach(() => {
   restore();
 });
@@ -41,9 +36,10 @@ it("shows the chat icon", async function () {
   const launcher =
     document.querySelector<HTMLAnchorElement>(".__talkjs_launcher");
   expect(launcher).to.be.an.instanceof(HTMLAnchorElement);
-  const launcherStyle = window.getComputedStyle(launcher);
-  const launcherBG = launcherStyle.getPropertyValue("background-color");
-  expect(launcherBG).to.equal("rgb(180, 190, 0)");
+  // TODO: temporarily making the launcher always white because the new icon doesn't look good with all colors
+  // const launcherStyle = window.getComputedStyle(launcher);
+  // const launcherBG = launcherStyle.getPropertyValue("background-color");
+  // expect(launcherBG).to.equal("rgb(180, 190, 0)");
 
   // And the popup should be hidden
   const popup = document.querySelector<HTMLSpanElement>(".__talkjs_popup");
@@ -58,7 +54,7 @@ it("shows the chat icon", async function () {
   // Then the popup should be visible
   const popupStyle2 = window.getComputedStyle(popup);
   const popupDisplay2 = popupStyle2.getPropertyValue("display");
-  expect(popupDisplay2).to.equal("block");
+  expect(popupDisplay2).not.to.equal("none");
 
   // Ideally, expect welcome message, but we can't select inside the iframe
   // Ideally, expect theme colors, but we can't select inside the iframe

package/src/{MEChat.ts → MEChat.tsx}

@@ -5,6 +5,11 @@ import createConversation from "./createConversation";
 import installTalkJSStyles from "./installTalkJSStyles";
 import resolveTheme, { Theme } from "./resolveTheme";
 import Analytics from "./analytics";
+import ChatBubble from "./ChatBubble";
+import ReactDOM from "react-dom";
+import React from "react";
+import * as LDClient from "launchdarkly-js-client-sdk";
+import styles from "./MEChat.module.scss";
 
 /**
  * The interface to MeetElise chat.
@@ -118,6 +123,82 @@ export default class MEChat {
     this.launcher.then((a) => (a.style.display = "none"));
   }
 
+  /** Initialize the LaunchDarkly client so we can work with feature flags. */
+  private initializeLaunchDarkly(): [LDClient.LDClient, Promise<boolean>] {
+    const user = {
+      key: this.chatId,
+      custom: {
+        userType: "webchatUser",
+      },
+    };
+    const launchDarklyClient = LDClient.initialize(
+      process.env.LAUNCHDARKLY_CLIENT_ID || "",
+      user
+    );
+    const launchDarklyIsReady = new Promise((resolve) =>
+      launchDarklyClient.on("ready", resolve)
+    );
+    return [launchDarklyClient, launchDarklyIsReady as Promise<boolean>];
+  }
+
+  /** Show a speech bubble next to the chat button (launcher). Also adds some animations to the button. */
+  private addChatBubble(popup: Talk.Popup, launcher: HTMLAnchorElement): void {
+    const chatBubbleTarget = document.createElement("div");
+    // set up scroll listener before mounting the chat bubble component so we don't miss any scroll events
+    const closeChatBubble = (shouldFade = false) => {
+      if (shouldFade) {
+        chatBubbleTarget.classList.add(styles.fadeOut);
+        setTimeout(() => {
+          ReactDOM.unmountComponentAtNode(chatBubbleTarget);
+        }, 500);
+      } else {
+        ReactDOM.unmountComponentAtNode(chatBubbleTarget);
+      }
+    };
+    // wrap the launcher and chat bubble so we can position them together but also manipulate them independently
+    const wrapper = document.createElement("div");
+    // for us, the wrapper contains the chat bubble and launcher. for consumers, we'll just call the wrapper the launcher.
+    wrapper.classList.add(styles.wrapper, "meetelise-chat", "launcher");
+    launcher.parentNode?.appendChild(wrapper);
+    wrapper.appendChild(launcher);
+    wrapper.appendChild(chatBubbleTarget);
+    // TalkJS positions the launcher, but we want to control its position ourselves
+    launcher.style.position = "unset";
+    launcher.style.top = "unset";
+    launcher.style.right = "unset";
+    // we initially hide the launcher in CSS so it doesn't visibly jump when we remove the native TalkJS positioning. Unhide it now.
+    launcher.classList.add(styles.shouldBeVisible);
+
+    popup.on("open", () => closeChatBubble());
+    const triggerBounce = () => {
+      launcher.classList.add(styles.bouncingLauncherButton);
+      launcher.addEventListener("animationend", () => {
+        launcher.classList.remove(styles.bouncingLauncherButton);
+      });
+    };
+    const bounceInterval = 3;
+    ReactDOM.render(
+      <ChatBubble
+        messages={[
+          {
+            title: "Ask us a question",
+            text: "I can also help you schedule a tour.",
+          },
+        ]}
+        triggerBounce={triggerBounce}
+        bounceIntervalInSeconds={bounceInterval}
+        onClick={() => {
+          popup.show();
+          closeChatBubble();
+        }}
+      />,
+      chatBubbleTarget
+    );
+    setTimeout(() => closeChatBubble(true), bounceInterval * 1000 + 3000);
+    // TODO: remove? it seems to be triggered immediately on https://www.simpsonpropertygroup.com/apartments/houston-texas/skyhouse-river-oaks-galleria without scrolling
+    // document.addEventListener("scroll", () => closeChatBubble(true));
+  }
+
   private buildingSlug: string;
   private orgSlug: string;
   private popup: Promise<Talk.Popup>;
@@ -126,6 +207,8 @@ export default class MEChat {
   private theme: Partial<Theme>;
   private chatId: string;
   private analytics: Analytics;
+  private launchDarklyClient: LDClient.LDClient;
+  private launchDarklyIsReady: Promise<boolean>;
 
   private constructor({ organization, building, theme = {} }: Options) {
     this.orgSlug = organization;
@@ -133,9 +216,11 @@ export default class MEChat {
     this.chatId = getChatID(organization, building);
     this.analytics = new Analytics(organization, building, this.chatId);
     this.analytics.ping("load");
-
     this.theme = theme;
     this.building = fetchBuildingInfo(organization, building);
+    [this.launchDarklyClient, this.launchDarklyIsReady] =
+      this.initializeLaunchDarkly();
+
     this.popup = Promise.all([this.building, MEChat.session]).then(
       async ([building, session]) => {
         const resolvedTheme = (this.theme = resolveTheme(building, theme));
@@ -156,23 +241,42 @@ export default class MEChat {
           });
         }
         await p.mount({ show: false });
-        const popupEl = document.querySelector(".__talkjs_popup");
-        if (!popupEl) throw new Error("Failed to find chat window");
-        popupEl.classList.add("meetelise-chat");
-        popupEl.classList.add("pane");
+        const talkjsPopupElement = document.querySelector(".__talkjs_popup");
+        if (!talkjsPopupElement) throw new Error("Failed to find chat window");
+        talkjsPopupElement.classList.add("meetelise-chat", "pane");
         return p;
       }
     );
 
-    this.launcher = this.popup.then(() => {
-      const a = document.querySelector<HTMLAnchorElement>(
-        "a#__talkjs_launcher"
-      );
-      if (!a) throw new Error("MeetElise Chat: Could not locate launcher.");
-      a.classList.add("meetelise-chat");
-      a.classList.add("launcher");
-      return a;
-    });
+    this.launcher = Promise.all([this.popup, this.launchDarklyIsReady]).then(
+      async ([popup]) => {
+        const talkjsLauncherElement = document.querySelector<HTMLAnchorElement>(
+          "a#__talkjs_launcher"
+        );
+        if (!talkjsLauncherElement)
+          throw new Error("MeetElise Chat: Could not locate launcher.");
+
+        const webchatBubbleFlag = this.launchDarklyClient.variation(
+          "webchat-bubble",
+          false
+        );
+        this.analytics.setFeatureFlags({
+          webchatBubble: webchatBubbleFlag,
+        });
+        this.analytics.ping("receivedFeatureFlags");
+
+        if (webchatBubbleFlag || process.env.IS_DEMO_APP) {
+          this.addChatBubble(popup, talkjsLauncherElement);
+        } else {
+          talkjsLauncherElement.classList.add(
+            "meetelise-chat",
+            "launcher",
+            styles.shouldBeVisible
+          );
+        }
+        return talkjsLauncherElement;
+      }
+    );
   }
 }
 

package/src/analytics.ts

@@ -4,12 +4,24 @@
 export default class Analytics {
   private org: string;
   private building: string;
+  private featureFlags?: Record<string, boolean>;
   public chatId: string;
 
   constructor(org: string, building: string, chatId: string) {
     this.org = org;
     this.building = building;
     this.chatId = chatId;
+    this.featureFlags = {};
+  }
+
+  /**
+   * Store feature flag value(s) on the Analytics object to be sent with future pings. If `featureFlags` object is already present, the argument is merged into it.
+   */
+  setFeatureFlags(featureFlags: Record<string, boolean>): void {
+    this.featureFlags = {
+      ...this.featureFlags,
+      ...featureFlags,
+    };
   }
 
   /**
@@ -28,6 +40,7 @@ export default class Analytics {
         org: this.org,
         building: this.building,
         referrer: document.referrer,
+        featureFlags: this.featureFlags,
       }),
     });
   }

package/src/fetchBuildingInfo.ts

@@ -6,6 +6,7 @@ export interface Building {
 
   avatarInitials: string | null;
   avatarSrc: string | null;
+  avatarType: "image" | "initials" | null;
   backgroundColor: string | null;
   bannerColor: string | null;
   bannerTextColor: string | null;

package/src/getAvatarUrl.ts

@@ -12,7 +12,8 @@ import { Building } from "./fetchBuildingInfo";
  * @returns a URL suitable for use as a CSS background-image or <img> src.
  */
 export default function getAvatarURL(building: Building): string {
-  if (building.avatarSrc) return building.avatarSrc;
+  if (building.avatarType === "image" && building.avatarSrc)
+    return building.avatarSrc;
 
   const initials = building.avatarInitials;
   const bgColor = building.launchButtonColor;