@tencentcloud/roomkit-electron-vue3 2.7.1 → 2.8.1

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, isRef, withKeys, 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
-};

package/es/components/Chat/MessageList/useMessageListHook.mjs

@@ -1,142 +0,0 @@
-import { watch, onUnmounted } from "vue";
-import { storeToRefs } from "pinia";
-import { useChatStore } from "../../../stores/chat.mjs";
-import { useBasicStore } from "../../../stores/basic.mjs";
-import { useI18n } from "../../../locales/index.mjs";
-import TUIRoomEngine__default, { TencentCloudChat } from "@tencentcloud/tuiroom-engine-electron";
-import useGetRoomEngine from "../../../hooks/useRoomEngine.mjs";
-function useMessageList() {
-  var _a;
-  const { t } = useI18n();
-  const roomEngine = useGetRoomEngine();
-  const chatStore = useChatStore();
-  const basicStore = useBasicStore();
-  const { roomId } = storeToRefs(basicStore);
-  const { messageList, isCompleted, nextReqMessageId } = storeToRefs(chatStore);
-  watch(
-    isCompleted,
-    (value) => {
-      isCompleted.value = value;
-    },
-    { immediate: true, deep: true }
-  );
-  async function handleGetHistoryMessageList() {
-    var _a2;
-    const tim2 = (_a2 = roomEngine.instance) == null ? void 0 : _a2.getTIM();
-    const imResponse = await (tim2 == null ? void 0 : tim2.getMessageList({
-      conversationID: `GROUP${roomId.value}`,
-      nextReqMessageID: nextReqMessageId.value
-    }));
-    const {
-      nextReqMessageID: middleReqMessageId,
-      messageList: historyMessageList,
-      isCompleted: isCompleted2
-    } = imResponse.data;
-    messageList.value.splice(0, 0, ...historyMessageList);
-    const currentMessageList = messageList.value.filter(
-      (item) => item.type === "TIMTextElem"
-    );
-    chatStore.setMessageListInfo(
-      currentMessageList,
-      isCompleted2,
-      middleReqMessageId
-    );
-  }
-  async function getMessageList() {
-    var _a2;
-    let count = 0;
-    const result = {
-      currentMessageList: [],
-      isCompleted: false,
-      nextReqMessageId: ""
-    };
-    const tim2 = (_a2 = roomEngine.instance) == null ? void 0 : _a2.getTIM();
-    const getIMMessageList = async () => {
-      const conversationData = {
-        conversationID: `GROUP${roomId.value}`
-      };
-      if (result.nextReqMessageId !== "") {
-        conversationData.nextReqMessageID = result.nextReqMessageId;
-      }
-      const imResponse = await tim2.getMessageList(conversationData);
-      const { messageList: messageList2, isCompleted: isCompleted2, nextReqMessageID } = imResponse.data;
-      result.currentMessageList.splice(0, 0, ...messageList2);
-      result.isCompleted = messageList2.length > 0 ? isCompleted2 : true;
-      result.nextReqMessageId = nextReqMessageID;
-      if (result.isCompleted || result.currentMessageList.length >= 15) {
-        return;
-      }
-      count += 1;
-      if (count === 1) {
-        await getIMMessageList();
-      }
-    };
-    await getIMMessageList();
-    return result;
-  }
-  const onReceiveMessage = (options) => {
-    if (!options || !options.data) {
-      return;
-    }
-    const currentConversationId = `GROUP${roomId.value}`;
-    options.data.forEach((message) => {
-      if (message.conversationID !== currentConversationId || message.type !== TencentCloudChat.TYPES.MSG_TEXT) {
-        return;
-      }
-      const {
-        ID,
-        payload: { text },
-        nick: userName,
-        from: userId
-      } = message;
-      chatStore.updateMessageList({
-        ID,
-        type: "TIMTextElem",
-        payload: {
-          text
-        },
-        nick: userName || userId,
-        from: userId,
-        flow: "in",
-        sequence: Math.random()
-      });
-    });
-  };
-  async function setMessageListInfo() {
-    const { currentMessageList, isCompleted: isCompleted2, nextReqMessageId: nextReqMessageId2 } = await getMessageList();
-    const filterCurrentMessageList = currentMessageList.filter(
-      (item) => item.type === "TIMTextElem"
-    );
-    chatStore.setMessageListInfo(
-      filterCurrentMessageList,
-      isCompleted2,
-      nextReqMessageId2
-    );
-  }
-  function getDisplaySenderName(index) {
-    if (index === 0) return true;
-    return messageList.value[index].from !== messageList.value[index - 1].from;
-  }
-  let tim = (_a = roomEngine.instance) == null ? void 0 : _a.getTIM();
-  if (!tim) {
-    tim = TencentCloudChat.create({ SDKAppID: basicStore.sdkAppId });
-  }
-  TUIRoomEngine__default.once("ready", () => {
-    tim == null ? void 0 : tim.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
-  });
-  onUnmounted(() => {
-    tim == null ? void 0 : tim.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
-  });
-  return {
-    t,
-    handleGetHistoryMessageList,
-    messageList,
-    getMessageList,
-    setMessageListInfo,
-    getDisplaySenderName,
-    isCompleted
-  };
-}
-export {
-  useMessageList as default
-};

package/es/components/Chat/MessageTypes/MessageText.vue.d.ts

@@ -1,8 +0,0 @@
-declare const _default: import('vue').DefineComponent<Readonly<{
-    data?: any;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<Readonly<{
-    data?: any;
-}>>>, {
-    readonly data?: any;
-}, {}>;
-export default _default;

package/es/components/Chat/MessageTypes/MessageText.vue.mjs

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

package/es/components/Chat/MessageTypes/MessageText.vue2.mjs

@@ -1,31 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, Fragment, renderList, toDisplayString, createCommentVNode } from "vue";
-import { decodeMessageText } from "../util.mjs";
-const _hoisted_1 = {
-  key: 0,
-  class: "text-box"
-};
-const _hoisted_2 = ["src"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "MessageText",
-  props: ["data"],
-  setup(__props) {
-    const props = __props;
-    const handleTextMessageShowContext = (text) => decodeMessageText(text);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(handleTextMessageShowContext(props.data), (item, index) => {
-          return openBlock(), createElementBlock("span", { key: index }, [
-            item.name === "text" ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(item.text), 1)) : item.name === "img" ? (openBlock(), createElementBlock("img", {
-              key: 1,
-              class: "text-img",
-              src: item.src
-            }, null, 8, _hoisted_2)) : createCommentVNode("", true)
-          ]);
-        }), 128))
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};