@uzum-tech/ui 1.7.2 → 1.8.0

package/es/chat/src/ChatMessages.js

@@ -0,0 +1,308 @@
+import { h, defineComponent, computed, Fragment } from 'vue';
+import { MessageStatus } from './interface';
+import ChatAttachmentComponent from './ChatParts/ChatAttachment';
+import { UIcon } from '../../icon';
+import { USkeleton } from '../../skeleton';
+import style from './styles/index.cssr';
+import { chatLight } from '../styles';
+import { useConfig, useTheme, useThemeClass, useLocale } from '../../_mixins';
+import { CheckmarkDoneSharp, Refresh, MdTime } from '../../_internal/icons';
+const statusIconMapper = {
+    [MessageStatus.READ]: CheckmarkDoneSharp,
+    [MessageStatus.PENDING]: MdTime,
+    [MessageStatus.RETRY]: Refresh,
+    [MessageStatus.UNREAD]: CheckmarkDoneSharp
+};
+export const chatMessagesProps = Object.assign(Object.assign({}, useTheme.props), { messages: {
+        type: Array,
+        default: () => []
+    }, loading: {
+        type: Boolean,
+        default: false
+    }, loadingCount: {
+        type: Number,
+        default: 5
+    }, typingChatIds: {
+        type: Array,
+        default: () => []
+    }, selectedChatId: {
+        type: [String, Number, Symbol],
+        default: undefined
+    }, typingText: {
+        type: String,
+        default: undefined
+    }, retryText: {
+        type: String,
+        default: undefined
+    }, uploadProps: {
+        type: Object,
+        default: undefined
+    }, showUnreadNotification: {
+        type: Boolean,
+        default: false
+    }, unreadNotificationText: {
+        type: String,
+        default: undefined
+    }, unreadNotificationCount: {
+        type: Number,
+        default: undefined
+    }, onMessageRetry: {
+        type: Function,
+        default: undefined
+    } });
+export default defineComponent({
+    name: 'ChatMessages',
+    props: chatMessagesProps,
+    emits: ['message-retry'],
+    setup(props, { slots, emit }) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        const themeRef = useTheme('Chat', '-chat', style, chatLight, props, mergedClsPrefixRef);
+        const { localeRef } = useLocale('Chat');
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut, brandPrimary500, staticGreen, staticRed, textPrimary, textSecondary, textTertiary }, self: { backgroundColor, borderColor, mainBackgroundColor, headerBackgroundColor, headerBorderColor, headerTitleColor, messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, unreadNotificationBackgroundColor, unreadNotificationTextColor, typingIndicatorColor, dateSeparatorColor, dateSeparatorBackgroundColor, borderRadius, errorColor } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-color-primary': brandPrimary500,
+                '--u-color-success': staticGreen,
+                '--u-color-error': errorColor || staticRed,
+                '--u-text-color-base': textPrimary,
+                '--u-text-color-secondary': textSecondary,
+                '--u-text-color-disabled': textTertiary,
+                '--u-background-color': backgroundColor,
+                '--u-border-color': borderColor,
+                '--u-main-background-color': mainBackgroundColor,
+                '--u-header-background-color': headerBackgroundColor,
+                '--u-header-border-color': headerBorderColor,
+                '--u-header-title-color': headerTitleColor,
+                '--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-time-color': messageTimeColor,
+                '--u-message-status-color': messageStatusColor,
+                '--u-attachment-background-color-own': attachmentBackgroundColorOwn,
+                '--u-attachment-background-color-other': attachmentBackgroundColorOther,
+                '--u-unread-notification-background-color': unreadNotificationBackgroundColor,
+                '--u-unread-notification-text-color': unreadNotificationTextColor,
+                '--u-typing-indicator-color': typingIndicatorColor,
+                '--u-date-separator-color': dateSeparatorColor,
+                '--u-date-separator-background-color': dateSeparatorBackgroundColor,
+                '--u-border-radius': borderRadius
+            };
+        });
+        const themeClassHandle = useThemeClass('chat-messages', computed(() => ''), cssVarsRef, props);
+        const mergedTypingTextRef = computed(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
+        const mergedRetryTextRef = computed(() => { var _a; return (_a = props.retryText) !== null && _a !== void 0 ? _a : localeRef.value.retryText; });
+        const mergedUnreadNotificationTextRef = computed(() => { var _a; return (_a = props.unreadNotificationText) !== null && _a !== void 0 ? _a : localeRef.value.unreadNotificationText; });
+        const unreadMessagesCount = computed(() => {
+            if (!props.messages)
+                return 0;
+            return props.messages.filter((msg) => !msg.isOwn && msg.status === MessageStatus.UNREAD).length;
+        });
+        const handleMessageRetry = (message) => {
+            var _a;
+            emit('message-retry', message);
+            (_a = props.onMessageRetry) === null || _a === void 0 ? void 0 : _a.call(props, message);
+        };
+        const renderDateSeparator = (date) => {
+            return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` },
+                h("span", null, date)));
+        };
+        const renderUnreadNotification = () => {
+            var _a;
+            const count = (_a = props.unreadNotificationCount) !== null && _a !== void 0 ? _a : unreadMessagesCount.value;
+            return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__unread-notification` },
+                h("span", null,
+                    count,
+                    " ",
+                    mergedUnreadNotificationTextRef.value)));
+        };
+        const renderMessage = (message) => {
+            const isOwn = message.isOwn;
+            const attachments = message.attachment
+                ? Array.isArray(message.attachment)
+                    ? message.attachment
+                    : [message.attachment]
+                : [];
+            return (h("div", { key: message.id, class: [
+                    `${mergedClsPrefixRef.value}-chat-main__message`,
+                    isOwn
+                        ? `${mergedClsPrefixRef.value}-chat-main__message--own`
+                        : `${mergedClsPrefixRef.value}-chat-main__message--other`
+                ] },
+                h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
+                    message.content || attachments.length > 1 ? (h("div", { class: [
+                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
+                            isOwn
+                                ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own`
+                                : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`
+                        ] },
+                        attachments.length > 0 && (h(ChatAttachmentComponent, { message: message, attachments: attachments, uploadProps: props.uploadProps, withPadding: true }, {
+                            default: slots.messageAttachment,
+                            'upload-file-title': slots.messageAttachmentTitle,
+                            'upload-file-subtitle': slots.messageAttachmentSubtitle
+                        })),
+                        message.content && (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` }, message.content)))) : attachments.length === 1 ? (h(ChatAttachmentComponent, { message: message, attachments: attachments, uploadProps: props.uploadProps }, {
+                        default: slots.messageAttachment,
+                        'upload-file-title': slots.messageAttachmentTitle,
+                        'upload-file-subtitle': slots.messageAttachmentSubtitle
+                    })) : null,
+                    h("div", { class: [
+                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
+                            isOwn
+                                ? `${mergedClsPrefixRef.value}-chat-main__message-meta--own`
+                                : `${mergedClsPrefixRef.value}-chat-main__message-meta--other`,
+                            message.status === MessageStatus.RETRY &&
+                                `${mergedClsPrefixRef.value}-chat-main__message-meta--retry`
+                        ] }, message.status === MessageStatus.RETRY ? (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry`, onClick: () => {
+                            handleMessageRetry(message);
+                        }, style: { cursor: 'pointer' } },
+                        h(UIcon, { size: 16, component: statusIconMapper[MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon` }),
+                        h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text` }, mergedRetryTextRef.value))) : (h(Fragment, null,
+                        h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, message.timestamp),
+                        isOwn && message.status && (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-status` }, slots.messageStatus
+                            ? slots.messageStatus(message)
+                            : statusIconMapper[message.status] && (h(UIcon, { size: 16, component: statusIconMapper[message.status], class: [
+                                    `${mergedClsPrefixRef.value}-chat-main__message-status-icon`,
+                                    `${mergedClsPrefixRef.value}-chat-main__message-status-icon--${String(message.status)}`
+                                ] }))))))))));
+        };
+        const renderTypingIndicator = () => {
+            return (h("div", { class: [
+                    `${mergedClsPrefixRef.value}-chat-main__message`,
+                    `${mergedClsPrefixRef.value}-chat-main__message--other`
+                ] },
+                h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
+                    h("div", { class: [
+                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
+                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`,
+                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--typing`
+                        ] }),
+                    h("div", { class: [
+                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
+                            `${mergedClsPrefixRef.value}-chat-main__message-meta--other`
+                        ] },
+                        h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, mergedTypingTextRef.value)))));
+        };
+        const renderSkeletonMessage = (isOwn, index) => {
+            return (h("div", { key: `skeleton-${index}`, class: [
+                    `${mergedClsPrefixRef.value}-chat-main__message`,
+                    isOwn
+                        ? `${mergedClsPrefixRef.value}-chat-main__message--own`
+                        : `${mergedClsPrefixRef.value}-chat-main__message--other`
+                ] },
+                h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
+                    h("div", { class: [
+                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
+                            isOwn
+                                ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own`
+                                : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`
+                        ] },
+                        h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` },
+                            h("div", { style: { width: '376px', height: '20px' } }))),
+                    h("div", { class: [
+                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
+                            isOwn
+                                ? `${mergedClsPrefixRef.value}-chat-main__message-meta--own`
+                                : `${mergedClsPrefixRef.value}-chat-main__message-meta--other`
+                        ] },
+                        h(USkeleton, { style: { width: '36px', height: '20px', borderRadius: '4px' } })))));
+        };
+        return {
+            mergedClsPrefixRef,
+            renderMessage,
+            renderTypingIndicator,
+            renderSkeletonMessage,
+            renderDateSeparator,
+            renderUnreadNotification,
+            cssVars: cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        var _a, _b, _c;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const { mergedClsPrefixRef, renderMessage, renderTypingIndicator, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
+        if (this.loading) {
+            return (h("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
+                h("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
+                        border: 'none',
+                        borderRadius: '0',
+                        padding: '0',
+                        background: 'transparent'
+                    } },
+                    h("div", { class: `${mergedClsPrefixRef}-chat-main__messages` }, Array.from({ length: this.loadingCount || 5 }).map((_, index) => {
+                        const isOwn = index % 2 === 0;
+                        return renderSkeletonMessage(isOwn, index);
+                    })))));
+        }
+        const messagesWithDates = [];
+        let currentDate = '';
+        let unreadNotificationInserted = false;
+        (_b = this.messages) === null || _b === void 0 ? void 0 : _b.forEach((message, index) => {
+            const messageDate = message.date || '';
+            if (messageDate !== currentDate) {
+                messagesWithDates.push({
+                    type: 'date-separator',
+                    date: messageDate,
+                    id: `date-${String(index)}`
+                });
+                currentDate = messageDate;
+            }
+            if (!unreadNotificationInserted &&
+                !message.isOwn &&
+                message.status === MessageStatus.UNREAD &&
+                this.showUnreadNotification) {
+                messagesWithDates.push({
+                    type: 'unread-notification',
+                    id: 'unread-notification'
+                });
+                unreadNotificationInserted = true;
+            }
+            messagesWithDates.push(Object.assign({ type: 'message' }, message));
+        });
+        if (!unreadNotificationInserted && this.showUnreadNotification) {
+            const unreadCount = this.unreadNotificationCount || 0;
+            let incomingMessagesFound = 0;
+            let insertIndex = messagesWithDates.length;
+            for (let i = messagesWithDates.length - 1; i >= 0; i--) {
+                const item = messagesWithDates[i];
+                if (item.type === 'message') {
+                    const message = item;
+                    if (!message.isOwn) {
+                        incomingMessagesFound++;
+                        if (incomingMessagesFound === unreadCount) {
+                            insertIndex = i;
+                            break;
+                        }
+                    }
+                }
+            }
+            messagesWithDates.splice(insertIndex, 0, {
+                type: 'unread-notification',
+                id: 'unread-notification'
+            });
+        }
+        const isTyping = this.selectedChatId && ((_c = this.typingChatIds) === null || _c === void 0 ? void 0 : _c.includes(this.selectedChatId));
+        return (h("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
+            h("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
+                    border: 'none',
+                    borderRadius: '0',
+                    padding: '0',
+                    background: 'transparent'
+                } },
+                h("div", { class: `${mergedClsPrefixRef}-chat-main__messages-container` },
+                    messagesWithDates.map((item) => {
+                        var _a;
+                        if (item.type === 'date-separator') {
+                            return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');
+                        }
+                        if (item.type === 'unread-notification') {
+                            return renderUnreadNotification();
+                        }
+                        return renderMessage(item);
+                    }),
+                    isTyping && renderTypingIndicator()))));
+    }
+});

