tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/dist/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.js

@@ -2,7 +2,7 @@ import { ref, computed, provide, inject, defineComponent, watch, h, watchEffect,
 import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { c as cs } from "../../../../../index-BF6QB9jF.js";
 import { i as injectConfigProviderContext, l as refAutoReset, g as getActiveElement, j as unrefElement, S as Slot, u as useVModel, c as createContext, e as Primitive, m as createSharedComposable, n as useEventListener, b as useBodyScrollLock, a as useForwardExpose, F as FocusScope_default, D as DismissableLayer_default, d as useHideOthers, P as Presence_default, T as Teleport_default, f as useEmitAsProps } from "../../../../../Teleport-CMvGsENT.js";
-import { d as PopperAnchor_default, P as PopperRoot_default, a as useFocusGuards, b as PopperContent_default, e as PopperContentPropsDefaultValue, c as useForwardPropsEmits } from "../../../../../PopperContent-BaiCn-CA.js";
+import { d as PopperAnchor_default, P as PopperRoot_default, a as useFocusGuards, b as PopperContent_default, e as PopperContentPropsDefaultValue, c as useForwardPropsEmits } from "../../../../../PopperContent-DtL7HVWz.js";
 import { g as getOpenState, i as isPointerInGraceArea, a as isMouseEvent, F as FIRST_LAST_KEYS, f as focusFirst$1, L as LAST_KEYS, S as SELECTION_KEYS, I as ITEM_SELECT } from "../../../../../utils-KP1QpeUS.js";
 import { useMessageActions } from "../../../../../hooks/useMessageActions.js";
 import { _ as _export_sfc } from "../../../../../_plugin-vue_export-helper-1tPrXgE0.js";
@@ -251,9 +251,11 @@ var RovingFocusGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
         if (!entryFocusEvent.defaultPrevented) {
           const items = getItems().map((i) => i.ref).filter((i) => i.dataset.disabled !== "");
           const activeItem = items.find((item) => item.getAttribute("data-active") === "");
+          const highlightedItem = items.find((item) => item.getAttribute("data-highlighted") === "");
           const currentItem = items.find((item) => item.id === currentTabStopId.value);
           const candidateItems = [
             activeItem,
+            highlightedItem,
             currentItem,
             ...items
           ].filter(Boolean);
@@ -1263,6 +1265,11 @@ var ContextMenuRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
   inheritAttrs: false,
   __name: "ContextMenuRoot",
   props: {
+    pressOpenDelay: {
+      type: Number,
+      required: false,
+      default: 700
+    },
     dir: {
       type: String,
       required: false
@@ -1277,7 +1284,7 @@ var ContextMenuRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { dir: propDir, modal } = toRefs(props);
+    const { dir: propDir, modal, pressOpenDelay } = toRefs(props);
     useForwardExpose();
     const dir = useDirection(propDir);
     const open = ref(false);
@@ -1289,7 +1296,8 @@ var ContextMenuRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
       },
       dir,
       modal,
-      triggerElement
+      triggerElement,
+      pressOpenDelay
     });
     watch(open, (value) => {
       emits("update:open", value);
@@ -1565,7 +1573,7 @@ var ContextMenuTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
         await nextTick();
         if (isTouchOrPen(event) && !event.defaultPrevented) {
           clearLongPress();
-          longPressTimer.value = window.setTimeout(() => handleOpen(event), 700);
+          longPressTimer.value = window.setTimeout(() => handleOpen(event), rootContext.pressOpenDelay.value);
         }
       }
     }
@@ -1674,7 +1682,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           key: 0,
                           message: _ctx.message
                         }, null, 8, ["message"])) : action.visible ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                          createElementVNode("span", null, toDisplayString(unref(t)(`TUIChat.${action.label}`, { defaultValue: action.label })), 1),
