isomtrik-quickchat/dist/collection/stories/Components/Head/Head.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 { html, css, LitElement } from 'lit';
import { Image } from '../Image/Image';
import { Text } from '../Text/Text';

class Head extends LitElement {
  static properties = {
    image: { type: Object },
    text: { type: Object },
    lastSeenText: { type: String },
    lastSeenTextColor: { type: String },
    lastSeenTextFontSize: { type: String },
    textHref: { type: String },
    onFirstSvgClick: { type: Function },
    onSecondSvgClick: { type: Function },
    boxShadow: { type: String },
    borderRadius: { type: String },
    borderColor: { type: String },
    borderStyle: { type: String },
    borderWidth: { type: String },
    padding: { type: String },
    profileImage: { type: String },
    bgColor: {type: String},
    textColor: {type: String},
    nameTextColor: {type: String},
    closeIconColor: {type: String},
    minimizeIconColor: {type: String}
  };

  constructor() {
    super();
    this.profilePlaceholderImage = 'https://isometrik-website-bucket.s3.ap-south-1.amazonaws.com/Frame_02577f7cb1.svg';
    this.image = {
      src: '/assets/images/iso-img.svg',
      alt: 'Nature image',
      width: '45px',
      height: '45px',
      borderRadius: '50%',
    };
    this.text = {
      content: 'Kristin Watson',
      fontSize: '18px',
      textAlign: 'left',
      fontWeight: 'bolder',
      fontStyle: 'normal',
    };
  }

  static styles = css`
    .head-container {
      display: flex;
      align-items: center;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
    }
    .image-container {
      margin-right: 16px;
    }
    .text-container {
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      flex-direction: column;
    }
    .actions {
      display: flex;
      gap: 8px;
      margin-left: auto;
      cursor: pointer;
    }
    .last-seen {
      color: var(--last-seen-text-color, gray);
      font-size: var(--last-seen-text-font-size, 14px);
      margin-top: 4px;
    }
  `;
  _handleTextClick() {
    if (this.textHref) {
      window.location.href = this.textHref;
    }
  }

  _handleFirstSvgClick() {
    if (this.onFirstSvgClick) {
      this.onFirstSvgClick();
    }
  }

  _handleSecondSvgClick() {
    if (this.onSecondSvgClick) {
      this.onSecondSvgClick();
    }
  }
  render() {
    return html`
      <div
        class="head-container"
        style="border-radius: ${this.borderRadius};
       border-color: ${this.borderColor || 'gray'};
       border-width: ${this.borderWidth || '0px'};
       border-style: ${this.borderStyle || 'solid'};
       padding: ${this.padding};
       background-color: ${this.bgColor || "#FFF"};
       color: ${this.textColor || '#FFF'};
       border-bottom: 1px solid #d9c0c0;
      "
      >
        <div class="image-container">
          ${Image({
            src: this.profileImage || this.profilePlaceholderImage,
            height: '50px',
            width: '50px',
            placeholderImage: this.profilePlaceholderImage,
          })}
        </div>

        <div class="text-container" @click=${this._handleTextClick}>
          ${Text({
            fontSize: '20px',
            fontWeight: 'bold',
            content: this.text || '',
            color: this.nameTextColor || '#000'
          })}
          ${this.lastSeenText
            ? html` <div
                class="last-seen"
                style="
                color: ${this.lastSeenTextColor || 'gray'};
                font-size: ${this.lastSeenTextFontSize || '14px'};
              "
              >
                ${this.lastSeenText}
              </div>`
            : ''}
        </div>
        <div class="actions">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" @click=${this._handleFirstSvgClick}>
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M20.5803 18.8697C21.3079 19.5972 20.2027 20.7024 19.4751 19.9748L14.5878 15.0878V17.7827C14.5878 18.8118 13.0248 18.8118 13.0248 17.7827V13.2009C13.0248 12.7692 13.375 12.4193 13.8063 12.4193H18.388C19.417 12.4193 19.417 13.9824 18.388 13.9824H15.6933L20.5803 18.8697ZM9.83598 5.43015C9.83598 4.40109 11.399 4.40109 11.399 5.43015V10.0118C11.399 10.4434 11.0489 10.7933 10.6175 10.7933H6.03561C5.00656 10.7933 5.00656 9.23027 6.03561 9.23027H8.73057L3.84351 4.34321C3.11598 3.61567 4.22114 2.51051 4.94868 3.23805L9.83598 8.12535V5.43015Z"
              fill=${this.minimizeIconColor || '#000'}
            />    
          </svg>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" @click=${this._handleSecondSvgClick}>
            <path d="M7.05078 7.05078L16.9503 16.9503" stroke= ${this.closeIconColor || '#000'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M7.04972 16.9503L16.9492 7.05078" stroke= ${this.closeIconColor || '#000'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        
          </svg>
        </div>
      </div>
    `;
  }
}

customElements.define('my-head', Head);