@uzum-tech/ui 1.10.0 → 1.10.1

package/dist/index.js

@@ -60909,13 +60909,25 @@
         const handleChatSelect = (chatId) => {
           props.onChatSelect?.(chatId);
         };
+        const toKeyString = (value) => {
+          if (typeof value === "symbol") return value.toString();
+          if (typeof value === "function") {
+            const result = value();
+            return typeof result === "string" || typeof result === "number" ? String(result) : "";
+          }
+          return value != null ? String(value) : "";
+        };
         const renderChatItem = (item) => {
           const isSelected = props.selectedChatId === item.id;
           const isTyping = props.typingChatIds?.includes(item.id) ?? false;
+          const { id, title, subtitle } = item;
+          const keyId = toKeyString(id);
+          const keyTitle = toKeyString(title);
+          const keySubtitle = toKeyString(subtitle);
           return /* @__PURE__ */ vue.h(
             UListItem,
             {
-              key: item.id,
+              key: `${keyId}-${keyTitle}-${keySubtitle}`,
               showIcon: false,
               onClick: () => {
                 handleChatSelect(item.id);
@@ -65747,50 +65759,62 @@
             el.scrollTop = el.scrollHeight;
           }
         };
+        const toKeyString = (value) => {
+          if (typeof value === "symbol") return value.toString();
+          if (typeof value === "function") {
+            const result = value();
+            return typeof result === "string" || typeof result === "number" ? String(result) : "";
+          }
+          return value != null ? String(value) : "";
+        };
         const renderHeader = () => {
           return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` }, /* @__PURE__ */ vue.h(UFlex, { justify: "space-between", align: "flex-start", wrap: false }, {
-            default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
-              UText,
-              {
-                variant: "heading-s-bold",
-                class: `${mergedClsPrefixRef.value}-chat-main__header-title`,
-                theme: mergedThemeRef.value.peers.Typography,
-                themeOverrides: mergedThemeRef.value.peerOverrides.Typography
-              },
-              {
-                default: () => selectedChatRef.value?.title ?? ""
-              }
-            ), /* @__PURE__ */ vue.h(
-              UFlex,
-              {
-                align: "center",
-                size: "small",
-                class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
-              },
-              {
-                default: () => resolveSlot(slots.headerActions, () => {
-                  const shareButtonProps = {
-                    ...headerButtonPropsRef.value,
-                    ...headerShareButtonPropsRef.value
-                  };
-                  const profileButtonProps = {
-                    ...headerButtonPropsRef.value,
-                    ...headerProfileButtonPropsRef.value
-                  };
-                  const closeButtonProps = {
-                    ...headerButtonPropsRef.value,
-                    ...headerCloseButtonPropsRef.value
-                  };
-                  const shareIconProps = {
-                    ...headerIconPropsRef.value,
-                    ...headerShareIconPropsRef.value
-                  };
-                  const profileIconProps = {
-                    ...headerIconPropsRef.value,
-                    ...headerProfileIconPropsRef.value
-                  };
-                  const buttons = [];
-                  if (shareButtonProps.disabled !== true) {
+            default: () => {
+              const chat = selectedChatRef.value;
+              const keyId = toKeyString(chat?.id);
+              const keyTitle = toKeyString(chat?.title);
+              return /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
+                UText,
+                {
+                  key: `${keyId}-${keyTitle}`,
+                  variant: "heading-s-bold",
+                  class: `${mergedClsPrefixRef.value}-chat-main__header-title`,
+                  theme: mergedThemeRef.value.peers.Typography,
+                  themeOverrides: mergedThemeRef.value.peerOverrides.Typography
+                },
+                {
+                  default: () => selectedChatRef.value?.title ?? ""
+                }
+              ), /* @__PURE__ */ vue.h(
+                UFlex,
+                {
+                  align: "center",
+                  size: "small",
+                  class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
+                },
+                {
+                  default: () => resolveSlot(slots.headerActions, () => {
+                    const shareButtonProps = {
+                      ...headerButtonPropsRef.value,
+                      ...headerShareButtonPropsRef.value
+                    };
+                    const profileButtonProps = {
+                      ...headerButtonPropsRef.value,
+                      ...headerProfileButtonPropsRef.value
+                    };
+                    const closeButtonProps = {
+                      ...headerButtonPropsRef.value,
+                      ...headerCloseButtonPropsRef.value
+                    };
+                    const shareIconProps = {
+                      ...headerIconPropsRef.value,
+                      ...headerShareIconPropsRef.value
+                    };
+                    const profileIconProps = {
+                      ...headerIconPropsRef.value,
+                      ...headerProfileIconPropsRef.value
+                    };
+                    const buttons = [];
                     buttons.push(
                       /* @__PURE__ */ vue.h(UTooltip, null, {
                         trigger: () => /* @__PURE__ */ vue.h(
@@ -65822,8 +65846,6 @@
                         default: () => shareButtonTooltipRef.value
                       })
                     );
-                  }
-                  if (profileButtonProps.disabled !== true) {
                     buttons.push(
                       /* @__PURE__ */ vue.h(UTooltip, null, {
                         trigger: () => /* @__PURE__ */ vue.h(
@@ -65855,8 +65877,6 @@
                         default: () => profileButtonTooltipRef.value
                       })
                     );
-                  }
-                  if (closeButtonProps.disabled !== true) {
                     buttons.push(
                       /* @__PURE__ */ vue.h(
                         Button,
@@ -65874,11 +65894,11 @@
                         }
                       )
                     );
-                  }
-                  return buttons;
-                })
-              }
-            ))
+                    return buttons;
+                  })
+                }
+              ));
+            }
           }));
         };
         const renderMessages = () => {
@@ -113250,7 +113270,12 @@
         type: Number,
         default: 0
       },
+      topDistance: {
+        type: Number,
+        default: 0
+      },
       onLoad: Function,
+      onLoadTop: Function,
       scrollbarProps: Object
     };
     var InfiniteScroll = vue.defineComponent({
@@ -113258,7 +113283,8 @@
       props: infiniteScrollProps,
       setup(props) {
         const scrollbarInstRef = vue.ref(null);
-        let loading = false;
+        let loadingBottom = false;
+        let loadingTop = false;
         const handleCheckBottom = async () => {
           const { value: scrollbarInst } = scrollbarInstRef;
           if (scrollbarInst) {
@@ -113268,24 +113294,56 @@
             const scrollTop = containerRef?.scrollTop;
             if (containerRef && scrollHeight !== void 0 && clientHeight !== void 0 && scrollTop !== void 0) {
               if (scrollTop + clientHeight >= scrollHeight - props.distance) {
-                loading = true;
+                loadingBottom = true;
                 try {
                   await props.onLoad?.();
                 } catch {
                 }
-                loading = false;
+                loadingBottom = false;
+              }
+            }
+          }
+        };
+        const handleCheckTop = async () => {
+          const { value: scrollbarInst } = scrollbarInstRef;
+          if (scrollbarInst) {
+            const { containerRef } = scrollbarInst;
+            const scrollTop = containerRef?.scrollTop;
+            if (containerRef && scrollTop !== void 0) {
+              if (scrollTop <= props.topDistance) {
+                loadingTop = true;
+                const oldScrollHeight = containerRef.scrollHeight;
+                const oldScrollTop = containerRef.scrollTop;
+                try {
+                  await props.onLoadTop?.();
+                  await vue.nextTick();
+                  const newScrollHeight = containerRef.scrollHeight;
+                  const heightDiff = newScrollHeight - oldScrollHeight;
+                  if (heightDiff > 0) {
+                    containerRef.scrollTop = oldScrollTop + heightDiff;
+                  }
+                } catch {
+                }
+                loadingTop = false;
               }
             }
           }
         };
         const handleScroll = () => {
-          if (loading) return;
-          void handleCheckBottom();
+          if (!loadingBottom) {
+            void handleCheckBottom();
+          }
+          if (!loadingTop) {
+            void handleCheckTop();
+          }
         };
         const handleWheel = (e) => {
-          if (e.deltaY <= 0) return;
-          if (loading) return;
-          void handleCheckBottom();
+          if (e.deltaY > 0 && !loadingBottom) {
+            void handleCheckBottom();
+          }
+          if (e.deltaY < 0 && !loadingTop) {
+            void handleCheckTop();
+          }
         };
         return {
           scrollbarInstRef,
@@ -135129,7 +135187,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.10.0";
+    var version = "1.10.1";
 
     function create({
       componentPrefix = "U",