@tencentcloud/roomkit-electron-vue3 2.7.0 → 2.7.2

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/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>
@@ -105,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();

package/src/TUIRoom/components/ManageMember/MemberItemCommon/MemberInfo.vue

@@ -221,7 +221,7 @@ const iconList = computed(() => {
     height: 100%;
     color: var(--icon-color);
 
-    .state-icon .member-invite {
+    .state-icon {
       margin-left: 16px;
     }
 

package/src/TUIRoom/components/RoomFooter/BasicBeauty.vue

@@ -108,7 +108,7 @@ import IconButton from '../common/base/IconButton.vue';
 import SvgIcon from '../common/base/SvgIcon.vue';
 import BasicBeautyIcon from '../common/icons/BasicBeautyIcon.vue';
 import { useI18n } from '../../locales';
-import { roomService } from '../../services';
+import { roomService, MetricsKey } from '../../services';
 import Dialog from '../common/base/Dialog/index.vue';
 import TuiButton from '../common/base/Button.vue';
 import Slider from '../common/base/Slider.vue';
@@ -197,6 +197,7 @@ const openBeautySettingPanel = async () => {
     view: 'test-preview',
   });
   isLoading.value = false;
+  roomService.dataReportManager.reportCount(MetricsKey.setBasicBeauty);
 };
 
 const closeBeautySettingPanel = async () => {

package/src/TUIRoom/components/RoomFooter/ChatControl.vue

@@ -23,7 +23,7 @@ import { useChatStore } from '../../stores/chat';
 import { storeToRefs } from 'pinia';
 import { useI18n } from '../../locales';
 import TuiBadge from '../common/base/Badge.vue';
-import { roomService } from '../../services';
+import { roomService, MetricsKey } from '../../services';
 const { t } = useI18n();
 const chatControlConfig = roomService.getComponentConfig('ChatControl');
 const basicStore = useBasicStore();
@@ -39,5 +39,6 @@ async function toggleChatSidebar() {
   basicStore.setSidebarOpenStatus(true);
   basicStore.setSidebarName('chat');
   chatStore.updateUnReadCount(0);
+  roomService.dataReportManager.reportCount(MetricsKey.openChat);
 }
 </script>

package/src/TUIRoom/components/RoomHeader/UserInfo/index.vue

@@ -97,11 +97,8 @@ const props = defineProps<{
   isShowEditName?: boolean;
 }>();
 
-/**
- * Save the new userName
- *
- **/
 async function saveUserName(userName: string) {
+  const { userId } = props;
   if (userName.length === 0) {
     TUIMessage({
       type: 'warning',
@@ -115,7 +112,7 @@ async function saveUserName(userName: string) {
     avatarUrl: roomStore.localUser.avatarUrl || '',
   });
   basicStore.setUserName(userName);
-  roomStore.setLocalUser({ userName });
+  roomStore.updateUserInfo({ userId, userName });
   emits('update-user-name', userName);
   closeUserNameEditor();
 }

package/src/TUIRoom/services/function/aiTask.ts

@@ -1,12 +1,16 @@
 import { IRoomService } from '../';
 import mitt from 'mitt';
 import { isElectron, isMobile } from '../../utils/environment';
+import { findLastIndex } from '../../utils/utils';
 
-interface SubtitleMessage {
-  userid: string;
+export interface SubtitleMessage {
+  sender: string;
   text: string;
-  translation_text: string;
+  translationText: string;
+  end?: boolean;
+  startMsTs: number;
 }
+
 interface DataPayload {
   end: boolean;
   text: string;
@@ -34,22 +38,23 @@ export enum AI_TASK {
 
 export interface AITaskEvent {
   [AI_TASK.TRANSCRIPTION_TASK]: {
-    subtitleMsg: SubtitleMessage[];
-    subtitleText: { value: string };
-    transcriptionText: { value: string };
+    subtitleMessages: { [key: string]: SubtitleMessage };
+    transcribedMessageList: SubtitleMessage[];
   };
   [key: string]: unknown;
   [key: symbol]: unknown;
 }
 
+const ASR_EVENT_CODE = 10000;
+
 export class AITask {
   private emitter = mitt<AITaskEvent>();
-
   private trtc: any;
   private service: IRoomService;
-  public subtitleMsg: SubtitleMessage[] = [];
-  public subtitleText: { value: string } = { value: '' };
-  public transcriptionText: { value: string } = { value: '' };
+  public subtitleMessages: { [key: string]: SubtitleMessage } = {};
+  public transcribedMessageList: SubtitleMessage[] = [];
+  private subtitleTimeout: { [key: string]: ReturnType<typeof setTimeout> } =
+    {};
 
   constructor(service: IRoomService) {
     this.service = service;
@@ -95,14 +100,13 @@ export class AITask {
     ) {
       return;
     }
-    const trtc = this.service.roomEngine.instance?.getTRTCCloud()._trtc;
-    this.trtc = trtc;
-    trtc.on('custom-message', this.handleAIMessage);
+    this.trtc = this.service.roomEngine.instance?.getTRTCCloud()._trtc;
+    this.trtc.on('custom-message', this.handleAIMessage);
   }
+
   private handleUnmount() {
-    this.subtitleMsg = [];
-    this.subtitleText.value = '';
-    this.transcriptionText.value = '';
+    this.subtitleMessages = {};
+    this.transcribedMessageList = [];
     this.trtc?.off('custom-message', this.handleAIMessage);
   }
 
@@ -111,122 +115,84 @@ export class AITask {
     this.service.lifeCycleManager.on('unmount', this.handleUnmount);
   }
 
-  // todo trtc defines this type as any
+  private resetSubtitleTimeout(id: string, fn: () => void) {
+    if (this.subtitleTimeout[id]) {
+      clearTimeout(this.subtitleTimeout[id]);
+    }
+    this.subtitleTimeout[id] = setTimeout(fn, 3000);
+  }
+
   private handleAIMessage(event: any) {
     if (event.cmdId !== 1) return;
     const data = new TextDecoder().decode(event.data);
     const jsonData = JSON.parse(data);
     this.handleMessage(jsonData);
     this.emit(AI_TASK.TRANSCRIPTION_TASK, {
-      subtitleText: this.subtitleText,
-      transcriptionText: this.transcriptionText,
-      subtitleMsg: this.subtitleMsg,
+      subtitleMessages: this.subtitleMessages,
+      transcribedMessageList: this.transcribedMessageList,
     });
   }
 
   private handleMessage(data: MessageData): void {
-    const refreshSubtitle = (): void => {
-      let displayText = '';
-      for (let i = 0; i < this.subtitleMsg.length; i++) {
-        displayText += `${this.service.roomStore.getDisplayName(this.subtitleMsg[i].userid)}: ${this.subtitleMsg[i].text}\n`;
-        if (this.subtitleMsg[i].translation_text !== '') {
-          displayText += `${this.service.roomStore.getDisplayName(this.subtitleMsg[i].userid)}: ${this.subtitleMsg[i].translation_text}\n`;
-        }
-      }
-      this.subtitleText.value = displayText;
+    if (data.type !== ASR_EVENT_CODE) return;
+    const { sender, payload } = data;
+    const { end } = payload;
+
+    const createSubtitleMsg = () => {
+      return {
+        sender,
+        text: payload.text,
+        translationText: payload.translation_text,
+        startMsTs: data.start_ms_ts,
+        end,
+      };
     };
 
-    if (data.type === 10000 && data.payload.end === false) {
-      // Real-time subtitles
-      let exist = false;
-      for (let i = 0; i < this.subtitleMsg.length; i++) {
-        if (data.sender === this.subtitleMsg[i].userid) {
-          this.subtitleMsg[i].text = data.payload.text;
-          this.subtitleMsg[i].translation_text = data.payload.translation_text;
-          exist = true;
-          break;
-        }
-      }
-      if (!exist) {
-        this.subtitleMsg.push({
-          userid: data.sender,
-          text: data.payload.text,
-          translation_text: data.payload.translation_text,
-        });
-      }
+    const updateMsg = (msg: SubtitleMessage) => {
+      msg.text = payload.text;
+      msg.translationText = payload.translation_text;
+      msg.end = end;
+    };
 
-      refreshSubtitle();
-    } else if (data.type === 10000 && data.payload.end === true) {
-      // One sentence recognition completed
-      let index = 0;
-      for (let i = 0; i < this.subtitleMsg.length; i++) {
-        if (data.sender === this.subtitleMsg[i].userid) {
-          this.subtitleMsg[i].text = data.payload.text;
-          this.subtitleMsg[i].translation_text = data.payload.translation_text;
-          index = i;
-          break;
-        }
+    const appendMsg = <T extends SubtitleMessage>(
+      msg: T,
+      target: T[] | Record<string, T>
+    ) => {
+      if (Array.isArray(target)) {
+        target.push(msg);
+      } else if (typeof target === 'object') {
+        const recordTarget = target as Record<string, T>;
+        recordTarget[msg.sender] = msg;
+      } else {
+        throw new Error('Invalid target type');
       }
-      refreshSubtitle();
-      // todo start_ms_ts end_ms_ts
+    };
 
-      let content = `${data.payload.start_time}->${data.payload.end_time}  ${data.sender}: ${data.payload.text}\n`;
-      if (data.payload.translation_text !== '') {
-        content += `${data.payload.start_time}->${data.payload.end_time}  ${data.sender}: ${data.payload.translation_text}\n`;
-      }
-      this.transcriptionText.value += content;
+    const existingSubtitle = this.subtitleMessages[sender];
+    if (existingSubtitle) {
+      updateMsg(existingSubtitle);
+    } else {
+      appendMsg(createSubtitleMsg(), this.subtitleMessages);
     }
 
-    // subtitle and transcription  is deprecated
-    if (data.type === 'subtitle') {
-      let exist = false;
-      for (let i = 0; i < this.subtitleMsg.length; i++) {
-        if (data.userid === this.subtitleMsg[i].userid) {
-          this.subtitleMsg[i].text = data.text;
-          this.subtitleMsg[i].translation_text = data.translation_text;
-          exist = true;
-          break;
-        }
-      }
-      if (!exist) {
-        this.subtitleMsg.push({
-          userid: data.userid,
-          text: data.text,
-          translation_text: data.translation_text,
-        });
-      }
-
-      refreshSubtitle();
-    } else if (data.type === 'transcription') {
-      let index = 0;
-      for (let i = 0; i < this.subtitleMsg.length; i++) {
-        if (data.userid === this.subtitleMsg[i].userid) {
-          this.subtitleMsg[i].text = data.text;
-          this.subtitleMsg[i].translation_text = data.translation_text;
-          index = i;
-          break;
-        }
-      }
-      refreshSubtitle();
+    const transcriptionIndex = findLastIndex(
+      this.transcribedMessageList,
+      msg => msg.sender === sender && !msg.end
+    );
 
-      let content = `${formatTimestampToTime(data.start_ms_ts)}->${formatTimestampToTime(data.end_ms_ts)}  ${this.service.roomStore.getDisplayName(data.userid)}: ${data.text}\n`;
-      if (data.translation_text !== '') {
-        content += `${formatTimestampToTime(data.start_ms_ts)}->${formatTimestampToTime(data.end_ms_ts)}  ${this.service.roomStore.getDisplayName(data.userid)}: ${data.translation_text}\n`;
-      }
-      this.transcriptionText.value += content;
+    if (transcriptionIndex !== -1) {
+      updateMsg(this.transcribedMessageList[transcriptionIndex]);
+    } else {
+      appendMsg(createSubtitleMsg(), this.transcribedMessageList);
     }
-  }
 
-  public StartAITranscription(): void {
-    // Implementation for starting AI transcription
+    this.resetSubtitleTimeout(sender, () => {
+      if (!end) return;
+      delete this.subtitleMessages[sender];
+      this.emit(AI_TASK.TRANSCRIPTION_TASK, {
+        subtitleMessages: this.subtitleMessages,
+        transcribedMessageList: this.transcribedMessageList,
+      });
+    });
   }
 }
-
-// utils
-function formatTimestampToTime(timestamp: number): string {
-  const date = new Date(timestamp);
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
-  const seconds = date.getSeconds().toString().padStart(2, '0');
-  return `${hours}:${minutes}:${seconds}`;
-}

package/src/TUIRoom/services/manager/dataReportManager.ts

@@ -16,6 +16,9 @@ export enum MetricsKey {
   enableWatermark = 106054,
   enableVirtualBackground = 106055,
   hideFeatureButton = 106056,
+  openChat = 106057,
+  setBasicBeauty = 106058,
+  aiTask = 106059,
 }
 
 type Task = () => void;

package/src/TUIRoom/stores/room.ts

@@ -530,9 +530,6 @@ export const useRoomStore = defineStore('room', {
     updateVideoQuality(quality: TUIVideoQuality) {
       this.localVideoQuality = quality;
     },
-    setLocalUser(obj: Record<string, any>) {
-      Object.assign(this.localUser, obj);
-    },
     setDeviceList(
       type: TUIMediaDeviceType,
       deviceList: { deviceId: string; deviceName: string }[]