agora-appbuilder-core 4.1.9 → 4.1.11-beta.2

package/template/src/subComponents/caption/CaptionIcon.tsx

@@ -1,7 +1,7 @@
 import {View} from 'react-native';
 import React from 'react';
 import IconButton, {IconButtonProps} from '../../atoms/IconButton';
-import {useCaption} from './useCaption';
+import {LanguageTranslationConfig, useCaption} from './useCaption';
 import LanguageSelectorPopup from './LanguageSelectorPopup';
 import useSTTAPI from './useSTTAPI';
 import {useString} from '../../utils/useString';
@@ -26,42 +26,49 @@ const CaptionIcon = (props: CaptionIconProps) => {
     isOnActionSheet = false,
     closeActionSheet,
   } = props;
-  const {isCaptionON, setIsCaptionON, isSTTActive, isSTTError} = useCaption();
+  const {
+    isCaptionON,
+    setIsCaptionON,
+    isSTTActive,
+    isSTTError,
+    handleTranslateConfigChange,
+  } = useCaption();
 
   const [isLanguagePopupOpen, setLanguagePopup] =
     React.useState<boolean>(false);
 
-  const isFirstTimePopupOpen = React.useRef(false);
-  const {start, restart, isAuthorizedSTTUser} = useSTTAPI();
-  const isDisabled = !isAuthorizedSTTUser();
+  // const isFirstTimePopupOpen = React.useRef(false);
+  // const {start, restart, isAuthorizedSTTUser} = useSTTAPI();
+  // const isDisabled = !isAuthorizedSTTUser();
   const captionLabel = useString<boolean>(toolbarItemCaptionText);
   const label = captionLabel(isCaptionON);
   const onPress = () => {
-    if (isSTTError) {
-      setIsCaptionON(prev => !prev);
-      closeActionSheet();
-      return;
-    }
-    if (isSTTActive) {
-      // is lang popup has been shown once for any user in meeting
+    if (isSTTError || !isSTTActive) {
+      // Show popup when error or STT not active
+      setLanguagePopup(true);
+    } else {
+      // STT is active and no error
       setIsCaptionON(prev => !prev);
       closeActionSheet();
-    } else {
-      isFirstTimePopupOpen.current = true;
-      setLanguagePopup(true);
     }
+    // if (isSTTActive) {
+    //   // is lang popup has been shown once for any user in meeting
+    //   setIsCaptionON(prev => !prev);
+    //   closeActionSheet();
+    // } else {
+    //   // isFirstTimePopupOpen.current = true;
+    //   setLanguagePopup(true);
+    // }
   };
   const iconButtonProps: IconButtonProps = {
     onPress: onPressCustom || onPress,
-    disabled: isDisabled,
+    disabled: false,
     iconProps: {
       name: isCaptionON ? 'captions-off' : 'captions',
       iconBackgroundColor: isCaptionON
         ? $config.PRIMARY_ACTION_BRAND_COLOR
         : '',
-      tintColor: isDisabled
-        ? $config.SEMANTIC_NEUTRAL
-        : isCaptionON
+      tintColor: isCaptionON
         ? $config.PRIMARY_ACTION_TEXT_COLOR
         : $config.SECONDARY_ACTION_COLOR,
     },
@@ -80,22 +87,16 @@ const CaptionIcon = (props: CaptionIconProps) => {
     iconButtonProps.toolTipMessage = label;
   }
 
-  const onConfirm = async (langChanged, language) => {
-    setLanguagePopup(false);
-    closeActionSheet();
-    isFirstTimePopupOpen.current = false;
-    const method = isCaptionON ? 'stop' : 'start';
-    if (method === 'stop') return; // not closing the stt service as it will stop for whole channel
-    if (method === 'start' && isSTTActive === true) return; // not triggering the start service if STT Service already started by anyone else in the channel
-    setIsCaptionON(prev => !prev);
+  const onConfirm = async (inputTranslateConfig: LanguageTranslationConfig) => {
     try {
-      const res = await start(language);
-      if (res?.message.includes('STARTED')) {
-        // channel is already started now restart
-        await restart(language);
-      }
+      closeActionSheet();
+      setLanguagePopup(false);
+      setIsCaptionON(prev => !prev);
+      await handleTranslateConfigChange(inputTranslateConfig);
     } catch (error) {
-      console.log('eror in starting stt', error);
+      setIsCaptionON(false);
+      console.log('error in starting stt', error);
+      // State is NOT changed on error, user can retry
     }
   };
 
@@ -106,7 +107,7 @@ const CaptionIcon = (props: CaptionIconProps) => {
         modalVisible={isLanguagePopupOpen}
         setModalVisible={setLanguagePopup}
         onConfirm={onConfirm}
-        isFirstTimePopupOpen={isFirstTimePopupOpen.current}
+        // isFirstTimePopupOpen={isFirstTimePopupOpen.current}
       />
     </View>
   );

package/template/src/subComponents/caption/CaptionText.tsx

@@ -8,12 +8,21 @@ import {
 import React from 'react';
 
 import ThemeConfig from '../../../src/theme';
+import {useCaption} from './useCaption';
 import hexadecimalTransparency from '../../../src/utils/hexadecimalTransparency';
 import {isAndroid, isMobileUA} from '../../utils/common';
+import {getUserTranslatedText, getLanguageLabel, LanguageType} from './utils';
+
+type TranslationItem = {
+  lang: string;
+  text: string;
+  isFinal: boolean;
+};
 
 interface CaptionTextProps {
   user: string;
   value: string;
+  translations?: TranslationItem[];
   activeSpeakersCount: number;
   isActiveSpeaker?: boolean;
   activelinesAvailable?: number;
@@ -22,6 +31,9 @@ interface CaptionTextProps {
   setInActiveLinesAvaialble?: React.Dispatch<React.SetStateAction<number>>;
   captionUserStyle?: TextStyle;
   captionTextStyle?: TextStyle;
+  speakerUid?: string | number;
+  userLocalUid?: string | number;
+  spokenLanguageCode?: LanguageType;
 }
 
 const DESKTOP_LINE_HEIGHT = 28;
@@ -31,6 +43,7 @@ const MAX_CAPTIONS_LINES_ALLOWED = 3;
 const CaptionText = ({
   user,
   value,
+  translations = [],
   activeSpeakersCount,
   isActiveSpeaker = false,
   activelinesAvailable,
@@ -39,8 +52,12 @@ const CaptionText = ({
   setInActiveLinesAvaialble,
   captionUserStyle = {},
   captionTextStyle = {},
+  speakerUid,
+  userLocalUid,
+  spokenLanguageCode,
 }: CaptionTextProps) => {
   const isMobile = isMobileUA();
+  const {translationConfig, captionViewMode} = useCaption();
 
   const LINE_HEIGHT = isMobile ? MOBILE_LINE_HEIGHT : DESKTOP_LINE_HEIGHT;
 
@@ -82,6 +99,63 @@ const CaptionText = ({
    *
    */
 
+  // Get the appropriate source text for display based on viewer's language preferences
+  const viewerSourceLanguage = translationConfig.source[0];
+  // const localUserText = value;
+  // const remoteUserTranslatedText: {
+  //   text: string,
+  //   langcode: LanguageType
+  // } = () => {
+  //   const matchingTranslation = translations.find(
+  //     t => t.lang === viewerSourceLanguage,
+  //   );
+  //   if (matchingTranslation?.text) {
+  //     return matchingTranslation.text;
+  //   }
+  //   return value;
+  // };
+
+  const displayTranslatedViewText = getUserTranslatedText(
+    value,
+    translations,
+    viewerSourceLanguage,
+    speakerUid,
+    userLocalUid,
+  );
+
+  /**
+   * ROBUST TEXT EXTRACTION LOGIC
+   * Problem: value and translationText contain FULL accumulated text (can be 1000+ chars)
+   * Solution: Extract only the latest portion that fits in allocated lines
+   * - With translation: 2 lines source (~100-120 chars) + 1 line translation (~50-75 chars)
+   * - Without translation: 3 lines source (~150-180 chars)
+   */
+  const getLatestTextPortion = (text: string, maxChars: number) => {
+    if (!text || text.length <= maxChars) return text;
+
+    // Take last maxChars, try to find sentence boundary for cleaner cut
+    const portion = text.slice(-maxChars);
+    const sentenceMatch = portion.match(/[.!?]\s+/);
+
+    // If we find a sentence boundary after position 10, start from there
+    if (sentenceMatch && sentenceMatch.index > 10) {
+      return portion.slice(sentenceMatch.index + sentenceMatch[0].length);
+    }
+
+    // Otherwise just return the last maxChars
+    return portion;
+  };
+
+  // Adjust char limits based on mobile vs desktop (mobile has smaller font)
+  const sourceCharLimit =
+    captionViewMode === 'original-and-translated'
+      ? isMobile
+        ? 50
+        : 70 // 1 line for source when showing original + translation below
+      : isMobile
+      ? 150
+      : 180; // 3 lines for source in translated mode (uses full space)
+
   return (
     <View
       style={[
@@ -125,17 +199,36 @@ const CaptionText = ({
                   )) * LINE_HEIGHT,
           },
         ]}>
+        {/* Combined source and translation text */}
         <Text
           onLayout={handleTextLayout}
           style={[
             styles.captionText,
+            styles.transcriptionText,
             isMobile
               ? styles.mobileCaptionFontSize
               : styles.desktopCaptionFontSize,
             isAndroid() && {lineHeight: MOBILE_LINE_HEIGHT - 2},
             captionTextStyle,
           ]}>
-          {value}
+          {/* Default view when view mode is : translated */}
+          <Text style={styles.languageLabel}>
+            ({displayTranslatedViewText.langCode}
+            ):{' '}
+          </Text>
+          {getLatestTextPortion(
+            displayTranslatedViewText.value,
+            sourceCharLimit,
+          )}
+          {/* View mode when "Original and Translated" is selected - show original for remote users only */}
+          {speakerUid !== userLocalUid &&
+            captionViewMode === 'original-and-translated' && (
+              <>
+                {'\n'}
+                <Text style={styles.languageLabel}>(Original): </Text>
+                {getLatestTextPortion(value, sourceCharLimit)}
+              </>
+            )}
         </Text>
       </View>
     </View>
@@ -155,8 +248,8 @@ const styles = StyleSheet.create({
   },
 
   captionTextContainerStyle: {
-    overflow: 'hidden',
     width: '100%',
+    overflow: 'hidden',
     position: 'relative',
   },
 
@@ -168,6 +261,14 @@ const styles = StyleSheet.create({
     bottom: 0,
   },
 
+  transcriptionText: {
+    marginBottom: 2,
+  },
+
+  languageLabel: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.low,
+  },
+
   captionUserName: {
     fontWeight: '600',
     fontFamily: ThemeConfig.FontFamily.sansPro,

package/template/src/subComponents/caption/LanguageSelectorPopup.tsx

@@ -1,4 +1,4 @@
-import React, {SetStateAction, useContext} from 'react';
+import React, {SetStateAction} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import Spacer from '../../atoms/Spacer';
 import Popup from '../../atoms/Popup';
@@ -6,50 +6,124 @@ import TertiaryButton from '../../atoms/TertiaryButton';
 import PrimaryButton from '../../atoms/PrimaryButton';
 import ThemeConfig from '../../theme';
 import {useIsDesktop} from '../../utils/common';
-import {useCaption} from './useCaption';
+import {LanguageTranslationConfig, useCaption} from './useCaption';
+import Dropdown from '../../atoms/Dropdown';
 import DropdownMulti from '../../atoms/DropDownMulti';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import Loading from '../Loading';
-import {LanguageType} from './utils';
+import {LanguageType, langData, hasConfigChanged} from './utils';
 import {useString} from '../../utils/useString';
+import {useLocalUid} from '../../../agora-rn-uikit';
+// import {useRoomInfo} from '../../components/room-info/useRoomInfo';
 import {
-  sttChangeLanguagePopupDropdownError,
-  sttChangeLanguagePopupDropdownInfo,
   sttChangeLanguagePopupHeading,
   sttChangeLanguagePopupPrimaryBtnText,
-  sttChangeLanguagePopupSubHeading,
   sttLanguageChangeInProgress,
+  sttChangeLanguagePopupDropdownInfo,
 } from '../../language/default-labels/videoCallScreenLabels';
 import {cancelText} from '../../language/default-labels/commonLabels';
 
 interface LanguageSelectorPopup {
   modalVisible: boolean;
   setModalVisible: React.Dispatch<SetStateAction<boolean>>;
-  onConfirm: (param: boolean, lang: LanguageType[]) => void;
-  isFirstTimePopupOpen?: boolean;
+  onConfirm: (inputTranslationConfig: LanguageTranslationConfig) => void;
 }
 
 const LanguageSelectorPopup = (props: LanguageSelectorPopup) => {
-  const {isFirstTimePopupOpen = false} = props;
-  const [isOpen, setIsOpen] = React.useState(false);
   const isDesktop = useIsDesktop()('popup');
   const heading = useString<boolean>(sttChangeLanguagePopupHeading);
-  const subHeading = useString(sttChangeLanguagePopupSubHeading)();
   const cancelBtnLabel = useString(cancelText)();
   const ConfirmBtnLabel = useString(sttChangeLanguagePopupPrimaryBtnText)();
-  const ddError = useString(sttChangeLanguagePopupDropdownError)();
-  const ddInfo = useString(sttChangeLanguagePopupDropdownInfo)();
   const languageChangeInProgress = useString(sttLanguageChangeInProgress)();
-  const {language, setLanguage, isLangChangeInProgress, isSTTActive} =
-    useCaption();
+  const maxLangValInfo = useString(sttChangeLanguagePopupDropdownInfo)();
 
+  const {
+    translationConfig,
+    isLangChangeInProgress,
+    isSTTActive,
+    remoteSpokenLanguages,
+  } = useCaption();
+  const localUid = useLocalUid();
+  console.log(
+    '[STT_PER_USER_BOT] remoteSpokenLanguages',
+    remoteSpokenLanguages,
+  );
+
+  // const {sttLanguage} = useRoomInfo();
   const [error, setError] = React.useState<boolean>(false);
-  const [selectedValues, setSelectedValues] =
-    React.useState<LanguageType[]>(language);
+  const [isTargetOpen, setIsTargetOpen] = React.useState(false);
+
+  const [inputTranslationConfig, setInputTranslationConfig] =
+    React.useState<LanguageTranslationConfig>({
+      source: [],
+      targets: [],
+    });
+
   const isNotValidated =
-    isOpen && (selectedValues.length === 0 || selectedValues.length === 2);
+    inputTranslationConfig?.source.length === 0 ||
+    inputTranslationConfig?.targets.length === 0 ||
+    inputTranslationConfig?.targets.length > 10;
+
+  // Create source language options with "None" prepended
+  const sourceLanguageOptions = React.useMemo(() => {
+    // return [{label: 'None', value: 'none'}, ...langData];
+    return [...langData];
+  }, []);
+
+  // All remote languages except for own user
+  const suggestedRemoteTargetLangs = React.useMemo(() => {
+    const remoteLangs = Object.entries(remoteSpokenLanguages)
+      .filter(([uid, lang]) => uid !== String(localUid) && lang)
+      .map(([, lang]) => lang);
+
+    return Array.from(new Set(remoteLangs));
+  }, [remoteSpokenLanguages, localUid]);
+
+  // Initialize or update source/targets dynamically when modal opens
+  React.useEffect(() => {
+    if (!props.modalVisible) {
+      return;
+    }
+    console.log(
+      '[STT_PER_USER_BOT] language selecter popup opened',
+      translationConfig,
+    );
 
-  // React.useEffect(() => setSelectedValues(() => language), []);
+    const mergedTargets = Array.from(
+      new Set([
+        ...(translationConfig.targets || []),
+        ...suggestedRemoteTargetLangs,
+      ]),
+    );
+
+    setInputTranslationConfig({
+      source: translationConfig.source,
+      targets: mergedTargets,
+    });
+
+    console.log('[STT_PER_USER_BOT] mergedTargets —', mergedTargets);
+    console.log(
+      '[STT_PER_USER_BOT] all target langs —',
+      suggestedRemoteTargetLangs,
+    );
+  }, [props.modalVisible, translationConfig, suggestedRemoteTargetLangs]);
+
+  const onConfirmPress = async () => {
+    if (isNotValidated) {
+      return;
+    }
+
+    console.log('[LANG_SELECTOR] Confirm pressed:', {
+      inputTranslationConfig,
+    });
+
+    try {
+      props?.onConfirm(inputTranslationConfig);
+      // props.setModalVisible(false);
+    } catch (err) {
+      console.error('[LANG_SELECTOR] Error confirming STT config:', err);
+    }
+  };
 
   return (
     <Popup
@@ -57,8 +131,7 @@ const LanguageSelectorPopup = (props: LanguageSelectorPopup) => {
       setModalVisible={props.setModalVisible}
       showCloseIcon={true}
       contentContainerStyle={styles.contentContainer}
-      title={heading(isFirstTimePopupOpen)}
-      subtitle={subHeading}>
+      title={heading(isSTTActive ? false : true)}>
       {isLangChangeInProgress ? (
         <View style={styles.changeInProgress}>
           <Loading
@@ -70,35 +143,74 @@ const LanguageSelectorPopup = (props: LanguageSelectorPopup) => {
         </View>
       ) : (
         <>
+          {/* Source Language */}
+          <View>
+            <Text style={styles.labelText}>
+              What language will you speak in this meeting?
+            </Text>
+            <Spacer size={8} />
+            <Dropdown
+              label="Select language"
+              data={sourceLanguageOptions}
+              selectedValue={inputTranslationConfig.source[0] || ''}
+              onSelect={item =>
+                setInputTranslationConfig(prev => ({
+                  ...prev,
+                  source: [item.value as LanguageType],
+                }))
+              }
+              enabled={true}
+            />
+            <Spacer size={2} />
+            <Text style={styles.infoText}>
+              Captions and transcript will appear in this language for you.
+            </Text>
+          </View>
+
+          <Spacer size={20} />
+
+          {/* Target Languages */}
           <View>
+            <Text style={styles.labelText}>
+              Spoken languages in the meeting
+            </Text>
+            <Spacer size={8} />
             <DropdownMulti
-              selectedValues={selectedValues}
-              setSelectedValues={setSelectedValues}
-              defaultSelectedValues={
-                language.indexOf('') === -1 ? language : ['en-US']
+              selectedValues={inputTranslationConfig.targets}
+              setSelectedValues={(val: LanguageType[]) =>
+                setInputTranslationConfig(prev => ({
+                  ...prev,
+                  targets: val,
+                }))
               }
+              defaultSelectedValues={inputTranslationConfig.targets}
               error={error}
               setError={setError}
-              isOpen={isOpen}
-              setIsOpen={setIsOpen}
+              isOpen={isTargetOpen}
+              setIsOpen={setIsTargetOpen}
+              maxAllowedSelection={10}
+              protectedLanguages={Array.from(
+                new Set([...suggestedRemoteTargetLangs]),
+              )}
             />
+            <Spacer size={2} />
+            <Text style={styles.infoText}>
+              Auto populated by spoken languages of other users once they join
+              the room.
+            </Text>
           </View>
           <Spacer size={8} />
-          <Text style={[styles.subHeading, isNotValidated && styles.errorTxt]}>
-            {selectedValues.length === 0 ? ddError : ddInfo}
-          </Text>
+          {inputTranslationConfig?.targets.length === 10 && (
+            <Text style={[styles.subHeading, styles.errorTxt]}>
+              {maxLangValInfo}
+            </Text>
+          )}
           <Spacer size={32} />
           <View
             style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
             <View style={isDesktop && {flex: 1}}>
               <TertiaryButton
-                containerStyle={{
-                  width: '100%',
-                  height: 48,
-                  paddingVertical: 12,
-                  paddingHorizontal: 12,
-                  borderRadius: ThemeConfig.BorderRadius.medium,
-                }}
+                containerStyle={styles.button}
                 text={cancelBtnLabel}
                 textStyle={styles.btnText}
                 onPress={() => props.setModalVisible(false)}
@@ -110,30 +222,14 @@ const LanguageSelectorPopup = (props: LanguageSelectorPopup) => {
             />
             <View style={isDesktop && {flex: 1}}>
               <PrimaryButton
-                containerStyle={{
-                  minWidth: 'auto',
-                  width: '100%',
-                  borderRadius: ThemeConfig.BorderRadius.medium,
-                  height: 48,
-                  paddingVertical: 12,
-                  paddingHorizontal: 12,
-                }}
-                disabled={selectedValues.length === 0}
+                containerStyle={styles.button}
+                disabled={
+                  isNotValidated ||
+                  !hasConfigChanged(translationConfig, inputTranslationConfig)
+                }
                 text={ConfirmBtnLabel}
                 textStyle={styles.btnText}
-                onPress={() => {
-                  console.log(selectedValues);
-                  console.log(language);
-
-                  if (selectedValues.length === 0) {
-                    // setError(true);
-                    return;
-                  }
-                  const lang1 = language.slice().sort().toString();
-                  const lang2 = selectedValues.slice().sort().toString();
-                  const isLangChanged = lang1 !== lang2 || !isSTTActive;
-                  props.onConfirm(isLangChanged, selectedValues);
-                }}
+                onPress={onConfirmPress}
               />
             </View>
           </View>
@@ -152,26 +248,41 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  btnText: {
-    fontWeight: '600',
-    fontSize: 16,
-    lineHeight: 24,
-  },
   btnContainerMobile: {
     flexDirection: 'column-reverse',
   },
   contentContainer: {
     padding: 24,
-    maxWidth: 446,
+    maxWidth: 500,
     width: '100%',
   },
-  heading: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
+  button: {
+    width: '100%',
+    minWidth: 'auto',
+    height: 48,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    borderRadius: ThemeConfig.BorderRadius.medium,
+  },
+  btnText: {
     fontWeight: '600',
-    fontSize: 22,
+    fontSize: 16,
     lineHeight: 24,
+  },
+  labelText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: 20,
     color: $config.FONT_COLOR,
   },
+  infoText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: 12,
+    color: $config.SEMANTIC_NEUTRAL,
+  },
   subHeading: {
     fontFamily: ThemeConfig.FontFamily.sansPro,
     fontWeight: '400',
@@ -179,7 +290,6 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
   },
-
   errorTxt: {
     color: $config.SEMANTIC_WARNING,
     fontWeight: '600',