cnhis-design-vue 3.3.3-beta.7 → 3.3.3-beta.72

package/es/components/iho-chat/src/components/ChatMain.vue2.js

@@ -1,13 +1,14 @@
-import { defineComponent, ref, reactive, computed, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString, createCommentVNode, createBlock, createElementVNode, createTextVNode, withModifiers, nextTick } from 'vue';
-import { NImageGroup, NButton, NCheckbox, NAvatar, NImage, NIcon, NSpace, NButtonGroup, NTooltip } from 'naive-ui';
+import { defineComponent, ref, reactive, computed, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, Fragment, renderList, toDisplayString, createCommentVNode, createBlock, createElementVNode, withCtx, createTextVNode, createVNode, withModifiers, nextTick } from 'vue';
+import { NButton, NCheckbox, NAvatar, NIcon, NSpace, NButtonGroup } from 'naive-ui';
+import { useEventListener } from '@vueuse/core';
 import { format } from 'date-fns';
 import { getHistoryRecordApi, readMessageApi } from '../api/index.js';
 import { useData } from '../hooks/useData.js';
 import 'stompjs';
 import 'sockjs-client/dist/sockjs.min.js';
 import { MESSAGE_TYPE } from '../constants/index.js';
-import { isAudioOrVideoMessage, simplifyMessage, getForwardTitle, getAVTime, downloadFile } from '../utils/index.js';
-import { first, last, isArray, toString } from 'lodash-es';
+import { formatJsonstr, isAudioOrVideoMessage, simplifyMessage, getForwardTitle, getAVTime } from '../utils/index.js';
+import { sortBy, uniqBy, first, last, isArray, toString } from 'lodash-es';
 import 'trtc-sdk-v5';
 import MessageTemplate from './MessageTemplate.vue.js';
 import MessageEvent from './MessageEvent.vue.js';
@@ -17,12 +18,12 @@ import { emojis } from '../utils/emoji.js';
 import ContextMenu from './ContextMenu.js';
 import ChatAdd from './ChatAdd.vue.js';
 import '../../../../shared/utils/index.js';
-import '@vueuse/core';
 import '@vue/shared';
 import '@vueuse/shared';
 import '../../../../shared/hooks/selectHooks/useSearchContent.js';
-import { CallOutline, VideocamOutline, DocumentSharp, HappyOutline, ChatbubbleEllipsesOutline, EllipsisHorizontal, ArrowDownSharp } from '@vicons/ionicons5';
+import { CallOutline, VideocamOutline, DocumentSharp, ChatbubbleEllipsesOutline, EllipsisHorizontal } from '@vicons/ionicons5';
 import { useScrollLoading } from '../../../../shared/hooks/useScrollLoading.js';
+import ImageLightbox from './ImageLightbox.vue.js';
 
 const _hoisted_1 = {
   key: 0,
@@ -61,16 +62,17 @@ const _hoisted_16 = {
   class: "label-name"
 };
 const _hoisted_17 = ["innerHTML"];
-const _hoisted_18 = {
+const _hoisted_18 = ["src", "data-msg"];
+const _hoisted_19 = {
   style: {
     "margin-left": "8px"
   }
 };
-const _hoisted_19 = {
+const _hoisted_20 = {
   class: "size"
 };
-const _hoisted_20 = ["src"];
-const _hoisted_21 = {
+const _hoisted_21 = ["src"];
+const _hoisted_22 = {
   key: 0
 };
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -100,6 +102,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       y: 0
     });
     const showForwardDetail = ref(false);
+    const currentImgId = ref();
+    const showLightbox = ref(false);
     const pageInfo = {
       page: 0,
       hasMore: true,
@@ -111,48 +115,78 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         "--c-tip-gap": isGroupChat.value ? "10px" : "0px"
       };
     });