package/es/chat/src/ChatParts/ChatAttachment.js

@@ -47,8 +47,8 @@ export default defineComponent({
                         gap: '2px',
                         marginTop: '0'
                     }
-                    : undefined, showRemoveButton: false, showDownloadButton: props.attachments.some((att) => att.status === 'finished'), showRetryButton: props.attachments.some((att) => att.status === 'error') }, props.uploadProps),
-                h(UUploadFileList, null, {
+                    : undefined, showRemoveButton: false, showDownloadButton: props.attachments.some((att) => att.status === 'finished'), showRetryButton: props.attachments.some((att) => att.status === 'error') }, 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,
@@ -59,7 +59,8 @@ export default defineComponent({
                             const att = props.attachments.find((a) => a.name === file.name);
                             return (h("span", { style: { fontSize: '12px', color: '#999' } }, (att === null || att === void 0 ? void 0 : att.size) || ((_a = file.file) === null || _a === void 0 ? void 0 : _a.size)));
                         }
-                })));
+                }))
+            }));
             if (props.withPadding) {
                 return h("div", { style: { padding: '2px' } }, uploadComponent);
             }

package/es/chat/src/ChatParts/MainArea.d.ts

@@ -2,8 +2,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     renderHeader: () => JSX.Element;
     renderMessages: () => JSX.Element;
     renderFooter: () => JSX.Element;
-    renderUnreadNotification: () => JSX.Element | null;
-    showUnreadNotification: import("vue").ComputedRef<boolean>;
     messagesBodyRef: import("vue").Ref<HTMLElement | {
         $el: HTMLElement;
     } | undefined>;