@meetelise/chat 1.20.88 → 1.20.90

package/src/WebComponent/me-chat.ts

@@ -280,7 +280,8 @@ export class MEChat extends LitElement {
     this.analytics = new Analytics(
       this.orgSlug,
       this.buildingSlug,
-      this.chatId
+      this.chatId,
+      this.currentLeadSource
     );
     this.analytics.ping("webchat_heartbeat");
   };

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

@@ -116,7 +116,19 @@ 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;
+  }
   .loading-dot {
     width: 6px;
     height: 6px;
@@ -188,4 +200,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);
@@ -62,7 +74,13 @@ export class PubnubChat extends LitElement {
       }
     );
     this.onMount();
+    // TODO (erol): scroll to bottom on all children load
+    // this is a hacky way to do it
+    setTimeout(() => {
+      this.scrollToChatBottom();
+    }, 1000);
   }
+
   scrollToChatBottom = (): void => {
     this.messageBody.scrollTo({
       top: this.messageBody.scrollHeight - this.messageBody.clientHeight,
@@ -70,7 +88,7 @@ export class PubnubChat extends LitElement {
     });
   };
 
-  updated(): void {
+  async updated(): Promise<void> {
     this.scrollToChatBottom();
   }
 
@@ -133,11 +151,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>`;
+  }
+}

package/src/analytics.ts

@@ -19,11 +19,18 @@ export default class Analytics {
   private building: string;
   private featureFlags?: Record<string, boolean>;
   public chatId: string;
+  private incomingProcessedLeadSource: string | null;
 
-  constructor(org: string, building: string, chatId: string) {
+  constructor(
+    org: string,
+    building: string,
+    chatId: string,
+    incomingProcessedLeadSource: string | null
+  ) {
     this.org = org;
     this.building = building;
     this.chatId = chatId;
+    this.incomingProcessedLeadSource = incomingProcessedLeadSource;
     this.featureFlags = {};
   }
 
@@ -57,6 +64,7 @@ export default class Analytics {
           referrer: document.referrer,
           featureFlags: this.featureFlags,
           campaignSources: getCampaignSources(),
+          incomingProcessedLeadSource: this.incomingProcessedLeadSource, // if we already know the lead source, send it along
         }),
       }
     );