@trtc/calls-uikit-react 4.4.3 → 4.4.4

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

@@ -0,0 +1,265 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { TUICallKitAPI } from '../../../../../TUICallService/index';
+import { useTranslate } from '../../../../hooks';
+import './SubtitleSettingsH5.scss';
+
+interface SubtitleSettingsH5Props {
+  visible: boolean;
+  onVisibleChange: (visible: boolean) => void;
+  onConfirm: (settings: {
+    recognitionLanguage: string;
+    translationLanguage: string;
+    subtitleEnabled: boolean;
+  }) => void;
+}
+
+interface LanguageOption {
+  value: string;
+  label: string;
+}
+
+const SubtitleSettingsH5: React.FC<SubtitleSettingsH5Props> = ({
+  visible,
+  onVisibleChange,
+  onConfirm
+}) => {
+  // Use i18n translation
+  const { t } = useTranslate();
+
+  // Confirmed settings (saved on confirm button click)
+  const confirmedSettingsRef = useRef({
+    recognitionLanguage: 'zh',
+    translationLanguage: '',
+    subtitleEnabled: true
+  });
+
+  // Temporary editing state (current user selections)
+  const [recognitionLanguage, setRecognitionLanguage] = useState('zh');
+  const [translationLanguage, setTranslationLanguage] = useState('');
+  const [subtitleEnabled, setSubtitleEnabled] = useState(true);
+
+  // UI state for language selectors
+  const [showRecognitionLanguageSelector, setShowRecognitionLanguageSelector] = useState(false);
+  const [showTranslationLanguageSelector, setShowTranslationLanguageSelector] = useState(false);
+
+  // Reset to last confirmed settings when modal opens
+  useEffect(() => {
+    if (visible) {
+      setRecognitionLanguage(confirmedSettingsRef.current.recognitionLanguage);
+      setTranslationLanguage(confirmedSettingsRef.current.translationLanguage);
+      setSubtitleEnabled(confirmedSettingsRef.current.subtitleEnabled);
+      setShowRecognitionLanguageSelector(false);
+      setShowTranslationLanguageSelector(false);
+    }
+  }, [visible]);
+
+  // Language options - Supported recognition languages
+  const recognitionLanguageOptions: LanguageOption[] = [
+    { value: 'zh', label: '中文' },
+    { value: 'en', label: 'English' }
+  ];
+
+  // Translation options - Target translation languages (base list)
+  // Use native language names for better UX, but keep "no translation" internationalized
+  const baseTranslationLanguageOptions: LanguageOption[] = [
+    { value: '', label: t('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 (俄语)' }
+  ];
+
+  // Dynamically calculate translation options - exclude current recognition language
+  const translationLanguageOptions = baseTranslationLanguageOptions.filter(
+    option => option.value === '' || option.value !== recognitionLanguage
+  );
+
+  const getLanguageDisplayName = (value: string) => {
+    const allOptions = [...recognitionLanguageOptions, ...translationLanguageOptions];
+    const option = allOptions.find(opt => opt.value === value);
+    return option?.label || '';
+  };
+
+  const closeModal = () => {
+    onVisibleChange(false);
+  };
+
+  const selectRecognitionLanguage = (value: string) => {
+    setRecognitionLanguage(value);
+    setShowRecognitionLanguageSelector(false);
+    
+    // 如果翻译语言与新的识别语言相同，重置翻译语言
+    if (translationLanguage === value) {
+      setTranslationLanguage('');
+    }
+  };
+
+  const selectTranslationLanguage = (value: string) => {
+    setTranslationLanguage(value);
+    setShowTranslationLanguageSelector(false);
+  };
+
+  const toggleSubtitle = () => {
+    setSubtitleEnabled(!subtitleEnabled);
+  };
+
+  const confirmSettings = async () => {
+    try {
+      // Save current settings as confirmed settings
+      confirmedSettingsRef.current = {
+        recognitionLanguage,
+        translationLanguage,
+        subtitleEnabled
+      };
+
+      // Call updateRealTimeTranscriber when settings are confirmed
+      const translationLanguages = translationLanguage ? [translationLanguage] : [];
+      
+      await TUICallKitAPI._aiAssistant.updateRealTimeTranscriber({
+        sourceLanguage: recognitionLanguage,
+        translationLanguages: translationLanguages,
+      });
+
+      // Emit confirm event
+      onConfirm({
+        recognitionLanguage,
+        translationLanguage,
+        subtitleEnabled
+      });
+
+      closeModal();
+    } catch (error) {
+      console.error('Failed to update AI transcriber settings:', error);
+    }
+  };
+
+  // Don't render if not visible
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className="subtitle-settings-overlay">
+      <div className="subtitle-settings-modal" onClick={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div className="modal-header">
+          <h3 className="modal-title">{t('ai-subtitle-settings')}</h3>
+        </div>
+
+        {/* Content */}
+        <div className="modal-content">
+          {/* Recognition and translation settings group */}
+          <div className="setting-group">
+            <div className="group-title">{t('recognition-and-translation-settings')}</div>
+            <div className="group-content">
+              {/* Recognition language */}
+              <div className="setting-section">
+                <div className="section-header" onClick={() => setShowRecognitionLanguageSelector(true)}>
+                  <span className="section-title">{t('recognition-language')}</span>
+                  <span className="section-value">
+                    {getLanguageDisplayName(recognitionLanguage)}
+                    <svg className="arrow-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                      <path d="M6 4L10 8L6 12" stroke="#999" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                  </span>
+                </div>
+              </div>
+
+              {/* Translation language */}
+              <div className="setting-section">
+                <div className="section-header" onClick={() => setShowTranslationLanguageSelector(true)}>
+                  <span className="section-title">{t('translation-language')}</span>
+                  <span className="section-value">
+                    {getLanguageDisplayName(translationLanguage) || t('no-translation')}
+                    <svg className="arrow-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                      <path d="M6 4L10 8L6 12" stroke="#999" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                  </span>
+                </div>
+              </div>
+
+              {/* Subtitle display bilingual */}
+              <div className="setting-section">
+                <div className="section-header">
+                  <span className="section-title">{t('subtitle-display-bilingual')}</span>
+                  <div 
+                    className={`toggle-switch ${subtitleEnabled ? 'active' : ''}`} 
+                    onClick={toggleSubtitle}
+                  >
+                    <div className="toggle-slider"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer with buttons */}
+        <div className="modal-footer">
+          <button className="btn btn-cancel" onClick={closeModal}>{t('Cancel')}</button>
+          <button className="btn btn-confirm" onClick={confirmSettings}>{t('confirm')}</button>
+        </div>
+      </div>
+
+      {/* Language Selector Modals */}
+      {/* Recognition Language Selector */}
+      {showRecognitionLanguageSelector && (
+        <div className="language-selector-overlay" onClick={() => setShowRecognitionLanguageSelector(false)}>
+          <div className="language-selector" onClick={(e) => e.stopPropagation()}>
+            <div className="selector-header">
+              <h3 className="selector-title">{t('select-recognition-language')}</h3>
+              <div className="header-placeholder"></div>
+            </div>
+            <div className="language-list">
+              {recognitionLanguageOptions.map((lang) => (
+                <div 
+                  key={lang.value}
+                  className={`language-item ${recognitionLanguage === lang.value ? 'selected' : ''}`}
+                  onClick={() => selectRecognitionLanguage(lang.value)}
+                >
+                  <span>{lang.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Translation Language Selector */}
+      {showTranslationLanguageSelector && (
+        <div className="language-selector-overlay" onClick={() => setShowTranslationLanguageSelector(false)}>
+          <div className="language-selector" onClick={(e) => e.stopPropagation()}>
+            <div className="selector-header">
+              <h3 className="selector-title">{t('select-translation-language')}</h3>
+              <div className="header-placeholder"></div>
+            </div>
+            <div className="language-list">
+              {translationLanguageOptions.map((lang) => (
+                <div 
+                  key={lang.value}
+                  className={`language-item ${translationLanguage === lang.value ? 'selected' : ''}`}
+                  onClick={() => selectTranslationLanguage(lang.value)}
+                >
+                  <span>{lang.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SubtitleSettingsH5;

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

@@ -0,0 +1,98 @@
+.subtitle-settings-overlay-pc {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 489px;
+  height: 430px;
+  transform: translate(-50%, -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-pc {
+  background: white;
+  border-radius: 12px;
+  width: 480px;
+  height: 430px;
+  overflow: hidden;
+}
+
+.modal-header-pc {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 24px 10px 24px;
+}
+
+.modal-title-pc {
+  font-size: 16px;
+  font-weight: 600;
+  color: #000000E5;
+}
+
+.close-btn-pc {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}
+
+.modal-content-pc {
+  padding: 24px;
+}
+
+.setting-item-pc {
+  margin-bottom: 24px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.setting-label-pc {
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  color: #4F586B;
+  margin-bottom: 8px;
+}
+
+.modal-footer-pc {
+  display: flex;
+  justify-content: flex-end;
+  gap: 20px;
+  padding: 16px 24px 24px;
+}
+
+.btn-pc {
+  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-pc {
+    color: #1C66E5;
+    border-color: #1C66E5;
+    background-color: white;
+  }
+
+  &.btn-confirm-pc {
+    background: #1C66E5;
+    color: white;
+  }
+}

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

@@ -0,0 +1,198 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { TUICallKitAPI } from '../../../../../TUICallService/index';
+import { useTranslate } from '../../../../hooks';
+import CustomSelect, { SelectOption } from '../../../base/CustomSelect/CustomSelect';
+import './SubtitleSettingsPC.scss';
+
+interface SubtitleSettingsPCProps {
+  visible: boolean;
+  onVisibleChange: (visible: boolean) => void;
+  onConfirm: (settings: {
+    recognitionLanguage: string;
+    translationLanguage: string;
+    subtitleDisplay: string;
+  }) => void;
+}
+
+const SubtitleSettingsPC: React.FC<SubtitleSettingsPCProps> = ({
+  visible,
+  onVisibleChange,
+  onConfirm
+}) => {
+  // Use i18n translation
+  const { t } = useTranslate();
+  
+  // Confirmed settings (saved on confirm button click)
+  const confirmedSettingsRef = useRef({
+    recognitionLanguage: 'zh',
+    translationLanguage: '',
+    subtitleDisplay: 'both'
+  });
+
+  // Temporary editing state (current user selections)
+  const [recognitionLanguage, setRecognitionLanguage] = useState('zh');
+  const [translationLanguage, setTranslationLanguage] = useState('');
+  const [subtitleDisplay, setSubtitleDisplay] = useState('both');
+
+  // Reset to last confirmed settings when modal opens
+  useEffect(() => {
+    if (visible) {
+      setRecognitionLanguage(confirmedSettingsRef.current.recognitionLanguage);
+      setTranslationLanguage(confirmedSettingsRef.current.translationLanguage);
+      setSubtitleDisplay(confirmedSettingsRef.current.subtitleDisplay);
+    }
+  }, [visible]);
+
+  // Language options for CustomSelect - Supported recognition languages
+  const languageOptions: SelectOption[] = [
+    { value: 'zh', label: '中文' },
+    { value: 'en', label: 'English' }
+  ];
+
+  // Translation options for CustomSelect - Target translation languages (base list)
+  // Use native language names for better UX, but keep "no translation" internationalized
+  const baseTranslationOptions: SelectOption[] = [
+    { value: '', label: t('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 (俄语)' }
+  ];
+
+  // Dynamically calculate translation options - exclude current recognition language
+  const translationOptions = baseTranslationOptions.filter(
+    option => option.value === '' || option.value !== recognitionLanguage
+  );
+
+  // Subtitle display options
+  const subtitleDisplayOptions: SelectOption[] = [
+    { value: 'both', label: t('show-bilingual') },
+    { value: 'original', label: t('show-original-only') }
+  ];
+
+  const handleOverlayClick = () => {
+    closeModal();
+  };
+
+  const closeModal = () => {
+    onVisibleChange(false);
+  };
+
+  const handleLanguageChange = (value: string | number) => {
+    const newLanguage = String(value);
+    setRecognitionLanguage(newLanguage);
+    
+    // 如果翻译语言与新的识别语言相同，重置翻译语言
+    if (translationLanguage === newLanguage) {
+      setTranslationLanguage('');
+    }
+  };
+
+  const handleTranslationChange = (value: string | number) => {
+    setTranslationLanguage(String(value));
+  };
+
+  const handleSubtitleDisplayChange = (value: string | number) => {
+    setSubtitleDisplay(String(value));
+  };
+
+  const confirmSettings = async () => {
+    try {
+      // Save current settings as confirmed settings
+      confirmedSettingsRef.current = {
+        recognitionLanguage,
+        translationLanguage,
+        subtitleDisplay
+      };
+
+      // Call updateRealTimeTranscriber when settings are confirmed
+      const translationLanguages = translationLanguage ? [translationLanguage] : [];
+      
+      await TUICallKitAPI._aiAssistant.updateRealTimeTranscriber({
+        sourceLanguage: recognitionLanguage,
+        translationLanguages: translationLanguages,
+      });
+
+      // Emit confirm event
+      onConfirm({
+        recognitionLanguage,
+        translationLanguage,
+        subtitleDisplay
+      });
+
+      closeModal();
+    } catch (error) {
+      console.error('Failed to update AI transcriber settings:', error);
+    }
+  };
+
+  // Don't render if not visible
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className="subtitle-settings-overlay-pc" onClick={handleOverlayClick}>
+      <div className="subtitle-settings-modal-pc" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header-pc">
+          <h3 className="modal-title-pc">{t('ai-subtitle-settings')}</h3>
+          <button className="close-btn-pc" onClick={closeModal}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path d="M12 4L4 12M4 4L12 12" stroke="#666" strokeWidth="2" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+        
+        <div className="modal-content-pc">
+          {/* Recognition language */}
+          <div className="setting-item-pc">
+            <label className="setting-label-pc">{t('recognition-language')}</label>
+            <CustomSelect 
+              value={recognitionLanguage}
+              options={languageOptions}
+              onChange={handleLanguageChange}
+            />
+          </div>
+
+          {/* Translation language */}
+          <div className="setting-item-pc">
+            <label className="setting-label-pc">{t('translation-language')}</label>
+            <CustomSelect 
+              value={translationLanguage}
+              options={translationOptions}
+              onChange={handleTranslationChange}
+            />
+          </div>
+
+          {/* Subtitle display settings */}
+          <div className="setting-item-pc">
+            <label className="setting-label-pc">{t('subtitle-display-settings')}</label>
+            <CustomSelect 
+              value={subtitleDisplay}
+              options={subtitleDisplayOptions}
+              onChange={handleSubtitleDisplayChange}
+            />
+          </div>
+        </div>
+
+        <div className="modal-footer-pc">
+          <button className="btn-pc btn-cancel-pc" onClick={closeModal}>{t('Cancel')}</button>
+          <button className="btn-pc btn-confirm-pc" onClick={confirmSettings}>{t('save')}</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SubtitleSettingsPC;

package/src/Components/components/common/AIAssistant/components/index.ts

@@ -0,0 +1,5 @@
+export { default as SubtitleContent } from './SubtitleContent';
+export { default as SubtitleSettingsPC } from './SubtitleSettingsPC';
+export { default as SubtitleSettingsH5 } from './SubtitleSettingsH5';
+export { default as AITranscriberSwitchPC } from './AITranscriberSwitchPC';
+export { default as AITranscriberSwitchH5 } from './AITranscriberSwitchH5';

package/src/Components/components/common/AIAssistant/index.ts

@@ -7,4 +7,6 @@ export {
   aiAssistant,
   ASREvent,
   AISubtitle,
-}
+};
+
+export * from './components';

package/src/Components/components/common/TopBar/h5/TopBarH5.tsx

@@ -3,9 +3,11 @@ import Time from '../../../base/Time/Time';
 import Col from '../../../base/Grid/Col';
 import Row from '../../../base/Grid/Row';
 import Minimize from '../../ButtonPanel/button/Minimize';
+import { AITranscriberSwitchH5 } from '../../AIAssistant/components';
 import { CallRole, CallStatus } from '../../../../../TUICallService';
 import Tip from '../../Tip/Tip';
 import { CallInfoContext } from '../../../../context';
+import { useAIAssistant } from '../../../../hooks/useAIAssistant';
 import topBarH5Style from './TopBarH5.module.scss';
 
 interface ITopBarH5Props {
@@ -17,13 +19,21 @@ export default function TopBarH5(props: ITopBarH5Props) {
   const {
     isGroupCall, callStatus, callRole, allowedMinimized,
   } = useContext(CallInfoContext);
+  
+  const { isAITranscriberEnabled } = useAIAssistant();
+  
   const showTip = (isGroupCall
     && (callStatus === CallStatus.CONNECTED || callRole === CallRole.CALLER));
+  const showAITranscriberSwitch = callStatus === CallStatus.CONNECTED && isAITranscriberEnabled;
+  
   return (
     <div className={topBarH5Style['top-bar-container']}>
       <Row className={topBarH5Style['top-bar']}>
         <Col justify='start' span={4}>
-          {allowedMinimized && <Minimize />}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            {allowedMinimized && <Minimize />}
+            {showAITranscriberSwitch && <AITranscriberSwitchH5 />}
+          </div>
         </Col>
         <Col align='center' span={4}>
           {callStatus === CallStatus.CONNECTED

package/src/Components/components/common/TopBar/pc/TopBarPC.module.scss

@@ -5,4 +5,24 @@
     line-height: 20px;
     margin-top: 20px;
     z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.topbar-center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.topbar-right-controls {
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    z-index: 3;
 }

package/src/Components/components/common/TopBar/pc/TopBarPC.tsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
 import Time from '../../../base/Time/Time';
-import Col from '../../../base/Grid/Col';
-import Row from '../../../base/Grid/Row';
 import Minimize from '../../ButtonPanel/button/Minimize/Minimize';
 import FullScreen from '../../ButtonPanel/button/FullScreen';
+import { AITranscriberSwitchPC } from '../../AIAssistant/components';
 import { CallStatus } from '../../../../../TUICallService';
 import { CallInfoContext } from '../../../../context';
+import { useAIAssistant } from '../../../../hooks/useAIAssistant';
 import topBarPCStyle from './TopBarPC.module.scss';
 
 interface ITopBarPCProps {
@@ -20,17 +20,22 @@ export default function TopBarPC(props: ITopBarPCProps) {
     allowedMinimized,
     allowedFullScreen,
   } = useContext(CallInfoContext);
+  
+  const { isAITranscriberEnabled } = useAIAssistant();
+  
   const showTime = callStatus === CallStatus.CONNECTED && !isGroupCall;
+  const showAITranscriberSwitch = callStatus === CallStatus.CONNECTED && isAITranscriberEnabled;
+  
   return (
-    <Row className={topBarPCStyle['single-top-bar']}>
-      <Col span={4} />
-      <Col span={4}>
+    <div className={topBarPCStyle['single-top-bar']}>
+      <div className={topBarPCStyle['topbar-center']}>
         {showTime && <Time callDuration={callDuration} />}
-      </Col>
-      <Col span={4} justify='end'>
+      </div>
+      <div className={topBarPCStyle['topbar-right-controls']}>
+        {showAITranscriberSwitch && <AITranscriberSwitchPC />}
         {allowedMinimized && <Minimize />}
         {allowedFullScreen && <FullScreen domID='tuicallkit-id' />}
-      </Col>
-    </Row>
+      </div>
+    </div>
   );
 }