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

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

@@ -1,16 +1,48 @@
 import {createHook} from 'customization-implementation';
-import React from 'react';
-import {LanguageType} from './utils';
+import React, {useContext} from 'react';
+import {LanguageType, getLanguageLabel, hasConfigChanged} from './utils';
+import useSTTAPI, {STTAPIResponse} from './useSTTAPI';
+import {useLocalUid} from '../../../agora-rn-uikit';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
+import events, {PersistanceLevel} from '../../rtm-events-api';
+import {EventNames} from '../../rtm-events';
+import useGetName from '../../utils/useGetName';
+import Toast from '../../../react-native-toast-message';
+import {useString} from '../../utils/useString';
+import {
+  sttStartError,
+  sttUpdateError,
+} from '../../language/default-labels/videoCallScreenLabels';
+import chatContext from '../../components/ChatContext';
+
+type TranslationItem = {
+  lang: string;
+  text: string;
+  isFinal: boolean;
+};
+
+export type LanguageTranslationConfig = {
+  source: LanguageType[]; // 'en-US'
+  targets: LanguageType[]; // ['zh-CN', 'ja-JP']
+  autoPopulate?: boolean; // e.g. if auto-populated from others
+};
+
+export type CaptionViewMode = 'original-and-translated' | 'translated';
 
 export type TranscriptItem = {
   uid: string;
   time: number;
   text: string;
+  translations?: TranslationItem[];
+  // Stores which translation language was active when this transcript was created
+  // This preserves historical context when users switch translation languages mid-meeting
+  selectedTranslationLanguage?: string;
 };
 
 type CaptionObj = {
   [key: string]: {
     text: string;
+    translations: TranslationItem[];
     lastUpdated: number;
   };
 };
