@meetelise/chat 1.20.48 → 1.20.50

package/src/WebComponent/launcherStyles.ts

@@ -1,6 +1,10 @@
 import { css } from "lit";
 
 export const launcherStyles = css`
+  * {
+    font-family: "Helvetica Neue";
+    font-size: 14px;
+  }
   :host {
     --glowBarHeight: 11.2px;
     --enterAnimationDuration: 0.5s;
@@ -16,7 +20,7 @@ export const launcherStyles = css`
     }
   }
   .launcher {
-    font-family: Poppins;
+    font-family: "Helvetica Neue";
     user-select: none;
     position: fixed;
   }
@@ -113,7 +117,7 @@ export const launcherStyles = css`
   }
 
   .launcher__primary-action-text {
-    font-family: "Poppins";
+    font-family: "Helvetica Neue";
     font-weight: 700;
     font-size: 24px;
     line-height: 22px;
@@ -199,6 +203,14 @@ export const launcherStyles = css`
     display: flex;
     align-items: center;
   }
+  .launcher__mobile-launcher-wrapper {
+    position: fixed;
+    right: 12px;
+    bottom: 0px;
+    z-index: 100000;
+    display: flex;
+    align-items: center;
+  }
 
   .launcher__mini-option {
     position: relative;
@@ -343,6 +355,308 @@ export const launcherStyles = css`
     width: 28px;
   }
 
+  .type-gradient__list {
+    width: 199px;
+    height: 262px;
+    left: 1218px;
+    top: 604px;
+
+    border: 1px solid #ffffff;
+    border-radius: 20px 0px 20px 20px;
+    background: #262626;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    overflow: hidden;
+    cursor: pointer;
+
+    box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.5);
+  }
+  .type-gradient__top-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: #ffffff;
+    overflow: hidden;
+  }
+  .video-container {
+    position: relative;
+    margin-left: -48px;
+  }
+  .glowBackground {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    object-fit: cover;
+    transform: scale(1.3);
+    filter: brightness(80%);
+  }
+  .type-gradient__scroll-info {
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    z-index: 99999;
+
+    margin-top: 0em;
+
+    opacity: 0.95;
+  }
+  .type-gradient__scroll-info:hover {
+    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.85);
+  }
+  .type-gradient__scroll-info:hover > .type-gradient__description > li {
+    opacity: 0.99;
+  }
+
+  .type-gradient__chat-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 4px;
+  }
+  .type-gradient__chat-header > .title-bold {
+    font-family: "Helvetica Neue";
+    font-style: normal;
+    font-size: 22px;
+    line-height: 28px;
+    color: #ffffff;
+    opacity: 0.95;
+  }
+  .type-gradient__chat-header {
+    font-family: "Helvetica Neue";
+    font-style: normal;
+    font-size: 22px;
+    line-height: 28px;
+    color: #ffffff;
+    font-weight: 300;
+  }
+  .type-gradient__description {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .type-gradient__description > li {
+    font-family: "Helvetica Neue";
+    font-style: normal;
+    font-weight: 300;
+    font-size: 18px;
+    line-height: 24px;
+
+    color: #ffffff;
+    opacity: 0.5;
+  }
+
+  .type-gradient__email {
+    background: #000000;
+    border-top: 1px solid #4d4d4d;
+    border-bottom: 1px solid #4d4d4d;
+  }
+
+  .type-gradient__bottom-tab {
+    font-family: "Helvetica Neue";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 18px;
+    padding: 16px 20px;
+
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .type-gradient__bottom-tab:hover {
+    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.85);
+    background: linear-gradient(265.11deg, #000000 16.43%, #3c3c3c 87.21%);
+  }
+  .type-gradient__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .type-gradient__icon svg {
+    color: #ffffff;
+  }
+
+  .type-hey__list {
+    width: 280px;
+    height: 300px;
+    margin-right: 24px;
+
+    background: linear-gradient(139.82deg, #5770f5 -33.12%, #ffffff 111.99%);
+
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+  .type-hey__chat-container {
+    position: absolute;
+    bottom: -84px;
+    right: 24px;
+    cursor: pointer;
+  }
+  .type-hey__chat-container:hover {
+    filter: brightness(90%);
+  }
+
+  .type-hey__bottom-section {
+    background: rgba(255, 255, 255, 1);
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    padding: 26px 40px;
+    flex: 1;
+  }
+
+  .type-hey__email,
+  .type-hey__contact {
+    width: 170px;
+    height: 32px;
+
+    background: #ffffff;
+    mix-blend-mode: normal;
+    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.03),
+      0px 10px 10px rgba(0, 0, 0, 0.03);
+    border-radius: 4px;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    padding-left: 15px;
+    padding-right: 15px;
+    gap: 12px;
+    font-size: 12px;
+
+    cursor: pointer;
+  }
+  .type-hey__email:hover,
+  .type-hey__contact:hover {
+    background: rgba(167, 141, 243, 0.1);
+  }
+  .type-hey__ai-topic {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px 4px 4px 0px;
+    padding: 0px 8px;
+    text-align: center;
+    width: 73px;
+
+    margin: auto;
+    margin-top: 26px;
+    color: #ffffff;
+    position: relative;
+  }
+  .type-hey__ai-topic p {
+    font-weight: 700;
+    font-size: 8px;
+    line-height: 18px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+  .type-hey__ai-topic-notch {
+    content: "";
+    width: 0px;
+    height: 0px;
+    position: absolute;
+    border-left: 3px solid rgba(255, 255, 255, 0.2);
+    border-right: 3px solid transparent;
+    border-top: 3px solid rgba(255, 255, 255, 0.2);
+    border-bottom: 3px solid transparent;
+    left: 0px;
+    bottom: -6px;
+  }
+  .type-hey__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .type-hey__greeting {
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+  }
+  .type-hey__greeting > h1 {
+    font-family: "Helvetica Neue";
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 22px;
+
+    color: #ffffff;
+  }
+
+  .type-hey__ask-prompt {
+    margin: auto;
+    margin-top: 9px;
+    margin-bottom: 24px;
+
+    width: 220px;
+    height: 32px;
+
+    background: rgba(255, 255, 255, 0.2);
+    mix-blend-mode: normal;
+    box-shadow: 0px 14px 100px rgba(91, 69, 196, 0.1),
+      0px 14px 20px rgba(91, 69, 196, 0.3);
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .type-hey__ask-prompt-inner {
+    width: calc(100% - 30px);
+    height: 100%;
+    box-shadow: inset 0px 10px 8px -10px rgba(156, 156, 156, 0.9),
+      inset 0px -10px 8px -10px rgba(156, 156, 156, 0.9);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 15px;
+    padding-right: 15px;
+    position: relative;
+    z-index: 10000000000000000000000000000000000000000000000000000000;
+  }
+  .type-hey__ask-start {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .type-hey__ask-start > h2 {
+    font-family: "Helvetica Neue";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    color: #ffffff;
+  }
+
+  .type-hey__bottom-info {
+    margin-top: 16px;
+    font-family: "Helvetica Neue";
+    font-style: normal;
+    font-size: 10px;
+    line-height: 140%;
+  }
+
+  .title-bold {
+    font-weight: 700;
+  }
+  .heavy-blue {
+    font-family: "Helvetica Neue";
+    font-style: normal;
+    font-size: 10px;
+    line-height: 140%;
+    color: #5770f5;
+    font-weight: 700;
+  }
   @media screen and (max-height: 750px) {
     .launcher__window-wrapper {
       bottom: 0;
@@ -354,4 +668,110 @@ export const launcherStyles = css`
       width: 164px;
     }
   }