+                          createElementVNode("span", null, toDisplayString(unref(t)(`MessageList.${action.label}`, { defaultValue: action.label })), 1),
                           action.icon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                             typeof action.icon === "string" ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(action.icon), 1)) : (openBlock(), createBlock(resolveDynamicComponent(action.icon), {
                               key: 1,
@@ -1698,7 +1706,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MessageActionDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-617704f8"]]);
+const MessageActionDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6c925a96"]]);
 export {
   MessageActionDropdown as default
 };

package/dist/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.vue.d.ts

@@ -1,21 +1,21 @@
 import { MessageAction } from '../../../../../hooks/useMessageActions';
-import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
-interface IMessageActionDropdownProps {
-    message: IMessageModel;
+interface MessageActionDropdownProps {
+    message: MessageModel;
     messageActionList?: MessageAction[] | undefined;
 }
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageActionDropdownProps>, {
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageActionDropdownProps>, {
     messageActionList: undefined;
-    message: () => IMessageModel;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageActionDropdownProps>, {
+    message: () => MessageModel;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageActionDropdownProps>, {
     messageActionList: undefined;
-    message: () => IMessageModel;
+    message: () => MessageModel;
 }>>> & Readonly<{}>, {
-    message: IMessageModel;
+    message: MessageModel;
     messageActionList: MessageAction[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/dist/components/MessageList/Message/MessageLayout/MessageLayout.js

@@ -133,7 +133,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MessageLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4a97019b"]]);
+const MessageLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9e509377"]]);
 export {
   MessageLayout as default
 };

package/dist/components/MessageList/Message/MessageLayout/MessageMeta/MessageMeta.js

@@ -1,46 +1,32 @@
-import { defineComponent, computed, createBlock, openBlock, unref, normalizeStyle, normalizeClass, withCtx, createElementBlock, createCommentVNode, Fragment, toDisplayString } from "vue";
+import { defineComponent, useCssModule, computed, createBlock, openBlock, unref, normalizeClass, withCtx, createElementBlock, createCommentVNode, Fragment, toDisplayString } from "vue";
 import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import { c as cs } from "../../../../../index-BF6QB9jF.js";
 import { View as _sfc_main$1 } from "../../../../../baseComp/View/index.js";
 import { getTimeStampAuto } from "../../../../../utils/time.js";
 import MessageStatusIcon from "./MessageStatusIcon.js";
 import { _ as _export_sfc } from "../../../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "message-meta__read-status"
-};
-const _hoisted_2 = {
-  key: 2,
-  class: "message-meta__group-all-read"
-};
-const _hoisted_3 = {
-  key: 2,
-  class: "message-meta__time"
-};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MessageMeta",
   props: {
     isGroup: { type: Boolean },
     timestamp: { default: 0 },
-    flow: { default: "" },
+    flow: { default: "in" },
     needReadReceipt: { type: Boolean, default: false },
     readReceiptInfo: { default: void 0 },
-    status: { default: void 0 },
-    class: { default: void 0 },
-    style: { default: void 0 }
+    status: { default: void 0 }
   },
   emits: ["onReadReceiptTextClick"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const { t } = useUIKit();
+    const classes = useCssModule();
     const displayTime = computed(() => getTimeStampAuto(props.timestamp));
     const handleGroupUnreadClick = () => {
       emits("onReadReceiptTextClick");
     };
     const shouldShowStatusIcon = computed(() => props.flow === "out" && (!props.needReadReceipt || props.status === "unSend" || props.status === "fail"));
     const readReceiptText = computed(() => {
-      if (!props.needReadReceipt || props.status !== "success" || !props.readReceiptInfo) {
+      if (!props.needReadReceipt || props.status !== "success" || !props.readReceiptInfo || props.flow === "in") {
         return "";
       }
       if (props.isGroup) {
@@ -56,10 +42,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$1), {
-        class: normalizeClass(unref(cs)("message-meta", props.class)),
+        class: normalizeClass(unref(classes)["message-meta"]),
         dir: "row",
-        align: "center",
-        style: normalizeStyle(props.style)
+        align: "center"
       }, {
         default: withCtx(() => [
           shouldShowStatusIcon.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -67,21 +52,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               key: 0,
               status: props.status
             }, null, 8, ["status"])) : createCommentVNode("", true)
-          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            readReceiptText.value && !props.isGroup ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(readReceiptText.value), 1)) : readReceiptText.value && props.isGroup && props.readReceiptInfo && props.readReceiptInfo.unreadCount > 0 ? (openBlock(), createElementBlock("span", {
+          ], 64)) : Boolean(readReceiptText.value) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            readReceiptText.value && !props.isGroup ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(unref(classes)["message-meta__read-status"])
+            }, toDisplayString(readReceiptText.value), 3)) : readReceiptText.value && props.isGroup && props.readReceiptInfo && props.readReceiptInfo.unreadCount > 0 ? (openBlock(), createElementBlock("span", {
               key: 1,
-              class: "message-meta__group-unread",
+              class: normalizeClass(unref(classes)["message-meta__group-unread"]),
               onClick: handleGroupUnreadClick
-            }, toDisplayString(readReceiptText.value), 1)) : readReceiptText.value && props.isGroup ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(readReceiptText.value), 1)) : createCommentVNode("", true)
-          ], 64)),
-          displayTime.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(displayTime.value), 1)) : createCommentVNode("", true)
+            }, toDisplayString(readReceiptText.value), 3)) : readReceiptText.value && props.isGroup ? (openBlock(), createElementBlock("span", {
+              key: 2,
+              class: normalizeClass(unref(classes)["message-meta__group-all-read"])
+            }, toDisplayString(readReceiptText.value), 3)) : createCommentVNode("", true)
+          ], 64)) : createCommentVNode("", true),
+          displayTime.value ? (openBlock(), createElementBlock("span", {
+            key: 2,
+            class: normalizeClass(unref(classes)["message-meta__time"])
+          }, toDisplayString(displayTime.value), 3)) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["class", "style"]);
+      }, 8, ["class"]);
     };
   }
 });
