@tencentcloud/roomkit-electron-vue3 2.7.0 → 2.7.2

package/lib/preConference.vue2.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const Vue = require("vue");
-const index = require("./components/RoomHeader/UserInfo/index.vue.js");
-const index$1 = require("./components/RoomHome/RoomControl/index.vue.js");
+const index$1 = require("./components/RoomHeader/UserInfo/index.vue.js");
+const index$2 = require("./components/RoomHome/RoomControl/index.vue.js");
 const Language_vue_vue_type_script_setup_true_lang = require("./components/common/Language.vue.js");
 const SwitchTheme_vue_vue_type_script_setup_true_lang = require("./components/common/SwitchTheme.vue.js");
 require("./services/main.js");
@@ -16,7 +16,7 @@ require("@tencentcloud/tui-core");
 const environment = require("./utils/environment.js");
 const ScheduleRoomList = require("./components/ScheduleConference/ScheduleRoomList.vue.js");
 const Logo = require("./components/common/Logo.vue.js");
-const index$2 = require("./components/common/base/MessageBox/index.js");
+const index = require("./components/common/base/MessageBox/index.js");
 const Message = require("./components/common/base/Message/Message.js");
 const InvitationNotification = require("./components/RoomInvite/InvitationNotification.vue.js");
 const _hoisted_1 = { class: "header" };
@@ -75,7 +75,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         callback = () => {
         }
       } = data;