+
+  .scroll-container {
+    height: 32px;
+    position: relative;
+    overflow: hidden;
+  }
+  .scroll-container > ul {
+    display: flex;
+    flex-direction: column;
+    animation: move calc(3s * 4) steps(4) infinite;
+    list-style: none;
+    padding: 0;
+    margin-top: 26px;
+
+    -webkit-transition: 1.5s;
+    -moz-transition: 1.5s;
+    transition: 1.5s;
+
+    -webkit-transition-timing-function: linear;
+    -moz-transition-timing-function: linear;
+    transition-timing-function: linear;
+  }
+  .scroll-container > ul li {
+    width: 100%;
+    animation: liMove calc(3s) infinite;
+    display: flex;
+    align-items: center;
+    height: 18px;
+
+    font-family: "Helvetica Neue";
+    font-style: normal;
+    font-size: 12px;
+    font-weight: 700;
+    color: #ffffff;
+
+    -webkit-transition: 1.5s;
+    -moz-transition: 1.5s;
+    transition: 1.5s;
+
+    -webkit-transition-timing-function: linear;
+    -moz-transition-timing-function: linear;
+    transition-timing-function: linear;
+  }
+  @keyframes move {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(
+        0,
+        calc(4 * 18 * -1px)
+      ); // 18 is the height of each list item
+    }
+  }
+  @keyframes liMove {
+    0% {
+      transform: translate(0, 0);
+    }
+    80%,
+    100% {
+      transform: translate(0, calc(18 * -1px));
+    }
+  }
+
+  .typeMobile-list {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .typeMobile-list > ul {
+    padding: 0;
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+  }
+  .typeMobile-bttn {
+    width: 51px;
+    height: 51px;
+    background: #f3f6fc;
+    border: 1px solid rgba(156, 171, 209, 0.2);
+    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .typeMobile-bttn > .typeMobile-inner {
+    width: 43px;
+    height: 43px;
+    background: linear-gradient(
+      325.18deg,
+      #151821 33.41%,
+      rgba(155, 170, 208, 0.8) 117.28%
+    );
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    box-shadow: -2px -2px 4px 1px #ffffff,
+      2px 2px 4px 1px rgba(57, 83, 149, 0.2);
+    border-radius: 6px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 `;

package/src/WebComponent/me-chat.ts

@@ -14,7 +14,6 @@ import fetchCurrentParsedLeadSource from "../fetchCurrentParsedLeadSource";
 import { getTheme, Theme, ThemeIdString } from "../themes";
 import { isMobile } from "../utils";
 import { installLauncher } from "./Launcher";
-import { FilledTourIcon, FilledEmailIcon, ChevronIcon } from "../svgIcons";
 import parseISO from "date-fns/parseISO";
 import isPast from "date-fns/isPast";
 
@@ -24,6 +23,11 @@ import { StyleInfo } from "lit/directives/style-map";
 import addMinutes from "date-fns/addMinutes";
 import formatISO from "date-fns/formatISO";
 import fetchLeadSources from "../fetchLeadSources";
+import {
+  ChevronIcon,
+  PhoneWhiteStrokeIcon,
+  WhiteStrokeTourIcon,
+} from "../svgIcons";
 
 export interface Options {
   building: string;
@@ -48,6 +52,16 @@ export class MEChat extends LitElement {
       width: 100%;
       height: 100px;
     }
+
+    .hideTab {
+      display: none;
+    }
+    .showTab {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 32px;
+    }
     #contactTabPopup {
       position: fixed;
       width: 300px;
@@ -55,33 +69,24 @@ export class MEChat extends LitElement {
       padding-right: 20px;
       padding-bottom: 24px;
       z-index: 1000000000;
-      background: #353535;
+      background: #000000;
       border-radius: 10px 0px 0px 0px;
       border-width: 1px 0px 0px 1px;
       border-style: solid;
       border-color: #ffffff;
     }
-    .hideTab {
-      display: none;
-    }
-    .showTab {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
     .actionTabBttn {
-      font-family: "Poppins";
+      font-family: "Helvetica Neue";
       font-style: normal;
-      font-weight: 600;
       font-size: 14px;
-      line-height: 22px;
+      line-height: 18px;
       color: #ffffff;
       border: none;
       background: none;
       padding: 0;
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: 8px;
     }
     .actionTabBttn:hover {
       cursor: pointer;
@@ -108,7 +113,7 @@ export class MEChat extends LitElement {
   @property({ type: String })
   private orgSlug = "";
   @property({ type: String })
-  private themeId: string | undefined;
+  private themeId: string | undefined = "Glass";
   @property({ attribute: false })
   private avatarSrc?: string | null;
   @property({ type: Boolean })
@@ -306,12 +311,7 @@ export class MEChat extends LitElement {
     const shouldAutoOpen =
       !autoOpenedTimestamp ||
       (autoOpenedTimestamp && isPast(parseISO(autoOpenedTimestamp)));
-    if (
-      building.autoOpenChatWidget &&
-      shouldAutoOpen &&
-      !isMobile() &&
-      this.buildingABTestType !== "close"
-    ) {
+    if (building.autoOpenChatWidget && shouldAutoOpen && !isMobile()) {
       this.popup.show();
       this.hideLauncher = true;
       this.hasMounted = true;
@@ -379,6 +379,13 @@ export class MEChat extends LitElement {
     this.launcherRef.value?.onClickSSTOption(e);
   };
 
+  handleContactTabClicked = (e: MouseEvent): void => {
+    this.popup?.hide();
+    this.hideLauncher = false;
+
+    this.launcherRef.value?.onClickPhoneOption(e);
+  };
+
   // Talkjs is very limiting with changing it's design and working around it.
   //  For the top header contact, we change its pos based on the current x and y
   //  of the talkjs popup - so we must adjust its coords on resize and mount
@@ -391,7 +398,6 @@ export class MEChat extends LitElement {
       headerRef.style.top = `${currentHeaderCoords.top - 50}px`;
     }
   };
-
   connectedCallback(): void {
     super.connectedCallback();
     window.addEventListener("resize", this.adjustTopHeaderContactCoords);
@@ -409,7 +415,8 @@ export class MEChat extends LitElement {
     const hideTopContactTab =
       !this.hideLauncher ||
       this.isLoading ||
-      this.buildingABTestType === "close";
+      this.buildingABTestType !== "Concept 1 (Blue/Black)" ||
+      this.isMobile;
     return html`
       <div>
         <div
@@ -419,16 +426,16 @@ export class MEChat extends LitElement {
             ["hideTab"]: hideTopContactTab,
           })}
         >
-          <button class="actionTabBttn" @click=${this.handleContactClicked}>
-            ${FilledEmailIcon}
-            <p><span class="heavyLabel">Email</span> an agent</p>
-            ${ChevronIcon}
-          </button>
           <button class="actionTabBttn" @click=${this.handleTourClicked}>
-            ${FilledTourIcon}
+            ${WhiteStrokeTourIcon}
             <p><span class="heavyLabel">Book</span> a tour</p>
             ${ChevronIcon}
           </button>
+          <button class="actionTabBttn" @click=${this.handleContactTabClicked}>
+            ${PhoneWhiteStrokeIcon}
+            <p><span class="heavyLabel">Contact</span> us</p>
+            ${ChevronIcon}
+          </button>
         </div>
         <div
           class=${classMap({
@@ -502,7 +509,6 @@ export class MEChat extends LitElement {
       }
 
       this.popup.show();
-      this.adjustTopHeaderContactCoords();
       this.analytics?.ping("open");
       this.hideLauncher = true;
       this.hasMounted = true;

package/src/WebComponent/me-select.ts

@@ -110,12 +110,11 @@ export class MESelect extends LitElement {
 
         font-size: 14px;
         line-height: 14px;
-        font-family: "Poppins";
+        font-family: "Helvetica Neue";
       }
 
       #select {
         width: -webkit-fill-available;
-        height: 49px;
         display: flex;
         align-items: center;
         justify-content: space-between;

package/src/assetUrls.ts

@@ -2,3 +2,5 @@ export const glowBarMp4 =
   "https://eliseusercontent.meetelise.com/webchat/HorizontalBar-Shadow.mp4";
 export const glowBarWebm =
   "https://eliseusercontent.meetelise.com/webchat/HorizontalBar-Shadow.webm";
+export const glowBackgroundMp4 =
+  "https://eliseusercontent.meetelise.com/webchat/01-EliseAI-Hero_1.mp4";

package/src/fetchBuildingABTestType.ts

@@ -2,6 +2,10 @@ import axios from "axios";
 interface BuildingABType {
   abTestType: string;
 }
+export enum abTestTypes {
+  "ConceptBlueBlack" = "Concept 1 (Blue/Black)",
+  "ConceptBlueWhite" = "Concept 2 (Blue/White)",
+}
 export default async function fetchBuildingABTestType(
   buildingSlug: string
 ): Promise<BuildingABType | null> {