@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.2

package/es/components/Chat/ChatKit/components/TUIChat/message-list/link/index.d.ts

@@ -0,0 +1,23 @@
+declare const Link: {
+    product: {
+        label: string;
+        url: string;
+    };
+    customMessage: {
+        label: string;
+        url: string;
+    };
+    complaint: {
+        label: string;
+        url: string;
+    };
+    implement: {
+        label: string;
+        url: string;
+    };
+    purchase: {
+        label: string;
+        url: string;
+    };
+};
+export default Link;

package/es/components/Chat/ChatKit/components/TUIChat/message-list/link/index.mjs

@@ -0,0 +1,25 @@
+const Link = {
+  product: {
+    label: "产品文档",
+    url: "https://cloud.tencent.com/document/product/269/1499#.E7.BE.A4.E7.BB.84.E5.8A.9F.E8.83.BD"
+  },
+  customMessage: {
+    label: "自定义消息",
+    url: "https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#createCustomMessage"
+  },
+  complaint: {
+    label: "点此投诉",
+    url: "https://cloud.tencent.com/apply/p/xc3oaubi98g"
+  },
+  implement: {
+    label: "集成TUICallKit",
+    url: "https://cloud.tencent.com/document/product/269/79861"
+  },
+  purchase: {
+    label: "开通腾讯实时音视频服务",
+    url: "https://cloud.tencent.com/document/product/1640/79968"
+  }
+};
+export {
+  Link as default
+};

package/es/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-audio.vue.d.ts

@@ -0,0 +1,27 @@
+declare const _default: import('vue').DefineComponent<{
+    content: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    messageItem: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    setAudioPlayed: (messageID: string) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    content: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    messageItem: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & {
+    onSetAudioPlayed?: ((messageID: string) => any) | undefined;
+}, {
+    content: Record<string, any>;
+    messageItem: Record<string, any>;
+}, {}>;
+export default _default;

package/es/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-audio.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./message-audio.vue2.mjs";
+/* empty css                    */
+import _export_sfc from "../../../../../../../_virtual/_plugin-vue_export-helper.mjs";
+const MessageAudio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7c9f5c5e"]]);
+export {
+  MessageAudio as default
+};

package/es/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-audio.vue2.mjs

@@ -0,0 +1,108 @@
+import { defineComponent, ref, onMounted, onUnmounted, watchEffect, openBlock, createElementBlock, normalizeClass, unref, withModifiers, createElementVNode, createVNode, normalizeStyle, toDisplayString } from "vue";
+import "../../../../adapter-vue.mjs";
+import Icon from "../../../common/Icon.vue.mjs";
+import audioIcon from "../../../../assets/icon/msg-audio.svg.mjs";
+import { isMobile } from "../../../../utils/env.mjs";
+const _hoisted_1 = { class: "audio-icon-container" };
+const _hoisted_2 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "message-audio",
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    },
+    messageItem: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["setAudioPlayed"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const data = ref();
+    const message = ref();
+    const isAudioPlaying = ref();
+    const audioRef = ref();
+    onMounted(() => {
+      if (audioRef.value) {
+        audioRef.value.addEventListener("ended", onAudioEnded);
+        audioRef.value.addEventListener("pause", onAudioPaused);
+      }
+    });
+    onUnmounted(() => {
+      if (audioRef.value) {
+        audioRef.value.removeEventListener("ended", onAudioEnded);
+        audioRef.value.removeEventListener("pause", onAudioPaused);
+      }
+    });
+    watchEffect(() => {
+      message.value = props.messageItem;
+      data.value = props.content;
+    });
+    function play() {
+      if (message.value.hasRiskContent || !audioRef.value) {
+        return;
+      }
+      if (!audioRef.value.paused) {
+        audioRef.value.pause();
+        audioRef.value.currentTime = 0;
+        isAudioPlaying.value = false;
+        return;
+      }
+      const audios = document.getElementsByTagName("audio");
+      Array.from(audios).forEach((audio) => {
+        if (!audio.paused) {
+          audio.pause();
+          audio.currentTime = 0;
+        }
+      });
+      audioRef.value.play();
+      isAudioPlaying.value = true;
+      if (message.value.flow === "in") {
+        emits("setAudioPlayed", message.value.ID);
+      }
+    }
+    function onAudioEnded() {
+      isAudioPlaying.value = false;
+    }
+    function onAudioPaused() {
+      isAudioPlaying.value = false;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["message-audio", [
+          unref(isMobile) && "message-audio-h5",
+          unref(message).flow === "out" && "reserve",
+          unref(message).hasRiskContent && "disable"
+        ]]),
+        onClick: withModifiers(play, ["stop"])
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", {
+            class: normalizeClass({ "mask": true, "play": unref(isAudioPlaying) })
+          }, null, 2),
+          createVNode(Icon, {
+            class: "icon",
+            width: "16px",
+            height: "20px",
+            file: unref(audioIcon)
+          }, null, 8, ["file"])
+        ]),
+        createElementVNode("span", {
+          class: "time",
+          style: normalizeStyle({ width: `${unref(data).second * 10 + 20}px` })
+        }, toDisplayString(unref(data).second || 1) + ' " ', 5),
+        createElementVNode("audio", {
+          ref_key: "audioRef",
+          ref: audioRef,
+          src: unref(data).url
+        }, null, 8, _hoisted_2)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-bubble.vue.d.ts

