@meetelise/chat 1.20.183 → 1.20.185

package/src/WebComponent/health-chat.ts

@@ -200,7 +200,7 @@ export class HealthChat extends LitElement {
 
     if (this.isLoading) return html``;
     return html`
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
       <div id="aria-describe-info" style="display: none;">
           EliseAI widget that allows you to chat with a virtual assistant, book
           a tour, contact the leasing office, and more.

package/src/WebComponent/healthchat-styles.ts

@@ -74,7 +74,7 @@ export const healthChatStyles = css`
   }
 
   #healthcare-footer {
-    height: 60px;
+    min-height: 60px;
     width: 100%;
     background: white;
     z-index: 100001;
@@ -89,9 +89,8 @@ export const healthChatStyles = css`
   }
   #healthcare-inner-footer > #message-input {
     width: 100%;
-    max-height: 100%;
-
-    resize: none;
+    max-height: 100px;
+    overflowy: auto;
 
     font-family: inherit;
     box-sizing: border-box;
@@ -100,8 +99,6 @@ export const healthChatStyles = css`
     color: black;
     background: none;
 
-    height: 24px;
-    font-size: 12px;
     padding-right: 6px; /* width of the scrollbar */
     box-sizing: border-box;
     z-index: 1000000000000000000000000001;
@@ -116,4 +113,7 @@ export const healthChatStyles = css`
     border: none;
     cursor: pointer;
   }
+  .health-bttn-allow-access {
+    padding-right: 28px;
+  }
 `;

package/src/WebComponent/leasing-chat-styles.ts

@@ -97,7 +97,6 @@ export const leasingChatStyles = css`
     border: none;
     color: white;
     background: none;
-
     padding-right: 6px; /* width of the scrollbar */
     box-sizing: border-box;
     z-index: 1000000000000000000000000001;

package/src/WebComponent/pubnub-chat.ts

@@ -8,6 +8,7 @@ import {
   CheckboxEmpty,
   HeyThereEmoji,
   SendMessageIconBlack,
+  SendMessageIconBlackLarge,
   SendMessageIconWhite,
   XBlackOutlineIcon,
 } from "../svgIcons";
@@ -125,6 +126,14 @@ export class PubnubChat extends LitElement {
 
   async updated(): Promise<void> {
     this.scrollToChatBottom();
+    try {
+      const modal = document.getElementById("#healthchat-container");
+      if (!modal) return;
+      modal.focus();
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
   }
 
   autoResizeMessageInput = (): void => {
@@ -300,9 +309,12 @@ export class PubnubChat extends LitElement {
               ></textarea>
               <button
                 id="healthcare-send-message-bttn"
+                class=${classMap({
+                  ["health-bttn-allow-access"]: isMobile(),
+                })}
                 @click=${() => this.sendMessage(this.messageInput.value)}
               >
-                ${SendMessageIconBlack}
+                ${isMobile() ? SendMessageIconBlackLarge : SendMessageIconBlack}
               </button>
             </div>
           </div>

package/src/svgIcons.ts

@@ -59,6 +59,12 @@ export const SendMessageIconBlack = svg`
 </svg>
 `;
 
+export const SendMessageIconBlackLarge = svg`
+<svg width="32" height="32" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 5C20 2.23858 17.7614 0 15 0H5C2.23858 0 0 2.23858 0 5V15C0 17.7614 2.23858 20 5 20H15C17.7614 20 20 17.7614 20 15V5ZM12.1893 9.25L10.4697 7.53033C10.1768 7.23744 10.1768 6.76256 10.4697 6.46967C10.7626 6.17678 11.2374 6.17678 11.5303 6.46967L13.8232 8.76256C14.5066 9.44598 14.5066 10.554 13.8232 11.2374L11.5303 13.5303C11.2374 13.8232 10.7626 13.8232 10.4697 13.5303C10.1768 13.2374 10.1768 12.7626 10.4697 12.4697L12.1893 10.75L6 10.75C5.58579 10.75 5.25 10.4142 5.25 10C5.25 9.58579 5.58579 9.25 6 9.25L12.1893 9.25Z" fill="black"/>
+</svg>
+`;
+
 export const HeyThereEmoji = svg`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" viewBox="0 0 25 25" fill="none">
 <rect x="0.5" y="0.5" width="24" height="24" fill="url(#pattern0)"/>
 <defs>