@uzum-tech/ui 1.9.0 → 1.9.1

package/lib/chat/src/ChatParts/Sidebar.js

@@ -7,17 +7,46 @@ const vue_1 = require("vue");
 const interface_1 = require("../interface");
 const flex_1 = require("../../../flex");
 const select_1 = require("../../../select");
+const scrollbar_1 = require("../../../scrollbar");
 const ChatListItems_1 = __importDefault(require("../ChatListItems"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'ChatSidebar',
     setup(props, { slots }) {
-        return { slots };
-    },
-    render() {
-        const { slots } = this;
-        const { mergedClsPrefixRef, mergedThemeRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect
+        const sidebarContentRef = (0, vue_1.ref)();
+        const lastScrollTop = (0, vue_1.ref)(0);
+        const scrollTopFired = (0, vue_1.ref)(false);
+        const scrollBottomFired = (0, vue_1.ref)(false);
+        const { mergedClsPrefixRef, mergedThemeRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect, onChatItemsScrollToTop, onChatItemsScrollToBottom
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
+        const handleSidebarScroll = (e) => {
+            var _a, _b;
+            const target = e.target;
+            if (!target)
+                return;
+            const { scrollTop, scrollHeight, clientHeight } = target;
+            const threshold = 5;
+            const scrollDirection = scrollTop > lastScrollTop.value ? 'down' : 'up';
+            const nearTop = scrollTop <= threshold;
+            const nearBottom = scrollHeight - (scrollTop + clientHeight) <= threshold;
+            if (scrollTop > threshold) {
+                scrollTopFired.value = false;
+            }
+            if (scrollHeight - (scrollTop + clientHeight) > threshold) {
+                scrollBottomFired.value = false;
+            }
+            if (nearTop && scrollDirection === 'up' && !scrollTopFired.value) {
+                scrollTopFired.value = true;
+                (_a = onChatItemsScrollToTop === null || onChatItemsScrollToTop === void 0 ? void 0 : onChatItemsScrollToTop.value) === null || _a === void 0 ? void 0 : _a.call(onChatItemsScrollToTop);
+            }
+            if (nearBottom &&
+                scrollDirection === 'down' &&
+                !scrollBottomFired.value) {
+                scrollBottomFired.value = true;
+                (_b = onChatItemsScrollToBottom === null || onChatItemsScrollToBottom === void 0 ? void 0 : onChatItemsScrollToBottom.value) === null || _b === void 0 ? void 0 : _b.call(onChatItemsScrollToBottom);
+            }
+            lastScrollTop.value = scrollTop;
+        };
         const renderListHeader = () => {
             return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header` },
                 (0, vue_1.h)(flex_1.UFlex, { align: "center", justify: "space-between", class: `${mergedClsPrefixRef.value}-chat-sidebar__header-container`, style: { width: '100%' } }, {
@@ -29,11 +58,33 @@ exports.default = (0, vue_1.defineComponent)({
                     }
                 })));
         };
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar` },
-            renderListHeader(),
-            (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` },
-                (0, vue_1.h)(ChatListItems_1.default, { chatItems: chatItemsRef.value, selectedChatId: selectedChatIdRef.value, typingChatIds: typingChatIdsRef.value, typingText: typingTextRef.value, loading: chatItemsLoadingRef.value, loadingCount: chatItemsLoadingCountRef.value, emptyProps: listEmptyPropsRef.value, avatarProps: listItemAvatarPropsRef.value, badgeProps: listItemBadgePropsRef.value, notificationsShown: notificationsShownSetRef.value, onChatSelect: handleChatSelect }, {
-                    chatItemStatus: slots.chatItemStatus
-                }))));
+        return {
+            slots,
+            sidebarContentRef,
+            renderListHeader,
+            handleSidebarScroll,
+            mergedClsPrefixRef,
+            mergedThemeRef,
+            chatItemsRef,
+            chatItemsLoadingRef,
+            chatItemsLoadingCountRef,
+            listEmptyPropsRef,
+            selectedChatIdRef,
+            typingChatIdsRef,
+            typingTextRef,
+            listItemAvatarPropsRef,
+            listItemBadgePropsRef,
+            notificationsShownSetRef,
+            handleChatSelect
+        };
+    },
+    render() {
+        return ((0, vue_1.h)("div", { class: `${this.mergedClsPrefixRef}-chat-sidebar` },
+            this.renderListHeader(),
+            (0, vue_1.h)(scrollbar_1.UScrollbar, { ref: "sidebarContentRef", class: `${this.mergedClsPrefixRef}-chat-sidebar__content`, onScroll: this.handleSidebarScroll }, {
+                default: () => ((0, vue_1.h)(ChatListItems_1.default, { chatItems: this.chatItemsRef, selectedChatId: this.selectedChatIdRef, typingChatIds: this.typingChatIdsRef, typingText: this.typingTextRef, loading: this.chatItemsLoadingRef, loadingCount: this.chatItemsLoadingCountRef, emptyProps: this.listEmptyPropsRef, avatarProps: this.listItemAvatarPropsRef, badgeProps: this.listItemBadgePropsRef, notificationsShown: this.notificationsShownSetRef, onChatSelect: this.handleChatSelect }, {
+                    chatItemStatus: this.slots.chatItemStatus
+                }))
+            })));
     }
 });

package/lib/chat/src/interface.d.ts

@@ -137,6 +137,11 @@ export interface ChatProps {
     unreadCount?: number;
     headerButtonProps?: Partial<ButtonProps>;
     headerIconProps?: Partial<IconProps>;
+    headerShareButtonProps?: Partial<ButtonProps>;
+    headerProfileButtonProps?: Partial<ButtonProps>;
+    headerCloseButtonProps?: Partial<ButtonProps>;
+    headerShareIconProps?: Partial<IconProps>;
+    headerProfileIconProps?: Partial<IconProps>;
     messageSenderAvatarProps?: Partial<AvatarProps>;
     messageUploadProps?: Partial<UploadProps>;
     messageButtonProps?: Partial<ButtonProps>;
@@ -149,6 +154,8 @@ export interface ChatProps {
     retryText?: string;
     typingText?: string;
     closeButtonText?: string;
+    shareButtonTooltip?: string;
+    profileButtonTooltip?: string;
     unreadNotificationText?: string;
     chatItemsLoading?: boolean;
     chatItemsLoadingCount?: number;
@@ -159,10 +166,14 @@ export interface ChatProps {
     onMessageRetry?: (message: ChatMessageData) => void;
     onAttachmentUpload?: OnAttachmentUpload;
     onFilterChange?: OnFilterChange;
-    onLoadMoreChats?: OnLoadMoreChats;
+    onFooterInputChange?: (value: string, chatId: ChatId) => void;
     onNetworkError?: OnNetworkError;
     onUploadError?: OnUploadError;
     onSendError?: OnSendError;
+    onChatItemsScrollToTop?: () => void;
+    onChatItemsScrollToBottom?: () => void;
+    onMessagesScrollToTop?: () => void;
+    onMessagesScrollToBottom?: () => void;
 }
 export interface ChatSlots {
     header?: () => VNodeChild;
@@ -218,7 +229,6 @@ export type OnFilterChange = (filter: {
     type: string;
     value: any;
 }) => void;
-export type OnLoadMoreChats = (offset: number, limit: number) => void;
 export type OnNetworkError = (error: {
     code: string;
     message: string;
@@ -274,6 +284,8 @@ export declare const chatInjectionKey: InjectionKey<{
     retryTextRef: Ref<string>;
     typingTextRef: Ref<string>;
     closeButtonTextRef: Ref<string>;
+    shareButtonTooltipRef: Ref<string>;
+    profileButtonTooltipRef: Ref<string>;
     unreadNotificationTextRef: Ref<string>;
     notificationsShownSetRef: Ref<Set<ChatId>>;
     unreadCountsBeforeReadRef: Ref<Record<ChatId, number>>;
@@ -281,12 +293,12 @@ export declare const chatInjectionKey: InjectionKey<{
     handleChatSelect: (chatId: ChatId) => void;
     handleMessageSend: (content: string, attachments?: ChatAttachment[]) => void;
     handleMessageRetry: (message: ChatMessageData) => void;
+    handleFooterInputChange: (value: string, chatId: ChatId) => void;
     markMessagesAsRead?: (chatId: ChatId) => void;
     handleFilterChange: (filter: {
         type: string;
         value: string | number | boolean;
     }) => void;
-    handleLoadMoreChats: (offset: number, limit: number) => void;
     handleNetworkError: (error: {
         code: string;
         message: string;
@@ -302,4 +314,13 @@ export declare const chatInjectionKey: InjectionKey<{
     onChatClose?: Ref<(() => void) | undefined>;
     onChatShare?: Ref<(() => void) | undefined>;
     onUserProfile?: Ref<(() => void) | undefined>;
+    onChatItemsScrollToTop?: Ref<(() => void) | undefined>;
+    onChatItemsScrollToBottom?: Ref<(() => void) | undefined>;
+    onMessagesScrollToTop?: Ref<(() => void) | undefined>;
+    onMessagesScrollToBottom?: Ref<(() => void) | undefined>;
+    headerShareButtonPropsRef: Ref<Partial<ButtonProps> | undefined>;
+    headerProfileButtonPropsRef: Ref<Partial<ButtonProps> | undefined>;
+    headerCloseButtonPropsRef: Ref<Partial<ButtonProps> | undefined>;
+    headerShareIconPropsRef: Ref<Partial<IconProps> | undefined>;
+    headerProfileIconPropsRef: Ref<Partial<IconProps> | undefined>;
 }>;

package/lib/chat/src/styles/index.cssr.js

@@ -41,11 +41,11 @@ exports.default = (0, cssr_1.cB)('chat', `
  gap: 8px;
  `), (0, cssr_1.cE)('content', `
  flex: 1;
- overflow-y: auto;
  min-height: 0;
+ `, [(0, cssr_1.c)('.u-scrollbar-content', `
  padding: 16px;
  padding-top: 8px;
- `), (0, cssr_1.cE)('item', `
+ `)]), (0, cssr_1.cE)('item', `
  padding: 12px 16px;
  width: 100%;
  cursor: pointer;
@@ -167,8 +167,19 @@ exports.default = (0, cssr_1.cB)('chat', `
  `), (0, cssr_1.cE)('header-title', `
  margin-top: 9px;
  color: var(--u-header-title-color);
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: block;
+ margin-right: 16px;
  `), (0, cssr_1.cE)('header-actions', `
  padding: 4px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ gap: 8px;
  `), (0, cssr_1.cE)('unread-notification', `
  background-color: var(--u-unread-notification-background-color);
  color: var(--u-unread-notification-text-color);