isomtrik-quickchat/dist/collection/stories/Components/MessageBubble/IncomingTextMessageBubble/IncomingTextMessageBubble.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 '../../Time/Timestamp';
import { Text } from '../../Text/Text.js';

class IncomingTextMessageBubble extends LitElement {
  static properties = {
    bgColor: { type: String },
    msgTextColor: { type: String },
    msgTextTimeColor: { type: String },
    borderWidth: { type: String },
    borderColor: { type: String },
    borderStyle: { type: String },
    borderRadius: { type: String },
    padding: { type: String },
    height: { type: String },
    width: { type: String },
    time: { type: String },
    textContent: { type: String },
    alignSelf: {type: String},
    fontFamily: {type: String}
  };

  static styles = css`
    .message-container {
      position: relative;
      width:fit-content;
      max-width:80% !important;
      align-self: center;
      overflow-wrap: break-word;
    }
    .image-container {
      cursor: pointer;
    }
    .full-screen-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
    .full-screen-image {
      max-width: 90%;
      max-height: 90%;
      object-fit: cover;
    }
    .close-button {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 2rem;
      color: white;
      cursor: pointer;
      background: transparent;
      border: none;
    }
  `;

  openFullScreen() {
    this.isFullScreen = true;
  }

  closeFullScreen() {
    this.isFullScreen = false;
  }

  render() {
    return html`
      <div
        class="message-container"
        style="padding:${this.padding || "10px"}; 
          border-width: ${this.borderWidth};
          border-color: ${this.borderColor};
          border-style:${this.borderStyle};
          border-radius:${this.borderRadius || '7px'};
          height:${this.height};
          background-color:${this.bgColor || "#EFF1FA"};
          align-self: ${this.alignSelf || 'left'}
          font-family: ${this.fontFamily}
         "
      >
        ${Text({
          content: this.textContent || 'some incoming message some somesomesomesome',
          // width: '90%',
          textAlign: 'left',
          fontFamily: this.fontFamily,
          color: this.msgTextColor
        })}

        <timestamp-element .time="${this.time || new Date().toISOString()}" .color="${this.msgTextTimeColor}"></timestamp-element>
      </div>

    `;
  }
}

customElements.define('incoming-text-message-bubble', IncomingTextMessageBubble);