@meetelise/chat 1.21.0 → 1.21.2

package/src/WebComponent/pubnub-media.ts

@@ -0,0 +1,208 @@
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import MyPubnub, { SimpleMediaChatMessage } from "../MyPubnub";
+import { classMap } from "lit/directives/class-map.js";
+import { InputStyles } from "./actions/InputStyles";
+import { pubnubChatStyles } from "./pubnub-chat-styles";
+
+@customElement("pubnub-media")
+export class PubnubMedia extends LitElement {
+  static styles = [
+    InputStyles,
+    pubnubChatStyles,
+    css`
+      .carousel {
+        position: relative;
+        max-width: 400px;
+        height: max-content;
+        min-height: 140px;
+        margin: auto;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        scroll-snap-type: x mandatory;
+      }
+      .carousel .image-container {
+        display: flex;
+        will-change: transform;
+        transition: transform 0.5s ease-in-out;
+        align-items: flex-start;
+        width: 100%;
+      }
+      .carousel img {
+        width: 100%;
+        max-width: none;
+        flex-shrink: 0;
+        opacity: 0.5;
+        transition: opacity 0.5s ease;
+        height: 100%;
+        object-fit: contain;
+        display: block;
+      }
+      .image-item {
+        width: 100%;
+        max-width: none;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      .image-link {
+        width: 100%;
+        max-width: none;
+        flex-shrink: 0;
+      }
+      .carousel img.active {
+        opacity: 1;
+      }
+      .button {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        background-color: rgba(0, 0, 0, 0.1);
+        color: white;
+        border: none;
+        border-radius: 2px;
+        cursor: pointer;
+        padding: 10px;
+        z-index: 100;
+        height: 64px;
+        width: 32px;
+        transition: background-color 0.3s ease;
+      }
+      .button:hover {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+      .prev {
+        left: 2px;
+      }
+      .next {
+        right: 2px;
+      }
+      .image-info {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
+      .image-info p {
+        margin: 0;
+        padding: 0;
+        white-space: wrap;
+        overflow: hidden;
+        word-wrap: break-word;
+      }
+      .image-info .img-header {
+        color: #333;
+        font-size: 14px;
+      }
+      .image-info .img-desc {
+        color: #666;
+        font-size: 12px;
+        max-height: 200px;
+        overflow-y: auto;
+      }
+    `,
+  ];
+
+  @property({
+    attribute: true,
+  })
+  message: SimpleMediaChatMessage | undefined;
+
+  @property({ attribute: true })
+  myPubnub: MyPubnub | undefined;
+
+  @property({ attribute: true })
+  onMount: () => void = () => ({});
+
+  updated(changedProperties: PropertyValues<this>): void {
+    this.onMount();
+    if (!changedProperties.has("message")) return;
+  }
+
+  @state()
+  showMediaAsCarousel = true;
+
+  @state()
+  activeIndex = 0;
+
+  private prevImage(): void {
+    if (!this.message) return;
+    if (this.activeIndex === 0) {
+      this.activeIndex = this.message.media.length - 1;
+    } else {
+      this.activeIndex -= 1;
+    }
+  }
+
+  private nextImage(): void {
+    if (!this.message) return;
+    if (this.activeIndex === this.message.media.length - 1) {
+      this.activeIndex = 0;
+    } else {
+      this.activeIndex += 1;
+    }
+  }
+
+  render(): TemplateResult {
+    if (!this.message) return html``;
+
+    if (this.showMediaAsCarousel) {
+      return html`<div class="message-inner-body">
+        <div class="carousel">
+          <div
+            class="image-container"
+            style="transform: translateX(-${this.activeIndex * 100}%);"
+          >
+            ${this.message.media.map(
+              (image, index) => html`
+                <div class="image-item">
+                  <a
+                    class="image-link"
+                    href="${image.url}"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <img
+                      class=${classMap({ active: index === this.activeIndex })}
+                      src=${image.url}
+                      alt=""
+                    />
+                  </a>
+                  <div class="image-info">
+                    ${image.title
+                      ? html`<p class="img-header">${image.title}</p>`
+                      : ""}
+                    ${image.description
+                      ? html`<p class="img-desc">${image.description}</p>`
+                      : ""}
+                  </div>
+                </div>
+              `
+            )}
+          </div>
+          ${this.message.media.length > 1
+            ? html` <button class="button prev" @click=${this.prevImage}>
+                  &#10094;
+                </button>
+                <button class="button next" @click=${this.nextImage}>
+                  &#10095;
+                </button>`
+            : ""}
+        </div>
+      </div>`;
+    } else {
+      return html`<div class="message-inner-body">
+        ${this.message.media.map((image) => {
+          return html`<a
+            href="${image.url}"
+            target="_blank"
+            rel="noopener noreferrer"
+            ><img class=${"displayed-message-image"} src=${image.url} alt=""
+          /></a>`;
+        })}
+      </div>`;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+import { css } from "lit";
+
+export const pubnubMessageStyles = css`
+  .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: 0px 6px 6px;
+  }
+  .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;
+    max-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;
+  }
+
+  .hidden {
+    display: none !important;
+  }
+`;

package/src/WebComponent/pubnub-message.ts

@@ -0,0 +1,421 @@
+import DOMPurify from "dompurify";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import MyPubnub, { SimpleTextChatMessage } from "../MyPubnub";
+import { v4 as uuid } from "uuid";
+import axios from "axios";
+import { classMap } from "lit/directives/class-map.js";
+import { InputStyles } from "./actions/InputStyles";
+import { isMobile } from "../utils";
+import { LogType, sendLoggingEvent } from "../analytics";
+import { pubnubChatStyles } from "./pubnub-chat-styles";
+import "./mini-loader";
+
+interface WebsitePreview {
+  title: string | null;
+  description: string | null;
+  image: string | null;
+  favicon: string | null;
+  link: string;
+}
+
+interface ImageToDisplay {
+  redirectTo: string;
+  source: string;
+}
+@customElement("pubnub-message")
+export class PubnubMessage extends LitElement {
+  static styles = [
+    InputStyles,
+    pubnubChatStyles,
+    css`
+      .message-inner-body {
+        position: relative;
+      }
+      .message-loader {
+        position: absolute;
+        bottom: -2px;
+        right: -2px;
+      }
+    `,
+  ];
+
+  @property({ attribute: true })
+  buildingSlug: string | undefined;
+
+  @property({
+    attribute: true,
+  })
+  message: SimpleTextChatMessage | undefined;
+
+  @property({ attribute: true })
+  myPubnub: MyPubnub | undefined;
+
+  @property({ attribute: true })
+  onMount: () => void = () => ({});
+
+  @state()
+  loadingPreviews = true;
+
+  @state()
+  parsedMessage: TemplateResult | undefined;
+
+  @state()
+  websitePreviewInfo: WebsitePreview[] = [];
+
+  @state()
+  imagesToDisplay: ImageToDisplay[] = [];
+
+  @state()
+  imageUrlError: string[] = [];
+
+  @property({ type: Boolean })
+  isLeadMessage = false;
+
+  isMessageStillStreamingChunks(): boolean {
+    if (!this.message) return false;
+    const messageChunkMarkedAsDone = this.message.chunks.find(
+      (chunk) => chunk.isDone
+    );
+    if (!messageChunkMarkedAsDone) return true;
+
+    // We check to see if ALL the chunks have been received
+    return this.message.chunks.length === messageChunkMarkedAsDone.order;
+  }
+
+  updated(changedProperties: PropertyValues<this>): void {
+    this.onMount();
+    if (!changedProperties.has("message")) return;
+    if (!this.message) return;
+
+    try {
+      if (
+        !this.isMessageStillStreamingChunks() &&
+        !this.isLeadMessage &&
+        this.invalidMarkdownText(this.message.message)
+      ) {
+        sendLoggingEvent({
+          logType: LogType.error,
+          logTitle: "INVALID_MARKDOWN",
+          logData: {
+            message: this.message.message,
+            chatId: this.myPubnub?.channel,
+          },
+          buildingSlug: this.buildingSlug,
+        });
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error parsing markdown:", error);
+    }
+
+    const { hyperlinks, markedText } = this.mapAndMarkHyperLinks(
+      this.message.message
+    );
+    const urlRegex = /(https?:\/\/[^\s]+)/g; // Regular expression to match URLs
+    const loadingWebsitePreviews: Promise<WebsitePreview>[] = [];
+    const imagesToDisplay: ImageToDisplay[] = [];
+    this.parsedMessage = html`${markedText
+      .trim()
+      .split("\n")
+      .map((line) => {
+        const sanitizedLine = this.sanitizeMarkdownText(line);
+        const allWords = this.preserveHTMLTags(sanitizedLine);
+        if (!allWords) return html``;
+        return html`${allWords.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
+              const link = this.removeTrailingPunctuation(word);
+              loadingWebsitePreviews.push(this.getLinkData(link));
+              return html`<a
+                class="redirect-link"
+                href="${link}"
+                target="_blank"
+                rel="noopener noreferrer"
+                >${link}
+              </a>`;
+            } else {
+              return html`${unsafeHTML(DOMPurify.sanitize(word))} `;
+            }
+          })}<br />`;
+      })}`;
+    this.imagesToDisplay = imagesToDisplay;
+    Promise.all(loadingWebsitePreviews).then((results) => {
+      this.websitePreviewInfo = results;
+    });
+  }
+
+  private invalidMarkdownText(text: string): boolean {
+    try {
+      const markdownErrors = [
+        /\*\*[^*\n]*\*$/, // Unclosed bold (excluding newline)
+        /__[^_\n]*_$/, // Unclosed italic (excluding newline)
+        /`[^`\n]*`$/, // Unclosed code (excluding newline)
+        /\[[^\]\n]*\]$/, // Unclosed link text (excluding newline)
+        /\[[^\]]*\]\([^)\n]*\)$/, // Unclosed link URL (excluding newline)
+        /^(#+)\s*$/, // Header without text
+        /(^|[^!])\[[^\]]*\]\(([^)]+)\s*\)$/, // Improperly formatted link
+        /(?:^|\s)[*_]{1,2}(?:\s|$)/, // Improper use of bold or italic
+      ];
+
+      return markdownErrors.some((regex) => regex.test(text));
+    } catch (error) {
+      return false;
+    }
+  }
+  private preserveHTMLTags(text: string): string[] {
+    const tagRegex = /(<\/?[a-z][^>]*>[^<]*<\/?[a-z]*>|[^\s]+[.,?!]?|\S)/gi;
+    const splitTags = text.match(tagRegex);
+
+    return splitTags?.filter((str) => str.trim() !== "") ?? [];
+  }
+
+  private sanitizeMarkdownText(text: string): string {
+    const toHTML = text
+      .replace(/^### (.*$)/gim, "<h3>$1</h3>")
+      .replace(/^## (.*$)/gim, "<h2>$1</h2>")
+      .replace(/^# (.*$)/gim, "<h1>$1</h1>")
+      .replace(/\*\*(.*?)\*\*/gim, "<b>$1</b>")
+      .replace(/\*(.*?)\*/gim, "<i>$1</i>");
+
+    return toHTML.trim();
+  }
+
+  private removeTrailingPunctuation(text: string): string {
+    const punctuation = [".", ",", "!", "?", ":", ";"];
+    if (punctuation.includes(text[text.length - 1])) {
+      return this.removeTrailingPunctuation(text.slice(0, -1));
+    }
+    return text;
+  }
+  private mapAndMarkHyperLinks(text: string): {
+    hyperlinks: {
+      link: string;
+      hyperlink: string;
+      mark: string;
+      id: string;
+    }[];
+    markedText: string;
+  } {
+    // Updated regex to match all formats (EliseAI, embedded links, and markdown)
+    const regex =
+      /<https?:\/\/[^|]+\|[^>]+>|<a href="[^"]+"(?: target="[^"]*")?>[^<]+<\/a>|\[.*?\]\([^)]*\.[^)]*\)/g;
+
+    const matches = Array.from(text.matchAll(regex));
+    const listHyperlinks: {
+      link: string;
+      hyperlink: string;
+      mark: string;
+      id: string;
+    }[] = [];
+
+    const matchesParsed = matches.map((match) => {
+      const matchedLink = match[0];
+      if (match.index === undefined) return;
+      const charBefore = text[match.index - 1];
+      const charAfter = text[match.index + matchedLink.length];
+
+      // Handle for Elise Format
+      if (matchedLink.startsWith("<https") || matchedLink.startsWith("<http")) {
+        return {
+          matchedLink,
+          link: matchedLink.split("|")[0].replace("<", ""),
+          hyperlink: matchedLink.split("|")[1].replace(">", ""),
+          addSpaceBefore: !!(charBefore && charBefore !== " "),
+          addSpaceAfter: !!(charAfter && charAfter !== " "),
+        };
+      } else if (matchedLink.startsWith("<a href=")) {
+        // Handle for embedded links (<a>...</a>)
+        const linkMatch = matchedLink.match(/href="([^"]+)"/);
+        const hyperlinkMatch = matchedLink.match(/>[^<]+</);
+        return {
+          matchedLink,
+          link: linkMatch ? linkMatch[1] : "",
+          hyperlink: hyperlinkMatch ? hyperlinkMatch[0].slice(1, -1) : "",
+          addSpaceBefore: !!(charBefore && charBefore !== " "),
+          addSpaceAfter: !!(charAfter && charAfter !== " "),
+        };
+      } else {
+        // Handle for markdown links
+        const [hyperlinkMatch, linkMatch] = matchedLink.split("](");
+        return {
+          matchedLink,
+          link: linkMatch ? linkMatch.slice(0, -1) : "",
+          hyperlink: hyperlinkMatch ? hyperlinkMatch.slice(1) : "",
+          addSpaceBefore: !!(charBefore && charBefore !== " "),
+          addSpaceAfter: !!(charAfter && charAfter !== " "),
+        };
+      }
+    });
+
+    matchesParsed.forEach((match) => {
+      if (!match) return;
+
+      if (match.link && match.hyperlink) {
+        const uniqueKeyMark = uuid().replace(/-/g, "");
+        listHyperlinks.push({
+          link: this.removeTrailingPunctuation(match.link),
+          hyperlink: this.removeTrailingPunctuation(match.hyperlink),
+          mark: match.matchedLink,
+          id: uniqueKeyMark,
+        });
+
+        text = text.replace(
+          match.matchedLink,
+          `${match.addSpaceBefore ? " " : ""}${uniqueKeyMark}${
+            match.addSpaceAfter ? " " : ""
+          }`
+        );
+      }
+    });
+
+    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: null, // https://meetelise.slack.com/archives/C03HAFYV2NN/p1707339577924899?thread_ts=1707317394.998999&cid=C03HAFYV2NN
+        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,
+      };
+    }
+  }
+
+  render(): TemplateResult {
+    if (!this.message) return html``;
+    return html`<div class="message-inner-body">
+      ${this.isMessageStillStreamingChunks()
+        ? html`<div class="message-loader"><mini-loader></mini-loader></div>`
+        : ""}
+      <p
+        class=${classMap({
+          ["message-text"]: true,
+          ["webchat-font__desktop"]: !isMobile(),
+          ["webchat-font__mobile"]: isMobile(),
+        })}
+      >
+        ${this.parsedMessage}
+      </p>
+      ${this.websitePreviewInfo.length > 0 &&
+      this.websitePreviewInfo.some(
+        (preview) => preview.title && (preview.image || preview.favicon)
+      )
+        ? 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
+          class="redirect-link-preview"
+          href=${preview.link}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <div class="website-preview">
+            ${
+              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=${classMap({
+                ["message-text"]: true,
+                ["website-preview-title"]: true,
+                ["webchat-font__desktop"]: !isMobile(),
+                ["webchat-font__mobile"]: isMobile(),
+              })}>${preview.title}</p>
+            ${
+              preview.description
+                ? html`<p
+                    class=${classMap({
+                      ["message-text"]: true,
+                      ["website-preview-description"]: true,
+                      ["webchat-font__desktop"]: !isMobile(),
+                      ["webchat-font__mobile"]: isMobile(),
+                    })}
+                  >
+                    ${preview.description}
+                  </p>`
+                : ""
+            }
+            </div>
+          </div>
+        </a></div> `;
+      })}
+    </div>`;
+  }
+}