-const MessageMeta = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-88438504"]]);
+const style0 = {
+  "message-meta": "_message-meta_rk5t7_1",
+  "message-meta__read-status": "_message-meta__read-status_rk5t7_6",
+  "message-meta__group-unread": "_message-meta__group-unread_rk5t7_9",
+  "message-meta__group-all-read": "_message-meta__group-all-read_rk5t7_18",
+  "message-meta__time": "_message-meta__time_rk5t7_21"
+};
+const cssModules = {
+  "$style": style0
+};
+const MessageMeta = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 export {
   MessageMeta as default
 };

package/dist/components/MessageList/Message/MessageLayout/MessageMeta/MessageMeta.vue.d.ts

@@ -1,5 +1,3 @@
-import { CSSProperties } from 'vue';
-
 interface MessageMetaProps {
     isGroup: boolean;
     timestamp: number;
@@ -11,8 +9,6 @@ interface MessageMetaProps {
         isPeerRead: boolean;
     };
     status?: 'unSend' | 'success' | 'fail' | string;
-    class?: string;
-    style?: CSSProperties;
 }
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageMetaProps>, {
     timestamp: number;
@@ -20,8 +16,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     needReadReceipt: boolean;
     readReceiptInfo: undefined;
     status: undefined;
-    class: undefined;
-    style: undefined;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     onReadReceiptTextClick: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageMetaProps>, {
@@ -30,13 +24,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     needReadReceipt: boolean;
     readReceiptInfo: undefined;
     status: undefined;
-    class: undefined;
-    style: undefined;
 }>>> & Readonly<{
     onOnReadReceiptTextClick?: ((...args: any[]) => any) | undefined;
 }>, {
-    style: CSSProperties;
-    class: string;
     flow: string;
     status: "unSend" | "success" | "fail" | string;
     needReadReceipt: boolean;

package/dist/components/MessageList/MessageForward/MessageForward.js

@@ -3,7 +3,7 @@ import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
 import { useUIKit, IconClose, TUIToast, TUIButton } from "@tencentcloud/uikit-base-component-vue3";
 import Modal from "../../../baseComp/Modal/Modal.js";
 import { View as _sfc_main$1 } from "../../../baseComp/View/index.js";
-import UserPicker from "../../UserPicker/UserPicker.js";
+import { UserPicker } from "../../UserPicker/index.js";
 import { useConversationListState } from "../../../states/ConversationListState/ConversationListState.js";
 import { useMessageActionState } from "../../../states/MessageActionState/MessageActionState.js";
 import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
@@ -89,8 +89,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("span", _hoisted_1, toDisplayString(unref(t)("MessageList.forward")), 1),
               _cache[0] || (_cache[0] = createElementVNode("div", { class: "forward-header__placeholder" }, null, -1))
             ]),
