agora-appbuilder-core 4.1.8-beta.1 → 4.1.8-beta.11

package/template/src/components/text-tracks/useFetchSTTTranscript.tsx

@@ -0,0 +1,262 @@
+import {useState, useCallback, useEffect, useContext} from 'react';
+import StorageContext from '../StorageContext';
+import {useRoomInfo} from 'customization-api';
+import getUniqueID from '../../utils/getUniqueID';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
+
+export interface FetchSTTTranscriptResponse {
+  pagination: {limit: number; total: number; page: number};
+  stts: {
+    id: string;
+    download_url: string[];
+    title: string;
+    product_name: string;
+    status: 'COMPLETED' | 'STARTED' | 'INPROGRESS' | 'STOPPING';
+    created_at: string;
+    ended_at: string;
+  }[];
+}
+
+export type APIStatus = 'idle' | 'pending' | 'resolved' | 'rejected';
+
+export function useFetchSTTTranscript() {
+  const {
+    data: {roomId},
+  } = useRoomInfo();
+  const {store} = useContext(StorageContext);
+
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const [sttState, setSttState] = useState<{
+    status: APIStatus;
+    data: {
+      stts: FetchSTTTranscriptResponse['stts'];
+      pagination: FetchSTTTranscriptResponse['pagination'];
+    };
+    error: Error | null;
+  }>({
+    status: 'idle',
+    data: {stts: [], pagination: {total: 0, limit: 10, page: 1}},
+    error: null,
+  });
+
+  //–– by‐recording state ––
+  const [sttRecState, setSttRecState] = useState<{
+    status: APIStatus;
+    data: {stts: FetchSTTTranscriptResponse['stts']};
+    error: Error | null;
+  }>({
+    status: 'idle',
+    data: {
+      stts: [],
+    },
+    error: null,
+  });
+
+  const getSTTs = useCallback(
+    (page: number) => {
+      setSttState(s => ({...s, status: 'pending', error: null}));
+      const reqId = getUniqueID();
+      const start = Date.now();
+
+      fetch(`${$config.BACKEND_ENDPOINT}/v1/stt-transcript`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          authorization: store.token ? `Bearer ${store.token}` : '',
+          'X-Request-Id': reqId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+        body: JSON.stringify({
+          passphrase: roomId.host,
+          limit: 10,
+          page,
+        }),
+      })
+        .then(async res => {
+          const json = await res.json();
+          const end = Date.now();
+          if (!res.ok) {
+            logger.error(
+              LogSource.NetworkRest,
+              'stt-transcript',
+              'Fetch STT transcripts failed',
+              {
+                json,
+                start,
+                end,
+                latency: end - start,
+                requestId: reqId,
+              },
+            );
+            throw new Error(json?.error?.message || res.statusText);
+          }
+          logger.debug(
+            LogSource.NetworkRest,
+            'stt-transcript',
+            'Fetch STT transcripts succeeded',
+            {
+              json,
+              start,
+              end,
+              latency: end - start,
+              requestId: reqId,
+            },
+          );
+          return json as FetchSTTTranscriptResponse;
+        })
+        .then(({stts = [], pagination = {total: 0, limit: 10, page}}) => {
+          setSttState({
+            status: 'resolved',
+            data: {stts, pagination},
+            error: null,
+          });
+        })
+        .catch(err => {
+          setSttState(s => ({...s, status: 'rejected', error: err}));
+        });
+    },
+    [roomId.host, store.token],
+  );
+
+  // Delete stts
+  const deleteTranscript = useCallback(
+    async (id: string) => {
+      const reqId = getUniqueID();
+      const start = Date.now();
+
+      const res = await fetch(
+        `${
+          $config.BACKEND_ENDPOINT
+        }/v1/stt-transcript/${id}?passphrase=${encodeURIComponent(
+          roomId.host,
+        )}`,
+        {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+            authorization: store.token ? `Bearer ${store.token}` : '',
+            'X-Request-Id': reqId,
+            'X-Session-Id': logger.getSessionId(),
+          },
+        },
+      );
+      const end = Date.now();
+
+      if (!res.ok) {
+        logger.error(
+          LogSource.NetworkRest,
+          'stt-transcript',
+          'Delete transcript failed',
+          {start, end, latency: end - start, requestId: reqId},
+        );
+        throw new Error(`Delete failed (${res.status})`);
+      }
+      logger.debug(
+        LogSource.NetworkRest,
+        'stt-transcript',
+        'Delete transcript succeeded',
+        {start, end, latency: end - start, requestId: reqId},
+      );
+
+      // optimistic remove from paginated list
+      setSttState(prev => {
+        // remove the deleted item
+        const newStts = prev.data.stts.filter(item => item.id !== id);
+        // decrement total count
+        const newTotal = Math.max(prev.data.pagination.total - 1, 0);
+        let newPage = prev.data.pagination.page;
+        if (prev.data.stts.length === 1 && newPage > 1) {
+          newPage--;
+        }
+        return {
+          ...prev,
+          data: {
+            stts: newStts,
+
+            pagination: {
+              ...prev.data.pagination,
+              total: newTotal,
+              page: newPage,
+            },
+          },
+        };
+      });
+    },
+    [roomId.host, store.token],
+  );
+
+  //–– fetch for a given recording ––
+  const getSTTsForRecording = useCallback(
+    (recordingId: string) => {
+      setSttRecState(r => ({...r, status: 'pending', error: null}));
+      const reqId = getUniqueID();
+      const start = Date.now();
+
+      fetch(`${$config.BACKEND_ENDPOINT}/v1/recording/stt-transcript`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          authorization: store.token ? `Bearer ${store.token}` : '',
+          'X-Request-Id': reqId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+        body: JSON.stringify({
+          project_id: $config.PROJECT_ID,
+          recording_id: recordingId,
+        }),
+      })
+        .then(async res => {
+          const json = await res.json();
+          const end = Date.now();
+          console.log('supriua json', json);
+          if (!res.ok) {
+            logger.error(
+              LogSource.NetworkRest,
+              'stt-transcript',
+              'Fetch stt-by-recording failed',
+              {json, start, end, latency: end - start, requestId: reqId},
+            );
+            throw new Error(json?.error?.message || res.statusText);
+          }
+          logger.debug(
+            LogSource.NetworkRest,
+            'stt-transcript',
+            'Fetch stt-by-recording succeeded',
+            {json, start, end, latency: end - start, requestId: reqId},
+          );
+          if (json?.error) {
+            logger.debug(
+              LogSource.NetworkRest,
+              'stt-transcript',
+              `No STT records found (code ${json.error.code}): ${json.error.message}`,
+              {start, end, latency: end - start, reqId},
+            );
+            return [];
+          } else {
+            return json as FetchSTTTranscriptResponse['stts'];
+          }
+        })
+        .then(stts =>
+          setSttRecState({status: 'resolved', data: {stts}, error: null}),
+        )
+        .catch(err =>
+          setSttRecState(r => ({...r, status: 'rejected', error: err})),
+        );
+    },
+    [store.token],
+  );
+
+  return {
+    // stt list
+    sttState,
+    getSTTs,
+    currentPage,
+    setCurrentPage,
+    // STT per recording
+    sttRecState,
+    getSTTsForRecording,
+    // delete
+    deleteTranscript,
+  };
+}

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -109,8 +109,8 @@ export const toolbarItemNoiseCancellationText =
 export const toolbarItemWhiteboardText = 'toolbarItemWhiteboardText';
 export const toolbarItemCaptionText = 'toolbarItemCaptionText';
 export const toolbarItemTranscriptText = 'toolbarItemTranscriptText';
