isomtrik-quickchat/dist/collection/stories/Components/MessageBubble/DocumentMessageBubble/DocumentMessageBubble.js

isomtrik-quickchat is a lightweight, real-time chat component built with Stencil JS. It is designed to be seamlessly integrated into web applications, offering customizable and responsive chat functionalities. The module supports both CommonJS and ES modu

import { LitElement } from 'lit';
import { html, css } from 'lit';
import { Image } from '../../Image/Image';
import { Button } from '../../Buttons/Buttons';
import '../../Time/Timestamp';
import '../../ReadMark/SingleMark/SingleMark.js';
import '../../ReadMark/BlueReadMark/BlueReadMark.js';
import '../../ReadMark/DoubleMark/DoubleMark.js';
import '../../ReadMark/ClockMark/ClockMark.js';
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
import {pdfSvg} from '../../../../assets/svg/PdfDocument.js';
import {excelSvg} from '../../../../assets/svg/ExcelDocument.js';

class DocumentMessageBubble extends LitElement {
  static properties = {
    bgColor: { type: String },
    borderWidth: { type: String },
    borderColor: { type: String },
    borderStyle: { type: String },
    borderRadius: { type: String },
    padding: { type: String },
    docName: { type: String },
    width: { type: String },
    height: { type: String },
    documentNameBg: { type: String },
    documentNamePadding: { type: String },
    time: { type: String },
    href: { type: String },
    fileName: { type: String },
    isRead: { type: Boolean },
    isSelf: { type: Boolean },
    isPopupOpen: { type: Boolean },
    isDelivered: { type: String },
    docType: { type: String },
  };

  constructor() {
    super();
    this.isPopupOpen = false;
  }
  static styles = css`
    .document-message-container {
      display: flex;
      align-items: center;
      font-size: 16px;
      justify-content: space-between;
      flex-direction: column;
      position: relative;
    }
    .doc-container {
      display: flex;
      align-items: center;
      width: 90%;
      padding: 4px 8px 4px 8px;
    }
    .document-name {
      display: flex;
      align-items: center;
      gap: 2px;
      width: 100%;
      font-size: 14px;
    }
    .truncate {
      display: inline-block;
      max-width: 90%;
      word-wrap: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .time-stamp-container {
      position: absolute;
      bottom: 5px;
      right: 10px;
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .actions {
      position: absolute;
      left: -15px;
      cursor: pointer;
      top: 5px;
    }

    .popup {
      position: absolute;
      top: 0px;
      left: -100px;
      background-color: white;
      border: 1px solid #eef1fa;
      border-radius: 5px;
      padding: 10px;
      box-shadow: 0 2px 10px #eef1fa;
      z-index: 10;
      display: flex;
      flex-items: column;
      align-items: center;
      justify-content: center;
    }

    .popup div {
      cursor: pointer;
    }
     
  `;

  openPopup() {
    this.isPopupOpen = !this.isPopupOpen;
  }
  truncateDocName(docName) {
    const lastDotIndex = docName.lastIndexOf('.');
    const name = lastDotIndex !== -1 ? docName.slice(0, lastDotIndex) : docName;
    const extension = lastDotIndex !== -1 ? docName.slice(lastDotIndex) : '';

    const availableSpace = 40 - extension.length;

    if (name.length <= availableSpace) {
      const firstLine = name.slice(0, Math.min(20, name.length));
      const secondLine = name.slice(20);
      return `${firstLine}<br/>${secondLine}${extension}`;
    } else {
      const truncatedName = name.slice(0, availableSpace - 3) + '...';
      const firstLine = truncatedName.slice(0, 20);
      const secondLine = truncatedName.slice(20);
      return `${firstLine} ${secondLine}${extension}`;
    }
  }

  
  render() {
    console.log(this.docType, 'ok from document message bubble');

    return html`
      <div
        class="document-message-container"
        style="padding:${this.padding}; 
          border-width: ${this.borderWidth};
          border-color: ${this.borderColor};
          border-style:${this.borderStyle};
          border-radius:${this.borderRadius || '6px'};
          background-color: ${this.bgColor || '#000'};
          height: ${this.height};
          width: ${this.width};
         "
      >
        <div class="doc-container" style="background-color: ${this.documentNameBg || '#fff'};">
          <div class="document-name" style=" padding: ${this.documentNamePadding || '5px 10px 5px 0'}">
            ${this.docType.includes('vnd.openxmlformats-officedocument.spreadsheetml.sheet') 
              ? html`<div class='attachment-icon'>${unsafeSVG(excelSvg)}</div>` 
              : this.docType.includes('application/pdf') 
                ? html`<div class='attachment-icon'>${unsafeSVG(pdfSvg)}</div>` 
                : Image({
                    src: 'https://flexcrew.s3.us-west-1.amazonaws.com/document_text_svgrepo_com_1_2583e4b5fc.svg',
                    alt: 'documentIcon',
                    height: '25px',
                    width: '25px',
                  })}
            <span .innerHTML=${this.truncateDocName(this.docName || 'Document')}></span>
          </div>
          <a href=${this.href} download=${this.fileName} target="_blank">
            ${Button({
              backgroundImage: 'https://flexcrew.s3.us-west-1.amazonaws.com/download_icon_4d03a645bf.svg',
              height: '25px',
              width: '25px',
              borderColor: 'transparent',
              backgroundColor: 'transparent ',
            })}
          </a>
        </div>
        <div class="time-stamp-container">
          <timestamp-element .time="${this.time}" .color="${'#000'}"></timestamp-element>
          ${this.isSelf
            ? this.isRead == true
              ? html`<blue-read-mark></blue-read-mark>`
              : this.isDelivered == 'true'
                ? html`<double-mark></double-mark>`
                : this.isDelivered == 'pending'
                  ? html`<clock-mark></clock-mark>`
                  : html`<single-mark></single-mark>`
            : null}
        </div>
      </div>
    `;
  }
}

customElements.define('document-message', DocumentMessageBubble);