@meetelise/chat 1.9.0 → 1.9.1

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface ChatButtonProps {
+    text: string;
+    onClick?: React.MouseEventHandler;
+    className?: string;
+    useGlowingBorder?: boolean;
+}
+declare const ChatButton: React.FunctionComponent<ChatButtonProps>;
+export default ChatButton;

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface ChatIconProps {
+    className?: string;
+}
+declare const ChatIcon: React.FunctionComponent<ChatIconProps>;
+export default ChatIcon;

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

@@ -5,6 +5,7 @@ interface InHouseLauncherProps {
     firstMount: boolean;
     backgroundColor: string;
     textColor: string;
+    mini: boolean;
 }
 declare const InHouseLauncher: React.FunctionComponent<InHouseLauncherProps>;
 export default InHouseLauncher;

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

@@ -60,6 +60,7 @@ export default class MEChat {
     private chatId;
     private analytics;
     private useInHouseLauncher;
+    private useMiniWidget;
     private isMobile;
     private constructor();
 }
@@ -68,4 +69,5 @@ export interface Options {
     organization: string;
     themeId?: ThemeIdString;
     avatarSrc?: string;
+    mini?: boolean;
 }

package/public/index.html

@@ -50,10 +50,6 @@
         font-family: monospace;
         font-size: 1.5em;
       }
-      .meetelise-chat.launcher {
-        bottom: -12px;
-        right: 100px;
-      }
       .meetelise-chat.pane {
         bottom: 48px;
         right: 75px;
@@ -92,43 +88,47 @@
         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. //
-      //////////////////////////////////////////////////
+      //////////////////////////////////////////////////////////////////
+      // The above code is all a client would need.                   //
+      // Below is some code to make local dev easier.                 //
+      // Comment out `localDevHelper();` if you don't want to use it. //
+      //////////////////////////////////////////////////////////////////
 
-      // Put the chat instance on window so it's available in the console.
-      window.chat = chat;
+      const localDevHelper = () => {
+        // 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);
-      });
+        // 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);
+        // 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.
-      let 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);
-      }
+        // 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.
+        let 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);
+        }
+      };
+      // localDevHelper();
     </script>
   </body>
 </html>

package/src/ChatButton.module.scss

@@ -0,0 +1,52 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+
+$borderRadius: 40px;
+$glowBarGif: url("https://s3.us-west-2.amazonaws.com/meetelise.com/HorizontalBar-Shadow.gif");
+
+.chatButton {
+  //   CSS reset
+  all: unset;
+  /* `all:revert` does stuff to SVG properties that is maybe explained here (https://stackoverflow.com/a/46760690).
+  In our case it prevents the chat icon from being white. */
+  *:not(svg, svg *) {
+    all: revert;
+  }
+
+  font-family: Poppins;
+  display: flex;
+  align-items: center;
+  background-color: #202020;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+  border: 2px solid white;
+  border-radius: $borderRadius;
+  color: white;
+  font-weight: 700;
+  font-size: 20px;
+  padding: 2px 15px;
+  margin-right: 7px;
+  user-select: none;
+  position: relative;
+}
+
+// TODO: the CSS reset undoes these styles. Figure out a better solution than !important on everything
+// Possibly a specificity issue: things were working before commit 03f8503 split ChatButton out from InHouseLauncher
+.chatButtonGlowingBorder {
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+  z-index: -1 !important;
+  background-image: $glowBarGif !important;
+  border-radius: $borderRadius !important;
+  height: 125% !important;
+  width: 108% !important;
+}
+
+.chatButtonWord {
+  margin-left: 7px !important;
+}
+
+.headerText {
+  font-weight: 600 !important;
+  font-size: 20px !important;
+}

