@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.2

package/lib/components/Chat/ChatKit/components/TUIChat/message-list/index.vue2.js

@@ -0,0 +1,707 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+require("../../../adapter-vue.js");
+const TUIChatEngine = require("@tencentcloud/chat-uikit-engine");
+const TUICore = require("@tencentcloud/tui-core");
+const universalApi = require("@tencentcloud/universal-api");
+const index = require("./link/index.js");
+const index$1 = require("./message-group-application/index.vue.js");
+const messageText = require("./message-elements/message-text.vue.js");
+const messageImage = require("./message-elements/message-image.vue.js");
+const messageAudio = require("./message-elements/message-audio.vue.js");
+const index$4 = require("./message-elements/message-record/index.vue.js");
+const messageFile = require("./message-elements/message-file.vue.js");
+const messageFace = require("./message-elements/message-face.vue.js");
+const messageCustom = require("./message-elements/message-custom.vue.js");
+const messageTip = require("./message-elements/message-tip.vue.js");
+const messageBubble = require("./message-elements/message-bubble.vue.js");
+const messageLocation = require("./message-elements/message-location.vue.js");
+const messageTimestamp = require("./message-elements/message-timestamp.vue.js");
+const messageVideo = require("./message-elements/message-video.vue.js");
+const index$6 = require("./message-tool/index.vue.js");
+const messageRevoked = require("./message-tool/message-revoked.vue.js");
+const messagePlugin = require("../../../plugins/plugin-components/message-plugin.vue.js");
+const index$7 = require("./scroll-button/index.vue.js");
+const index$a = require("./read-receipt-panel/index.vue.js");
+const index$2 = require("../../../plugins/plugin-components/index.js");
+const index$8 = require("../../common/Dialog/index.vue.js");
+const index$9 = require("../../common/ImagePreviewer/index.vue.js");
+const index$3 = require("../../common/ProgressMessage/index.vue.js");
+const index$5 = require("../emoji-config/index.js");
+const env = require("../../../utils/env.js");
+const chatStorage = require("../utils/chatStorage.js");
+const lodash = require("../../../utils/lodash.js");
+const utils = require("../utils/utils.js");
+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__ */ Vue.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 = TUIChatEngine.TUIStore.getData(TUIChatEngine.StoreName.APP, "isOfficial");
+    const enabledEmojiPlugin = TUIChatEngine.TUIStore.getData(TUIChatEngine.StoreName.APP, "enabledEmojiPlugin");
+    const messageListRef = Vue.ref();
+    const messageToolListRef = Vue.ref();
+    const messageList = Vue.ref();
+    const allMessageList = Vue.ref();
+    const multipleSelectedMessageIDList = Vue.ref([]);
+    const isCompleted = Vue.ref(false);
+    const currentConversationID = Vue.ref("");
+    const currentLastMessage = Vue.ref();
+    const nextReqMessageID = Vue.ref();
+    const toggleID = Vue.ref("");
+    const TYPES = Vue.ref(TUIChatEngine.TYPES);
+    const isLongpressing = Vue.ref(false);
+    const messageTarget = Vue.ref();
+    const messageElementListRef = Vue.ref();
+    const targetMessageDom = Vue.ref();
+    const blinkMessageIDList = Vue.ref([]);
+    const scrollButtonInstanceRef = Vue.ref();
+    const isShowReadUserStatusPanel = Vue.ref(false);
+    const readStatusMessage = Vue.ref();
+    const beforeHistoryGetScrollHeight = Vue.ref(0);
+    const isTopMessageDom = Vue.ref(false);
+    const audioPlayedMapping = Vue.ref({});
+    const showImagePreview = Vue.ref(false);
+    const currentImagePreview = Vue.ref();
+    const imageMessageList = Vue.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 = Vue.ref(false);
+    const resendMessageData = Vue.ref();
+    const isShowEmojiPlugin = Vue.computed(() => {
+      const msgPopMenuExtensionList = TUICore.getExtensionList(TUICore.TUIConstants.TUIChat.EXTENSION.MSG_POP_MENU.EXT_ID, {
+        enabledEmojiPlugin
+      });
+      return msgPopMenuExtensionList.some((item) => {
+        return item.text === "TUIEmojiPlugin";
+      });
+    });
+    Vue.onMounted(() => {
+      audioPlayedMapping.value = chatStorage.default.getChatStorage("audioPlayedMapping") || {};
+      TUIChatEngine.TUIStore.watch(TUIChatEngine.StoreName.CHAT, {
+        messageList: onMessageListUpdated,
+        messageSource: onMessageSourceUpdated,
+        isCompleted: isCompletedUpdated
+      });
+      TUIChatEngine.TUIStore.watch(TUIChatEngine.StoreName.CONV, {
+        currentConversationID: onCurrentConversationIDUpdated
+      });
+      TUIChatEngine.TUIStore.watch(TUIChatEngine.StoreName.CUSTOM, {
+        isShowMessagePopMenu: isShowMessagePopMenuUpdated
+      });
+    });
+    Vue.onMounted(() => {
+      var _a;
+      (_a = messageListRef.value) == null ? void 0 : _a.addEventListener("scroll", handelScrollListScroll);
+    });
+    Vue.onUnmounted(() => {
+      var _a;
+      TUIChatEngine.TUIStore.unwatch(TUIChatEngine.StoreName.CHAT, {
+        messageList: onMessageListUpdated,
+        messageSource: onMessageSourceUpdated,
+        isCompleted: isCompletedUpdated
+      });
+      TUIChatEngine.TUIStore.unwatch(TUIChatEngine.StoreName.CONV, {
+        currentConversationID: onCurrentConversationIDUpdated
+      });
+      TUIChatEngine.TUIStore.unwatch(TUIChatEngine.StoreName.CUSTOM, {
+        isShowMessagePopMenu: isShowMessagePopMenuUpdated
+      });
+      (_a = messageListRef.value) == null ? void 0 : _a.removeEventListener("scroll", handelScrollListScroll);
+      if (Object.keys(audioPlayedMapping.value).length > 0) {
+        chatStorage.default.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 (utils.isEnabledMessageReadReceiptGlobal()) {
+        Vue.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 (utils.isEnabledMessageReadReceiptGlobal()) {
+        const { groupProfile } = TUIChatEngine.TUIStore.getConversationModel(conversationID) || {};
+        groupType = groupProfile == null ? void 0 : groupProfile.type;
+      }
+      if (Object.keys(audioPlayedMapping.value).length > 0) {
+        chatStorage.default.setChatStorage("audioPlayedMapping", audioPlayedMapping.value);
+      }
+    };
+    const getHistoryMessageList = () => {
+      var _a;
+      TUIChatEngine.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 (env.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}`);
+        Vue.nextTick(() => {
+          var _a2;
+          const ignoreDomRefs = messageToolListRef.value && ((_a2 = messageToolListRef.value[0]) == null ? void 0 : _a2.messageToolDom);
+          universalApi.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 (!env.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 index2 = blinkMessageIDList.value.indexOf(messageID);
+        if (index2 < 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 universalApi.getScrollInfo("#messageScrollList");
+      const { height } = await universalApi.getBoundingClientRect("#messageScrollList");
+      if (messageListRef.value) {
+        messageListRef.value.scrollTop = scrollHeight - height;
+      }
+    }
+    const handelScrollListScroll = lodash.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)) {
+              TUIChatEngine.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");
+    }
+    Vue.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() {
+      TUIChatEngine.TUIStore.update(TUIChatEngine.StoreName.CUSTOM, "multipleForwardMessageID", {
+        isMergeForward: true,
+        messageIDList: multipleSelectedMessageIDList.value
+      });
+    }
+    function oneByOneForwardMessage() {
+      TUIChatEngine.TUIStore.update(TUIChatEngine.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 = Vue.resolveComponent("TUIEmojiPlugin");
+      return Vue.openBlock(), Vue.createElementBlock("div", {
+        class: Vue.normalizeClass(["tui-chat", [Vue.unref(env.isH5) ? "tui-chat-h5" : ""]])
+      }, [
+        Vue.createElementVNode("div", {
+          id: "tui-chat-main",
+          class: "tui-chat-main",
+          onClick: closeChatPop
+        }, [
+          Vue.unref(isOfficial) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(TUIChatEngine.TUITranslateService).t(
+              "TUIChat.【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。"
+            )), 1),
+            Vue.createElementVNode("a", {
+              onClick: _cache[0] || (_cache[0] = ($event) => openComplaintLink(Vue.unref(index.default).complaint))
+            }, Vue.toDisplayString(Vue.unref(TUIChatEngine.TUITranslateService).t("TUIChat.点此投诉")), 1)
+          ])) : Vue.createCommentVNode("", true),
+          _ctx.isGroup ? (Vue.openBlock(), Vue.createBlock(index$1.default, {
+            key: props.groupID,
+            groupID: props.groupID
+          }, null, 8, ["groupID"])) : Vue.createCommentVNode("", true),
+          Vue.createElementVNode("ul", {
+            id: "messageScrollList",
+            ref_key: "messageListRef",
+            ref: messageListRef,
+            class: "tui-message-list",
+            onClick: onMessageListBackgroundClick
+          }, [
+            !Vue.unref(isCompleted) ? (Vue.openBlock(), Vue.createElementBlock("p", {
+              key: 0,
+              class: "message-more",
+              onClick: getHistoryMessageList
+            }, Vue.toDisplayString(Vue.unref(TUIChatEngine.TUITranslateService).t("TUIChat.查看更多")), 1)) : Vue.createCommentVNode("", true),
+            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(messageList), (item, index2) => {
+              return Vue.openBlock(), Vue.createElementBlock("li", {
+                id: "tui-" + item.ID,
+                key: item.ID,
+                ref_for: true,
+                ref_key: "messageElementListRef",
+                ref: messageElementListRef,
+                class: "message-li"
+              }, [
+                Vue.createVNode(messageTimestamp.default, {
+                  currTime: item.time,
+                  prevTime: index2 > 0 ? Vue.unref(messageList)[index2 - 1].time : 0
+                }, null, 8, ["currTime", "prevTime"]),
+                Vue.createElementVNode("div", _hoisted_3, [
+                  item.type === Vue.unref(TYPES).MSG_GRP_TIP || Vue.unref(utils.isCreateGroupCustomMessage)(item) ? (Vue.openBlock(), Vue.createBlock(messageTip.default, {
+                    key: 0,
+                    content: item.getMessageContent(),
+                    blinkMessageIDList: Vue.unref(blinkMessageIDList),
+                    onBlinkMessage: blinkMessage
+                  }, null, 8, ["content", "blinkMessageIDList"])) : item.isRevoked ? (Vue.openBlock(), Vue.createBlock(messageRevoked.default, {
+                    key: 1,
+                    isEdit: item.type === Vue.unref(TYPES).MSG_TEXT,
+                    messageItem: item,
+                    onMessageEdit: ($event) => handleEdit(item)
+                  }, null, 8, ["isEdit", "messageItem", "onMessageEdit"])) : Vue.unref(index$2.isPluginMessage)(item) ? (Vue.openBlock(), Vue.createBlock(messagePlugin.default, {
+                    key: 2,
+                    message: Vue.unref(utils.deepCopy)(item),
+                    blinkMessageIDList: Vue.unref(blinkMessageIDList),
+                    onResendMessage: resendMessage,
+                    onHandleToggleMessageItem: handleToggleMessageItem,
+                    onHandleH5LongPress: handleH5LongPress
+                  }, null, 8, ["message", "blinkMessageIDList"])) : (Vue.openBlock(), Vue.createElementBlock("div", {
+                    key: 3,
+                    class: Vue.normalizeClass({
+                      "message-event-bind-div": true
+                    }),
+                    onLongpress: ($event) => handleToggleMessageItem($event, item, true),
+                    onContextmenu: Vue.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")
+                  }, [
+                    Vue.createVNode(messageBubble.default, {
+                      content: item.getMessageContent(),
+                      isAudioPlayed: Boolean(Vue.unref(audioPlayedMapping)[item.ID]),
+                      blinkMessageIDList: Vue.unref(blinkMessageIDList),
+                      isMultipleSelectMode: _ctx.isMultipleSelectMode,
+                      messageItem: JSON.parse(JSON.stringify(item)),
+                      multipleSelectedMessageIDList: Vue.unref(multipleSelectedMessageIDList),
+                      onBlinkMessage: blinkMessage,
+                      onResendMessage: ($event) => resendMessage(item),
+                      onChangeSelectMessageIDList: changeSelectMessageIDList,
+                      onSetReadReceiptPanelVisible: setReadReceiptPanelVisible
+                    }, {
+                      messageElement: Vue.withCtx(() => [
+                        item.type === Vue.unref(TYPES).MSG_TEXT ? (Vue.openBlock(), Vue.createBlock(messageText.default, {
+                          key: 0,
+                          content: item.getMessageContent()
+                        }, null, 8, ["content"])) : item.type === Vue.unref(TYPES).MSG_IMAGE ? (Vue.openBlock(), Vue.createBlock(index$3.default, {
+                          key: 1,
+                          content: item.getMessageContent(),
+                          messageItem: item
+                        }, {
+                          default: Vue.withCtx(() => [
+                            Vue.createVNode(messageImage.default, {
+                              content: item.getMessageContent(),
+                              messageItem: item,
+                              onPreviewImage: handleImagePreview
+                            }, null, 8, ["content", "messageItem"])
+                          ]),
+                          _: 2
+                        }, 1032, ["content", "messageItem"])) : item.type === Vue.unref(TYPES).MSG_VIDEO ? (Vue.openBlock(), Vue.createBlock(index$3.default, {
+                          key: 2,
+                          content: item.getMessageContent(),
+                          messageItem: item
+                        }, {
+                          default: Vue.withCtx(() => [
+                            Vue.createVNode(messageVideo.default, {
+                              content: item.getMessageContent(),
+                              messageItem: item
+                            }, null, 8, ["content", "messageItem"])
+                          ]),
+                          _: 2
+                        }, 1032, ["content", "messageItem"])) : item.type === Vue.unref(TYPES).MSG_AUDIO ? (Vue.openBlock(), Vue.createBlock(messageAudio.default, {
+                          key: 3,
+                          content: item.getMessageContent(),
+                          messageItem: item,
+                          onSetAudioPlayed: setAudioPlayed
+                        }, null, 8, ["content", "messageItem"])) : item.type === Vue.unref(TYPES).MSG_FILE ? (Vue.openBlock(), Vue.createBlock(index$3.default, {
+                          key: 4,
+                          content: item.getMessageContent(),
+                          messageItem: item
+                        }, {
+                          default: Vue.withCtx(() => [
+                            Vue.createVNode(messageFile.default, {
+                              content: item.getMessageContent(),
+                              messageItem: item
+                            }, null, 8, ["content", "messageItem"])
+                          ]),
+                          _: 2
+                        }, 1032, ["content", "messageItem"])) : item.type === Vue.unref(TYPES).MSG_MERGER ? (Vue.openBlock(), Vue.createBlock(index$4.default, {
+                          key: 5,
+                          renderData: item.payload,
+                          messageItem: item
+                        }, null, 8, ["renderData", "messageItem"])) : item.type === Vue.unref(TYPES).MSG_FACE ? (Vue.openBlock(), Vue.createBlock(messageFace.default, {
+                          key: 6,
+                          content: item.getMessageContent()
+                        }, null, 8, ["content"])) : item.type === Vue.unref(TYPES).MSG_LOCATION ? (Vue.openBlock(), Vue.createBlock(messageLocation.default, {
+                          key: 7,
+                          content: item.getMessageContent()
+                        }, null, 8, ["content"])) : item.type === Vue.unref(TYPES).MSG_CUSTOM ? (Vue.openBlock(), Vue.createBlock(messageCustom.default, {
+                          key: 8,
+                          content: item.getMessageContent(),
+                          messageItem: item
+                        }, null, 8, ["content", "messageItem"])) : Vue.createCommentVNode("", true)
+                      ]),
+                      TUIEmojiPlugin: Vue.withCtx(() => [
+                        Vue.unref(isShowEmojiPlugin) && item.reactionList.length > 0 ? (Vue.openBlock(), Vue.createBlock(_component_TUIEmojiPlugin, {
+                          key: 0,
+                          type: "reaction-detail",
+                          emojiConfig: Vue.unref(index$5.emojiConfig),
+                          message: Vue.unref(utils.shallowCopyMessage)(item)
+                        }, null, 8, ["emojiConfig", "message"])) : Vue.createCommentVNode("", true)
+                      ]),
+                      _: 2
+                    }, 1032, ["content", "isAudioPlayed", "blinkMessageIDList", "isMultipleSelectMode", "messageItem", "multipleSelectedMessageIDList", "onResendMessage"])
+                  ], 40, _hoisted_4)),
+                  item.ID === Vue.unref(toggleID) ? (Vue.openBlock(), Vue.createBlock(index$6.default, {
+                    key: 4,
+                    ref_for: true,
+                    ref_key: "messageToolListRef",
+                    ref: messageToolListRef,
+                    class: Vue.normalizeClass({
+                      "message-tool": true,
+                      "message-tool-out": item.flow === "out",
+                      "message-tool-in": item.flow === "in",
+                      "message-tool-bottom": Vue.unref(isTopMessageDom)
+                    }),
+                    messageItem: item,
+                    isMultipleSelectMode: _ctx.isMultipleSelectMode,
+                    onToggleMultipleSelectMode: _cache[1] || (_cache[1] = () => emits("toggleMultipleSelectMode"))
+                  }, {
+                    TUIEmojiPlugin: Vue.withCtx(() => []),
+                    _: 2
+                  }, 1032, ["class", "messageItem", "isMultipleSelectMode"])) : Vue.createCommentVNode("", true)
+                ])
+              ], 8, _hoisted_2);
+            }), 128))
+          ], 512),
+          Vue.createVNode(index$7.default, {
+            ref_key: "scrollButtonInstanceRef",
+            ref: scrollButtonInstanceRef,
+            onScrollToLatestMessage: scrollToLatestMessage
+          }, null, 512),
+          Vue.unref(reSendDialogShow) ? (Vue.openBlock(), Vue.createBlock(index$8.default, {
+            key: 2,
+            class: "resend-dialog",
+            show: Vue.unref(reSendDialogShow),
+            isH5: !Vue.unref(env.isPC),
+            center: true,
+            isHeaderShow: Vue.unref(env.isPC),
+            onSubmit: _cache[2] || (_cache[2] = ($event) => resendMessageConfirm()),
+            "onUpdate:show": _cache[3] || (_cache[3] = (e) => reSendDialogShow.value = e)
+          }, {
+            default: Vue.withCtx(() => [
+              Vue.createElementVNode("p", _hoisted_5, Vue.toDisplayString(Vue.unref(TUIChatEngine.TUITranslateService).t("TUIChat.确认重发该消息？")), 1)
+            ]),
+            _: 1
+          }, 8, ["show", "isH5", "isHeaderShow"])) : Vue.createCommentVNode("", true),
+          Vue.unref(showImagePreview) ? (Vue.openBlock(), Vue.createBlock(index$9.default, {
+            key: 3,
+            currentImage: Vue.unref(currentImagePreview),
+            imageList: Vue.unref(imageMessageList),
+            onClose: onImagePreviewerClose
+          }, null, 8, ["currentImage", "imageList"])) : Vue.createCommentVNode("", true),
+          Vue.unref(isShowReadUserStatusPanel) ? (Vue.openBlock(), Vue.createBlock(index$a.default, {
+            key: 4,
+            message: Object.assign({}, Vue.unref(readStatusMessage)),
+            onSetReadReceiptPanelVisible: setReadReceiptPanelVisible
+          }, null, 8, ["message"])) : Vue.createCommentVNode("", true)
+        ])
+      ], 2);
+    };
+  }
+});
+exports.default = _sfc_main;