@meetelise/chat 1.43.30 → 1.43.31

package/src/WebComponent/pubnub-chat.ts

@@ -14,7 +14,7 @@ import {
   defaultBackgroundColor,
   shouldUsePrimaryColorForChatFooter,
 } from "../themes";
-import { isMobile } from "../utils";
+import { isMobile, onMobileChange } from "../utils";
 import { InputStyles } from "./actions/InputStyles";
 import { healthChatStyles } from "./healthchat-styles";
 import { leasingChatStyles } from "./leasing-chat-styles";
@@ -103,6 +103,11 @@ export class PubnubChat extends LitElement {
   @query("#conversation-body", true)
   messageBody!: HTMLDivElement;
 
+  @state()
+  _isMobile = isMobile();
+
+  private _cleanupMobileListener?: () => void;
+
   @state()
   messages: SimpleChatMessage[] = [];
 
@@ -130,6 +135,18 @@ export class PubnubChat extends LitElement {
     return `${this.orgSlug}Consent`;
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this._cleanupMobileListener = onMobileChange((m) => {
+      this._isMobile = m;
+    });
+  }
+
+  disconnectedCallback(): void {
+    this._cleanupMobileListener?.();
+    super.disconnectedCallback();
+  }
+
   sendMessage = async (message: string): Promise<void> => {
     if (message.length === 0) {
       return;
@@ -216,7 +233,7 @@ export class PubnubChat extends LitElement {
 
     const buildingId = this.building?.id;
     let styles = {};
-    if (isMobile()) {
+    if (this._isMobile) {
       styles = {
         top: undefined,
         bottom: 0,
@@ -260,8 +277,8 @@ export class PubnubChat extends LitElement {
         <div
           id="utilities-container"
           class=${classMap({
-            ["pubnub-container__mobile"]: isMobile(),
-            ["utilities-container__desktop"]: !isMobile(),
+            ["pubnub-container__mobile"]: this._isMobile,
+            ["utilities-container__desktop"]: !this._isMobile,
           })}
           style=${styleMap(styles)}
         >
@@ -323,8 +340,8 @@ export class PubnubChat extends LitElement {
                 <p
                   class=${classMap({
                     ["message-text-large"]: true,
-                    ["webchat-font__desktop"]: !isMobile(),
-                    ["webchat-font__mobile"]: isMobile(),
+                    ["webchat-font__desktop"]: !this._isMobile,
+                    ["webchat-font__mobile"]: this._isMobile,
                   })}
                 >
                   Hi I'm Elise. How can I assist you today?
@@ -392,8 +409,8 @@ export class PubnubChat extends LitElement {
               <textarea
                 id="message-input"
                 class=${classMap({
-                  ["webchat-font__desktop"]: !isMobile(),
-                  ["webchat-font__mobile"]: isMobile(),
+                  ["webchat-font__desktop"]: !this._isMobile,
+                  ["webchat-font__mobile"]: this._isMobile,
                 })}
                 placeholder="Ask a Question..."
                 @keydown=${(e: KeyboardEvent) => {
@@ -409,7 +426,7 @@ export class PubnubChat extends LitElement {
               <button
                 id="utilities-send-message-bttn"
                 class=${classMap({
-                  ["health-bttn-allow-access"]: isMobile(),
+                  ["health-bttn-allow-access"]: this._isMobile,
                 })}
                 @click=${() => this.sendMessage(this.messageInput.value)}
               >
@@ -426,8 +443,8 @@ export class PubnubChat extends LitElement {
         <div
           id="healthchat-container"
           class=${classMap({
-            ["pubnub-container__mobile"]: isMobile(),
-            ["healthchat-container__desktop"]: !isMobile(),
+            ["pubnub-container__mobile"]: this._isMobile,
+            ["healthchat-container__desktop"]: !this._isMobile,
           })}
           style=${styleMap(styles)}
         >
@@ -495,8 +512,8 @@ export class PubnubChat extends LitElement {
                 <p
                   class=${classMap({
                     ["message-text"]: true,
-                    ["webchat-font__desktop"]: !isMobile(),
-                    ["webchat-font__mobile"]: isMobile(),
+                    ["webchat-font__desktop"]: !this._isMobile,
+                    ["webchat-font__mobile"]: this._isMobile,
                   })}
                 >
                   Hi I'm Elise. If this is a medical emergency, please call 911.
@@ -565,8 +582,8 @@ export class PubnubChat extends LitElement {
               <textarea
                 id="message-input"
                 class=${classMap({
-                  ["webchat-font__desktop"]: !isMobile(),
-                  ["webchat-font__mobile"]: isMobile(),
+                  ["webchat-font__desktop"]: !this._isMobile,
+                  ["webchat-font__mobile"]: this._isMobile,
                 })}
                 placeholder="Ask a Question..."
                 @keydown=${(e: KeyboardEvent) => {
@@ -582,11 +599,11 @@ export class PubnubChat extends LitElement {
               <button
                 id="healthcare-send-message-bttn"
                 class=${classMap({
-                  ["health-bttn-allow-access"]: isMobile(),
+                  ["health-bttn-allow-access"]: this._isMobile,
                 })}
                 @click=${() => this.sendMessage(this.messageInput.value)}
               >
-                ${isMobile()
+                ${this._isMobile
                   ? SendMessageLargeIcon("black")
                   : SendMessageMediumIcon("black")}
               </button>
@@ -605,8 +622,8 @@ export class PubnubChat extends LitElement {
       <div
         id="pubnub-chat-container"
         class=${classMap({
-          ["pubnub-container__mobile"]: isMobile(),
-          ["pubnub-container__desktop"]: !isMobile(),
+          ["pubnub-container__mobile"]: this._isMobile,
+          ["pubnub-container__desktop"]: !this._isMobile,
         })}
         style=${styleMap(styles)}
         @keydown=${(e: KeyboardEvent) => e.stopPropagation()}
@@ -687,8 +704,8 @@ export class PubnubChat extends LitElement {
                   <p
                     class=${classMap({
                       ["message-text"]: true,
-                      ["webchat-font__desktop"]: !isMobile(),
-                      ["webchat-font__mobile"]: isMobile(),
+                      ["webchat-font__desktop"]: !this._isMobile,
+                      ["webchat-font__mobile"]: this._isMobile,
                     })}
                   >
                     ${this.building.welcomeMessage
@@ -765,8 +782,8 @@ export class PubnubChat extends LitElement {
           <textarea
             id="message-input"
             class=${classMap({
-              ["webchat-font__desktop"]: !isMobile(),
-              ["webchat-font__mobile"]: isMobile(),
+              ["webchat-font__desktop"]: !this._isMobile,
+              ["webchat-font__mobile"]: this._isMobile,
             })}
             style=${styleMap({
               color:

package/src/WebComponent/utilities-styles.ts

@@ -19,7 +19,9 @@ export const utiltiesChatStyles = css`
   }
   .utilities-container__desktop {
     width: 500px;
-    height: min(700px, calc(100vh - 200px));
+    height: 700px;
+    max-height: calc(100vh - 230px);
+    max-height: calc(100svh - 230px);
     border-radius: 10px;
   }
 
@@ -91,7 +93,7 @@ export const utiltiesChatStyles = css`
 
     padding-right: 6px; /* width of the scrollbar */
     box-sizing: border-box;
-    z-index: 1000000000000000000000000001;
+    z-index: 10;
     font-size: 14px;
   }
   #utilities-inner-footer > #message-input:focus {

package/src/utils.ts

@@ -45,9 +45,26 @@ export const snakify = <T>(
     }
   ) as T;
 
+const MOBILE_QUERY = "(max-width: 767px)";
+const SHORT_QUERY = "(max-height: 400px)";
+
 export const isMobile = (): boolean =>
-  window.matchMedia("(max-width: 767px)").matches ||
-  window.matchMedia("(max-height: 400px)").matches;
+  window.matchMedia(MOBILE_QUERY).matches ||
+  window.matchMedia(SHORT_QUERY).matches;
+
+export const onMobileChange = (
+  callback: (isMobile: boolean) => void
+): (() => void) => {
+  const mqWidth = window.matchMedia(MOBILE_QUERY);
+  const mqHeight = window.matchMedia(SHORT_QUERY);
+  const handler = () => callback(mqWidth.matches || mqHeight.matches);
+  mqWidth.addEventListener("change", handler);
+  mqHeight.addEventListener("change", handler);
+  return () => {
+    mqWidth.removeEventListener("change", handler);
+    mqHeight.removeEventListener("change", handler);
+  };
+};
 
 export const isTimestampExpired = (
   timestamp: Date,