@meetelise/chat 1.6.4 → 1.8.0

package/public/dist/src/themes.d.ts

@@ -0,0 +1,52 @@
+export declare const enum ThemeId {
+    Light = "Light",
+    Dark = "Dark",
+    Purple = "Purple",
+    Blue = "Blue",
+    Teal = "Teal",
+    Green = "Green",
+    Yellow = "Yellow",
+    Orange = "Orange",
+    Pink = "Pink"
+}
+export declare type ThemeIdString = `${ThemeId}`;
+export interface Theme {
+    chatHeader: {
+        backgroundColor: string;
+        textColor: string;
+    };
+    chatPaneBackgroundColor: string;
+    message: {
+        user: {
+            textColor: string;
+            backgroundColor: string;
+        };
+        agent: {
+            textColor: string;
+            backgroundColor: string;
+        };
+    };
+}
+export declare const defaultThemeId = ThemeId.Light;
+export declare const lightMessage: {
+    user: {
+        textColor: string;
+        backgroundColor: string;
+    };
+    agent: {
+        textColor: string;
+        backgroundColor: string;
+    };
+};
+export declare const darkMessage: {
+    user: {
+        textColor: string;
+        backgroundColor: string;
+    };
+    agent: {
+        textColor: string;
+        backgroundColor: string;
+    };
+};
+/** If `themeId` is a valid `ThemeId`, returns the corresponding theme. Otherwise returns the default theme. */
+export declare const getTheme: (themeId?: string | undefined) => Theme;

package/public/index.html

@@ -87,7 +87,7 @@
     </main>
     <script type="module">
       import { debounce } from "https://cdn.skypack.dev/lodash";
