@trtc/calls-uikit-vue2 4.4.2 → 4.4.5

package/README-zh_CN.md

@@ -39,6 +39,12 @@ TUICallKit 支持市面上主流浏览器，详情参考：[浏览器支持情
 | 56+ | 80+ | 56+ | 11+ | 11+ | 46+ |
 
 
+## 推荐使用更高效的 AI 集成助手
+我们为您提供了全新的 AI 集成方式，如果您不需要完整的 Demo 工程, 只想快速开始集成，推荐您使用更高效的 AI 集成助手，只需要简单描述您的需求，即可自动生成集成代码，大幅提升开发效率。
+
+点击这里，立即体验 [AI 集成](https://cloud.tencent.com/document/product/647/125504)。
+
+
 ## 安装
 使用 npm:
 ```

package/README.md

@@ -41,6 +41,12 @@ Please be sure to use HTTPS protocol or localhost to deploy your Web App, otherw
 | 56+ | 80+ | 56+ | 11+ | 11+ | 46+ |
 
 
+## Recommend Using the More Efficient AI Integration Assistant
+
+We offer you a brand new method for AI integration. If you don't need the complete demo project and just want to get started with integration quickly, we recommend using the more efficient AI Integration Assistant. Simply describe your requirements, and it will automatically generate the integration code, significantly boosting development efficiency.
+
+Click here to experience [AI integration]((https://cloud.tencent.com/document/product/647/125504)) now!
+
 
 ## Install
 npm:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-vue2",
-  "version": "4.4.2",
+  "version": "4.4.5",
   "main": "./tuicall-uikit-vue2.umd.js",
   "module": "./tuicall-uikit-vue2.es.js",
   "types": "./types/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@tencentcloud/tui-core-lite": "1.0.0",
-    "@trtc/call-engine-lite-js": "~3.5.0",
+    "@trtc/call-engine-lite-js": "~3.5.5",
     "@tencentcloud/lite-chat": "^1.6.3",
     "@trtc/call-engine-lite-wx": "~3.4.7"
 },

package/src/Components/TUICallKit.vue

@@ -14,7 +14,7 @@ import SingleCall from './components/SingleCall/SingleCall.vue';
 import GroupCall from './components/GroupCall/GroupCall.vue';
 import { PermitTip } from './components/common/PermitTip/PermitTip';
 import { Toast } from './components/common/Toast';
-import { AISubtitle } from './components/common/AIAssistant';
+import AISubtitle from './components/common/AIAssistant/AISubtitle.vue';
 import { UIKitModal } from './components/common/UIKitModal';
 import { TUIGlobal, TUIStore, StoreName, TUICallKitAPI, NAME, CallStatus, CallMediaType, VideoDisplayMode, VideoResolution } from '../TUICallService/index';
 import {

package/src/Components/assets/aiAssistant/desktop/subtitleSettings.svg

@@ -0,0 +1,4 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.06218 6.75C9.06218 8.40685 7.71903 9.75 6.06218 9.75C4.40532 9.75 3.06218 8.40685 3.06218 6.75C3.06218 5.09315 4.40532 3.75 6.06218 3.75C7.71903 3.75 9.06218 5.09315 9.06218 6.75ZM8.06218 6.75C8.06218 5.64543 7.16675 4.75 6.06218 4.75C4.95761 4.75 4.06218 5.64543 4.06218 6.75C4.06218 7.85457 4.95761 8.75 6.06218 8.75C7.16675 8.75 8.06218 7.85457 8.06218 6.75Z" fill="white" fill-opacity="0.75"/>
+<path d="M6.06218 0L12.1244 3.375V10.125L6.06218 13.5L0 10.125V3.375L6.06218 0ZM1 3.9628V9.5372L6.06218 12.3555L11.1244 9.5372V3.9628L6.06218 1.14453L1 3.9628Z" fill="white" fill-opacity="0.75"/>
+</svg>

package/src/Components/assets/aiAssistant/mobile/close-aiAssistant.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 12.1182H17.333V3.66699H2.66699V16.333H8.18945V18H1V2H19V12.1182Z" fill="white" fill-opacity="0.9"/>
+<path d="M15.6667 8.02202C15.6667 8.02202 14.9677 7.72533 13.7849 7.77478C13.086 7.82422 12.5484 7.97257 12.172 8.36815C11.7419 8.81319 11.5269 9.35711 11.5269 10.0494C11.5269 10.7417 11.7419 11.2361 12.1183 11.6317C12.4946 11.9779 12.9785 12.1262 13.6237 12.1757C14.4301 12.2745 15.6667 11.9779 15.6667 11.9779V13.2635C15.6667 13.2635 14.7527 13.4613 13.5161 13.4613C12.4946 13.4613 11.6882 13.1152 11.043 12.5218C10.4516 11.879 10.129 11.0878 10.129 10.0988C10.129 9.06043 10.4516 8.17036 11.1505 7.52754C11.8495 6.88471 12.7097 6.53857 13.7849 6.53857C14.7527 6.53857 15.6667 6.73637 15.6667 6.73637V8.02202Z" fill="white" fill-opacity="0.9"/>
+<path d="M9.53763 8.02202C9.53763 8.02202 8.83871 7.72533 7.65592 7.77478C6.95699 7.82422 6.41936 7.97257 6.04301 8.36815C5.6129 8.81319 5.39785 9.35711 5.39785 10.0494C5.39785 10.7417 5.6129 11.2361 5.98925 11.6317C6.36559 11.9779 6.84946 12.1262 7.49462 12.1757C8.30108 12.2745 9.53763 11.9779 9.53763 11.9779V13.2635C9.53763 13.2635 8.62366 13.4613 7.3871 13.4613C6.36559 13.4613 5.55914 13.1152 4.91398 12.5218C4.32258 11.879 4 11.0878 4 10.0988C4 9.06043 4.32258 8.17036 5.02151 7.52754C5.72043 6.88471 6.58065 6.53857 7.65592 6.53857C8.62366 6.53857 9.53763 6.73637 9.53763 6.73637V8.02202Z" fill="white" fill-opacity="0.9"/>
+<rect x="10" y="14.5916" width="10" height="5" rx="2.5" fill="#676A70"/>
+<rect x="10.4997" y="15.0916" width="4" height="4" rx="2" fill="white"/>
+</svg>

package/src/Components/assets/aiAssistant/mobile/open-aiAssistant.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 12.1182H17.333V3.66699H2.66699V16.333H8.18945V18H1V2H19V12.1182Z" fill="white" fill-opacity="0.9"/>
+<path d="M15.6667 8.02202C15.6667 8.02202 14.9677 7.72533 13.7849 7.77478C13.086 7.82422 12.5484 7.97257 12.172 8.36815C11.7419 8.81319 11.5269 9.35711 11.5269 10.0494C11.5269 10.7417 11.7419 11.2361 12.1183 11.6317C12.4946 11.9779 12.9785 12.1262 13.6237 12.1757C14.4301 12.2745 15.6667 11.9779 15.6667 11.9779V13.2635C15.6667 13.2635 14.7527 13.4613 13.5161 13.4613C12.4946 13.4613 11.6882 13.1152 11.043 12.5218C10.4516 11.879 10.129 11.0878 10.129 10.0988C10.129 9.06043 10.4516 8.17036 11.1505 7.52754C11.8495 6.88471 12.7097 6.53857 13.7849 6.53857C14.7527 6.53857 15.6667 6.73637 15.6667 6.73637V8.02202Z" fill="white" fill-opacity="0.9"/>
+<path d="M9.53763 8.02202C9.53763 8.02202 8.83871 7.72533 7.65592 7.77478C6.95699 7.82422 6.41936 7.97257 6.04301 8.36815C5.6129 8.81319 5.39785 9.35711 5.39785 10.0494C5.39785 10.7417 5.6129 11.2361 5.98925 11.6317C6.36559 11.9779 6.84946 12.1262 7.49462 12.1757C8.30108 12.2745 9.53763 11.9779 9.53763 11.9779V13.2635C9.53763 13.2635 8.62366 13.4613 7.3871 13.4613C6.36559 13.4613 5.55914 13.1152 4.91398 12.5218C4.32258 11.879 4 11.0878 4 10.0988C4 9.06043 4.32258 8.17036 5.02151 7.52754C5.72043 6.88471 6.58065 6.53857 7.65592 6.53857C8.62366 6.53857 9.53763 6.73637 9.53763 6.73637V8.02202Z" fill="white" fill-opacity="0.9"/>
+<path d="M10 17.0916C10 15.7108 11.1193 14.5916 12.5 14.5916H17.5C18.8807 14.5916 20 15.7108 20 17.0916C20 18.4723 18.8807 19.5916 17.5 19.5916H12.5C11.1193 19.5916 10 18.4723 10 17.0916Z" fill="#4588F5"/>
+<rect x="15.5042" y="15.0916" width="4" height="4" rx="2" fill="white"/>
+</svg>

package/src/Components/assets/aiAssistant/mobile/subtitleSettings.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.84529 9.34448L1.15586 8.65505L3.81114 5.99977L1.15586 3.34448L1.84529 2.65505L5.19 5.99977L1.84529 9.34448Z" fill="white" fill-opacity="0.42"/>
+</svg>

package/src/Components/components/base/CustomSelect/CustomSelect.ts

@@ -0,0 +1,45 @@
+export interface SelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+
+export const CustomSelectProps = {
+  // Vue2 compatible: use 'value' instead of 'modelValue'
+  value: {
+    type: [String, Number],
+    default: '',
+  },
+  options: {
+    type: Array as () => SelectOption[],
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: 'Please select',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    values: ['small', 'medium', 'large'],
+    default: 'medium',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+};
+
+export const CustomSelectEmits = {
+  // Vue2 compatible: use 'input' instead of 'update:modelValue'
+  'input': (value: string | number) => true,
+  'change': (value: string | number) => true,
+  'clear': () => true,
+};

package/src/Components/components/base/CustomSelect/CustomSelect.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="custom-select-wrapper" ref="wrapperRef">
+    <div 
+      class="custom-select" 
+      :class="{ 'is-open': isOpen, 'is-disabled': disabled }"
+      @click.stop="toggleDropdown"
+    >
+      <span class="select-text">{{ displayText }}</span>
+      <svg 
+        class="select-arrow" 
+        :class="{ 'is-open': isOpen }" 
+        width="12" 
+        height="8" 
+        viewBox="0 0 12 8" 
+        fill="none"
+      >
+        <path 
+          d="M1 1L6 6L11 1" 
+          stroke="#C0C4CC" 
+          stroke-width="1.5" 
+          stroke-linecap="round" 
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+    <div class="custom-options" v-show="isOpen">
+      <div 
+        v-for="option in options" 
+        :key="option.value"
+        class="custom-option" 
+        :class="{ 'is-selected': value === option.value }"
+        @click.stop="selectOption(option.value)"
+      >
+        {{ option.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
+import { CustomSelectProps, CustomSelectEmits, type SelectOption } from './CustomSelect';
+
+const props = defineProps(CustomSelectProps);
+const emit = defineEmits(CustomSelectEmits);
+
+const isOpen = ref(false);
+const wrapperRef = ref<HTMLElement | null>(null);
+
+const displayText = computed(() => {
+  const selectedOption = props.options.find(option => option.value === props.value);
+  return selectedOption ? selectedOption.label : props.placeholder;
+});
+
+const toggleDropdown = () => {
+  if (props.disabled) return;
+  isOpen.value = !isOpen.value;
+};
+
+const selectOption = (value: string | number) => {
+  // Vue2 compatible: emit 'input' event for v-model
+  emit('input', value);
+  emit('change', value);
+  isOpen.value = false;
+};
+
+// Close dropdown when clicking outside
+const handleClickOutside = (event: MouseEvent) => {
+  if (!wrapperRef.value) return;
+  
+  const target = event.target as HTMLElement;
+  // Check if click is outside the wrapper element
+  if (!wrapperRef.value.contains(target)) {
+    isOpen.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style lang="scss" scoped>
+.custom-select-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.custom-select {
+  height: 36px;
+  padding: 0 32px 0 12px;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #606266;
+  background: #FFFFFF;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition: all 0.3s;
+
+  &:hover:not(.is-disabled) {
+    border-color: #C0C4CC;
+  }
+
+  &.is-open {
+    border-color: #409EFF;
+    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+  }
+
+  &.is-disabled {
+    background: #F5F7FA;
+    color: #C0C4CC;
+    cursor: not-allowed;
+    border-color: #E4E7ED;
+  }
+}
+
+.select-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select-arrow {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  transition: transform 0.3s;
+
+  &.is-open {
+    transform: translateY(-50%) rotate(180deg);
+  }
+}
+
+.custom-options {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #FFFFFF;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  margin-top: 4px;
+  overflow: hidden;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.custom-option {
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #606266;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #F5F7FA;
+    color: #409EFF;
+  }
+
+  &.is-selected {
+    color: #409EFF;
+    font-weight: 500;
+
+    &:hover {
+      background: #F5F7FA;
+      color: #409EFF;
+    }
+  }
+}
+
+// Scrollbar styling for options
+.custom-options::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-options::-webkit-scrollbar-track {
+  background: #F1F1F1;
+  border-radius: 3px;
+}
+
+.custom-options::-webkit-scrollbar-thumb {
+  background: #C0C4CC;
+  border-radius: 3px;
+
+  &:hover {
+    background: #A8ABB2;
+  }
+}
+</style>

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

@@ -1,17 +1,40 @@
 <template>
   <div
-    v-show="subtitleInfoList.length"
-    :class="['ai-subtitle', customClass]"
+    v-if="isAITranscriberEnabled"
+    :class="[
+      isPC ? 'ai-subtitle-pc' : 'ai-subtitle-h5',
+      customClass,
+      { 
+        'ai-subtitle-pc--expanded': showSettingsModal && isPC,
+        'ai-subtitle-h5--expanded': showSettingsModal && !isPC
+      }
+    ]"
     :style="[customStyle]"
   >
-    <div v-for="(subtitleInfo, index) in 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 subtitleInfo?.translation">
-        <span>{{ `[${tranlationContent?.language}]: ${tranlationContent?.content}` }}</span>
-      </div>
-    </div>
+    <!-- Subtitle Content Component -->
+    <SubtitleContent
+      v-show="!showSettingsModal"
+      @open-settings="openSettingsModal"
+      :class="isPC ? 'ai-subtitle-pc__content' : 'ai-subtitle-h5__content'"
+    />
+    
+    <!-- Settings Modal Component (Same Level) -->
+    <SubtitleSettingsPC 
+      v-if="isPC"
+      :visible="showSettingsModal"
+      @update:visible="showSettingsModal = $event"
+      @confirm="handleSettingsConfirm"
+      class="ai-subtitle-pc__settings"
+    />
+
+    <!-- Settings Modal Component (H5) -->
+    <SubtitleSettingsH5
+      v-else 
+      :visible="showSettingsModal"
+      @update:visible="showSettingsModal = $event"
+      @confirm="handleSettingsConfirm"
+      class="ai-subtitle-h5__settings"
+    />
   </div>
 </template>
 
@@ -24,8 +47,17 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { onMounted, ref, onUnmounted } from '../../../../adapter-vue';
-import { aiAssistant, ASREvent } from './index';
+import { ref, onMounted } from '../../../../adapter-vue';
+import SubtitleContent from './components/SubtitleContent.vue';
+import SubtitleSettingsPC from './components/SubtitleSettingsPC.vue';
+import SubtitleSettingsH5 from './components/SubtitleSettingsH5.vue';
+import { TUIGlobal } from '../../../../TUICallService/index';
+import { useAIAssistant } from '../../../hooks/useAIAssistant';
+
+const isPC = TUIGlobal.isPC;
+
+// Use AI Assistant hook (now includes both status and data)
+const { isAITranscriberEnabled } = useAIAssistant();
 
 defineProps({
   customClass: {
@@ -36,40 +68,126 @@ defineProps({
   },
 })
 
-const subtitleInfoList = ref([]);
+const showSettingsModal = ref(false);
 
-const handleAISubtitle = (data: any) => {
-  if (!data?.subtitleInfoList) return;
-
-  subtitleInfoList.value = JSON.parse(JSON.stringify(data.subtitleInfoList));
+const openSettingsModal = () => {
+  showSettingsModal.value = true;
 };
 
-onMounted(() => {
-  aiAssistant.on(ASREvent.TRANSCRIPTION, handleAISubtitle);
-})
-
-onUnmounted(() => {
-  aiAssistant.off(ASREvent.TRANSCRIPTION, handleAISubtitle);
-})
+const handleSettingsConfirm = (settings: any) => {
+  // Handle settings save logic here
+  showSettingsModal.value = false;
+};
 </script>
 
 <style lang="scss" scoped>
-.ai-subtitle {
+// PC端样式
+.ai-subtitle-pc {
   position: absolute;
-  z-index: 100;
-  bottom: 110px;
+  z-index: 1;
   left: 50%;
-  padding: 10px 12px;
-  color: #fff;
-  background-color: rgba(79, 88, 107, 0.7);
-  border-radius: 8px;
   transform: translateX(-50%);
-  width: 260px;
-  max-height: 280px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: auto;
+  height: auto;
+  bottom: 110px;
+  
+  // PC端展开状态
+  &--expanded {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    background-color: transparent;
+    transform: none !important;
+    z-index: 1000;
+  }
+
+  &__content {
+    // PC端内容定位
+    .ai-subtitle-pc:not(.ai-subtitle-pc--expanded) & {
+      position: relative;
+      width: auto;
+      height: auto;
+    }
+    
+    // PC端展开时隐藏内容
+    .ai-subtitle-pc--expanded & {
+      display: none;
+    }
+  }
+
+  &__settings {
+    // PC端设置面板定位
+    .ai-subtitle-pc--expanded & {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1001;
+    }
+    
+    // PC端未展开时隐藏设置
+    .ai-subtitle-pc:not(.ai-subtitle-pc--expanded) & {
+      display: none;
+    }
+  }
 }
-.sender-name {
-  color: yellow;
+
+// H5端样式
+.ai-subtitle-h5 {
+  position: absolute;
+  z-index: 100;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  height: auto;
+  bottom: 26%;
+  
+  // H5端展开状态
+  &--expanded {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    background-color: transparent;
+    transform: none !important;
+    z-index: 1000;
+  }
+
+  &__content {
+    // H5端内容定位
+    .ai-subtitle-h5:not(.ai-subtitle-h5--expanded) & {
+      position: relative;
+      width: auto;
+      height: auto;
+    }
+    
+    // H5端展开时隐藏内容
+    .ai-subtitle-h5--expanded & {
+      display: none;
+    }
+  }
+
+  &__settings {
+    // H5端设置面板定位
+    .ai-subtitle-h5--expanded & {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1001;
+    }
+    
+    // H5端未展开时隐藏设置
+    .ai-subtitle-h5:not(.ai-subtitle-h5--expanded) & {
+      display: none;
+    }
+  }
 }
 </style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div @click="handleToggle">
+    <TKImage v-if="isAITranscriberRunning" :src="openAiAssistantIcon" width="24px" height="24px" />
+    <TKImage v-else :src="closeAiAssistantIcon" width="24px" height="24px" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TUICallKitAPI } from "../../../../../TUICallService/index";
+import { useAIAssistant } from '../../../../hooks/useAIAssistant';
+import TKImage from '../../../base/TKImage/TKImage.vue';
+import openAiAssistantIcon from '../../../../assets/aiAssistant/mobile/open-aiAssistant.svg';
+import closeAiAssistantIcon from '../../../../assets/aiAssistant/mobile/close-aiAssistant.svg';
+
+// Use AI Transcriber status hook
+const { isAITranscriberRunning } = useAIAssistant();
+
+// Toggle AI transcriber
+const handleToggle = async () => {
+  try {
+    if (isAITranscriberRunning.value) {
+      await TUICallKitAPI._aiAssistant.stopRealtimeTranscriber();
+    } else {
+      await TUICallKitAPI._aiAssistant.startRealtimeTranscriber({
+        sourceLanguage: 'zh',
+        translationLanguages: ['en']
+      });
+    }
+  } catch (error) {
+    console.error('Failed to toggle AI transcriber:', error);
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="ai-transcriber-switch">
+    <span class="ai-transcriber-switch__label">{{ t('ai-subtitle') }}</span>
+    <div 
+      class="ai-transcriber-switch__toggle"
+      :class="{ 'ai-transcriber-switch__toggle--active': isAITranscriberRunning }"
+      @click="handleToggle"
+    >
+      <div class="ai-transcriber-switch__slider"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TUICallKitAPI }  from "../../../../../TUICallService/index";
+import { useAIAssistant } from '../../../../hooks/useAIAssistant';
+import { useTranslate } from '../../../../hooks/useTranslate';
+
+// Use i18n translation
+const t = useTranslate();
+
+// Use AI Transcriber status hook
+const { isAITranscriberRunning } = useAIAssistant();
+
+// Toggle AI transcriber
+const handleToggle = async () => {
+  try {
+    if (isAITranscriberRunning.value) {
+      await TUICallKitAPI._aiAssistant.stopRealtimeTranscriber();
+    } else {
+      await TUICallKitAPI._aiAssistant.startRealtimeTranscriber({
+        sourceLanguage: 'zh',
+        translationLanguages: ['en']
+      });
+    }
+  } catch (error) {
+    console.error('Failed to toggle AI transcriber:', error);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ai-transcriber-switch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 20px;
+  color: white;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: PingFang SC;
+  cursor: pointer;
+
+  &__label {
+    white-space: nowrap;
+  }
+
+  &__toggle {
+    position: relative;
+    width: 32px;
+    height: 20px;
+    background: #FFFFFF4D;
+    border-radius: 10px;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+
+    &--active {
+      background: #1C66E5;
+    }
+  }
+
+  &__slider {
+    position: absolute;
+    top: 3px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: white;
+    transition: transform 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+    .ai-transcriber-switch__toggle--active & {
+      transform: translateX(14px);
+    }
+  }
+}
+</style>