@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/components/Chat/ChatEditor/index.vue

@@ -1,14 +1,16 @@
 <template>
-  <div :class="['chat-editor', { 'disable': isMessageDisabled }]">
-    <emoji class="chat-emoji" @choose-emoji="handleChooseEmoji"></emoji>
+  <div :class="['chat-editor', { disable: isMessageDisabled }]">
+    <emoji class="chat-emoji" @choose-emoji="handleChooseEmoji" />
     <textarea
       ref="editorInputEle"
       v-model="sendMsg"
       :disabled="isMessageDisabled"
       class="content-bottom-input"
-      :placeholder="isMessageDisabled ? t('Muted by the moderator') : t('Type a message')"
+      :placeholder="
+        isMessageDisabled ? t('Muted by the moderator') : t('Type a message')
+      "
       @keyup.enter="sendMessage"
-    />
+    ></textarea>
   </div>
 </template>
 
@@ -30,58 +32,67 @@ const {
   --input-border-color: var(--background-color-10);
   --chat-editor-color: var(--background-color-8);
 }
+
 .tui-theme-black textarea {
   --input-border-color: rgba(213, 224, 242, 0.2);
   --chat-editor-color: var(--background-color-2);
 }
 
 .chat-editor {
-  width: 100%;
-  height: 150px;
+  position: relative;
   box-sizing: border-box;
-  margin-top: 20px;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: 150px;
+  padding: 12px 16px;
+  margin-top: 20px;
   border: 1px solid var(--input-border-color);
   border-radius: 8px;
-  padding: 12px 16px;
-  position: relative;
+
   .chat-emoji {
     display: flex;
   }
+
   .content-bottom-input {
-    height: 100%;
-    border: none;
-    background: var(--chat-editor-color);
-    color: var(--textarea-color);
     box-sizing: border-box;
-    caret-color: var(--caret-color);
-    resize: none;
+    height: 100%;
     padding: 0;
     margin-top: 8px;
     font-family: 'PingFang SC';
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
+    color: var(--textarea-color);
+    caret-color: var(--caret-color);
+    resize: none;
+    background: var(--chat-editor-color);
+    border: none;
+
     &:focus-visible {
       outline: none;
     }
+
     &::placeholder {
-      color: rgba(143, 154, 178, 0.7);
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
+      color: rgba(143, 154, 178, 0.7);
     }
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
+
   &.disable {
     background-color: var(--disable-color);
+
     .chat-emoji {
       color: #8f9ab2;
       pointer-events: none;
     }
+
     .content-bottom-input {
       &:disabled {
         background-color: var(--disable-color);

package/src/TUIRoom/components/Chat/ChatEditor/useChatEditor.ts

@@ -22,7 +22,7 @@ export default function useChatEditor() {
   const editorInputEle = ref();
   const sendMsg = ref('');
   const isEmojiToolbarVisible = ref(false);
-  watch(isMessageDisabled, (value) => {
+  watch(isMessageDisabled, value => {
     if (value) {
       sendMsg.value = '';
     }
@@ -53,15 +53,18 @@ export default function useChatEditor() {
         payload: {
           text: result,
         },
-        nick: roomStore.localUser.nameCard || roomStore.localUser.userName || roomStore.localUser.userId,
+        nick:
+          roomStore.localUser.nameCard ||
+          roomStore.localUser.userName ||
+          roomStore.localUser.userId,
         from: roomStore.localUser.userId,
         flow: 'out',
         sequence: Math.random(),
       });
     } catch (e) {
-    /**
-     * Message delivery failure
-    **/
+      /**
+       * Message delivery failure
+       **/
       TUIMessage({ type: 'error', message: t('Failed to send the message') });
     }
   };

package/src/TUIRoom/components/Chat/EditorTools/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="emoji-tool">
-    <svg-icon :icon="EmojiIcon" class="emoji-icon" @click.stop="handleEmojiToobar"></svg-icon>
+    <svg-icon
+      :icon="EmojiIcon"
+      class="emoji-icon"
+      @click.stop="handleEmojiToobar"
+    />
     <div
       v-show="showEmojiToolbar"
       v-click-outside="handleClickOutsideEmojiToobar"
@@ -44,14 +48,13 @@ const handleClickOutsideEmojiToobar = () => {
 
 <style lang="scss" scoped>
 .tui-theme-white .emoji-list {
-  --emoji-box-shadow:
-    0px 2px 4px -3px rgba(32, 77, 141, 0.03),
+  --emoji-box-shadow: 0px 2px 4px -3px rgba(32, 77, 141, 0.03),
     0px 6px 10px 1px rgba(32, 77, 141, 0.06),
     0px 3px 14px 2px rgba(32, 77, 141, 0.05);
 }
+
 .tui-theme-black .emoji-list {
-  --emoji-box-shadow:
-    0px 8px 40px 0px rgba(23, 25, 31, 0.6),
+  --emoji-box-shadow: 0px 8px 40px 0px rgba(23, 25, 31, 0.6),
     0px 4px 12px 0px rgba(23, 25, 31, 0.8);
 }
 
@@ -59,41 +62,45 @@ const handleClickOutsideEmojiToobar = () => {
   .emoji-icon {
     cursor: pointer;
   }
+
   .emoji-list,
   .emoji-list-h5 {
-    height: 204px;
-    width: 100%;
     position: absolute;
     bottom: 160px;
-    left: 0px;
+    left: 0;
     display: flex;
     flex-wrap: wrap;
+    gap: 5px;
+    width: 100%;
+    height: 204px;
+    padding: 10px;
     overflow-y: auto;
     background-color: var(--background-color-8);
-    padding: 10px;
     border-radius: 8px;
     box-shadow: var(--emoji-box-shadow);
-    gap: 5px;
 
     &::-webkit-scrollbar {
       display: none;
     }
+
     .emoji-item {
       &:hover {
         cursor: pointer;
       }
     }
+
     img {
       width: 23px;
       height: 23px;
     }
   }
+
   .emoji-list-h5 {
-    width: 298px;
-    height: 148px;
     position: fixed;
     bottom: 77px;
     left: 30px;
+    width: 298px;
+    height: 148px;
   }
 }
 </style>

package/src/TUIRoom/components/Chat/MessageList/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div :class="isMobile ? 'message-list-container-h5' : 'message-list-container'">
+  <div
+    :class="isMobile ? 'message-list-container-h5' : 'message-list-container'"
+  >
     <div id="messageScrollList" ref="messageListRef" class="message-list">
       <div
         v-for="(item, index) in messageList"
@@ -7,7 +9,11 @@
         ref="messageAimId"
         :class="['message-item', `${'out' === item.flow ? 'is-me' : ''}`]"
       >
-        <div v-if="getDisplaySenderName(index)" class="message-header" :title="item.nick || item.from">
+        <div
+          v-if="getDisplaySenderName(index)"
+          class="message-header"
+          :title="item.nick || item.from"
+        >
           {{ getDisplayName(item.from) }}
         </div>
         <div class="message-body">
@@ -22,7 +28,7 @@
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import MessageText from '../MessageTypes/MessageText.vue';
-import { isMobile }  from '../../../utils/environment';
+import { isMobile } from '../../../utils/environment';
 import useMessageList from './useMessageListHook';
 import { getScrollInfo } from '../../../utils/domOperation';
 import { throttle } from '../../../utils/utils';
@@ -30,7 +36,7 @@ import { useRoomStore } from '../../../stores/room';
 
 const messageListRef = ref<HTMLElement>();
 const roomStore = useRoomStore();
-const { getDisplayName } = storeToRefs(roomStore)
+const { getDisplayName } = storeToRefs(roomStore);
 
 const {
   messageList,
@@ -42,11 +48,13 @@ const {
 
 let isScrollAtBottom = true;
 
-
 const handleMessageListScroll = (e: Event) => {
   const messageContainer = e.target as HTMLElement;
-  const bottom = messageContainer.scrollHeight - messageContainer.scrollTop - messageContainer.clientHeight;
-  isScrollAtBottom = (bottom <= 80);
+  const bottom =
+    messageContainer.scrollHeight -
+    messageContainer.scrollTop -
+    messageContainer.clientHeight;
+  isScrollAtBottom = bottom <= 80;
   if (messageContainer.scrollTop < 40 && !isCompleted.value) {
     handleGetHistoryMessageList();
   }
@@ -54,7 +62,6 @@ const handleMessageListScroll = (e: Event) => {
 
 const handleScroll = throttle(handleMessageListScroll, 1000);
 
-
 async function scrollToLatestMessage() {
   const { scrollHeight } = await getScrollInfo('#messageScrollList');
   if (messageListRef.value) {
@@ -94,130 +101,148 @@ onUnmounted(() => {
   --user-font-color: var(--black-color);
   --host-font-color: var(--white-color);
 }
+
 .tui-theme-black .message-body {
   --user-chat-color: rgba(213, 224, 242, 0.1);
   --user-font-color: var(--background-color-4);
   --host-font-color: var(--background-color-4);
 }
+
 .message-list-container {
+  flex: 1;
   height: 100%;
   overflow: auto;
-  flex: 1;
+
   .message-list {
     height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden auto;
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
+
   .message-top {
     display: flex;
     justify-content: center;
   }
 
   .message-item {
-    margin-bottom: 8px;
-    word-break: break-all;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    margin-bottom: 8px;
+    word-break: break-all;
+
     &:last-of-type {
       margin-bottom: 0;
     }
+
     &.is-me {
       align-items: end;
+
       .message-body {
-        background-color: var(--active-color-1);
         min-width: 24px;
         padding: 10px;
         color: var(--host-font-color);
+        background-color: var(--active-color-1);
         border-radius: 8px;
       }
     }
+
     .message-header {
-      font-size: 14px;
-      color: var(--font-color-8);
-      margin-bottom: 4px;
       max-width: 180px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      margin-bottom: 4px;
       overflow: hidden;
+      font-size: 14px;
       font-weight: 400;
       line-height: 22px;
+      color: var(--font-color-8);
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
+
     .message-body {
-      background-color: var(--user-chat-color);
       display: inline-block;
       padding: 10px;
-      font-weight: 400;
       font-size: 14px;
+      font-weight: 400;
       color: var(--user-font-color);
+      background-color: var(--user-chat-color);
       border-radius: 8px;
     }
   }
 }
 
 .message-list-container-h5 {
+  width: 100%;
+  height: 100%;
   padding: 10px 23px 10px 32px;
   background-color: var(--message-list-color-h5);
-  height: 100%;
-  width: 100%;
-  .message-list{
+
+  .message-list {
     height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden auto;
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
+
   .message-top {
     display: flex;
     justify-content: center;
   }
+
   .message-list {
     overflow-y: scroll;
+
     .message-item {
-      margin-bottom: 20px;
-      word-break: break-all;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      margin-bottom: 20px;
+      word-break: break-all;
+
       &:last-of-type {
         margin-bottom: 0;
       }
+
       &.is-me {
         align-items: end;
+
         .message-body {
-          background-color: #4791ff;
-          min-width: 24px;
-          border-radius: 8px;
           display: inline-block;
+          min-width: 24px;
           padding: 7px;
-          font-weight: 400;
           font-size: 14px;
-          color: #ffffff;
+          font-weight: 400;
+          color: #fff;
+          background-color: #4791ff;
+          border-radius: 8px;
         }
       }
+
       .message-header {
-        margin-bottom: 10px;
         max-width: 180px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        margin-bottom: 10px;
         overflow: hidden;
+        font-size: 10px;
         font-style: normal;
         font-weight: 500;
-        font-size: 10px;
-        color: #ff7200;
         line-height: 14px;
+        color: #ff7200;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
+
       .message-body {
-        background-color: var(--message-body-h5);
         display: inline-block;
         padding: 7px;
-        font-weight: 400;
         font-size: 14px;
-        color: #ffffff;
+        font-weight: 400;
+        color: #fff;
+        background-color: var(--message-body-h5);
         border-radius: 8px;
       }
     }

package/src/TUIRoom/components/Chat/MessageList/useMessageListHook.ts

@@ -3,7 +3,9 @@ import { storeToRefs } from 'pinia';
 import { useChatStore } from '../../../stores/chat';
 import { useBasicStore } from '../../../stores/basic';
 import { useI18n } from '../../../locales';
-import TUIRoomEngine, { TencentCloudChat } from '@tencentcloud/tuiroom-engine-electron';
+import TUIRoomEngine, {
+  TencentCloudChat,
+} from '@tencentcloud/tuiroom-engine-electron';
 import useGetRoomEngine from '../../../hooks/useRoomEngine';
 
 export default function useMessageList() {
@@ -14,10 +16,13 @@ export default function useMessageList() {
   const { roomId } = storeToRefs(basicStore);
   const { messageList, isCompleted, nextReqMessageId } = storeToRefs(chatStore);
 
-  watch(isCompleted, (value) => {
-    isCompleted.value = value;
-  }, { immediate: true, deep: true });
-
+  watch(
+    isCompleted,
+    value => {
+      isCompleted.value = value;
+    },
+    { immediate: true, deep: true }
+  );
 
   async function handleGetHistoryMessageList() {
     const tim = roomEngine.instance?.getTIM();
@@ -25,22 +30,32 @@ export default function useMessageList() {
       conversationID: `GROUP${roomId.value}`,
       nextReqMessageID: nextReqMessageId.value,
     });
-    const { nextReqMessageID: middleReqMessageId, messageList: historyMessageList, isCompleted } = imResponse.data;
+    const {
+      nextReqMessageID: middleReqMessageId,
+      messageList: historyMessageList,
+      isCompleted,
+    } = imResponse.data;
     messageList.value.splice(0, 0, ...historyMessageList);
-    const currentMessageList = messageList.value.filter(item => item.type === 'TIMTextElem');
-    chatStore.setMessageListInfo(currentMessageList, isCompleted, middleReqMessageId);
+    const currentMessageList = messageList.value.filter(
+      item => item.type === 'TIMTextElem'
+    );
+    chatStore.setMessageListInfo(
+      currentMessageList,
+      isCompleted,
+      middleReqMessageId
+    );
   }
 
   async function getMessageList(): Promise<{
     currentMessageList: any[];
-    isCompleted: boolean,
-    nextReqMessageId: string,
+    isCompleted: boolean;
+    nextReqMessageId: string;
   }> {
     let count = 0;
     const result: {
-      currentMessageList: any[],
-      isCompleted: boolean,
-      nextReqMessageId: string,
+      currentMessageList: any[];
+      isCompleted: boolean;
+      nextReqMessageId: string;
     } = {
       currentMessageList: [],
       isCompleted: false,
@@ -49,7 +64,7 @@ export default function useMessageList() {
     const tim: any = roomEngine.instance?.getTIM();
     const getIMMessageList = async () => {
       const conversationData: {
-        conversationID: string,
+        conversationID: string;
         nextReqMessageID?: string | undefined;
       } = {
         conversationID: `GROUP${roomId.value}`,
@@ -74,18 +89,26 @@ export default function useMessageList() {
     await getIMMessageList();
 
     return result;
-  };
+  }
 
   const onReceiveMessage = (options: { data: any }) => {
     if (!options || !options.data) {
       return;
     }
-    const currentConversationId = `GROUP${roomId.value}`
+    const currentConversationId = `GROUP${roomId.value}`;
     options.data.forEach((message: any) => {
-      if (message.conversationID !== currentConversationId || message.type !== TencentCloudChat.TYPES.MSG_TEXT) {
+      if (
+        message.conversationID !== currentConversationId ||
+        message.type !== TencentCloudChat.TYPES.MSG_TEXT
+      ) {
         return;
       }
-      const { ID, payload: { text }, nick: userName, from: userId } = message;
+      const {
+        ID,
+        payload: { text },
+        nick: userName,
+        from: userId,
+      } = message;
       chatStore.updateMessageList({
         ID,
         type: 'TIMTextElem',
@@ -101,9 +124,16 @@ export default function useMessageList() {
   };
 
   async function setMessageListInfo() {
-    const { currentMessageList, isCompleted, nextReqMessageId } = await getMessageList();
-    const filterCurrentMessageList = currentMessageList.filter((item: any) => item.type === 'TIMTextElem');
-    chatStore.setMessageListInfo(filterCurrentMessageList, isCompleted, nextReqMessageId);
+    const { currentMessageList, isCompleted, nextReqMessageId } =
+      await getMessageList();
+    const filterCurrentMessageList = currentMessageList.filter(
+      (item: any) => item.type === 'TIMTextElem'
+    );
+    chatStore.setMessageListInfo(
+      filterCurrentMessageList,
+      isCompleted,
+      nextReqMessageId
+    );
   }
 
   function getDisplaySenderName(index: number) {

package/src/TUIRoom/components/Chat/MessageTypes/MessageText.vue

@@ -1,6 +1,9 @@
 <template>
   <span>
-    <span v-for="(item, index) in handleTextMessageShowContext(props.data)" :key="index">
+    <span
+      v-for="(item, index) in handleTextMessageShowContext(props.data)"
+      :key="index"
+    >
       <span v-if="item.name === 'text'" class="text-box">{{ item.text }}</span>
       <img v-else-if="item.name === 'img'" class="text-img" :src="item.src" />
     </span>
@@ -13,17 +16,17 @@ import { decodeMessageText } from '../util';
 const props = defineProps(['data']);
 
 const handleTextMessageShowContext = (text: string) => decodeMessageText(text);
-
 </script>
 
 <style lang="scss" scoped>
-  .text-img {
-    width: 20px;
-    height: 20px;
-    vertical-align: middle;
-  }
-  .text-box {
-    line-height: 20px;
-    vertical-align: middle;
-  }
+.text-img {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+
+.text-box {
+  line-height: 20px;
+  vertical-align: middle;
+}
 </style>

package/src/TUIRoom/components/Chat/index.vue

@@ -1,24 +1,25 @@
 <template>
-  <div :class="[isMobile ? 'chat-container-h5' : 'chat-container' ]">
-    <message-list></message-list>
-    <chat-editor v-if="!isMobile"></chat-editor>
+  <div :class="[isMobile ? 'chat-container-h5' : 'chat-container']">
+    <message-list />
+    <chat-editor v-if="!isMobile" />
   </div>
 </template>
 
 <script setup lang="ts">
 import MessageList from './MessageList/index.vue';
 import ChatEditor from './ChatEditor/index.vue';
-import { isMobile }  from '../../utils/environment';
+import { isMobile } from '../../utils/environment';
 </script>
 
 <style lang="scss" scoped>
-  .chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 20px;
-  }
-  .chat-container-h5 {
-    height: 100%;
-  }
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px;
+}
+
+.chat-container-h5 {
+  height: 100%;
+}
 </style>