package/src/ChatButton.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import ChatIcon from "./ChatIcon";
+import styles from "./ChatButton.module.scss";
+import classnames from "classnames";
+
+interface ChatButtonProps {
+  text: string;
+  onClick?: React.MouseEventHandler;
+  className?: string;
+  useGlowingBorder?: boolean;
+}
+
+const ChatButton: React.FunctionComponent<ChatButtonProps> = ({
+  text,
+  onClick,
+  className,
+  useGlowingBorder = false,
+}: ChatButtonProps) => (
+  <div className={classnames(styles.chatButton, className)} onClick={onClick}>
+    {useGlowingBorder && <div className={styles.chatButtonGlowingBorder}></div>}
+    <ChatIcon />
+    <span className={styles.chatButtonWord}>{text}</span>
+  </div>
+);
+
+export default ChatButton;

package/src/ChatIcon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface ChatIconProps {
+  className?: string;
+}
+
+const ChatIcon: React.FunctionComponent<ChatIconProps> = ({
+  className,
+}: ChatIconProps) => (
+  <svg
+    className={className}
+    style={{ height: "14px" }}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.2 10.8H6C5.68174 10.8 5.37652 10.9264 5.15147 11.1515C4.92643 11.3765 4.8 11.6817 4.8 12C4.8 12.3183 4.92643 12.6235 5.15147 12.8485C5.37652 13.0736 5.68174 13.2 6 13.2H13.2C13.5183 13.2 13.8235 13.0736 14.0485 12.8485C14.2736 12.6235 14.4 12.3183 14.4 12C14.4 11.6817 14.2736 11.3765 14.0485 11.1515C13.8235 10.9264 13.5183 10.8 13.2 10.8ZM18 6H6C5.68174 6 5.37652 6.12643 5.15147 6.35147C4.92643 6.57652 4.8 6.88174 4.8 7.2C4.8 7.51826 4.92643 7.82348 5.15147 8.04853C5.37652 8.27357 5.68174 8.4 6 8.4H18C18.3183 8.4 18.6235 8.27357 18.8485 8.04853C19.0736 7.82348 19.2 7.51826 19.2 7.2C19.2 6.88174 19.0736 6.57652 18.8485 6.35147C18.6235 6.12643 18.3183 6 18 6ZM20.4 0H3.6C2.64522 0 1.72955 0.379285 1.05442 1.05442C0.379285 1.72955 0 2.64522 0 3.6V15.6C0 16.5548 0.379285 17.4705 1.05442 18.1456C1.72955 18.8207 2.64522 19.2 3.6 19.2H17.508L21.948 23.652C22.0601 23.7632 22.1931 23.8512 22.3393 23.9109C22.4855 23.9706 22.6421 24.0009 22.8 24C22.9574 24.0041 23.1136 23.9712 23.256 23.904C23.4751 23.814 23.6627 23.6611 23.7951 23.4646C23.9275 23.2682 23.9988 23.0369 24 22.8V3.6C24 2.64522 23.6207 1.72955 22.9456 1.05442C22.2705 0.379285 21.3548 0 20.4 0ZM21.6 19.908L18.852 17.148C18.7399 17.0368 18.6069 16.9488 18.4607 16.8891C18.3145 16.8294 18.1579 16.7991 18 16.8H3.6C3.28174 16.8 2.97652 16.6736 2.75147 16.4485C2.52643 16.2235 2.4 15.9183 2.4 15.6V3.6C2.4 3.28174 2.52643 2.97652 2.75147 2.75147C2.97652 2.52643 3.28174 2.4 3.6 2.4H20.4C20.7183 2.4 21.0235 2.52643 21.2485 2.75147C21.4736 2.97652 21.6 3.28174 21.6 3.6V19.908Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default ChatIcon;

package/src/DemoApp.tsx

@@ -14,6 +14,7 @@ const DemoApp = () => {
     const chat = MEChat.start({
       organization: "test-company",
       building: "e2e-test-yardi-building",
+      // mini: true
     });
     //////////////////////////////////////////////////
     // The above code is all a client would need.   //

package/src/InHouseLauncher.module.scss

@@ -3,25 +3,49 @@
 $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;
-  // exclude the chat icon: `all:revert` does stuff to SVG properties that is maybe explained here (https://stackoverflow.com/a/46760690). In our case it prevents it from being white.
-  *:not(.chatIcon *) {
+  // 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;
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  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 {
     background: radial-gradient(
@@ -31,40 +55,15 @@ $glowBarGif: url("https://s3.us-west-2.amazonaws.com/meetelise.com/HorizontalBar
     );
   }
 
-  &.mobile {
-    width: 100%;
-    bottom: 0px;
-    padding: 5px;
-
-    .content {
-      margin-top: calc($glowBarHeight + 8px);
-    }
-  }
-
   &.desktop {
-    width: 272px;
-    height: 112px;
     right: 0px;
     overflow: hidden;
     border-radius: 10px 0px 0px 10px;
     bottom: 40px;
-    z-index: 100000; // on desktop, since the widget is small, it's ok to appear above a cookie banner
-
-    .content {
-      margin-top: calc($glowBarHeight);
-    }
+    z-index: $desktopZIndex;
 
     &.firstMount {
-      animation: slideIn $enterAnimationDuration;
-    }
-
-    @keyframes slideIn {
-      from {
-        transform: translateX(100%);
-      }
-      to {
-        transform: translateX(0);
-      }
+      animation: slideInFromRight $enterAnimationDuration;
     }
   }
 
@@ -77,55 +76,23 @@ $glowBarGif: url("https://s3.us-west-2.amazonaws.com/meetelise.com/HorizontalBar
     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;
-      margin-bottom: 10px;
-
-      $borderRadius: 40px;
-
-      .chatButton {
-        position: relative;
-        display: flex;
-        align-items: center;
-        background-color: #202020;
-        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-        border: 2px solid white;
-        border-radius: $borderRadius;
-        color: white;
-        font-weight: 700;
-        font-size: 20px;
-        padding: 2px 15px;
-        margin-right: 7px;
-
-        .chatButtonGlowingBorder {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          z-index: -1;
-          background-image: $glowBarGif;
-          border-radius: $borderRadius;
-          height: 125%;
-          width: 108%;
-        }
-
-        .chatIcon {
-          height: 14px;
-        }
-
-        .chatButtonWord {
-          margin-left: 7px;
-        }
-      }
+
       .headerText {
         font-weight: 600;
         font-size: 20px;
@@ -138,3 +105,36 @@ $glowBarGif: url("https://s3.us-west-2.amazonaws.com/meetelise.com/HorizontalBar
     }
   }
 }
+
+.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,5 +1,6 @@
 import React from "react";
 import classnames from "classnames";
+import ChatButton from "./ChatButton";
 import styles from "./InHouseLauncher.module.scss";
 
 interface InHouseLauncherProps {
@@ -8,6 +9,7 @@ interface InHouseLauncherProps {
   firstMount: boolean;
   backgroundColor: string;
   textColor: string;
+  mini: boolean;
 }
 const InHouseLauncher: React.FunctionComponent<InHouseLauncherProps> = ({
   onChatTapped,
@@ -15,7 +17,23 @@ const InHouseLauncher: React.FunctionComponent<InHouseLauncherProps> = ({
   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(
@@ -29,23 +47,11 @@ const InHouseLauncher: React.FunctionComponent<InHouseLauncherProps> = ({
       <div className={styles.glowBar}></div>
       <div className={styles.content}>
         <div className={styles.header}>
-          <div className={styles.chatButton}>
-            <div className={styles.chatButtonGlowingBorder}></div>
-            <svg
-              className={styles.chatIcon}
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M13.2 10.8H6C5.68174 10.8 5.37652 10.9264 5.15147 11.1515C4.92643 11.3765 4.8 11.6817 4.8 12C4.8 12.3183 4.92643 12.6235 5.15147 12.8485C5.37652 13.0736 5.68174 13.2 6 13.2H13.2C13.5183 13.2 13.8235 13.0736 14.0485 12.8485C14.2736 12.6235 14.4 12.3183 14.4 12C14.4 11.6817 14.2736 11.3765 14.0485 11.1515C13.8235 10.9264 13.5183 10.8 13.2 10.8ZM18 6H6C5.68174 6 5.37652 6.12643 5.15147 6.35147C4.92643 6.57652 4.8 6.88174 4.8 7.2C4.8 7.51826 4.92643 7.82348 5.15147 8.04853C5.37652 8.27357 5.68174 8.4 6 8.4H18C18.3183 8.4 18.6235 8.27357 18.8485 8.04853C19.0736 7.82348 19.2 7.51826 19.2 7.2C19.2 6.88174 19.0736 6.57652 18.8485 6.35147C18.6235 6.12643 18.3183 6 18 6ZM20.4 0H3.6C2.64522 0 1.72955 0.379285 1.05442 1.05442C0.379285 1.72955 0 2.64522 0 3.6V15.6C0 16.5548 0.379285 17.4705 1.05442 18.1456C1.72955 18.8207 2.64522 19.2 3.6 19.2H17.508L21.948 23.652C22.0601 23.7632 22.1931 23.8512 22.3393 23.9109C22.4855 23.9706 22.6421 24.0009 22.8 24C22.9574 24.0041 23.1136 23.9712 23.256 23.904C23.4751 23.814 23.6627 23.6611 23.7951 23.4646C23.9275 23.2682 23.9988 23.0369 24 22.8V3.6C24 2.64522 23.6207 1.72955 22.9456 1.05442C22.2705 0.379285 21.3548 0 20.4 0ZM21.6 19.908L18.852 17.148C18.7399 17.0368 18.6069 16.9488 18.4607 16.8891C18.3145 16.8294 18.1579 16.7991 18 16.8H3.6C3.28174 16.8 2.97652 16.6736 2.75147 16.4485C2.52643 16.2235 2.4 15.9183 2.4 15.6V3.6C2.4 3.28174 2.52643 2.97652 2.75147 2.75147C2.97652 2.52643 3.28174 2.4 3.6 2.4H20.4C20.7183 2.4 21.0235 2.52643 21.2485 2.75147C21.4736 2.97652 21.6 3.28174 21.6 3.6V19.908Z"
-                fill="white"
-              />
-            </svg>
-            <span className={styles.chatButtonWord}>Ask</span>
-          </div>
+          <ChatButton
+            text="Ask"
+            useGlowingBorder
+            className={"excludeFromReset"}
+          />
           <span className={styles.headerText}>a question</span>
         </div>
         <span className={styles.subtitle}>

package/src/MEChat.tsx

@@ -159,6 +159,7 @@ export default class MEChat {
         firstMount={firstMount}
         backgroundColor={(await this.theme).chatPaneBackgroundColor}
         textColor={(await this.theme).chatHeader.textColor}
+        mini={this.useMiniWidget}
       />,
       targetElement
     );
@@ -191,9 +192,16 @@ export default class MEChat {
   private chatId: string;
   private analytics: Analytics;
   private useInHouseLauncher: boolean;
+  private useMiniWidget: boolean;
   private isMobile: boolean;
 
-  private constructor({ organization, building, themeId, avatarSrc }: Options) {
+  private constructor({
+    organization,
+    building,
+    themeId,
+    avatarSrc,
+    mini = false,
+  }: Options) {
     this.orgSlug = organization;
     this.buildingSlug = building;
     this.chatId = getChatID(organization, building);
@@ -208,6 +216,7 @@ export default class MEChat {
       (building) => avatarSrc || building.avatarSrc
     );
     this.useInHouseLauncher = true;
+    this.useMiniWidget = mini;
     this.isMobile = isMobile();
 
     this.popup = Promise.all([
@@ -280,4 +289,5 @@ export interface Options {
   organization: string;
   themeId?: ThemeIdString;
   avatarSrc?: string;
+  mini?: boolean;
 }