-            _: 1,
-            __: [0]
+            _: 1
           }),
           createVNode(unref(UserPicker), {
             ref_key: "userPickerRef",
@@ -108,7 +107,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(_sfc_main$1), { class: "forward-footer" }, {
             default: withCtx(() => [
               createVNode(unref(TUIButton), {
-                shape: "rect",
+                radius: "rect",
                 color: "blue",
                 type: "primary",
                 disabled: isDisableConfirm.value,
@@ -128,7 +127,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MessageForward = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bed0bb4e"]]);
+const MessageForward = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6d9a1f77"]]);
 export {
   MessageForward as default
 };

package/dist/components/MessageList/MessageList.js

@@ -1,14 +1,14 @@
-import { Message as _sfc_main$2 } from "./Message/index.js";
-import "./Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.js";
-import { defineComponent, useSlots, provide, ref, computed, watch, nextTick, onMounted, onUnmounted, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, unref, withCtx, renderList, createBlock, normalizeClass, resolveDynamicComponent } from "vue";
+import { defineComponent, useSlots, provide, ref, computed, watch, nextTick, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, createVNode, createBlock, createCommentVNode, unref, withCtx, Fragment, renderList, normalizeClass, resolveDynamicComponent } from "vue";
 import { c as cs } from "../../index-BF6QB9jF.js";
 import ObserverView from "../../baseComp/ObserverView/ObserverView.js";
 import { View as _sfc_main$1 } from "../../baseComp/View/index.js";
 import { useScroll } from "../../hooks/useScroll.js";
 import { throttle } from "../../utils/lodash.js";
+import { Message as _sfc_main$2 } from "./Message/index.js";
 import MessageForward from "./MessageForward/MessageForward.js";
 import { MessageListContextSymbol } from "./MessageListContext.js";
 import DefaultMessageTimeDivider from "./MessageTimeDivider/MessageTimeDivider.js";
+import ScrollToBottom from "./ScrollToBottom/ScrollToBottom.js";
 import { useMessageListState } from "../../states/MessageListState/MessageListState.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _hoisted_1 = { class: "message-list" };
@@ -33,13 +33,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const distanceToBottom = ref(0);
     const isLoadingHistory = ref(false);
     const scrollContainer = ref(null);
+    const isScrollToBottomVisible = ref(false);
     const storeDistanceToBottom = ref(0);
     const {
       messageList,
       loadMoreOlderMessage,
       activeConversationID,
       isDisableScroll,
-      setIsDisableScroll
+      setIsDisableScroll,
+      setEnableReadReceipt
     } = useMessageListState();
     const { scrollToBottom } = useScroll();
     const enableMessageAggregation = computed(() => props.messageAggregationTime && props.messageAggregationTime > 0);
@@ -59,8 +61,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const MAX_TIME_BETWEEN_MESSAGE_GROUP = props.messageAggregationTime;
       filteredMessageList.forEach((message, index, messages) => {
         const messageTime = message.time;
-        const lastChunk = chunks[chunks.length - 1];
-        const shouldCreateNewChunk = !lastChunk || messageTime - lastChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP || lastChunk.messages[0].from !== message.from || message.isRevoked || index > 0 && messages[index - 1].isRevoked;
+        const lastChunk = chunks.length > 0 ? chunks[chunks.length - 1] : void 0;
+        const lastMessage = index > 0 ? messages[index - 1] : void 0;
+        const shouldCreateNewChunk = !lastChunk || messageTime - lastChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP || lastChunk.messages[0].from !== message.from || message.isRevoked || lastMessage && lastMessage.isRevoked || message.status === "fail" || lastMessage && lastMessage.status === "fail" || message.hasRiskContent || lastMessage && lastMessage.hasRiskContent;
         if (shouldCreateNewChunk) {
           chunks.push({
             timestamp: messageTime,
@@ -80,14 +83,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       distanceToBottom.value = scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
       if (distanceToBottom.value > autoScrollThreshold) {
         setIsDisableScroll(true);
+        isScrollToBottomVisible.value = true;
       }
       if (distanceToBottom.value < autoScrollThreshold) {
         setIsDisableScroll(false);
+        isScrollToBottomVisible.value = false;
       }
     }, 100);
     const initializeMessageList = async () => {
       isFinishFirstRender.value = false;
       setIsDisableScroll(false);
+      isScrollToBottomVisible.value = false;
     };
     const loadMoreHistory = async () => {
       var _a;
@@ -135,6 +141,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     });
+    watch(() => props.enableReadReceipt, (newEnableReadReceipt) => {
+      setEnableReadReceipt(newEnableReadReceipt);
+    }, {
+      immediate: true
+    });
     onMounted(() => {
       if (scrollContainer.value) {
         scrollContainer.value.addEventListener("scroll", handleScroll);
@@ -147,67 +158,69 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1, [
-          createElementVNode("div", {
-            id: "messageScrollList",
-            ref_key: "scrollContainer",
-            ref: scrollContainer,
-            class: "message-list-container"
-          }, [
-            createVNode(unref(ObserverView), {
-              root: "#messageScrollList",
-              rootMargin: "50px 0px 0px 0px",
-              threshold: 0.1,
-              onOnShow: loadMoreHistory
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          id: "messageScrollList",
+          ref_key: "scrollContainer",
+          ref: scrollContainer,
+          class: "message-list-container"
+        }, [
+          createVNode(unref(ObserverView), {
+            root: "#messageScrollList",
+            rootMargin: "50px 0px 0px 0px",
+            threshold: 0.1,
+            onOnShow: loadMoreHistory
+          }, {
+            default: withCtx(() => [..._cache[1] || (_cache[1] = [
+              createElementVNode("div", { id: "loadMore" }, null, -1)
+            ])]),
+            _: 1
+          }),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(messageChunks.value, (chunk, chunkIndex) => {
+            return openBlock(), createBlock(unref(_sfc_main$1), {
+              key: chunk.key,
+              class: normalizeClass(unref(cs)("message-chunk--container"))
             }, {
-              default: withCtx(() => _cache[0] || (_cache[0] = [
-                createElementVNode("div", { id: "loadMore" }, null, -1)
-              ])),
-              _: 1,
-              __: [0]
-            }),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(messageChunks.value, (chunk, chunkIndex) => {
-              return openBlock(), createBlock(unref(_sfc_main$1), {
-                key: chunk.key,
-                class: normalizeClass(unref(cs)("message-chunk--container"))
-              }, {
-                default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(props.MessageTimeDivider || unref(DefaultMessageTimeDivider)), {
-                    "previous-message": chunkIndex > 0 ? messageChunks.value[chunkIndex - 1].messages[0] : void 0,
-                    message: chunk.messages[0]
-                  }, null, 8, ["previous-message", "message"])),
-                  createElementVNode("div", _hoisted_2, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(chunk.messages, (message, messageIndex) => {
-                      return openBlock(), createBlock(resolveDynamicComponent(props.Message || unref(_sfc_main$2)), {
-                        key: message.ID,
-                        message,
-                        alignment: props.alignment,
-                        messageActionList: props.messageActionList,
-                        isAggregated: Boolean(enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1),
-                        "is-first-in-chunk": Boolean(messageIndex === 0),
-                        "is-last-in-chunk": Boolean(messageIndex === chunk.messages.length - 1),
-                        isHiddenMessageAvatar: Boolean(
-                          _ctx.alignment === "two-sided" ? enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1 || message.flow === "out" : enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1
-                        ),
-                        isHiddenMessageMeta: Boolean(
-                          enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1
-                        )
-                      }, null, 8, ["message", "alignment", "messageActionList", "isAggregated", "is-first-in-chunk", "is-last-in-chunk", "isHiddenMessageAvatar", "isHiddenMessageMeta"]);
-                    }), 128))
-                  ])
-                ]),
-                _: 2
-              }, 1032, ["class"]);
-            }), 128))
-          ], 512)
-        ]),
-        createVNode(unref(MessageForward))
-      ], 64);
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(props.MessageTimeDivider || unref(DefaultMessageTimeDivider)), {
+                  previousMessage: chunkIndex > 0 ? messageChunks.value[chunkIndex - 1].messages[0] : void 0,
+                  currentMessage: chunk.messages[0]
+                }, null, 8, ["previousMessage", "currentMessage"])),
+                createElementVNode("div", _hoisted_2, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(chunk.messages, (message, messageIndex) => {
+                    return openBlock(), createBlock(resolveDynamicComponent(props.Message || unref(_sfc_main$2)), {
+                      key: message.ID,
+                      message,
+                      alignment: props.alignment,
+                      messageActionList: props.messageActionList,
+                      isAggregated: Boolean(enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1),
+                      "is-first-in-chunk": Boolean(messageIndex === 0),
+                      "is-last-in-chunk": Boolean(messageIndex === chunk.messages.length - 1),
+                      isHiddenMessageAvatar: Boolean(
+                        _ctx.alignment === "two-sided" ? enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1 || message.flow === "out" : enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1
+                      ),
+                      isHiddenMessageMeta: Boolean(
+                        enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1
+                      )
+                    }, null, 8, ["message", "alignment", "messageActionList", "isAggregated", "is-first-in-chunk", "is-last-in-chunk", "isHiddenMessageAvatar", "isHiddenMessageMeta"]);
+                  }), 128))
+                ])
+              ]),
+              _: 2
+            }, 1032, ["class"]);
+          }), 128))
+        ], 512),
+        createVNode(unref(MessageForward)),
+        isScrollToBottomVisible.value ? (openBlock(), createBlock(unref(ScrollToBottom), {
+          key: 0,
+          class: normalizeClass(unref(cs)("scroll-to-bottom")),
+          onClick: _cache[0] || (_cache[0] = ($event) => unref(scrollToBottom)({ behavior: "smooth" }))
+        }, null, 8, ["class"])) : createCommentVNode("", true)
+      ]);
     };
   }
 });