-      import MEChat from "./dist/bundle.js";
+      import MEChat from "./dist/index.js";
       const chat = MEChat.start({
         organization: "test-company",
         building: "e2e-test-yardi-building",

package/src/InHouseLauncher.module.scss

@@ -12,6 +12,7 @@ $glowBarGif: url("https://s3.us-west-2.amazonaws.com/meetelise.com/HorizontalBar
     all: revert;
   }
 
+  user-select: none;
   position: fixed;
   display: flex;
   justify-content: space-evenly;
@@ -19,11 +20,15 @@ $glowBarGif: url("https://s3.us-west-2.amazonaws.com/meetelise.com/HorizontalBar
   color: #202020;
   background-color: rgba(white, 0.8);
   backdrop-filter: blur(10px);
+  box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.25);
   font-family: Poppins;
 
   &:hover {
-    filter: brightness(150%);
-    background: blue;
+    background: radial-gradient(
+      36.85% 65.32% at 50% 106.31%,
+      #03ecc4 0%,
+      rgba(131, 129, 142, 1) 100%
+    );
   }
 
   &.mobile {

package/src/MEChat.test.ts

@@ -1,8 +1,6 @@
 import { expect } from "@esm-bundle/chai";
 import { stub, restore } from "sinon/pkg/sinon-esm";
-import MEChat from "../public/dist/bundle";
-
-const TIMEOUT = 15000;
+import MEChat from "../public/dist/index";
 
 const stubResponse = {
   json: stub().resolves({
@@ -27,7 +25,7 @@ const stubResponse = {
 
 const waitForElementWithSelectorToExist = async (
   selector: string,
-  target: Node = document.querySelector("body")
+  target: Node = document.body
 ): Promise<void> => {
   return new Promise<void>((resolve) => {
     // in case the element already exists
@@ -43,12 +41,14 @@ const waitForElementWithSelectorToExist = async (
   });
 };
 
+const wait = (delay, ...args) =>
+  new Promise((resolve) => setTimeout(resolve, delay, ...args));
+
 afterEach(() => {
   restore();
 });
 
-it.skip("shows the launcher", async function (done) {
-  this.timeout(TIMEOUT);
+it("shows the launcher", async function () {
   // Given an API that returns this building theme
   stub(window, "fetch").resolves(stubResponse);
 
@@ -71,21 +71,20 @@ it.skip("shows the launcher", async function (done) {
   const popupDisplay = popupStyle.getPropertyValue("display");
   expect(popupDisplay).to.equal("none");
 
-  // When I click the launcher
   launcher.click();
+  // Without waiting, the popup doesn't open in time for the next assertion
+  await wait(0);
 
   // Then the popup should be visible
   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 function () {
   // Given an API that returns this building theme
   stub(window, "fetch").resolves(stubResponse);
 
@@ -95,7 +94,7 @@ it.skip("works via the programmatic interface", async function () {
     building: "unit-test-building",
   });
 
-  await waitForElementWithSelectorToExist(".meetelise-chat.launcher");
+  await waitForElementWithSelectorToExist(".meetelise-chat.launcher > div");
 
   // Ideally, verify behavior, but this will at least verify nothing throws
   chat.show();

package/src/MEChat.tsx

@@ -6,14 +6,15 @@ 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 { Theme, ThemeIdString } from "./themes";
 import Analytics from "./analytics";
 import { isMobile } from "./utils";
 import InHouseLauncher from "./InHouseLauncher";
 import LaunchDarkly from "./launchDarklyManager";
 import styles from "./MEChat.module.scss";
-import { defaultThemeId, themesById } from "./themes";
+import { getTheme } from "./themes";
+
+const LAUNCHER_CLASSES = ["meetelise-chat", "launcher"];
 
 /**
  * The interface to MeetElise chat.
@@ -65,21 +66,26 @@ export default class MEChat {
    * Clear all messages from the window and start a new conversation.
    */
   restartConversation(): void {
-    Promise.all([MEChat.session, this.building, this.popup]).then(
-      ([session, building, popup]) => {
-        this.chatId = createChatID(this.orgSlug, this.buildingSlug);
-        this.analytics.chatId = this.chatId;
-        popup.select(
-          createConversation(
-            session,
-            building,
-            resolveTheme(building, this.theme),
-            this.chatId,
-            this.isMobile
-          )
-        );
-      }
-    );
+    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
+        )
+      );
+    });
   }
 
   /**
@@ -87,29 +93,28 @@ export default class MEChat {
    *
    * @param theme The updated theme
    */
-  setTheme(theme: Partial<Theme>): void {
+  // 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,
       LaunchDarkly.isReady,
     ])
-      .then(([session, building, popup]) => {
-        const resolvedTheme = (this.theme = resolveTheme(building, {
-          ...this.theme,
-          ...theme,
-        }));
+      .then(([session, building, theme, avatarSrc, popup]) => {
         popup.select(
           createConversation(
             session,
             building,
-            resolvedTheme,
+            { ...theme, ...newTheme },
+            avatarSrc || building.avatarSrc,
             this.chatId,
             this.isMobile
           )
         );
-        installTalkJSStyles(resolvedTheme);
         return new Promise(requestAnimationFrame);
       })
       .then(() => {
@@ -148,19 +153,15 @@ export default class MEChat {
     const chatTappedHandler = async () => {
       ReactDOM.unmountComponentAtNode(targetElement);
       (await this.popup).show();
+      this.analytics.ping("open");
     };
-    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(
       <InHouseLauncher
         onChatTapped={chatTappedHandler}
         mobile={this.isMobile}
         firstMount={firstMount}
-        backgroundColor={theme.chatPaneBackgroundColor}
-        textColor={theme.chatHeader.textColor}
+        backgroundColor={(await this.theme).chatPaneBackgroundColor}
+        textColor={(await this.theme).chatHeader.textColor}
       />,
       targetElement
     );
@@ -170,7 +171,9 @@ export default class MEChat {
     const inHouseLauncherTarget = document.createElement("div");
     inHouseLauncherTarget.classList.add(
       styles.inHouseLauncherContainer,
-      this.isMobile ? styles.mobile : styles.desktop
+      this.isMobile ? styles.mobile : styles.desktop,
+      ...LAUNCHER_CLASSES,
+      styles.shouldBeVisible
     );
     document.body.appendChild(inHouseLauncherTarget);
     this.mountInHouseLauncher(inHouseLauncherTarget, true);
@@ -185,37 +188,46 @@ export default class MEChat {
   private popup: Promise<Talk.Popup>;
   private launcher: Promise<HTMLElement>;
   private building: Promise<Building>;
-  private theme: Partial<Theme>;
+  private themeId?: ThemeIdString;
+  private theme: Promise<Theme>;
+  private avatarSrc?: Promise<null | string>;
   private chatId: string;
   private analytics: Analytics;
   private launchDarklyClient: LDClient.LDClient;
   private useInHouseLauncher: boolean;
   private isMobile: boolean;
 
-  private constructor({ organization, building, theme = {} }: Options) {
+  private constructor({ organization, building, themeId, avatarSrc }: Options) {
     this.orgSlug = organization;
     this.buildingSlug = building;
     this.chatId = getChatID(organization, building);
     this.analytics = new Analytics(organization, building, this.chatId);
     this.launchDarklyClient = LaunchDarkly.getClient(this.chatId);
     this.analytics.ping("load");
-    this.theme = theme;
     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.isMobile = isMobile();
 
     this.popup = Promise.all([
       this.building,
+      this.theme,
+      this.avatarSrc,
       MEChat.session,
       LaunchDarkly.isReady,
-    ]).then(async ([building, session]) => {
-      const resolvedTheme = (this.theme = resolveTheme(building, theme));
-      installTalkJSStyles(resolvedTheme);
-      const p = session.createPopup(
+    ]).then(async ([building, theme, avatarSrc, session]) => {
+      const popup = session.createPopup(
         createConversation(
           session,
           building,
-          resolvedTheme,
+          theme,
+          avatarSrc || building.avatarSrc,
           this.chatId,
           this.isMobile
         ),
@@ -225,9 +237,6 @@ export default class MEChat {
           messageField: { placeholder: "Ask a question..." },
         }
       );
-      p.on("open", () => {
-        this.analytics.ping("open");
-      });
       if (building.conversationMaintenanceMode) {
         return new Promise(() => {
           // If in maintenance mode, we return an always-pending Promise
@@ -237,7 +246,7 @@ export default class MEChat {
           );
         });
       }
-      await p.mount({ show: false });
+      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");
@@ -245,7 +254,7 @@ export default class MEChat {
         talkjsPopupElement.classList.add(styles.desktop);
       }
       (talkjsPopupElement as HTMLElement).style.zIndex = "99999999999";
-      return p;
+      return popup;
     });
 
     this.launcher = Promise.all([this.popup, LaunchDarkly.isReady]).then(
@@ -262,14 +271,12 @@ export default class MEChat {
           if (!talkjsLauncherElement)
             throw new Error("MeetElise Chat: Could not locate launcher.");
           launcherElement = talkjsLauncherElement;
+          launcherElement.classList.add(
+            ...LAUNCHER_CLASSES,
+            styles.shouldBeVisible
+          );
         }
 
-        launcherElement.classList.add(
-          "meetelise-chat",
-          "launcher",
-          styles.shouldBeVisible
-        );
-
         return launcherElement;
       }
     );
@@ -279,5 +286,6 @@ export default class MEChat {
 export interface Options {
   building: string;
   organization: string;
-  theme?: Partial<Theme>;
+  themeId?: ThemeIdString;
+  avatarSrc?: string;
 }

package/src/createConversation.ts

@@ -1,8 +1,7 @@
 import Talk from "talkjs";
 import { Building } from "./fetchBuildingInfo";
-import getAvatarUrl from "./getAvatarUrl";
-import { Theme } from "./resolveTheme";
-import { defaultThemeId, themesById } from "./themes";
+import { Theme } from "./themes";
+import { darkMessage } from "./themes";
 
 const defaultAvatarUrl =
   "https://s3.us-west-2.amazonaws.com/meetelise.com/looping-gradient.gif";
@@ -11,6 +10,7 @@ export default function createConversation(
   session: Talk.Session,
   building: Building,
   theme: Theme,
+  avatarSrc: Building["avatarSrc"],
   chatID: string,
   isMobile: boolean
 ): Talk.ConversationBuilder {
@@ -18,39 +18,33 @@ export default function createConversation(
     id: `building_${building.id}`,
     name: building.userFirstName,
     email: null,
-    photoUrl: getAvatarUrl(building),
     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.subject = building.chatTitle ?? building.userFirstName;
   conversation.custom = {
     buildingId: building.id.toString(),
     userId: building.userId.toString(),
     orgId: building.orgId.toString(),
-    subtitle: theme.chatSubtitle ?? null,
+    subtitle: building.chatSubtitle,
     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,
+    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,
+    // it is sometimes helpful to know inside TalkJS if the theme is a light theme (examples: Light, Teal, Yellow) or a dark theme (Dark, Purple, Green)
+    isLightTheme: (theme.message === darkMessage).toString(),
     avatarUrl:
       building.avatarType === "image" && building.avatarSrc
-        ? building.avatarSrc
+        ? avatarSrc
         : defaultAvatarUrl,
     // uncomment this to test changes to the default avatar if your test building has its own avatar
     // avatarUrl: defaultAvatarUrl,

package/src/fetchBuildingInfo.ts

@@ -3,31 +3,17 @@
  */
 export interface Building {
   id: number;
-
   themeId: string;
-  avatarInitials: string | null;
   avatarSrc: string | null;
   avatarType: "image" | "initials" | null;
   chatSubtitle: string | null;
   chatTitle: string | null;
-  logoSrc: string | null;
   name: string;
-  primaryColor: string | null;
   userFirstName: string;
   userId: number;
-  userLastName: string | null;
   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

@@ -1,8 +1,39 @@
-export const white = "#FFFFFF";
-export const darkGray = "#202020";
-export const lightGray = "#83818E";
+const white = "#FFFFFF";
+const darkGray = "#202020";
+const lightGray = "#83818E";
 
-export const defaultThemeId = "Light" as keyof typeof themesById;
+export const enum ThemeId {
+  Light = "Light",
+  Dark = "Dark",
+  Purple = "Purple",
+  Blue = "Blue",
+  Teal = "Teal",
+  Green = "Green",
+  Yellow = "Yellow",
+  Orange = "Orange",
+  Pink = "Pink",
+}
+export type ThemeIdString = `${ThemeId}`;
+
+export interface Theme {
+  chatHeader: {
+    backgroundColor: string;
+    textColor: string;
+  };
+  chatPaneBackgroundColor: string;
+  message: {
+    user: {
+      textColor: string;
+      backgroundColor: string;
+    };
+    agent: {
+      textColor: string;
+      backgroundColor: string;
+    };
+  };
+}
+
+export const defaultThemeId = ThemeId.Light;
 
 export const lightMessage = {
   user: { textColor: white, backgroundColor: lightGray },
@@ -12,8 +43,8 @@ export const darkMessage = {
   user: { textColor: white, backgroundColor: lightGray },
   agent: { textColor: white, backgroundColor: darkGray },
 };
-export const themesById = {
-  Light: {
+const themesById = {
+  [ThemeId.Light]: {
     chatHeader: {
       backgroundColor: white,
       textColor: darkGray,
@@ -21,7 +52,7 @@ export const themesById = {
     chatPaneBackgroundColor: "rgba(255, 255, 255, 0.9)",
     message: darkMessage,
   },
-  Dark: {
+  [ThemeId.Dark]: {
     chatHeader: {
       backgroundColor: darkGray,
       textColor: white,
@@ -29,7 +60,7 @@ export const themesById = {
     chatPaneBackgroundColor: "rgba(32, 32, 32, 0.9)",
     message: lightMessage,
   },
-  Purple: {
+  [ThemeId.Purple]: {
     chatHeader: {
       backgroundColor: "#550098",
       textColor: white,
@@ -37,7 +68,7 @@ export const themesById = {
     chatPaneBackgroundColor: "rgba(85, 0, 152, 0.6)",
     message: lightMessage,
   },
-  Blue: {
+  [ThemeId.Blue]: {
     chatHeader: {
       backgroundColor: "#0814E5",
       textColor: white,
@@ -45,7 +76,7 @@ export const themesById = {
     chatPaneBackgroundColor: "rgba(4, 17, 245, 0.6)",
     message: lightMessage,
   },
-  Teal: {
+  [ThemeId.Teal]: {
     chatHeader: {
       backgroundColor: "#6EE7ED",
       textColor: darkGray,
@@ -53,7 +84,7 @@ export const themesById = {
     chatPaneBackgroundColor: "rgba(115, 247, 253, 0.8)",
     message: darkMessage,
   },
-  Green: {
+  [ThemeId.Green]: {
     chatHeader: {
       backgroundColor: "#147B0E",
       textColor: white,
@@ -61,7 +92,7 @@ export const themesById = {
     chatPaneBackgroundColor: "rgba(13, 141, 5, 0.6)",
     message: lightMessage,
   },
-  Yellow: {
+  [ThemeId.Yellow]: {
     chatHeader: {
       backgroundColor: "#F1E54F",
       textColor: darkGray,
@@ -69,7 +100,7 @@ export const themesById = {
     chatPaneBackgroundColor: "rgba(251, 239, 80, 0.9)",
     message: darkMessage,
   },
-  Orange: {
+  [ThemeId.Orange]: {
     chatHeader: {
       backgroundColor: "#C06C31",
       textColor: white,
@@ -77,7 +108,7 @@ export const themesById = {
     chatPaneBackgroundColor: "rgba(238, 126, 49, 0.7)",
     message: lightMessage,
   },
-  Pink: {
+  [ThemeId.Pink]: {
     chatHeader: {
       backgroundColor: "#A24599",
       textColor: white,
@@ -86,3 +117,11 @@ export const themesById = {
     message: lightMessage,
   },
 };
+
+/** If `themeId` is a valid `ThemeId`, returns the corresponding theme. Otherwise returns the default theme. */
+export const getTheme = (themeId?: ThemeId | string): Theme =>
+  themesById[
+    themeId && Object.keys(themesById).includes(themeId)
+      ? (themeId as ThemeIdString)
+      : defaultThemeId
+  ];

package/tsconfig.json

@@ -17,7 +17,7 @@
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     "sourceMap": true /* Generates corresponding '.map' file. */,
     // "outFile": "./",                             /* Concatenate and emit output to single file. */
-    "outDir": "./public/ts-loader-build" /* Redirect output structure to the directory. */,
+    "outDir": "./public/dist" /* Redirect output structure to the directory. */,
     // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                           /* Enable project compilation */
     // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
@@ -73,5 +73,5 @@
     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
-  "include": ["./src/MEChat.tsx", "declarations.d.ts"]
+  "include": ["./src/MEChat.tsx", "declarations.d.ts", "index.ts"]
 }

package/webpack.config.cjs

@@ -38,8 +38,8 @@ module.exports = (env) => {
       outputModule: !env.isDemoApp,
     },
     output: {
-      filename: "bundle.js",
-      sourceMapFilename: "bundle.js.map",
+      filename: "index.js",
+      sourceMapFilename: "index.js.map",
       ...(env.isDemoApp
         ? {
             path: path.resolve(__dirname, "./public/demo/built"),