@@ -0,0 +1,82 @@
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IProps {
+    messageItem: IMessageModel;
+    content?: any;
+    classNameList?: string[];
+    blinkMessageIDList?: string[];
+    isMultipleSelectMode?: boolean;
+    isAudioPlayed?: boolean | undefined;
+    multipleSelectedMessageIDList?: string[];
+}
+declare function __VLS_template(): {
+    messageElement?(_: {}): any;
+    TUIEmojiPlugin?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
+    messageItem: () => IMessageModel;
+    content: () => {};
+    isAudioPlayed: boolean;
+    blinkMessageIDList: () => never[];
+    classNameList: () => never[];
+    isMultipleSelectMode: boolean;
+    multipleSelectedMessageIDList: () => never[];
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    resendMessage: () => void;
+    blinkMessage: (messageID: string) => void;
+    setReadReceiptPanelVisible: (visible: boolean, message?: IMessageModel | undefined) => void;
+    changeSelectMessageIDList: (options: {
+        type: "add" | "remove" | "clearAll";
+        messageID: string;
+    }) => void;
+    scrollTo: (scrollHeight: number) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
+    messageItem: () => IMessageModel;
+    content: () => {};
+    isAudioPlayed: boolean;
+    blinkMessageIDList: () => never[];
+    classNameList: () => never[];
+    isMultipleSelectMode: boolean;
+    multipleSelectedMessageIDList: () => never[];
+}>>> & {
+    onScrollTo?: ((scrollHeight: number) => any) | undefined;
+    onBlinkMessage?: ((messageID: string) => any) | undefined;
+    onResendMessage?: (() => any) | undefined;
+    onSetReadReceiptPanelVisible?: ((visible: boolean, message?: IMessageModel | undefined) => any) | undefined;
+    onChangeSelectMessageIDList?: ((options: {
+        type: "add" | "remove" | "clearAll";
+        messageID: string;
+    }) => any) | undefined;
+}, {
+    content: any;
+    messageItem: IMessageModel;
+    classNameList: string[];
+    blinkMessageIDList: string[];
+    isMultipleSelectMode: boolean;
+    isAudioPlayed: boolean;
+    multipleSelectedMessageIDList: string[];
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-bubble.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./message-bubble.vue2.mjs";
+/* empty css                     */
+import _export_sfc from "../../../../../../../_virtual/_plugin-vue_export-helper.mjs";
+const MessageBubble = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1883bd8e"]]);
+export {
+  MessageBubble as default
+};

package/es/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-bubble.vue2.mjs

@@ -0,0 +1,213 @@
+import { defineComponent, toRefs, computed, openBlock, createElementBlock, normalizeClass, unref, createBlock, createCommentVNode, createElementVNode, createVNode, withModifiers, toDisplayString, Fragment, renderSlot } from "vue";
+import "../../../../adapter-vue.mjs";
+import TUIChatEngine, { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
+import Icon from "../../../common/Icon.vue.mjs";
+import ReadStatus from "./read-status/index.vue.mjs";
+import MessageQuote from "./message-quote/index.vue.mjs";
+import Avatar from "../../../common/Avatar/index.vue.mjs";
+import MessageTranslate from "./message-translate/index.vue.mjs";
+import MessageConvert from "./message-convert/index.vue.mjs";
+import RadioSelect from "../../../common/RadioSelect/index.vue.mjs";
+import loadingIcon from "../../../../assets/icon/loading.png.mjs";
+import { shallowCopyMessage } from "../../utils/utils.mjs";
+import { isPC } from "../../../../utils/env.mjs";
+const _hoisted_1 = { class: "message-bubble-content" };
+const _hoisted_2 = {
+  key: 0,
+  class: "message-body-nick-name"
+};
+const _hoisted_3 = { class: "content-main" };
+const _hoisted_4 = {
+  key: 0,
+  class: "content-has-risk-tips"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "audio-unplay-mark"
+};
+const _hoisted_6 = { class: "message-bubble-extra-content" };
+const riskImageReplaceUrl = "https://web.sdk.qcloud.com/component/TUIKit/assets/has_risk_default.png";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "message-bubble",
+  props: {
+    messageItem: { default: () => ({}) },
+    content: { default: () => ({}) },
+    classNameList: { default: () => [] },
+    blinkMessageIDList: { default: () => [] },
+    isMultipleSelectMode: { type: Boolean, default: false },
+    isAudioPlayed: { type: Boolean, default: false },
+    multipleSelectedMessageIDList: { default: () => [] }
+  },
+  emits: ["resendMessage", "blinkMessage", "setReadReceiptPanelVisible", "changeSelectMessageIDList", "scrollTo"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const TYPES = TUIChatEngine.TYPES;
+    const needLoadingIconMessageType = [
+      TYPES.MSG_LOCATION,
+      TYPES.MSG_TEXT,
+      TYPES.MSG_CUSTOM,
+      TYPES.MSG_MERGER,
+      TYPES.MSG_FACE
+    ];
+    const { blinkMessageIDList, messageItem: message } = toRefs(props);
+    const isMultipleSelected = computed(() => {
+      return props.multipleSelectedMessageIDList.includes(message.value.ID);
+    });
+    const isDisplayUnplayMark = computed(() => {
+      return message.value.flow === "in" && message.value.status === "success" && message.value.type === TYPES.MSG_AUDIO && !props.isAudioPlayed;
+    });
+    const containerClassNameList = computed(() => {
+      return [
+        "message-bubble",
+        isMultipleSelected.value ? "multiple-selected" : "",
+        ...props.classNameList
+      ];
+    });
+    const hasEmojiReaction = computed(() => {
+      var _a;
+      return (_a = message.value) == null ? void 0 : _a.reactionList.some((item) => item.totalUserCount !== 0);
+    });
+    const isNoPadding = computed(() => {
+      return !hasEmojiReaction.value && [TYPES.MSG_IMAGE, TYPES.MSG_VIDEO, TYPES.MSG_MERGER].includes(message.value.type);
+    });
+    const riskContentText = computed(() => {
+      let content = TUITranslateService.t("TUIChat.涉及敏感内容") + ", ";
+      if (message.value.flow === "out") {
+        content += TUITranslateService.t("TUIChat.发送失败");
+      } else {
+        content += TUITranslateService.t(
+          message.value.type === TYPES.MSG_AUDIO ? "TUIChat.无法收听" : "TUIChat.无法查看"
+        );
+      }
+      return content;
+    });
+    const isBlink = computed(() => {
+      var _a, _b;
+      if ((_a = message.value) == null ? void 0 : _a.ID) {
+        return (_b = blinkMessageIDList == null ? void 0 : blinkMessageIDList.value) == null ? void 0 : _b.includes(message.value.ID);
+      }
+      return false;
+    });
+    function toggleMultipleSelect(isSelected) {
+      emits("changeSelectMessageIDList", {
+        type: isSelected ? "add" : "remove",
+        messageID: message.value.ID
+      });
+    }
+    function resendMessage() {
+      var _a;
+      if (!((_a = message.value) == null ? void 0 : _a.hasRiskContent)) {
+        emits("resendMessage");
+      }
+    }
+    function blinkMessage(messageID) {
+      emits("blinkMessage", messageID);
+    }
+    function scrollTo(scrollHeight) {
+      emits("scrollTo", scrollHeight);
+    }
+    function openReadUserPanel() {
+      emits("setReadReceiptPanelVisible", true, message.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(containerClassNameList))
+      }, [
+        props.isMultipleSelectMode ? (openBlock(), createBlock(RadioSelect, {
+          key: 0,
+          class: "multiple-select-radio",
+          isSelected: unref(isMultipleSelected),
+          onOnChange: toggleMultipleSelect
+        }, null, 8, ["isSelected"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass({
+            "control-reverse": unref(message).flow === "out"
+          })
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", {
+              class: normalizeClass(["message-bubble-main-content", [unref(message).flow === "in" ? "" : "reverse"]])
+            }, [
+              createVNode(Avatar, {
+                useSkeletonAnimation: "",
+                url: unref(message).avatar || ""
+              }, null, 8, ["url"]),
+              createElementVNode("main", {
+                class: "message-body",
+                onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                }, ["stop"]))
+              }, [
+                unref(message).flow === "in" && unref(message).conversationType === "GROUP" ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(props.content.showName), 1)) : createCommentVNode("", true),
+                createElementVNode("div", {
+                  class: normalizeClass(["message-body-main", unref(message).flow === "out" && "message-body-main-reverse"])
+                }, [
+                  createElementVNode("div", {
+                    class: normalizeClass([
+                      "blink",
+                      "message-body-content",
+                      unref(message).flow === "out" ? "content-out" : "content-in",
+                      unref(message).hasRiskContent && "content-has-risk",
+                      unref(isNoPadding) ? "content-no-padding" : "",
+                      unref(isNoPadding) && unref(isBlink) ? "blink-shadow" : "",
+                      !unref(isNoPadding) && unref(isBlink) ? "blink-content" : ""
+                    ])
+                  }, [
+                    createElementVNode("div", _hoisted_3, [
+                      (unref(message).type === unref(TYPES).MSG_IMAGE || unref(message).type === unref(TYPES).MSG_VIDEO) && unref(message).hasRiskContent ? (openBlock(), createElementBlock("img", {
+                        key: 0,
+                        class: normalizeClass(["message-risk-replace", !unref(isPC) && "message-risk-replace-h5"]),
+                        src: riskImageReplaceUrl
+                      }, null, 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        renderSlot(_ctx.$slots, "messageElement", {}, void 0, true),
+                        renderSlot(_ctx.$slots, "TUIEmojiPlugin", {}, void 0, true)
+                      ], 64))
+                    ]),
+                    unref(message).hasRiskContent ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(unref(riskContentText)), 1)) : createCommentVNode("", true)
+                  ], 2),
+                  unref(isDisplayUnplayMark) ? (openBlock(), createElementBlock("div", _hoisted_5)) : createCommentVNode("", true),
+                  unref(message).status === "fail" || unref(message).hasRiskContent ? (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: "message-label fail",
+                    onClick: _cache[0] || (_cache[0] = ($event) => resendMessage())
+                  }, " ! ")) : createCommentVNode("", true),
+                  unref(message).status === "unSend" && needLoadingIconMessageType.includes(unref(message).type) ? (openBlock(), createBlock(Icon, {
+                    key: 2,
+                    class: "message-label loading-circle",
+                    file: unref(loadingIcon),
+                    width: "15px",
+                    height: "15px"
+                  }, null, 8, ["file"])) : createCommentVNode("", true),
+                  createVNode(ReadStatus, {
+                    class: "message-label align-self-bottom",
+                    message: unref(shallowCopyMessage)(unref(message)),
+                    onOpenReadUserPanel: openReadUserPanel
+                  }, null, 8, ["message"])
+                ], 2)
+              ])
+            ], 2),
+            createElementVNode("div", _hoisted_6, [
+              createVNode(MessageTranslate, {
+                class: normalizeClass(unref(message).flow === "out" ? "reverse" : "flex-row"),
+                message: unref(message)
+              }, null, 8, ["class", "message"]),
+              createVNode(MessageConvert, {
+                class: normalizeClass(unref(message).flow === "out" ? "reverse" : "flex-row"),
+                message: unref(message)
+              }, null, 8, ["class", "message"]),
+              createVNode(MessageQuote, {
+                class: normalizeClass(unref(message).flow === "out" ? "reverse" : "flex-row"),
+                message: unref(message),
+                onBlinkMessage: blinkMessage,
+                onScrollTo: scrollTo
+              }, null, 8, ["class", "message"])
+            ])
+          ])
+        ], 2)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-convert/convert-content.vue.d.ts

