@uzum-tech/ui 2.2.0 → 2.3.0

package/es/message-bubble/src/MessageBubble.mjs

@@ -0,0 +1,336 @@
+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());
+  });
+};
+import { computed, defineComponent, Fragment, h, nextTick, ref } from 'vue';
+import { useConfig, useTheme, useThemeClass } from "../../_mixins/index.mjs";
+import { UDropdown } from "../../dropdown/index.mjs";
+import { UIcon } from "../../icon/index.mjs";
+import { UText } from "../../typography/index.mjs";
+import { UUpload, UUploadFileList } from "../../upload/index.mjs";
+import { messageBubbleLight } from "../styles/index.mjs";
+import { MessageBubbleAttachmentStatus, messageBubbleProps, MessageBubbleStatus, MessageBubbleType, statusIconMapper } from "./interface.mjs";
+import style from "./styles/index.cssr.mjs";
+export default defineComponent({
+  name: 'MessageBubble',
+  props: messageBubbleProps,
+  slots: Object,
+  setup(props, {
+    slots
+  }) {
+    const {
+      mergedClsPrefixRef,
+      inlineThemeDisabled
+    } = useConfig(props);
+    const themeRef = useTheme('MessageBubble', '-message-bubble', style, messageBubbleLight, props, mergedClsPrefixRef);
+    const contextMenuShow = ref(false);
+    const mergedRetryTextRef = computed(() => {
+      var _a;
+      return (_a = props.retryText) !== null && _a !== void 0 ? _a : 'Retry';
+    });
+    const normalizedAttachmentsRef = computed(() => {
+      if (!props.attachments) return [];
+      return Array.isArray(props.attachments) ? props.attachments : [props.attachments];
+    });
+    const messagePayloadRef = computed(() => ({
+      id: props.id,
+      isOwn: props.isOwn,
+      title: props.title,
+      content: props.content,
+      timestamp: props.timestamp,
+      status: props.status,
+      attachments: normalizedAttachmentsRef.value
+    }));
+    const cssVarsRef = 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 ? useThemeClass('message-bubble', undefined, cssVarsRef, props) : undefined;
+    const messageContextMenuOptions = 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 || 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 = h(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 === MessageBubbleAttachmentStatus.FINISHED && attachment.url && attachment.url !== '#'),
+        showRetryButton: normalizedAttachmentsRef.value.some(attachment => attachment.status === MessageBubbleAttachmentStatus.ERROR),
+        onDownload: handleAttachmentDownload
+      }, props.uploadProps), {
+        default: () => h(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 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 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 ? h("div", {
+        class: [`${mergedClsPrefixRef.value}-message-bubble__bubble`, props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__bubble--own` : `${mergedClsPrefixRef.value}-message-bubble__bubble--other`]
+      }, hasTitle && h(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) && h("div", {
+        class: `${mergedClsPrefixRef.value}-message-bubble__text`
+      }, slots.default ? slots.default(messagePayloadRef.value) : resolveRenderContent(props.content))) : normalizedAttachmentsRef.value.length === 1 ? renderAttachment() : null;
+      return h("div", {
+        class: [`${mergedClsPrefixRef.value}-message-bubble__message`, props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__message--own` : `${mergedClsPrefixRef.value}-message-bubble__message--other`]
+      }, 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 ? h("div", {
+        onContextmenu: event => {
+          event.preventDefault();
+          contextMenuShow.value = false;
+          void nextTick().then(() => {
+            contextMenuShow.value = true;
+          });
+        }
+      }, (_a = slots.bubbleActions) === null || _a === void 0 ? void 0 : _a.call(slots, messagePayloadRef.value), messageBubbleContent) : hasBubbleActionsConfig ? h(UDropdown, {
+        show: contextMenuShow.value,
+        trigger: "manual",
+        placement: "bottom-start",
+        options: messageContextMenuOptions.value,
+        onSelect: handleContextMenuSelect,
+        onUpdateShow: show => {
+          contextMenuShow.value = show;
+        },
+        onClickoutside: () => {
+          contextMenuShow.value = false;
+        }
+      }, {
+        default: () => h("div", {
+          onContextmenu: event => {
+            event.preventDefault();
+            contextMenuShow.value = false;
+            void nextTick().then(() => {
+              contextMenuShow.value = true;
+            });
+          }
+        }, messageBubbleContent)
+      }) : messageBubbleContent, h("div", {
+        class: [`${mergedClsPrefixRef.value}-message-bubble__meta`, props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__meta--own` : `${mergedClsPrefixRef.value}-message-bubble__meta--other`]
+      }, props.status === MessageBubbleStatus.RETRY ? h("div", {
+        class: `${mergedClsPrefixRef.value}-message-bubble__retry`,
+        onClick: handleRetryClick
+      }, h(UIcon, {
+        size: 16,
+        component: statusIconMapper[MessageBubbleStatus.RETRY],
+        class: `${mergedClsPrefixRef.value}-message-bubble__retry-icon`,
+        theme: themeRef.value.peers.StatusIcon,
+        themeOverrides: themeRef.value.peerOverrides.StatusIcon
+      }), h("span", {
+        class: `${mergedClsPrefixRef.value}-message-bubble__retry-text`
+      }, mergedRetryTextRef.value)) : h(Fragment, null, h("span", {
+        class: `${mergedClsPrefixRef.value}-message-bubble__time`
+      }, resolveRenderContent(props.timestamp)), props.isOwn && props.status && h("div", {
+        class: `${mergedClsPrefixRef.value}-message-bubble__status`
+      }, slots.messageStatus ? slots.messageStatus(messagePayloadRef.value) : statusIconMapper[props.status] && h(UIcon, {
+        size: 16,
+        component: 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 h("div", {
+        class: [`${mergedClsPrefixRef.value}-message-bubble__service`, `${mergedClsPrefixRef.value}-message-bubble__service--${props.serviceVariant}`]
+      }, props.content && 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 h("div", {
+      class: [`${this.mergedClsPrefixRef}-message-bubble`, this.themeClass],
+      style: this.inlineThemeDisabled ? undefined : this.cssVars
+    }, this.type === MessageBubbleType.SERVICE ? this.renderService() : this.renderMessage());
+  }
+});

package/es/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/es/message-bubble/src/interface.mjs

@@ -0,0 +1,92 @@
+import { CheckmarkDoneSharp, MdTime, Refresh } from "../../_internal/icons/index.mjs";
+import { useTheme } from "../../_mixins/index.mjs";
+export var MessageBubbleType;
+(function (MessageBubbleType) {
+  MessageBubbleType["MESSAGE"] = "message";
+  MessageBubbleType["SERVICE"] = "service";
+})(MessageBubbleType || (MessageBubbleType = {}));
+export var MessageBubbleServiceVariant;
+(function (MessageBubbleServiceVariant) {
+  MessageBubbleServiceVariant["UNREAD"] = "unread";
+  MessageBubbleServiceVariant["SYSTEM"] = "system";
+  MessageBubbleServiceVariant["EVENT"] = "event";
+  MessageBubbleServiceVariant["DIVIDER"] = "divider";
+})(MessageBubbleServiceVariant || (MessageBubbleServiceVariant = {}));
+export var MessageBubbleStatus;
+(function (MessageBubbleStatus) {
+  MessageBubbleStatus["READ"] = "read";
+  MessageBubbleStatus["UNREAD"] = "unread";
+  MessageBubbleStatus["PENDING"] = "pending";
+  MessageBubbleStatus["RETRY"] = "retry";
+})(MessageBubbleStatus || (MessageBubbleStatus = {}));
+export var MessageBubbleAttachmentStatus;
+(function (MessageBubbleAttachmentStatus) {
+  MessageBubbleAttachmentStatus["PENDING"] = "pending";
+  MessageBubbleAttachmentStatus["UPLOADING"] = "uploading";
+  MessageBubbleAttachmentStatus["FINISHED"] = "finished";
+  MessageBubbleAttachmentStatus["ERROR"] = "error";
+})(MessageBubbleAttachmentStatus || (MessageBubbleAttachmentStatus = {}));
+export const statusIconMapper = {
+  [MessageBubbleStatus.READ]: CheckmarkDoneSharp,
+  [MessageBubbleStatus.PENDING]: MdTime,
+  [MessageBubbleStatus.RETRY]: Refresh,
+  [MessageBubbleStatus.UNREAD]: CheckmarkDoneSharp
+};
+export const messageBubbleProps = Object.assign(Object.assign({}, 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/es/message-bubble/src/styles/index.cssr.d.ts

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