@meetelise/chat 1.5.0 → 1.6.2

package/public/dist/bundle.js.LICENSE.txt

@@ -4,12 +4,6 @@ object-assign
 @license MIT
 */
 
-/*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-
 /** @license React v0.20.2
  * scheduler.production.min.js
  *

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

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

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

@@ -46,9 +46,8 @@ export default class MEChat {
     show(): void;
     /** Hide the chat button from the screen (but don't remove from the DOM). */
     hide(): void;
-    /** Show a custom launcher designed in-house instead of the default TalkJS launcher. */
-    private mountInHouseLauncher;
-    private getInHouseLauncher;
+    /** Show a speech bubble next to the chat button (launcher). Also adds some animations to the button. */
+    private addChatBubble;
     private buildingSlug;
     private orgSlug;
     private popup;
@@ -58,8 +57,6 @@ export default class MEChat {
     private chatId;
     private analytics;
     private launchDarklyClient;
-    private useInHouseLauncher;
-    private isMobile;
     private constructor();
 }
 export interface Options {

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

@@ -1,4 +1,4 @@
 import Talk from "talkjs";
 import { Building } from "./fetchBuildingInfo";
 import { Theme } from "./resolveTheme";
-export default function createConversation(session: Talk.Session, building: Building, theme: Theme, chatID: string, isMobile: boolean): Talk.ConversationBuilder;
+export default function createConversation(session: Talk.Session, building: Building, theme: Theme, chatID: string): Talk.ConversationBuilder;

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

@@ -3,13 +3,20 @@
  */
 export interface Building {
     id: number;
-    themeId: string;
     avatarInitials: string | null;
     avatarSrc: string | null;
     avatarType: "image" | "initials" | null;
+    backgroundColor: string | null;
+    bannerColor: string | null;
+    bannerTextColor: string | null;
     chatSubtitle: string | null;
     chatTitle: string | null;
+    launchButtonColor: string | null;
+    launchButtonIconColor: string | null;
+    launchButtonSize: string | null;
     logoSrc: string | null;
+    messageColor: string | null;
+    messageTextColor: string | null;
     name: string;
     primaryColor: string | null;
     userFirstName: string;
@@ -18,14 +25,6 @@ export interface Building {
     welcomeMessage: string | null;
     conversationMaintenanceMode: boolean;
     orgId: number;
-    backgroundColor: string | null;
-    bannerColor: string | null;
-    bannerTextColor: string | null;
-    launchButtonColor: string | null;
-    launchButtonIconColor: string | null;
-    launchButtonSize: string | null;
-    messageColor: string | null;
-    messageTextColor: string | null;
 }
 /**
  * Load the publicly-available info for a building.

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

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

package/src/DemoApp.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { debounce } from "lodash";
 import MEChat from "./MEChat";
@@ -55,7 +55,6 @@ const DemoApp = () => {
     }
   }, []);
 
-  const [showCookieBanner, setShowCookieBanner] = useState(true);
   return (
     <>
       <h1>Example Page</h1>
@@ -81,31 +80,23 @@ const DemoApp = () => {
           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>
-      )}
+      <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>
     </>
   );
 };

package/src/MEChat.module.scss

@@ -1,23 +1,58 @@
+.wrapper {
+  position: fixed;
+  display: flex;
+  bottom: 10vh;
+  right: 10vh;
+  z-index: 100000;
+}
+
 :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;
+:global(a#__talkjs_launcher) {
+  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.25);
+  background-position: 50% 50%;
+  background-size: 27px 27px;
+}
+
+: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;
 }
 
-.inHouseLauncherContainer {
-  &.desktop {
-    // TODO: fix
-    width: 100px;
-    height: 100px;
-    position: relative;
-    overflow: hidden;
-  }
-  &.mobile {
-    width: 100%;
-    height: 100px;
+@keyframes fadeOut {
+  to {
+    opacity: 0;
   }
 }

package/src/MEChat.test.ts

@@ -2,25 +2,14 @@ import { expect } from "@esm-bundle/chai";
 import { stub, restore } from "sinon/pkg/sinon-esm";
 import MEChat from "../public/dist/bundle";
 
-const TIMEOUT = 15000;
-
 const stubResponse = {
   json: stub().resolves({
     id: 42,
-    userId: 42.1,
-    orgId: 42.2,
     name: "Unit Test Building",
-    themeId: null,
-    avatarSrc: null,
-    avatarType: "",
+    launchButtonColor: "rgb(180, 190, 0)",
     userFirstName: "Ella",
-    userLastName: "",
-    logoSrc:
-      "https://eliseusercontent.meetelise.com/building/3660/test-logo.png",
-    chatTitle: "Elise",
-    chatSubtitle: "Leasing Agent ExtraordinAIre",
-    welcomeMessage:
-      "Welcome, I'm Elise! If you have any questions about Unit Test Building or would like to schedule a tour, I'm happy to help.",
+    userId: 42.1,
+    orgId: 42.2,
     conversationMaintenanceMode: false,
   }),
 };
@@ -47,8 +36,7 @@ afterEach(() => {
   restore();
 });
 
-it.skip("shows the launcher", async function (done) {
-  this.timeout(TIMEOUT);
+it("shows the chat icon", async function () {
   // Given an API that returns this building theme
   stub(window, "fetch").resolves(stubResponse);
 
@@ -57,12 +45,16 @@ it.skip("shows the launcher", async function (done) {
     organization: "unit-test-org",
     building: "unit-test-building",
   });
-  await waitForElementWithSelectorToExist(".meetelise-chat.launcher > div");
+  await waitForElementWithSelectorToExist(".__talkjs_launcher");
 
-  // Then I should see a launcher
-  const launcher = document.querySelector<HTMLDivElement>(
-    ".meetelise-chat.launcher"
-  ).firstChild as HTMLDivElement;
+  // Then I should see a launcher with the right color
+  const launcher =
+    document.querySelector<HTMLAnchorElement>(".__talkjs_launcher");
+  expect(launcher).to.be.an.instanceof(HTMLAnchorElement);
+  // 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");
@@ -78,14 +70,12 @@ it.skip("shows the launcher", async function (done) {
   const popupStyle2 = window.getComputedStyle(popup);
   const popupDisplay2 = popupStyle2.getPropertyValue("display");
   expect(popupDisplay2).not.to.equal("none");
-  done();
+
   // Ideally, expect welcome message, but we can't select inside the iframe
   // Ideally, expect theme colors, but we can't select inside the iframe
 });
 
-it.skip("works via the programmatic interface", async function () {
-  this.timeout(TIMEOUT);
-
+it("works via the programmatic interface", async () => {
   // Given an API that returns this building theme
   stub(window, "fetch").resolves(stubResponse);
 
@@ -95,7 +85,7 @@ it.skip("works via the programmatic interface", async function () {
     building: "unit-test-building",
   });
 
-  await waitForElementWithSelectorToExist(".meetelise-chat.launcher");
+  await waitForElementWithSelectorToExist(".__talkjs_launcher");
 
   // Ideally, verify behavior, but this will at least verify nothing throws
   chat.show();

package/src/MEChat.tsx

@@ -1,19 +1,16 @@
-import * as LDClient from "launchdarkly-js-client-sdk";
-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 installTalkJSStyles from "./installTalkJSStyles";
 import resolveTheme, { Theme } from "./resolveTheme";
 import Analytics from "./analytics";
-import { isMobile } from "./utils";
-import InHouseLauncher from "./InHouseLauncher";
+import ChatBubble from "./ChatBubble";
+import ReactDOM from "react-dom";
+import React from "react";
+import * as LDClient from "launchdarkly-js-client-sdk";
 import LaunchDarkly from "./launchDarklyManager";
 import styles from "./MEChat.module.scss";
-import { defaultThemeId, themesById } from "./themes";
 
 /**
  * The interface to MeetElise chat.
@@ -74,8 +71,7 @@ export default class MEChat {
             session,
             building,
             resolveTheme(building, this.theme),
-            this.chatId,
-            this.isMobile
+            this.chatId
           )
         );
       }
@@ -101,13 +97,7 @@ export default class MEChat {
           ...theme,
         }));
         popup.select(
-          createConversation(
-            session,
-            building,
-            resolvedTheme,
-            this.chatId,
-            this.isMobile
-          )
+          createConversation(session, building, resolvedTheme, this.chatId)
         );
         installTalkJSStyles(resolvedTheme);
         return new Promise(requestAnimationFrame);
@@ -130,7 +120,6 @@ export default class MEChat {
   }
 
   /** 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 = ""));
   }
@@ -140,57 +129,73 @@ export default class MEChat {
     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();
+  /** 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 building = await this.building;
-    let theme = themesById[defaultThemeId];
-    if (Object.keys(themesById).includes(building.themeId)) {
-      theme = themesById[building.themeId as keyof typeof themesById];
-    }
+    const bounceInterval = 3;
     ReactDOM.render(
-      <InHouseLauncher
-        onChatTapped={chatTappedHandler}
-        mobile={this.isMobile}
-        firstMount={firstMount}
-        backgroundColor={theme.chatPaneBackgroundColor}
-        textColor={theme.chatHeader.textColor}
+      <ChatBubble
+        messages={[
+          {
+            title: "Ask us a question",
+            text: "I can also help you schedule a tour.",
+          },
+        ]}
+        triggerBounce={triggerBounce}
+        bounceIntervalInSeconds={bounceInterval}
+        onClick={() => {
+          popup.show();
+          closeChatBubble();
+        }}
       />,
-      targetElement
+      chatBubbleTarget
     );
-  }
-
-  private async getInHouseLauncher(): Promise<HTMLElement> {
-    const inHouseLauncherTarget = document.createElement("div");
-    inHouseLauncherTarget.classList.add(
-      styles.inHouseLauncherContainer,
-      this.isMobile ? styles.mobile : styles.desktop
-    );
-    document.body.appendChild(inHouseLauncherTarget);
-    this.mountInHouseLauncher(inHouseLauncherTarget, true);
-    (await this.popup).on("close", () => {
-      this.mountInHouseLauncher(inHouseLauncherTarget, false);
-    });
-    return inHouseLauncherTarget;
+    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>;
-  private launcher: Promise<HTMLElement>;
+  private launcher: Promise<HTMLAnchorElement>;
   private building: Promise<Building>;
   private theme: Partial<Theme>;
   private chatId: string;
   private analytics: Analytics;
   private launchDarklyClient: LDClient.LDClient;
-  private useInHouseLauncher: boolean;
-  private isMobile: boolean;
 
   private constructor({ organization, building, theme = {} }: Options) {
     this.orgSlug = organization;
@@ -201,8 +206,6 @@ export default class MEChat {
     this.analytics.ping("load");
     this.theme = theme;
     this.building = fetchBuildingInfo(organization, building);
-    this.useInHouseLauncher = true;
-    this.isMobile = isMobile();
 
     this.popup = Promise.all([
       this.building,
@@ -212,18 +215,7 @@ export default class MEChat {
       const resolvedTheme = (this.theme = resolveTheme(building, theme));
       installTalkJSStyles(resolvedTheme);
       const p = session.createPopup(
-        createConversation(
-          session,
-          building,
-          resolvedTheme,
-          this.chatId,
-          this.isMobile
-        ),
-        {
-          launcher: this.useInHouseLauncher ? "never" : "always",
-          showCloseInHeader: true,
-          messageField: { placeholder: "Ask a question..." },
-        }
+        createConversation(session, building, resolvedTheme, this.chatId)
       );
       p.on("open", () => {
         this.analytics.ping("open");
@@ -241,35 +233,38 @@ export default class MEChat {
       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);
-      }
       return p;
     });
 
     this.launcher = Promise.all([this.popup, LaunchDarkly.isReady]).then(
-      async () => {
-        let launcherElement: HTMLElement;
+      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 (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();
+        if (webchatBubbleFlag) {
+          // TODO: The new icon hasn't been designed for color customization yet, so temporarily disable the background theme color
+          talkjsLauncherElement.style.backgroundColor = "white";
+          this.addChatBubble(popup, talkjsLauncherElement);
         } else {
-          const talkjsLauncherElement = document.querySelector<HTMLElement>(
-            "a#__talkjs_launcher"
+          talkjsLauncherElement.classList.add(
+            "meetelise-chat",
+            "launcher",
+            styles.shouldBeVisible
           );
-          if (!talkjsLauncherElement)
-            throw new Error("MeetElise Chat: Could not locate launcher.");
-          launcherElement = talkjsLauncherElement;
         }
-
-        launcherElement.classList.add(
-          "meetelise-chat",
-          "launcher",
-          styles.shouldBeVisible
-        );
-
-        return launcherElement;
+        return talkjsLauncherElement;
       }
     );
   }

package/src/createConversation.ts

@@ -2,17 +2,12 @@ import Talk from "talkjs";
 import { Building } from "./fetchBuildingInfo";
 import getAvatarUrl from "./getAvatarUrl";
 import { Theme } from "./resolveTheme";
-import { defaultThemeId, themesById } from "./themes";
-
-const defaultAvatarUrl =
-  "https://s3.us-west-2.amazonaws.com/meetelise.com/looping-gradient.gif";
 
 export default function createConversation(
   session: Talk.Session,
   building: Building,
   theme: Theme,
-  chatID: string,
-  isMobile: boolean
+  chatID: string
 ): Talk.ConversationBuilder {
   const agent = new Talk.User({
     id: `building_${building.id}`,
@@ -26,34 +21,16 @@ export default function createConversation(
   conversation.subject = theme.chatTitle;
   conversation.setParticipant(session.me);
   conversation.setParticipant(agent);
-  // TODO: duplicate identifier theme
-  // TODO: typescript abuse
-  let themeId = defaultThemeId;
-  if (Object.keys(themesById).includes(building.themeId)) {
-    themeId = building.themeId as keyof typeof themesById;
-  }
-  const _theme = themesById[themeId];
   conversation.custom = {
     buildingId: building.id.toString(),
     userId: building.userId.toString(),
     orgId: building.orgId.toString(),
     subtitle: theme.chatSubtitle ?? null,
+    bannerColor: theme.bannerColor,
+    bannerTextColor: theme.bannerTextColor,
+    messageColor: theme.messageColor,
+    messageTextColor: theme.messageTextColor,
     url: location.href,
-    buildingName: building.name,
-    isMobile: isMobile.toString(),
-    chatHeaderBackgroundColor: _theme.chatHeader.backgroundColor,
-    chatHeaderTextColor: _theme.chatHeader.textColor,
-    chatPaneBackgroundColor: _theme.chatPaneBackgroundColor,
-    userMessageTextColor: _theme.message.user.textColor,
-    userMessageBackgroundColor: _theme.message.user.backgroundColor,
-    agentMessageTextColor: _theme.message.agent.textColor,
-    agentMessageBackgroundColor: _theme.message.agent.backgroundColor,
-    avatarUrl:
-      building.avatarType === "image" && building.avatarSrc
-        ? building.avatarSrc
-        : defaultAvatarUrl,
-    // uncomment this to test changes to the default avatar if your test building has its own avatar
-    // avatarUrl: defaultAvatarUrl,
   };
   return conversation;
 }

package/src/fetchBuildingInfo.ts

@@ -4,13 +4,20 @@
 export interface Building {
   id: number;
 
-  themeId: string;
   avatarInitials: string | null;
   avatarSrc: string | null;
   avatarType: "image" | "initials" | null;
+  backgroundColor: string | null;
+  bannerColor: string | null;
+  bannerTextColor: string | null;
   chatSubtitle: string | null;
   chatTitle: string | null;
+  launchButtonColor: string | null;
+  launchButtonIconColor: string | null;
+  launchButtonSize: string | null;
   logoSrc: string | null;
+  messageColor: string | null;
+  messageTextColor: string | null;
   name: string;
   primaryColor: string | null;
   userFirstName: string;
@@ -19,15 +26,6 @@ export interface Building {
   welcomeMessage: string | null;
   conversationMaintenanceMode: boolean;
   orgId: number;
-  // old: not sure if still present in API response, but we're not using (may have mised a few above)
-  backgroundColor: string | null;
-  bannerColor: string | null;
-  bannerTextColor: string | null;
-  launchButtonColor: string | null;
-  launchButtonIconColor: string | null;
-  launchButtonSize: string | null;
-  messageColor: string | null;
-  messageTextColor: string | null;
 }
 
 /**