tuikit-atomicx-vue3 0.1.1 → 3.3.0-beta.3

package/dist/components/MessageInput/index.js

@@ -1,129 +1,27 @@
 import { AttachmentPicker as _sfc_main$1 } from "./AttachmentPicker/index.js";
-import { _ as _sfc_main$5 } from "../../FilePicker.vue_vue_type_script_setup_true_lang-CaSj3Gh_.js";
-import { _ as _sfc_main$6 } from "../../ImagePicker.vue_vue_type_script_setup_true_lang-CrzGMmrh.js";
-import { _ as _sfc_main$7 } from "../../VideoPicker.vue_vue_type_script_setup_true_lang-DTv6TJKr.js";
+import { _ as _sfc_main$2 } from "../../FilePicker.vue_vue_type_script_setup_true_lang-CaSj3Gh_.js";
+import { _ as _sfc_main$3 } from "../../ImagePicker.vue_vue_type_script_setup_true_lang-CrzGMmrh.js";
+import { _ as _sfc_main$4 } from "../../VideoPicker.vue_vue_type_script_setup_true_lang-DTv6TJKr.js";
 import EmojiPickerComponent from "./EmojiPicker/EmojiPicker.js";
-import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, createVNode, createCommentVNode } from "vue";
-import { QuotedMessagePreview as _sfc_main$2 } from "./QuotedMessagePreview/index.js";
-import { SendButton as _sfc_main$4 } from "./SendButton/index.js";
-import { TextEditor as _sfc_main$3 } from "./TextEditor/index.js";
-import { useMessageInputState } from "../../states/MessageInputState/MessageInputState.js";
-const styles = {
-  "message-input": "_message-input_1p3x8_1",
-  "message-input__toolbar": "_message-input__toolbar_1p3x8_11",
-  "message-input__wrapper": "_message-input__wrapper_1p3x8_18",
-  "message-input__leftInline": "_message-input__leftInline_1p3x8_23",
-  "message-input__rightInline": "_message-input__rightInline_1p3x8_23",
-  "message-input__actions": "_message-input__actions_1p3x8_27",
-  "message-input__footerToolbar": "_message-input__footerToolbar_1p3x8_33"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "MessageInput",
-  props: {
-    autoFocus: { type: Boolean, default: true },
-    disabled: { type: Boolean, default: false },
-    hideSendButton: { type: Boolean, default: false },
-    placeholder: { default: "" },
-    className: { default: "" },
-    style: { default: () => ({}) },
-    attachmentPickerMode: { default: "collapsed" },
-    actions: { default: () => ["EmojiPicker", "ImagePicker", "FilePicker", "VideoPicker"] },
-    slots: {}
-  },
-  setup(__props) {
-    const DEFAULT_ACTIONS = [
-      { key: "EmojiPicker", component: EmojiPickerComponent },
-      { key: "AttachmentPicker", component: _sfc_main$1 },
-      { key: "FilePicker", component: _sfc_main$5 },
-      { key: "ImagePicker", component: _sfc_main$6 },
-      { key: "VideoPicker", component: _sfc_main$7 }
-    ];
-    const props = __props;
-    const { inputRawValue, setContent, sendMessage } = useMessageInputState();
-    const pickProps = (sourceObject, propertyKeys) => Object.fromEntries(
-      propertyKeys.map((key) => [key, sourceObject[key]]).filter(([, value]) => value !== void 0)
-    );
-    const resolveStringAction = (actionKey) => {
-      const { component = () => null } = DEFAULT_ACTIONS.find(({ key }) => key === actionKey) ?? {};
-      return { Component: component, props: {} };
-    };
-    const resolveObjectAction = (action) => {
-      var _a;
-      const { key: actionKey, component, ...restProps } = action;
-      const defaultComponent = ((_a = DEFAULT_ACTIONS.find(({ key }) => key === actionKey)) == null ? void 0 : _a.component) ?? (() => null);
-      return {
-        Component: component ?? defaultComponent,
-        props: pickProps(restProps, ["label", "className", "style", "iconSize"])
-      };
-    };
-    const actionList = computed(
-      () => props.actions.map((action) => typeof action === "string" ? resolveStringAction(action) : resolveObjectAction(action)).filter(({ Component }) => Component !== null)
-    );
-    const sendInputMessage = () => {
-      if (inputRawValue.value) {
-        sendMessage();
-        setContent("");
-      }
-    };
-    return (_ctx, _cache) => {
-      var _a, _b;
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([unref(styles)["message-input"], _ctx.className]),
-        style: normalizeStyle(_ctx.style)
-      }, [
-        renderSlot(_ctx.$slots, "headerToolbar", {}, () => [
-          createElementVNode("div", {
-            class: normalizeClass(unref(styles)["message-input__toolbar"])
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(actionList.value, (action, index) => {
-              return openBlock(), createBlock(resolveDynamicComponent(action.Component), mergeProps({ key: index }, { ref_for: true }, { ...action.props, ...action.Component === unref(_sfc_main$1) ? { attachmentPickerMode: _ctx.attachmentPickerMode } : {} }), null, 16);
-            }), 128))
-          ], 2)
-        ]),
-        createElementVNode("div", {
-          class: normalizeClass(unref(styles)["message-input__wrapper"])
-        }, [
-          createVNode(unref(_sfc_main$2)),
-          createElementVNode("div", {
-            class: normalizeClass(unref(styles)["message-input__leftInline"])
-          }, [
-            renderSlot(_ctx.$slots, "leftInline")
-          ], 2),
-          createVNode(unref(_sfc_main$3), {
-            autoFocus: _ctx.autoFocus,
-            disabled: _ctx.disabled,
-            placeholder: _ctx.placeholder,
-            prefix: (_a = _ctx.slots) == null ? void 0 : _a.inputPrefix,
-            suffix: (_b = _ctx.slots) == null ? void 0 : _b.inputSuffix
-          }, null, 8, ["autoFocus", "disabled", "placeholder", "prefix", "suffix"]),
-          createElementVNode("div", {
-            class: normalizeClass(unref(styles)["message-input__rightInline"])
-          }, [
-            renderSlot(_ctx.$slots, "rightInline")
-          ], 2)
-        ], 2),
-        renderSlot(_ctx.$slots, "footerToolbar", {}, () => [
-          createElementVNode("div", {
-            class: normalizeClass(unref(styles)["message-input__footerToolbar"])
-          }, [
-            !_ctx.hideSendButton ? (openBlock(), createBlock(unref(_sfc_main$4), {
-              key: 0,
-              class: normalizeClass(unref(styles)["message-input__send-button"]),
-              disabled: !unref(inputRawValue),
-              onClick: sendInputMessage
-            }, null, 8, ["class", "disabled"])) : createCommentVNode("", true)
-          ], 2)
-        ])
-      ], 6);
-    };
-  }
-});
+import { TextEditor as _sfc_main$5 } from "./TextEditor/index.js";
+import { _ as _sfc_main } from "../../MessageInput.vue_vue_type_script_setup_true_lang-XRL7A5Gj.js";
+import { addI18n } from "../../i18n/index.js";
+import { resources } from "./i18n/index.js";
+addI18n("en-US", { translation: { MessageInput: resources["en-US"] } });
+addI18n("zh-CN", { translation: { MessageInput: resources["zh-CN"] } });
+const AttachmentPicker = _sfc_main$1;
+const FilePicker = _sfc_main$2;
+const ImagePicker = _sfc_main$3;
+const VideoPicker = _sfc_main$4;
+const EmojiPicker = EmojiPickerComponent;
+const TextEditor = _sfc_main$5;
+const MessageInput = _sfc_main;
 export {
-  _sfc_main$1 as AttachmentPicker,
-  EmojiPickerComponent as EmojiPicker,
-  _sfc_main$5 as FilePicker,
-  _sfc_main$6 as ImagePicker,
-  _sfc_main as MessageInput,
-  _sfc_main$3 as TextEditor,
-  _sfc_main$7 as VideoPicker
+  AttachmentPicker,
+  EmojiPicker,
+  FilePicker,
+  ImagePicker,
+  MessageInput,
+  TextEditor,
+  VideoPicker
 };

