web-widget

chat-section.js

createMessageItem(message, isCurrentUser, isContinue, unreadCount) {
    var messageSet = this.createDiv();
    messageSet.id = message.messageId;
    this._setClass(messageSet, isCurrentUser ? [className.MESSAGE_SET, className.USER] : [className.MESSAGE_SET]);
    if (isContinue) {
      messageSet.style.cssText += `margin-top: ${MARGIN_TOP_MESSAGE}`;
    }

    var senderImg = this.createDiv();
    this._setClass(senderImg, [className.IMAGE]);
    var senderProfile = message.sender.profileUrl;
    if (isContinue) {
      senderProfile = '';
      senderImg.style.cssText += `height: ${MESSAGE_NONE_IMAGE_HEIGHT};`;
    }
    senderImg.style.cssText += `background-image: url(${senderProfile});`;
    messageSet.appendChild(senderImg);

    var messageContent = this.createDiv();
    this._setClass(messageContent, [className.MESSAGE]);

    var senderNickname = this.createDiv();
    this._setClass(senderNickname, [className.NICKNAME]);
    this._setContent(senderNickname, xssEscape(message.sender.nickname));
    if (isContinue) {
      senderNickname.style.cssText += `display: ${DISPLAY_NONE};`;
    }
    messageContent.appendChild(senderNickname);

    var messageItem = this.createDiv();
    this._setClass(messageItem, [className.MESSAGE_ITEM]);

    var itemText = this.createDiv();
    if (message.isUserMessage()) {
      this._setClass(itemText, [className.TEXT]);
      var urlexp = new RegExp(
        '(http|https)://[a-z0-9-_]+(.[a-z0-9-_]+)+([a-z0-9-.,@?^=%&;:/~+#]*[a-z0-9-@?^=%&;/~+#])?',
        'i'
      );
      var _message = message.message;
      if (urlexp.test(_message)) {
        _message =
          '<a href="' +
          _message +
          (isCurrentUser
            ? '" target="_blank" style="color: #FFFFFF;">'
            : '" target="_blank" style="color: #444444;">') +
          _message +
          '</a>';
        if (message.customType === 'url_preview') {
          let previewData = JSON.parse(message.data);

          var _siteName = this.createDiv();
          this._setClass(_siteName, [className.PREVIEW_NAME]);
          this._setContent(_siteName, '@' + previewData.site_name);

          var _title = this.createDiv();
          this._setClass(_title, [className.PREVIEW_TITLE]);
          this._setContent(_title, previewData.title);

          var _description = this.createDiv();
          this._setClass(_description, [className.PREVIEW_DESCRIPTION]);
          this._setContent(_description, previewData.description);

          var _image = this.createDiv();
          this._setClass(_image, [className.PREVIEW_IMAGE]);
          this._setBackgroundImage(_image, previewData.image);

          _message += '<hr>' + _siteName.outerHTML + _title.outerHTML + _description.outerHTML + _image.outerHTML;
        }
      } else {
        _message = xssEscape(_message);
      }
      this._setContent(itemText, _message);
    } else if (message.isFileMessage()) {
      if (message.type.match(/^image\/gif$/)) {
        this._setClass(itemText, [className.FILE_MESSAGE]);
        let image = this.createImg();
        this._setClass(image, [className.IMAGE]);
        image.src = message.url;
        this.setImageSize(image, message);
        itemText.appendChild(image);
      } else if (message.type.match(/^video\/.+$/)) {
        this._setClass(itemText, [className.FILE_MESSAGE]);
        let video = this.createVideo();
        video.controls = true;
        video.preload = 'auto';
        var resize = { resizeWidth: 160, resizeHeight: 160 };
        if (message.thumbnails && message.thumbnails.length > 0) {
          video.poster = message.thumbnails[0].url;
          resize = this._imageResize(video, message.thumbnails[0].real_width, message.thumbnails[0].real_height);
          video.width = resize.resizeWidth;
          video.height = resize.resizeHeight;
        } else {
          var _self = this;
          video.addEventListener('loadedmetadata', function() {
            resize = _self._imageResize(video, this.videoWidth, this.videoHeight);
            video.width = resize.resizeWidth;
            video.height = resize.resizeHeight;
          });
        }
        video.src = message.url;
        itemText.appendChild(video);
      } else {
        this._setClass(itemText, [className.FILE_MESSAGE]);
        let file = this.createA();
        file.href = message.url;
        file.target = 'blank';
        if (message.type.match(/^image\/.+$/)) {
          this._setClass(file, [className.IMAGE]);
          this.setImageSize(file, message);
        } else {
          this._setClass(file, [className.FILE]);
          var fileIcon = this.createDiv();
          this._setClass(fileIcon, [className.FILE_ICON]);

          var fileText = this.createDiv();
          this._setClass(fileText, [className.FILE_TEXT]);

          var fileName = this.createDiv();
          this._setClass(fileName, [className.FILE_NAME]);
          this._setContent(fileName, xssEscape(message.name));
          fileText.appendChild(fileName);

          var fileDownload = this.createDiv();
          this._setClass(fileDownload, [className.FILE_DOWNLOAD]);
          this._setContent(fileDownload, TEXT_FILE_DOWNLOAD);
          fileText.appendChild(fileDownload);

          file.appendChild(fileIcon);
          file.appendChild(fileText);
        }
        itemText.appendChild(file);
      }
    }

    // Message timestamp outside the bubble
    var timestamp = '<small>' + new Date(message.createdAt).toLocaleDateString() + '</small>';

    var itemUnread = this.createDiv();
    this._setClass(itemUnread, [className.UNREAD]);
    this.setUnreadCount(itemUnread, unreadCount);

    // Timestamp outside the bubble
    this._setContent(itemUnread, timestamp);

    messageSet.unread = itemUnread;

    // Message timestamp inside the bubble
    timestamp = '<p><small>' + new Date(message.createdAt).toLocaleDateString() + '</small></p>';
    const timestampDiv = this.createDiv();
    timestampDiv.innerHTML = timestamp;
    itemText.appendChild(timestampDiv);

    if (isCurrentUser) {
      messageItem.appendChild(itemUnread);
      messageItem.appendChild(itemText);
    } else {
      messageItem.appendChild(itemText);
      messageItem.appendChild(itemUnread);
    }

    messageContent.appendChild(messageItem);
    messageSet.appendChild(messageContent);
    return messageSet;
  }