@meetelise/chat 1.22.6 → 1.22.8

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

@@ -79,6 +79,18 @@ export const pubnubChatStyles = css`
     letter-spacing: 0em;
     text-align: left;
   }
+  .message-text-large {
+    word-break: break-word;
+    margin: 0;
+    padding: 4px 8px;
+    line-height: 130%;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0em;
+    text-align: left;
+  }
   .displayed-message-image {
     max-width: 100%;
     max-height: 300px;

package/src/WebComponent/pubnub-chat.ts

@@ -33,6 +33,7 @@ import "./pubnub-media";
 import classNames from "classnames";
 import { differenceInDays } from "date-fns";
 import { WidgetType } from "../main/MEChat";
+import { utiltiesChatStyles } from "./utilities-styles";
 
 @customElement("pubnub-chat")
 export class PubnubChat extends LitElement {
@@ -41,6 +42,7 @@ export class PubnubChat extends LitElement {
     pubnubChatStyles,
     leasingChatStyles,
     healthChatStyles,
+    utiltiesChatStyles,
   ];
 
   @property({ type: Number })
@@ -250,14 +252,14 @@ export class PubnubChat extends LitElement {
     if (this.widgetType === WidgetType.Utilities) {
       return html`
         <div
-          id="healthchat-container"
+          id="utilities-container"
           class=${classMap({
             ["pubnub-container__mobile"]: isMobile(),
-            ["healthchat-container__desktop"]: !isMobile(),
+            ["utilities-container__desktop"]: !isMobile(),
           })}
           style=${styleMap(styles)}
         >
-          <div id="healthchat-header">
+          <div id="utilities-header">
             <div>
               <div id="header-text">Talk with our AI</div>
             </div>
@@ -285,7 +287,7 @@ export class PubnubChat extends LitElement {
             id="conversation-body"
             class=${classMap({
               ["hidden"]: this.needsConsent(),
-              ["healthcare-conversation-body-backdrop"]: true,
+              ["utilities-conversation-body-backdrop"]: true,
             })}
           >
             <ul
@@ -294,8 +296,8 @@ export class PubnubChat extends LitElement {
                 ["hidden"]: this.needsConsent(),
               })}
             >
-              <li class="healthcare-disclaimer-message">
-                <p class="healthcare-disclaimer-inner">
+              <li class="utilities-disclaimer-message">
+                <p class="utilities-disclaimer-inner">
                   This conversation may be monitored and recorded. By replying,
                   you consent to
                   <a