-export const toolbarItemManageTranscriptText =
-  'toolbarItemManageTranscriptText';
+export const toolbarItemManageTextTracksText =
+  'toolbarItemManageTextTracksText';
 export const toolbarItemVirtualBackgroundText =
   'toolbarItemVirtualBackgroundText';
 export const toolbarItemViewRecordingText = 'toolbarItemViewRecordingText';
@@ -151,7 +151,7 @@ export const nativeStopScreensharePopupPrimaryBtnText =
   'nativeStopScreensharePopupPrimaryBtnText';
 
 export const recordingModalTitleIntn = 'recordingModalTitleIntn';
-export const transcriptModalTitleIntn = 'transcriptModalTitleIntn';
+export const textTrackModalTitleIntn = 'textTrackModalTitleIntn';
 export const stopRecordingPopupHeading = 'stopRecordingPopupHeading';
 export const stopRecordingPopupSubHeading = 'stopRecordingPopupSubHeading';
 export const stopRecordingPopupPrimaryBtnText =
@@ -573,7 +573,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [toolbarItemWhiteboardText]?: I18nConditionalType;
   [toolbarItemCaptionText]?: I18nConditionalType;
   [toolbarItemTranscriptText]?: I18nConditionalType;
-  [toolbarItemManageTranscriptText]?: I18nConditionalType;
+  [toolbarItemManageTextTracksText]?: I18nConditionalType;
   [toolbarItemVirtualBackgroundText]?: I18nBaseType;
   [toolbarItemViewRecordingText]?: I18nConditionalType;
 