-const MessageListComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e0764a88"]]);
+const MessageListComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cb526f87"]]);
 export {
   MessageListComponent as default
 };

package/dist/components/MessageList/MessageList.vue.d.ts

@@ -2,7 +2,7 @@ import { Component } from 'vue';
 import { MessageAction } from '../../hooks/useMessageActions';
 import { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
-interface IMessageListProps {
+interface MessageListProps {
     alignment?: 'left' | 'right' | 'two-sided';
     /** max time between message group */
     messageAggregationTime?: number | undefined;
@@ -17,7 +17,7 @@ interface IMessageListProps {
     /** custom message timeline component */
     MessageTimeDivider?: Component | undefined;
 }
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageListProps>, {
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageListProps>, {
     /** props */
     alignment: string;
     messageAggregationTime: number;
@@ -27,7 +27,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     /** custom components */
     Message: undefined;
     MessageTimeDivider: undefined;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageListProps>, {
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageListProps>, {
     /** props */
     alignment: string;
     messageAggregationTime: number;
@@ -39,11 +39,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     MessageTimeDivider: undefined;
 }>>> & Readonly<{}>, {
     filter: (message: MessageModel) => boolean;
+    enableReadReceipt: boolean;
     messageActionList: MessageAction[];
     Message: Component;
     messageAggregationTime: number;
     MessageTimeDivider: Component;
-    enableReadReceipt: boolean;
     alignment: "left" | "right" | "two-sided";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/MessageList/MessageTimeDivider/MessageTimeDivider.js

@@ -5,24 +5,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MessageTimeDivider",
   props: {
     previousMessage: { default: void 0 },
-    message: { default: () => ({}) }
+    currentMessage: { default: () => ({}) }
   },
   setup(__props) {
     const props = __props;
     const shouldShowTimeDivider = computed(() => {
       var _a, _b;
-      if (!((_a = props.message) == null ? void 0 : _a.time)) {
+      if (!((_a = props.currentMessage) == null ? void 0 : _a.time)) {
         return false;
       }
       const prevTime = ((_b = props.previousMessage) == null ? void 0 : _b.time) || 0;
-      const currentTime = props.message.time;
+      const currentTime = props.currentMessage.time;
       return currentTime - prevTime > 5 * 60;
     });
     const renderDefaultContent = () => {
       if (!shouldShowTimeDivider.value) {
         return h(Fragment, null, []);
       }
-      const currentTime = props.message.time;
+      const currentTime = props.currentMessage.time;
       return h("div", { class: "message-time-divider" }, [
         h("span", {}, getTimeStampAuto(currentTime * 1e3))
       ]);
@@ -32,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DefaultMessageTimeDivider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1f3e276c"]]);
+const DefaultMessageTimeDivider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3ccc6b1e"]]);
 export {
   DefaultMessageTimeDivider as default
 };

package/dist/components/MessageList/MessageTimeDivider/MessageTimeDivider.vue.d.ts

@@ -1,18 +1,18 @@
-import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { MessageModel } from '../../../types';
 
-interface IMessageTimeDividerProps {
-    previousMessage: IMessageModel | undefined;
-    message: IMessageModel;
+interface MessageTimeDividerProps {
+    previousMessage: MessageModel | undefined;
+    currentMessage: MessageModel;
 }
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageTimeDividerProps>, {
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageTimeDividerProps>, {
     previousMessage: undefined;
-    message: () => IMessageModel;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageTimeDividerProps>, {
+    currentMessage: () => MessageModel;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageTimeDividerProps>, {
     previousMessage: undefined;
-    message: () => IMessageModel;
+    currentMessage: () => MessageModel;
 }>>> & Readonly<{}>, {
-    message: IMessageModel;
-    previousMessage: IMessageModel | undefined;
+    currentMessage: MessageModel;
+    previousMessage: MessageModel | undefined;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;