@uzum-tech/ui 2.2.0 → 2.3.0

package/lib/message-bubble/src/MessageBubble.js

@@ -0,0 +1,276 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const dropdown_1 = require("../../dropdown");
+const icon_1 = require("../../icon");
+const typography_1 = require("../../typography");
+const upload_1 = require("../../upload");
+const styles_1 = require("../styles");
+const interface_1 = require("./interface");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+exports.default = (0, vue_1.defineComponent)({
+    name: 'MessageBubble',
+    props: interface_1.messageBubbleProps,
+    slots: Object,
+    setup(props, { slots }) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('MessageBubble', '-message-bubble', index_cssr_1.default, styles_1.messageBubbleLight, props, mergedClsPrefixRef);
+        const contextMenuShow = (0, vue_1.ref)(false);
+        const mergedRetryTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.retryText) !== null && _a !== void 0 ? _a : 'Retry'; });
+        const normalizedAttachmentsRef = (0, vue_1.computed)(() => {
+            if (!props.attachments)
+                return [];
+            return Array.isArray(props.attachments)
+                ? props.attachments
+                : [props.attachments];
+        });
+        const messagePayloadRef = (0, vue_1.computed)(() => ({
+            id: props.id,
+            isOwn: props.isOwn,
+            title: props.title,
+            content: props.content,
+            timestamp: props.timestamp,
+            status: props.status,
+            attachments: normalizedAttachmentsRef.value
+        }));
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusReadColor, messageStatusSuccessColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, messageErrorColor, messageBorderRadius, unreadNotificationBackgroundColor, unreadNotificationTextColor, serviceMessageTextColor, serviceMessageBackgroundColor, messageTitleColor } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-message-bubble-background-color-own': messageBubbleBackgroundColorOwn,
+                '--u-message-bubble-background-color-other': messageBubbleBackgroundColorOther,
+                '--u-message-bubble-text-color-own': messageBubbleTextColorOwn,
+                '--u-message-bubble-text-color-other': messageBubbleTextColorOther,
+                '--u-message-bubble-time-color': messageTimeColor,
+                '--u-message-bubble-status-read-color': messageStatusReadColor,
+                '--u-message-bubble-status-success-color': messageStatusSuccessColor,
+                '--u-message-bubble-attachment-background-color-own': attachmentBackgroundColorOwn,
+                '--u-message-bubble-attachment-background-color-other': attachmentBackgroundColorOther,
+                '--u-message-bubble-error-color': messageErrorColor,
+                '--u-message-bubble-border-radius': messageBorderRadius,
+                '--u-message-bubble-unread-background-color': unreadNotificationBackgroundColor,
+                '--u-message-bubble-unread-text-color': unreadNotificationTextColor,
+                '--u-message-bubble-service-text-color': serviceMessageTextColor,
+                '--u-message-bubble-service-background-color': serviceMessageBackgroundColor,
+                '--u-message-bubble-title-color': messageTitleColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('message-bubble', undefined, cssVarsRef, props)
+            : undefined;
+        const messageContextMenuOptions = (0, vue_1.computed)(() => {
+            if (!props.actions || props.actions.length === 0) {
+                return [];
+            }
+            const result = [];
+            for (const action of props.actions) {
+                if (action.visible && !action.visible(messagePayloadRef.value)) {
+                    continue;
+                }
+                result.push({
+                    key: action.key,
+                    label: typeof action.label === 'function' ? action.label() : action.label
+                });
+            }
+            return result;
+        });
+        const resolveRenderContent = (content) => {
+            if (typeof content === 'function') {
+                return content();
+            }
+            if (content instanceof Date) {
+                return content.toString();
+            }
+            return content;
+        };
+        const getThumbnailUrl = (attachment) => {
+            const url = [attachment.preview, attachment.thumbnail].find(value => typeof value === 'string');
+            return url !== null && url !== void 0 ? url : null;
+        };
+        const handleAttachmentDownload = (file) => __awaiter(this, void 0, void 0, function* () {
+            if (props.onAttachmentDownload) {
+                const attachment = normalizedAttachmentsRef.value.find(item => item.name === file.name);
+                if (attachment) {
+                    try {
+                        yield props.onAttachmentDownload(attachment);
+                        return false;
+                    }
+                    catch (_a) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        });
+        const handleRetryClick = () => {
+            var _a;
+            (_a = props.onRetry) === null || _a === void 0 ? void 0 : _a.call(props, messagePayloadRef.value);
+        };
+        const handleContextMenuSelect = (key) => {
+            if (!props.actions || props.actions.length === 0) {
+                contextMenuShow.value = false;
+                return;
+            }
+            const action = props.actions.find(action => action.key === key);
+            if (action) {
+                action.handler(messagePayloadRef.value);
+            }
+            contextMenuShow.value = false;
+        };
+        const renderAttachment = (withPadding = false) => {
+            if (slots.messageAttachment) {
+                return slots.messageAttachment(messagePayloadRef.value);
+            }
+            const fileList = normalizedAttachmentsRef.value.map(attachment => {
+                var _a, _b, _c;
+                return ({
+                    id: String(attachment.id),
+                    name: attachment.name,
+                    status: attachment.status || interface_1.MessageBubbleAttachmentStatus.FINISHED,
+                    percentage: (_a = attachment.percentage) !== null && _a !== void 0 ? _a : null,
+                    url: (_b = attachment.url) !== null && _b !== void 0 ? _b : null,
+                    thumbnailUrl: getThumbnailUrl(attachment),
+                    type: (_c = attachment.type) !== null && _c !== void 0 ? _c : null,
+                    file: null,
+                    batchId: null
+                });
+            });
+            const uploadComponent = ((0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, fileList: fileList, fileListStyle: withPadding
+                    ? {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '2px',
+                        marginTop: '0'
+                    }
+                    : undefined, showRemoveButton: false, showDownloadButton: normalizedAttachmentsRef.value.some(attachment => attachment.status === interface_1.MessageBubbleAttachmentStatus.FINISHED
+                    && attachment.url
+                    && attachment.url !== '#'), showRetryButton: normalizedAttachmentsRef.value.some(attachment => attachment.status === interface_1.MessageBubbleAttachmentStatus.ERROR), onDownload: handleAttachmentDownload }, props.uploadProps), {
+                default: () => ((0, vue_1.h)(upload_1.UUploadFileList, null, {
+                    'upload-file-title': slots['upload-file-title']
+                        ? ({ file }) => { var _a; return (_a = slots['upload-file-title']) === null || _a === void 0 ? void 0 : _a.call(slots, file); }
+                        : undefined,
+                    'upload-file-subtitle': slots['upload-file-subtitle']
+                        ? ({ file }) => { var _a; return (_a = slots['upload-file-subtitle']) === null || _a === void 0 ? void 0 : _a.call(slots, file); }
+                        : ({ file }) => {
+                            var _a;
+                            const attachment = normalizedAttachmentsRef.value.find(item => item.name === file.name);
+                            return ((0, vue_1.h)("span", { style: { fontSize: '12px', color: '#999' } }, (attachment === null || attachment === void 0 ? void 0 : attachment.size) || ((_a = file.file) === null || _a === void 0 ? void 0 : _a.size)));
+                        }
+                }))
+            }));
+            if (withPadding) {
+                return (0, vue_1.h)("div", { style: { padding: '2px' } }, uploadComponent);
+            }
+            return uploadComponent;
+        };
+        const renderMessage = () => {
+            var _a;
+            const hasBubbleActionsSlot = slots.bubbleActions !== undefined;
+            const hasBubbleActionsConfig = Boolean(props.actions && props.actions.length > 0);
+            const hasTitle = Boolean(props.title || slots.title);
+            const hasContentInsideBubble = Boolean(props.content
+                || slots.default
+                || hasTitle
+                || normalizedAttachmentsRef.value.length > 1);
+            const messageBubbleContent = hasContentInsideBubble ? ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefixRef.value}-message-bubble__bubble`,
+                    props.isOwn
+                        ? `${mergedClsPrefixRef.value}-message-bubble__bubble--own`
+                        : `${mergedClsPrefixRef.value}-message-bubble__bubble--other`
+                ] },
+                hasTitle && ((0, vue_1.h)(typography_1.UText, { class: `${mergedClsPrefixRef.value}-message-bubble__title`, variant: "body-l-semi-bold" }, slots.title
+                    ? slots.title(messagePayloadRef.value)
+                    : resolveRenderContent(props.title))),
+                normalizedAttachmentsRef.value.length > 0 && renderAttachment(true),
+                (props.content || slots.default) && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, slots.default
+                    ? slots.default(messagePayloadRef.value)
+                    : resolveRenderContent(props.content))))) : normalizedAttachmentsRef.value.length === 1 ? (renderAttachment()) : null;
+            return ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefixRef.value}-message-bubble__message`,
+                    props.isOwn
+                        ? `${mergedClsPrefixRef.value}-message-bubble__message--own`
+                        : `${mergedClsPrefixRef.value}-message-bubble__message--other`
+                ] },
+                (0, vue_1.h)("div", { class: [
+                        `${mergedClsPrefixRef.value}-message-bubble__message-wrapper`,
+                        props.isOwn
+                            ? `${mergedClsPrefixRef.value}-message-bubble__message-wrapper--own`
+                            : `${mergedClsPrefixRef.value}-message-bubble__message-wrapper--other`
+                    ] },
+                    hasBubbleActionsSlot ? ((0, vue_1.h)("div", { onContextmenu: (event) => {
+                            event.preventDefault();
+                            contextMenuShow.value = false;
+                            void (0, vue_1.nextTick)().then(() => {
+                                contextMenuShow.value = true;
+                            });
+                        } }, (_a = slots.bubbleActions) === null || _a === void 0 ? void 0 :
+                        _a.call(slots, messagePayloadRef.value),
+                        messageBubbleContent)) : hasBubbleActionsConfig ? ((0, vue_1.h)(dropdown_1.UDropdown, { show: contextMenuShow.value, trigger: "manual", placement: "bottom-start", options: messageContextMenuOptions.value, onSelect: handleContextMenuSelect, onUpdateShow: (show) => {
+                            contextMenuShow.value = show;
+                        }, onClickoutside: () => {
+                            contextMenuShow.value = false;
+                        } }, {
+                        default: () => ((0, vue_1.h)("div", { onContextmenu: (event) => {
+                                event.preventDefault();
+                                contextMenuShow.value = false;
+                                void (0, vue_1.nextTick)().then(() => {
+                                    contextMenuShow.value = true;
+                                });
+                            } }, messageBubbleContent))
+                    })) : (messageBubbleContent),
+                    (0, vue_1.h)("div", { class: [
+                            `${mergedClsPrefixRef.value}-message-bubble__meta`,
+                            props.isOwn
+                                ? `${mergedClsPrefixRef.value}-message-bubble__meta--own`
+                                : `${mergedClsPrefixRef.value}-message-bubble__meta--other`
+                        ] }, props.status === interface_1.MessageBubbleStatus.RETRY ? ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-message-bubble__retry`, onClick: handleRetryClick },
+                        (0, vue_1.h)(icon_1.UIcon, { size: 16, component: interface_1.statusIconMapper[interface_1.MessageBubbleStatus.RETRY], class: `${mergedClsPrefixRef.value}-message-bubble__retry-icon`, theme: themeRef.value.peers.StatusIcon, themeOverrides: themeRef.value.peerOverrides.StatusIcon }),
+                        (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-message-bubble__retry-text` }, mergedRetryTextRef.value))) : ((0, vue_1.h)(vue_1.Fragment, null,
+                        (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-message-bubble__time` }, resolveRenderContent(props.timestamp)),
+                        props.isOwn && props.status && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-message-bubble__status` }, slots.messageStatus
+                            ? slots.messageStatus(messagePayloadRef.value)
+                            : interface_1.statusIconMapper[props.status] && ((0, vue_1.h)(icon_1.UIcon, { size: 16, component: interface_1.statusIconMapper[props.status], class: [
+                                    `${mergedClsPrefixRef.value}-message-bubble__status-icon`,
+                                    `${mergedClsPrefixRef.value}-message-bubble__status-icon--${String(props.status)}`
+                                ], theme: themeRef.value.peers.StatusIcon, themeOverrides: themeRef.value.peerOverrides.StatusIcon }))))))))));
+        };
+        const renderService = () => {
+            if (slots.service) {
+                return slots.service(props.serviceVariant);
+            }
+            return ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefixRef.value}-message-bubble__service`,
+                    `${mergedClsPrefixRef.value}-message-bubble__service--${props.serviceVariant}`
+                ] }, props.content && (0, vue_1.h)("span", null, resolveRenderContent(props.content))));
+        };
+        return {
+            mergedClsPrefixRef,
+            inlineThemeDisabled,
+            cssVars: cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
+            renderMessage,
+            renderService
+        };
+    },
+    render() {
+        var _a;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return ((0, vue_1.h)("div", { class: [`${this.mergedClsPrefixRef}-message-bubble`, this.themeClass], style: this.inlineThemeDisabled ? undefined : this.cssVars }, this.type === interface_1.MessageBubbleType.SERVICE
+            ? this.renderService()
+            : this.renderMessage()));
+    }
+});

package/lib/message-bubble/src/interface.d.ts

@@ -0,0 +1,204 @@
+import type { Component, PropType, VNodeChild } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+import type { UploadFileInfo, UploadProps } from '../../upload';
+export declare enum MessageBubbleType {
+    MESSAGE = "message",
+    SERVICE = "service"
+}
+export declare enum MessageBubbleServiceVariant {
+    UNREAD = "unread",
+    SYSTEM = "system",
+    EVENT = "event",
+    DIVIDER = "divider"
+}
+export declare enum MessageBubbleStatus {
+    READ = "read",
+    UNREAD = "unread",
+    PENDING = "pending",
+    RETRY = "retry"
+}
+export declare enum MessageBubbleAttachmentStatus {
+    PENDING = "pending",
+    UPLOADING = "uploading",
+    FINISHED = "finished",
+    ERROR = "error"
+}
+export interface MessageBubbleSlots {
+    default?: (message: MessageBubbleMessagePayload) => VNodeChild;
+    title?: (message: MessageBubbleMessagePayload) => VNodeChild;
+    service?: (variant: MessageBubbleServiceVariant) => VNodeChild;
+    messageStatus?: (message: MessageBubbleMessagePayload) => VNodeChild;
+    bubbleActions?: (message: MessageBubbleMessagePayload) => VNodeChild;
+    messageAttachment?: (message: MessageBubbleMessagePayload) => VNodeChild;
+    'upload-file-title'?: (file: UploadFileInfo) => VNodeChild;
+    'upload-file-subtitle'?: (file: UploadFileInfo) => VNodeChild;
+}
+export interface MessageBubbleAttachment {
+    id: MessageBubbleId;
+    name: string;
+    url?: string;
+    size?: number | string;
+    thumbnail?: string;
+    preview?: string;
+    status?: MessageBubbleAttachmentStatus;
+    percentage?: number;
+    type?: string;
+}
+export interface MessageBubbleMessagePayload {
+    id?: MessageBubbleId;
+    isOwn: boolean;
+    title?: MessageBubbleRenderContent;
+    content?: MessageBubbleRenderContent;
+    timestamp?: string | number | Date | (() => VNodeChild);
+    status?: MessageBubbleStatus;
+    attachments: MessageBubbleAttachment[];
+}
+export interface MessageBubbleAction {
+    key: string;
+    label: string | (() => VNodeChild);
+    handler: (message: MessageBubbleMessagePayload) => void;
+    visible?: (message: MessageBubbleMessagePayload) => boolean;
+}
+export type MessageBubbleId = string | number | symbol;
+export type MessageBubbleRenderContent = string | (() => VNodeChild);
+export type MessageBubbleProps = ExtractPublicPropTypes<typeof messageBubbleProps>;
+export declare const statusIconMapper: Partial<Record<MessageBubbleStatus, Component>>;
+export declare const messageBubbleProps: {
+    readonly type: {
+        readonly type: PropType<MessageBubbleType>;
+        readonly default: MessageBubbleType.MESSAGE;
+    };
+    readonly serviceVariant: {
+        readonly type: PropType<MessageBubbleServiceVariant>;
+        readonly default: MessageBubbleServiceVariant.SYSTEM;
+    };
+    readonly id: {
+        readonly type: PropType<MessageBubbleId>;
+        readonly default: undefined;
+    };
+    readonly isOwn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly title: {
+        readonly type: PropType<MessageBubbleRenderContent>;
+        readonly default: undefined;
+    };
+    readonly content: {
+        readonly type: PropType<MessageBubbleRenderContent>;
+        readonly default: undefined;
+    };
+    readonly timestamp: {
+        readonly type: PropType<string | number | Date | (() => VNodeChild)>;
+        readonly default: undefined;
+    };
+    readonly status: {
+        readonly type: PropType<MessageBubbleStatus>;
+        readonly default: undefined;
+    };
+    readonly attachments: {
+        readonly type: PropType<MessageBubbleAttachment[] | MessageBubbleAttachment>;
+        readonly default: undefined;
+    };
+    readonly uploadProps: {
+        readonly type: PropType<Partial<UploadProps>>;
+        readonly default: undefined;
+    };
+    readonly actions: {
+        readonly type: PropType<MessageBubbleAction[]>;
+        readonly default: undefined;
+    };
+    readonly retryText: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly onRetry: {
+        readonly type: PropType<(message: MessageBubbleMessagePayload) => void>;
+        readonly default: undefined;
+    };
+    readonly onAttachmentDownload: {
+        readonly type: PropType<(attachment: MessageBubbleAttachment) => Promise<void> | void>;
+        readonly default: undefined;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"MessageBubble", {
+        messageBubbleBackgroundColorOwn: string;
+        messageBubbleBackgroundColorOther: string;
+        messageBubbleTextColorOwn: string;
+        messageBubbleTextColorOther: string;
+        messageTimeColor: string;
+        messageStatusReadColor: string;
+        messageStatusSuccessColor: string;
+        attachmentBackgroundColorOwn: string;
+        attachmentBackgroundColorOther: string;
+        messageErrorColor: string;
+        messageBorderRadius: string;
+        unreadNotificationBackgroundColor: string;
+        unreadNotificationTextColor: string;
+        serviceMessageTextColor: string;
+        serviceMessageBackgroundColor: string;
+        messageTitleColor: string;
+    }, {
+        StatusIcon: import("../../_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>;
+    }>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"MessageBubble", {
+        messageBubbleBackgroundColorOwn: string;
+        messageBubbleBackgroundColorOther: string;
+        messageBubbleTextColorOwn: string;
+        messageBubbleTextColorOther: string;
+        messageTimeColor: string;
+        messageStatusReadColor: string;
+        messageStatusSuccessColor: string;
+        attachmentBackgroundColorOwn: string;
+        attachmentBackgroundColorOther: string;
+        messageErrorColor: string;
+        messageBorderRadius: string;
+        unreadNotificationBackgroundColor: string;
+        unreadNotificationTextColor: string;
+        serviceMessageTextColor: string;
+        serviceMessageBackgroundColor: string;
+        messageTitleColor: string;
+    }, {
+        StatusIcon: import("../../_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>;
+    }>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"MessageBubble", {
+        messageBubbleBackgroundColorOwn: string;
+        messageBubbleBackgroundColorOther: string;
+        messageBubbleTextColorOwn: string;
+        messageBubbleTextColorOther: string;
+        messageTimeColor: string;
+        messageStatusReadColor: string;
+        messageStatusSuccessColor: string;
+        attachmentBackgroundColorOwn: string;
+        attachmentBackgroundColorOther: string;
+        messageErrorColor: string;
+        messageBorderRadius: string;
+        unreadNotificationBackgroundColor: string;
+        unreadNotificationTextColor: string;
+        serviceMessageTextColor: string;
+        serviceMessageBackgroundColor: string;
+        messageTitleColor: string;
+    }, {
+        StatusIcon: import("../../_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>;
+    }>>>;
+};

package/lib/message-bubble/src/interface.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messageBubbleProps = exports.statusIconMapper = exports.MessageBubbleAttachmentStatus = exports.MessageBubbleStatus = exports.MessageBubbleServiceVariant = exports.MessageBubbleType = void 0;
+const icons_1 = require("../../_internal/icons");
+const _mixins_1 = require("../../_mixins");
+var MessageBubbleType;
+(function (MessageBubbleType) {
+    MessageBubbleType["MESSAGE"] = "message";
+    MessageBubbleType["SERVICE"] = "service";
+})(MessageBubbleType || (exports.MessageBubbleType = MessageBubbleType = {}));
+var MessageBubbleServiceVariant;
+(function (MessageBubbleServiceVariant) {
+    MessageBubbleServiceVariant["UNREAD"] = "unread";
+    MessageBubbleServiceVariant["SYSTEM"] = "system";
+    MessageBubbleServiceVariant["EVENT"] = "event";
+    MessageBubbleServiceVariant["DIVIDER"] = "divider";
+})(MessageBubbleServiceVariant || (exports.MessageBubbleServiceVariant = MessageBubbleServiceVariant = {}));
+var MessageBubbleStatus;
+(function (MessageBubbleStatus) {
+    MessageBubbleStatus["READ"] = "read";
+    MessageBubbleStatus["UNREAD"] = "unread";
+    MessageBubbleStatus["PENDING"] = "pending";
+    MessageBubbleStatus["RETRY"] = "retry";
+})(MessageBubbleStatus || (exports.MessageBubbleStatus = MessageBubbleStatus = {}));
+var MessageBubbleAttachmentStatus;
+(function (MessageBubbleAttachmentStatus) {
+    MessageBubbleAttachmentStatus["PENDING"] = "pending";
+    MessageBubbleAttachmentStatus["UPLOADING"] = "uploading";
+    MessageBubbleAttachmentStatus["FINISHED"] = "finished";
+    MessageBubbleAttachmentStatus["ERROR"] = "error";
+})(MessageBubbleAttachmentStatus || (exports.MessageBubbleAttachmentStatus = MessageBubbleAttachmentStatus = {}));
+exports.statusIconMapper = {
+    [MessageBubbleStatus.READ]: icons_1.CheckmarkDoneSharp,
+    [MessageBubbleStatus.PENDING]: icons_1.MdTime,
+    [MessageBubbleStatus.RETRY]: icons_1.Refresh,
+    [MessageBubbleStatus.UNREAD]: icons_1.CheckmarkDoneSharp
+};
+exports.messageBubbleProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { type: {
+        type: String,
+        default: MessageBubbleType.MESSAGE
+    }, serviceVariant: {
+        type: String,
+        default: MessageBubbleServiceVariant.SYSTEM
+    }, id: {
+        type: [String, Number, Symbol],
+        default: undefined
+    }, isOwn: {
+        type: Boolean,
+        default: false
+    }, title: {
+        type: [String, Function],
+        default: undefined
+    }, content: {
+        type: [String, Function],
+        default: undefined
+    }, timestamp: {
+        type: [String, Number, Date, Function],
+        default: undefined
+    }, status: {
+        type: String,
+        default: undefined
+    }, attachments: {
+        type: [Array, Object],
+        default: undefined
+    }, uploadProps: {
+        type: Object,
+        default: undefined
+    }, actions: {
+        type: Array,
+        default: undefined
+    }, retryText: {
+        type: String,
+        default: undefined
+    }, onRetry: {
+        type: Function,
+        default: undefined
+    }, onAttachmentDownload: {
+        type: Function,
+        default: undefined
+    } });

package/lib/message-bubble/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;