@trtc/calls-uikit-react 4.4.3 → 4.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-react",
-  "version": "4.4.3",
+  "version": "4.4.4",
   "main": "./tuicall-uikit-react.umd.js",
   "module": "./tuicall-uikit-react.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.2",
+    "@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/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.scss

@@ -0,0 +1,116 @@
+.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 - more subtle and modern
+.custom-options::-webkit-scrollbar {
+  width: 4px;
+}
+
+.custom-options::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-options::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  
+  &:hover {
+    background: rgba(0, 0, 0, 0.2);
+  }
+}
+
+// Hide scrollbar for Firefox
+.custom-options {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
+}

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

@@ -0,0 +1,96 @@
+import React, { useState, useRef, useEffect } from 'react';
+import './CustomSelect.scss';
+
+export interface SelectOption {
+  label: string;
+  value: string | number;
+}
+
+interface CustomSelectProps {
+  value: string | number;
+  options: SelectOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  onChange: (value: string | number) => void;
+}
+
+const CustomSelect: React.FC<CustomSelectProps> = ({
+  value,
+  options,
+  placeholder = 'Please select',
+  disabled = false,
+  onChange
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const displayText = (() => {
+    const selectedOption = options.find(option => option.value === value);
+    return selectedOption ? selectedOption.label : placeholder;
+  })();
+
+  const toggleDropdown = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+  };
+
+  const selectOption = (optionValue: string | number) => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="custom-select-wrapper" ref={wrapperRef}>
+      <div 
+        className={`custom-select ${isOpen ? 'is-open' : ''} ${disabled ? 'is-disabled' : ''}`}
+        onClick={toggleDropdown}
+      >
+        <span className="select-text">{displayText}</span>
+        <svg 
+          className={`select-arrow ${isOpen ? 'is-open' : ''}`}
+          width="12" 
+          height="8" 
+          viewBox="0 0 12 8" 
+          fill="none"
+        >
+          <path 
+            d="M1 1L6 6L11 1" 
+            stroke="#C0C4CC" 
+            strokeWidth="1.5" 
+            strokeLinecap="round" 
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+      {isOpen && (
+        <div className="custom-options">
+          {options.map((option) => (
+            <div 
+              key={option.value}
+              className={`custom-option ${value === option.value ? 'is-selected' : ''}`}
+              onClick={() => selectOption(option.value)}
+            >
+              {option.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomSelect;

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

@@ -0,0 +1,109 @@
+// PC端样式
+.ai-subtitle-pc {
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  height: auto;
+  bottom: 110px;
+  
+  // PC端展开状态
+  &.ai-subtitle-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;
+  }
+
+  .ai-subtitle-pc__content {
+    // PC端内容定位
+    .ai-subtitle-pc:not(.ai-subtitle-pc--expanded) & {
+      position: relative;
+      width: auto;
+      height: auto;
+    }
+    
+    // PC端展开时隐藏内容
+    .ai-subtitle-pc--expanded & {
+      display: none;
+    }
+  }
+
+  .ai-subtitle-pc__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;
+    }
+  }
+}
+
+// H5端样式
+.ai-subtitle-h5 {
+  position: absolute;
+  z-index: 100;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  height: auto;
+  bottom: 26%;
+  
+  // H5端展开状态
+  &.ai-subtitle-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;
+  }
+
+  .ai-subtitle-h5__content {
+    // H5端内容定位
+    .ai-subtitle-h5:not(.ai-subtitle-h5--expanded) & {
+      position: relative;
+      width: auto;
+      height: auto;
+    }
+    
+    // H5端展开时隐藏内容
+    .ai-subtitle-h5--expanded & {
+      display: none;
+    }
+  }
+
+  .ai-subtitle-h5__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;
+    }
+  }
+}

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

@@ -1,19 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import { aiAssistant, ASREvent } from './index';
-
-interface TranslationContent {
-  language: string;
-  content: string;
-}
-
-interface SubtitleInfo {
-  roundId: string;
-  sender: string;
-  nick?: string;
-  text: string;
-  end: boolean;
-  translation: TranslationContent[];
-}
+import React, { useState } from 'react';
+import { TUIGlobal } from '../../../../TUICallService/index';
+import { useAIAssistant } from '../../../hooks/useAIAssistant';
+import SubtitleContent from './components/SubtitleContent';
+import SubtitleSettingsPC from './components/SubtitleSettingsPC';
+import SubtitleSettingsH5 from './components/SubtitleSettingsH5';
+import './AISubtitle.scss';
 
 interface AISubtitleProps {
   customClass?: string;
@@ -21,67 +12,62 @@ interface AISubtitleProps {
 }
 
 const AISubtitle: React.FC<AISubtitleProps> = ({ customClass, customStyle }) => {
-  const [subtitleInfoList, setSubtitleInfoList] = useState<SubtitleInfo[]>([]);
+  const isPC = TUIGlobal.isPC;
 
-  const handleAISubtitle = (data: any) => {
-    if (!data?.subtitleInfoList) return;
-    setSubtitleInfoList(JSON.parse(JSON.stringify(data.subtitleInfoList)));
-  };
+  // Use AI Assistant hook (now includes both status and data)
+  const { isAITranscriberEnabled } = useAIAssistant();
+
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
 
-  useEffect(() => {
-    aiAssistant.on(ASREvent.TRANSCRIPTION, handleAISubtitle);
-    
-    return () => {
-      aiAssistant.off(ASREvent.TRANSCRIPTION, handleAISubtitle);
-    };
-  }, []);
+  const openSettingsModal = () => {
+    setShowSettingsModal(true);
+  };
 
-  // 内联样式定义
-  const styles = {
-    subtitleContainer: {
-      position: 'absolute' as const,
-      zIndex: 100,
-      bottom: '120px',
-      left: '50%',
-      padding: '10px 12px',
-      color: '#fff',
-      backgroundColor: 'rgba(79, 88, 107, 0.7)',
-      borderRadius: '8px',
-      transform: 'translateX(-50%)',
-      width: '260px',
-      maxHeight: '280px',
-      overflowY: 'auto' as const,
-      overflowX: 'hidden' as const,
-    },
-    spacer: {
-      height: '16px',
-    },
-    senderName: {
-      color: 'yellow',
-    }
+  const handleSettingsConfirm = () => {
+    // Handle settings save logic here
+    setShowSettingsModal(false);
   };
 
-  if (!subtitleInfoList.length) {
+  // Don't render if AI transcriber is not enabled
+  if (!isAITranscriberEnabled) {
     return null;
   }
 
   return (
     <div
-      className={`ai-subtitle ${customClass || ''}`}
-      style={{ ...styles.subtitleContainer, ...customStyle }}
+      className={`
+        ${isPC ? 'ai-subtitle-pc' : 'ai-subtitle-h5'}
+        ${customClass || ''}
+        ${showSettingsModal && isPC ? 'ai-subtitle-pc--expanded' : ''}
+        ${showSettingsModal && !isPC ? 'ai-subtitle-h5--expanded' : ''}
+      `}
+      style={customStyle}
     >
-      {subtitleInfoList.map((subtitleInfo, index) => (
-        <div key={subtitleInfo.roundId}>
-          {index !== 0 && <div style={{ height: '16px' }} />}
-          <div style={styles.senderName}>{`${subtitleInfo?.nick || subtitleInfo?.sender}:`}</div>
-          <div>{subtitleInfo?.text}</div>
-          {subtitleInfo?.translation?.map((translationContent, transIndex) => (
-            <div key={transIndex}>
-              <span>{`[${translationContent?.language}]: ${translationContent?.content}`}</span>
-            </div>
-          ))}
-        </div>
-      ))}
+      {/* Subtitle Content Component */}
+      <div style={{ display: showSettingsModal ? 'none' : 'block' }}>
+        <SubtitleContent
+          onOpenSettings={openSettingsModal}
+          className={isPC ? 'ai-subtitle-pc__content' : 'ai-subtitle-h5__content'}
+        />
+      </div>
+      
+      {/* Settings Modal Component (Same Level) */}
+      {isPC && (
+        <SubtitleSettingsPC 
+          visible={showSettingsModal}
+          onVisibleChange={setShowSettingsModal}
+          onConfirm={handleSettingsConfirm}
+        />
+      )}
+
+      {/* Settings Modal Component (H5) */}
+      {!isPC && (
+        <SubtitleSettingsH5
+          visible={showSettingsModal}
+          onVisibleChange={setShowSettingsModal}
+          onConfirm={handleSettingsConfirm}
+        />
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { TUICallKitAPI } from '../../../../../TUICallService/index';
+import { useAIAssistant } from '../../../../hooks/useAIAssistant';
+import openAiAssistantIcon from '../../../../assets/aiAssistant/mobile/open-aiAssistant.svg';
+import closeAiAssistantIcon from '../../../../assets/aiAssistant/mobile/close-aiAssistant.svg';
+
+const AITranscriberSwitchH5: React.FC = () => {
+  // Use AI Transcriber status hook
+  const { isAITranscriberRunning } = useAIAssistant();
+
+  // Toggle AI transcriber
+  const handleToggle = async () => {
+    try {
+      if (isAITranscriberRunning) {
+        await TUICallKitAPI._aiAssistant.stopRealtimeTranscriber();
+      } else {
+        await TUICallKitAPI._aiAssistant.startRealtimeTranscriber({
+          sourceLanguage: 'zh',
+          translationLanguages: ['en']
+        });
+      }
+    } catch (error) {
+      console.error('Failed to toggle AI transcriber:', error);
+    }
+  };
+
+  return (
+    <div onClick={handleToggle}>
+      <img 
+        src={isAITranscriberRunning ? openAiAssistantIcon : closeAiAssistantIcon}
+        width="24px" 
+        height="24px"
+        alt="AI Assistant Toggle"
+      />
+    </div>
+  );
+};
+
+export default AITranscriberSwitchH5;

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

@@ -0,0 +1,46 @@
+.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);
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { TUICallKitAPI } from '../../../../../TUICallService/index';
+import { useAIAssistant } from '../../../../hooks/useAIAssistant';
+import { useTranslate } from '../../../../hooks';
+import './AITranscriberSwitchPC.scss';
+
+const AITranscriberSwitchPC: React.FC = () => {
+  // Use AI Transcriber status hook
+  const { isAITranscriberRunning } = useAIAssistant();
+  
+  // Use i18n translation
+  const { t } = useTranslate();
+
+  // Toggle AI transcriber
+  const handleToggle = async () => {
+    try {
+      if (isAITranscriberRunning) {
+        await TUICallKitAPI._aiAssistant.stopRealtimeTranscriber();
+      } else {
+        await TUICallKitAPI._aiAssistant.startRealtimeTranscriber({
+          sourceLanguage: 'zh',
+          translationLanguages: ['en']
+        });
+      }
+    } catch (error) {
+      console.error('Failed to toggle AI transcriber:', error);
+    }
+  };
+
+  return (
+    <div className="ai-transcriber-switch" onClick={handleToggle}>
+      <span className="ai-transcriber-switch__label">{t('ai-subtitle')}</span>
+      <div 
+        className={`ai-transcriber-switch__toggle ${isAITranscriberRunning ? 'ai-transcriber-switch__toggle--active' : ''}`}
+      >
+        <div className="ai-transcriber-switch__slider"></div>
+      </div>
+    </div>
+  );
+};
+
+export default AITranscriberSwitchPC;