@meetelise/chat 1.20.89 → 1.20.91

package/src/MyPubnub.ts

@@ -269,7 +269,7 @@ class MyPubnub {
       buildingSlug: this.buildingSlug,
     };
   };
-  getChatStorageKey = (): ChatInfo => {
+  getChatStorageKey = (createNewIfNotExist = true): ChatInfo => {
     const eliseaiLocalStorageValue = localStorage.getItem(
       "com.eliseai.webchat.slug=" + this.buildingSlug
     );
@@ -300,7 +300,12 @@ class MyPubnub {
       }
     }
 
-    return this.createChatStorageKey();
+    if (createNewIfNotExist) return this.createChatStorageKey();
+    return {
+      leadId: null,
+      timestamp: null,
+      buildingSlug: null,
+    };
   };
   isChatKeyValid = (storageValueDeconstructed: ChatInfo): boolean => {
     if (

package/src/WebComponent/me-chat.ts

@@ -484,9 +484,16 @@ export class MEChat extends LitElement {
   initializePubnubVariables = async (): Promise<void> => {
     await this.setBuildingDerivedInfo();
     if (!this.building) return;
+    if (this.building.conversationMaintenanceMode) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "MeetElise Chat is in maintenance mode. Chat icon will not appear."
+      );
+      return;
+    }
 
     this.myPubnub = new MyPubnub(this.buildingSlug, this.building);
-    if (this.myPubnub.isChatKeyValid(this.myPubnub.getChatStorageKey())) {
+    if (this.myPubnub.isChatKeyValid(this.myPubnub.getChatStorageKey(false))) {
       await this.myPubnub.initializePubnub();
     }
     this.attachOnClickToLauncher();

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

@@ -4,7 +4,7 @@ export const pubnubChatStyles = css`
   #pubnub-chat-container {
     position: fixed;
 
-    z-index: 100000;
+    z-index: 100001;
     display: flex;
     align-items: center;
 
@@ -116,9 +116,18 @@ export const pubnubChatStyles = css`
     padding: 6px 12px;
     line-height: 130%;
   }
+  .displayed-message-image {
+    max-width: 100%;
+    max-height: 300px;
+    width: auto;
+    height: auto;
+  }
+  .redirect-link {
+    color: black;
+  }
 
   #loading-message {
-    padding: 16px;
+    padding: 12px;
   }
   .loading-dot {
     width: 6px;
@@ -169,6 +178,7 @@ export const pubnubChatStyles = css`
     box-sizing: border-box;
     gap: 16px;
     padding: 24px;
+    z-index: 100001;
   }
   #message-input {
     height: 40px;
@@ -180,6 +190,7 @@ export const pubnubChatStyles = css`
     border: none;
     color: white;
     background: none;
+    z-index: 100001;
   }
   #message-input:focus {
     outline: none;
@@ -191,4 +202,51 @@ export const pubnubChatStyles = css`
     border: none;
     cursor: pointer;
   }
+
+  .website-preview {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+
+    margin: 8px;
+  }
+  .website-preview-image {
+    max-width: 100%;
+    max-height: 200px;
+    width: auto;
+    height: auto;
+  }
+  .website-preview-body {
+    padding: 8px 0px 12px;
+  }
+  .website-preview-title {
+    font-size: 12px;
+    font-weight: bold;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 24px;
+  }
+  .website-preview-description {
+    font-size: 10px;
+    margin: 0;
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: 34px;
+  }
+  .redirect-link-preview {
+    color: inherit;
+    text-decoration: none;
+  }
 `;

package/src/WebComponent/pubnub-chat.ts

@@ -8,6 +8,7 @@ import { SendMessageIconWhite, XBlackOutlineIcon } from "../svgIcons";
 import { defaultBrandColor } from "../themes";
 import { hexToAlmostWhite } from "../utils";
 import { pubnubChatStyles } from "./pubnub-chat-styles";
+import "./pubnub-message";
 
 @customElement("pubnub-chat")
 export class PubnubChat extends LitElement {
@@ -49,6 +50,17 @@ export class PubnubChat extends LitElement {
   @state()
   isLoadingMessages = false;
 
+  @state()
+  websitePreviewMapping: {
+    [messageId: string]: {
+      title: string | null;
+      description: string | null;
+      image: string | null;
+      favicon: string | null;
+      isLoading: boolean;
+    }[];
+  } = {};
+
   sendMessage = async (message: string): Promise<void> => {
     this.messageInput.value = "";
     await this.myPubnub?.sendMessage(message);
@@ -63,6 +75,7 @@ export class PubnubChat extends LitElement {
     );
     this.onMount();
   }
+
   scrollToChatBottom = (): void => {
     this.messageBody.scrollTo({
       top: this.messageBody.scrollHeight - this.messageBody.clientHeight,
@@ -70,7 +83,7 @@ export class PubnubChat extends LitElement {
     });
   };
 
-  updated(): void {
+  async updated(): Promise<void> {
     this.scrollToChatBottom();
   }
 
@@ -133,11 +146,12 @@ export class PubnubChat extends LitElement {
                       : undefined,
                   })}
                 >
-                  <p class="message-text">
-                    ${message.message.text
-                      .split("\n")
-                      .map((line) => html`${line}<br />`)}
-                  </p>
+                  <pubnub-message
+                    .message=${message}
+                    .myPubnub=${this.myPubnub}
+                    .onMount=${() => this.scrollToChatBottom()}
+                  >
+                  </pubnub-message>
                 </li>
               `;
             })}

package/src/WebComponent/pubnub-message.ts

@@ -0,0 +1,225 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import MyPubnub, { ChatMessage } from "../MyPubnub";
+import { pubnubChatStyles } from "./pubnub-chat-styles";
+import { v4 as uuid } from "uuid";
+import axios from "axios";
+
+interface WebsitePreview {
+  title: string | null;
+  description: string | null;
+  image: string | null;
+  favicon: string | null;
+  link: string;
+}
+@customElement("pubnub-message")
+export class PubnubMessage extends LitElement {
+  static styles = [pubnubChatStyles];
+
+  @property({ attribute: true })
+  message: ChatMessage | undefined;
+
+  @property({ attribute: true })
+  myPubnub: MyPubnub | undefined;
+
+  @property({ attribute: true })
+  onMount: () => void = () => ({});
+
+  @state()
+  loadingPreviews = true;
+
+  @state()
+  parsedMessage: TemplateResult | undefined;
+
+  @state()
+  websitePreviewInfo: WebsitePreview[] = [];
+
+  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>[] = [];
+    this.parsedMessage = html`${markedText.split("\n").map((line) => {
+      return html`${line.split(" ").map((word) => {
+          if (hyperlinks.find((obj) => obj.id === word)) {
+            // EliseAI made hyperlink
+            const link = hyperlinks.find((obj) => obj.id === word);
+            if (!link) return;
+            imagesToDisplay.push({
+              redirectTo: link?.link,
+              source: link?.link,
+            });
+            return html`<a
+              class="redirect-link"
+              href="${link?.link}"
+              target="_blank"
+              rel="noopener noreferrer"
+              >${link?.hyperlink}
+            </a>`;
+          }
+          if (urlRegex.test(word)) {
+            // general url
+            loadingWebsitePreviews.push(this.getLinkData(word));
+            return html`<a
+              class="redirect-link"
+              href="${word}"
+              target="_blank"
+              rel="noopener noreferrer"
+              >${word}
+            </a>`;
+          } else {
+            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>`;
+    })}`;
+    Promise.all(loadingWebsitePreviews).then((results) => {
+      this.websitePreviewInfo = results;
+    });
+  }
+
+  private mapAndMarkHyperLinks(text: string): {
+    hyperlinks: {
+      link: string;
+      hyperlink: string;
+      mark: string;
+      id: string;
+    }[];
+    markedText: string;
+  } {
+    const matches = Array.from(text.matchAll(/<https?:\/\/[^\s]+\|[^>]+>/g));
+    const listHyperlinks: {
+      link: string;
+      hyperlink: string;
+      mark: string;
+      id: string;
+    }[] = [];
+    matches.forEach((match) => {
+      try {
+        const link = match[0].split("|")[0].replace("<", "");
+        const hyperlink = match[0].split("|")[1].replace(">", "");
+        if (link && hyperlink) {
+          const uniqueKeyMark = uuid();
+          listHyperlinks.push({
+            link,
+            hyperlink,
+            mark: match[0],
+            id: uniqueKeyMark,
+          });
+          text = text.replace(match[0], uniqueKeyMark);
+        }
+      } catch (_) {
+        // pass
+      }
+    });
+
+    return { hyperlinks: listHyperlinks, markedText: text };
+  }
+
+  private async getLinkData(url: string): Promise<WebsitePreview> {
+    try {
+      // Getting link data is unlikely to work unless the site has CORS enabled and/or url is on the same domain
+      // For dev testing, can visit https://cors-anywhere.herokuapp.com/ and prefix url with it to bypass CORS
+      const response = await axios.get(url);
+      const html = response.data;
+      const parser = new DOMParser(); // creates a temp dom to parse HTML
+      const doc = parser.parseFromString(html, "text/html");
+      if (!doc)
+        return {
+          title: null,
+          description: null,
+          image: null,
+          favicon: null,
+          link: url,
+        };
+
+      return {
+        title: doc.querySelector("title")?.textContent ?? null,
+        description:
+          doc
+            .querySelector('meta[name="description"]')
+            ?.getAttribute("content") || null,
+        image:
+          doc
+            .querySelector('meta[property="og:image"]')
+            ?.getAttribute("content") || null,
+        favicon:
+          doc
+            .querySelector('link[rel="shortcut icon"]')
+            ?.getAttribute("href") ||
+          doc.querySelector('link[rel="icon"]')?.getAttribute("href") ||
+          null,
+        link: url,
+      };
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error fetching website details:", error);
+      return {
+        title: null,
+        description: null,
+        image: null,
+        favicon: null,
+        link: url,
+      };
+    }
+  }
+
+  updated(): void {
+    this.onMount();
+  }
+
+  render(): TemplateResult {
+    if (!this.message) return html``;
+    return html`<div class="message-inner-body">
+      <p class="message-text">${this.parsedMessage}</p>
+      ${this.websitePreviewInfo.length > 0 &&
+      this.websitePreviewInfo.some(
+        (preview) => preview.title && (preview.image || preview.favicon)
+      )
+        ? html`<br />`
+        : ""}
+      ${this.websitePreviewInfo.map((preview) => {
+        if (!preview.title || !(preview.image || preview.favicon)) return;
+        return html` <a
+          class="redirect-link-preview"
+          href=${preview.link}
+          target="_blank"
+          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%"
+            />
+            <div class="website-preview-body">
+              <p class="message-text website-preview-title">${preview.title}</p>
+              <p class="message-text website-preview-description">
+                ${preview.description}
+              </p>
+            </div>
+          </div>
+        </a></div> `;
+      })}
+    </div>`;
+  }
+}