agora-appbuilder-core 4.1.10-beta.1 → 4.1.11

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',

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

@@ -36,6 +36,7 @@ import DownloadTranscriptBtn from './DownloadTranscriptBtn';
 import {useString} from '../../../src/utils/useString';
 import {
   sttSettingSpokenLanguageText,
+  sttSettingTranslationLanguageText,
   sttTranscriptPanelNoSearchResultsFoundText,
   sttTranscriptPanelSearchText,
   sttTranscriptPanelViewLatestText,
@@ -50,11 +51,6 @@ type NativeStreamMessageArgs = [{}, number, number, Uint8Array, number, number];
 type StreamMessageArgs = WebStreamMessageArgs | NativeStreamMessageArgs;
 
 const Transcript = (props: TranscriptProps) => {
-  const settingSpokenLanguageLabel = useString(sttSettingSpokenLanguageText)();
-  const searchText = useString(sttTranscriptPanelSearchText)();
-  const noresults = useString(sttTranscriptPanelNoSearchResultsFoundText)();
-  const viewlatest = useString(sttTranscriptPanelViewLatestText)();
-
   const isSmall = useIsSmall();
   const {currentLayout} = useLayout();
   const {showHeader = true} = props;
@@ -63,9 +59,20 @@ const Transcript = (props: TranscriptProps) => {
     isLangChangeInProgress,
     isSTTListenerAdded,
     setIsSTTListenerAdded,
+    getBotOwnerUid,
+    isSTTActive,
   } = useCaption();
 
+  const settingSpokenLanguageLabel = useString(sttSettingSpokenLanguageText)();
+  const settingTranslationLanguageLabel = useString<boolean>(
+    sttSettingTranslationLanguageText,
+  )(isSTTActive);
+  const searchText = useString(sttTranscriptPanelSearchText)();
+  const noresults = useString(sttTranscriptPanelNoSearchResultsFoundText)();
+  const viewlatest = useString(sttTranscriptPanelViewLatestText)();
+
   const data = meetingTranscript; // Object.entries(transcript);
+  console.log('[STT_PER_USER_BOT] meetingTranscript data: ', data);
 
   const [showButton, setShowButton] = React.useState(false);
 
@@ -103,6 +110,19 @@ const Transcript = (props: TranscriptProps) => {
 
   const renderItem = ({item}) => {
     return item.uid.toString().indexOf('langUpdate') !== -1 ? (
+      <View style={styles.langChangeContainer}>
+        <ImageIcon
+          iconType="plain"
+          iconSize={20}
+          tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
+          name={'globe'}
+        />
+
+        <Text style={styles.langChange}>
+          {defaultContent[item?.uid?.split('-')[1]]?.name + ' ' + item.text}
+        </Text>
+      </View>
+    ) : item.uid.toString().indexOf('translationUpdate') !== -1 ? (
       <View style={styles.langChangeContainer}>
         <ImageIcon
           iconType="plain"
@@ -112,15 +132,17 @@ const Transcript = (props: TranscriptProps) => {
         />
 
         <Text style={styles.langChange}>
-          {defaultContent[item?.uid?.split('-')[1]].name + ' ' + item.text}
+          {defaultContent[item?.uid?.split('-')[1]]?.name + ' has ' + item.text}
         </Text>
       </View>
     ) : (
       <TranscriptText
-        user={defaultContent[item.uid].name}
+        user={defaultContent[getBotOwnerUid(item.uid)]?.name || 'Speaker'}
         time={item?.time}
         value={item.text}
+        translations={item.translations}
         searchQuery={searchQuery}
+        selectedTranslationLanguage={item.selectedTranslationLanguage}
       />
     );
   };
@@ -164,9 +186,20 @@ const Transcript = (props: TranscriptProps) => {
   const handleSearch = (text: string) => {
     setSearchQuery(text);
     // Filter the data based on the search query
-    const filteredResults = meetingTranscript.filter(item =>
-      item.text.toLowerCase().includes(text.toLowerCase()),
-    );
+    const filteredResults = meetingTranscript.filter(item => {
+      const searchText = text.toLowerCase();
+      // Search in original text
+      if (item.text.toLowerCase().includes(searchText)) {
+        return true;
+      }
+      // Search in translations if available
+      if (item.translations) {
+        return item.translations.some(translation =>
+          translation.text.toLowerCase().includes(searchText),
+        );
+      }
+      return false;
+    });
     setShowButton(false);
     setSearchResults(filteredResults);
     // Scroll to the top of the FlatList when searching
@@ -180,6 +213,7 @@ const Transcript = (props: TranscriptProps) => {
   };
 
   const handleStreamMessageCallback = (...args: StreamMessageArgs) => {
+    console.log('[STT_PER_USER_BOT] handleStreamMessageCallback', args);
     setIsSTTListenerAdded(true);
     if (isWebInternal()) {
       const [uid, data] = args as WebStreamMessageArgs;
@@ -260,7 +294,7 @@ const Transcript = (props: TranscriptProps) => {
       {isLangChangeInProgress ? (
         <View style={{flex: 1}}>
           <Loading
-            text={settingSpokenLanguageLabel}
+            text={settingTranslationLanguageLabel}
             background="transparent"
             indicatorColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
             textColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
@@ -438,6 +472,7 @@ export const styles = StyleSheet.create({
   langChangeContainer: {
     marginBottom: 20,
     flexDirection: 'row',
+    alignItems: 'center',
   },
   footer: {
     borderWidth: 1,