package/dist/components/MessageList/Message/AudioMessage/PlayButton.js

@@ -41,7 +41,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["play-button", { "play-button--playing": _ctx.isPlaying }]),
         onClick
       }, [
-        _ctx.isPlaying ? (openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+        _ctx.isPlaying ? (openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
           createElementVNode("rect", {
             x: "6",
             y: "4",
@@ -54,9 +54,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             width: "4",
             height: "16"
           }, null, -1)
-        ]))) : (openBlock(), createElementBlock("svg", _hoisted_2, _cache[1] || (_cache[1] = [
+        ])])) : (openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[1] || (_cache[1] = [
           createElementVNode("polygon", { points: "5 3 19 12 5 21 5 3" }, null, -1)
-        ])))
+        ])]))
       ], 2);
     };
   }

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

@@ -169,10 +169,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         })
       }, [
         loadingState.value === "loading" ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true),
-        loadingState.value === "error" ? (openBlock(), createElementBlock("div", _hoisted_2, _cache[0] || (_cache[0] = [
+        loadingState.value === "error" ? (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[0] || (_cache[0] = [
           createElementVNode("div", { class: "image-error__icon" }, null, -1),
           createElementVNode("span", { class: "image-error__text" }, "Load failed", -1)
-        ]))) : createCommentVNode("", true),
+        ])])) : createCommentVNode("", true),
         createElementVNode("img", {
           ref_key: "imageRef",
           ref: imageRef,

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";
@@ -1674,7 +1674,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 +1698,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-2fb5c178"]]);
 export {
   MessageActionDropdown as default
 };

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

@@ -1,8 +1,8 @@
 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;
+    message: MessageModel;
     messageActionList?: MessageAction[] | undefined;
 }
 declare function __VLS_template(): {
@@ -10,12 +10,12 @@ declare function __VLS_template(): {
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageActionDropdownProps>, {
     messageActionList: undefined;
-    message: () => IMessageModel;
+    message: () => MessageModel;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageActionDropdownProps>, {
     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,6 +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/index.js";
 import UserPicker from "../../UserPicker/UserPicker.js";
 import { useConversationListState } from "../../../states/ConversationListState/ConversationListState.js";
 import { useMessageActionState } from "../../../states/MessageActionState/MessageActionState.js";
@@ -89,8 +90,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 +108,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 +128,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-913cb71e"]]);
 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,6 +33,7 @@ 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,
@@ -80,14 +81,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;
@@ -147,67 +151,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)), {
+                  "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)),
+        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-7ced8e4a"]]);
 export {
   MessageListComponent as default
 };