-    useScrollLoading(chatMainRef, () => {
-      getHistoryRecord();
-    }, "top", () => {
-      showLabel.value = showMenu.value = false;
+    const images = computed(() => {
+      const list = [];
+      state.msgList.forEach((item) => {
+        const {
+          content
+        } = item;
+        if (!content)
+          return;
+        if (content.chatMessageType === MESSAGE_TYPE.IMAGE) {
+          addImageItem(list, item);
+        } else if (content.chatMessageType === MESSAGE_TYPE.BLEND) {
+          processBlendContent(list, item);
+        }
+      });
+      return sortBy(uniqBy(list, "id"), (item) => new Date(item.sendTime));
     });
-    function renderToolbar({
-      nodes
-    }) {
-      var _a, _b;
-      const {
-        _ctx
-      } = (_a = nodes.download) == null ? void 0 : _a.children;
-      const src = _ctx ? (_b = _ctx == null ? void 0 : _ctx.proxy) == null ? void 0 : _b.previewSrc : "";
-      return [nodes.prev, nodes.next, nodes.rotateCounterclockwise, nodes.rotateClockwise, nodes.resizeToOriginalSize, nodes.zoomOut, nodes.zoomIn, createVNode(NTooltip, null, {
-        trigger: () => createVNode(NIcon, {
-          "style": "cursor: pointer",
-          "color": "rgba(255, 255, 255, 0.75",
-          "size": 24,
-          "component": ArrowDownSharp,
-          "onClick": () => src && downloadFile(src, "img")
-        }, null),
-        default: () => function() {
-          var _a2, _b2, _c;
+    function addImageItem(list, item) {
+      const fileUrl = formatJsonstr(item.__content, "fileUrl");
+      list.push({
+        id: fileUrl,
+        fileUrl,
+        fileSize: formatJsonstr(item.__content, "fileSize"),
+        senderName: item.senderName,
+        sendTime: item.sendTime,
+        fileName: formatJsonstr(item.__content, "fileName")
+      });
+    }
+    function processBlendContent(list, item) {
+      const imgList = item.__content.match(/<img[^>]*data-clicked=['"]1['"][^>]*>/gi);
+      if (!imgList)
+        return;
+      imgList.forEach((img) => {
+        var _a;
+        const objstr = (_a = img.match(/data-msg=[']([^']+)[']/i)) == null ? void 0 : _a[1];
+        if (objstr) {
+          addImageItem(list, {
+            ...item,
+            __content: objstr
+          });
+        }
+      });
+    }
+    useEventListener(chatMainRef, "click", (event) => {
+      const target = event.target;
+      if ((target == null ? void 0 : target.tagName) === "IMG") {
+        const {
+          clicked = "0",
+          msg
+        } = target.dataset || {};
+        if (clicked == "1") {
+          let msgData;
           try {
-            return ((_a2 = window.getLanguageByCode) == null ? void 0 : _a2.call(window, "10010.1.102")) || ((_c = (_b2 = window.top) == null ? void 0 : _b2.getLanguageByCode) == null ? void 0 : _c.call(_b2, "10010.1.102")) || "\u4E0B\u8F7D";
+            msgData = JSON.parse(JSON.parse(msg || "{}"));
           } catch (e) {
-            return "\u4E0B\u8F7D";
+            try {
+              msgData = JSON.parse(msg || "{}");
+            } catch (e2) {
+              msgData = {};
+            }
+          }
+          if (msgData.fileUrl) {
+            currentImgId.value = msgData.fileUrl;
+            showLightbox.value = true;
           }
-        }()
-      }), nodes.close];
-    }
-    function formatImage(obj, type) {
-      try {
-        if (typeof obj === "string") {
-          const objParse = JSON.parse(obj);
-          return objParse[type];
         }
-        return obj[type];
-      } catch (error) {
-        return obj;
       }
-    }
+    });
+    useScrollLoading(chatMainRef, () => {
+      getHistoryRecord();
+    }, "top", () => {
+      showLabel.value = showMenu.value = false;
+    });
     async function getHistoryRecord() {
       try {
         if (!pageInfo.hasMore)
@@ -186,12 +220,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       } finally {
       }
     }
-    function handleSelectLabel(event, msgId) {
-      showLabel.value = true;
-      labelPosition.x = event.clientX;
-      labelPosition.y = event.clientY;
-      menuMsgId.value = msgId;
-    }
     async function handleContextmenu(event, msgId) {
       menuMsgId.value = msgId;
       setMenuPosition(event);
@@ -373,251 +401,236 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "chatMainRef",
         ref: chatMainRef,
         style: normalizeStyle(unref(styleProps))
-      }, [createVNode(unref(NImageGroup), {
-        "show-toolbar-tooltip": "",
-        "render-toolbar": renderToolbar
-      }, {
-        default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).msgList, (item, index) => {
-          var _a;
-          return openBlock(), createElementBlock(Fragment, {
-            key: item.id
-          }, [showMessage(item) ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(["message-item", {
-              "message-item--mine": item.sender == unref(state).userInfo.id
-            }])
-          }, [needShowTime(item, index) ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(item.__sendTime), 1)) : createCommentVNode("v-if", true), showTemplateMsg(item, "system") || item.status === "WITHDRAWN" || ((_a = item.content) == null ? void 0 : _a.chatMessageType) === unref(MESSAGE_TYPE).EVENT ? (openBlock(), createElementBlock(Fragment, {
-            key: 1
-          }, [showTemplateMsg(item, "system") ? (openBlock(), createBlock(MessageTemplate, {
-            key: 0,
-            data: item
-          }, null, 8, ["data"])) : createCommentVNode("v-if", true), item.status === "WITHDRAWN" ? (openBlock(), createElementBlock("p", _hoisted_2, [createElementVNode("span", null, toDisplayString(item.sender == unref(state).userInfo.id ? function() {
-            var _a2, _b, _c;
-            try {
-              return ((_a2 = window.getLanguageByCode) == null ? void 0 : _a2.call(window, "10010.1.67")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.67")) || "\u4F60";
-            } catch (e) {
-              return "\u4F60";
-            }
-          }() : item.senderName) + function() {
+      }, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).msgList, (item, index) => {
+        var _a;
+        return openBlock(), createElementBlock(Fragment, {
+          key: item.id
+        }, [showMessage(item) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["message-item", {
+            "message-item--mine": item.sender == unref(state).userInfo.id
+          }])
+        }, [needShowTime(item, index) ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(item.__sendTime), 1)) : createCommentVNode("v-if", true), showTemplateMsg(item, "system") || item.status === "WITHDRAWN" || ((_a = item.content) == null ? void 0 : _a.chatMessageType) === unref(MESSAGE_TYPE).EVENT ? (openBlock(), createElementBlock(Fragment, {
+          key: 1
+        }, [showTemplateMsg(item, "system") ? (openBlock(), createBlock(MessageTemplate, {
+          key: 0,
+          data: item
+        }, null, 8, ["data"])) : createCommentVNode("v-if", true), item.status === "WITHDRAWN" ? (openBlock(), createElementBlock("p", _hoisted_2, [createElementVNode("span", null, toDisplayString(item.sender == unref(state).userInfo.id ? function() {
+          var _a2, _b, _c;
+          try {
+            return ((_a2 = window.getLanguageByCode) == null ? void 0 : _a2.call(window, "10010.1.67")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.67")) || "\u4F60";
+          } catch (e) {
+            return "\u4F60";
+          }
+        }() : item.senderName) + function() {
+          var _a2, _b, _c;
+          try {
+            return ((_a2 = window.getLanguageByCode) == null ? void 0 : _a2.call(window, "10010.1.68")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.68")) || "\u64A4\u56DE\u4E86\u4E00\u6761\u6D88\u606F";
+          } catch (e) {
+            return "\u64A4\u56DE\u4E86\u4E00\u6761\u6D88\u606F";
+          }
+        }(), 1), showReEdit(item) ? (openBlock(), createBlock(unref(NButton), {
+          key: 0,
+          size: "tiny",
+          style: {
+            "color": "var(--c-primary-color)",
+            "margin-left": "5px"
+          },
+          text: "",
+          onClick: () => reEdit(item)
+        }, {
+          default: withCtx(() => [createTextVNode(function() {
             var _a2, _b, _c;
             try {
-              return ((_a2 = window.getLanguageByCode) == null ? void 0 : _a2.call(window, "10010.1.68")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.68")) || "\u64A4\u56DE\u4E86\u4E00\u6761\u6D88\u606F";
+              return ((_a2 = window.getLanguageByCode) == null ? void 0 : _a2.call(window, "10010.1.69")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.69")) || "\u91CD\u65B0\u7F16\u8F91";
             } catch (e) {
-              return "\u64A4\u56DE\u4E86\u4E00\u6761\u6D88\u606F";
+              return "\u91CD\u65B0\u7F16\u8F91";
             }
-          }(), 1), showReEdit(item) ? (openBlock(), createBlock(unref(NButton), {
-            key: 0,
-            size: "tiny",
+          }())]),
+          _: 2
+        }, 1032, ["onClick"])) : createCommentVNode("v-if", true)])) : (openBlock(), createBlock(MessageEvent, {
+          key: 2,
+          data: item
+        }, null, 8, ["data"]))], 64)) : (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: normalizeClass(["message-wrapper", {
+            checked: item.checked
+          }]),
+          onClick: () => item.checked = !item.checked
+        }, [createVNode(unref(NCheckbox), {
+          checked: item.checked,
+          "onUpdate:checked": ($event) => item.checked = $event,
+          size: "large"
+        }, null, 8, ["checked", "onUpdate:checked"]), createElementVNode("div", _hoisted_4, [createVNode(unref(NAvatar), {
+          round: "",
+          size: 38,
+          src: item.senderAvatar,
+          onClick: withModifiers((event) => unref(setUserDetail)(event, {
+            show: true,
+            userId: item.sender
+          }), ["stop"])
+        }, null, 8, ["src", "onClick"]), item.content ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [createElementVNode("span", {
+          class: "name",
+          "data-time": item.__time
+        }, toDisplayString(unref(isGroupChat) ? item.senderName : ""), 9, _hoisted_7)]), createElementVNode("div", {
+          class: normalizeClass(["content", {
+            emoji: item.content.chatMessageType === unref(MESSAGE_TYPE).EMOJI && !item.content.referenceContent,
+            template: item.content.chatMessageType === unref(MESSAGE_TYPE).TEMPLATE,
+            "template--3": isTemplate3(item.content),
+            "audio-video": unref(isAudioOrVideoMessage)(item.content),
+            file: item.content.chatMessageType === unref(MESSAGE_TYPE).FILE,
+            "merge-msg": item.content.chatMessageType === unref(MESSAGE_TYPE).FORWARD && unref(isArray)(item.content.forwardMessageList),
+            "reference-info": showReferenceMsg(item)
+          }]),
+          onContextmenu: withModifiers((event) => !unref(state).isForward && handleContextmenu(event, item.id), ["prevent"])
+        }, [showReferenceMsg(item) ? (openBlock(), createElementBlock(Fragment, {
+          key: 0
+        }, [item.content.referenceContent ? (openBlock(), createElementBlock("div", _hoisted_9, [createElementVNode("span", null, toDisplayString(item.content.referenceContent.senderName) + "\uFF1A", 1), createElementVNode("pre", {
+          innerHTML: unref(simplifyMessage)(item.content.referenceContent.content)
+        }, null, 8, _hoisted_10)])) : createCommentVNode("v-if", true), item.content.chatMessageType === unref(MESSAGE_TYPE).EMOJI ? (openBlock(), createElementBlock("img", {
+          key: 1,
+          class: normalizeClass([item.content.referenceContent ? "emoji--min" : "emoji--big"]),
+          src: unref(emojis).findEmoji(item.__content)
+        }, null, 10, _hoisted_11)) : (openBlock(), createElementBlock("pre", {
+          key: 2,
+          innerHTML: item.__content
+        }, null, 8, _hoisted_12))], 64)) : createCommentVNode("v-if", true), showBlendMsg(item) ? (openBlock(), createElementBlock("pre", {
+          key: 1,
+          innerHTML: item.__content
+        }, null, 8, _hoisted_13)) : createCommentVNode("v-if", true), showTemplateMsg(item, "template") ? (openBlock(), createBlock(MessageTemplate, {
+          key: 2,
+          data: item
+        }, null, 8, ["data"])) : createCommentVNode("v-if", true), item.content.chatMessageType === unref(MESSAGE_TYPE).FORWARD && unref(isArray)(item.content.forwardMessageList) ? (openBlock(), createElementBlock("div", {
+          key: 3,
+          class: "merge-msg-box",
+          onClick: () => clickMergeMsg(item)
+        }, [createElementVNode("h4", null, toDisplayString(unref(getForwardTitle)(item.content)), 1), createElementVNode("div", _hoisted_15, [(openBlock(true), createElementBlock(Fragment, null, renderList(item.content.forwardMessageList, (msg) => {
+          return openBlock(), createElementBlock("div", {
+            key: msg.id,
+            class: "merge-msg-contents-item"
+          }, [createElementVNode("span", _hoisted_16, toDisplayString(msg.senderName) + "\uFF1A", 1), createElementVNode("pre", {
+            innerHTML: unref(simplifyMessage)(msg.content)
+          }, null, 8, _hoisted_17)]);
+        }), 128))])], 8, _hoisted_14)) : createCommentVNode("v-if", true), item.content.chatMessageType === unref(MESSAGE_TYPE).IMAGE ? (openBlock(), createElementBlock("img", {
+          key: 4,
+          styele: "max-width: 240px; max-height: 240px",
+          src: unref(formatJsonstr)(item.__content, "fileUrl"),
+          "data-msg": JSON.stringify(item.__content),
+          "data-clicked": "1"
+        }, null, 8, _hoisted_18)) : createCommentVNode("v-if", true), unref(isAudioOrVideoMessage)(item.content) ? (openBlock(), createElementBlock(Fragment, {
+          key: 5
+        }, [createVNode(unref(NIcon), {
+          class: normalizeClass({
+            "is-audio": item.content.chatMessageType === unref(MESSAGE_TYPE).AUDIO
+          }),
+          component: item.content.chatMessageType === unref(MESSAGE_TYPE).AUDIO ? unref(CallOutline) : unref(VideocamOutline)
+        }, null, 8, ["class", "component"]), createElementVNode("span", _hoisted_19, toDisplayString(unref(getAVTime)(item.__content)), 1)], 64)) : createCommentVNode("v-if", true), item.content.chatMessageType === unref(MESSAGE_TYPE).FILE ? (openBlock(), createBlock(unref(NSpace), {
+          key: 6,
+          "wrap-item": false
+        }, {
+          default: withCtx(() => [createVNode(unref(NIcon), {
+            class: "icon-file",
+            size: "40",
+            component: unref(DocumentSharp)
+          }, null, 8, ["component"]), createVNode(unref(NSpace), {
+            "wrap-item": false,
+            vertical: "",
+            justify: "space-between",
             style: {
-              "color": "var(--c-primary-color)",
-              "margin-left": "5px"
-            },
-            text: "",
-            onClick: () => reEdit(item)
+              "row-gap": "0"
+            }
           }, {
-            default: withCtx(() => [createTextVNode(function() {
-              var _a2, _b, _c;
-              try {
-                return ((_a2 = window.getLanguageByCode) == null ? void 0 : _a2.call(window, "10010.1.69")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.69")) || "\u91CD\u65B0\u7F16\u8F91";
-              } catch (e) {
-                return "\u91CD\u65B0\u7F16\u8F91";
-              }
-            }())]),
+            default: withCtx(() => [createElementVNode("span", null, toDisplayString(unref(formatJsonstr)(item.__content, "fileName")), 1), createElementVNode("span", _hoisted_20, toDisplayString(unref(formatJsonstr)(item.__content, "fileSize")), 1)]),
             _: 2
-          }, 1032, ["onClick"])) : createCommentVNode("v-if", true)])) : (openBlock(), createBlock(MessageEvent, {
-            key: 2,
-            data: item
-          }, null, 8, ["data"]))], 64)) : (openBlock(), createElementBlock("div", {
-            key: 2,
-            class: normalizeClass(["message-wrapper", {
-              checked: item.checked
-            }]),
-            onClick: () => item.checked = !item.checked
-          }, [createVNode(unref(NCheckbox), {
-            checked: item.checked,
-            "onUpdate:checked": ($event) => item.checked = $event,
-            size: "large"
-          }, null, 8, ["checked", "onUpdate:checked"]), createElementVNode("div", _hoisted_4, [createVNode(unref(NAvatar), {
-            round: "",
-            size: 38,
-            src: item.senderAvatar,
-            onClick: withModifiers((event) => unref(setUserDetail)(event, {
-              show: true,
-              userId: item.sender
-            }), ["stop"])
-          }, null, 8, ["src", "onClick"]), item.content ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [createElementVNode("span", {
-            class: "name",
-            "data-time": item.__time
-          }, toDisplayString(unref(isGroupChat) ? item.senderName : ""), 9, _hoisted_7)]), createElementVNode("div", {
-            class: normalizeClass(["content", {
-              emoji: item.content.chatMessageType === unref(MESSAGE_TYPE).EMOJI && !item.content.referenceContent,
-              template: item.content.chatMessageType === unref(MESSAGE_TYPE).TEMPLATE,
-              "template--3": isTemplate3(item.content),
-              "audio-video": unref(isAudioOrVideoMessage)(item.content),
-              file: item.content.chatMessageType === unref(MESSAGE_TYPE).FILE,
-              "merge-msg": item.content.chatMessageType === unref(MESSAGE_TYPE).FORWARD && unref(isArray)(item.content.forwardMessageList),
-              "reference-info": showReferenceMsg(item)
-            }]),
-            onContextmenu: withModifiers((event) => !unref(state).isForward && handleContextmenu(event, item.id), ["prevent"])
-          }, [showReferenceMsg(item) ? (openBlock(), createElementBlock(Fragment, {
-            key: 0
-          }, [item.content.referenceContent ? (openBlock(), createElementBlock("div", _hoisted_9, [createElementVNode("span", null, toDisplayString(item.content.referenceContent.senderName) + "\uFF1A", 1), createElementVNode("pre", {
-            innerHTML: unref(simplifyMessage)(item.content.referenceContent.content)
-          }, null, 8, _hoisted_10)])) : createCommentVNode("v-if", true), item.content.chatMessageType === unref(MESSAGE_TYPE).EMOJI ? (openBlock(), createElementBlock("img", {
-            key: 1,
-            class: normalizeClass([item.content.referenceContent ? "emoji--min" : "emoji--big"]),
-            src: unref(emojis).findEmoji(item.__content)
-          }, null, 10, _hoisted_11)) : (openBlock(), createElementBlock("pre", {
-            key: 2,
-            innerHTML: item.__content
-          }, null, 8, _hoisted_12))], 64)) : createCommentVNode("v-if", true), showBlendMsg(item) ? (openBlock(), createElementBlock("pre", {
-            key: 1,
-            innerHTML: item.__content
-          }, null, 8, _hoisted_13)) : createCommentVNode("v-if", true), showTemplateMsg(item, "template") ? (openBlock(), createBlock(MessageTemplate, {
-            key: 2,
-            data: item
-          }, null, 8, ["data"])) : createCommentVNode("v-if", true), item.content.chatMessageType === unref(MESSAGE_TYPE).FORWARD && unref(isArray)(item.content.forwardMessageList) ? (openBlock(), createElementBlock("div", {
-            key: 3,
-            class: "merge-msg-box",
-            onClick: () => clickMergeMsg(item)
-          }, [createElementVNode("h4", null, toDisplayString(unref(getForwardTitle)(item.content)), 1), createElementVNode("div", _hoisted_15, [(openBlock(true), createElementBlock(Fragment, null, renderList(item.content.forwardMessageList, (msg) => {
+          }, 1024)]),
+          _: 2
+        }, 1024)) : createCommentVNode("v-if", true), !unref(isAudioOrVideoMessage)(item.content) && item.content.labelList ? (openBlock(), createBlock(unref(NSpace), {
+          key: 7,
+          "wrap-item": false
+        }, {
+          default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.content.labelList, (labelItem, i) => {
             return openBlock(), createElementBlock("div", {
-              key: msg.id,
-              class: "merge-msg-contents-item"
-            }, [createElementVNode("span", _hoisted_16, toDisplayString(msg.senderName) + "\uFF1A", 1), createElementVNode("pre", {
-              innerHTML: unref(simplifyMessage)(msg.content)
-            }, null, 8, _hoisted_17)]);
-          }), 128))])], 8, _hoisted_14)) : createCommentVNode("v-if", true), item.content.chatMessageType === unref(MESSAGE_TYPE).IMAGE ? (openBlock(), createBlock(unref(NImage), {
-            key: 4,
-            width: "240",
-            src: formatImage(item.__content, "fileUrl"),
-            onClick: _cache[0] || (_cache[0] = (event) => event.stopPropagation())
-          }, null, 8, ["src"])) : createCommentVNode("v-if", true), unref(isAudioOrVideoMessage)(item.content) ? (openBlock(), createElementBlock(Fragment, {
-            key: 5
-          }, [createVNode(unref(NIcon), {
-            class: normalizeClass({
-              "is-audio": item.content.chatMessageType === unref(MESSAGE_TYPE).AUDIO
-            }),
-            component: item.content.chatMessageType === unref(MESSAGE_TYPE).AUDIO ? unref(CallOutline) : unref(VideocamOutline)
-          }, null, 8, ["class", "component"]), createElementVNode("span", _hoisted_18, toDisplayString(unref(getAVTime)(item.__content)), 1)], 64)) : createCommentVNode("v-if", true), item.content.chatMessageType === unref(MESSAGE_TYPE).FILE ? (openBlock(), createBlock(unref(NSpace), {
-            key: 6,
-            "wrap-item": false
-          }, {
-            default: withCtx(() => [createVNode(unref(NIcon), {
-              class: "icon-file",
-              size: "40",
-              component: unref(DocumentSharp)
-            }, null, 8, ["component"]), createVNode(unref(NSpace), {
-              "wrap-item": false,
-              vertical: "",
-              justify: "space-between",
-              style: {
-                "row-gap": "0"
-              }
+              key: i,
+              class: "label-item"
+            }, [labelItem.type === "text" ? (openBlock(), createBlock(unref(NButton), {
+              key: 0,
+              type: labelItem.label.type,
+              secondary: "",
+              size: "tiny",
+              onClick: () => unref(setMessageLabel)({
+                type: labelItem.type,
+                labelItem: labelItem.label,
+                msgId: item.id
+              })
             }, {
-              default: withCtx(() => [createElementVNode("span", null, toDisplayString(formatImage(item.__content, "fileName")), 1), createElementVNode("span", _hoisted_19, toDisplayString(item.__size), 1)]),
+              default: withCtx(() => [createTextVNode(toDisplayString(labelItem.label.label), 1)]),
               _: 2
-            }, 1024)]),
-            _: 2
-          }, 1024)) : createCommentVNode("v-if", true), !unref(isAudioOrVideoMessage)(item.content) && item.content.labelList ? (openBlock(), createBlock(unref(NSpace), {
-            key: 7,
-            "wrap-item": false
-          }, {
-            default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.content.labelList, (labelItem, i) => {
-              return openBlock(), createElementBlock("div", {
-                key: i,
-                class: "label-item"
-              }, [labelItem.type === "text" ? (openBlock(), createBlock(unref(NButton), {
-                key: 0,
-                type: labelItem.label.type,
-                secondary: "",
-                size: "tiny",
-                onClick: () => unref(setMessageLabel)({
-                  type: labelItem.type,
-                  labelItem: labelItem.label,
-                  msgId: item.id
-                })
-              }, {
-                default: withCtx(() => [createTextVNode(toDisplayString(labelItem.label.label), 1)]),
-                _: 2
-              }, 1032, ["type", "onClick"])) : (openBlock(), createBlock(unref(NButton), {
-                key: 1,
+            }, 1032, ["type", "onClick"])) : (openBlock(), createBlock(unref(NButton), {
+              key: 1,
+              quaternary: "",
+              size: "tiny",
+              onClick: () => unref(setMessageLabel)({
+                type: labelItem.type,
+                labelItem: labelItem.label,
+                msgId: item.id
+              })
+            }, {
+              icon: withCtx(() => [createElementVNode("img", {
+                class: "emoji--min",
+                src: unref(emojis).findEmoji(labelItem.label)
+              }, null, 8, _hoisted_21)]),
+              _: 2
+            }, 1032, ["onClick"])), (openBlock(true), createElementBlock(Fragment, null, renderList(labelItem.userList, (user, i2) => {
+              return openBlock(), createElementBlock(Fragment, {
+                key: user.id
+              }, [createVNode(unref(NButton), {
                 quaternary: "",
+                type: "tertiary",
                 size: "tiny",
-                onClick: () => unref(setMessageLabel)({
-                  type: labelItem.type,
-                  labelItem: labelItem.label,
-                  msgId: item.id
+                onClick: (event) => unref(setUserDetail)(event, {
+                  show: true,
+                  info: user
                 })
               }, {
-                icon: withCtx(() => [createElementVNode("img", {
-                  class: "emoji--min",
-                  src: unref(emojis).findEmoji(labelItem.label)
-                }, null, 8, _hoisted_20)]),
+                default: withCtx(() => [createTextVNode(toDisplayString(user.name), 1)]),
                 _: 2
-              }, 1032, ["onClick"])), (openBlock(true), createElementBlock(Fragment, null, renderList(labelItem.userList, (user, i2) => {
-                return openBlock(), createElementBlock(Fragment, {
-                  key: user.id
-                }, [createVNode(unref(NButton), {
-                  quaternary: "",
-                  type: "tertiary",
-                  size: "tiny",
-                  onClick: (event) => unref(setUserDetail)(event, {
-                    show: true,
-                    info: user
-                  })
-                }, {
-                  default: withCtx(() => [createTextVNode(toDisplayString(user.name), 1)]),
-                  _: 2
-                }, 1032, ["onClick"]), i2 < labelItem.userList.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_21, "\uFF0C")) : createCommentVNode("v-if", true)], 64);
-              }), 128))]);
-            }), 128))]),
+              }, 1032, ["onClick"]), i2 < labelItem.userList.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_22, "\uFF0C")) : createCommentVNode("v-if", true)], 64);
+            }), 128))]);
+          }), 128))]),
+          _: 2
+        }, 1024)) : createCommentVNode("v-if", true), createVNode(unref(NButtonGroup), {
+          class: "quick-menu"
+        }, {
+          default: withCtx(() => [!unref(isAudioOrVideoMessage)(item.content) ? (openBlock(), createElementBlock(Fragment, {
+            key: 0
+          }, [createCommentVNode(' <n-button\n												quaternary\n												size="tiny"\n												@click="(event: MouseEvent) => handleSelectLabel(event, item.id)"\n											>\n												<template #icon>\n													<n-icon size="17" :component="HappyOutline" />\n												</template>\n											</n-button> '), createVNode(unref(NButton), {
+            quaternary: "",
+            size: "tiny",
+            onClick: () => setReferenceMsg(item)
+          }, {
+            icon: withCtx(() => [createVNode(unref(NIcon), {
+              size: "17",
+              component: unref(ChatbubbleEllipsesOutline)
+            }, null, 8, ["component"])]),
             _: 2
-          }, 1024)) : createCommentVNode("v-if", true), createVNode(unref(NButtonGroup), {
-            class: "quick-menu"
+          }, 1032, ["onClick"])], 64)) : createCommentVNode("v-if", true), createVNode(unref(NButton), {
+            quaternary: "",
+            size: "tiny",
+            onClick: (event) => handleContextmenu(event, item.id)
           }, {
-            default: withCtx(() => [!unref(isAudioOrVideoMessage)(item.content) ? (openBlock(), createElementBlock(Fragment, {
-              key: 0
-            }, [createVNode(unref(NButton), {
-              quaternary: "",
-              size: "tiny",
-              onClick: (event) => handleSelectLabel(event, item.id)
-            }, {
-              icon: withCtx(() => [createVNode(unref(NIcon), {
-                size: "17",
-                component: unref(HappyOutline)
-              }, null, 8, ["component"])]),
-              _: 2
-            }, 1032, ["onClick"]), createVNode(unref(NButton), {
-              quaternary: "",
-              size: "tiny",
-              onClick: () => setReferenceMsg(item)
-            }, {
-              icon: withCtx(() => [createVNode(unref(NIcon), {
-                size: "17",
-                component: unref(ChatbubbleEllipsesOutline)
-              }, null, 8, ["component"])]),
-              _: 2
-            }, 1032, ["onClick"])], 64)) : createCommentVNode("v-if", true), createVNode(unref(NButton), {
-              quaternary: "",
-              size: "tiny",
-              onClick: (event) => handleContextmenu(event, item.id)
-            }, {
-              icon: withCtx(() => [createVNode(unref(NIcon), {
-                size: "14",
-                component: unref(EllipsisHorizontal)
-              }, null, 8, ["component"])]),
-              _: 2
-            }, 1032, ["onClick"])]),
+            icon: withCtx(() => [createVNode(unref(NIcon), {
+              size: "14",
+              component: unref(EllipsisHorizontal)
+            }, null, 8, ["component"])]),
             _: 2
-          }, 1024)], 42, _hoisted_8)])) : createCommentVNode("v-if", true)])], 10, _hoisted_3))], 2)) : createCommentVNode("v-if", true)], 64);
-        }), 128))]),
-        _: 1
-      }), createVNode(unref(ContextMenu), {
+          }, 1032, ["onClick"])]),
+          _: 2
+        }, 1024)], 42, _hoisted_8)])) : createCommentVNode("v-if", true)])], 10, _hoisted_3))], 2)) : createCommentVNode("v-if", true)], 64);
+      }), 128)), createVNode(unref(ContextMenu), {
         ref_key: "contextmenuRef",
         ref: contextmenuRef,
         show: showMenu.value,
-        "onUpdate:show": _cache[1] || (_cache[1] = ($event) => showMenu.value = $event),
+        "onUpdate:show": _cache[0] || (_cache[0] = ($event) => showMenu.value = $event),
         position: menuPosition.value,
         id: menuMsgId.value,
         onSelect: handleSelect
@@ -651,15 +664,21 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }), menuMsgId.value ? (openBlock(), createBlock(SelectLabel, {
         key: 0,
         show: showLabel.value,
-        "onUpdate:show": _cache[2] || (_cache[2] = ($event) => showLabel.value = $event),
+        "onUpdate:show": _cache[1] || (_cache[1] = ($event) => showLabel.value = $event),
         x: labelPosition.x,
         y: labelPosition.y,
         id: menuMsgId.value
       }, null, 8, ["show", "x", "y", "id"])) : createCommentVNode("v-if", true), createVNode(MessageMergeForward, {
         show: showForwardDetail.value,
-        "onUpdate:show": _cache[3] || (_cache[3] = ($event) => showForwardDetail.value = $event),
+        "onUpdate:show": _cache[2] || (_cache[2] = ($event) => showForwardDetail.value = $event),
         id: menuMsgId.value
-      }, null, 8, ["show", "id"])], 6);
+      }, null, 8, ["show", "id"]), createVNode(ImageLightbox, {
+        images: unref(images),
+        "current-id": currentImgId.value,
+        "onUpdate:current-id": _cache[3] || (_cache[3] = ($event) => currentImgId.value = $event),
+        visible: showLightbox.value,
+        "onUpdate:visible": _cache[4] || (_cache[4] = ($event) => showLightbox.value = $event)
+      }, null, 8, ["images", "current-id", "visible"])], 6);
     };
   }
 });