@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.3

package/src/TUIRoom/components/Chat/ChatKit/utils/lodash.ts

@@ -0,0 +1,169 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/** Error message constants. */
+const FUNC_ERROR_TEXT = 'Expected a function';
+
+interface IDebounceOptions {
+  leading?: boolean;
+  maxWait?: number;
+  trailing?: boolean;
+}
+
+type IThrottleOptions = IDebounceOptions;
+
+function throttle(func, wait: number, options?: IThrottleOptions) {
+  let leading = true,
+    trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  if (options && isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    leading: leading,
+    maxWait: wait,
+    trailing: trailing,
+  });
+}
+
+function debounce(func, wait: number, options?: IDebounceOptions) {
+  let lastArgs,
+    lastThis,
+    maxWait,
+    result,
+    timerId,
+    lastCallTime,
+    lastInvokeTime = 0,
+    leading = false,
+    maxing = false,
+    trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = wait || 0;
+  if (options && isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? Math.max(options.maxWait || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    const args = lastArgs,
+      thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    const timeSinceLastCall = time - lastCallTime,
+      timeSinceLastInvoke = time - lastInvokeTime,
+      timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    const timeSinceLastCall = time - lastCallTime,
+      timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait)
+      || (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    const time = Date.now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(Date.now());
+  }
+
+  function debounced() {
+    const time = Date.now(),
+      isInvoking = shouldInvoke(time);
+
+    // eslint-disable-next-line prefer-rest-params
+    lastArgs = arguments;
+
+    // @ts-expect-error ignore this type
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+function isObject(value) {
+  const type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+export {
+  debounce,
+  throttle,
+};

package/src/TUIRoom/components/Chat/ChatKit/utils/type-check.ts

@@ -0,0 +1,44 @@
+const objectToString = Object.prototype.toString;
+const toTypeString = (value: any) => objectToString.call(value);
+
+export const { isArray } = Array;
+export const isMap = (val: any) => toTypeString(val) === '[object Map]';
+export const isSet = (val: any) => toTypeString(val) === '[object Set]';
+export const isDate = (val: any) => val instanceof Date;
+export const isFunction = (val: any) => typeof val === 'function';
+export const isString = (val: any) => typeof val === 'string';
+export const isSymbol = (val: any) => typeof val === 'symbol';
+export const isObject = (val: any) => val !== null && typeof val === 'object';
+export const isPromise = (val: any) =>
+  isObject(val) && isFunction(val.then) && isFunction(val.catch);
+// Determine whether it is url
+export const isUrl = (url: string) => {
+  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(
+    url,
+  );
+};
+
+// Determine if it is a JSON string
+export const isJSON = (str: string) => {
+  // eslint-disable-next-line no-useless-escape
+  if (typeof str === 'string') {
+    try {
+      const data = JSON.parse(str);
+      if (data) {
+        return true;
+      }
+      return false;
+    } catch (error: any) {
+      return false;
+    }
+  }
+  return false;
+};
+
+// Determine if it is a JSON string
+export const JSONToObject = (str: string) => {
+  if (!str || !isJSON(str)) {
+    return str;
+  }
+  return JSON.parse(str);
+};

package/src/TUIRoom/components/Chat/index/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="chat-container">
+    <TUIChat v-if="basicStore.scene !== 'chat'" />
+    <div v-else class="chat-container-chat-scene">
+      <message-list />
+      <chat-editor />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  StoreName,
+  TUIConversationService,
+  TUIStore,
+} from '@tencentcloud/chat-uikit-engine';
+
+import Server from '../ChatKit/server';
+import { roomService, Theme, LanguageOption } from '../../../services';
+import { hideTUIChatFeatures } from '../ChatKit/components/TUIChat/config';
+import TUIChatServer from '../ChatKit/components/TUIChat/server';
+// todo Remove this logic when chat is released
+import MessageList from '../MessageList/index.vue';
+import ChatEditor from '../ChatEditor/index.vue';
+
+import { useBasicStore } from '../../../stores/basic';
+import TUIChat from '../ChatKit/components/TUIChat/index.vue';
+
+const basicStore = useBasicStore();
+
+const defaultHideFeaturesButtons = [
+  'InputFace',
+  'InputVoice',
+  'InputEvaluation',
+  'InputQuickReplies',
+  'InputMention',
+  'QuoteMessage',
+  'ForwardMessage',
+  'TranslateMessage',
+  'VoiceToText',
+  'EmojiReaction',
+  'MultiSelection',
+  'MessageSearch',
+  'ReadStatus',
+];
+
+const currentRoomId = `GROUP${basicStore.roomId}`;
+
+const chatKitServer = new Server();
+chatKitServer.init();
+new TUIChatServer();
+
+TUIConversationService.switchConversation(currentRoomId);
+hideTUIChatFeatures(defaultHideFeaturesButtons);
+roomService.setTheme(basicStore.defaultTheme as Theme);
+roomService.setLanguage(basicStore.lang as LanguageOption);
+TUIStore.watch(StoreName.CONV, {
+  currentConversationID: onCurrentConversationIDUpdate,
+});
+
+function onCurrentConversationIDUpdate(currentConversationID: string) {
+  roomService.chatManager.setChatType(currentConversationID === currentRoomId);
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-container {
+  width: 100%;
+  height: 100%;
+}
+
+.chat-container-chat-scene {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px;
+}
+</style>

package/src/TUIRoom/components/RoomContent/StreamRegion/LocalScreenView/index.vue

@@ -15,7 +15,7 @@
       <tui-button
         size="default"
         class="toggle-annotating-button"
-        v-if="isAnnotationWindowVisiable"
+        v-if="isSharingScreen"
         @click="toggleAnnotationWindow"
       >
         {{ annotationSwitchLabel }}
@@ -59,7 +59,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, computed, onMounted, Ref } from 'vue';
+import { ref, defineProps, computed, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
 import { ipcRenderer } from 'electron';
 import SvgIcon from '../../../common/base/SvgIcon.vue';
 import ScreenSharingIcon from '../../../common/icons/ScreenSharingIcon.vue';
@@ -67,17 +68,20 @@ import TuiButton from '../../../common/base/Button.vue';
 import Dialog from '../../../common/base/Dialog/index.vue';
 import eventBus from '../../../../hooks/useMitt';
 import { useI18n } from '../../../../locales';
-import { useBasicStore } from '../../../../stores/basic';
+import { useRoomStore } from '../../../../stores/room';
+import {
+  DataReportManager,
+  MetricsKey,
+} from '../../../../services/manager/dataReportManager';
 
+const roomStore = useRoomStore();
 const { t } = useI18n();
-const basicStore = useBasicStore();
 const showStopShareRegion = ref(false);
 
-const isAnnotatingStarted: Ref<boolean> = ref(false);
-const isAnnotationWindowVisiable = computed(() => basicStore.isSharingScreen);
+const { isAnnotationVisiable, isSharingScreen } = storeToRefs(roomStore);
 
 const annotationSwitchLabel = computed(() => {
-  return isAnnotatingStarted.value
+  return isAnnotationVisiable.value
     ? t('End annotating')
     : t('Start annotating');
 });
@@ -88,7 +92,7 @@ interface Props {
 defineProps<Props>();
 
 onMounted(() => {
-  isAnnotatingStarted.value = false;
+  isAnnotationVisiable.value = false;
 });
 
 function openStopConfirmDialog() {
@@ -101,17 +105,20 @@ function stopScreenSharing() {
 }
 
 function toggleAnnotationWindow() {
-  if (isAnnotatingStarted.value) {
+  if (isAnnotationVisiable.value) {
     ipcRenderer?.send('annotation:stop-annotating');
-    isAnnotatingStarted.value = false;
+    isAnnotationVisiable.value = false;
+    DataReportManager.reportCount(MetricsKey.stopAnnotating);
   } else {
     ipcRenderer?.send('annotation:start-annotating');
-    isAnnotatingStarted.value = true;
+    isAnnotationVisiable.value = true;
+    DataReportManager.reportCount(MetricsKey.startAnnotating);
   }
 }
 
 ipcRenderer?.on('annotation:stop-from-annotation-window', () => {
-  isAnnotatingStarted.value = false;
+  isAnnotationVisiable.value = false;
+  DataReportManager.reportCount(MetricsKey.stopAnnotating);
 });
 </script>
 

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

@@ -0,0 +1,117 @@
+<template>
+  <div v-if="AIControlConfig.visible" class="more-control-container">
+    <icon-button
+      :is-active="sidebarName === 'aiTranscription'"
+      :title="t('AI Assistant')"
+      :icon="AIIcon"
+      @click-icon="toggleToolBox"
+    />
+    <div v-if="!isSidebarOpen && showToolBox" class="tool-box">
+      <div class="tool-box-item" @click="openAISubtitles">
+        <SvgIcon class="icon" :icon="AISubtitlesIcon" />
+        <span v-if="!showSubtitles">{{
+          t('Turn on AI real-time subtitles')
+        }}</span>
+        <span v-else>{{ t('Turn off AI real-time subtitles') }}</span>
+      </div>
+      <div class="tool-box-item" @click="toggleAITranscription">
+        <SvgIcon class="icon" :icon="AITranscription" />
+        <span>{{ t('Enable AI real-time meeting recording') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, defineEmits } from 'vue';
+import IconButton from '../common/base/IconButton.vue';
+import AIIcon from '../common/icons/AIIcon.vue';
+import AITranscription from '../common/icons/AITranscription.vue';
+import AISubtitlesIcon from '../common/icons/AISubtitles.vue';
+import { roomService } from '../../services';
+import { useI18n } from '../../locales';
+import SvgIcon from '../common/base/SvgIcon.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['show-overlay']);
+const AIControlConfig = roomService.getComponentConfig('AIControl');
+const { basicStore } = roomService;
+
+const isSidebarOpen = computed(() => basicStore.isSidebarOpen);
+const sidebarName = computed(() => basicStore.sidebarName);
+const showToolBox = ref(false);
+const showSubtitles = ref(false);
+
+watch(isSidebarOpen, newValue => {
+  showToolBox.value = newValue && false;
+});
+
+function toggleToolBox() {
+  showToolBox.value = !showToolBox.value;
+}
+
+const toggleAITranscription = () => {
+  if (
+    basicStore.setSidebarOpenStatus &&
+    basicStore.sidebarName === 'aiTranscription'
+  ) {
+    basicStore.setSidebarOpenStatus(false);
+    basicStore.setSidebarName('');
+    return;
+  }
+  basicStore.setSidebarOpenStatus(true);
+  basicStore.setSidebarName('aiTranscription');
+  showToolBox.value = false;
+};
+
+const openAISubtitles = () => {
+  showSubtitles.value = !showSubtitles.value;
+  showToolBox.value = false;
+  emit('show-overlay', {
+    name: 'AISubtitlesOverlay',
+    visible: showSubtitles.value,
+  });
+};
+</script>
+<style lang="scss" scoped>
+.tool-box {
+  position: absolute;
+  bottom: 72px;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 0;
+  background-color: var(--background-color-2);
+  border-radius: 15px;
+  box-shadow: 0 -8px 30px var(--footer-shadow-color);
+
+  .tool-box-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 7px 10px;
+    font-size: 12px;
+    white-space: nowrap;
+    cursor: pointer;
+
+    .icon {
+      margin-right: 8px;
+    }
+  }
+
+  .tool-box-item:hover {
+    background: var(--tool-box-hover);
+  }
+}
+
+.tui-theme-black .tool-box {
+  --tool-box-hover: rgba(46, 50, 61, 0.7);
+}
+
+.tui-theme-white .tool-box {
+  --tool-box-hover: rgba(79, 88, 107, 0.05);
+}
+</style>