@trtc/calls-uikit-vue 4.4.2 → 4.4.5

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

@@ -0,0 +1,234 @@
+<template>
+  <div
+    v-if="isAITranscriberRunning && subtitleInfoList.length > 0"
+    ref="subtitleContainer"
+    :class="['subtitle-content', { 'subtitle-content--h5': isH5 }]"
+    @mouseenter="!isH5 && (showSettingsIcon = true)"
+    @mouseleave="!isH5 && (showSettingsIcon = false)"
+  >
+    <div 
+      v-show="isH5 || showSettingsIcon"
+      :class="['subtitle-content__settings-btn', { 'subtitle-content__settings-btn--h5': isH5 }]"
+      @click="handleSettingsClick"
+    >
+       <TKImage
+        :src="settingsIcon" 
+        :width="iconSize" 
+        :height="iconSize"
+      />
+    </div>
+    
+    <div v-for="(subtitleInfo, index) in (Array.isArray(subtitleInfoList) ? subtitleInfoList : [])" :key="subtitleInfo.roundId">
+      <div v-if="index !== 0" style="height: 16px;"> </div>
+      <div class="sender-name">{{ `${subtitleInfo?.nick || subtitleInfo?.sender}:` }}</div>
+      <div>{{ subtitleInfo?.text }}</div>
+      <div v-for="tranlationContent in (Array.isArray(subtitleInfo?.translation) ? subtitleInfo.translation : [])" :key="tranlationContent?.language">
+        <span>{{ formatTranslationContent(tranlationContent?.text) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, nextTick } from '../../../../../adapter-vue';
+import { TUIGlobal } from '../../../../../TUICallService/index';
+import { useAIAssistant } from '../../../../hooks/useAIAssistant';
+import TKImage from '../../../base/TKImage/TKImage.vue';
+import subtitleSettingsDeskTopIcon from '../../../../assets/aiAssistant/desktop/subtitleSettings.svg';
+import subtitleSettingsH5Icon from '../../../../assets/aiAssistant/mobile/subtitleSettings.svg';
+
+// Internal state management
+const showSettingsIcon = ref(false);
+const subtitleContainer = ref<HTMLElement | null>(null);
+
+// Use AI Assistant hook (combines both status and subtitle data)
+const { subtitleInfoList, isAITranscriberRunning } = useAIAssistant();
+
+// Device type detection
+const isH5 = TUIGlobal.isH5;
+
+// Dynamic icon selection based on device type
+const settingsIcon = computed(() => {
+  return isH5 ? subtitleSettingsH5Icon : subtitleSettingsDeskTopIcon;
+});
+
+// Icon size is consistent across all devices
+const iconSize = '16px';
+
+// Events
+const emit = defineEmits(['open-settings']);
+
+// Handle settings button click
+const handleSettingsClick = () => {
+  emit('open-settings');
+};
+
+// Auto scroll to bottom when new messages arrive
+const scrollToBottom = () => {
+  if (subtitleContainer.value) {
+    nextTick(() => {
+      subtitleContainer.value!.scrollTop = subtitleContainer.value!.scrollHeight;
+    });
+  }
+};
+
+// Watch for changes in subtitle list and auto scroll
+watch(
+  () => subtitleInfoList.value,
+  (newList, oldList) => {
+    // Only scroll if new messages are added
+    if (newList && oldList && newList.length > oldList.length) {
+      scrollToBottom();
+    }
+  },
+  { deep: true }
+);
+
+// Also scroll when the component first shows subtitles
+watch(
+  () => isAITranscriberRunning.value && subtitleInfoList.value.length > 0,
+  (shouldShow) => {
+    if (shouldShow) {
+      scrollToBottom();
+    }
+  }
+);
+
+// Parse translation data to extract language and text
+const parseTranslationData = (content: any) => {
+  if (content === null || content === undefined) {
+    return { language: 'Unknown', text: '' };
+  }
+  
+  // If content is already a string, check if it's a JSON string
+  if (typeof content === 'string') {
+    try {
+      // Try to parse as JSON in case it's a nested JSON string
+      const parsed = JSON.parse(content);
+      if (parsed && typeof parsed === 'object') {
+        return {
+          language: parsed.language || 'Unknown',
+          text: parsed.text || content
+        };
+      }
+      return { language: 'Unknown', text: content };
+    } catch {
+      // If parsing fails, return the original string
+      return { language: 'Unknown', text: content };
+    }
+  }
+  
+  return { language: 'Unknown', text: String(content) };
+};
+
+// Format translation content to prevent [object Object] display
+const formatTranslationContent = (content: any): string => {
+  return parseTranslationData(content).text;
+};
+
+// Get language display name from translation content
+const getLanguageDisplayFromContent = (content: any): string => {
+  const { language } = parseTranslationData(content);
+  return getLanguageDisplay(language);
+};
+
+// Get language display name
+const getLanguageDisplay = (languageCode: string): string => {
+  if (!languageCode || languageCode === 'Unknown') return 'Translation';
+  
+  // Handle numeric language codes
+  if (languageCode === '0' || languageCode === '1' || languageCode === '2') {
+    return 'Translation';
+  }
+  
+  // Map common language codes with bilingual format: English (中文)
+  const languageMap: Record<string, string> = {
+    'en': 'English (英语)',
+    'zh': 'Chinese (中文)',
+    'ja': 'Japanese (日语)',
+    'ko': 'Korean (韩语)',
+    'es': 'Spanish (西班牙语)',
+    'fr': 'French (法语)',
+    'de': 'German (德语)',
+    'vi': 'Vietnamese (越南语)',
+    'id': 'Indonesian (印尼语)',
+    'th': 'Thai (泰语)',
+    'pt': 'Portuguese (葡萄牙语)',
+    'ar': 'Arabic (阿拉伯语)',
+    'ms': 'Malay (马来语)',
+    'it': 'Italian (意大利语)',
+    'ru': 'Russian (俄语)'
+  };
+  
+  return languageMap[languageCode] || languageCode;
+};
+</script>
+
+<style lang="scss" scoped>
+// Common styles for both PC and H5
+.subtitle-content {
+  position: relative;
+  padding: 10px 12px;
+  color: #fff;
+  background-color: #000000B8;
+  opacity: 0.72;
+  border-radius: 8px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 12px;
+  
+  /* Hide scrollbar for webkit browsers */
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+  
+  /* Hide scrollbar for Firefox */
+  scrollbar-width: none;
+}
+
+// PC specific styles
+.subtitle-content:not(.subtitle-content--h5) {
+  width: 640px;
+  min-width: 640px;
+  height: 180px;
+  max-height: 180px;
+  
+  .subtitle-content__settings-btn {
+    position: fixed;
+    top: 8px;
+    right: 8px;
+    cursor: pointer;
+    z-index: 999;
+  }
+}
+
+// H5 specific styles
+.subtitle-content--h5 {
+  position: relative;
+  width: 350px;
+  min-width: 350px;
+  height: 116px;
+  max-height: 116px;
+  
+  .subtitle-content__settings-btn {
+    position: fixed;
+    top: 50%;
+    right: 4px;
+    cursor: pointer;
+    z-index: 999;
+    transform: translateY(-50%);
+  }
+}
+
+.sender-name {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 12px;
+  leading-trim: NONE;
+  line-height: 16px;
+  letter-spacing: 0px;
+  color: #FFFFFFBF;
+}
+</style>