@uzum-tech/ui 1.7.0 → 1.7.1

package/es/chat/src/Chat.d.ts

@@ -105,24 +105,32 @@ export declare const chatProps: {
     };
     retryText: {
         type: PropType<ChatPropsType["retryText"]>;
-        default: string;
+        default: undefined;
     };
     typingText: {
         type: PropType<ChatPropsType["typingText"]>;
-        default: string;
+        default: undefined;
     };
     closeButtonText: {
         type: PropType<ChatPropsType["closeButtonText"]>;
-        default: string;
+        default: undefined;
     };
     chatItemsLoading: {
         type: PropType<ChatPropsType["chatItemsLoading"]>;
         default: boolean;
     };
+    chatItemsLoadingCount: {
+        type: PropType<ChatPropsType["chatItemsLoadingCount"]>;
+        default: number;
+    };
     messagesLoading: {
         type: PropType<ChatPropsType["messagesLoading"]>;
         default: boolean;
     };
+    messagesLoadingCount: {
+        type: PropType<ChatPropsType["messagesLoadingCount"]>;
+        default: number;
+    };
     maxHeight: {
         type: PropType<string | number>;
         default: undefined;
@@ -374,9 +382,7 @@ export declare const chatProps: {
                 clearColorPressed: string;
                 caretColorSecondary: string;
                 filterCounterTextColor: string;
-                filterCounterSeparatorColor: string;
                 filterCounterTextColorDisabled: string;
-                filterCounterSeparatorColorDisabled: string;
                 arrowColorSecondary: string;
                 clearColorSecondary: string;
                 colorSecondary: string;
@@ -1025,9 +1031,7 @@ export declare const chatProps: {
                 clearColorPressed: string;
                 caretColorSecondary: string;
                 filterCounterTextColor: string;
-                filterCounterSeparatorColor: string;
                 filterCounterTextColorDisabled: string;
-                filterCounterSeparatorColorDisabled: string;
                 arrowColorSecondary: string;
                 clearColorSecondary: string;
                 colorSecondary: string;
@@ -1676,9 +1680,7 @@ export declare const chatProps: {
                 clearColorPressed: string;
                 caretColorSecondary: string;
                 filterCounterTextColor: string;
-                filterCounterSeparatorColor: string;
                 filterCounterTextColorDisabled: string;
-                filterCounterSeparatorColorDisabled: string;
                 arrowColorSecondary: string;
                 clearColorSecondary: string;
                 colorSecondary: string;
@@ -2229,24 +2231,32 @@ declare const _default: import("vue").DefineComponent<{
     };
     retryText: {
         type: PropType<ChatPropsType["retryText"]>;
-        default: string;
+        default: undefined;
     };
     typingText: {
         type: PropType<ChatPropsType["typingText"]>;
-        default: string;
+        default: undefined;
     };
     closeButtonText: {
         type: PropType<ChatPropsType["closeButtonText"]>;
-        default: string;
+        default: undefined;
     };
     chatItemsLoading: {
         type: PropType<ChatPropsType["chatItemsLoading"]>;
         default: boolean;
     };
+    chatItemsLoadingCount: {
+        type: PropType<ChatPropsType["chatItemsLoadingCount"]>;
+        default: number;
+    };
     messagesLoading: {
         type: PropType<ChatPropsType["messagesLoading"]>;
         default: boolean;
     };
+    messagesLoadingCount: {
+        type: PropType<ChatPropsType["messagesLoadingCount"]>;
+        default: number;
+    };
     maxHeight: {
         type: PropType<string | number>;
         default: undefined;
@@ -2498,9 +2508,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorPressed: string;
                 caretColorSecondary: string;
                 filterCounterTextColor: string;
-                filterCounterSeparatorColor: string;
                 filterCounterTextColorDisabled: string;
-                filterCounterSeparatorColorDisabled: string;
                 arrowColorSecondary: string;
                 clearColorSecondary: string;
                 colorSecondary: string;
@@ -3149,9 +3157,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorPressed: string;
                 caretColorSecondary: string;
                 filterCounterTextColor: string;
-                filterCounterSeparatorColor: string;
                 filterCounterTextColorDisabled: string;
-                filterCounterSeparatorColorDisabled: string;
                 arrowColorSecondary: string;
                 clearColorSecondary: string;
                 colorSecondary: string;
@@ -3800,9 +3806,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorPressed: string;
                 caretColorSecondary: string;
                 filterCounterTextColor: string;
-                filterCounterSeparatorColor: string;
                 filterCounterTextColorDisabled: string;
-                filterCounterSeparatorColorDisabled: string;
                 arrowColorSecondary: string;
                 clearColorSecondary: string;
                 colorSecondary: string;
@@ -4456,9 +4460,7 @@ declare const _default: import("vue").DefineComponent<{
                     clearColorPressed: string;
                     caretColorSecondary: string;
                     filterCounterTextColor: string;
-                    filterCounterSeparatorColor: string;
                     filterCounterTextColorDisabled: string;
-                    filterCounterSeparatorColorDisabled: string;
                     arrowColorSecondary: string;
                     clearColorSecondary: string;
                     colorSecondary: string;
@@ -4998,9 +5000,7 @@ declare const _default: import("vue").DefineComponent<{
                         clearColorPressed: string;
                         caretColorSecondary: string;
                         filterCounterTextColor: string;
-                        filterCounterSeparatorColor: string;
                         filterCounterTextColorDisabled: string;
-                        filterCounterSeparatorColorDisabled: string;
                         arrowColorSecondary: string;
                         clearColorSecondary: string;
                         colorSecondary: string;
@@ -5275,24 +5275,32 @@ declare const _default: import("vue").DefineComponent<{
     };
     retryText: {
         type: PropType<ChatPropsType["retryText"]>;
-        default: string;
+        default: undefined;
     };
     typingText: {
         type: PropType<ChatPropsType["typingText"]>;
-        default: string;
+        default: undefined;
     };
     closeButtonText: {
         type: PropType<ChatPropsType["closeButtonText"]>;
-        default: string;
+        default: undefined;
     };
     chatItemsLoading: {
         type: PropType<ChatPropsType["chatItemsLoading"]>;
         default: boolean;
     };
+    chatItemsLoadingCount: {
+        type: PropType<ChatPropsType["chatItemsLoadingCount"]>;
+        default: number;
+    };
     messagesLoading: {
         type: PropType<ChatPropsType["messagesLoading"]>;
         default: boolean;
     };
+    messagesLoadingCount: {
+        type: PropType<ChatPropsType["messagesLoadingCount"]>;
+        default: number;
+    };
     maxHeight: {
         type: PropType<string | number>;
         default: undefined;
@@ -5544,9 +5552,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorPressed: string;
                 caretColorSecondary: string;
                 filterCounterTextColor: string;
-                filterCounterSeparatorColor: string;
                 filterCounterTextColorDisabled: string;
-                filterCounterSeparatorColorDisabled: string;
                 arrowColorSecondary: string;
                 clearColorSecondary: string;
                 colorSecondary: string;
@@ -6195,9 +6201,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorPressed: string;
                 caretColorSecondary: string;
                 filterCounterTextColor: string;
-                filterCounterSeparatorColor: string;
                 filterCounterTextColorDisabled: string;
-                filterCounterSeparatorColorDisabled: string;
                 arrowColorSecondary: string;
                 clearColorSecondary: string;
                 colorSecondary: string;
@@ -6846,9 +6850,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorPressed: string;
                 caretColorSecondary: string;
                 filterCounterTextColor: string;
-                filterCounterSeparatorColor: string;
                 filterCounterTextColorDisabled: string;
-                filterCounterSeparatorColorDisabled: string;
                 arrowColorSecondary: string;
                 clearColorSecondary: string;
                 colorSecondary: string;
@@ -7307,6 +7309,9 @@ declare const _default: import("vue").DefineComponent<{
     "onSend-error"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean | undefined;
+    typingText: string | undefined;
+    retryText: string | undefined;
+    closeButtonText: string | undefined;
     maxHeight: string | number;
     emptyProps: Partial<Partial<import("../..").EmptyProps> | undefined>;
     onChatClose: () => void;
@@ -7334,11 +7339,10 @@ declare const _default: import("vue").DefineComponent<{
     footerUploadProps: Partial<Partial<import("../..").UploadProps> | undefined>;
     footerUploadTriggerProps: any;
     footerIconProps: Partial<Partial<import("../..").IconProps> | undefined>;
-    retryText: string | undefined;
-    typingText: string | undefined;
-    closeButtonText: string | undefined;
     chatItemsLoading: boolean | undefined;
+    chatItemsLoadingCount: number | undefined;
     messagesLoading: boolean | undefined;
+    messagesLoadingCount: number | undefined;
     onChatSelect: import("./interface").OnChatSelect | undefined;
     onMessageRetry: ((message: ChatMessageData) => void) | undefined;
     onAttachmentUpload: import("./interface").OnAttachmentUpload | undefined;

package/es/chat/src/Chat.js

@@ -4,7 +4,7 @@ import ChatSidebar from './ChatParts/Sidebar';
 import ChatMainArea from './ChatParts/MainArea';
 import style from './styles/index.cssr';
 import { chatLight } from '../styles';
-import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass, useLocale } from '../../_mixins';
 import { resolveSlot } from '../../_utils';
 import { UFlex } from '../../flex';
 export const chatProps = Object.assign(Object.assign({}, useTheme.props), { chatItems: {
@@ -84,19 +84,25 @@ export const chatProps = Object.assign(Object.assign({}, useTheme.props), { chat
         default: undefined
     }, retryText: {
         type: String,
-        default: 'Повторно отправить'
+        default: undefined
     }, typingText: {
         type: String,
-        default: 'Печатает'
+        default: undefined
     }, closeButtonText: {
         type: String,
-        default: 'Завершить чат'
+        default: undefined
     }, chatItemsLoading: {
         type: Boolean,
         default: false
+    }, chatItemsLoadingCount: {
+        type: Number,
+        default: 10
     }, messagesLoading: {
         type: Boolean,
         default: false
+    }, messagesLoadingCount: {
+        type: Number,
+        default: 10
     }, maxHeight: {
         type: [String, Number],
         default: undefined
@@ -152,6 +158,7 @@ export default defineComponent({
     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 }, self: { backgroundColor, borderColor, sidebarBackgroundColor, sidebarBorderColor, sidebarItemBackgroundColor, sidebarItemBackgroundColorHover, sidebarItemBackgroundColorSelected, sidebarItemTextColor, sidebarItemTextColorSelected, sidebarItemSubtitleColor, sidebarItemTimeColor, mainBackgroundColor, headerBackgroundColor, headerBorderColor, headerTitleColor, messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, footerBackgroundColor, footerBorderColor, inputBackgroundColor, inputBorderColor, unreadNotificationBackgroundColor, unreadNotificationTextColor, typingIndicatorColor, dateSeparatorColor, dateSeparatorBackgroundColor, borderRadius, errorColor } } = themeRef.value;
             return {
@@ -264,6 +271,17 @@ export default defineComponent({
             emit('send-error', error);
             (_a = props.onSendError) === null || _a === void 0 ? void 0 : _a.call(props, error);
         };
+        const mergedInputPlaceholderRef = computed(() => {
+            var _a;
+            const placeholder = (_a = props.footerInputProps) === null || _a === void 0 ? void 0 : _a.placeholder;
+            if (Array.isArray(placeholder)) {
+                return placeholder[0];
+            }
+            return placeholder !== null && placeholder !== void 0 ? placeholder : localeRef.value.inputPlaceholder;
+        });
+        const mergedRetryTextRef = computed(() => { var _a; return (_a = props.retryText) !== null && _a !== void 0 ? _a : localeRef.value.retryText; });
+        const mergedTypingTextRef = computed(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
+        const mergedCloseButtonTextRef = computed(() => { var _a; return (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : localeRef.value.closeButtonText; });
         provide(chatInjectionKey, {
             mergedClsPrefixRef,
             chatItemsRef: toRef(props, 'chatItems'),
@@ -272,7 +290,9 @@ export default defineComponent({
             messagesRef: filteredMessagesRef,
             typingChatIdsRef: toRef(props, 'typingChatIds'),
             chatItemsLoadingRef: toRef(props, 'chatItemsLoading'),
+            chatItemsLoadingCountRef: toRef(props, 'chatItemsLoadingCount'),
             messagesLoadingRef: toRef(props, 'messagesLoading'),
+            messagesLoadingCountRef: toRef(props, 'messagesLoadingCount'),
             listEmptyPropsRef: toRef(props, 'listEmptyProps'),
             listHeaderTitleRef: toRef(props, 'listHeaderTitle'),
             listHeaderActionsRef: toRef(props, 'listHeaderActions'),
@@ -289,9 +309,10 @@ export default defineComponent({
             footerUploadPropsRef: toRef(props, 'footerUploadProps'),
             footerUploadTriggerPropsRef: toRef(props, 'footerUploadTriggerProps'),
             footerIconPropsRef: toRef(props, 'footerIconProps'),
-            retryTextRef: toRef(props, 'retryText'),
-            typingTextRef: toRef(props, 'typingText'),
-            closeButtonTextRef: toRef(props, 'closeButtonText'),
+            inputPlaceholderRef: mergedInputPlaceholderRef,
+            retryTextRef: mergedRetryTextRef,
+            typingTextRef: mergedTypingTextRef,
+            closeButtonTextRef: mergedCloseButtonTextRef,
             handleChatSelect,
             handleMessageSend,
             handleMessageRetry,

package/es/chat/src/ChatGlobalState.d.ts

@@ -0,0 +1,13 @@
+export declare class ChatGlobalState {
+    private static instance;
+    private readonly notificationsShown;
+    private readonly openedChats;
+    private constructor();
+    static getInstance(): ChatGlobalState;
+    hasNotificationShown(chatId: string | number | symbol): boolean;
+    markNotificationShown(chatId: string | number | symbol): void;
+    isChatOpened(chatId: string | number | symbol): boolean;
+    markChatOpened(chatId: string | number | symbol): void;
+    markChatClosed(chatId: string | number | symbol): void;
+    reset(): void;
+}

package/es/chat/src/ChatGlobalState.js

@@ -0,0 +1,32 @@
+export class ChatGlobalState {
+    constructor() {
+        this.notificationsShown = new Set();
+        this.openedChats = new Set();
+    }
+    static getInstance() {
+        if (!ChatGlobalState.instance) {
+            ChatGlobalState.instance = new ChatGlobalState();
+        }
+        return ChatGlobalState.instance;
+    }
+    hasNotificationShown(chatId) {
+        return this.notificationsShown.has(chatId);
+    }
+    markNotificationShown(chatId) {
+        this.notificationsShown.add(chatId);
+    }
+    isChatOpened(chatId) {
+        return this.openedChats.has(chatId);
+    }
+    markChatOpened(chatId) {
+        this.openedChats.add(chatId);
+    }
+    markChatClosed(chatId) {
+        this.openedChats.delete(chatId);
+    }
+    reset() {
+        this.notificationsShown.clear();
+        this.openedChats.clear();
+    }
+}
+ChatGlobalState.instance = null;

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

@@ -0,0 +1,43 @@
+import { type PropType } from 'vue';
+import type { ChatAttachment as ChatAttachmentType, ChatMessageData } from '../interface';
+declare const _default: import("vue").DefineComponent<{
+    message: {
+        type: PropType<ChatMessageData>;
+        required: true;
+    };
+    attachments: {
+        type: PropType<ChatAttachmentType[]>;
+        required: true;
+    };
+    uploadProps: {
+        type: PropType<Record<string, any>>;
+        default: () => {};
+    };
+    withPadding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    message: {
+        type: PropType<ChatMessageData>;
+        required: true;
+    };
+    attachments: {
+        type: PropType<ChatAttachmentType[]>;
+        required: true;
+    };
+    uploadProps: {
+        type: PropType<Record<string, any>>;
+        default: () => {};
+    };
+    withPadding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    uploadProps: Record<string, any>;
+    withPadding: boolean;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,75 @@
+import { h, defineComponent } from 'vue';
+import { UUpload, UUploadFileList } from '../../../upload';
+export default defineComponent({
+    name: 'ChatAttachment',
+    props: {
+        message: {
+            type: Object,
+            required: true
+        },
+        attachments: {
+            type: Array,
+            required: true
+        },
+        uploadProps: {
+            type: Object,
+            default: () => ({})
+        },
+        withPadding: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { slots }) {
+        const getThumbnailUrl = (att) => {
+            const url = [att.preview, att.thumbnail].find((value) => typeof value === 'string');
+            return url !== null && url !== void 0 ? url : null;
+        };
+        const renderAttachment = () => {
+            const fileList = props.attachments.map((att, index) => {
+                var _a, _b, _c;
+                return ({
+                    id: `${String(props.message.id)}-attachment-${index}`,
+                    name: att.name,
+                    status: att.status || 'finished',
+                    percentage: (_a = att.percentage) !== null && _a !== void 0 ? _a : null,
+                    url: (_b = att.url) !== null && _b !== void 0 ? _b : null,
+                    thumbnailUrl: getThumbnailUrl(att),
+                    type: (_c = att.type) !== null && _c !== void 0 ? _c : null,
+                    file: null,
+                    batchId: null
+                });
+            });
+            const uploadComponent = (h(UUpload, Object.assign({ abstract: true, fileList: fileList, fileListStyle: props.withPadding
+                    ? {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        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, {
+                    '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 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);
+            }
+            return uploadComponent;
+        };
+        return () => {
+            if (slots.default) {
+                return slots.default(props.message);
+            }
+            return renderAttachment();
+        };
+    }
+});

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

@@ -1,18 +1,12 @@
-declare global {
-    interface Window {
-        __chatGlobalState?: {
-            notificationsShown: Set<string | number | symbol>;
-            openedChats: Set<string | number | symbol>;
-        };
-    }
-}
 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<any>;
+    messagesBodyRef: import("vue").Ref<HTMLElement | {
+        $el: HTMLElement;
+    } | undefined>;
     inputRef: import("vue").Ref<HTMLInputElement | undefined>;
     inputValue: import("vue").Ref<string>;
     handleSendMessage: () => Promise<void>;