@tencentcloud/roomkit-electron-vue3 2.6.7 → 2.7.1

package/lib/utils/utils.js

@@ -137,10 +137,6 @@ function convertSecondsToHMS(seconds) {
     seconds: remainingSeconds
   };
 }
-function isDigitsOnly(str) {
-  const regex = /^\d+$/;
-  return regex.test(str);
-}
 function getNanoId(size = 21) {
   const urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
   let id = "";
@@ -151,16 +147,48 @@ function getNanoId(size = 21) {
   }
   return id;
 }
+function findLastIndex(array, predicate, thisArg) {
+  const len = array.length >>> 0;
+  let k = len - 1;
+  while (k >= 0) {
+    const kValue = array[k];
+    if (predicate.call(thisArg, kValue, k, array)) {
+      return k;
+    }
+    k = k - 1;
+  }
+  return -1;
+}
+function formatTimestampToTime(timestamp, format = "MM-DD HH:mm") {
+  const date = new Date(timestamp);
+  const padStart = (value, length = 2) => value.toString().padStart(length, "0");
+  const replacements = {
+    YYYY: date.getFullYear().toString(),
+    YY: (date.getFullYear() % 100).toString().padStart(2, "0"),
+    MM: padStart(date.getMonth() + 1),
+    DD: padStart(date.getDate()),
+    HH: padStart(date.getHours()),
+    hh: padStart(date.getHours() % 12),
+    mm: padStart(date.getMinutes()),
+    ss: padStart(date.getSeconds()),
+    A: date.getHours() >= 12 ? "PM" : "AM"
+  };
+  return format.replace(
+    /YYYY|YY|MM|DD|HH|hh|mm|ss|A/g,
+    (match) => replacements[match]
+  );
+}
 exports.addSuffix = addSuffix;
 exports.calculateByteLength = calculateByteLength;
 exports.convertSecondsToHMS = convertSecondsToHMS;
 exports.debounce = debounce;
 exports.deepClone = deepClone;
 exports.exitFullScreen = exitFullScreen;
+exports.findLastIndex = findLastIndex;
+exports.formatTimestampToTime = formatTimestampToTime;
 exports.getNanoId = getNanoId;
 exports.getUrlParam = getUrlParam;
 exports.getUrlWithRoomId = getUrlWithRoomId;
-exports.isDigitsOnly = isDigitsOnly;
 exports.isFunction = isFunction;
 exports.isNumber = isNumber;
 exports.isStringNumber = isStringNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/roomkit-electron-vue3",
-  "version": "2.6.7",
+  "version": "2.7.1",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@tencentcloud/chat": "latest",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-electron": "^2.6.7",
+    "@tencentcloud/tuiroom-engine-electron": "^2.7.1",
     "@tencentcloud/chat-uikit-engine": "2.2.7",
     "@tencentcloud/chat-uikit-vue": "2.2.7",
     "@tencentcloud/universal-api": "^2.0.9",
@@ -40,7 +40,7 @@
     "hotkeys-js": "^3.10.1"
   },
   "peerDependencies": {
-    "pinia": "^2.1.7",
+    "pinia": "2.0.24",
     "vue": "~3.3.13",
     "electron": ">=4.0.0"
   },

package/src/TUIRoom/components/AITools/AISubtitles.vue

@@ -1,37 +1,40 @@
 <template>
   <div v-if="subtitleLines.length" class="ai-subtitles">
-    <div v-for="(line, index) in subtitleLines" :key="index">{{ line }}</div>
+    <div v-for="line in subtitleLines" :key="line.sender">
+      {{
+        `${roomService.roomStore.getDisplayName(line.sender)}: ${line?.text}`
+      }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onUnmounted } from 'vue';
-import { roomService, AI_TASK, AITaskEvent } from '../../services';
-
-const rawSubtitleText = ref('');
-const subtitleLines = computed(() =>
-  rawSubtitleText.value.split('\n').filter(item => item)
-);
-
-let subtitleTimeout: ReturnType<typeof setTimeout> | null = null;
-
-const resetSubtitleTimeout = () => {
-  if (subtitleTimeout) {
-    clearTimeout(subtitleTimeout);
-  }
-
-  subtitleTimeout = setTimeout(() => {
-    rawSubtitleText.value = '';
-  }, 3000);
-};
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import {
+  AI_TASK,
+  AITaskEvent,
+  MetricsKey,
+  roomService,
+  SubtitleMessage,
+} from '../../services';
+
+const subtitleMessages = ref<Record<string, SubtitleMessage>>({});
+const subtitleLines = computed(() => {
+  const arr = Object.keys(subtitleMessages.value).map(userId => {
+    return subtitleMessages.value[userId];
+  });
+  return arr.sort((a, b) => a.startMsTs - b.startMsTs);
+});
 
 const handleAISubtitles = (data?: AITaskEvent[AI_TASK.TRANSCRIPTION_TASK]) => {
   if (!data) return;
-  rawSubtitleText.value = data.subtitleText.value;
-  resetSubtitleTimeout();
+  subtitleMessages.value = Object.assign({}, data.subtitleMessages);
 };
 
