@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.61 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
require("../../../../services/main.js");
const roomService = require("../../../../services/roomService.js");
require("../../../../locales/index.js");
require("@tencentcloud/tuiroom-engine-js");
require("../../../../utils/environment.js");
const utils = require("../../../../utils/utils.js");
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 = { class: "title" };
const _hoisted_2 = { class: "speaker" };
const _hoisted_3 = { class: "timestamp" };
const timeInterval = 60 * 1e3;
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "AITranscription",
setup(__props) {
const conversationContainerRef = Vue.ref();
const isUserScrolling = Vue.ref(false);
const rawTranscribedMessageList = Vue.ref(
roomService.roomService.aiTask.transcribedMessageList
);
Vue.onMounted(() => {
scrollToBottom();
});
const scrollToBottom = async () => {
if (conversationContainerRef.value && !isUserScrolling.value) {
await Vue.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 = 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 {
currentAggregatedMessage.messages.push(message);
}
}
return aggregatedMessageList;
});
Vue.watch(rawTranscribedMessageList, () => {
scrollToBottom();
});
const handleAITranscriptionTask = async (data) => {
if (!data) return;
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);
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
class: "conversation",
ref_key: "conversationContainerRef",
ref: conversationContainerRef,
onScroll: handleScroll
}, [
(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(transcribedMessageList.value, (group) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
key: group.startMsTs,
class: "conversation-group"
}, [
Vue.createElementVNode("div", _hoisted_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.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))
], 544);
};
}
});
exports.default = _sfc_main;