@@ -311,7 +313,7 @@ export class PubnubChat extends LitElement {
               <li class="message-container ai-message">
                 <p
                   class=${classMap({
-                    ["message-text"]: true,
+                    ["message-text-large"]: true,
                     ["webchat-font__desktop"]: !isMobile(),
                     ["webchat-font__mobile"]: isMobile(),
                   })}
@@ -342,6 +344,7 @@ export class PubnubChat extends LitElement {
                           .onMount=${() => this.scrollToChatBottom()}
                           .isLeadMessage=${message.isLeadMessage}
                           .buildingSlug=${this.buildingSlug}
+                          .widgetType=${this.widgetType}
                         >
                         </pubnub-message>`
                       : ""}
@@ -364,12 +367,12 @@ export class PubnubChat extends LitElement {
           </div>
 
           <div
-            id="healthcare-footer"
+            id="utilities-footer"
             class=${classMap({
               ["hidden"]: this.needsConsent(),
             })}
           >
-            <div id="healthcare-inner-footer">
+            <div id="utilities-inner-footer">
               <textarea
                 id="message-input"
                 class=${classMap({
@@ -388,13 +391,13 @@ export class PubnubChat extends LitElement {
                 tabindex="0"
               ></textarea>
               <button
-                id="healthcare-send-message-bttn"
+                id="utilities-send-message-bttn"
                 class=${classMap({
                   ["health-bttn-allow-access"]: isMobile(),
                 })}
                 @click=${() => this.sendMessage(this.messageInput.value)}
               >
-                ${isMobile() ? SendMessageIconBlackLarge : SendMessageIconBlack}
+                ${SendMessageIconBlackLarge}
               </button>
             </div>
           </div>
@@ -504,6 +507,7 @@ export class PubnubChat extends LitElement {
                           .onMount=${() => this.scrollToChatBottom()}
                           .isLeadMessage=${message.isLeadMessage}
                           .buildingSlug=${this.buildingSlug}
+                          .widgetType=${this.widgetType}
                         >
                         </pubnub-message>`
                       : ""}
@@ -671,6 +675,7 @@ export class PubnubChat extends LitElement {
                         .onMount=${() => this.scrollToChatBottom()}
                         .isLeadMessage=${message.isLeadMessage}
                         .buildingSlug=${this.buildingSlug}
+                        .widgetType=${this.widgetType}
                       >
                       </pubnub-message>`
                     : ""}

package/src/WebComponent/pubnub-message.ts

@@ -11,6 +11,7 @@ import { isMobile } from "../utils";
 import { LogType, sendLoggingEvent } from "../analytics";
 import { pubnubChatStyles } from "./pubnub-chat-styles";
 import "./mini-loader";
+import { WidgetType } from "../main/MEChat";
 
 interface WebsitePreview {
   title: string | null;
@@ -73,6 +74,9 @@ export class PubnubMessage extends LitElement {
   @property({ type: Boolean })
   isLeadMessage = false;
 
+  @property({ attribute: true })
+  widgetType: WidgetType = WidgetType.Default;
+
   isMessageStillStreamingChunks(): boolean {
     if (!this.message) return false;
     const messageChunkMarkedAsDone = this.message.chunks.find(
@@ -340,7 +344,8 @@ export class PubnubMessage extends LitElement {
         : ""}
       <p
         class=${classMap({
-          ["message-text"]: true,
+          ["message-text"]: this.widgetType !== WidgetType.Utilities,
+          ["message-text-large"]: this.widgetType === WidgetType.Utilities,
           ["webchat-font__desktop"]: !isMobile(),
           ["webchat-font__mobile"]: isMobile(),
         })}
@@ -393,7 +398,9 @@ export class PubnubMessage extends LitElement {
       
             <div class="website-preview-body">
               <p class=${classMap({
-                ["message-text"]: true,
+                ["message-text"]: this.widgetType !== WidgetType.Utilities,
+                ["message-text-large"]:
+                  this.widgetType === WidgetType.Utilities,
                 ["website-preview-title"]: true,
                 ["webchat-font__desktop"]: !isMobile(),
                 ["webchat-font__mobile"]: isMobile(),
@@ -402,7 +409,10 @@ export class PubnubMessage extends LitElement {
               preview.description
                 ? html`<p
                     class=${classMap({
-                      ["message-text"]: true,
+                      ["message-text"]:
+                        this.widgetType !== WidgetType.Utilities,
+                      ["message-text-large"]:
+                        this.widgetType === WidgetType.Utilities,
                       ["website-preview-description"]: true,
                       ["webchat-font__desktop"]: !isMobile(),
                       ["webchat-font__mobile"]: isMobile(),

package/src/WebComponent/utilities-styles.ts

@@ -0,0 +1,110 @@
+import { css } from "lit";
+
+export const utiltiesChatStyles = css`
+  #utilities-container {
+    position: fixed;
+
+    z-index: 100001;
+    display: flex;
+    align-items: center;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: -10px 60px 60px 0px #bfbfbf4d;
+
+    box-shadow: 0px 1px 24px 0px #0000001a;
+
+    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+  }
+  .utilities-container__desktop {
+    width: 500px;
+    height: min(700px, calc(100vh - 200px));
+    border-radius: 10px;
+  }
+
+  #utilities-header {
+    height: 60px;
+    width: 100%;
+    background: white;
+    overflow: hidden;
+
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    padding: 24px 16px;
+    justify-content: space-between;
+  }
+
+  .utilities-conversation-body-backdrop {
+    background: #f1f2f4;
+  }
+
+  @media screen and (max-width: 767px) {
+    #conversation-body {
+      background: #efefef;
+      backdrop-filter: none;
+    }
+  }
+
+  .utilities-disclaimer-inner {
+    margin: 0 auto;
+  }
+  .utilities-disclaimer-message {
+    font-size: 12px;
+    color: #737373;
+    line-height: 12px;
+    font-weight: 400;
+    text-align: left;
+    align-self: flex-start;
+  }
+  .utilities-disclaimer-inner > a {
+    color: #737373;
+  }
+
+  #utilities-footer {
+    min-height: 60px;
+    width: 100%;
+    background: white;
+    z-index: 100001;
+  }
+  #utilities-inner-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 16px;
+    gap: 0px;
+  }
+  #utilities-inner-footer > #message-input {
+    width: 100%;
+    max-height: 100px;
+    overflowy: auto;
+
+    font-family: inherit;
+    box-sizing: border-box;
+    font-weight: light;
+    border: none;
+    color: black;
+    background: none;
+
+    padding-right: 6px; /* width of the scrollbar */
+    box-sizing: border-box;
+    z-index: 1000000000000000000000000001;
+    font-size: 14px;
+  }
+  #utilities-inner-footer > #message-input:focus {
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  #utilities-send-message-bttn {
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  .health-bttn-allow-access {
+    padding-right: 28px;
+  }
+`;