devextreme/esm/__internal/ui/chat/messagebubble.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/ui/chat/messagebubble.js)
 * Version: 25.2.3
 * Build date: Fri Dec 12 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
import messageLocalization from "../../../common/core/localization/message";
import {
    getPublicElement
} from "../../../core/element";
import $ from "../../../core/renderer";
import {
    ICON_CLASS
} from "../../core/utils/m_icon";
import Widget from "../../core/widget/widget";
import FileView from "../../ui/chat/file_view/file_view";
export const CHAT_MESSAGEBUBBLE_CLASS = "dx-chat-messagebubble";
export const CHAT_MESSAGEBUBBLE_DELETED_CLASS = "dx-chat-messagebubble-deleted";
export const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = "dx-chat-messagebubble-content";
export const CHAT_MESSAGEBUBBLE_ICON_PROHIBITION_CLASS = `${ICON_CLASS}-cursorprohibition`;
export const CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS = "dx-has-image";
export const CHAT_MESSAGEBUBBLE_IMAGE_CLASS = "dx-chat-messagebubble-image";
export const MESSAGE_DATA_KEY = "dxMessageData";
class MessageBubble extends Widget {
    _getDefaultOptions() {
        return Object.assign({}, super._getDefaultOptions(), {
            isDeleted: false,
            isEdited: false,
            text: "",
            template: null
        })
    }
    _initMarkup() {
        const $element = $(this.element());
        $element.addClass("dx-chat-messagebubble");
        super._initMarkup();
        this._renderContentContainer();
        this._renderAttachmentsElement();
        this._updateContent();
        this._renderAttachments()
    }
    _renderContentContainer() {
        this._$content = $("<div>").addClass("dx-chat-messagebubble-content").appendTo(this.$element())
    }
    _renderAttachmentsElement() {
        var _this$_$attachments;
        const {
            attachments: attachments,
            isDeleted: isDeleted
        } = this.option();
        null === (_this$_$attachments = this._$attachments) || void 0 === _this$_$attachments || _this$_$attachments.remove();
        this._$attachments = void 0;
        if (null !== attachments && void 0 !== attachments && attachments.length && !isDeleted) {
            this._$attachments = $("<div>").appendTo(this.$element())
        }
    }
    _updateContent() {
        const {
            template: template,
            type: type,
            text: text,
            src: src,
            alt: alt,
            isDeleted: isDeleted = false
        } = this.option();
        this.$element().removeClass("dx-chat-messagebubble-deleted").removeClass("dx-has-image");
        this._$content.empty();
        if (template) {
            template({
                type: type,
                text: text,
                src: src,
                alt: alt
            }, getPublicElement(this._$content));
            return
        }
        if (isDeleted) {
            this.$element().addClass("dx-chat-messagebubble-deleted");
            const icon = $("<div>").addClass(ICON_CLASS).addClass(CHAT_MESSAGEBUBBLE_ICON_PROHIBITION_CLASS);
            const deletedMessage = $("<div>").text(messageLocalization.format("dxChat-deletedMessageText"));
            this._$content.append(icon).append(deletedMessage);
            return
        }
        if ("image" === type) {
            this.$element().addClass("dx-has-image");
            $("<img>").attr("src", src ?? "").attr("alt", alt ?? messageLocalization.format("dxChat-defaultImageAlt")).addClass("dx-chat-messagebubble-image").appendTo(this._$content)
        } else {
            this._$content.text(text ?? "")
        }
    }
    _renderAttachments() {
        const {
            attachments: attachments,
            onAttachmentDownloadClick: onAttachmentDownloadClick
        } = this.option();
        if (!this._$attachments) {
            return
        }
        this._$attachments.empty();
        if (null !== attachments && void 0 !== attachments && attachments.length) {
            this._createComponent(this._$attachments, FileView, {
                files: attachments,
                onDownload: onAttachmentDownloadClick
            })
        }
    }
    _updateMessageData(property, value) {
        const messageData = this.$element().data("dxMessageData") || {};
        messageData[property] = value;
        this.$element().data("dxMessageData", messageData)
    }
    _optionChanged(args) {
        const {
            name: name,
            value: value
        } = args;
        switch (name) {
            case "text":
            case "src":
            case "alt":
            case "isDeleted":
                this._updateMessageData(name, value);
                this._updateContent();
                this._renderAttachmentsElement();
                this._renderAttachments();
                break;
            case "type":
                this._updateContent();
                this._renderAttachmentsElement();
                this._renderAttachments();
                break;
            case "template":
                this._updateContent();
                break;
            case "isEdited":
                this._updateMessageData(name, value);
                break;
            case "onAttachmentDownloadClick":
            case "attachments":
                this._renderAttachmentsElement();
                this._renderAttachments();
                break;
            default:
                super._optionChanged(args)
        }
    }
}
export default MessageBubble;