@tencentcloud/roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
107 lines (106 loc) • 4.43 kB
JavaScript
import { defineComponent, ref, onMounted, nextTick, computed, watch, onUnmounted, createElementBlock, openBlock, Fragment, renderList, createElementVNode, toDisplayString, unref } from "vue";
import "../../../../services/main.mjs";
import { roomService } from "../../../../services/roomService.mjs";
import "../../../../locales/index.mjs";
import "@tencentcloud/tuiroom-engine-js";
import "../../../../utils/environment.mjs";
import { formatTimestampToTime } from "../../../../utils/utils.mjs";
import "mitt";
import "../../../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import { MetricsKey } from "../../../../services/manager/dataReportManager.mjs";
import { AI_TASK } from "../../../../services/function/aiTask.mjs";
const _hoisted_1 = { class: "title" };
const _hoisted_2 = { class: "speaker" };
const _hoisted_3 = { class: "timestamp" };
const timeInterval = 60 * 1e3;
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "AITranscription",
setup(__props) {
const conversationContainerRef = ref();
const isUserScrolling = ref(false);
const rawTranscribedMessageList = ref(
roomService.aiTask.transcribedMessageList
);
onMounted(() => {
scrollToBottom();
});
const scrollToBottom = async () => {
if (conversationContainerRef.value && !isUserScrolling.value) {
await nextTick();
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 transcribedMessageList = 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 {
currentAggregatedMessage.messages.push(message);
}
}
return aggregatedMessageList;
});
watch(rawTranscribedMessageList, () => {
scrollToBottom();
});
const handleAITranscriptionTask = async (data) => {
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);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "conversation",
ref_key: "conversationContainerRef",
ref: conversationContainerRef,
onScroll: handleScroll
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(transcribedMessageList.value, (group) => {
return openBlock(), createElementBlock("div", {
key: group.startMsTs,
class: "conversation-group"
}, [
createElementVNode("div", _hoisted_1, [
createElementVNode("span", _hoisted_2, toDisplayString(unref(roomService).roomStore.getDisplayName(group.sender)), 1),
createElementVNode("span", _hoisted_3, toDisplayString(unref(formatTimestampToTime)(group.startMsTs)), 1)
]),
(openBlock(true), createElementBlock(Fragment, null, renderList(group.messages, (message, messageIndex) => {
return openBlock(), createElementBlock("div", {
key: messageIndex,
class: "content"
}, toDisplayString(message.text), 1);
}), 128))
]);
}), 128))
], 544);
};
}
});
export {
_sfc_main as default
};