@@ -0,0 +1,40 @@
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IProps {
+    message: IMessageModel;
+    contentVisible: boolean;
+    convertWrapperRef: HTMLDivElement | undefined;
+    isSingleConvert?: boolean;
+}
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
+    message: () => IMessageModel;
+    isSingleConvert: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    toggleErrorStatus: (status: boolean) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
+    message: () => IMessageModel;
+    isSingleConvert: boolean;
+}>>> & {
+    onToggleErrorStatus?: ((status: boolean) => any) | undefined;
+}, {
+    message: IMessageModel;
+    isSingleConvert: boolean;
+}, {}>;
+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/es/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-convert/convert-content.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./convert-content.vue2.mjs";
+/* empty css                      */
+import _export_sfc from "../../../../../../../../_virtual/_plugin-vue_export-helper.mjs";
+const ConvertContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-83761a11"]]);
+export {
+  ConvertContent as default
+};

package/es/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-convert/convert-content.vue2.mjs

@@ -0,0 +1,93 @@
+import { defineComponent, ref, watch, nextTick, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, toDisplayString, createCommentVNode, createElementVNode } from "vue";
+import "../../../../../adapter-vue.mjs";
+import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
+import { getBoundingClientRectSync } from "@tencentcloud/universal-api";
+import { convertor } from "../../../utils/convertVoiceToText.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "convert-content",
+  props: {
+    message: { default: () => ({}) },
+    contentVisible: { type: Boolean },
+    convertWrapperRef: {},
+    isSingleConvert: { type: Boolean, default: false }
+  },
+  emits: ["toggleErrorStatus"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const convertFinished = ref(false);
+    const convertText = ref("");
+    const calculateHeight = ref(0);
+    const calculateWidth = ref(0);
+    const convertLoadingRef = ref();
+    const convertContentRef = ref();
+    watch(() => props.contentVisible, (newVal) => {
+      if (newVal) {
+        convertor.get(props.message).then((text) => {
+          convertFinished.value = true;
+          convertText.value = text;
+          nextTick(() => {
+            const { height: originHeight, width: originWidth } = getBoundingClientRectSync(convertLoadingRef.value);
+            const { height, width } = getBoundingClientRectSync(convertContentRef.value);
+            calculateHeight.value = originHeight;
+            calculateWidth.value = originWidth;
+            requestAnimationFrame(() => {
+              calculateHeight.value = height;
+              calculateWidth.value = width;
+              if (props.isSingleConvert) {
+                nextTick(() => {
+                  const { bottom } = getBoundingClientRectSync(props.convertWrapperRef);
+                  const { bottom: bottomWindow } = getBoundingClientRectSync("#messageScrollList");
+                  if (bottom > bottomWindow) {
+                    const timer = setTimeout(() => {
+                      props.convertWrapperRef.scrollIntoView({ block: "end", behavior: "smooth" });
+                      clearTimeout(timer);
+                    }, 150);
+                  }
+                });
+              }
+            });
+          });
+        }).catch((err) => {
+          convertFinished.value = true;
+          emits("toggleErrorStatus", true);
+          const { height: originHeight } = getBoundingClientRectSync(convertLoadingRef.value);
+          calculateHeight.value = originHeight;
+          convertText.value = err.message;
+        });
+      }
+    }, {
+      immediate: true
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "message-convert-container",
+        style: normalizeStyle({
+          height: unref(calculateHeight) > 0 ? `${unref(calculateHeight)}px` : "auto",
+          width: unref(calculateWidth) > 0 ? `${unref(calculateWidth)}px` : "auto"
+        })
+      }, [
+        unref(convertFinished) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "convertContentRef",
+          ref: convertContentRef,
+          class: normalizeClass({
+            "convert-content": true,
+            "occur": unref(calculateHeight) > 0
+          })
+        }, toDisplayString(unref(convertText)), 3)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          ref_key: "convertLoadingRef",
+          ref: convertLoadingRef,
+          class: normalizeClass({
+            "loading": true,
+            "loading-end": unref(convertFinished)
+          })
+        }, toDisplayString(unref(TUITranslateService).t("TUIChat.转换中")) + "... ", 3)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-convert/index.vue.d.ts

@@ -0,0 +1,30 @@
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IProps {
+    message: IMessageModel;
+}
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
+    message: () => IMessageModel;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
+    message: () => IMessageModel;
+}>>>, {
+    message: IMessageModel;
+}, {}>;
+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];
+} & {};