@@ -609,7 +609,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [nativeStopScreensharePopupPrimaryBtnText]?: I18nBaseType;
 
   [recordingModalTitleIntn]?: I18nBaseType;
-  [transcriptModalTitleIntn]?: I18nBaseType;
+  [textTrackModalTitleIntn]?: I18nBaseType;
   [stopRecordingPopupHeading]?: I18nBaseType;
   [stopRecordingPopupSubHeading]?: I18nBaseType;
   [stopRecordingPopupPrimaryBtnText]?: I18nBaseType;
@@ -942,7 +942,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [toolbarItemTranscriptText]: active =>
     active ? 'Hide Transcript' : 'Show Transcript',
   [toolbarItemViewRecordingText]: 'View Recordings',
-  [toolbarItemManageTranscriptText]: 'View Transcripts',
+  [toolbarItemManageTextTracksText]: 'View Text-tracks',
 
   [toolbarItemRaiseHandText]: active => (active ? 'Lower Hand' : 'Raise Hand'),
   [toolbarItemSwitchCameraText]: 'Switch Camera',
@@ -1025,7 +1025,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
     `Once removed, ${name} will still be able to screen share later.`,
   [removeScreenshareFromRoomPopupPrimaryBtnText]: 'REMOVE',
 
-  [transcriptModalTitleIntn]: 'View Transcripts',
+  [textTrackModalTitleIntn]: 'Text Tracks',
   [sttChangeLanguagePopupHeading]: isFirstTimeOpened =>
     isFirstTimeOpened ? 'Set Spoken Language' : 'Change Spoken Language',
   [sttChangeLanguagePopupSubHeading]:

package/template/src/pages/VideoCall.tsx

@@ -369,7 +369,7 @@ const VideoCall: React.FC = () => {
         encryption: $config.ENCRYPTION_ENABLED
           ? {
               key: data.encryptionSecret,
-              mode: RnEncryptionEnum.AES256GCM2,
+              mode: data.encryptionMode,
               screenKey: data.encryptionSecret,
               salt: data.encryptionSecretSalt,
             }

package/template/src/subComponents/ChatInput.tsx

@@ -97,6 +97,10 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     replyToMsgId,
     setReplyToMsgId,
   } = useChatUIControls();
+
+  // Track IME composition state
+  const [isComposing, setIsComposing] = React.useState(false);
+
   const {defaultContent} = useContent();
   const {sendChatSDKMessage, uploadAttachment} = useChatConfigure();
   const {addMessageToPrivateStore, addMessageToStore} = useChatMessages();
@@ -115,6 +119,41 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     });
   }, []);
 
+  // Set up direct DOM event listeners for IME composition
+  useEffect(() => {
+    if (!isWeb()) return;
+
+    const inputElement = chatInputRef?.current;
+    if (!inputElement) return;
+
+    // Get the actual DOM element (React Native Web creates a textarea/input)
+    const domElement = inputElement._nativeTag
+      ? document.querySelector(`[data-tag="${inputElement._nativeTag}"]`)
+      : inputElement;
+
+    if (!domElement) return;
+
+    const handleCompositionStart = () => {
+      setIsComposing(true);
+    };
+
+    const handleCompositionEnd = () => {
+      setIsComposing(false);
+    };
+
+    // Add event listeners directly to DOM element
+    domElement.addEventListener('compositionstart', handleCompositionStart);
+    domElement.addEventListener('compositionend', handleCompositionEnd);
+
+    return () => {
+      domElement.removeEventListener(
+        'compositionstart',
+        handleCompositionStart,
+      );
+      domElement.removeEventListener('compositionend', handleCompositionEnd);
+    };
+  }, [chatInputRef?.current]);
+
   const {data} = useRoomInfo();
   const [name] = useUserName();
   const toastHeadingSize = useString(chatSendErrorTextSizeToastHeading)();
@@ -166,9 +205,37 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     });
   };
 
