@meetelise/chat 1.20.107 → 1.20.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetelise/chat",
-  "version": "1.20.107",
+  "version": "1.20.108",
   "description": "",
   "main": "public/dist/index.js",
   "type": "module",

package/public/dist/index.js

@@ -3085,6 +3085,9 @@ otherwise there's some empty space at the bottom of the button, which interferes
     width: auto;
     height: auto;
   }
+  .displayed-message-image-error {
+    display: none;
+  }
   .redirect-link {
     color: black;
   }
@@ -3184,7 +3187,7 @@ otherwise there's some empty space at the bottom of the button, which interferes
     flex-direction: column;
     justify-content: center;
 
-    margin: 8px;
+    margin: 0px 6px 6px;
   }
   .website-preview-image {
     max-width: 100%;
@@ -3221,30 +3224,31 @@ otherwise there's some empty space at the bottom of the button, which interferes
     color: inherit;
     text-decoration: none;
   }
-`;var kr=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 Ur=class extends ae{constructor(){super(...arguments),this.onMount=()=>({}),this.loadingPreviews=!0,this.websitePreviewInfo=[]}firstUpdated(){if(!this.message)return;const{hyperlinks:e,markedText:t}=this.mapAndMarkHyperLinks(this.message.message.text),n=/(https?:\/\/[^\s]+)/g,i=[],r=[];this.parsedMessage=B`${t.split("\n").map((t=>B`${t.split(" ").map((t=>{if(e.find((e=>e.id===t))){const n=e.find((e=>e.id===t));if(!n)return;return i.push({redirectTo:null==n?void 0:n.link,source:null==n?void 0:n.link}),B`<a
+`;var kr=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 Ur=class extends ae{constructor(){super(...arguments),this.onMount=()=>({}),this.loadingPreviews=!0,this.websitePreviewInfo=[],this.imagesToDisplay=[],this.imageUrlError=[]}firstUpdated(){if(!this.message)return;const{hyperlinks:e,markedText:t}=this.mapAndMarkHyperLinks(this.message.message.text),n=/(https?:\/\/[^\s]+)/g,i=[],r=[];this.parsedMessage=B`${t.split("\n").map((t=>B`${t.split(" ").map((t=>{if(e.find((e=>e.id===t))){const n=e.find((e=>e.id===t));if(!n)return;return r.push({redirectTo:null==n?void 0:n.link,source:null==n?void 0:n.link}),B`<a
               class="redirect-link"
               href="${null==n?void 0:n.link}"
               target="_blank"
               rel="noopener noreferrer"
               >${null==n?void 0:n.hyperlink}
-            </a>`}return n.test(t)?(r.push(this.getLinkData(t)),B`<a
+            </a>`}return n.test(t)?(i.push(this.getLinkData(t)),B`<a
               class="redirect-link"
               href="${t}"
               target="_blank"
               rel="noopener noreferrer"
               >${t}
-            </a>`):B`${t} `}))}<br />`))}
-    ${i.map((e=>B`<a
-        href="${e.redirectTo}"
-        target="_blank"
-        rel="noopener noreferrer"
-        ><img
-          class="displayed-message-image"
-          src=${e.source}
-          alt="displayed message image"
-      /></a>`))}`,Promise.all(r).then((e=>{this.websitePreviewInfo=e}))}mapAndMarkHyperLinks(e){const t=Array.from(e.matchAll(/<https?:\/\/[^|]+\|[^>]+>/g)),n=[];return t.forEach((t=>{try{const i=t[0].split("|")[0].replace("<",""),r=t[0].split("|")[1].replace(">","");if(i&&r){const o=di();n.push({link:i,hyperlink:r,mark:t[0],id:o}),e=e.replace(t[0],o)}}catch(e){}})),{hyperlinks:n,markedText:e}}async getLinkData(e){var n,i,r,o,a,s;try{const u=(await t().get(e)).data,l=(new DOMParser).parseFromString(u,"text/html");return l?{title:null!==(i=null===(n=l.querySelector("title"))||void 0===n?void 0:n.textContent)&&void 0!==i?i:null,description:(null===(r=l.querySelector('meta[name="description"]'))||void 0===r?void 0:r.getAttribute("content"))||null,image:(null===(o=l.querySelector('meta[property="og:image"]'))||void 0===o?void 0:o.getAttribute("content"))||null,favicon:(null===(a=l.querySelector('link[rel="shortcut icon"]'))||void 0===a?void 0:a.getAttribute("href"))||(null===(s=l.querySelector('link[rel="icon"]'))||void 0===s?void 0:s.getAttribute("href"))||null,link:e}:{title:null,description:null,image:null,favicon:null,link:e}}catch(t){return console.error("Error fetching website details:",t),{title:null,description:null,image:null,favicon:null,link:e}}}updated(){this.onMount()}render(){return this.message?B`<div class="message-inner-body">
+            </a>`):B`${t} `}))}<br />`))}`,this.imagesToDisplay=r,Promise.all(i).then((e=>{this.websitePreviewInfo=e}))}mapAndMarkHyperLinks(e){const t=Array.from(e.matchAll(/<https?:\/\/[^|]+\|[^>]+>/g)),n=[];return t.forEach((t=>{try{const i=t[0].split("|")[0].replace("<",""),r=t[0].split("|")[1].replace(">","");if(i&&r){const o=di();n.push({link:i,hyperlink:r,mark:t[0],id:o}),e=e.replace(t[0],o)}}catch(e){}})),{hyperlinks:n,markedText:e}}async getLinkData(e){var n,i,r,o,a,s;try{const u=(await t().get(e)).data,l=(new DOMParser).parseFromString(u,"text/html");return l?{title:null!==(i=null===(n=l.querySelector("title"))||void 0===n?void 0:n.textContent)&&void 0!==i?i:null,description:(null===(r=l.querySelector('meta[name="description"]'))||void 0===r?void 0:r.getAttribute("content"))||null,image:(null===(o=l.querySelector('meta[property="og:image"]'))||void 0===o?void 0:o.getAttribute("content"))||null,favicon:(null===(a=l.querySelector('link[rel="shortcut icon"]'))||void 0===a?void 0:a.getAttribute("href"))||(null===(s=l.querySelector('link[rel="icon"]'))||void 0===s?void 0:s.getAttribute("href"))||null,link:e}:{title:null,description:null,image:null,favicon:null,link:e}}catch(t){return console.error("Error fetching website details:",t),{title:null,description:null,image:null,favicon:null,link:e}}}updated(){this.onMount()}render(){return this.message?B`<div class="message-inner-body">
       <p class="message-text">${this.parsedMessage}</p>
       ${this.websitePreviewInfo.length>0&&this.websitePreviewInfo.some((e=>e.title&&(e.image||e.favicon)))?B`<br />`:""}
