@meetelise/chat 1.6.0 → 1.6.3

package/src/MEChat.tsx

@@ -1,16 +1,19 @@
+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 ChatBubble from "./ChatBubble";
-import ReactDOM from "react-dom";
-import React from "react";
-import * as LDClient from "launchdarkly-js-client-sdk";
+import { isMobile } from "./utils";
+import InHouseLauncher from "./InHouseLauncher";
 import LaunchDarkly from "./launchDarklyManager";
 import styles from "./MEChat.module.scss";
+import { defaultThemeId, themesById } from "./themes";
 
 /**
  * The interface to MeetElise chat.
@@ -30,7 +33,7 @@ export default class MEChat {
       id: "anonymous",
       name: "Me",
       email: null,
-      role: "default",
+      role: "Default",
     });
     return new Talk.Session({
       appId: "ogKIvCor",
@@ -71,7 +74,8 @@ export default class MEChat {
             session,
             building,
             resolveTheme(building, this.theme),
-            this.chatId
+            this.chatId,
+            this.isMobile
           )
         );
       }
@@ -97,7 +101,13 @@ export default class MEChat {
           ...theme,
         }));
         popup.select(
-          createConversation(session, building, resolvedTheme, this.chatId)
+          createConversation(
+            session,
+            building,
+            resolvedTheme,
+            this.chatId,
+            this.isMobile
+          )
         );
         installTalkJSStyles(resolvedTheme);
         return new Promise(requestAnimationFrame);
@@ -120,6 +130,7 @@ 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 = ""));
   }
@@ -129,73 +140,57 @@ export default class MEChat {
     this.launcher.then((a) => (a.style.display = "none"));
   }
 
-  /** 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);
-      });
+  /** 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();
     };
-    const bounceInterval = 3;
+    const building = await this.building;
+    let theme = themesById[defaultThemeId];
+    if (Object.keys(themesById).includes(building.themeId)) {
+      theme = themesById[building.themeId as keyof typeof themesById];
+    }
     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();
-        }}
+      <InHouseLauncher
+        onChatTapped={chatTappedHandler}
+        mobile={this.isMobile}
+        firstMount={firstMount}
+        backgroundColor={theme.chatPaneBackgroundColor}
+        textColor={theme.chatHeader.textColor}
       />,
-      chatBubbleTarget
+      targetElement
     );
-    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 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;
   }
 
   private buildingSlug: string;
   private orgSlug: string;
   private popup: Promise<Talk.Popup>;
-  private launcher: Promise<HTMLAnchorElement>;
+  private launcher: Promise<HTMLElement>;
   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;
@@ -206,6 +201,8 @@ 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,
@@ -215,7 +212,18 @@ export default class MEChat {
       const resolvedTheme = (this.theme = resolveTheme(building, theme));
       installTalkJSStyles(resolvedTheme);
       const p = session.createPopup(
-        createConversation(session, building, resolvedTheme, this.chatId)
+        createConversation(
+          session,
+          building,
+          resolvedTheme,
+          this.chatId,
+          this.isMobile
+        ),
+        {
+          launcher: this.useInHouseLauncher ? "never" : "always",
+          showCloseInHeader: true,
+          messageField: { placeholder: "Ask a question..." },
+        }
       );
       p.on("open", () => {
         this.analytics.ping("open");
@@ -233,38 +241,35 @@ 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 ([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");
+      async () => {
+        let launcherElement: HTMLElement;
 
-        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);
+        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 {
-          talkjsLauncherElement.classList.add(
-            "meetelise-chat",
-            "launcher",
-            styles.shouldBeVisible
+          const talkjsLauncherElement = document.querySelector<HTMLElement>(
+            "a#__talkjs_launcher"
           );
+          if (!talkjsLauncherElement)
+            throw new Error("MeetElise Chat: Could not locate launcher.");
+          launcherElement = talkjsLauncherElement;
         }
-        return talkjsLauncherElement;
+
+        launcherElement.classList.add(
+          "meetelise-chat",
+          "launcher",
+          styles.shouldBeVisible
+        );
+
+        return launcherElement;
       }
     );
   }

package/src/createConversation.ts

@@ -2,35 +2,58 @@ 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
+  chatID: string,
+  isMobile: boolean
 ): Talk.ConversationBuilder {
   const agent = new Talk.User({
     id: `building_${building.id}`,
     name: building.userFirstName,
     email: null,
     photoUrl: getAvatarUrl(building),
-    role: "default",
+    role: "Default",
     welcomeMessage: building.welcomeMessage,
   });
   const conversation = session.getOrCreateConversation(chatID);
   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,20 +4,13 @@
 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;
@@ -26,6 +19,15 @@ 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;
 }
 
 /**

package/src/themes.ts

@@ -0,0 +1,88 @@
+export const white = "#FFFFFF";
+export const darkGray = "#202020";
+export const lightGray = "#83818E";
+
+export const defaultThemeId = "Light" as keyof typeof themesById;
+
+export const lightMessage = {
+  user: { textColor: white, backgroundColor: lightGray },
+  agent: { textColor: darkGray, backgroundColor: white },
+};
+export const darkMessage = {
+  user: { textColor: white, backgroundColor: lightGray },
+  agent: { textColor: white, backgroundColor: darkGray },
+};
+export const themesById = {
+  Light: {
+    chatHeader: {
+      backgroundColor: white,
+      textColor: darkGray,
+    },
+    chatPaneBackgroundColor: "rgba(255, 255, 255, 0.9)",
+    message: darkMessage,
+  },
+  Dark: {
+    chatHeader: {
+      backgroundColor: darkGray,
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(32, 32, 32, 0.9)",
+    message: lightMessage,
+  },
+  Purple: {
+    chatHeader: {
+      backgroundColor: "#550098",
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(85, 0, 152, 0.6)",
+    message: lightMessage,
+  },
+  Blue: {
+    chatHeader: {
+      backgroundColor: "#0814E5",
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(4, 17, 245, 0.6)",
+    message: lightMessage,
+  },
+  Teal: {
+    chatHeader: {
+      backgroundColor: "#6EE7ED",
+      textColor: darkGray,
+    },
+    chatPaneBackgroundColor: "rgba(115, 247, 253, 0.8)",
+    message: darkMessage,
+  },
+  Green: {
+    chatHeader: {
+      backgroundColor: "#147B0E",
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(13, 141, 5, 0.6)",
+    message: lightMessage,
+  },
+  Yellow: {
+    chatHeader: {
+      backgroundColor: "#F1E54F",
+      textColor: darkGray,
+    },
+    chatPaneBackgroundColor: "rgba(251, 239, 80, 0.9)",
+    message: darkMessage,
+  },
+  Orange: {
+    chatHeader: {
+      backgroundColor: "#C06C31",
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(238, 126, 49, 0.7)",
+    message: lightMessage,
+  },
+  Pink: {
+    chatHeader: {
+      backgroundColor: "#A24599",
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(167, 70, 157, 0.8)",
+    message: lightMessage,
+  },
+};

package/src/utils.ts

@@ -22,3 +22,6 @@ export function useInterval(callback: () => void, delay: number | null): void {
     return () => clearInterval(id);
   }, [delay]);
 }
+
+export const isMobile = (): boolean =>
+  window.matchMedia("(max-width: 767px)").matches;

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

@@ -1,12 +0,0 @@
-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;