@meetelise/chat 1.58.0 → 1.58.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetelise/chat",
-  "version": "1.58.0",
+  "version": "1.58.1",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/MeetElise/chat-ui#readme",

package/public/dist/index.js

@@ -6688,8 +6688,7 @@ xmlns="http://www.w3.org/2000/svg"
     justify-content: space-between;
   }
   .leasing-conversation-body-backdrop {
-    background: rgba(193, 193, 193, 0.5);
-    backdrop-filter: blur(4px);
+    background: #efefef;
 
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -7296,11 +7295,11 @@ xmlns="http://www.w3.org/2000/svg"
 <path fill-rule="evenodd" clip-rule="evenodd" d="M15 0C17.7614 0 20 2.23858 20 5V15C20 17.7614 17.7614 20 15 20H5C2.23858 20 0 17.7614 0 15V5C0 2.23858 2.23858 0 5 0H15ZM18 5C18 3.34315 16.6569 2 15 2H5C3.34315 2 2 3.34315 2 5V15C2 16.6569 3.34315 18 5 18H15C16.6569 18 18 16.6569 18 15V5Z" fill="${e}"/>
 <path d="M12.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="${e}"/>
 </svg>
-`;var Tc,_c=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};let Oc=Tc=class extends oe{constructor(){super(...arguments),this.right=void 0,this.bottom=void 0,this.top=void 0,this.left=void 0,this.onMount=()=>({}),this.isHealthChat=!1,this.centralConvo=!1,this.widgetType=sh.Default,this.primaryColor=qn,this.backgroundColor=Yn,this.onClickExit=()=>{localStorage.setItem("isChatOpen","false")},this.requiresConsent=!1,this._isMobile=Tr(),this.shouldAutoScroll=!0,this.messages=[],this.isLoadingMessages=!1,this.hasReceivedConsent=!1,this.privacyPolicyUrl="http://bit.ly/me_privacy_policy",this.websitePreviewMapping={},this.sendMessage=async e=>{var t;0!==e.length&&(this.shouldAutoScroll=!0,this.messageInput.value="",this.autoResizeMessageInput(),0===this.messages.length&&(this.messages=[{timestamp:0,message:e,isLeadMessage:!0,chunks:[{text:e,order:0,isDone:!0}],type:Ju.text}]),await(null===(t=this.myPubnub)||void 0===t?void 0:t.sendMessage(e)))},this.scrollToChatBottom=()=>{this.shouldAutoScroll&&this.messageBody.scrollTo({top:this.messageBody.scrollHeight-this.messageBody.clientHeight,behavior:"auto"})},this.handleConversationScroll=e=>{const t=e.currentTarget,n=t.scrollHeight-t.clientHeight-t.scrollTop;this.shouldAutoScroll=n<=Tc.AUTO_SCROLL_THRESHOLD_PX},this.autoResizeMessageInput=()=>{this.messageInput.style.height="auto",this.messageInput.style.height=this.messageInput.scrollHeight+"px"},this.needsConsent=()=>this.requiresConsent&&!this.hasReceivedConsent}get consentKey(){return`${this.orgSlug}Consent`}connectedCallback(){super.connectedCallback(),this._cleanupMobileListener=_r(e=>{this._isMobile=e})}disconnectedCallback(){var e;null===(e=this._cleanupMobileListener)||void 0===e||e.call(this),super.disconnectedCallback()}firstUpdated(){var e,t;this.messages=(null===(e=this.myPubnub)||void 0===e?void 0:e.simpleChatMessages)||[],null===(t=this.myPubnub)||void 0===t||t.addChatListener(e=>{this.messages=e.messages,this.isLoadingMessages=e.isLoading}),this.onMount();const n=localStorage.getItem(this.consentKey);if(!n)return void(this.hasReceivedConsent=!1);const i=JSON.parse(n),{timestamp:r,consentId:o}=i;Sc(new Date,new Date(r))<7&&o===jo?this.hasReceivedConsent=!0:(this.hasReceivedConsent=!1,localStorage.removeItem(this.consentKey))}async updated(){this.scrollToChatBottom();try{const e=document.getElementById("#healthchat-container");if(!e)return;e.focus()}catch(e){}}render(){var e,t,n,i,r,o,a,s,l,u,d,c,h,p,f,g,m,b,y,v,w,C,x;if(!this.buildingSlug&&!this.centralConvo)return U``;const $=null===(e=this.building)||void 0===e?void 0:e.id;let S={};if(S=this._isMobile?{top:void 0,bottom:0,left:void 0,right:0}:{top:void 0===this.top||isNaN(this.top)?void 0:`${this.top}px`,bottom:void 0===this.bottom||isNaN(this.bottom)?"130px":`${this.bottom}px`,left:void 0===this.left||isNaN(this.left)?void 0:`${this.left}px`,right:void 0===this.right||isNaN(this.right)?"18px":`${this.right}px`},22320===$&&(S={...S,fontFamily:'"Helvetica Neue", Arial'}),this.widgetType===sh.Utilities)return U`
+`;var Tc,_c=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};let Oc=Tc=class extends oe{constructor(){super(...arguments),this.right=void 0,this.bottom=void 0,this.top=void 0,this.left=void 0,this.onMount=()=>({}),this.isHealthChat=!1,this.centralConvo=!1,this.widgetType=sh.Default,this.primaryColor=qn,this.backgroundColor=Yn,this.onClickExit=()=>{localStorage.setItem("isChatOpen","false")},this.requiresConsent=!1,this._isMobile=Tr(),this.shouldAutoScroll=!0,this.messages=[],this.isLoadingMessages=!1,this.hasReceivedConsent=!1,this.privacyPolicyUrl="http://bit.ly/me_privacy_policy",this.websitePreviewMapping={},this.sendMessage=async e=>{var t;0!==e.length&&(this.shouldAutoScroll=!0,this.messageInput.value="",this.autoResizeMessageInput(),0===this.messages.length&&(this.messages=[{timestamp:0,message:e,isLeadMessage:!0,chunks:[{text:e,order:0,isDone:!0}],type:Ju.text}]),await(null===(t=this.myPubnub)||void 0===t?void 0:t.sendMessage(e)))},this.scrollToChatBottom=()=>{this.shouldAutoScroll&&this.messageBody.scrollTo({top:this.messageBody.scrollHeight-this.messageBody.clientHeight,behavior:"auto"})},this.handleConversationScroll=e=>{const t=e.currentTarget,n=t.scrollHeight-t.clientHeight-t.scrollTop;this.shouldAutoScroll=n<=Tc.AUTO_SCROLL_THRESHOLD_PX},this.autoResizeMessageInput=()=>{this.messageInput.style.height="auto",this.messageInput.style.height=this.messageInput.scrollHeight+"px"},this.needsConsent=()=>this.requiresConsent&&!this.hasReceivedConsent}get consentKey(){return`${this.orgSlug}Consent`}connectedCallback(){super.connectedCallback(),this._cleanupMobileListener=_r(e=>{this._isMobile=e})}disconnectedCallback(){var e;null===(e=this._cleanupMobileListener)||void 0===e||e.call(this),super.disconnectedCallback()}firstUpdated(){var e,t;this.messages=(null===(e=this.myPubnub)||void 0===e?void 0:e.simpleChatMessages)||[],null===(t=this.myPubnub)||void 0===t||t.addChatListener(e=>{this.messages=e.messages,this.isLoadingMessages=e.isLoading}),this.onMount();const n=localStorage.getItem(this.consentKey);if(!n)return void(this.hasReceivedConsent=!1);const i=JSON.parse(n),{timestamp:r,consentId:o}=i;Sc(new Date,new Date(r))<7&&o===jo?this.hasReceivedConsent=!0:(this.hasReceivedConsent=!1,localStorage.removeItem(this.consentKey))}async updated(){this.scrollToChatBottom();try{const e=document.getElementById("#healthchat-container");if(!e)return;e.focus()}catch(e){}}render(){var e,t,n,i,r,o,a,s,l,u,d,c,h,p,f,g,m,b,y,v,w,C,x,$;if(!this.buildingSlug&&!this.centralConvo)return U``;const S=(null===(e=this.building)||void 0===e?void 0:e.userFirstName)||"Elise",A=null===(t=this.building)||void 0===t?void 0:t.id;let k={};if(k=this._isMobile?{top:void 0,bottom:0,left:void 0,right:0}:{top:void 0===this.top||isNaN(this.top)?void 0:`${this.top}px`,bottom:void 0===this.bottom||isNaN(this.bottom)?"130px":`${this.bottom}px`,left:void 0===this.left||isNaN(this.left)?void 0:`${this.left}px`,right:void 0===this.right||isNaN(this.right)?"18px":`${this.right}px`},22320===A&&(k={...k,fontFamily:'"Helvetica Neue", Arial'}),this.widgetType===sh.Utilities)return U`
         <div
           id="utilities-container"
           class=${be({"pubnub-container__mobile":this._isMobile,"utilities-container__desktop":!this._isMobile})}
-          style=${Vn(S)}
+          style=${Vn(k)}
         >
           <div id="utilities-header">
             <div>
@@ -7317,7 +7316,7 @@ xmlns="http://www.w3.org/2000/svg"
           <div
             class=${be({hidden:!this.needsConsent(),"legal-confirmation-container":!0})}
           >
-            ${Fo(null!==(t=this.orgSlug)&&void 0!==t?t:null,this.privacyPolicyUrl,this.consentKey,e=>{this.hasReceivedConsent=e},null!==(i=null===(n=this.building)||void 0===n?void 0:n.country)&&void 0!==i?i:null)}
+            ${Fo(null!==(n=this.orgSlug)&&void 0!==n?n:null,this.privacyPolicyUrl,this.consentKey,e=>{this.hasReceivedConsent=e},null!==(r=null===(i=this.building)||void 0===i?void 0:i.country)&&void 0!==r?r:null)}
           </div>
           <div
             id="conversation-body"
@@ -7331,27 +7330,25 @@ xmlns="http://www.w3.org/2000/svg"
               class=${be({hidden:this.needsConsent()})}
             >
               <li class="utilities-disclaimer-message">
-                ${Ho({orgSlug:null!==(r=this.orgSlug)&&void 0!==r?r:"",type:"utilities",buildingState:null!==(a=null===(o=this.building)||void 0===o?void 0:o.state)&&void 0!==a?a:null})}
+                ${Ho({orgSlug:null!==(o=this.orgSlug)&&void 0!==o?o:"",type:"utilities",buildingState:null!==(s=null===(a=this.building)||void 0===a?void 0:a.state)&&void 0!==s?s:null})}
               </li>
               <li
                 class="message-container ai-message"
-                tabindex="0"
                 role="article"
-                aria-label="Elise: Hi I'm Elise. How can I assist you today?"
+                aria-label="${S}: Hi I'm ${S}. How can I assist you today?"
               >
                 <p
                   class=${be({"message-text-large":!0,"webchat-font__desktop":!this._isMobile,"webchat-font__mobile":this._isMobile})}
                 >
-                  Hi I'm Elise. How can I assist you today?
+                  Hi I'm ${S}. How can I assist you today?
                 </p>
               </li>
               ${this.messages.map(e=>U`
                   <li
                     class=${e.isLeadMessage?"message-container lead-message":"message-container ai-message"}
                     key=${e.timestamp}
-                    tabindex="0"
                     role="article"
-                    aria-label="${e.isLeadMessage?"You":"Elise"}: ${Pc(e)}"
+                    aria-label="${e.isLeadMessage?"You":S}: ${Pc(e)}"
                   >
                     ${Zu(e)?U`<pubnub-navigation
                           .message=${e}
@@ -7394,6 +7391,7 @@ xmlns="http://www.w3.org/2000/svg"
             <div id="utilities-inner-footer">
               <textarea
                 id="message-input"
+                aria-label="Message"
                 class=${be({"webchat-font__desktop":!this._isMobile,"webchat-font__mobile":this._isMobile})}
                 placeholder="Ask a Question..."
                 @keydown=${e=>{"Enter"===e.key&&(e.preventDefault(),this.sendMessage(this.messageInput.value))}}
@@ -7415,7 +7413,7 @@ xmlns="http://www.w3.org/2000/svg"
         <div
           id="healthchat-container"
           class=${be({"pubnub-container__mobile":this._isMobile,"healthchat-container__desktop":!this._isMobile})}
-          style=${Vn(S)}
+          style=${Vn(k)}
         >
           <div id="healthchat-header">
             ${"6a9e65e5-9699-4c96-af75-1741d0df79aa"===this.buildingSlug?U` <div>
@@ -7436,7 +7434,7 @@ xmlns="http://www.w3.org/2000/svg"
           <div
             class=${be({hidden:!this.needsConsent(),"legal-confirmation-container":!0})}
           >
-            ${Fo(null!==(s=this.orgSlug)&&void 0!==s?s:null,this.privacyPolicyUrl,this.consentKey,e=>{this.hasReceivedConsent=e},null!==(u=null===(l=this.building)||void 0===l?void 0:l.country)&&void 0!==u?u:null)}
+            ${Fo(null!==(l=this.orgSlug)&&void 0!==l?l:null,this.privacyPolicyUrl,this.consentKey,e=>{this.hasReceivedConsent=e},null!==(d=null===(u=this.building)||void 0===u?void 0:u.country)&&void 0!==d?d:null)}
           </div>
           <div
             id="conversation-body"
@@ -7450,28 +7448,26 @@ xmlns="http://www.w3.org/2000/svg"
               class=${be({hidden:this.needsConsent()})}
             >
               <li class="healthcare-disclaimer-message">
-                ${Ho({orgSlug:null!==(d=this.orgSlug)&&void 0!==d?d:"",type:"healthcare",buildingState:null!==(h=null===(c=this.building)||void 0===c?void 0:c.state)&&void 0!==h?h:null})}
+                ${Ho({orgSlug:null!==(c=this.orgSlug)&&void 0!==c?c:"",type:"healthcare",buildingState:null!==(p=null===(h=this.building)||void 0===h?void 0:h.state)&&void 0!==p?p:null})}
               </li>
               <li
                 class="message-container ai-message"
-                tabindex="0"
                 role="article"
-                aria-label="Elise: Hi I'm Elise. If this is a medical emergency, please call 911. How can I assist you today?"
+                aria-label="${S}: Hi I'm ${S}. If this is a medical emergency, please call 911. How can I assist you today?"
               >
                 <p
                   class=${be({"message-text":!0,"webchat-font__desktop":!this._isMobile,"webchat-font__mobile":this._isMobile})}
                 >
-                  Hi I'm Elise. If this is a medical emergency, please call 911.
-                  How can I assist you today?
+                  Hi I'm ${S}. If this is a medical emergency,
+                  please call 911. How can I assist you today?
                 </p>
               </li>
               ${this.messages.map(e=>U`
                   <li
                     class=${e.isLeadMessage?"message-container lead-message":"message-container ai-message"}
                     key=${e.timestamp}
-                    tabindex="0"
                     role="article"
-                    aria-label="${e.isLeadMessage?"You":"Elise"}: ${Pc(e)}"
+                    aria-label="${e.isLeadMessage?"You":S}: ${Pc(e)}"
                   >
                     ${Zu(e)?U`<pubnub-navigation
                           .message=${e}
@@ -7514,6 +7510,7 @@ xmlns="http://www.w3.org/2000/svg"
             <div id="healthcare-inner-footer">
               <textarea
                 id="message-input"
+                aria-label="Message"
                 class=${be({"webchat-font__desktop":!this._isMobile,"webchat-font__mobile":this._isMobile})}
                 placeholder="Ask a Question..."
                 @keydown=${e=>{"Enter"===e.key&&(e.preventDefault(),this.sendMessage(this.messageInput.value))}}
@@ -7531,11 +7528,11 @@ xmlns="http://www.w3.org/2000/svg"
             </div>
           </div>
         </div>
-      `;if(!this.building)return U``;const A=this.building.orgId;return U`
+      `;if(!this.building)return U``;const E=this.building.orgId;return U`
       <div
         id="pubnub-chat-container"
         class=${be({"pubnub-container__mobile":this._isMobile,"pubnub-container__desktop":!this._isMobile})}
-        style=${Vn(S)}
+        style=${Vn(k)}
         @keydown=${e=>e.stopPropagation()}
         @keyup=${e=>e.stopPropagation()}
       >
@@ -7555,7 +7552,7 @@ xmlns="http://www.w3.org/2000/svg"
         <div
           class=${be({hidden:!this.needsConsent(),"legal-confirmation-container":!0})}
         >
-          ${Fo(null!==(p=this.orgSlug)&&void 0!==p?p:null,this.privacyPolicyUrl,this.consentKey,e=>{this.hasReceivedConsent=e},null!==(g=null===(f=this.building)||void 0===f?void 0:f.country)&&void 0!==g?g:null)}
+          ${Fo(null!==(f=this.orgSlug)&&void 0!==f?f:null,this.privacyPolicyUrl,this.consentKey,e=>{this.hasReceivedConsent=e},null!==(m=null===(g=this.building)||void 0===g?void 0:g.country)&&void 0!==m?m:null)}
         </div>
         <div
           id="conversation-body"
@@ -7569,12 +7566,11 @@ xmlns="http://www.w3.org/2000/svg"
             aria-live="polite"
             class=${be({hidden:this.needsConsent()})}
           >
-            ${Ho({orgSlug:null!==(m=this.orgSlug)&&void 0!==m?m:"",buildingState:null!==(y=null===(b=this.building)||void 0===b?void 0:b.state)&&void 0!==y?y:null,buildingCountry:null!==(w=null===(v=this.building)||void 0===v?void 0:v.country)&&void 0!==w?w:null,type:"leasing",customAdditionalDisclaimer:null===(C=this.building)||void 0===C?void 0:C.customAdditionalDisclaimer})}
+            ${Ho({orgSlug:null!==(b=this.orgSlug)&&void 0!==b?b:"",buildingState:null!==(v=null===(y=this.building)||void 0===y?void 0:y.state)&&void 0!==v?v:null,buildingCountry:null!==(C=null===(w=this.building)||void 0===w?void 0:w.country)&&void 0!==C?C:null,type:"leasing",customAdditionalDisclaimer:null===(x=this.building)||void 0===x?void 0:x.customAdditionalDisclaimer})}
             ${this.building.welcomeMessage?U` <li
-                  class=${be({"message-container":!0,"ai-message":!0,"with-box-shadow":444===A})}
-                  tabindex="0"
+                  class=${be({"message-container":!0,"ai-message":!0,"with-box-shadow":444===E})}
                   role="article"
-                  aria-label="Elise: ${this.building.welcomeMessage}"
+                  aria-label="${S}: ${this.building.welcomeMessage}"
                 >
                   <p
                     class=${be({"message-text":!0,"webchat-font__desktop":!this._isMobile,"webchat-font__mobile":this._isMobile})}
@@ -7584,11 +7580,10 @@ xmlns="http://www.w3.org/2000/svg"
                 </li>`:""}
             ${this.messages.map(e=>U`
                 <li
-                  class=${ho()("message-container",{"lead-message":e.isLeadMessage,"ai-message":!e.isLeadMessage,"with-box-shadow":444===A})}
+                  class=${ho()("message-container",{"lead-message":e.isLeadMessage,"ai-message":!e.isLeadMessage,"with-box-shadow":444===E})}
                   key=${e.timestamp}
-                  tabindex="0"
                   role="article"
-                  aria-label="${e.isLeadMessage?"You":"Elise"}: ${Pc(e)}"
+                  aria-label="${e.isLeadMessage?"You":S}: ${Pc(e)}"
                 >
                   ${Zu(e)?U`<pubnub-navigation
                         .message=${e}
@@ -7627,6 +7622,7 @@ xmlns="http://www.w3.org/2000/svg"
         >
           <textarea
             id="message-input"
+            aria-label="Message"
             class=${be({"webchat-font__desktop":!this._isMobile,"webchat-font__mobile":this._isMobile})}
             style=${Vn({color:Jn(this.building.orgId,this.building.id)&&this.primaryColor!==qn?"black":void 0})}
             placeholder="Ask a question..."
@@ -7639,9 +7635,8 @@ xmlns="http://www.w3.org/2000/svg"
             tabindex="0"
             id="send-message-bttn"
             @click=${()=>this.sendMessage(this.messageInput.value)}
-            ?disabled=${null===(x=this.myPubnub)||void 0===x?void 0:x.isCurrentlyStreamingMessage}
+            ?disabled=${null===($=this.myPubnub)||void 0===$?void 0:$.isCurrentlyStreamingMessage}
             aria-label="Send message"
-            aria-describedby="Send message"
           >
             ${Jn(this.building.orgId,this.building.id)&&this.primaryColor!==qn?Ec("black"):Ec("white")}
           </button>

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

@@ -47,8 +47,7 @@ export const leasingChatStyles = css`
     justify-content: space-between;
   }
   .leasing-conversation-body-backdrop {
-    background: rgba(193, 193, 193, 0.5);
-    backdrop-filter: blur(4px);
+    background: #efefef;
 
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);

package/src/WebComponent/pubnub-chat.ts

@@ -253,6 +253,8 @@ export class PubnubChat extends LitElement {
       return html``; // error should be here
     }
 
+    const assistantName = this.building?.userFirstName || "Elise";
+
     const buildingId = this.building?.id;
     let styles = {};
     if (this._isMobile) {
@@ -357,9 +359,8 @@ export class PubnubChat extends LitElement {
               </li>
               <li
                 class="message-container ai-message"
-                tabindex="0"
                 role="article"
-                aria-label="Elise: Hi I'm Elise. How can I assist you today?"
+                aria-label="${assistantName}: Hi I'm ${assistantName}. How can I assist you today?"
               >
                 <p
                   class=${classMap({
@@ -368,7 +369,7 @@ export class PubnubChat extends LitElement {
                     ["webchat-font__mobile"]: this._isMobile,
                   })}
                 >
-                  Hi I'm Elise. How can I assist you today?
+                  Hi I'm ${assistantName}. How can I assist you today?
                 </p>
               </li>
               ${this.messages.map((message) => {
@@ -378,11 +379,10 @@ export class PubnubChat extends LitElement {
                       ? "message-container lead-message"
                       : "message-container ai-message"}
                     key=${message.timestamp}
-                    tabindex="0"
                     role="article"
                     aria-label="${message.isLeadMessage
                       ? "You"
-                      : "Elise"}: ${messageAriaLabel(message)}"
+                      : assistantName}: ${messageAriaLabel(message)}"
                   >
                     ${isSimpleNavigationChatMessage(message)
                       ? html`<pubnub-navigation
@@ -436,6 +436,7 @@ export class PubnubChat extends LitElement {
             <div id="utilities-inner-footer">
               <textarea
                 id="message-input"
+                aria-label="Message"
                 class=${classMap({
                   ["webchat-font__desktop"]: !this._isMobile,
                   ["webchat-font__mobile"]: this._isMobile,
@@ -535,9 +536,8 @@ export class PubnubChat extends LitElement {
               </li>
               <li
                 class="message-container ai-message"
-                tabindex="0"
                 role="article"
-                aria-label="Elise: Hi I'm Elise. If this is a medical emergency, please call 911. How can I assist you today?"
+                aria-label="${assistantName}: Hi I'm ${assistantName}. If this is a medical emergency, please call 911. How can I assist you today?"
               >
                 <p
                   class=${classMap({
@@ -546,8 +546,8 @@ export class PubnubChat extends LitElement {
                     ["webchat-font__mobile"]: this._isMobile,
                   })}
                 >
-                  Hi I'm Elise. If this is a medical emergency, please call 911.
-                  How can I assist you today?
+                  Hi I'm ${assistantName}. If this is a medical emergency,
+                  please call 911. How can I assist you today?
                 </p>
               </li>
               ${this.messages.map((message) => {
@@ -557,11 +557,10 @@ export class PubnubChat extends LitElement {
                       ? "message-container lead-message"
                       : "message-container ai-message"}
                     key=${message.timestamp}
-                    tabindex="0"
                     role="article"
                     aria-label="${message.isLeadMessage
                       ? "You"
-                      : "Elise"}: ${messageAriaLabel(message)}"
+                      : assistantName}: ${messageAriaLabel(message)}"
                   >
                     ${isSimpleNavigationChatMessage(message)
                       ? html`<pubnub-navigation
@@ -615,6 +614,7 @@ export class PubnubChat extends LitElement {
             <div id="healthcare-inner-footer">
               <textarea
                 id="message-input"
+                aria-label="Message"
                 class=${classMap({
                   ["webchat-font__desktop"]: !this._isMobile,
                   ["webchat-font__mobile"]: this._isMobile,
@@ -734,9 +734,8 @@ export class PubnubChat extends LitElement {
                     "ai-message": true,
                     "with-box-shadow": orgId === 444,
                   })}
-                  tabindex="0"
                   role="article"
-                  aria-label="Elise: ${this.building.welcomeMessage}"
+                  aria-label="${assistantName}: ${this.building.welcomeMessage}"
                 >
                   <p
                     class=${classMap({
@@ -760,11 +759,10 @@ export class PubnubChat extends LitElement {
                     "with-box-shadow": orgId === 444,
                   })}
                   key=${message.timestamp}
-                  tabindex="0"
                   role="article"
                   aria-label="${message.isLeadMessage
                     ? "You"
-                    : "Elise"}: ${messageAriaLabel(message)}"
+                    : assistantName}: ${messageAriaLabel(message)}"
                 >
                   ${isSimpleNavigationChatMessage(message)
                     ? html`<pubnub-navigation
@@ -822,6 +820,7 @@ export class PubnubChat extends LitElement {
         >
           <textarea
             id="message-input"
+            aria-label="Message"
             class=${classMap({
               ["webchat-font__desktop"]: !this._isMobile,
               ["webchat-font__mobile"]: this._isMobile,
@@ -855,7 +854,6 @@ export class PubnubChat extends LitElement {
             @click=${() => this.sendMessage(this.messageInput.value)}
             ?disabled=${this.myPubnub?.isCurrentlyStreamingMessage}
             aria-label="Send message"
-            aria-describedby="Send message"
           >
             ${shouldUsePrimaryColorForChatFooter(
               this.building.orgId,

package/src/assistantName.test.ts

@@ -0,0 +1,152 @@
+import { expect } from "@esm-bundle/chai";
+import "../public/dist/index";
+import { BuildingWebchatView } from "./fetchBuildingWebchatView";
+import type { SimpleChatMessage } from "./MyPubnub";
+import type { PubnubChat } from "./WebComponent/pubnub-chat";
+
+type WidgetTypeName = "default" | "healthcare" | "utilities";
+
+declare const afterEach: (callback: () => void) => void;
+declare const it: (name: string, callback: () => void | Promise<void>) => void;
+
+const text = (visible: string): string => visible.replace(/\s+/g, " ").trim();
+
+const conversation = (): SimpleChatMessage[] => [
+  {
+    timestamp: 1,
+    message: "Do you have a two bedroom?",
+    isLeadMessage: true,
+    chunks: [{ text: "Do you have a two bedroom?", order: 0, isDone: true }],
+    type: "text",
+  },
+  {
+    timestamp: 2,
+    message: "Yes, I can help with that.",
+    isLeadMessage: false,
+    chunks: [{ text: "Yes, I can help with that.", order: 0, isDone: true }],
+    type: "text",
+  },
+  {
+    timestamp: 3,
+    media: [{ title: null, description: null, url: null }],
+    isLeadMessage: false,
+    type: "media",
+  },
+  {
+    timestamp: 4,
+    navigation: {
+      url: "https://example.com/floor-plans",
+      label: "the floor plans",
+    },
+    isLeadMessage: false,
+    type: "navigation",
+  },
+];
+
+const mount = async (
+  widgetType: WidgetTypeName,
+  assistantName: string | null
+): Promise<PubnubChat> => {
+  const chat = document.createElement("pubnub-chat") as PubnubChat;
+  chat.buildingSlug = "alta-federal-hill";
+  chat.orgSlug = "greystar";
+  chat.widgetType = widgetType;
+  if (assistantName !== null) {
+    chat.building = {
+      id: 1,
+      orgId: 1,
+      name: "Alta Federal Hill",
+      userFirstName: assistantName,
+      welcomeMessage: `Hi, I'm ${assistantName}. How can I help you today?`,
+      state: "MD",
+      country: "US",
+      customAdditionalDisclaimer: null,
+    } as BuildingWebchatView;
+  }
+  document.body.appendChild(chat);
+  await chat.updateComplete;
+  // firstUpdated clears messages until PubNub has history.
+  chat.messages = conversation();
+  await chat.updateComplete;
+  return chat;
+};
+
+const labels = (chat: PubnubChat): string[] =>
+  Array.from(
+    chat.shadowRoot?.querySelectorAll<HTMLElement>('[role="article"]') ?? []
+  ).map((article) => article.getAttribute("aria-label") ?? "");
+
+afterEach(() => {
+  document.querySelectorAll("pubnub-chat").forEach((chat) => chat.remove());
+});
+
+it("announces leasing messages as the configured assistant", async () => {
+  const chat = await mount("default", "Emily");
+  const articles = Array.from(
+    chat.shadowRoot?.querySelectorAll<HTMLElement>('[role="article"]') ?? []
+  );
+
+  expect(text(articles[0].innerText)).to.equal(
+    "Hi, I'm Emily. How can I help you today?"
+  );
+  expect(labels(chat)).to.deep.equal([
+    "Emily: Hi, I'm Emily. How can I help you today?",
+    "You: Do you have a two bedroom?",
+    "Emily: Yes, I can help with that.",
+    "Emily: Media message",
+    "Emily: Take me to the floor plans",
+  ]);
+});
+
+it("announces healthcare messages as the configured assistant", async () => {
+  const chat = await mount("healthcare", "Ezra");
+  const greeting = chat.shadowRoot?.querySelector<HTMLElement>(
+    "#message-thread-list > li.message-container"
+  );
+
+  expect(text(greeting?.innerText ?? "")).to.equal(
+    "Hi I'm Ezra. If this is a medical emergency, please call 911. How can I assist you today?"
+  );
+  expect(labels(chat)[0]).to.equal(
+    "Ezra: Hi I'm Ezra. If this is a medical emergency, please call 911. How can I assist you today?"
+  );
+  expect(labels(chat).slice(1)).to.deep.equal([
+    "You: Do you have a two bedroom?",
+    "Ezra: Yes, I can help with that.",
+    "Ezra: Media message",
+    "Ezra: Take me to the floor plans",
+  ]);
+});
+
+it("announces utilities messages as the configured assistant", async () => {
+  const chat = await mount("utilities", "Emily");
+  const greeting = chat.shadowRoot?.querySelector<HTMLElement>(
+    "#message-thread-list > li.message-container"
+  );
+
+  expect(text(greeting?.innerText ?? "")).to.equal(
+    "Hi I'm Emily. How can I assist you today?"
+  );
+  expect(labels(chat)).to.deep.equal([
+    "Emily: Hi I'm Emily. How can I assist you today?",
+    "You: Do you have a two bedroom?",
+    "Emily: Yes, I can help with that.",
+    "Emily: Media message",
+    "Emily: Take me to the floor plans",
+  ]);
+});
+
+it("keeps Elise when a chat has no configured assistant name", async () => {
+  const chat = await mount("utilities", null);
+  const greeting = chat.shadowRoot?.querySelector<HTMLElement>(
+    "#message-thread-list > li.message-container"
+  );
+
+  expect(text(greeting?.innerText ?? "")).to.equal(
+    "Hi I'm Elise. How can I assist you today?"
+  );
+  expect(labels(chat)[0]).to.equal(
+    "Elise: Hi I'm Elise. How can I assist you today?"
+  );
+  expect(labels(chat)[2]).to.equal("Elise: Yes, I can help with that.");
+});