+  // IME composition handlers
+  const handleCompositionStart = () => {
+    setIsComposing(true);
+  };
+
+  const handleCompositionEnd = () => {
+    setIsComposing(false);
+  };
+
+  const handleInput = event => {
+    // Reset composition state if input event occurs without active composition
+    if (isWeb() && !event.nativeEvent.isComposing && isComposing) {
+      setIsComposing(false);
+    }
+  };
+
   // with multiline textinput enter prints /n
   const handleKeyPress = ({nativeEvent}) => {
-    if (nativeEvent.key === 'Enter' && !nativeEvent.shiftKey) {
+    const currentlyComposing = nativeEvent.isComposing || isComposing;
+
+    // Check if this is an Enter key during composition
+    if (nativeEvent.key === 'Enter' && currentlyComposing) {
+      return;
+    }
+
+    // Only submit on Enter if not composing with IME and no Shift key
+    if (
+      nativeEvent.key === 'Enter' &&
+      !nativeEvent.shiftKey &&
+      !currentlyComposing
+    ) {
       nativeEvent.preventDefault();
       onSubmitEditing();
       setShowEmojiPicker(false); // This will close emoji picker on enter
@@ -225,6 +292,10 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
       autoCorrect={false}
       onKeyPress={handleKeyPress}
       onChange={_handleHeightChange}
+      // IME composition event handlers for React Native Web
+      onCompositionStart={isWeb() ? handleCompositionStart : undefined}
+      onCompositionEnd={isWeb() ? handleCompositionEnd : undefined}
+      onInput={isWeb() ? handleInput : undefined}
     />
   );
 

package/template/src/subComponents/recording/useRecording.tsx

@@ -67,16 +67,31 @@ const getFrontendUrl = (url: string) => {
   return url;
 };
 
-interface RecordingsData {
-  recordings: [];
-  pagination: {};
+export type APIStatus = 'idle' | 'pending' | 'resolved' | 'rejected';
+
+export interface FetchRecordingData {
+  pagination: {
+    limit: number;
+    total: number;
+    page: number;
+  };
+  recordings: {
+    id: string;
+    download_url: string[];
+    title: string;
+    product_name: string;
+    status: 'COMPLETED' | 'STARTED' | 'INPROGRESS' | 'STOPPING';
+    created_at: string;
+    ended_at: string;
+  }[];
 }
+
 export interface RecordingContextInterface {
   startRecording: () => void;
   stopRecording: () => void;
   isRecordingActive: boolean;
   inProgress: boolean;
-  fetchRecordings?: (page: number) => Promise<RecordingsData>;
+  fetchRecordings?: (page: number) => Promise<FetchRecordingData>;
   deleteRecording?: (id: number) => Promise<boolean>;
 }
 

package/template/src/utils/useCreateRoom.ts

@@ -41,7 +41,7 @@ export default function useCreateRoom(): createRoomFun {
     try {
       const payload = JSON.stringify({
         title: roomTitle,
-        enablePSTN: enablePSTN,
+        enable_pstn: enablePSTN,
       });
       const response = await fetch(`${CREATE_ROOM_URL}`, {
         method: 'POST',

package/template/src/utils/useJoinRoom.ts

@@ -58,7 +58,6 @@ export default function useJoinRoom() {
           send_event: false,
         });
       } else {
-        console.log('debugging store.token', store.token);
         logger.log(
           LogSource.NetworkRest,
           'joinChannel',
@@ -157,6 +156,11 @@ export default function useJoinRoom() {
               isWaitingRoomEnabled ? data.secretSalt : data.secret_salt,
             ) as Uint8Array;
           }
+
+          if (data?.encryption_mode) {
+            roomInfo.encryptionMode = data.encryption_mode;
+          }
+
           if (data?.screen_share_user?.uid || data?.screenShare?.uid) {
             roomInfo.screenShareUid = isWaitingRoomEnabled
               ? data.screenShare.uid

package/template/src/components/stt-transcript/useFetchSTTTranscript.tsx

@@ -1,193 +0,0 @@
-import {useState, useCallback, useEffect, useContext} from 'react';
-import StorageContext from '../StorageContext';
-import {useRoomInfo} from 'customization-api';
-import getUniqueID from '../../utils/getUniqueID';
-import {logger, LogSource} from '../../logger/AppBuilderLogger';
-
-export interface FetchSTTTranscriptResponse {
-  pagination: {
-    limit: number;
-    total: number;
-    page: number;
-  };
-  stts: {
-    id: string;
-    download_url: string[];
-    title: string;
-    product_name: string;
-    status: 'COMPLETED' | 'STARTED' | 'INPROGRESS' | 'STOPPING';
-    created_at: string;
-    ended_at: string;
-  }[];
-}
-
-export type APIStatus = 'idle' | 'pending' | 'resolved' | 'rejected';
-
-export function useFetchSTTTranscript(defaultLimit = 10) {
-  const {
-    data: {roomId},
-  } = useRoomInfo();
-  const {store} = useContext(StorageContext);
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const [state, setState] = useState<{
-    status: APIStatus;
-    data: {
-      stts: FetchSTTTranscriptResponse['stts'];
-      pagination: FetchSTTTranscriptResponse['pagination'];
-    };
-    error: any;
-  }>({
-    status: 'idle',
-    data: {stts: [], pagination: {total: 0, limit: defaultLimit, page: 1}},
-    error: null,
-  });
-
-  const fetchStts = useCallback(
-    async (page: number) => {
-      const requestId = getUniqueID();
-      const start = Date.now();
-
-      try {
-        if (!roomId?.host) {
-          return Promise.reject('room id is empty');
-        }
-        const res = await fetch(
-          `${$config.BACKEND_ENDPOINT}/v1/stt-transcript`,
-          {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              authorization: store.token ? `Bearer ${store.token}` : '',
-              'X-Request-Id': requestId,
-              'X-Session-Id': logger.getSessionId(),
-            },
-            body: JSON.stringify({
-              passphrase: roomId.host,
-              limit: defaultLimit,
-              page,
-            }),
-          },
-        );
-        const json = await res.json();
-        const end = Date.now();
-
-        if (!res.ok) {
-          logger.error(
-            LogSource.NetworkRest,
-            'stt-transcript',
-            'Fetching STT transcripts failed',
-            {
-              json,
-              start,
-              end,
-              latency: end - start,
-              requestId,
-            },
-          );
-          throw new Error(json?.error?.message || 'Unknown fetch error');
-        }
-
-        logger.debug(
-          LogSource.NetworkRest,
-          'stt-transcript',
-          'Fetched STT transcripts',
-          {
-            json,
-            start,
-            end,
-            latency: end - start,
-            requestId,
-          },
-        );
-        return json;
-      } catch (err) {
-        return Promise.reject(err);
-      }
-    },
-    [roomId.host, store.token, defaultLimit],
-  );
-
-  const getSTTs = useCallback(
-    (page: number) => {
-      setState(s => ({...s, status: 'pending'}));
-      fetchStts(page).then(
-        data =>
-          setState({
-            status: 'resolved',
-            data: {
-              stts: data.stts || [],
-              pagination: data.pagination || {
-                total: 0,
-                limit: defaultLimit,
-                page: 1,
-              },
-            },
-            error: null,
-          }),
-        err => setState(s => ({...s, status: 'rejected', error: err})),
-      );
-    },
-    [fetchStts, defaultLimit],
-  );
-
-  const deleteTranscript = useCallback(
-    async (id: string) => {
-      const res = await fetch(
-        `${
-          $config.BACKEND_ENDPOINT
-        }/v1/stt-transcript/${id}?passphrase=${encodeURIComponent(
-          roomId.host,
-        )}`,
-        {
-          method: 'DELETE',
-          headers: {'Content-Type': 'application/json'},
-        },
-      );
-      if (!res.ok) {
-        const body = await res.json();
-        throw new Error(
-          body?.error?.message ?? `Delete failed (${res.status})`,
-        );
-      }
-      // optimistic update local state:
-      setState(prev => {
-        // remove the deleted item
-        const newStts = prev.data.stts.filter(item => item.id !== id);
-        // decrement total count
-        const newTotal = Math.max(prev.data.pagination.total - 1, 0);
-        // if we just removed the *last* item on this page, go back a page
-        let newPage = prev.data.pagination.page;
-        if (prev.data.stts.length === 1 && newPage > 1) {
-          newPage = newPage - 1;
-        }
-        return {
-          ...prev,
-          data: {
-            stts: newStts,
-            pagination: {
-              ...prev.data.pagination,
-              total: newTotal,
-              page: newPage,
-            },
-          },
-        };
-      });
-    },
-    [roomId.host],
-  );
-
-  useEffect(() => {
-    getSTTs(currentPage);
-  }, [currentPage, getSTTs]);
-
-  return {
-    status: state.status as APIStatus,
-    stts: state.data.stts,
-    pagination: state.data.pagination,
-    error: state.error,
-    currentPage,
-    setCurrentPage,
-    deleteTranscript,
-  };
-}