tuikit-atomicx-vue3 0.1.0

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

@@ -0,0 +1,58 @@
+import { defineComponent, computed, createBlock, openBlock, unref, normalizeStyle, normalizeClass, withCtx, createElementBlock, Fragment, createTextVNode, createCommentVNode, toDisplayString } from "vue";
+import ChatEngine from "@tencentcloud/chat-uikit-engine";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { c as cs } from "../../../../index-BF6QB9jF.js";
+import View from "../../../../baseComp/View/View.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RecalledMessage",
+  props: {
+    message: {},
+    class: { default: void 0 },
+    style: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const setInputValue = (text) => {
+      console.log("Set input value:", text);
+    };
+    const isTextMessage = computed(() => props.message.type === ChatEngine.TYPES.MSG_TEXT);
+    const isMessageOwner = computed(() => props.message.flow === "out");
+    const otherDisplayName = computed(() => props.message.nick || props.message.from || "");
+    function recallMessageToInput() {
+      const transformedText = props.message.payload.text;
+      setInputValue(transformedText);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(View), {
+        class: normalizeClass(unref(cs)("recalled-message", props.class)),
+        style: normalizeStyle(props.style)
+      }, {
+        default: withCtx(() => [
+          isMessageOwner.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(unref(t)("TUIChat.You")) + toDisplayString(unref(t)("TUIChat.recalled a message")) + " ", 1),
+            isTextMessage.value ? (openBlock(), createBlock(unref(View), {
+              key: 0,
+              role: "button",
+              class: "recalled-message__button",
+              onClick: recallMessageToInput
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("TUIChat.Re-edit")), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createTextVNode(toDisplayString(otherDisplayName.value) + " " + toDisplayString(unref(t)("TUIChat.recalled a message")), 1)
+          ], 64))
+        ]),
+        _: 1
+      }, 8, ["class", "style"]);
+    };
+  }
+});
+const RecalledMessage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dbd9628c"]]);
+export {
+  RecalledMessage as default
+};

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

@@ -0,0 +1,35 @@
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IRecalledMessageProps {
+    message: IMessageModel;
+    class?: string;
+    style?: Record<string, any>;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IRecalledMessageProps>, {
+    class: undefined;
+    style: undefined;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IRecalledMessageProps>, {
+    class: undefined;
+    style: undefined;
+}>>> & Readonly<{}>, {
+    style: Record<string, any>;
+    class: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MessageList/Message/RecalledMessage/index.d.ts

@@ -0,0 +1,3 @@
+import { default as RecalledMessage } from './RecalledMessage.vue';
+
+export { RecalledMessage };

package/dist/components/MessageList/Message/RecalledMessage/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./RecalledMessage.js";
+export {
+  default2 as RecalledMessage
+};

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

@@ -0,0 +1,122 @@
+import { defineComponent, computed, createBlock, openBlock, unref, withCtx, createCommentVNode, createVNode, normalizeClass, createElementBlock, Fragment, createTextVNode, toDisplayString, renderList } from "vue";
+import { TUIStore } from "@tencentcloud/chat-uikit-engine";
+import { useUIKit, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import { c as cs } from "../../../../index-BF6QB9jF.js";
+import View from "../../../../baseComp/View/View.js";
+import { safeJSONParse } from "../../../../utils/json.js";
+import { useScroll } from "../../../../hooks/useScroll.js";
+import { useMessageListState } from "../../../../states/MessageListState/MessageListState.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "text-message__content__text"
+};
+const _hoisted_2 = ["src", "alt"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextMessage",
+  props: {
+    message: { default: () => ({}) }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const { scrollToMessage } = useScroll();
+    const {
+      highlightMessageIDSet,
+      recalledMessageIDSet,
+      highlightMessage
+    } = useMessageListState();
+    const messageContent = computed(() => props.message.getMessageContent());
+    const referencedInfo = computed(() => {
+      var _a, _b, _c, _d;
+      const cloudCustomData = safeJSONParse((_a = props.message) == null ? void 0 : _a.cloudCustomData, {});
+      const content = ((_b = cloudCustomData == null ? void 0 : cloudCustomData.messageReply) == null ? void 0 : _b.messageAbstract) || "";
+      const sender = ((_c = cloudCustomData == null ? void 0 : cloudCustomData.messageReply) == null ? void 0 : _c.messageSender) || "";
+      const messageID = ((_d = cloudCustomData == null ? void 0 : cloudCustomData.messageReply) == null ? void 0 : _d.messageID) || "";
+      return {
+        content,
+        sender,
+        messageID
+      };
+    });
+    const isOriginMessageHasRecalled = computed(() => recalledMessageIDSet.value.has(referencedInfo.value.messageID));
+    const handleReferenceClick = () => {
+      if (referencedInfo.value.messageID) {
+        const { messageID } = referencedInfo.value;
+        const messageModel = TUIStore.getMessageModel(messageID);
+        if (isOriginMessageHasRecalled.value || !messageModel || messageModel.isDeleted || messageModel.isRevoked) {
+          TUIToast.error({
+            message: t("TUIChat.Message has been deleted or recalled")
+          });
+          return;
+        }
+        const isExist = highlightMessageIDSet.value.has(messageID);
+        if (!isExist) {
+          highlightMessage({
+            messageID,
+            duration: 3e3
+          });
+        }
+        scrollToMessage(messageID, {
+          block: "center",
+          skipIfVisible: true,
+          behavior: "instant"
+        }).catch(() => {
+        });
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(View), { class: "text-message" }, {
+        default: withCtx(() => [
+          referencedInfo.value.content ? (openBlock(), createBlock(unref(View), {
+            key: 0,
+            class: normalizeClass(unref(cs)("text-message__reference", {
+              "text-danger": isOriginMessageHasRecalled.value
+            })),
+            onClick: handleReferenceClick
+          }, {
+            default: withCtx(() => [
+              isOriginMessageHasRecalled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createTextVNode(toDisplayString(unref(t)("TUIChat.origin message has been recalled")), 1)
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(unref(View), { class: "text-message__reference__header" }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(referencedInfo.value.sender), 1)
+                  ]),
+                  _: 1
+                }),
+                createVNode(unref(View), { class: "text-message__reference__content" }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(referencedInfo.value.content), 1)
+                  ]),
+                  _: 1
+                })
+              ], 64))
+            ]),
+            _: 1
+          }, 8, ["class"])) : createCommentVNode("", true),
+          createVNode(unref(View), { class: "text-message__content" }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(messageContent.value.text, (item, index) => {
+                return openBlock(), createElementBlock(Fragment, { key: index }, [
+                  item.name === "text" ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(item.text), 1)) : (openBlock(), createElementBlock("img", {
+                    key: 1,
+                    class: "text-message__content__img",
+                    src: item.src,
+                    alt: item.emojiKey || ""
+                  }, null, 8, _hoisted_2))
+                ], 64);
+              }), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const TextMessage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2884d10b"]]);
+export {
+  TextMessage as default
+};

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