+      ${this.imagesToDisplay.map((e=>B`<a
+          href="${e.redirectTo}"
+          target="_blank"
+          rel="noopener noreferrer"
+          ><img
+            class=${this.imageUrlError.includes(e.source)?"displayed-message-image-error":"displayed-message-image"}
+            src=${e.source}
+            alt="displayed message image"
+            @error=${()=>{this.imageUrlError=[...this.imageUrlError,e.source]}}
+        /></a>`))}
       ${this.websitePreviewInfo.map((e=>{var t;if(e.title&&(e.image||e.favicon))return B` <a
           class="redirect-link-preview"
           href=${e.link}
@@ -3252,13 +3256,14 @@ otherwise there's some empty space at the bottom of the button, which interferes
           rel="noopener noreferrer"
         >
           <div class="website-preview">
-            <img
-              src=${null!==(t=e.image)&&void 0!==t?t:e.favicon}
-              class="website-preview-image"
-              alt="website preview image"
-              width="100%"
-              height="100%"
-            />
+            ${e.image||e.favicon?B` <img
+                    src=${null!==(t=e.image)&&void 0!==t?t:e.favicon}
+                    class="website-preview-image"
+                    alt="website preview image"
+                    width="100%"
+                    height="100%"
+                  />`:""}
+      
             <div class="website-preview-body">
               <p class="message-text website-preview-title">${e.title}</p>
               <p class="message-text website-preview-description">
@@ -3267,7 +3272,7 @@ otherwise there's some empty space at the bottom of the button, which interferes
             </div>
           </div>
         </a></div> `}))}
