@tencentcloud/roomkit-electron-vue3 2.7.2 → 2.8.2

package/src/TUIRoom/stores/room.ts

@@ -11,20 +11,25 @@ import {
 import { useBasicStore } from './basic';
 import { set, del } from '../utils/vue';
 import { isMobile } from '../utils/environment';
+import { roomService } from '../services';
 
-function getNewStreamInfo(userId: string, streamType?: TUIVideoStreamType) {
+export function getNewStreamInfo(
+  userId: string,
+  streamType?: TUIVideoStreamType
+) {
   const newStreamInfo = {
     userId,
     hasAudioStream: false,
     hasVideoStream: false,
     streamType: streamType || TUIVideoStreamType.kCameraStream,
     isLoading: false,
-    playDomList: [],
+    playDomMap: new Map(),
+    timestamp: Date.now(),
   };
   return newStreamInfo;
 }
 
-function getNewUserInfo(userId: string) {
+export function getNewUserInfo(userId: string) {
   const newUserInfo = {
     userId,
     userName: '',
@@ -40,6 +45,7 @@ function getNewUserInfo(userId: string) {
     isInvitingUserToAnchor: false,
     isInRoom: false,
     status: TUIInvitationStatus.kNone,
+    timestamp: Date.now(),
   };
   return newUserInfo;
 }
@@ -51,32 +57,14 @@ function getRecordStreamType(streamType: TUIVideoStreamType) {
   return streamType;
 }
 
-function sortStreamList(streamList: StreamInfo[]) {
-  const basicStore = useBasicStore();
-  return streamList.sort((item1: StreamInfo, item2: StreamInfo) => {
-    if (item1.userId === basicStore.userId) {
-      return -1;
-    }
-    if (item2.userId === basicStore.userId) {
-      return 1;
-    }
-    if (item1.streamType === TUIVideoStreamType.kScreenStream) {
-      return -1;
-    }
-    if (item2.streamType === TUIVideoStreamType.kScreenStream) {
-      return 1;
-    }
-    return 0;
-  });
-}
-
 export type StreamInfo = {
   userId: string;
   streamType: TUIVideoStreamType;
   hasAudioStream?: boolean;
   hasVideoStream?: boolean;
   isLoading?: boolean;
-  playDomList?: HTMLElement[];
+  playDomMap?: Map<HTMLElement, TUIVideoStreamType>;
+  timestamp?: number;
 };
 
 export type UserInfo = {
@@ -111,12 +99,14 @@ export type UserInfo = {
   inviteToAnchorRequestId?: string;
   isInRoom?: boolean;
   status?: TUIInvitationStatus;
+  timestamp?: number;
 };
 
 interface RoomState {
   userInfoObj: Record<string, UserInfo>;
   streamInfoObj: Record<string, StreamInfo>;
   userVolumeObj: Record<string, number>;
+  currentSpeakerInfo: Record<string, string>;
   // Moderators can unmute audio/video by themselves when they have all users unmuted, but when they unmute a user individually.
   canControlSelfAudio: boolean;
   canControlSelfVideo: boolean;
@@ -137,7 +127,6 @@ interface RoomState {
   maxSeatCount: number;
   password: string;
   roomName: string;
-  hasOtherScreenShare: boolean;
   isOnStateTabActive: boolean;
   isLocalUserSharing: boolean;
   isWhiteboardVisiable: boolean;
@@ -150,6 +139,10 @@ export const useRoomStore = defineStore('room', {
     userInfoObj: {},
     streamInfoObj: {},
     userVolumeObj: {},
+    currentSpeakerInfo: {
+      speakerUserId: '',
+      remoteSpeakerUserId: '',
+    },
     canControlSelfAudio: true,
     canControlSelfVideo: true,
     localVideoQuality: isMobile
@@ -171,8 +164,6 @@ export const useRoomStore = defineStore('room', {
     maxSeatCount: 20,
     password: '',
     roomName: '',
-    // Visual area user flow list
-    hasOtherScreenShare: false,
     isOnStateTabActive: true,
     isLocalUserSharing: false,
     isWhiteboardVisiable: false,
@@ -187,16 +178,18 @@ export const useRoomStore = defineStore('room', {
         getNewUserInfo(basicStore.userId)
       );
     },
-    localStream(state: RoomState): StreamInfo {
+    localStream(state: RoomState): StreamInfo | undefined {
       const basicStore = useBasicStore();
-      return (
-        state.streamInfoObj[
-          `${basicStore.userId}_${TUIVideoStreamType.kCameraStream}`
-        ] ||
-        getNewStreamInfo(basicStore.userId, TUIVideoStreamType.kCameraStream)
-      );
+      if (this.isFreeSpeakMode || this.localUser.onSeat) {
+        return (
+          state.streamInfoObj[
+            `${basicStore.userId}_${TUIVideoStreamType.kCameraStream}`
+          ] ||
+          getNewStreamInfo(basicStore.userId, TUIVideoStreamType.kCameraStream)
+        );
+      }
     },
-    localScreenStream(state: RoomState): StreamInfo {
+    localScreenStream(state: RoomState): StreamInfo | undefined {
       const basicStore = useBasicStore();
       return state.streamInfoObj[
         `${basicStore.userId}_${TUIVideoStreamType.kScreenStream}`
@@ -257,7 +250,9 @@ export const useRoomStore = defineStore('room', {
           return this.userInfoObj[item.userId].onSeat;
         });
       }
-      return sortStreamList(streamList);
+      return streamList.sort(
+        roomService.userManager.getStreamListSortComparator()
+      );
     },
     remoteStreamList(): Array<StreamInfo> {
       const basicStore = useBasicStore();
@@ -268,32 +263,20 @@ export const useRoomStore = defineStore('room', {
         stream => stream.streamType === TUIVideoStreamType.kCameraStream
       );
     },
+    remoteScreenStream(): StreamInfo | undefined {
+      return this.remoteStreamList.find(
+        stream =>
+          stream.streamType === TUIVideoStreamType.kScreenStream &&
+          stream.hasVideoStream
+      );
+    },
     streamNumber(): number {
       return this.streamList.length;
     },
     userList(): Array<UserInfo> {
-      const basicStore = useBasicStore();
-      return [...Object.values(this.userInfoObj)].sort((item1, item2) => {
-        if (item1.userId === basicStore.userId) {
-          return -1;
-        }
-        if (item2.userId === basicStore.userId) {
-          return 1;
-        }
-        if (item1.userRole === TUIRole.kRoomOwner) {
-          return -1;
-        }
-        if (item2.userRole === TUIRole.kRoomOwner) {
-          return 1;
-        }
-        if (item1.userRole === TUIRole.kAdministrator) {
-          return -1;
-        }
-        if (item2.userRole === TUIRole.kAdministrator) {
-          return 1;
-        }
-        return 0;
-      });
+      return [...Object.values(this.userInfoObj)].sort(
+        roomService.userManager.getUserListSortComparator()
+      );
     },
     userNumber(): number {
       return this.userList.filter(item => item.isInRoom).length;
@@ -453,6 +436,9 @@ export const useRoomStore = defineStore('room', {
         set(this.userVolumeObj, userId, volume);
       });
     },
+    setCurrentSpeakerInfo(speakerInfo: Record<string, string>) {
+      Object.assign(this.currentSpeakerInfo, speakerInfo);
+    },
     setCurrentDeviceId(type: TUIMediaDeviceType, deviceId: string) {
       switch (type) {
         case TUIMediaDeviceType.kMediaDeviceTypeVideoCamera:
@@ -477,7 +463,7 @@ export const useRoomStore = defineStore('room', {
     setCurrentSpeakerId(deviceId: string) {
       this.currentSpeakerId = deviceId;
     },
-    setRoomInfo(roomInfo: TUIRoomInfo) {
+    setRoomInfo(roomInfo: Partial<TUIRoomInfo>) {
       if (!roomInfo) return;
 
       const {
@@ -647,9 +633,6 @@ export const useRoomStore = defineStore('room', {
         remoteUserInfo.inviteToAnchorRequestId = '';
       }
     },
-    setHasOtherScreenShare(hasScreenShare: boolean) {
-      this.hasOtherScreenShare = hasScreenShare;
-    },
     setOnStageTabStatus(isOnStateTabActive: boolean) {
       this.isOnStateTabActive = isOnStateTabActive;
     },
@@ -666,25 +649,26 @@ export const useRoomStore = defineStore('room', {
     reset() {
       const basicStore = useBasicStore();
       basicStore.setIsOpenMic(false);
+      this.resetRoomData();
+      this.resetDeviceData();
+    },
+    resetRoomData() {
       this.streamInfoObj = {};
       this.userInfoObj = {};
       this.userVolumeObj = {};
+      this.currentSpeakerInfo = {
+        speakerUserId: '',
+        remoteSpeakerUserId: '',
+      };
       this.canControlSelfAudio = true;
       this.canControlSelfVideo = true;
       this.localVideoQuality = TUIVideoQuality.kVideoQuality_720p;
-      this.currentCameraId = '';
-      this.currentMicrophoneId = '';
-      this.currentSpeakerId = '';
-      this.cameraList = [];
-      this.microphoneList = [];
-      this.speakerList = [];
       this.masterUserId = '';
       this.isMicrophoneDisableForAllUser = false;
       this.isCameraDisableForAllUser = false;
       this.isScreenShareDisableForAllUser = false;
       this.isSeatEnabled = undefined;
       this.seatMode = TUISeatMode.kFreeToTake;
-      this.hasOtherScreenShare = false;
       this.isOnStateTabActive = true;
       this.maxSeatCount = 20;
       this.password = '';
@@ -694,5 +678,13 @@ export const useRoomStore = defineStore('room', {
       this.isSharingScreen = false;
       this.isAnnotationVisiable = false;
     },
+    resetDeviceData() {
+      this.currentCameraId = '';
+      this.currentMicrophoneId = '';
+      this.currentSpeakerId = '';
+      this.cameraList = [];
+      this.microphoneList = [];
+      this.speakerList = [];
+    },
   },
 });

package/src/TUIRoom/utils/domOperation.ts

@@ -252,3 +252,30 @@ export function getFields(
 
   return Promise.reject(new Error('getFields() occur error'));
 }
+
+export function getContentSize(element: HTMLElement) {
+  const computedStyle = getComputedStyle(element);
+
+  const paddingTop = Number(computedStyle.paddingTop.replace('px', ''));
+  const paddingBottom = Number(computedStyle.paddingBottom.replace('px', ''));
+  const borderTop = Number(computedStyle.borderTopWidth.replace('px', ''));
+  const borderBottom = Number(
+    computedStyle.borderBottomWidth.replace('px', '')
+  );
+
+  const paddingLeft = Number(computedStyle.paddingLeft.replace('px', ''));
+  const paddingRight = Number(computedStyle.paddingRight.replace('px', ''));
+  const borderLeft = Number(computedStyle.borderLeftWidth.replace('px', ''));
+  const borderRight = Number(computedStyle.borderRightWidth.replace('px', ''));
+
+  const contentWidth =
+    element.offsetWidth - paddingLeft - paddingRight - borderLeft - borderRight;
+  const contentHeight =
+    element.offsetHeight -
+    paddingTop -
+    paddingBottom -
+    borderTop -
+    borderBottom;
+
+  return { width: contentWidth, height: contentHeight };
+}

package/src/TUIRoom/utils/utils.ts

@@ -268,3 +268,64 @@ export function formatTimestampToTime(
     match => replacements[match]
   );
 }
+
+export type Comparator<T> = (a: T, b: T) => -1 | 0 | 1;
+/**
+ * Creates a new combined {@link Comparator<T>} which sorts items by the given comparators.
+ * The comparators are applied in the order they are given (left -> right).
+ *
+ * @param comparators the comparators to use for sorting.
+ * @returns a combined {@link Comparator<T>}.
+ */
+export const combineComparators = <T>(
+  ...comparators: Comparator<T>[]
+): Comparator<T> => {
+  return (a, b) => {
+    for (const comparator of comparators) {
+      const result = comparator(a, b);
+      if (result !== 0) return result;
+    }
+    return 0;
+  };
+};
+
+export const createComparator = <T>(
+  compareRules: (data1: T, data2: T) => boolean
+) => {
+  return (a: T, b: T) => {
+    if (compareRules(a, b) && compareRules(b, a)) {
+      return 0;
+    }
+    if (compareRules(a, b)) {
+      return -1;
+    }
+    if (compareRules(b, a)) {
+      return 1;
+    }
+    return 0;
+  };
+};
+
+export function arrayIsEqual<T>(arr1: T[], arr2: T[]): boolean {
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  for (let i = 0; i < arr1.length; i++) {
+    if (
+      typeof arr1[i] === 'object' &&
+      typeof arr2[i] === 'object' &&
+      arr1[i] !== null &&
+      arr2[i] !== null
+    ) {
+      if (!arrayIsEqual(arr1[i] as any, arr2[i] as any)) {
+        return false;
+      }
+    } else {
+      if (arr1[i] !== arr2[i]) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}

package/es/components/Chat/ChatEditor/index.vue.mjs

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

package/es/components/Chat/ChatEditor/index.vue2.mjs

@@ -1,45 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, withDirectives, createElementVNode, withKeys, isRef, vModelText } from "vue";
-import emoji from "../EditorTools/index.vue.mjs";
-import useChatEditor from "./useChatEditor.mjs";
-const _hoisted_1 = ["disabled", "placeholder"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  setup(__props) {
-    const {
-      t,
-      editorInputEle,
-      sendMsg,
-      isMessageDisabled,
-      sendMessage,
-      handleChooseEmoji
-    } = useChatEditor();
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["chat-editor", { disable: unref(isMessageDisabled) }])
-      }, [
-        createVNode(emoji, {
-          class: "chat-emoji",
-          onChooseEmoji: unref(handleChooseEmoji)
-        }, null, 8, ["onChooseEmoji"]),
-        withDirectives(createElementVNode("textarea", {
-          ref_key: "editorInputEle",
-          ref: editorInputEle,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(sendMsg) ? sendMsg.value = $event : null),
-          disabled: unref(isMessageDisabled),
-          class: "content-bottom-input",
-          placeholder: unref(isMessageDisabled) ? unref(t)("Muted by the moderator") : unref(t)("Type a message"),
-          onKeyup: _cache[1] || (_cache[1] = withKeys(
-            //@ts-ignore
-            (...args) => unref(sendMessage) && unref(sendMessage)(...args),
-            ["enter"]
-          ))
-        }, null, 40, _hoisted_1), [
-          [vModelText, unref(sendMsg)]
-        ])
-      ], 2);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/es/components/Chat/ChatEditor/useChatEditor.mjs

@@ -1,83 +0,0 @@
-import { ref, watch } from "vue";
-import { storeToRefs } from "pinia";
-import renderMsg from "../../common/base/Message/Message.mjs";
-import { TencentCloudChat } from "@tencentcloud/tuiroom-engine-electron";
-import useGetRoomEngine from "../../../hooks/useRoomEngine.mjs";
-import { useChatStore } from "../../../stores/chat.mjs";
-import { useRoomStore } from "../../../stores/room.mjs";
-import { useI18n } from "../../../locales/index.mjs";
-import { useBasicStore } from "../../../stores/basic.mjs";
-import { decodeSendTextMsg } from "../util.mjs";
-function useChatEditor() {
-  const roomEngine = useGetRoomEngine();
-  const { t } = useI18n();
-  const basicStore = useBasicStore();
-  const chatStore = useChatStore();
-  const roomStore = useRoomStore();
-  const { roomId } = storeToRefs(basicStore);
-  const { isMessageDisabled } = storeToRefs(chatStore);
-  const editorInputEle = ref();
-  const sendMsg = ref("");
-  const isEmojiToolbarVisible = ref(false);
-  watch(isMessageDisabled, (value) => {
-    if (value) {
-      sendMsg.value = "";
-    }
-  });
-  const sendMessage = async () => {
-    var _a;
-    const result = decodeSendTextMsg(sendMsg.value);
-    if (result === "") {
-      return;
-    }
-    sendMsg.value = "";
-    isEmojiToolbarVisible.value = false;
-    try {
-      const tim = (_a = roomEngine.instance) == null ? void 0 : _a.getTIM();
-      if (!tim) {
-        throw new Error("tim is null");
-      }
-      const message = tim.createTextMessage({
-        to: roomId.value,
-        conversationType: TencentCloudChat.TYPES.CONV_GROUP,
-        payload: {
-          text: result
-        }
-      });
-      await tim.sendMessage(message);
-      chatStore.updateMessageList({
-        ID: Math.random().toString(),
-        type: "TIMTextElem",
-        payload: {
-          text: result
-        },
-        nick: roomStore.localUser.nameCard || roomStore.localUser.userName || roomStore.localUser.userId,
-        from: roomStore.localUser.userId,
-        flow: "out",
-        sequence: Math.random()
-      });
-    } catch (e) {
-      renderMsg({ type: "error", message: t("Failed to send the message") });
-    }
-  };
-  const handleChooseEmoji = (emojiName) => {
-    sendMsg.value += emojiName;
-    editorInputEle.value.focus();
-  };
-  const togglePopover = () => {
-    isEmojiToolbarVisible.value = !isEmojiToolbarVisible.value;
-  };
-  return {
-    t,
-    editorInputEle,
-    sendMsg,
-    isMessageDisabled,
-    sendMessage,
-    handleChooseEmoji,
-    isEmojiToolbarVisible,
-    togglePopover
-  };
-}
-export {
-  useChatEditor as default
-};

package/es/components/Chat/EditorTools/index.vue.d.ts

@@ -1,6 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "choose-emoji": (...args: any[]) => void;
-}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
-    "onChoose-emoji"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
-export default _default;

package/es/components/Chat/EditorTools/index.vue.mjs

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

package/es/components/Chat/EditorTools/index.vue2.mjs

@@ -1,59 +0,0 @@
-import { defineComponent, ref, openBlock, createElementBlock, createVNode, withModifiers, withDirectives, normalizeClass, unref, Fragment, renderList, createElementVNode, vShow } from "vue";
-import { emojiList, emojiBaseUrl, emojiMap } from "../util.mjs";
-import { isMobile } from "../../../utils/environment.mjs";
-import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
-import EmojiIcon from "../../common/icons/EmojiIcon.vue.mjs";
-import vClickOutside from "../../../directives/vClickOutside.mjs";
-const _hoisted_1 = { class: "emoji-tool" };
-const _hoisted_2 = ["onClick"];
-const _hoisted_3 = ["src"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  emits: ["choose-emoji"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const showEmojiToolbar = ref(false);
-    const chooseEmoji = (itemName) => {
-      const emojiInfo = itemName;
-      emit("choose-emoji", emojiInfo);
-    };
-    const handleEmojiToobar = () => {
-      showEmojiToolbar.value = !showEmojiToolbar.value;
-    };
-    const handleClickOutsideEmojiToobar = () => {
-      if (showEmojiToolbar.value) {
-        showEmojiToolbar.value = false;
-      }
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(SvgIcon, {
-          icon: EmojiIcon,
-          class: "emoji-icon",
-          onClick: withModifiers(handleEmojiToobar, ["stop"])
-        }),
-        withDirectives((openBlock(), createElementBlock("div", {
-          class: normalizeClass(unref(isMobile) ? "emoji-list-h5" : "emoji-list")
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(emojiList), (childrenItem, childrenIndex) => {
-            return openBlock(), createElementBlock("div", {
-              key: childrenIndex,
-              class: "emoji-item",
-              onClick: ($event) => chooseEmoji(childrenItem)
-            }, [
-              createElementVNode("img", {
-                src: unref(emojiBaseUrl) + unref(emojiMap)[childrenItem]
-              }, null, 8, _hoisted_3)
-            ], 8, _hoisted_2);
-          }), 128))
-        ], 2)), [
-          [vShow, showEmojiToolbar.value],
-          [unref(vClickOutside), handleClickOutsideEmojiToobar]
-        ])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/es/components/Chat/MessageList/index.vue2.mjs

@@ -1,101 +0,0 @@
-import { defineComponent, ref, watch, nextTick, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, Fragment, renderList, toDisplayString, createCommentVNode, createVNode } from "vue";
-import { storeToRefs } from "pinia";
-import MessageText from "../MessageTypes/MessageText.vue.mjs";
-import { isMobile } from "../../../utils/environment.mjs";
-import useMessageList from "./useMessageListHook.mjs";
-import { getScrollInfo } from "../../../utils/domOperation.mjs";
-import { throttle } from "../../../utils/utils.mjs";
-import { useRoomStore } from "../../../stores/room.mjs";
-const _hoisted_1 = ["title"];
-const _hoisted_2 = { class: "message-body" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  setup(__props) {
-    const messageListRef = ref();
-    const roomStore = useRoomStore();
-    const { getDisplayName } = storeToRefs(roomStore);
-    const {
-      messageList,
-      setMessageListInfo,
-      handleGetHistoryMessageList,
-      isCompleted,
-      getDisplaySenderName
-    } = useMessageList();
-    let isScrollAtBottom = true;
-    const handleMessageListScroll = (e) => {
-      const messageContainer = e.target;
-      const bottom = messageContainer.scrollHeight - messageContainer.scrollTop - messageContainer.clientHeight;
-      isScrollAtBottom = bottom <= 80;
-      if (messageContainer.scrollTop < 40 && !isCompleted.value) {
-        handleGetHistoryMessageList();
-      }
-    };
-    const handleScroll = throttle(handleMessageListScroll, 1e3);
-    async function scrollToLatestMessage() {
-      const { scrollHeight } = await getScrollInfo("#messageScrollList");
-      if (messageListRef.value) {
-        messageListRef.value.scrollTop = scrollHeight;
-      }
-    }
-    watch(messageList, async (newMessageList, oldMessageList) => {
-      var _a;
-      if (newMessageList.length === 0) return;
-      const lastMessage = newMessageList.slice(-1);
-      const oldLastMessage = oldMessageList.slice(-1);
-      const isSendByMe = lastMessage[0].flow === "out";
-      const isNewMessage = lastMessage[0].ID !== ((_a = oldLastMessage[0]) == null ? void 0 : _a.ID);
-      await nextTick();
-      if (isScrollAtBottom) {
-        scrollToLatestMessage();
-        return;
-      }
-      if (isSendByMe && isNewMessage) {
-        scrollToLatestMessage();
-      }
-    });
-    onMounted(() => {
-      var _a;
-      setMessageListInfo();
-      (_a = messageListRef.value) == null ? void 0 : _a.addEventListener("scroll", handleScroll);
-    });
-    onUnmounted(() => {
-      var _a;
-      (_a = messageListRef.value) == null ? void 0 : _a.removeEventListener("scroll", handleScroll);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(isMobile) ? "message-list-container-h5" : "message-list-container")
-      }, [
-        createElementVNode("div", {
-          id: "messageScrollList",
-          ref_key: "messageListRef",
-          ref: messageListRef,
-          class: "message-list"
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(messageList), (item, index) => {
-            return openBlock(), createElementBlock("div", {
-              key: item.ID,
-              ref_for: true,
-              ref: "messageAimId",
-              class: normalizeClass(["message-item", `${"out" === item.flow ? "is-me" : ""}`])
-            }, [
-              unref(getDisplaySenderName)(index) ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: "message-header",
-                title: item.nick || item.from
-              }, toDisplayString(unref(getDisplayName)(item.from)), 9, _hoisted_1)) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_2, [
-                createVNode(MessageText, {
-                  data: item.payload.text
-                }, null, 8, ["data"])
-              ])
-            ], 2);
-          }), 128))
-        ], 512)
-      ], 2);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};