@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.3

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

@@ -0,0 +1,707 @@
+import { defineComponent, ref, computed, onMounted, onUnmounted, nextTick, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, createCommentVNode, createBlock, Fragment, renderList, createVNode, withModifiers, withCtx } from "vue";
+import "../../../adapter-vue.mjs";
+import TUIChatEngine, { TUIStore, StoreName, TUIChatService, TUITranslateService } from "@tencentcloud/chat-uikit-engine";
+import TUICore, { TUIConstants } from "@tencentcloud/tui-core";
+import { outsideClick, getScrollInfo, getBoundingClientRect } from "@tencentcloud/universal-api";
+import Link from "./link/index.mjs";
+import MessageGroupApplication from "./message-group-application/index.vue.mjs";
+import MessageText from "./message-elements/message-text.vue.mjs";
+import MessageImage from "./message-elements/message-image.vue.mjs";
+import MessageAudio from "./message-elements/message-audio.vue.mjs";
+import MessageRecord from "./message-elements/message-record/index.vue.mjs";
+import MessageFile from "./message-elements/message-file.vue.mjs";
+import MessageFace from "./message-elements/message-face.vue.mjs";
+import MessageCustom from "./message-elements/message-custom.vue.mjs";
+import MessageTip from "./message-elements/message-tip.vue.mjs";
+import MessageBubble from "./message-elements/message-bubble.vue.mjs";
+import MessageLocation from "./message-elements/message-location.vue.mjs";
+import MessageTimestamp from "./message-elements/message-timestamp.vue.mjs";
+import MessageVideo from "./message-elements/message-video.vue.mjs";
+import MessageTool from "./message-tool/index.vue.mjs";
+import MessageRevoked from "./message-tool/message-revoked.vue.mjs";
+import MessagePlugin from "../../../plugins/plugin-components/message-plugin.vue.mjs";
+import ScrollButton from "./scroll-button/index.vue.mjs";
+import ReadReceiptPanel from "./read-receipt-panel/index.vue.mjs";
+import { isPluginMessage } from "../../../plugins/plugin-components/index.mjs";
+import Dialog from "../../common/Dialog/index.vue.mjs";
+import ImagePreviewer from "../../common/ImagePreviewer/index.vue.mjs";
+import ProgressMessage from "../../common/ProgressMessage/index.vue.mjs";
+import { emojiConfig } from "../emoji-config/index.mjs";
+import { isH5, isPC } from "../../../utils/env.mjs";
+import chatStorage from "../utils/chatStorage.mjs";
+import { throttle } from "../../../utils/lodash.mjs";
+import { isEnabledMessageReadReceiptGlobal, isCreateGroupCustomMessage, deepCopy, shallowCopyMessage } from "../utils/utils.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "tui-chat-safe-tips"
+};
+const _hoisted_2 = ["id"];
+const _hoisted_3 = { class: "message-item" };
+const _hoisted_4 = ["onLongpress", "onContextmenu", "onTouchstart", "onTouchend", "onMouseover"];
+const _hoisted_5 = { class: "delDialog-title" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    isGroup: { type: Boolean, default: false },
+    groupID: { default: "" },
+    isNotInGroup: { type: Boolean, default: false },
+    isMultipleSelectMode: { type: Boolean, default: false }
+  },
+  emits: ["closeInputToolBar", "toggleMultipleSelectMode", "handleEditor"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    let groupType;
+    let observer = null;
+    const sentReceiptMessageIDSet = /* @__PURE__ */ new Set();
+    const isOfficial = TUIStore.getData(StoreName.APP, "isOfficial");
+    const enabledEmojiPlugin = TUIStore.getData(StoreName.APP, "enabledEmojiPlugin");
+    const messageListRef = ref();
+    const messageToolListRef = ref();
+    const messageList = ref();
+    const allMessageList = ref();
+    const multipleSelectedMessageIDList = ref([]);
+    const isCompleted = ref(false);
+    const currentConversationID = ref("");
+    const currentLastMessage = ref();
+    const nextReqMessageID = ref();
+    const toggleID = ref("");
+    const TYPES = ref(TUIChatEngine.TYPES);
+    const isLongpressing = ref(false);
+    const messageTarget = ref();
+    const messageElementListRef = ref();
+    const targetMessageDom = ref();
+    const blinkMessageIDList = ref([]);
+    const scrollButtonInstanceRef = ref();
+    const isShowReadUserStatusPanel = ref(false);
+    const readStatusMessage = ref();
+    const beforeHistoryGetScrollHeight = ref(0);
+    const isTopMessageDom = ref(false);
+    const audioPlayedMapping = ref({});
+    const showImagePreview = ref(false);
+    const currentImagePreview = ref();
+    const imageMessageList = computed(
+      () => {
+        var _a;
+        return (_a = messageList == null ? void 0 : messageList.value) == null ? void 0 : _a.filter((item) => {
+          return !item.isRevoked && !item.hasRiskContent && item.type === TYPES.value.MSG_IMAGE;
+        });
+      }
+    );
+    const reSendDialogShow = ref(false);
+    const resendMessageData = ref();
+    const isShowEmojiPlugin = computed(() => {
+      const msgPopMenuExtensionList = TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.MSG_POP_MENU.EXT_ID, {
+        enabledEmojiPlugin
+      });
+      return msgPopMenuExtensionList.some((item) => {
+        return item.text === "TUIEmojiPlugin";
+      });
+    });
+    onMounted(() => {
+      audioPlayedMapping.value = chatStorage.getChatStorage("audioPlayedMapping") || {};
+      TUIStore.watch(StoreName.CHAT, {
+        messageList: onMessageListUpdated,
+        messageSource: onMessageSourceUpdated,
+        isCompleted: isCompletedUpdated
+      });
+      TUIStore.watch(StoreName.CONV, {
+        currentConversationID: onCurrentConversationIDUpdated
+      });
+      TUIStore.watch(StoreName.CUSTOM, {
+        isShowMessagePopMenu: isShowMessagePopMenuUpdated
+      });
+    });
+    onMounted(() => {
+      var _a;
+      (_a = messageListRef.value) == null ? void 0 : _a.addEventListener("scroll", handelScrollListScroll);
+    });
+    onUnmounted(() => {
+      var _a;
+      TUIStore.unwatch(StoreName.CHAT, {
+        messageList: onMessageListUpdated,
+        messageSource: onMessageSourceUpdated,
+        isCompleted: isCompletedUpdated
+      });
+      TUIStore.unwatch(StoreName.CONV, {
+        currentConversationID: onCurrentConversationIDUpdated
+      });
+      TUIStore.unwatch(StoreName.CUSTOM, {
+        isShowMessagePopMenu: isShowMessagePopMenuUpdated
+      });
+      (_a = messageListRef.value) == null ? void 0 : _a.removeEventListener("scroll", handelScrollListScroll);
+      if (Object.keys(audioPlayedMapping.value).length > 0) {
+        chatStorage.setChatStorage("audioPlayedMapping", audioPlayedMapping.value);
+      }
+      sentReceiptMessageIDSet.clear();
+      observer == null ? void 0 : observer.disconnect();
+      observer = null;
+    });
+    async function onMessageListUpdated(list) {
+      var _a, _b, _c, _d, _e;
+      observer == null ? void 0 : observer.disconnect();
+      const oldLastMessage = currentLastMessage.value;
+      let hasEmojiReaction = false;
+      allMessageList.value = list;
+      messageList.value = list.filter((message) => {
+        var _a2;
+        if (((_a2 = message.reactionList) == null ? void 0 : _a2.length) && !message.isDeleted) {
+          hasEmojiReaction = true;
+        }
+        return !message.isDeleted;
+      });
+      if (!((_a = messageList.value) == null ? void 0 : _a.length)) {
+        currentLastMessage.value = {};
+        return;
+      }
+      const newLastMessage = (_c = messageList.value) == null ? void 0 : _c[((_b = messageList.value) == null ? void 0 : _b.length) - 1];
+      if (messageTarget.value) {
+        if (((_d = messageList.value) == null ? void 0 : _d.findIndex(
+          (message) => {
+            var _a2;
+            return (message == null ? void 0 : message.ID) === ((_a2 = messageTarget.value) == null ? void 0 : _a2.ID);
+          }
+        )) >= 0) {
+          const tempMessage = messageTarget.value;
+          messageTarget.value = void 0;
+          await scrollToPosition({ scrollToMessage: tempMessage });
+          await blinkMessage(tempMessage == null ? void 0 : tempMessage.ID);
+        }
+      } else if (beforeHistoryGetScrollHeight.value) {
+        await scrollToPosition({
+          scrollToOffset: { bottom: beforeHistoryGetScrollHeight.value }
+        });
+        beforeHistoryGetScrollHeight.value = 0;
+      } else if (((_e = scrollButtonInstanceRef.value) == null ? void 0 : _e.isScrollButtonVisible) && (newLastMessage == null ? void 0 : newLastMessage.flow) === "in") {
+        return;
+      } else if ((newLastMessage == null ? void 0 : newLastMessage.ID) && JSON.stringify(oldLastMessage) !== JSON.stringify(newLastMessage)) {
+        await scrollToPosition({ scrollToBottom: true });
+      } else if (hasEmojiReaction && isCurrentListInBottomPosition()) {
+        await scrollToPosition({ scrollToBottom: true });
+      }
+      currentLastMessage.value = Object.assign({}, newLastMessage);
+      if (isEnabledMessageReadReceiptGlobal()) {
+        nextTick(() => bindIntersectionObserver());
+      }
+    }
+    function isCurrentListInBottomPosition() {
+      return messageListRef.value && typeof messageListRef.value.scrollTop === "number" && typeof messageListRef.value.scrollHeight === "number" && typeof messageListRef.value.clientHeight === "number" && Math.ceil(
+        messageListRef.value.scrollTop + messageListRef.value.clientHeight
+      ) >= messageListRef.value.scrollHeight;
+    }
+    async function scrollToPosition(config = {}) {
+      return new Promise((resolve, reject) => {
+        requestAnimationFrame(() => {
+          var _a, _b, _c;
+          if (!messageListRef.value) {
+            reject();
+          }
+          const container = messageListRef.value;
+          if (config.scrollToBottom) {
+            container.scrollTop = container.scrollHeight;
+          } else if (config.scrollToMessage) {
+            const targetMessageDom2 = (_a = messageElementListRef.value) == null ? void 0 : _a.find(
+              (dom) => {
+                var _a2;
+                return (dom == null ? void 0 : dom.id) === `tui-${(_a2 = config.scrollToMessage) == null ? void 0 : _a2.ID}`;
+              }
+            );
+            if (targetMessageDom2 == null ? void 0 : targetMessageDom2.scrollIntoView) {
+              targetMessageDom2.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            }
+          } else if (config.scrollToOffset) {
+            if ((_b = config.scrollToOffset) == null ? void 0 : _b.top) {
+              container.scrollTop = config.scrollToOffset.top;
+            } else if ((_c = config.scrollToOffset) == null ? void 0 : _c.bottom) {
+              container.scrollTop = container.scrollHeight - config.scrollToOffset.bottom;
+            }
+          }
+          resolve();
+        });
+      });
+    }
+    async function onMessageSourceUpdated(message) {
+      var _a;
+      messageTarget.value = message;
+      if (messageTarget.value) {
+        if (((_a = messageList.value) == null ? void 0 : _a.findIndex(
+          (message2) => {
+            var _a2;
+            return (message2 == null ? void 0 : message2.ID) === ((_a2 = messageTarget.value) == null ? void 0 : _a2.ID);
+          }
+        )) >= 0) {
+          const tempMessage = messageTarget.value;
+          messageTarget.value = void 0;
+          await scrollToPosition({ scrollToMessage: tempMessage });
+          await blinkMessage(tempMessage == null ? void 0 : tempMessage.ID);
+        }
+      }
+    }
+    function isCompletedUpdated(flag) {
+      isCompleted.value = flag;
+    }
+    function isShowMessagePopMenuUpdated(isShow) {
+      if (!isShow) {
+        toggleID.value = "";
+      }
+    }
+    const onCurrentConversationIDUpdated = (conversationID) => {
+      currentConversationID.value = conversationID;
+      if (!currentConversationID.value) {
+        messageList.value = [];
+      }
+      if (isEnabledMessageReadReceiptGlobal()) {
+        const { groupProfile } = TUIStore.getConversationModel(conversationID) || {};
+        groupType = groupProfile == null ? void 0 : groupProfile.type;
+      }
+      if (Object.keys(audioPlayedMapping.value).length > 0) {
+        chatStorage.setChatStorage("audioPlayedMapping", audioPlayedMapping.value);
+      }
+    };
+    const getHistoryMessageList = () => {
+      var _a;
+      TUIChatService.getMessageList().then((res) => {
+        const { nextReqMessageID: ID } = res.data;
+        nextReqMessageID.value = ID;
+      });
+      beforeHistoryGetScrollHeight.value = (_a = messageListRef.value) == null ? void 0 : _a.scrollHeight;
+    };
+    const openComplaintLink = (type) => {
+      window.open(type.url);
+    };
+    const handleImagePreview = (message) => {
+      if (showImagePreview.value || currentImagePreview.value || isLongpressing.value) {
+        return;
+      }
+      showImagePreview.value = true;
+      currentImagePreview.value = message;
+    };
+    const onImagePreviewerClose = () => {
+      showImagePreview.value = false;
+      currentImagePreview.value = null;
+    };
+    const handleToggleMessageItem = (e, message, isLongpress = false) => {
+      if (props.isMultipleSelectMode || props.isNotInGroup) {
+        return;
+      }
+      if (isLongpress) {
+        isLongpressing.value = true;
+      }
+      toggleID.value = message.ID;
+      filterTopMessageDom(e.target);
+    };
+    const handleToggleMessageItemForPC = (e, message) => {
+      var _a;
+      if (props.isMultipleSelectMode || props.isNotInGroup) {
+        return;
+      }
+      if (isPC) {
+        toggleID.value = message.ID;
+        targetMessageDom.value = (_a = messageElementListRef.value) == null ? void 0 : _a.find((dom) => (dom == null ? void 0 : dom.id) === `tui-${message.ID}`);
+        nextTick(() => {
+          var _a2;
+          const ignoreDomRefs = messageToolListRef.value && ((_a2 = messageToolListRef.value[0]) == null ? void 0 : _a2.messageToolDom);
+          outsideClick.listen({
+            domRefs: targetMessageDom.value,
+            ignoreDomRefs,
+            handler: closeChatPop,
+            button: e.button
+          });
+          filterTopMessageDom(e.target);
+        });
+      }
+    };
+    function filterTopMessageDom(toggleMessageElement) {
+      const chatElement = document.getElementById("tui-chat-main");
+      const safeTop = 160;
+      const messageElementRect = toggleMessageElement.getBoundingClientRect();
+      const ChatElementRect = chatElement.getBoundingClientRect();
+      isTopMessageDom.value = messageElementRect.top - ChatElementRect.top < safeTop ? true : false;
+    }
+    let timer;
+    const handleH5LongPress = (e, message, type) => {
+      if (props.isMultipleSelectMode || props.isNotInGroup) {
+        return;
+      }
+      if (!isH5) return;
+      function longPressHandler() {
+        clearTimeout(timer);
+        handleToggleMessageItem(e, message);
+      }
+      function touchStartHandler() {
+        timer = setTimeout(longPressHandler, 500);
+      }
+      function touchEndHandler() {
+        clearTimeout(timer);
+      }
+      switch (type) {
+        case "touchstart":
+          touchStartHandler();
+          break;
+        case "touchend":
+          touchEndHandler();
+          setTimeout(() => {
+            isLongpressing.value = false;
+          }, 200);
+          break;
+      }
+    };
+    const handleEdit = (message) => {
+      emits("handleEditor", message, "reedit");
+    };
+    const resendMessage = (message) => {
+      reSendDialogShow.value = true;
+      resendMessageData.value = message;
+    };
+    const resendMessageConfirm = () => {
+      reSendDialogShow.value = !reSendDialogShow.value;
+      const messageModel = resendMessageData.value;
+      messageModel.resendMessage();
+    };
+    function blinkMessage(messageID) {
+      return new Promise((resolve) => {
+        const index = blinkMessageIDList.value.indexOf(messageID);
+        if (index < 0) {
+          blinkMessageIDList.value.push(messageID);
+          const timer2 = setTimeout(() => {
+            blinkMessageIDList.value.splice(blinkMessageIDList.value.indexOf(messageID), 1);
+            clearTimeout(timer2);
+            resolve();
+          }, 3e3);
+        }
+      });
+    }
+    async function scrollToLatestMessage() {
+      const { scrollHeight } = await getScrollInfo("#messageScrollList");
+      const { height } = await getBoundingClientRect("#messageScrollList");
+      if (messageListRef.value) {
+        messageListRef.value.scrollTop = scrollHeight - height;
+      }
+    }
+    const handelScrollListScroll = throttle(function(e) {
+      var _a;
+      (_a = scrollButtonInstanceRef.value) == null ? void 0 : _a.judgeScrollOverOneScreen(e);
+    }, 150, { leading: true });
+    async function bindIntersectionObserver() {
+      var _a;
+      if (!messageList.value || !messageListRef.value || messageList.value.length === 0) {
+        return;
+      }
+      if (groupType === TYPES.value.GRP_AVCHATROOM || groupType === TYPES.value.GRP_COMMUNITY) {
+        return;
+      }
+      const mappingFromIDToMessage = {};
+      observer == null ? void 0 : observer.disconnect();
+      observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          var _a2;
+          const { isIntersecting, target } = entry;
+          if (isIntersecting) {
+            const { msgDom, msgModel } = mappingFromIDToMessage[target.id];
+            if (msgModel && !((_a2 = msgModel.readReceiptInfo) == null ? void 0 : _a2.isPeerRead) && !sentReceiptMessageIDSet.has(msgModel.ID)) {
+              TUIChatService.sendMessageReadReceipt([msgModel]);
+              sentReceiptMessageIDSet.add(msgModel.ID);
+              observer == null ? void 0 : observer.unobserve(msgDom);
+            }
+          }
+        });
+      }, {
+        root: messageListRef.value,
+        threshold: 0.7
+      });
+      const arrayOfMessageLi = (_a = messageListRef.value) == null ? void 0 : _a.querySelectorAll(".message-li");
+      if (arrayOfMessageLi) {
+        for (let i = 0; i < (arrayOfMessageLi == null ? void 0 : arrayOfMessageLi.length); ++i) {
+          const messageElement = arrayOfMessageLi[i];
+          const matchingMessage = messageList.value.find((message) => {
+            return messageElement.id.slice(4) === message.ID;
+          });
+          if (matchingMessage && matchingMessage.needReadReceipt && matchingMessage.flow === "in") {
+            mappingFromIDToMessage[messageElement.id] = {
+              msgDom: messageElement,
+              msgModel: matchingMessage
+            };
+            observer == null ? void 0 : observer.observe(messageElement);
+          }
+        }
+      }
+    }
+    function setReadReceiptPanelVisible(visible, message) {
+      if (visible && props.isNotInGroup) {
+        return;
+      }
+      if (!visible) {
+        readStatusMessage.value = void 0;
+      } else {
+        readStatusMessage.value = message;
+      }
+      isShowReadUserStatusPanel.value = visible;
+    }
+    function closeChatPop() {
+      toggleID.value = "";
+    }
+    function onMessageListBackgroundClick() {
+      emits("closeInputToolBar");
+    }
+    watch(() => props.isMultipleSelectMode, (newValue) => {
+      if (!newValue) {
+        changeSelectMessageIDList({
+          type: "clearAll",
+          messageID: ""
+        });
+      }
+    });
+    function changeSelectMessageIDList({ type, messageID }) {
+      if (type === "clearAll") {
+        multipleSelectedMessageIDList.value = [];
+      } else if (type === "add" && !multipleSelectedMessageIDList.value.includes(messageID)) {
+        multipleSelectedMessageIDList.value.push(messageID);
+      } else if (type === "remove") {
+        multipleSelectedMessageIDList.value = multipleSelectedMessageIDList.value.filter((id) => id !== messageID);
+      }
+    }
+    function mergeForwardMessage() {
+      TUIStore.update(StoreName.CUSTOM, "multipleForwardMessageID", {
+        isMergeForward: true,
+        messageIDList: multipleSelectedMessageIDList.value
+      });
+    }
+    function oneByOneForwardMessage() {
+      TUIStore.update(StoreName.CUSTOM, "multipleForwardMessageID", {
+        isMergeForward: false,
+        messageIDList: multipleSelectedMessageIDList.value
+      });
+    }
+    function setAudioPlayed(messageID) {
+      audioPlayedMapping.value = {
+        ...audioPlayedMapping.value,
+        [messageID]: true
+      };
+    }
+    __expose({
+      oneByOneForwardMessage,
+      mergeForwardMessage,
+      scrollToLatestMessage
+    });
+    return (_ctx, _cache) => {
+      const _component_TUIEmojiPlugin = resolveComponent("TUIEmojiPlugin");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["tui-chat", [unref(isH5) ? "tui-chat-h5" : ""]])
+      }, [
+        createElementVNode("div", {
+          id: "tui-chat-main",
+          class: "tui-chat-main",
+          onClick: closeChatPop
+        }, [
+          unref(isOfficial) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createElementVNode("span", null, toDisplayString(unref(TUITranslateService).t(
+              "TUIChat.【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。"
+            )), 1),
+            createElementVNode("a", {
+              onClick: _cache[0] || (_cache[0] = ($event) => openComplaintLink(unref(Link).complaint))
+            }, toDisplayString(unref(TUITranslateService).t("TUIChat.点此投诉")), 1)
+          ])) : createCommentVNode("", true),
+          _ctx.isGroup ? (openBlock(), createBlock(MessageGroupApplication, {
+            key: props.groupID,
+            groupID: props.groupID
+          }, null, 8, ["groupID"])) : createCommentVNode("", true),
+          createElementVNode("ul", {
+            id: "messageScrollList",
+            ref_key: "messageListRef",
+            ref: messageListRef,
+            class: "tui-message-list",
+            onClick: onMessageListBackgroundClick
+          }, [
+            !unref(isCompleted) ? (openBlock(), createElementBlock("p", {
+              key: 0,
+              class: "message-more",
+              onClick: getHistoryMessageList
+            }, toDisplayString(unref(TUITranslateService).t("TUIChat.查看更多")), 1)) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(messageList), (item, index) => {
+              return openBlock(), createElementBlock("li", {
+                id: "tui-" + item.ID,
+                key: item.ID,
+                ref_for: true,
+                ref_key: "messageElementListRef",
+                ref: messageElementListRef,
+                class: "message-li"
+              }, [
+                createVNode(MessageTimestamp, {
+                  currTime: item.time,
+                  prevTime: index > 0 ? unref(messageList)[index - 1].time : 0
+                }, null, 8, ["currTime", "prevTime"]),
+                createElementVNode("div", _hoisted_3, [
+                  item.type === unref(TYPES).MSG_GRP_TIP || unref(isCreateGroupCustomMessage)(item) ? (openBlock(), createBlock(MessageTip, {
+                    key: 0,
+                    content: item.getMessageContent(),
+                    blinkMessageIDList: unref(blinkMessageIDList),
+                    onBlinkMessage: blinkMessage
+                  }, null, 8, ["content", "blinkMessageIDList"])) : item.isRevoked ? (openBlock(), createBlock(MessageRevoked, {
+                    key: 1,
+                    isEdit: item.type === unref(TYPES).MSG_TEXT,
+                    messageItem: item,
+                    onMessageEdit: ($event) => handleEdit(item)
+                  }, null, 8, ["isEdit", "messageItem", "onMessageEdit"])) : unref(isPluginMessage)(item) ? (openBlock(), createBlock(MessagePlugin, {
+                    key: 2,
+                    message: unref(deepCopy)(item),
+                    blinkMessageIDList: unref(blinkMessageIDList),
+                    onResendMessage: resendMessage,
+                    onHandleToggleMessageItem: handleToggleMessageItem,
+                    onHandleH5LongPress: handleH5LongPress
+                  }, null, 8, ["message", "blinkMessageIDList"])) : (openBlock(), createElementBlock("div", {
+                    key: 3,
+                    class: normalizeClass({
+                      "message-event-bind-div": true
+                    }),
+                    onLongpress: ($event) => handleToggleMessageItem($event, item, true),
+                    onContextmenu: withModifiers(($event) => handleToggleMessageItemForPC($event, item), ["prevent", "right"]),
+                    onTouchstart: ($event) => handleH5LongPress($event, item, "touchstart"),
+                    onTouchend: ($event) => handleH5LongPress($event, item, "touchend"),
+                    onMouseover: ($event) => handleH5LongPress($event, item, "touchend")
+                  }, [
+                    createVNode(MessageBubble, {
+                      content: item.getMessageContent(),
+                      isAudioPlayed: Boolean(unref(audioPlayedMapping)[item.ID]),
+                      blinkMessageIDList: unref(blinkMessageIDList),
+                      isMultipleSelectMode: _ctx.isMultipleSelectMode,
+                      messageItem: JSON.parse(JSON.stringify(item)),
+                      multipleSelectedMessageIDList: unref(multipleSelectedMessageIDList),
+                      onBlinkMessage: blinkMessage,
+                      onResendMessage: ($event) => resendMessage(item),
+                      onChangeSelectMessageIDList: changeSelectMessageIDList,
+                      onSetReadReceiptPanelVisible: setReadReceiptPanelVisible
+                    }, {
+                      messageElement: withCtx(() => [
+                        item.type === unref(TYPES).MSG_TEXT ? (openBlock(), createBlock(MessageText, {
+                          key: 0,
+                          content: item.getMessageContent()
+                        }, null, 8, ["content"])) : item.type === unref(TYPES).MSG_IMAGE ? (openBlock(), createBlock(ProgressMessage, {
+                          key: 1,
+                          content: item.getMessageContent(),
+                          messageItem: item
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(MessageImage, {
+                              content: item.getMessageContent(),
+                              messageItem: item,
+                              onPreviewImage: handleImagePreview
+                            }, null, 8, ["content", "messageItem"])
+                          ]),
+                          _: 2
+                        }, 1032, ["content", "messageItem"])) : item.type === unref(TYPES).MSG_VIDEO ? (openBlock(), createBlock(ProgressMessage, {
+                          key: 2,
+                          content: item.getMessageContent(),
+                          messageItem: item
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(MessageVideo, {
+                              content: item.getMessageContent(),
+                              messageItem: item
+                            }, null, 8, ["content", "messageItem"])
+                          ]),
+                          _: 2
+                        }, 1032, ["content", "messageItem"])) : item.type === unref(TYPES).MSG_AUDIO ? (openBlock(), createBlock(MessageAudio, {
+                          key: 3,
+                          content: item.getMessageContent(),
+                          messageItem: item,
+                          onSetAudioPlayed: setAudioPlayed
+                        }, null, 8, ["content", "messageItem"])) : item.type === unref(TYPES).MSG_FILE ? (openBlock(), createBlock(ProgressMessage, {
+                          key: 4,
+                          content: item.getMessageContent(),
+                          messageItem: item
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(MessageFile, {
+                              content: item.getMessageContent(),
+                              messageItem: item
+                            }, null, 8, ["content", "messageItem"])
+                          ]),
+                          _: 2
+                        }, 1032, ["content", "messageItem"])) : item.type === unref(TYPES).MSG_MERGER ? (openBlock(), createBlock(MessageRecord, {
+                          key: 5,
+                          renderData: item.payload,
+                          messageItem: item
+                        }, null, 8, ["renderData", "messageItem"])) : item.type === unref(TYPES).MSG_FACE ? (openBlock(), createBlock(MessageFace, {
+                          key: 6,
+                          content: item.getMessageContent()
+                        }, null, 8, ["content"])) : item.type === unref(TYPES).MSG_LOCATION ? (openBlock(), createBlock(MessageLocation, {
+                          key: 7,
+                          content: item.getMessageContent()
+                        }, null, 8, ["content"])) : item.type === unref(TYPES).MSG_CUSTOM ? (openBlock(), createBlock(MessageCustom, {
+                          key: 8,
+                          content: item.getMessageContent(),
+                          messageItem: item
+                        }, null, 8, ["content", "messageItem"])) : createCommentVNode("", true)
+                      ]),
+                      TUIEmojiPlugin: withCtx(() => [
+                        unref(isShowEmojiPlugin) && item.reactionList.length > 0 ? (openBlock(), createBlock(_component_TUIEmojiPlugin, {
+                          key: 0,
+                          type: "reaction-detail",
+                          emojiConfig: unref(emojiConfig),
+                          message: unref(shallowCopyMessage)(item)
+                        }, null, 8, ["emojiConfig", "message"])) : createCommentVNode("", true)
+                      ]),
+                      _: 2
+                    }, 1032, ["content", "isAudioPlayed", "blinkMessageIDList", "isMultipleSelectMode", "messageItem", "multipleSelectedMessageIDList", "onResendMessage"])
+                  ], 40, _hoisted_4)),
+                  item.ID === unref(toggleID) ? (openBlock(), createBlock(MessageTool, {
+                    key: 4,
+                    ref_for: true,
+                    ref_key: "messageToolListRef",
+                    ref: messageToolListRef,
+                    class: normalizeClass({
+                      "message-tool": true,
+                      "message-tool-out": item.flow === "out",
+                      "message-tool-in": item.flow === "in",
+                      "message-tool-bottom": unref(isTopMessageDom)
+                    }),
+                    messageItem: item,
+                    isMultipleSelectMode: _ctx.isMultipleSelectMode,
+                    onToggleMultipleSelectMode: _cache[1] || (_cache[1] = () => emits("toggleMultipleSelectMode"))
+                  }, {
+                    TUIEmojiPlugin: withCtx(() => []),
+                    _: 2
+                  }, 1032, ["class", "messageItem", "isMultipleSelectMode"])) : createCommentVNode("", true)
+                ])
+              ], 8, _hoisted_2);
+            }), 128))
+          ], 512),
+          createVNode(ScrollButton, {
+            ref_key: "scrollButtonInstanceRef",
+            ref: scrollButtonInstanceRef,
+            onScrollToLatestMessage: scrollToLatestMessage
+          }, null, 512),
+          unref(reSendDialogShow) ? (openBlock(), createBlock(Dialog, {
+            key: 2,
+            class: "resend-dialog",
+            show: unref(reSendDialogShow),
+            isH5: !unref(isPC),
+            center: true,
+            isHeaderShow: unref(isPC),
+            onSubmit: _cache[2] || (_cache[2] = ($event) => resendMessageConfirm()),
+            "onUpdate:show": _cache[3] || (_cache[3] = (e) => reSendDialogShow.value = e)
+          }, {
+            default: withCtx(() => [
+              createElementVNode("p", _hoisted_5, toDisplayString(unref(TUITranslateService).t("TUIChat.确认重发该消息？")), 1)
+            ]),
+            _: 1
+          }, 8, ["show", "isH5", "isHeaderShow"])) : createCommentVNode("", true),
+          unref(showImagePreview) ? (openBlock(), createBlock(ImagePreviewer, {
+            key: 3,
+            currentImage: unref(currentImagePreview),
+            imageList: unref(imageMessageList),
+            onClose: onImagePreviewerClose
+          }, null, 8, ["currentImage", "imageList"])) : createCommentVNode("", true),
+          unref(isShowReadUserStatusPanel) ? (openBlock(), createBlock(ReadReceiptPanel, {
+            key: 4,
+            message: Object.assign({}, unref(readStatusMessage)),
+            onSetReadReceiptPanelVisible: setReadReceiptPanelVisible
+          }, null, 8, ["message"])) : createCommentVNode("", true)
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};