@meetelise/chat 1.25.1 → 1.25.3

package/src/WebComponent/pubnub-media.ts

@@ -1,208 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,431 +0,0 @@
-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";
-import { WidgetType } from "../main/MEChat";
-
-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;
-
-  @property({ attribute: true })
-  widgetType: WidgetType = WidgetType.Default;
-
-  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"]: this.widgetType !== WidgetType.Utilities,
-          ["message-text-large"]: this.widgetType === WidgetType.Utilities,
-          ["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"]: this.widgetType !== WidgetType.Utilities,
-                ["message-text-large"]:
-                  this.widgetType === WidgetType.Utilities,
-                ["website-preview-title"]: true,
-                ["webchat-font__desktop"]: !isMobile(),
-                ["webchat-font__mobile"]: isMobile(),
-              })}>${preview.title}</p>
-            ${
-              preview.description
-                ? html`<p
-                    class=${classMap({
-                      ["message-text"]:
-                        this.widgetType !== WidgetType.Utilities,
-                      ["message-text-large"]:
-                        this.widgetType === WidgetType.Utilities,
-                      ["website-preview-description"]: true,
-                      ["webchat-font__desktop"]: !isMobile(),
-                      ["webchat-font__mobile"]: isMobile(),
-                    })}
-                  >
-                    ${preview.description}
-                  </p>`
-                : ""
-            }
-            </div>
-          </div>
-        </a></div> `;
-      })}
-    </div>`;
-  }
-}