@@ -0,0 +1,31 @@
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    message: IMessageModel;
+}>, {
+    message: () => IMessageModel;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    message: IMessageModel;
+}>, {
+    message: () => IMessageModel;
+}>>> & Readonly<{}>, {
+    message: IMessageModel;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MessageList/Message/TextMessage/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TextMessage } from './TextMessage.vue';
+
+export { TextMessage };

package/dist/components/MessageList/Message/TextMessage/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./TextMessage.js";
+export {
+  default2 as TextMessage
+};

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

@@ -0,0 +1,107 @@
+import { defineComponent, ref, computed, onMounted, onUnmounted, watch, createBlock, openBlock, unref, normalizeStyle, normalizeClass, withCtx, createElementBlock, createCommentVNode, createElementVNode } from "vue";
+import { c as cs } from "../../../../index-BF6QB9jF.js";
+import View from "../../../../baseComp/View/View.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "video-placeholder"
+};
+const _hoisted_2 = ["src", "poster"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VideoMessage",
+  props: {
+    message: { default: () => ({}) },
+    isLastInChunk: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const messageContent = props.message.getMessageContent();
+    const windowResize = ref(false);
+    const loaded = ref(false);
+    const naturalSize = ref(
+      messageContent.snapshotWidth && messageContent.snapshotHeight ? {
+        height: messageContent.snapshotHeight,
+        aspectRatio: messageContent.snapshotWidth / messageContent.snapshotHeight
+      } : null
+    );
+    const isMessageOwner = computed(() => props.message.flow === "out");
+    const displaySize = computed(() => {
+      const MAX_HEIGHT = 400;
+      const DEFAULT_RATIO = 3 / 4;
+      if (!naturalSize.value) {
+        return {
+          height: MAX_HEIGHT,
+          aspectRatio: DEFAULT_RATIO
+        };
+      }
+      const { aspectRatio } = naturalSize.value;
+      if (aspectRatio > 1) {
+        return {
+          aspectRatio,
+          height: 200
+        };
+      }
+      return {
+        aspectRatio,
+        height: MAX_HEIGHT
+      };
+    });
+    const onResize = () => {
+      windowResize.value = true;
+    };
+    const onVideoLoad = (e) => {
+      const video = e.target;
+      naturalSize.value = {
+        aspectRatio: video.videoWidth / video.videoHeight,
+        height: video.videoHeight
+      };
+      loaded.value = true;
+    };
+    onMounted(() => {
+      window.addEventListener("resize", onResize);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", onResize);
+    });
+    watch(() => props.message.ID, () => {
+      loaded.value = false;
+      naturalSize.value = messageContent.snapshotWidth && messageContent.snapshotHeight ? {
+        height: messageContent.snapshotHeight,
+        aspectRatio: messageContent.snapshotWidth / messageContent.snapshotHeight
+      } : null;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(View), {
+        class: normalizeClass(unref(cs)("video-message", {
+          "video-message--last--self": isMessageOwner.value && _ctx.isLastInChunk,
+          "video-message--last--other": !isMessageOwner.value && _ctx.isLastInChunk,
+          "video-message--loaded": loaded.value
+        })),
+        style: normalizeStyle({
+          minHeight: windowResize.value ? "auto" : `${displaySize.value.height}px`,
+          maxHeight: `${displaySize.value.height}px`,
+          aspectRatio: naturalSize.value ? `${displaySize.value.aspectRatio}` : "auto",
+          width: !loaded.value ? `${displaySize.value.height * displaySize.value.aspectRatio}px` : void 0
+        })
+      }, {
+        default: withCtx(() => [
+          !loaded.value ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true),
+          createElementVNode("video", {
+            class: "video-message__video",
+            src: unref(messageContent).url,
+            poster: unref(messageContent).snapshotUrl,
+            controls: "",
+            muted: "",
+            autoplay: false,
+            onLoadedmetadata: onVideoLoad
+          }, null, 40, _hoisted_2)
+        ]),
+        _: 1
+      }, 8, ["class", "style"]);
+    };
+  }
+});
+const VideoMessage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c5688c84"]]);
+export {
+  VideoMessage as default
+};

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