-    </div>`:B``}};Ur.styles=[Dr],kr([de({attribute:!0})],Ur.prototype,"message",void 0),kr([de({attribute:!0})],Ur.prototype,"myPubnub",void 0),kr([de({attribute:!0})],Ur.prototype,"onMount",void 0),kr([ce()],Ur.prototype,"loadingPreviews",void 0),kr([ce()],Ur.prototype,"parsedMessage",void 0),kr([ce()],Ur.prototype,"websitePreviewInfo",void 0),Ur=kr([ue("pubnub-message")],Ur);var qr=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 Br=class extends ae{constructor(){super(...arguments),this.brandColor=yi,this.onClickExit=()=>({}),this.onMount=()=>({}),this.messages=[],this.isMobile=!1,this.isLoadingMessages=!1,this.websitePreviewMapping={},this.sendMessage=async e=>{var t;this.messageInput.value="",this.autoResizeMessageInput(),await(null===(t=this.myPubnub)||void 0===t?void 0:t.sendMessage(e))},this.scrollToChatBottom=()=>{this.messageBody.scrollTo({top:this.messageBody.scrollHeight-this.messageBody.clientHeight,behavior:"smooth"})},this.autoResizeMessageInput=()=>{this.messageInput.style.height="auto",this.messageInput.style.height=this.messageInput.scrollHeight+"px"}}firstUpdated(){var e,t;this.messages=(null===(e=this.myPubnub)||void 0===e?void 0:e.messages)||[],null===(t=this.myPubnub)||void 0===t||t.addChatListener((e=>{this.messages=e.messages,this.isLoadingMessages=e.isLoading})),this.onMount()}async updated(){this.scrollToChatBottom()}render(){return this.buildingSlug&&this.building?B`
+    </div>`:B``}};Ur.styles=[Dr],kr([de({attribute:!0})],Ur.prototype,"message",void 0),kr([de({attribute:!0})],Ur.prototype,"myPubnub",void 0),kr([de({attribute:!0})],Ur.prototype,"onMount",void 0),kr([ce()],Ur.prototype,"loadingPreviews",void 0),kr([ce()],Ur.prototype,"parsedMessage",void 0),kr([ce()],Ur.prototype,"websitePreviewInfo",void 0),kr([ce()],Ur.prototype,"imagesToDisplay",void 0),kr([ce()],Ur.prototype,"imageUrlError",void 0),Ur=kr([ue("pubnub-message")],Ur);var qr=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 Br=class extends ae{constructor(){super(...arguments),this.brandColor=yi,this.onClickExit=()=>({}),this.onMount=()=>({}),this.messages=[],this.isMobile=!1,this.isLoadingMessages=!1,this.websitePreviewMapping={},this.sendMessage=async e=>{var t;this.messageInput.value="",this.autoResizeMessageInput(),await(null===(t=this.myPubnub)||void 0===t?void 0:t.sendMessage(e))},this.scrollToChatBottom=()=>{this.messageBody.scrollTo({top:this.messageBody.scrollHeight-this.messageBody.clientHeight,behavior:"smooth"})},this.autoResizeMessageInput=()=>{this.messageInput.style.height="auto",this.messageInput.style.height=this.messageInput.scrollHeight+"px"}}firstUpdated(){var e,t;this.messages=(null===(e=this.myPubnub)||void 0===e?void 0:e.messages)||[],null===(t=this.myPubnub)||void 0===t||t.addChatListener((e=>{this.messages=e.messages,this.isLoadingMessages=e.isLoading})),this.onMount()}async updated(){this.scrollToChatBottom()}render(){return this.buildingSlug&&this.building?B`
       <div
         id="pubnub-chat-container"
         class=${ge({"pubnub-container__mobile":this.isMobile,"pubnub-container__desktop":!this.isMobile})}

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

@@ -122,6 +122,9 @@ export const pubnubChatStyles = css`
     width: auto;
     height: auto;
   }
+  .displayed-message-image-error {
+    display: none;
+  }
   .redirect-link {
     color: black;
   }
@@ -221,7 +224,7 @@ export const pubnubChatStyles = css`
     flex-direction: column;
     justify-content: center;
 