-      index$2.default({
+      index.default({
         title,
         message,
         duration,
@@ -111,7 +111,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           ]),
           Vue.createElementVNode("div", _hoisted_3, [
             Vue.createVNode(Language_vue_vue_type_script_setup_true_lang.default, { class: "header-item language" }),
-            Vue.createVNode(index.default, {
+            Vue.createVNode(index$1.default, {
               class: "header-item user-info",
               "user-id": props.userInfo.userId,
               "user-name": props.userInfo.userName,
@@ -122,7 +122,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             }, null, 8, ["user-id", "user-name", "avatar-url", "is-show-edit-name"])
           ])
         ]),
-        Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(index$1.default, {
+        Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(index$2.default, {
           key: 0,
           ref_key: "roomControlRef",
           ref: roomControlRef,
@@ -136,7 +136,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             [Vue.vShow, props.isShowLogo]
           ]),
           Vue.createElementVNode("div", _hoisted_5, [
-            Vue.createVNode(index$1.default, {
+            Vue.createVNode(index$2.default, {
               ref_key: "roomControlRef",
               ref: roomControlRef,
               "given-room-id": props.roomId,

package/lib/services/function/aiTask.d.ts

@@ -1,22 +1,21 @@
 import { IRoomService } from '../';
 
-interface SubtitleMessage {
-    userid: string;
+export interface SubtitleMessage {
+    sender: string;
     text: string;
-    translation_text: string;
+    translationText: string;
+    end?: boolean;
+    startMsTs: number;
 }
 export declare enum AI_TASK {
     TRANSCRIPTION_TASK = "transcription"
 }
 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;
@@ -25,13 +24,11 @@ export declare class AITask {
     private emitter;
     private trtc;
     private service;
-    subtitleMsg: SubtitleMessage[];
-    subtitleText: {
-        value: string;
-    };
-    transcriptionText: {
-        value: string;
+    subtitleMessages: {
+        [key: string]: SubtitleMessage;
     };
+    transcribedMessageList: SubtitleMessage[];
+    private subtitleTimeout;
     constructor(service: IRoomService);
     private bindCtx;
     on<T extends keyof AITaskEvent>(eventType: T, callback: (data?: AITaskEvent[T]) => void): void;
@@ -41,8 +38,7 @@ export declare class AITask {
     private handleMount;
     private handleUnmount;
     private bindEvent;
+    private resetSubtitleTimeout;
     private handleAIMessage;
     private handleMessage;
-    StartAITranscription(): void;
 }
-export {};

package/lib/services/function/aiTask.js

@@ -5,18 +5,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const mitt = require("mitt");
 const environment = require("../../utils/environment.js");
+const utils = require("../../utils/utils.js");
 var AI_TASK = /* @__PURE__ */ ((AI_TASK2) => {
   AI_TASK2["TRANSCRIPTION_TASK"] = "transcription";
   return AI_TASK2;
 })(AI_TASK || {});
+const ASR_EVENT_CODE = 1e4;
 class AITask {
   constructor(service) {
     __publicField(this, "emitter", mitt());
     __publicField(this, "trtc");
     __publicField(this, "service");
-    __publicField(this, "subtitleMsg", []);
-    __publicField(this, "subtitleText", { value: "" });
-    __publicField(this, "transcriptionText", { value: "" });
+    __publicField(this, "subtitleMessages", {});
+    __publicField(this, "transcribedMessageList", []);
+    __publicField(this, "subtitleTimeout", {});
     this.service = service;
     if (environment.isElectron || environment.isMobile) return;
     this.bindCtx();
@@ -45,126 +47,87 @@ class AITask {
     if (typeof ((_a = this.service.roomEngine.instance) == null ? void 0 : _a.getTRTCCloud) === "undefined" || typeof ((_c = (_b = this.service.roomEngine.instance) == null ? void 0 : _b.getTRTCCloud()) == null ? void 0 : _c._trtc) === "undefined") {
       return;
     }
-    const trtc = (_d = this.service.roomEngine.instance) == null ? void 0 : _d.getTRTCCloud()._trtc;
-    this.trtc = trtc;
-    trtc.on("custom-message", this.handleAIMessage);
+    this.trtc = (_d = this.service.roomEngine.instance) == null ? void 0 : _d.getTRTCCloud()._trtc;
+    this.trtc.on("custom-message", this.handleAIMessage);
   }
   handleUnmount() {
     var _a;
-    this.subtitleMsg = [];
-    this.subtitleText.value = "";
-    this.transcriptionText.value = "";
+    this.subtitleMessages = {};
+    this.transcribedMessageList = [];
     (_a = this.trtc) == null ? void 0 : _a.off("custom-message", this.handleAIMessage);
   }
   bindEvent() {
     this.service.lifeCycleManager.on("mount", this.handleMount);
     this.service.lifeCycleManager.on("unmount", this.handleUnmount);
   }
-  // todo trtc defines this type as any
+  resetSubtitleTimeout(id, fn) {
+    if (this.subtitleTimeout[id]) {
+      clearTimeout(this.subtitleTimeout[id]);
+    }
+    this.subtitleTimeout[id] = setTimeout(fn, 3e3);
+  }
   handleAIMessage(event) {
     if (event.cmdId !== 1) return;
     const data = new TextDecoder().decode(event.data);
     const jsonData = JSON.parse(data);
     this.handleMessage(jsonData);
     this.emit("transcription", {
-      subtitleText: this.subtitleText,
-      transcriptionText: this.transcriptionText,
-      subtitleMsg: this.subtitleMsg
+      subtitleMessages: this.subtitleMessages,
+      transcribedMessageList: this.transcribedMessageList
     });
   }
   handleMessage(data) {
-    const refreshSubtitle = () => {
-      let displayText = "";
-      for (let i = 0; i < this.subtitleMsg.length; i++) {
-        displayText += `${this.service.roomStore.getDisplayName(this.subtitleMsg[i].userid)}: ${this.subtitleMsg[i].text}
-`;
-        if (this.subtitleMsg[i].translation_text !== "") {
-          displayText += `${this.service.roomStore.getDisplayName(this.subtitleMsg[i].userid)}: ${this.subtitleMsg[i].translation_text}
-`;
-        }
-      }
-      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 === 1e4 && data.payload.end === false) {
-      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
-        });
-      }
-      refreshSubtitle();
-    } else if (data.type === 1e4 && data.payload.end === true) {
-      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;
-          break;
-        }
-      }
-      refreshSubtitle();
-      let content = `${data.payload.start_time}->${data.payload.end_time}  ${data.sender}: ${data.payload.text}
-`;
-      if (data.payload.translation_text !== "") {
-        content += `${data.payload.start_time}->${data.payload.end_time}  ${data.sender}: ${data.payload.translation_text}
-`;
+    const updateMsg = (msg) => {
+      msg.text = payload.text;
+      msg.translationText = payload.translation_text;
+      msg.end = end;
+    };
+    const appendMsg = (msg, target) => {
+      if (Array.isArray(target)) {
+        target.push(msg);
+      } else if (typeof target === "object") {
+        const recordTarget = target;
+        recordTarget[msg.sender] = msg;
+      } else {
+        throw new Error("Invalid target type");
       }
-      this.transcriptionText.value += content;
+    };
+    const existingSubtitle = this.subtitleMessages[sender];
+    if (existingSubtitle) {
+      updateMsg(existingSubtitle);
+    } else {
+      appendMsg(createSubtitleMsg(), this.subtitleMessages);
     }
-    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") {
-      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;
-          break;
-        }
-      }
-      refreshSubtitle();
-      let content = `${formatTimestampToTime(data.start_ms_ts)}->${formatTimestampToTime(data.end_ms_ts)}  ${this.service.roomStore.getDisplayName(data.userid)}: ${data.text}
-`;
-      if (data.translation_text !== "") {
-        content += `${formatTimestampToTime(data.start_ms_ts)}->${formatTimestampToTime(data.end_ms_ts)}  ${this.service.roomStore.getDisplayName(data.userid)}: ${data.translation_text}
-`;
-      }
-      this.transcriptionText.value += content;
+    const transcriptionIndex = utils.findLastIndex(
+      this.transcribedMessageList,
+      (msg) => msg.sender === sender && !msg.end
+    );
+    if (transcriptionIndex !== -1) {
+      updateMsg(this.transcribedMessageList[transcriptionIndex]);
+    } else {
+      appendMsg(createSubtitleMsg(), this.transcribedMessageList);
     }
+    this.resetSubtitleTimeout(sender, () => {
+      if (!end) return;
+      delete this.subtitleMessages[sender];
+      this.emit("transcription", {
+        subtitleMessages: this.subtitleMessages,
+        transcribedMessageList: this.transcribedMessageList
+      });
+    });
   }
-  StartAITranscription() {
-  }
-}
-function formatTimestampToTime(timestamp) {
-  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}`;
 }
 exports.AITask = AITask;
 exports.AI_TASK = AI_TASK;

package/lib/services/manager/dataReportManager.d.ts

@@ -10,7 +10,10 @@ export declare enum MetricsKey {
     disableScreenSharing = 106053,
     enableWatermark = 106054,
     enableVirtualBackground = 106055,
-    hideFeatureButton = 106056
+    hideFeatureButton = 106056,
+    openChat = 106057,
+    setBasicBeauty = 106058,
+    aiTask = 106059
 }
 export declare class DataReportManager {
     private taskQueue;

package/lib/services/manager/dataReportManager.js

@@ -18,6 +18,9 @@ var MetricsKey = /* @__PURE__ */ ((MetricsKey2) => {
   MetricsKey2[MetricsKey2["enableWatermark"] = 106054] = "enableWatermark";
   MetricsKey2[MetricsKey2["enableVirtualBackground"] = 106055] = "enableVirtualBackground";
   MetricsKey2[MetricsKey2["hideFeatureButton"] = 106056] = "hideFeatureButton";
+  MetricsKey2[MetricsKey2["openChat"] = 106057] = "openChat";
+  MetricsKey2[MetricsKey2["setBasicBeauty"] = 106058] = "setBasicBeauty";
+  MetricsKey2[MetricsKey2["aiTask"] = 106059] = "aiTask";
   return MetricsKey2;
 })(MetricsKey || {});
 class DataReportManager {

package/lib/stores/room.js

@@ -412,9 +412,6 @@ const useRoomStore = pinia.defineStore("room", {
     updateVideoQuality(quality) {
       this.localVideoQuality = quality;
     },
-    setLocalUser(obj) {
-      Object.assign(this.localUser, obj);
-    },
     setDeviceList(type, deviceList) {
       switch (type) {
         case TUIRoomEngine.TUIMediaDeviceType.kMediaDeviceTypeVideoCamera:

package/lib/utils/utils.d.ts

@@ -60,3 +60,5 @@ export declare function convertSecondsToHMS(seconds: number): {
     seconds: number;
 };
 export declare function getNanoId(size?: number): string;
+export declare function findLastIndex<T>(array: T[], predicate: (value: T, index: number, obj: T[]) => boolean, thisArg?: any): number;
+export declare function formatTimestampToTime(timestamp: number, format?: string): string;

package/lib/utils/utils.js

@@ -147,12 +147,45 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/roomkit-electron-vue3",
-  "version": "2.7.0",
+  "version": "2.7.2",
   "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.7.0",
+    "@tencentcloud/tuiroom-engine-electron": "^2.7.2",
     "@tencentcloud/chat-uikit-engine": "2.2.7",
     "@tencentcloud/chat-uikit-vue": "2.2.7",
     "@tencentcloud/universal-api": "^2.0.9",

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);