-roomService.aiTask.on(AI_TASK.TRANSCRIPTION_TASK, handleAISubtitles);
+onMounted(() => {
+  roomService.dataReportManager.reportCount(MetricsKey.AITask);
+  roomService.aiTask.on(AI_TASK.TRANSCRIPTION_TASK, handleAISubtitles);
+});
 
 onUnmounted(() => {
   roomService.aiTask.off(AI_TASK.TRANSCRIPTION_TASK, handleAISubtitles);

package/src/TUIRoom/components/AITools/AITranscription.vue

@@ -1,141 +1,138 @@
 <template>
-  <div class="conversation" ref="conversationContainer">
+  <div
+    class="conversation"
+    ref="conversationContainerRef"
+    @scroll="handleScroll"
+  >
     <div
-      v-for="(item, index) in conversations"
-      :key="index"
-      class="conversation-item"
+      v-for="group in transcribedMessageList"
+      :key="group.startMsTs"
+      class="conversation-group"
     >
       <div class="title">
-        <span class="speaker">{{ item.speaker }}</span>
-        <span class="timestamp">{{ item.timestamp }}</span>
+        <span class="speaker">{{
+          roomService.roomStore.getDisplayName(group.sender)
+        }}</span>
+        <span class="timestamp">
+          {{ formatTimestampToTime(group.startMsTs) }}
+        </span>
       </div>
-      <div class="content">
-        <div v-for="(msg, msgIndex) in item.messages" :key="msgIndex">
-          {{ msg }}
-        </div>
+      <div
+        v-for="(message, messageIndex) in group.messages"
+        :key="messageIndex"
+        class="content"
+      >
+        {{ message.text }}
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, nextTick } from 'vue';
-import { roomService, AI_TASK } from '../../services';
-
-const conversationContainer = ref<HTMLElement | null>(null);
-
-onMounted(() => scrollToBottom());
-
-const processedConversations = ref<
-  {
-    timestamp: string;
-    speaker: string;
-    content: string;
-  }[]
->(processConversation(roomService.aiTask.transcriptionText.value));
+import { ref, onMounted, computed, nextTick, watch, onUnmounted } from 'vue';
+import {
+  roomService,
+  AI_TASK,
+  SubtitleMessage,
+  MetricsKey,
+} from '../../services';
+import { formatTimestampToTime } from '../../utils/utils.ts';
+
+const conversationContainerRef = ref<HTMLElement>();
+const isUserScrolling = ref(false);
+const timeInterval = 60 * 1000;
+const rawTranscribedMessageList = ref<SubtitleMessage[]>(
+  roomService.aiTask.transcribedMessageList
+);
+
+onMounted(() => {
+  scrollToBottom();
+});
 
 const scrollToBottom = async () => {
-  if (conversationContainer.value) {
+  if (conversationContainerRef.value && !isUserScrolling.value) {
     await nextTick();
-    conversationContainer.value.scrollIntoView({ block: 'end' });
+    conversationContainerRef.value.scrollTop =
+      conversationContainerRef.value.scrollHeight;
   }
 };
 
-const conversations = computed(() => {
-  const result = [];
-  let currentSpeaker: string | null = null;
-  let currentTimestamp: string | null = null;
-  let currentMessages: string[] = [];
+const handleScroll = () => {
+  if (conversationContainerRef.value) {
+    const isAtBottom =
+      conversationContainerRef.value.scrollTop +
+        conversationContainerRef.value.clientHeight >=
+      conversationContainerRef.value.scrollHeight - 5;
+    if (isAtBottom) {
+      isUserScrolling.value = false;
+      scrollToBottom();
+    } else {
+      isUserScrolling.value = true;
+    }
+  }
+};
 
-  processedConversations.value.forEach(item => {
-    const [start, end] = item.timestamp.split('->');
-    const timestampMinute = start.slice(0, 5); // Take the "HH:MM" part
+const transcribedMessageList = computed(() => {
+  const aggregatedMessageList: {
+    sender: string;
+    startMsTs: number;
+    messages: SubtitleMessage[];
+  }[] = [];
+  let currentAggregatedMessage: {
+    sender: string;
+    startMsTs: number;
+    messages: SubtitleMessage[];
+  } | null = null;
 
+  for (const message of rawTranscribedMessageList.value) {
     if (
-      item.speaker === currentSpeaker &&
-      timestampMinute === currentTimestamp
+      !currentAggregatedMessage ||
+      message.sender !== currentAggregatedMessage.sender ||
+      message.startMsTs - currentAggregatedMessage.startMsTs > timeInterval
     ) {
-      // Aggregate messages from the same speaker and within the same minute
-      currentMessages.push(item.content);
+      currentAggregatedMessage = {
+        messages: [message],
+        sender: message.sender,
+        startMsTs: message.startMsTs,
+      };
+      aggregatedMessageList.push(currentAggregatedMessage);
     } else {
-      // New speakers or different minutes, save previous aggregation results
-      if (currentSpeaker !== null) {
-        result.push({
-          timestamp: currentTimestamp,
-          speaker: currentSpeaker,
-          messages: currentMessages,
-        });
-      }
-      // Update active speaker, timestamp, and message
-      currentSpeaker = item.speaker;
-      currentTimestamp = timestampMinute;
-      currentMessages = [item.content];
+      currentAggregatedMessage.messages.push(message);
     }
-  });
-
-  // Save the last set of aggregation results
-  if (currentSpeaker !== null) {
-    result.push({
-      timestamp: currentTimestamp,
-      speaker: currentSpeaker,
-      messages: currentMessages,
-    });
   }
 
-  return result;
+  return aggregatedMessageList;
 });
 
-roomService.aiTask.on(AI_TASK.TRANSCRIPTION_TASK, data => {
-  if (!data) return;
-  processedConversations.value = processConversation(
-    data.transcriptionText.value
-  );
+watch(rawTranscribedMessageList, () => {
+  scrollToBottom();
 });
 
-function processConversation(data: string) {
-  const pattern =
-    /(\d{2}:\d{2}:\d{2}->\d{2}:\d{2}:\d{2})\s+([\u4e00-\u9fa5\w]+):\s*(.*)/;
-
-  const conversations: {
-    timestamp: string;
-    speaker: string;
-    content: string;
-  }[] = [];
-
-  const lines = data.split('\n');
-
-  lines.forEach(line => {
-    const match = pattern.exec(line);
-    if (match) {
-      const timestamp = match[1];
-      const speaker = match[2];
-      const content = match[3];
-      conversations.push({
-        timestamp,
-        speaker,
-        content,
-      });
-    }
-  });
-
-  conversations.sort((a, b) => {
-    const timeA = a.timestamp.split('->')[0];
-    const timeB = b.timestamp.split('->')[0];
-    return timeA.localeCompare(timeB);
-  });
-
-  return conversations;
-}
+const handleAITranscriptionTask = async (data?: {
+  subtitleMessages: { [key: string]: SubtitleMessage };
+  transcribedMessageList: SubtitleMessage[];
+}) => {
+  if (!data) return;
+  rawTranscribedMessageList.value = [...data.transcribedMessageList];
+};
+onMounted(() => {
+  roomService.dataReportManager.reportCount(MetricsKey.AITask);
+  roomService.aiTask.on(AI_TASK.TRANSCRIPTION_TASK, handleAITranscriptionTask);
+});
+onUnmounted(() => {
+  roomService.aiTask.off(AI_TASK.TRANSCRIPTION_TASK, handleAITranscriptionTask);
+});
 </script>
 
 <style scoped lang="scss">
 .conversation {
+  height: 100%;
   padding: 20px;
   overflow-y: auto;
 }
 
-.conversation-item {
-  margin-bottom: 10px;
+.conversation-group {
+  margin-bottom: 20px;
 }
 
 .title {
@@ -147,10 +144,18 @@ function processConversation(data: string) {
   line-height: 22px;
   color: var(--font-color-4);
   text-align: left;
+
+  .speaker {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 .content {
   padding: 8px;
+  margin-top: 5px;
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;

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

@@ -30,6 +30,7 @@ const basicStore = useBasicStore();
 
 const defaultHideFeaturesButtons = [
   'InputFace',
+  'InputStickers',
   'InputVoice',
   'InputEvaluation',
   'InputQuickReplies',

package/src/TUIRoom/components/ManageMember/MemberControl/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="member-control-container">
     <tui-button
+      v-if="singleControl"
       class="button"
       size="default"
       @click="singleControl.func(props.userInfo)"
-      v-if="!isCanOperateMySelf"
     >
       {{ singleControl?.title }}
     </tui-button>
@@ -47,7 +47,8 @@
         <span>{{ dialogData.content }}</span>
         <tui-input
           v-if="dialogData.showInput"
-          v-model="tempUserName"
+          :model-value="tempUserName"
+          @input="tempUserName = $event"
           class="dialog-input"
           :placeholder="t('Please input user name')"
         />
@@ -56,7 +57,7 @@
         <tui-button
           size="default"
           @click="handleAction(props.userInfo)"
-          :disabled="tempUserName.length === 0"
+          :disabled="dialogData.isConfirmButtonDisable"
         >
           {{ dialogData.confirmText }}
         </tui-button>
@@ -74,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, nextTick } from 'vue';
+import { ref, watch, computed, nextTick, defineProps } from 'vue';
 import { useI18n } from '../../../locales';
 import TuiButton from '../../common/base/Button.vue';
 import Dialog from '../../common/base/Dialog/index.vue';
@@ -104,9 +105,14 @@ const {
 
 const { isCanOperateMySelf } = useMemberItemHooks(props.userInfo);
 
-const singleControl = computed(() => controlList.value[0]);
+const singleControl = computed(() => {
+  return isCanOperateMySelf.value ? null : controlList.value[0];
+});
+
 const moreControlList = computed(() => {
-  return isCanOperateMySelf ? controlList.value : controlList.value.slice(1);
+  return isCanOperateMySelf.value
+    ? controlList.value
+    : controlList.value.slice(1);
 });
 const dropdownClass = ref('down');
 const moreBtnRef = ref();
@@ -132,6 +138,7 @@ async function toggleClickMoreBtn() {
 }
 
 async function handleDropDownPosition() {
+  // eslint-disable-next-line no-unsafe-optional-chaining
   const { top, bottom } = moreBtnRef.value?.getBoundingClientRect();
   const { top: containerTop, bottom: containerBottom } = document
     .getElementById('memberListContainer')

package/src/TUIRoom/components/ManageMember/MemberControl/useMemberControlHooks.ts

@@ -1,4 +1,4 @@
-import { computed, Ref, ref } from 'vue';
+import { computed, Ref, ref, Reactive, reactive } from 'vue';
 import { useI18n } from '../../../locales';
 import { UserInfo, useRoomStore } from '../../../stores/room';
 import useGetRoomEngine from '../../../hooks/useRoomEngine';
@@ -45,20 +45,23 @@ export default function useMemberControl(props?: any) {
   const isShowInput: Ref<boolean> = ref(false);
   const editorInputEle = ref();
   const editorInputEleContainer = ref();
-  const tempUserName = ref(props.userInfo.nameCard || props.userInfo.userName);
-  const dialogData: Ref<{
+  const tempUserName = ref('');
+  const dialogData: Reactive<{
     title: string;
     content: string;
     confirmText: string;
     actionType: ActionType;
     showInput: boolean;
-  }> = ref({
+    isConfirmButtonDisable: boolean;
+  }> = reactive({
     title: '',
     content: '',
     confirmText: '',
     actionType: '' as ActionType,
     showInput: false,
+    isConfirmButtonDisable: false,
   });
+
   const kickOffDialogContent = computed(() =>
     t('whether to kick sb off the room', {
       name: roomService.getDisplayName(props.userInfo),
@@ -424,7 +427,7 @@ export default function useMemberControl(props?: any) {
     await roomEngine.instance?.kickRemoteUserOutOfRoom({
       userId: userInfo.userId,
     });
-    roomStore.removeRemoteUser(userInfo.userId);
+    roomStore.removeUserInfo(userInfo.userId);
   }
 
   /**
@@ -490,17 +493,18 @@ export default function useMemberControl(props?: any) {
     switch (action) {
       case 'kickUser':
         isDialogVisible.value = true;
-        dialogData.value = {
+        Object.assign(dialogData, {
           title: t('Note'),
           content: kickOffDialogContent.value,
           confirmText: t('Confirm'),
           actionType: action,
           showInput: false,
-        };
+          isConfirmButtonDisable: false,
+        });
         break;
       case 'transferOwner':
         isDialogVisible.value = true;
-        dialogData.value = {
+        Object.assign(dialogData, {
           title: transferOwnerTitle.value,
           content: t(
             'After transfer the room owner, you will become a general user'
@@ -508,22 +512,25 @@ export default function useMemberControl(props?: any) {
           confirmText: t('Confirm transfer'),
           actionType: action,
           showInput: false,
-        };
+          isConfirmButtonDisable: false,
+        });
         break;
       case 'changeUserNameCard':
+        tempUserName.value = props.userInfo.nameCard || props.userInfo.userName;
         if (isMobile) {
           isShowInput.value = true;
           document?.body?.appendChild(editorInputEleContainer.value);
         } else {
           isDialogVisible.value = true;
         }
-        dialogData.value = {
+        Object.assign(dialogData, {
           title: t('change name'),
           content: '',
           confirmText: t('Confirm'),
           actionType: action,
           showInput: true,
-        };
+          isConfirmButtonDisable: computed(() => tempUserName.value === ''),
+        });
         break;
     }
   }
@@ -564,7 +571,7 @@ export default function useMemberControl(props?: any) {
   }
 
   function handleAction(userInfo: UserInfo) {
-    switch (dialogData.value.actionType) {
+    switch (dialogData.actionType) {
       case 'kickUser':
         kickOffUser(userInfo);
         break;

package/src/TUIRoom/components/ManageMember/MemberInvite/MemberInvite.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="member-invite-container">
-    <div class="member-invite-item">
-      <Avatar class="avatar-url" :img-src="userInfo.avatarUrl" />
-      <div class="user-name">{{ userInfo.userId || userInfo.userName }}</div>
-    </div>
     <span class="member-invite-reject" v-if="showReject">{{
       t('Not joining for now')
     }}</span>
@@ -22,7 +18,6 @@
 <script setup lang="ts">
 import { ref, watch, defineProps } from 'vue';
 import { UserInfo } from '../../../stores/room';
-import Avatar from '../../common/Avatar.vue';
 import TuiButton from '../../common/base/Button.vue';
 import { useI18n } from '../../../locales';
 import { roomService, TUIInvitationStatus } from '../../../services';
@@ -62,21 +57,9 @@ watch(props.userInfo, val => {
 <style lang="scss" scoped>
 .member-invite-container {
   display: flex;
+  justify-content: end;
   width: 100%;
 
-  .member-invite-item {
-    display: flex;
-    flex: 1;
-    align-items: center;
-  }
-
-  .avatar-url {
-    display: flex;
-    align-items: center;
-    width: 32px;
-    height: 32px;
-  }
-
   .member-invite-reject {
     display: flex;
     align-self: center;
@@ -98,17 +81,5 @@ watch(props.userInfo, val => {
   .button {
     width: 68px;
   }
-
-  .user-name {
-    max-width: 100px;
-    margin-left: 12px;
-    overflow: hidden;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    color: var(--font-color-1);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 }
 </style>

package/src/TUIRoom/components/ManageMember/MemberItem/index.vue

@@ -5,21 +5,14 @@
     @mouseleave="closeMemberControl"
   >
     <member-info
-      v-show="props.userCurrentStatus !== USERS_STATUS.NOT_ENTER"
       :user-info="props.userInfo"
-      :show-state-icon="!showMemberControl"
+      :show-state-icon="props.userInfo.isInRoom && !showMemberControl"
     />
     <member-control
-      v-show="
-        showMemberControl && props.userCurrentStatus !== USERS_STATUS.NOT_ENTER
-      "
+      v-show="showMemberControl && props.userInfo.isInRoom"
       :show-member-control="showMemberControl"
       :user-info="props.userInfo"
     />
-    <member-invite
-      v-show="props.userCurrentStatus === USERS_STATUS.NOT_ENTER"
-      :user-info="props.userInfo"
-    />
   </div>
 </template>
 
@@ -27,14 +20,11 @@
 import { ref, watch, defineProps } from 'vue';
 import MemberInfo from '../MemberItemCommon/MemberInfo.vue';
 import MemberControl from '../MemberControl/index.vue';
-import MemberInvite from '../MemberInvite/MemberInvite.vue';
 import { UserInfo } from '../../../stores/room';
 import useMemberItem from './useMemberItemHooks';
-import { USERS_STATUS } from '../../../constants/room';
 
 interface Props {
   userInfo: UserInfo;
-  userCurrentStatus: USERS_STATUS;
 }
 
 const props = defineProps<Props>();