-    margin: 8px;
+    margin: 0px 6px 6px;
   }
   .website-preview-image {
     max-width: 100%;

package/src/WebComponent/pubnub-message.ts

@@ -12,6 +12,11 @@ interface WebsitePreview {
   favicon: string | null;
   link: string;
 }
+
+interface ImageToDisplay {
+  redirectTo: string;
+  source: string;
+}
 @customElement("pubnub-message")
 export class PubnubMessage extends LitElement {
   static styles = [pubnubChatStyles];
@@ -34,18 +39,20 @@ export class PubnubMessage extends LitElement {
   @state()
   websitePreviewInfo: WebsitePreview[] = [];
 
+  @state()
+  imagesToDisplay: ImageToDisplay[] = [];
+
+  @state()
+  imageUrlError: string[] = [];
+
   firstUpdated(): void {
     if (!this.message) return;
     const { hyperlinks, markedText } = this.mapAndMarkHyperLinks(
       this.message.message.text
     );
     const urlRegex = /(https?:\/\/[^\s]+)/g; // Regular expression to match URLs
-    const imagesToDisplay: {
-      redirectTo: string;
-      source: string;
-    }[] = [];
-
     const loadingWebsitePreviews: Promise<WebsitePreview>[] = [];
+    const imagesToDisplay: ImageToDisplay[] = [];
     this.parsedMessage = html`${markedText.split("\n").map((line) => {
       return html`${line.split(" ").map((word) => {
           if (hyperlinks.find((obj) => obj.id === word)) {
@@ -78,18 +85,8 @@ export class PubnubMessage extends LitElement {
             return html`${word} `;
           }
         })}<br />`;
-    })}
-    ${imagesToDisplay.map((image) => {
-      return html`<a
-        href="${image.redirectTo}"
-        target="_blank"
-        rel="noopener noreferrer"
-        ><img
-          class="displayed-message-image"
-          src=${image.source}
-          alt="displayed message image"
-      /></a>`;
     })}`;
+    this.imagesToDisplay = imagesToDisplay;
     Promise.all(loadingWebsitePreviews).then((results) => {
       this.websitePreviewInfo = results;
     });
@@ -195,6 +192,23 @@ export class PubnubMessage extends LitElement {
       )
         ? html`<br />`
         : ""}
+      ${this.imagesToDisplay.map((image) => {
+        return html`<a
+          href="${image.redirectTo}"
+          target="_blank"
+          rel="noopener noreferrer"
+          ><img
+            class=${this.imageUrlError.includes(image.source)
+              ? "displayed-message-image-error"
+              : "displayed-message-image"}
+            src=${image.source}
+            alt="displayed message image"
+            @error=${() => {
+              // to trigger rerender
+              this.imageUrlError = [...this.imageUrlError, image.source];
+            }}
+        /></a>`;
+      })}
       ${this.websitePreviewInfo.map((preview) => {
         if (!preview.title || !(preview.image || preview.favicon)) return;
         return html` <a
@@ -204,13 +218,18 @@ export class PubnubMessage extends LitElement {
           rel="noopener noreferrer"
         >
           <div class="website-preview">
-            <img
-              src=${preview.image ?? preview.favicon}
-              class="website-preview-image"
-              alt="website preview image"
-              width="100%"
-              height="100%"
-            />
+            ${
+              preview.image || preview.favicon
+                ? html` <img
+                    src=${preview.image ?? preview.favicon}
+                    class="website-preview-image"
+                    alt="website preview image"
+                    width="100%"
+                    height="100%"
+                  />`
+                : ""
+            }
+      
             <div class="website-preview-body">
               <p class="message-text website-preview-title">${preview.title}</p>
               <p class="message-text website-preview-description">
@@ -223,3 +242,5 @@ export class PubnubMessage extends LitElement {
     </div>`;
   }
 }
+
+("Would you be available for a tour tomorrow at 11:00am or 3:45pm? We also have additional <https://app.meetelise.com/milhaus/2a5c7bdc-4d63-11ec-aa49-5f037e1156e7/tour?stateId=gAAAAABkihW_IJql0zzRF-Mved31jlp9yDgtBrPsSaZ63db9pV1m2vXLpWSXC4afXzCXqf6YbzCCIsmY7fkyOdX4OJei7v5HwIFa9tPTXhhxRnFTi1GpV5s=|timeslots here.>");