@@ -28,9 +60,20 @@ export const CaptionContext = React.createContext<{
   isSTTActive: boolean;
   setIsSTTActive: React.Dispatch<React.SetStateAction<boolean>>;
 
-  // holds the language selection for stt
-  language: LanguageType[];
-  setLanguage: React.Dispatch<React.SetStateAction<LanguageType[]>>;
+  // holds the language selection for stt (deprecated - use sttForm instead)
+  // language: LanguageType[];
+  // setLanguage: React.Dispatch<React.SetStateAction<LanguageType[]>>;
+
+  translationConfig: LanguageTranslationConfig;
+  setTranslationConfig: React.Dispatch<
+    React.SetStateAction<LanguageTranslationConfig>
+  >;
+
+  captionViewMode: CaptionViewMode;
+  setCaptionViewMode: React.Dispatch<React.SetStateAction<CaptionViewMode>>;
+
+  transcriptViewMode: CaptionViewMode;
+  setTranscriptViewMode: React.Dispatch<React.SetStateAction<CaptionViewMode>>;
 
   // holds meeting transcript
   meetingTranscript: TranscriptItem[];
@@ -40,6 +83,12 @@ export const CaptionContext = React.createContext<{
   isLangChangeInProgress: boolean;
   setIsLangChangeInProgress: React.Dispatch<React.SetStateAction<boolean>>;
 
+  // holds status of translation language change process
+  isTranslationChangeInProgress: boolean;
+  setIsTranslationChangeInProgress: React.Dispatch<
+    React.SetStateAction<boolean>
+  >;
+
   // holds live captions
   captionObj: CaptionObj;
   setCaptionObj: React.Dispatch<React.SetStateAction<CaptionObj>>;
@@ -50,6 +99,34 @@ export const CaptionContext = React.createContext<{
 
   activeSpeakerRef: React.MutableRefObject<string>;
   prevSpeakerRef: React.MutableRefObject<string>;
+
+  selectedTranslationLanguage: string;
+  setSelectedTranslationLanguage: React.Dispatch<React.SetStateAction<string>>;
+  // Ref for translation language - prevents stale closures in callbacks
+  selectedTranslationLanguageRef: React.MutableRefObject<string>;
+  // Ref for translation config - prevents stale closures in callbacks
+  translationConfigRef: React.MutableRefObject<LanguageTranslationConfig>;
+
+  // Stores spoken languages of all remote users (userUid -> spoken language)
+  // Used to auto-populate target languages for new users
+  remoteSpokenLanguages: Record<string, LanguageType>;
+  setRemoteSpokenLanguages: React.Dispatch<
+    React.SetStateAction<Record<string, LanguageType>>
+  >;
+
+  handleTranslateConfigChange: (
+    inputTranslationConfig: LanguageTranslationConfig,
+  ) => Promise<void>;
+  startSTTBotSession: (
+    newConfig: LanguageTranslationConfig,
+  ) => Promise<STTAPIResponse>;
+  updateSTTBotSession: (
+    newConfig: LanguageTranslationConfig,
+  ) => Promise<STTAPIResponse>;
+  stopSTTBotSession: () => Promise<void>;
+
+  // Helper function to get user UID from bot UID
+  getBotOwnerUid: (botUid: string | number) => string | number;
 }>({
   isCaptionON: false,
   setIsCaptionON: () => {},
@@ -57,22 +134,44 @@ export const CaptionContext = React.createContext<{
   setIsSTTError: () => {},
   isSTTActive: false,
   setIsSTTActive: () => {},
-  language: ['en-US'],
-  setLanguage: () => {},
+  // language: ['en-US'],
+  // setLanguage: () => {},
+  translationConfig: {
+    source: [],
+    targets: [],
+  },
+  setTranslationConfig: () => {},
+  captionViewMode: 'translated',
+  setCaptionViewMode: () => {},
+  transcriptViewMode: 'translated',
+  setTranscriptViewMode: () => {},
   meetingTranscript: [],
   setMeetingTranscript: () => {},
   isLangChangeInProgress: false,
   setIsLangChangeInProgress: () => {},
+  isTranslationChangeInProgress: false,
+  setIsTranslationChangeInProgress: () => {},
   captionObj: {},
   setCaptionObj: () => {},
   isSTTListenerAdded: false,
   setIsSTTListenerAdded: () => {},
   activeSpeakerRef: {current: ''},
   prevSpeakerRef: {current: ''},
+  selectedTranslationLanguage: '',
+  setSelectedTranslationLanguage: () => {},
+  selectedTranslationLanguageRef: {current: ''},
+  translationConfigRef: {current: {source: [], targets: []}},
+  remoteSpokenLanguages: {},
+  setRemoteSpokenLanguages: () => {},
+  handleTranslateConfigChange: async () => {},
+  startSTTBotSession: async () => ({success: false}),
+  updateSTTBotSession: async () => ({success: false}),
+  stopSTTBotSession: async () => {},
+  getBotOwnerUid: (botUid: string | number) => botUid,
 });
 
 interface CaptionProviderProps {
-  callActive?: boolean;
+  callActive: boolean;
   children: React.ReactNode;
 }
 
@@ -83,21 +182,648 @@ const CaptionProvider: React.FC<CaptionProviderProps> = ({
   const [isSTTError, setIsSTTError] = React.useState<boolean>(false);
   const [isCaptionON, setIsCaptionON] = React.useState<boolean>(false);
   const [isSTTActive, setIsSTTActive] = React.useState<boolean>(false);
-  const [language, setLanguage] = React.useState<[LanguageType]>(['']);
+  // const [language, setLanguage] = React.useState<[LanguageType]>(['']);
+
+  // STT Form state - contains agentId, source, and target languages
+  const [translationConfig, setTranslationConfig] =
+    React.useState<LanguageTranslationConfig>({
+      source: [],
+      targets: [],
+    });
+
+  const [captionViewMode, setCaptionViewMode] =
+    React.useState<CaptionViewMode>('translated');
+
+  const [transcriptViewMode, setTranscriptViewMode] =
+    React.useState<CaptionViewMode>('translated');
+
   const [isLangChangeInProgress, setIsLangChangeInProgress] =
     React.useState<boolean>(false);
+  const [isTranslationChangeInProgress, setIsTranslationChangeInProgress] =
+    React.useState<boolean>(false);
   const [meetingTranscript, setMeetingTranscript] = React.useState<
     TranscriptItem[]
   >([]);
   const [captionObj, setCaptionObj] = React.useState<CaptionObj>({});
+  console.log('[STT_PER_USER_BOT] captionObj: ', captionObj);
   const [isSTTListenerAdded, setIsSTTListenerAdded] =
     React.useState<boolean>(false);
   const [activeSpeakerUID, setActiveSpeakerUID] = React.useState<string>('');
   const [prevActiveSpeakerUID, setPrevActiveSpeakerUID] =
     React.useState<string>('');
+  const [selectedTranslationLanguage, setSelectedTranslationLanguage] =
+    React.useState<string>('');
+  const [remoteSpokenLanguages, setRemoteSpokenLanguages] = React.useState<
+    Record<string, LanguageType>
+  >({});
 
   const activeSpeakerRef = React.useRef('');
   const prevSpeakerRef = React.useRef('');
+  const selectedTranslationLanguageRef = React.useRef('');
+  const translationConfigRef = React.useRef<LanguageTranslationConfig>({
+    source: [],
+    targets: [],
+  });
+
+  // Sync ref with state for selectedTranslationLanguage
+  React.useEffect(() => {
+    selectedTranslationLanguageRef.current = selectedTranslationLanguage;
+  }, [selectedTranslationLanguage]);
+
+  // Sync ref with state for translationConfig
+  React.useEffect(() => {
+    translationConfigRef.current = translationConfig;
+  }, [translationConfig]);
+
+  // Import STT API methods
+  const {start, stop, update} = useSTTAPI();
+
+  const localUid = useLocalUid();
+  const username = useGetName();
+  const {hasUserJoinedRTM} = useContext(chatContext);
+
+  const [localBotUid, setLocalBotUid] = React.useState<number | null>(null);
+
+  // i18n labels for error toasts
+  const startErrorLabel = useString(sttStartError)();
+  const updateErrorLabel = useString(sttUpdateError)();
+
+  React.useEffect(() => {
+    if (!localUid || !username || !hasUserJoinedRTM) {
+      return;
+    } // wait for room info to be ready
+    const uid = generateBotUidForUser(localUid);
+    setLocalBotUid(uid);
+  }, [localUid, username, hasUserJoinedRTM]);
+
+  // Silent update function to update local user's STT config without showing progress bar
+  const silentUpdateSTT = React.useCallback(
+    async (newtargetLanguages: LanguageType[]) => {
+      try {
+        // Merge new target languages with existing ones and keep unique
+        const currentTargets = translationConfigRef.current?.targets || [];
+        const mergedTargets = Array.from(
+          new Set([...newtargetLanguages, ...currentTargets]),
+        );
+
+        const newConfig: LanguageTranslationConfig = {
+          source: translationConfigRef.current?.source || [],
+          targets: mergedTargets,
+        };
+
+        console.log(
+          '[STT_PER_USER_BOT] Silent updating with merged targets:',
+          'newRemoteLanguages:',
+          newtargetLanguages,
+          'existingTargets:',
+          currentTargets,
+          'mergedTargets:',
+          mergedTargets,
+        );
+
+        // Call update API without showing progress bar (don't set isLangChangeInProgress)
+        const result = await update(localBotUid, newConfig);
+
+        if (result.success) {
+          setTranslationConfig(newConfig);
+          setIsSTTError(false);
+
+          logger.log(
+            LogSource.NetworkRest,
+            'stt',
+            'Local user STT updated silently',
+            {newtargetLanguages, mergedTargets, botUid: localBotUid},
+          );
+        } else {
+          setIsSTTError(true);
+          logger.error(
+            LogSource.NetworkRest,
+            'stt',
+            'Failed to silently update local user STT',
+            result.error,
+          );
+        }
+      } catch (error) {
+        setIsSTTError(true);
+        logger.error(
+          LogSource.NetworkRest,
+          'stt',
+          'Error in silentUpdateSTT',
+          error,
+        );
+      }
+    },
+    [localBotUid],
+  );
+
+  React.useEffect(() => {
+    const remoteLangs = Array.from(
+      new Set(
+        Object.entries(remoteSpokenLanguages)
+          .filter(([uid, lang]) => uid !== String(localUid) && lang)
+          .map(([, lang]) => lang),
+      ),
+    );
+
+    // If STT is active, check if received language differs from current target languages
+    if (isSTTActive && remoteLangs && remoteLangs.length > 0) {
+      const currentTargetLanguages =
+        translationConfigRef.current?.targets || [];
+      // Only update if any received language is not in current target languages
+      const hasTargetsChanged = remoteLangs.some(
+        lang => !currentTargetLanguages.includes(lang),
+      );
+      if (hasTargetsChanged) {
+        console.log(
+          '[STT_PER_USER_BOT] Spoken language change detected',
+          'currentTargets:',
+          currentTargetLanguages,
+          'receivedSpokenLanguages (unique):',
+          remoteLangs,
+        );
+        // Call silentUpdateSTT directly
+        silentUpdateSTT(remoteLangs);
+      }
+    }
+  }, [remoteSpokenLanguages]);
+
+  // Listen for spoken language updates from other users
+  React.useEffect(() => {
+    const handleSpokenLanguage = (data: any) => {
+      try {
+        const payload = JSON.parse(data.payload);
+        const {userUid, spokenLanguage, username} = payload;
+
+        console.log(
+          '[STT_PER_USER_BOT] Received spoken language from user:',
+          username,
+          'userUid:',
+          userUid,
+          'spokenLanguage:',
+          spokenLanguage,
+        );
+
+        // Update remoteSpokenLanguages with the user's spoken language
+        setRemoteSpokenLanguages(prev => ({
+          ...prev,
+          [userUid]: spokenLanguage,
+        }));
+      } catch (error) {
+        logger.error(
+          LogSource.Internals,
+          'STT',
+          'Failed to parse STT_SPOKEN_LANGUAGE event',
+          error,
+        );
+      }
+    };
+
+    events.on(EventNames.STT_SPOKEN_LANGUAGE, handleSpokenLanguage);
+
+    // Cleanup listener on unmount
+    return () => {
+      events.off(EventNames.STT_SPOKEN_LANGUAGE, handleSpokenLanguage);
+    };
+  }, []);
+
+  // Listen for when remote users stop translation and clear their translations
+  React.useEffect(() => {
+    const handleUserStoppedTranslation = (data: any) => {
+      try {
+        const payload = JSON.parse(data.payload);
+        const {userUid, username} = payload;
+
+        console.log(
+          '[STT_PER_USER_BOT] User stopped translation:',
+          username,
+          'userUid:',
+          userUid,
+        );
+
+        // Clear translations for this user by setting captionObj translations to empty
+        setCaptionObj(prevState => {
+          if (prevState[userUid]) {
+            return {
+              ...prevState,
+              [userUid]: {
+                ...prevState[userUid],
+                translations: [], // Clear translations
+              },
+            };
+          }
+          return prevState;
+        });
+      } catch (error) {
+        logger.error(
+          LogSource.Internals,
+          'STT',
+          'Failed to parse USER_STOPPED_TRANSLATION event',
+          error,
+        );
+      }
+    };
+
+    events.on(
+      EventNames.USER_STOPPED_TRANSLATION,
+      handleUserStoppedTranslation,
+    );
+
+    // Cleanup listener on unmount
+    return () => {
+      events.off(
+        EventNames.USER_STOPPED_TRANSLATION,
+        handleUserStoppedTranslation,
+      );
+    };
+  }, []);
+
+  const startSTTBotSession = async (
+    newConfig: LanguageTranslationConfig,
+  ): Promise<STTAPIResponse> => {
+    if (!localBotUid || !localUid) {
+      console.warn('[STT] Missing localUid or botUid');
+      return {
+        success: false,
+        error: {message: 'Missing localUid or botUid'},
+      };
+    }
+
+    try {
+      setIsLangChangeInProgress(true);
+      const result = await start(localBotUid, newConfig);
+      console.log('STT start result: ', result);
+
+      if (result.success || result.error?.code === 610) {
+        // Success or already started
+        setIsSTTActive(true);
+        setIsSTTError(false);
+
+        // Add transcript entry for language change
+        // If STT was not active before, this is the first time setting the language
+        const actionText = !isSTTActive
+          ? `has set the spoken language to "${getLanguageLabel(
+              newConfig.source,
+            )}"`
+          : `changed the spoken language from "${getLanguageLabel(
+              translationConfig?.source,
+            )}" to "${getLanguageLabel(newConfig.source)}"`;
+
+        setTranslationConfig(newConfig);
+        setMeetingTranscript(prev => [
+          ...prev,
+          {
+            name: 'langUpdate',
+            time: new Date().getTime(),
+            uid: `langUpdate-${localUid}`,
+            text: actionText,
+          },
+        ]);
+
+        // Broadcast spoken language to all users
+        events.send(
+          EventNames.STT_SPOKEN_LANGUAGE,
+          JSON.stringify({
+            userUid: localUid,
+            spokenLanguage: newConfig.source[0],
+            username: username,
+          }),
+          PersistanceLevel.Sender,
+        );
+
+        logger.log(
+          LogSource.NetworkRest,
+          'stt',
+          'STT started successfully',
+          result.data,
+        );
+      } else {
+        // setIsCaptionON(false);
+        setIsSTTError(true);
+        logger.error(
+          LogSource.NetworkRest,
+          'stt',
+          'Failed to start STT',
+          result.error,
+        );
+        // Show error toast: text1 = translated label, text2 = API error
+        Toast.show({
+          leadingIconName: 'alert',
+          type: 'error',
+          text1: startErrorLabel,
+          text2: result.error?.message || 'Unknown error occurred',
+          visibilityTime: 4000,
+        });
+      }
+      setIsLangChangeInProgress(false);
+      return result;
+    } catch (error) {
+      setIsLangChangeInProgress(false);
+      setIsSTTError(true);
+      logger.error(LogSource.NetworkRest, 'stt', 'STT start error', error);
+      // Show error toast: text1 = translated label, text2 = exception error
+      Toast.show({
+        leadingIconName: 'alert',
+        type: 'error',
+        text1: startErrorLabel,
+        text2: error?.message || 'Unknown error occurred',
+        visibilityTime: 4000,
+      });
+      return {
+        success: false,
+        error: {message: error?.message || 'Unknown error'},
+      };
+    }
+  };
+
+  const updateSTTBotSession = async (
+    newConfig: LanguageTranslationConfig,
+  ): Promise<STTAPIResponse> => {
+    if (!localBotUid || !localUid) {
+      console.warn('[STT] Missing localUid or botUid');
+      return {
+        success: false,
+        error: {message: 'Missing localUid or botUid'},
+      };
+    }
+
+    try {
+      setIsLangChangeInProgress(true);
+      const result = await update(localBotUid, newConfig);
+
+      if (result.success) {
+        setTranslationConfig(newConfig);
+        setIsSTTError(false);
+
+        // Add transcript entry for language change
+        // Determine what actually changed
+        const spokenLanguageChanged =
+          translationConfig?.source[0] !== newConfig.source[0];
+        const oldTargetsSorted = (translationConfig?.targets || [])
+          .sort()
+          .map(lang => getLanguageLabel([lang]))
+          .join(', ');
+        const newTargetsSorted = (newConfig.targets || [])
+          .sort()
+          .map(lang => getLanguageLabel([lang]))
+          .join(', ');
+        const targetsChanged = oldTargetsSorted !== newTargetsSorted;
+
+        const oldTargetsLength = translationConfig?.targets?.length || 0;
+        const newTargetsLength = newConfig.targets?.length || 0;
+        const targetsWereDisabled =
+          oldTargetsLength > 0 && newTargetsLength === 0;
+        const targetsWereEnabled =
+          oldTargetsLength === 0 && newTargetsLength > 0;
+
+        // Build target message once
+        let targetMessage = '';
+        if (targetsChanged) {
+          if (targetsWereDisabled) {
+            targetMessage = 'stopped translations';
+          } else if (targetsWereEnabled) {
+            targetMessage = `enabled translations to "${newTargetsSorted}"`;
+          } else {
+            targetMessage = `changed target translation languages to "${newTargetsSorted}"`;
+          }
+        }
+
+        // Build action text
+        let actionText = '';
+        if (spokenLanguageChanged && targetsChanged) {
+          // Both spoken language and targets changed
+          actionText = `changed spoken language from "${getLanguageLabel(
+            translationConfig?.source,
+          )}" to "${getLanguageLabel(newConfig.source)}" and ${targetMessage}`;
+        } else if (spokenLanguageChanged) {
+          // Only spoken language changed
+          actionText = `changed the spoken language from "${getLanguageLabel(
+            translationConfig?.source,
+          )}" to "${getLanguageLabel(newConfig.source)}"`;
+        } else if (targetsChanged) {
+          // Only target languages changed
+          actionText = targetMessage;
+        }
+
+        if (actionText) {
+          setMeetingTranscript(prev => [
+            ...prev,
+            {
+              name: 'langUpdate',
+              uid: `langUpdate-${localUid}`,
+              time: new Date().getTime(),
+              text: actionText,
+            },
+          ]);
+        }
+
+        // Broadcast updated spoken language to all users (only if it changed)
+        if (spokenLanguageChanged) {
+          events.send(
+            EventNames.STT_SPOKEN_LANGUAGE,
+            JSON.stringify({
+              userUid: localUid,
+              spokenLanguage: newConfig.source[0],
+              username: username,
+            }),
+            PersistanceLevel.Sender,
+          );
+        }
+
+        // Send event when user stops translation
+        if (targetsWereDisabled) {
+          events.send(
+            EventNames.USER_STOPPED_TRANSLATION,
+            JSON.stringify({
+              userUid: localUid,
+              username: username,
+            }),
+          );
+        }
+
+        logger.log(
+          LogSource.NetworkRest,
+          'stt',
+          'STT updated successfully',
+          result.data,
+        );
+      } else {
+        setIsSTTError(true);
+        logger.error(
+          LogSource.NetworkRest,
+          'stt',
+          'Failed to update STT',
+          result.error,
+        );
+        // Show error toast: text1 = translated label, text2 = API error
+        Toast.show({
+          leadingIconName: 'alert',
+          type: 'error',
+          text1: updateErrorLabel,
+          text2: result.error?.message || 'Unknown error occurred',
+          visibilityTime: 4000,
+        });
+      }
+      setIsLangChangeInProgress(false);
+      return result;
+    } catch (error) {
+      setIsLangChangeInProgress(false);
+      setIsSTTError(true);
+      logger.error(LogSource.NetworkRest, 'stt', 'STT update error', error);
+      // Show error toast: text1 = translated label, text2 = exception error
+      Toast.show({
+        leadingIconName: 'alert',
+        type: 'error',
+        text1: updateErrorLabel,
+        text2: error?.message || 'Unknown error occurred',
+        visibilityTime: 4000,
+      });
+      return {
+        success: false,
+        error: {message: error?.message || 'Unknown error'},
+      };
+    }
+  };
+
+  const handleTranslateConfigChange = async (
+    inputTranslateConfig: LanguageTranslationConfig,
+  ) => {
+    if (!localBotUid || !localUid) {
+      console.warn('[STT] Missing localUid or botUid');
+      return;
+    }
+
+    const newConfig: LanguageTranslationConfig = {
+      source: inputTranslateConfig?.source,
+      targets: inputTranslateConfig?.targets,
+    };
+
+    let action: 'start' | 'update' = 'start';
+    if (!isSTTActive) {
+      action = 'start';
+    } else if (hasConfigChanged(translationConfig, newConfig)) {
+      action = 'update';
+    }
+
+    console.log('[STT_HANDLE_CONFIRM]', {
+      action,
+      localBotUid,
+      inputConfig: inputTranslateConfig,
+      sanitizedConfig: newConfig,
+    });
+
+    try {
+      switch (action) {
+        case 'start':
+          const startResult = await startSTTBotSession(newConfig);
+          if (!startResult.success) {
+            throw new Error(
+              startResult.error?.message || 'Failed to start STT',
+            );
+          }
+          break;
+
+        case 'update':
+          const updateResult = await updateSTTBotSession(newConfig);
+          if (!updateResult.success) {
+            throw new Error(
+              updateResult.error?.message || 'Failed to update STT config',
+            );
+          }
+          break;
+
+        default:
+          console.warn('Unknown STT action');
+      }
+    } catch (error) {
+      setIsSTTError(true);
+      setIsLangChangeInProgress(false);
+      logger.error(
+        LogSource.NetworkRest,
+        'stt',
+        'Error in handleTranslateConfigChange',
+        error,
+      );
+      throw error;
+    }
+  };
+
+  const stopSTTBotSession = React.useCallback(async () => {
+    console.log('[STT_PER_USER_BOT] stopCaption called');
+
+    if (!localBotUid) {
+      console.warn('[STT] Missing botUid');
+      return;
+    }
+
+    try {
+      const result = await stop(localBotUid);
+
+      if (result.success) {
+        // Set STT inactive locally
+        setIsSTTActive(false);
+        // Clear user's source language when stopping
+        setTranslationConfig({
+          source: [],
+          targets: [],
+        });
+        // setIsCaptionON(false);
+        setIsSTTError(false);
+
+        logger.log(
+          LogSource.NetworkRest,
+          'stt',
+          'STT stopped successfully',
+          result.data,
+        );
+      } else {
+        setIsSTTError(true);
+        logger.error(
+          LogSource.NetworkRest,
+          'stt',
+          'Failed to stop STT',
+          result.error,
+        );
+      }
+    } catch (error) {
+      setIsSTTError(true);
+      logger.error(
+        LogSource.NetworkRest,
+        'stt',
+        'Error in stopSTTBotSession',
+        error,
+      );
+      throw error;
+    }
+  }, [stop, localBotUid]);
+
+  // Helper function to convert user UID to stt bot UID
+  const generateBotUidForUser = (userLocalUid: number): number => {
+    return 900000000 + (userLocalUid % 100000000);
+  };
+
+  // Helper function to convert bot UID to user UID
+  // Bot UIDs are in format: 900000000 + userUid
+  // This function reverse-maps botUid → userUid using mathematical calculation
+  const getBotOwnerUid = React.useCallback(
+    (botUid: string | number): string | number => {
+      const botUidStr = String(botUid);
+
+      // Check if this is a special UID (langUpdate, translationUpdate, etc.)
+      if (botUidStr.indexOf('Update') !== -1) {
+        return botUid;
+      }
+
+      // If it's a bot UID (starts with 900000000), extract the user UID
+      const botUidNum = Number(botUid);
+      if (!isNaN(botUidNum) && botUidNum >= 900000000) {
+        return botUidNum - 900000000;
+      }
+
+      // Otherwise it's already a user UID, return as is
+      return botUid;
+    },
+    [],
+  );
 
   return (
     <CaptionContext.Provider
@@ -108,18 +834,35 @@ const CaptionProvider: React.FC<CaptionProviderProps> = ({
         setIsSTTError,
         isSTTActive,
         setIsSTTActive,
-        language,
-        setLanguage,
+        translationConfig,
+        setTranslationConfig,
+        captionViewMode,
+        setCaptionViewMode,
+        transcriptViewMode,
+        setTranscriptViewMode,
         meetingTranscript,
         setMeetingTranscript,
         isLangChangeInProgress,
         setIsLangChangeInProgress,
+        isTranslationChangeInProgress,
+        setIsTranslationChangeInProgress,
         captionObj,
         setCaptionObj,
         isSTTListenerAdded,
         setIsSTTListenerAdded,
         activeSpeakerRef,
         prevSpeakerRef,
+        selectedTranslationLanguage,
+        setSelectedTranslationLanguage,
+        selectedTranslationLanguageRef,
+        translationConfigRef,
+        remoteSpokenLanguages,
+        setRemoteSpokenLanguages,
+        handleTranslateConfigChange,
+        startSTTBotSession,
+        updateSTTBotSession,
+        stopSTTBotSession,
+        getBotOwnerUid,
       }}>
       {children}
     </CaptionContext.Provider>