@tencentcloud/roomkit-electron-vue3 2.7.0 → 2.7.2

package/es/services/function/aiTask.mjs

@@ -3,18 +3,20 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import mitt from "mitt";
 import { isElectron, isMobile } from "../../utils/environment.mjs";
+import { findLastIndex } from "../../utils/utils.mjs";
 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 (isElectron || isMobile) return;
     this.bindCtx();
@@ -43,126 +45,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 = 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}`;
 }
 export {
   AITask,

package/es/services/manager/MediaManager.mjs

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import TUIRoomEngine__default, { TUIVideoStreamType, TRTCVideoStreamType, TRTCVideoFillMode, TRTCVideoMirrorType, TRTCVideoRotation, TUIChangeReason, TUIRoomEvents } from "@tencentcloud/tuiroom-engine-electron";
+import TUIRoomEngine__default, { TUIVideoStreamType, TRTCVideoStreamType, TRTCVideoFillMode, TRTCVideoRotation, TRTCVideoMirrorType, TUIChangeReason, TUIRoomEvents } from "@tencentcloud/tuiroom-engine-electron";
 import { EventType } from "../types.mjs";
 import { isMobile } from "../../utils/environment.mjs";
 import { MESSAGE_DURATION } from "../../constants/message.mjs";

package/es/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/es/services/manager/dataReportManager.mjs

@@ -16,6 +16,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/es/services/manager/roomActionManager.mjs

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { TRTCVideoEncParam, TRTCVideoResolution, TUIRoomType, TUISeatMode, TUIMediaDeviceType, TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-electron";
+import { TUISeatMode, TUIRoomType, TUIMediaDeviceType, TRTCVideoEncParam, TUIVideoStreamType, TRTCVideoResolution } from "@tencentcloud/tuiroom-engine-electron";
 import { EventType } from "../types.mjs";
 import { isWeChat, isMobile } from "../../utils/environment.mjs";
 import logger from "../../utils/common/logger/index.mjs";

package/es/services/roomService.mjs

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import mitt from "mitt";
 import useGetRoomEngine from "../hooks/useRoomEngine.mjs";
 import { EventType } from "./types.mjs";
-import TUIRoomEngine__default, { TUIRoomEvents, TUIKickedOutOfRoomReason, TUIRole, TRTCVideoMirrorType, TRTCVideoRotation, TRTCVideoFillMode } from "@tencentcloud/tuiroom-engine-electron";
+import TUIRoomEngine__default, { TUIRoomEvents, TUIKickedOutOfRoomReason, TUIRole, TRTCVideoMirrorType, TRTCVideoFillMode, TRTCVideoRotation } from "@tencentcloud/tuiroom-engine-electron";
 import { useBasicStore } from "../stores/basic.mjs";
 import { useRoomStore } from "../stores/room.mjs";
 import { useChatStore } from "../stores/chat.mjs";

package/es/stores/basic.mjs

@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { getLanguage } from "../utils/common.mjs";
 import { LAYOUT } from "../constants/render.mjs";
 import { isUndefined } from "../utils/utils.mjs";
-import { isElectron, isWeChat, isMobile } from "../utils/environment.mjs";
+import { isMobile, isWeChat, isElectron } from "../utils/environment.mjs";
 function getDefaultLayout() {
   if (isMobile) {
     return isWeChat ? LAYOUT.SIX_EQUAL_POINTS : LAYOUT.LARGE_SMALL_WINDOW;

package/es/stores/room.mjs

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { TUIVideoQuality, TUISeatMode, TUIVideoStreamType, TUIRole, TUIMediaDeviceType, TUIInvitationStatus } from "@tencentcloud/tuiroom-engine-electron";
+import { TUIVideoQuality, TUISeatMode, TUIInvitationStatus, TUIRole, TUIMediaDeviceType, TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-electron";
 import { useBasicStore } from "./basic.mjs";
 import { set, del } from "../utils/vue.mjs";
 import { isMobile } from "../utils/environment.mjs";
@@ -410,9 +410,6 @@ const useRoomStore = defineStore("room", {
     updateVideoQuality(quality) {
       this.localVideoQuality = quality;
     },
-    setLocalUser(obj) {
-      Object.assign(this.localUser, obj);
-    },
     setDeviceList(type, deviceList) {
       switch (type) {
         case TUIMediaDeviceType.kMediaDeviceTypeVideoCamera:

package/es/utils/common/logger/index.mjs

@@ -1,5 +1,5 @@
 import { EUserEventNames } from "./logger-constants.mjs";
-import { getLogPrefix, LogContext, LogLevelType } from "./logger-utils.mjs";
+import { LogLevelType, getLogPrefix, LogContext } from "./logger-utils.mjs";
 let currentLogLevel = LogLevelType.LOG_LEVEL_DEBUG;
 const logger = {
   debug(...args) {

package/es/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/es/utils/utils.mjs

@@ -145,6 +145,37 @@ 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]
+  );
+}
 export {
   addSuffix,
   calculateByteLength,
@@ -152,6 +183,8 @@ export {
   debounce,
   deepClone,
   exitFullScreen,
+  findLastIndex,
+  formatTimestampToTime,
   getNanoId,
   getUrlParam,
   getUrlWithRoomId,

package/lib/components/AITools/AISubtitles.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const AISubtitles_vue_vue_type_script_setup_true_lang = require("./AISubtitles.vue2.js");
 ;/* empty css                  */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const AISubtitlesOverlay = /* @__PURE__ */ _pluginVue_exportHelper.default(AISubtitles_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-720279c8"]]);
+const AISubtitlesOverlay = /* @__PURE__ */ _pluginVue_exportHelper.default(AISubtitles_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-cacf47e3"]]);
 exports.default = AISubtitlesOverlay;

package/lib/components/AITools/AISubtitles.vue2.js

@@ -8,6 +8,7 @@ require("@tencentcloud/tuiroom-engine-electron");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
+const dataReportManager = require("../../services/manager/dataReportManager.js");
 const aiTask = require("../../services/function/aiTask.js");
 const _hoisted_1 = {
   key: 0,
@@ -16,32 +17,30 @@ const _hoisted_1 = {
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "AISubtitles",
   setup(__props) {
-    const rawSubtitleText = Vue.ref("");
-    const subtitleLines = Vue.computed(
-      () => rawSubtitleText.value.split("\n").filter((item) => item)
-    );
-    let subtitleTimeout = null;
-    const resetSubtitleTimeout = () => {
-      if (subtitleTimeout) {
-        clearTimeout(subtitleTimeout);
-      }
-      subtitleTimeout = setTimeout(() => {
-        rawSubtitleText.value = "";
-      }, 3e3);
-    };
+    const subtitleMessages = Vue.ref({});
+    const subtitleLines = Vue.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) => {
       if (!data) return;
-      rawSubtitleText.value = data.subtitleText.value;
-      resetSubtitleTimeout();
+      subtitleMessages.value = Object.assign({}, data.subtitleMessages);
     };
-    roomService.roomService.aiTask.on(aiTask.AI_TASK.TRANSCRIPTION_TASK, handleAISubtitles);
+    Vue.onMounted(() => {
+      roomService.roomService.dataReportManager.reportCount(dataReportManager.MetricsKey.aiTask);
+      roomService.roomService.aiTask.on(aiTask.AI_TASK.TRANSCRIPTION_TASK, handleAISubtitles);
+    });
     Vue.onUnmounted(() => {
       roomService.roomService.aiTask.off(aiTask.AI_TASK.TRANSCRIPTION_TASK, handleAISubtitles);
     });
     return (_ctx, _cache) => {
       return subtitleLines.value.length ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(subtitleLines.value, (line, index) => {
-          return Vue.openBlock(), Vue.createElementBlock("div", { key: index }, Vue.toDisplayString(line), 1);
+        (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(subtitleLines.value, (line) => {
+          return Vue.openBlock(), Vue.createElementBlock("div", {
+            key: line.sender
+          }, Vue.toDisplayString(`${Vue.unref(roomService.roomService).roomStore.getDisplayName(line.sender)}: ${line == null ? void 0 : line.text}`), 1);
         }), 128))
       ])) : Vue.createCommentVNode("", true);
     };

package/lib/components/AITools/AITranscription.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const AITranscription_vue_vue_type_script_setup_true_lang = require("./AITranscription.vue2.js");
 ;/* empty css                      */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const AITranscription = /* @__PURE__ */ _pluginVue_exportHelper.default(AITranscription_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-ef9f284c"]]);
+const AITranscription = /* @__PURE__ */ _pluginVue_exportHelper.default(AITranscription_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-35b9944f"]]);
 exports.default = AITranscription;

package/lib/components/AITools/AITranscription.vue2.js

@@ -8,108 +8,97 @@ require("@tencentcloud/tuiroom-engine-electron");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
+const dataReportManager = require("../../services/manager/dataReportManager.js");
 const aiTask = require("../../services/function/aiTask.js");
+const utils = require("../../utils/utils.js");
 const _hoisted_1 = { class: "title" };
 const _hoisted_2 = { class: "speaker" };
 const _hoisted_3 = { class: "timestamp" };
-const _hoisted_4 = { class: "content" };
+const timeInterval = 60 * 1e3;
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "AITranscription",
   setup(__props) {
-    const conversationContainer = Vue.ref(null);
-    Vue.onMounted(() => scrollToBottom());
-    const processedConversations = Vue.ref(processConversation(roomService.roomService.aiTask.transcriptionText.value));
+    const conversationContainerRef = Vue.ref();
+    const isUserScrolling = Vue.ref(false);
+    const rawTranscribedMessageList = Vue.ref(
+      roomService.roomService.aiTask.transcribedMessageList
+    );
+    Vue.onMounted(() => {
+      scrollToBottom();
+    });
     const scrollToBottom = async () => {
-      if (conversationContainer.value) {
+      if (conversationContainerRef.value && !isUserScrolling.value) {
         await Vue.nextTick();
-        conversationContainer.value.scrollIntoView({ block: "end" });
+        conversationContainerRef.value.scrollTop = conversationContainerRef.value.scrollHeight;
+      }
+    };
+    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;
+        }
       }
     };
-    const conversations = Vue.computed(() => {
-      const result = [];
-      let currentSpeaker = null;
-      let currentTimestamp = null;
-      let currentMessages = [];
-      processedConversations.value.forEach((item) => {
-        const [start, end] = item.timestamp.split("->");
-        const timestampMinute = start.slice(0, 5);
-        if (item.speaker === currentSpeaker && timestampMinute === currentTimestamp) {
-          currentMessages.push(item.content);
+    const transcribedMessageList = Vue.computed(() => {
+      const aggregatedMessageList = [];
+      let currentAggregatedMessage = null;
+      for (const message of rawTranscribedMessageList.value) {
+        if (!currentAggregatedMessage || message.sender !== currentAggregatedMessage.sender || message.startMsTs - currentAggregatedMessage.startMsTs > timeInterval) {
+          currentAggregatedMessage = {
+            messages: [message],
+            sender: message.sender,
+            startMsTs: message.startMsTs
+          };
+          aggregatedMessageList.push(currentAggregatedMessage);
         } else {
-          if (currentSpeaker !== null) {
-            result.push({
-              timestamp: currentTimestamp,
-              speaker: currentSpeaker,
-              messages: currentMessages
-            });
-          }
-          currentSpeaker = item.speaker;
-          currentTimestamp = timestampMinute;
-          currentMessages = [item.content];
+          currentAggregatedMessage.messages.push(message);
         }
-      });
-      if (currentSpeaker !== null) {
-        result.push({
-          timestamp: currentTimestamp,
-          speaker: currentSpeaker,
-          messages: currentMessages
-        });
       }
-      return result;
+      return aggregatedMessageList;
     });
-    roomService.roomService.aiTask.on(aiTask.AI_TASK.TRANSCRIPTION_TASK, (data) => {
+    Vue.watch(rawTranscribedMessageList, () => {
+      scrollToBottom();
+    });
+    const handleAITranscriptionTask = async (data) => {
       if (!data) return;
-      processedConversations.value = processConversation(
-        data.transcriptionText.value
-      );
+      rawTranscribedMessageList.value = [...data.transcribedMessageList];
+    };
+    Vue.onMounted(() => {
+      roomService.roomService.dataReportManager.reportCount(dataReportManager.MetricsKey.aiTask);
+      roomService.roomService.aiTask.on(aiTask.AI_TASK.TRANSCRIPTION_TASK, handleAITranscriptionTask);
+    });
+    Vue.onUnmounted(() => {
+      roomService.roomService.aiTask.off(aiTask.AI_TASK.TRANSCRIPTION_TASK, handleAITranscriptionTask);
     });
-    function processConversation(data) {
-      const pattern = /(\d{2}:\d{2}:\d{2}->\d{2}:\d{2}:\d{2})\s+([\u4e00-\u9fa5\w]+):\s*(.*)/;
-      const conversations2 = [];
-      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];
-          conversations2.push({
-            timestamp,
-            speaker,
-            content
-          });
-        }
-      });
-      conversations2.sort((a, b) => {
-        const timeA = a.timestamp.split("->")[0];
-        const timeB = b.timestamp.split("->")[0];
-        return timeA.localeCompare(timeB);
-      });
-      return conversations2;
-    }
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", {
         class: "conversation",
-        ref_key: "conversationContainer",
-        ref: conversationContainer
+        ref_key: "conversationContainerRef",
+        ref: conversationContainerRef,
+        onScroll: handleScroll
       }, [
-        (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(conversations.value, (item, index) => {
+        (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(transcribedMessageList.value, (group) => {
           return Vue.openBlock(), Vue.createElementBlock("div", {
-            key: index,
-            class: "conversation-item"
+            key: group.startMsTs,
+            class: "conversation-group"
           }, [
             Vue.createElementVNode("div", _hoisted_1, [
-              Vue.createElementVNode("span", _hoisted_2, Vue.toDisplayString(item.speaker), 1),
-              Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(item.timestamp), 1)
+              Vue.createElementVNode("span", _hoisted_2, Vue.toDisplayString(Vue.unref(roomService.roomService).roomStore.getDisplayName(group.sender)), 1),
+              Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(Vue.unref(utils.formatTimestampToTime)(group.startMsTs)), 1)
             ]),
-            Vue.createElementVNode("div", _hoisted_4, [
-              (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(item.messages, (msg, msgIndex) => {
-                return Vue.openBlock(), Vue.createElementBlock("div", { key: msgIndex }, Vue.toDisplayString(msg), 1);
-              }), 128))
-            ])
+            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(group.messages, (message, messageIndex) => {
+              return Vue.openBlock(), Vue.createElementBlock("div", {
+                key: messageIndex,
+                class: "content"
+              }, Vue.toDisplayString(message.text), 1);
+            }), 128))
           ]);
         }), 128))
-      ], 512);
+      ], 544);
     };
   }
 });

package/lib/components/Chat/ChatKit/components/TUIChat/message-input/index.vue2.js

@@ -4,11 +4,11 @@ const Vue = require("vue");
 const TUIChatEngine = require("@tencentcloud/chat-uikit-engine");
 require("../../../adapter-vue.js");
 const messageInputEditor = require("./message-input-editor.vue.js");
-const index = require("./message-input-at/index.vue.js");
+const index$1 = require("./message-input-at/index.vue.js");
 const messageInputButton = require("./message-input-button.vue.js");
-const index$1 = require("./message-input-quote/index.vue.js");
+const index$2 = require("./message-input-quote/index.vue.js");
 const sendMessage = require("../utils/sendMessage.js");
-const index$2 = require("../emoji-config/index.js");
+const index = require("../emoji-config/index.js");
 const env = require("../../../utils/env.js");
 const _hoisted_1 = { class: "message-input-wrapper" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
@@ -68,7 +68,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       if (!_editorContentList || !currentConversation.value) return;
       const editorContentList = _editorContentList.map((editor2) => {
         if (editor2.type === "text") {
-          editor2.payload.text = index$2.transformTextWithEmojiNamesToKeys(editor2.payload.text);
+          editor2.payload.text = index.transformTextWithEmojiNamesToKeys(editor2.payload.text);
         }
         return editor2;
       });
@@ -125,7 +125,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             key: 0,
             onSendMessage: sendMessage$1
           })) : Vue.createCommentVNode("", true),
-          props.enableAt ? (Vue.openBlock(), Vue.createBlock(index.default, {
+          props.enableAt ? (Vue.openBlock(), Vue.createBlock(index$1.default, {
             key: 1,
             ref_key: "messageInputAtRef",
             ref: messageInputAtRef,
@@ -133,7 +133,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             onOnAtListOpen: onAtListOpen
           }, null, 512)) : Vue.createCommentVNode("", true)
         ], 2),
-        Vue.createVNode(index$1.default)
+        Vue.createVNode(index$2.default)
       ]);
     };
   }