@trtc/calls-uikit-vue 4.4.2 → 4.4.5

package/src/Components/components/common/AIAssistant/components/SubtitleSettingsPC.vue

@@ -0,0 +1,294 @@
+<template>
+  <div v-if="visible" class="subtitle-settings-overlay" @click="handleOverlayClick">
+    <div class="subtitle-settings-modal" @click.stop>
+      <div class="modal-header">
+        <h3 class="modal-title">{{ t('ai-subtitle-settings') }}</h3>
+        <button class="close-btn" @click="closeModal">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M12 4L4 12M4 4L12 12" stroke="#666" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="modal-content">
+        <!-- Recognition Language -->
+        <div class="setting-item">
+          <label class="setting-label">{{ t('recognition-language') }}</label>
+          <CustomSelect 
+            :value="recognitionLanguage"
+            @input="handleLanguageChange"
+            :options="languageOptions"
+            @change="handleLanguageChange"
+          />
+        </div>
+
+        <!-- Translation Language -->
+        <div class="setting-item">
+          <label class="setting-label">{{ t('translation-language') }}</label>
+          <CustomSelect 
+            :value="translationLanguage"
+            @input="handleTranslationChange"
+            :options="translationOptions"
+            @change="handleTranslationChange"
+          />
+        </div>
+
+        <!-- Subtitle Display Settings -->
+        <div class="setting-item">
+          <label class="setting-label">{{ t('subtitle-display-settings') }}</label>
+          <CustomSelect 
+            :value="subtitleDisplay"
+            @input="handleSubtitleDisplayChange"
+            :options="subtitleDisplayOptions"
+            @change="handleSubtitleDisplayChange"
+          />
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button class="btn btn-cancel" @click="closeModal">{{ t('Cancel') }}</button>
+        <button class="btn btn-confirm" @click="confirmSettings">{{ t('save') }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch } from '../../../../../adapter-vue';
+import { TUICallKitAPI } from '../../../../../TUICallService/index';
+import CustomSelect from '../../../base/CustomSelect/CustomSelect.vue';
+import { useTranslate } from '../../../../hooks/useTranslate';
+
+interface Props {
+  visible: boolean;
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void;
+  (e: 'confirm', settings: {
+    recognitionLanguage: string;
+    translationLanguage: string;
+    subtitleDisplay: string;
+  }): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false
+});
+const emit = defineEmits<Emits>();
+
+// Use i18n translation
+const t = useTranslate();
+
+// Settings state
+const recognitionLanguage = ref('zh');
+const translationLanguage = ref('en');
+const subtitleDisplay = ref('both');
+
+// Saved settings to restore on cancel
+const savedSettings = ref({
+  recognitionLanguage: 'zh',
+  translationLanguage: 'en',
+  subtitleDisplay: 'both'
+});
+
+// Language options for CustomSelect - supported recognition languages
+// Use native language names for better UX (users can always recognize their own language)
+const languageOptions = computed(() => [
+  { value: 'zh', label: '中文' },
+  { value: 'en', label: 'English' }
+]);
+
+// Translation options for CustomSelect - translation target languages (base list)
+// Use native language names for better UX (users can always recognize their own language)
+const baseTranslationOptions = computed(() => [
+  { value: '', label: t.value('no-translation') },
+  { value: 'zh', label: 'Chinese (中文)' },
+  { value: 'en', label: 'English (英语)' },
+  { value: 'vi', label: 'Vietnamese (越南语)' },
+  { value: 'ja', label: 'Japanese (日语)' },
+  { value: 'ko', label: 'Korean (韩语)' },
+  { value: 'id', label: 'Indonesian (印尼语)' },
+  { value: 'th', label: 'Thai (泰语)' },
+  { value: 'pt', label: 'Portuguese (葡萄牙语)' },
+  { value: 'ar', label: 'Arabic (阿拉伯语)' },
+  { value: 'es', label: 'Spanish (西班牙语)' },
+  { value: 'fr', label: 'French (法语)' },
+  { value: 'ms', label: 'Malay (马来语)' },
+  { value: 'de', label: 'German (德语)' },
+  { value: 'it', label: 'Italian (意大利语)' },
+  { value: 'ru', label: 'Russian (俄语)' }
+]);
+
+// Computed property to filter translation options based on selected recognition language
+const translationOptions = computed(() => {
+  return baseTranslationOptions.value.filter(option => 
+    option.value === '' || option.value !== recognitionLanguage.value
+  );
+});
+
+// Subtitle display options for CustomSelect
+const subtitleDisplayOptions = computed(() => [
+  { value: 'both', label: t.value('show-bilingual') },
+  { value: 'original', label: t.value('show-original-only') },
+]);
+
+const handleLanguageChange = (value: string | number) => {
+  recognitionLanguage.value = value as string;
+};
+
+const handleTranslationChange = (value: string | number) => {
+  translationLanguage.value = value as string;
+};
+
+const handleSubtitleDisplayChange = (value: string | number) => {
+  subtitleDisplay.value = value as string;
+};
+
+const closeModal = () => {
+  // Restore saved settings when closing without confirming
+  recognitionLanguage.value = savedSettings.value.recognitionLanguage;
+  translationLanguage.value = savedSettings.value.translationLanguage;
+  subtitleDisplay.value = savedSettings.value.subtitleDisplay;
+  
+  emit('update:visible', false);
+};
+
+const handleOverlayClick = () => {
+  closeModal();
+};
+
+const confirmSettings = async () => {
+  try {
+    // Call updateRealTimeTranscriber when settings are confirmed
+    const translationLanguages = translationLanguage.value ? [translationLanguage.value] : [];
+    
+    await TUICallKitAPI._aiAssistant.updateRealTimeTranscriber({
+      sourceLanguage: recognitionLanguage.value,
+      translationLanguages: translationLanguages,
+    });
+
+    // Save the confirmed settings
+    savedSettings.value = {
+      recognitionLanguage: recognitionLanguage.value,
+      translationLanguage: translationLanguage.value,
+      subtitleDisplay: subtitleDisplay.value
+    };
+
+    emit('confirm', {
+      recognitionLanguage: recognitionLanguage.value,
+      translationLanguage: translationLanguage.value,
+      subtitleDisplay: subtitleDisplay.value,
+    });
+  } catch (error) {
+    console.error('Failed to update AI transcriber settings:', error);
+  }
+  
+  closeModal();
+};
+
+// Watch for recognition language changes and reset translation language if it conflicts
+watch(recognitionLanguage, (newRecognitionLang) => {
+  // If the current translation language is the same as the new recognition language, reset it
+  if (translationLanguage.value === newRecognitionLang) {
+    translationLanguage.value = '';
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.subtitle-settings-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  font-family: PingFang SC;
+  box-shadow: 0px 2px 6px 0px var(--Black-8);
+}
+
+.subtitle-settings-modal {
+  background: white;
+  border-radius: 12px;
+  width: 480px;
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 24px 10px 24px;
+}
+
+.modal-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #000000E5;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}
+
+.modal-content {
+  padding: 24px;
+}
+
+.setting-item {
+  margin-bottom: 24px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.setting-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  color: #4F586B;
+  margin-bottom: 8px;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 20px;
+  padding: 16px 24px 24px;
+}
+
+.btn {
+  width: 72px;
+  height: 32px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 26px;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+
+  &.btn-cancel {
+    color: #1C66E5;
+    border-color: #1C66E5;
+    background-color: white;
+  }
+
+  &.btn-confirm {
+    background: #1C66E5;
+    color: white;
+  }
+}
+</style>

package/src/Components/components/common/TopBar/TopBar.vue

@@ -6,25 +6,23 @@
       <Timer v-if="showTimer" :call-duration="callDuration" />
     </Col>
     <Col :span="8" justify="end" align="center">
-      <Row>
-        <Col :span="18" />
-        <Col :span="3" justify="center">
-          <Minimize v-if="showMinimize" />
-        </Col>
-        <Col :span="3" justify="center">
-          <FullScreen v-if="allowedFullScreen" />
-        </Col>
-      </Row>
+      <div class="topbar-right-controls">
+        <AITranscriberSwitch v-if="showAITranscriberSwitch" />
+        <Minimize v-if="showMinimize" />
+        <FullScreen v-if="allowedFullScreen" />
+      </div>
     </Col>
   </Row>
   <Row v-if="!isPC">
     <Col :span="8" align="center">
-      <Row>
-        <Col :span="8" justify="center">
+      <div class="top-bar-left-controls">
+        <div class="control-item">
           <Minimize v-if="!isPC && showMinimize" />
-        </Col>
-        <Col :span="16" />
-      </Row>
+        </div>
+        <div class="control-item">
+          <AITranscriberSwitchH5 v-if="showAITranscriberSwitch" />
+        </div>
+      </div>
     </Col>
     <Col :span="8" justify="center" align="center">
       <Timer v-if="showTimer" :call-duration="callDuration" />
@@ -51,7 +49,7 @@ export default {
 
 <script setup lang="ts">
 import { toRefs, computed, ref, onMounted, onUnmounted } from '../../../../adapter-vue';
-import { useCallInfoContext, useCallDuration, useCustomUI } from '../../../hooks';
+import { useCallInfoContext, useCallDuration, useCustomUI, useAIAssistant } from '../../../hooks';
 import { CallRole, CallStatus, FeatureButton, NAME, StoreName, TUIGlobal, TUIStore } from '../../../../TUICallService';
 import { TopBarProps } from './TopBar';
 import Row from '../../base/Layout/Row/Row.vue';
@@ -60,14 +58,21 @@ import Minimize from '../Button/Minimize.vue';
 import FullScreen from '../Button/FullScreen.vue';
 import InviteUser from '../Button/InviteUser.vue';
 import Timer from '../Timer/Timer.vue';
+import AITranscriberSwitch from '../AIAssistant/components/AITranscriberSwitchPC.vue';
+import AITranscriberSwitchH5 from '../AIAssistant/components/AITranscriberSwitchH5.vue';
 
 defineProps(TopBarProps);
 const isPC = TUIGlobal.isPC;
 const { callStatus, isGroupCall, callRole, allowedFullScreen } = toRefs(useCallInfoContext());
 const { callDuration } = useCallDuration();
+const { isAITranscriberEnabled } = useAIAssistant();
 const customUIConfig = useCustomUI();
 const showTimer = computed(() => (callStatus.value === CallStatus.CONNECTED));
 const showMinimize = ref(TUIStore.getData(StoreName.CALL, NAME.ENABLE_FLOAT_WINDOW));
+const showAITranscriberSwitch = computed(() => {
+  // Show AI transcriber switch when call is connected AND AI transcriber UI is enabled
+  return callStatus.value === CallStatus.CONNECTED && isAITranscriberEnabled.value;
+});
 const showInviteUser = computed(() => {
   if (
     !isGroupCall.value
@@ -113,4 +118,25 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
 }
+
+.topbar-right-controls {
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  gap: 16px; // Adjust this value to match design spacing
+}
+
+.top-bar-left-controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  margin-left: 10px;
+}
+
+.control-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

package/src/Components/hooks/index.ts

@@ -18,3 +18,4 @@ export * from './useCustomUI';
 export * from './useViewBackgroundConfig';
 export * from './useJoinGroupCall';
 export * from './useTranslate';
+export * from './useAIAssistant';

package/src/Components/hooks/useAIAssistant.ts

@@ -0,0 +1,142 @@
+/**
+ * AI Assistant Hook
+ * @description Vue 3 composable for AI Transcriber functionality
+ */
+import { ref, onMounted, onUnmounted } from '../../adapter-vue';
+import { TUIStore, StoreName, NAME } from '../../TUICallService/index';
+import { TranscriberMessage } from '../../TUICallService/CallService/AIAssistant';
+
+// Translation content interface
+interface ITranslationContent {
+  language: string;
+  text: string;
+}
+
+// Converted message interface
+interface ITranslationInfo {
+  roundId: string;
+  sender: string;
+  nick?: string;
+  text: string;
+  end: boolean;
+  translation: ITranslationContent[];
+}
+
+/**
+ * AI Assistant composable hook
+ * Provides reactive state management for AI transcription functionality
+ */
+export function useAIAssistant() {
+  // AI Transcriber Status State
+  const isAITranscriberEnabled = ref(TUIStore.getData(StoreName.CALL, NAME.IS_AI_TRANSCRIBER_ENABLED));
+  const isAITranscriberRunning = ref(TUIStore.getData(StoreName.CALL, NAME.IS_AI_TRANSCRIBER_RUNNING));
+  
+  // Converted message list
+  const subtitleInfoList = ref<ITranslationInfo[]>([]);
+
+  // Helper functions for message conversion
+  const parseTranslationTexts = (translationTexts: any): ITranslationContent[] => {
+    if (!translationTexts) {
+      return [];
+    }
+
+    // Handle Map type
+    if (translationTexts instanceof Map) {
+      return Array.from(translationTexts.entries()).map(([language, content]) => ({
+        language: String(language),
+        text: ensureStringContent(content)
+      }));
+    }
+
+    // Handle plain object type
+    if (typeof translationTexts === 'object') {
+      return Object.entries(translationTexts).map(([language, content]) => ({
+        language: String(language),
+        text: ensureStringContent(content)
+      }));
+    }
+
+    return [];
+  };
+
+  const ensureStringContent = (content: any): string => {
+    if (content === null || content === undefined) {
+      return '';
+    }
+    
+    if (typeof content === 'string') {
+      return content;
+    }
+    
+    if (typeof content === 'object') {
+      try {
+        return JSON.stringify(content);
+      } catch (error) {
+        console.warn('Failed to stringify translation content:', error);
+        return '[Invalid Object]';
+      }
+    }
+    
+    return String(content);
+  };
+
+  const convertToLegacyFormat = (messages: TranscriberMessage[]): ITranslationInfo[] => {
+    return messages.map(msg => ({
+      roundId: msg.segmentId,
+      sender: msg.speakerUserId,
+      nick: '',
+      text: msg.sourceText,
+      end: msg.isCompleted,
+      translation: parseTranslationTexts(msg.translationTexts)
+    }));
+  };
+
+  // Store watcher callbacks
+  const handleAITranscriberEnabledChange = (value: boolean) => {
+    isAITranscriberEnabled.value = value || false;
+  };
+
+  const handleAITranscriberRunningChange = (value: boolean) => {
+    isAITranscriberRunning.value = value || false;
+  };
+
+  const handleRealtimeMessageListChange = (messageList: TranscriberMessage[]) => { 
+    if (messageList && messageList.length > 0) {
+      const convertedMessages = convertToLegacyFormat(messageList);
+      subtitleInfoList.value = convertedMessages;
+    } else {
+      subtitleInfoList.value = [];
+    }
+  };
+
+  // Lifecycle management
+  onMounted(() => {    
+    // Subscribe to TUIStore changes
+    TUIStore.watch(StoreName.CALL, {
+      [NAME.IS_AI_TRANSCRIBER_ENABLED]: handleAITranscriberEnabledChange,
+      [NAME.IS_AI_TRANSCRIBER_RUNNING]: handleAITranscriberRunningChange,
+      [NAME.REALTIME_MESSAGE_LIST]: handleRealtimeMessageListChange,
+    });
+
+    // Get initial message data
+    const currentMessages = TUIStore.getData(StoreName.CALL, NAME.REALTIME_MESSAGE_LIST);
+    if (currentMessages) {
+      handleRealtimeMessageListChange(currentMessages);
+    }
+  });
+
+  onUnmounted(() => {
+    // Unsubscribe from TUIStore changes
+    TUIStore.unwatch(StoreName.CALL, {
+      [NAME.IS_AI_TRANSCRIBER_ENABLED]: handleAITranscriberEnabledChange,
+      [NAME.IS_AI_TRANSCRIBER_RUNNING]: handleAITranscriberRunningChange,
+      [NAME.REALTIME_MESSAGE_LIST]: handleRealtimeMessageListChange,
+    });
+  });
+
+  return {
+    isAITranscriberEnabled,
+    isAITranscriberRunning,
+    subtitleInfoList,
+  };
+}

package/src/Components/hooks/useGetVolumeMap.ts

@@ -8,9 +8,9 @@ export function useGetVolumeMap() {
   const remoteUserInfoList = ref(TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST));
 
   const handleLocalUserInfoChange = (value) => {
-    const isAudioAvailable = TUIGlobal.isWeChat ? value.enableMic : value.isAudioAvailable;
+    const isAudioAvailable = TUIGlobal.isWeChat ? value?.enableMic : value?.isAudioAvailable;
     if (isAudioAvailable) {
-      volumeMap.value = { ...volumeMap.value, localVideo: value.volume };
+      volumeMap.value = { ...volumeMap.value, localVideo: value?.volume };
     }
   };
   const handleRemoteUserInfoListChange = (value) => {