@@ -0,0 +1,34 @@
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IVideoMessageProps {
+    message: IMessageModel;
+    isLastInChunk?: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IVideoMessageProps>, {
+    isLastInChunk: boolean;
+    message: () => IMessageModel;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IVideoMessageProps>, {
+    isLastInChunk: boolean;
+    message: () => IMessageModel;
+}>>> & Readonly<{}>, {
+    message: IMessageModel;
+    isLastInChunk: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MessageList/Message/VideoMessage/index.d.ts

@@ -0,0 +1,3 @@
+import { default as VideoMessage } from './VideoMessage.vue';
+
+export { VideoMessage };

package/dist/components/MessageList/Message/VideoMessage/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./VideoMessage.js";
+export {
+  default2 as VideoMessage
+};

package/dist/components/MessageList/Message/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Message } from './Message.vue';
+
+export { Message, };

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

@@ -0,0 +1,4 @@
+import { _ } from "../../../Message.vue_vue_type_script_setup_true_lang-BV0PxtjX.js";
+export {
+  _ as Message
+};

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

@@ -0,0 +1,62 @@
+import { defineComponent, computed, createBlock, openBlock, unref, normalizeClass, withCtx, createVNode, createCommentVNode, createTextVNode, toDisplayString } from "vue";
+import { IconCheckSm } from "@tencentcloud/uikit-base-component-vue3";
+import { c as cs } from "../../../index-BF6QB9jF.js";
+import View from "../../../baseComp/View/View.js";
+import { useConversationListState } from "../../../states/ConversationListState/ConversationListState.js";
+import Avatar from "../../Avatar/Avatar.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ForwardListItem",
+  props: {
+    conversationID: {},
+    isSelected: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const { conversationList } = useConversationListState();
+    const conversation = computed(() => {
+      var _a;
+      return (_a = conversationList.value) == null ? void 0 : _a.find((_conversation) => _conversation.conversationID === props.conversationID);
+    });
+    const conversationName = computed(() => {
+      var _a, _b;
+      return ((_a = conversation.value) == null ? void 0 : _a.getShowName()) || ((_b = conversation.value) == null ? void 0 : _b.conversationID) || "";
+    });
+    const conversationAvatar = computed(() => {
+      var _a;
+      return (_a = conversation.value) == null ? void 0 : _a.getAvatar();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(View), {
+        class: normalizeClass(unref(cs)("forward-list-item", { "forward-list-item--selected": props.isSelected }))
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Avatar), {
+            src: conversationAvatar.value,
+            style: { marginRight: "8px" }
+          }, null, 8, ["src"]),
+          createVNode(unref(View), { class: "forward-item__info" }, {
+            default: withCtx(() => [
+              createVNode(unref(View), { class: "forward-item__name" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(conversationName.value), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          props.isSelected ? (openBlock(), createBlock(unref(IconCheckSm), {
+            key: 0,
+            class: "forward-item__checkbox"
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class"]);
+    };
+  }
+});
+const ForwardListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-af9396c0"]]);
+export {
+  ForwardListItem as default
+};

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

@@ -0,0 +1,17 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    conversationID: string;
+    isSelected: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    conversationID: string;
+    isSelected: boolean;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -0,0 +1,134 @@
+import { defineComponent, ref, computed, createBlock, openBlock, unref, withCtx, createVNode, createElementVNode, toDisplayString, createTextVNode } from "vue";
+import ChatEngine 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 from "../../../baseComp/View/View.js";
+import { useConversationListState } from "../../../states/ConversationListState/ConversationListState.js";
+import { useMessageActionState } from "../../../states/MessageActionState/MessageActionState.js";
+import UserPicker from "../../UserPicker/UserPicker.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "forward-header__title" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MessageForward",
+  setup(__props) {
+    const { t } = useUIKit();
+    const {
+      forwardMessageIDList,
+      forwardConversationIDList,
+      isForwardMessageSelectionDone,
+      forwardMessage
+    } = useMessageActionState();
+    const {
+      conversationList
+    } = useConversationListState();
+    const userPickerRef = ref(null);
+    const forwardListDataSource = computed(() => {
+      if (!conversationList.value) {
+        return [];
+      }
+      return conversationList.value.map((conversation) => {
+        const { type, remark, groupProfile, userProfile } = conversation;
+        const userPickerRow = {
+          key: conversation.conversationID,
+          label: "",
+          avatarUrl: conversation.getAvatar() || ""
+        };
+        if (type === ChatEngine.TYPES.CONV_C2C) {
+          const userDisplayName = remark || (userProfile == null ? void 0 : userProfile.nick) || (userProfile == null ? void 0 : userProfile.userID);
+          userPickerRow.label = userDisplayName || "";
+        }
+        if (type === ChatEngine.TYPES.CONV_GROUP) {
+          const groupDisplayName = (groupProfile == null ? void 0 : groupProfile.name) || (groupProfile == null ? void 0 : groupProfile.groupID);
+          userPickerRow.label = groupDisplayName || "";
+        }
+        return userPickerRow;
+      });
+    });
+    const isDisableConfirm = ref(true);
+    function handleSelectedChange(selectedItems) {
+      isDisableConfirm.value = selectedItems.length === 0;
+      forwardConversationIDList.value = selectedItems.map((item) => item.key);
+    }
+    function forward() {
+      var _a;
+      if (!isForwardMessageSelectionDone.value) {
+        return;
+      }
+      const selectedConversationList = (_a = userPickerRef.value) == null ? void 0 : _a.getSelectedItems();
+      if (selectedConversationList && selectedConversationList.length > 0) {
+        forwardMessage({
+          messageIDList: forwardMessageIDList.value,
+          conversationIDList: selectedConversationList.map((item) => item.key),
+          isMergeForward: false
+        });
+        closeMessageForward();
+      }
+    }
+    function closeMessageForward() {
+      forwardMessageIDList.value = [];
+      forwardConversationIDList.value = [];
+      isForwardMessageSelectionDone.value = false;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Modal), {
+        open: unref(isForwardMessageSelectionDone),
+        "content-class": "forward-container",
+        onOnClose: closeMessageForward
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(View), {
+            class: "forward-header",
+            dir: "row"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(IconClose), {
+                size: "28",
+                class: "forward-header__close",
+                onClick: closeMessageForward
+              }),
+              createElementVNode("span", _hoisted_1, toDisplayString(unref(t)("TUIChat.Forward")), 1),
+              _cache[0] || (_cache[0] = createElementVNode("div", { class: "forward-header__placeholder" }, null, -1))
+            ]),
+            _: 1,
+            __: [0]
+          }),
+          createVNode(unref(UserPicker), {
+            ref_key: "userPickerRef",
+            ref: userPickerRef,
+            "display-mode": "list",
+            "data-source": forwardListDataSource.value,
+            "max-count": 10,
+            "on-selected-change": handleSelectedChange,
+            "on-max-count-exceed": () => {
+              unref(TUIToast).error({
+                message: unref(t)("TUIChat.Max Count Exceed")
+              });
+            }
+          }, null, 8, ["data-source", "on-max-count-exceed"]),
+          createVNode(unref(View), { class: "forward-footer" }, {
+            default: withCtx(() => [
+              createVNode(unref(TUIButton), {
+                shape: "rect",
+                color: "blue",
+                type: "primary",
+                disabled: isDisableConfirm.value,
+                onClick: forward
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("TUIChat.Forward")), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["open"]);
+    };
+  }
+});
+const MessageForward = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9b5e8b75"]]);
+export {
+  MessageForward as default
+};

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

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/MessageList/MessageForward/index.d.ts

@@ -0,0 +1,3 @@
+import { default as MessageForward } from './MessageForward.vue';
+
+export { MessageForward };

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

@@ -0,0 +1,4 @@
+import { default as default2 } from "./MessageForward.js";
+export {
+  default2 as MessageForward
+};