agora-appbuilder-core 4.1.8-1 → 4.1.8-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.8-1",
+  "version": "4.1.8-3",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.8-1',
-  CORE_VERSION: '4.1.8-1',
+  CLI_VERSION: '3.1.8-3',
+  CORE_VERSION: '4.1.8-3',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/atoms/TextInput.tsx

@@ -17,6 +17,9 @@ import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
 interface TextInputCustomProps extends TextInputProps {
   setRef?: (ref: any) => void;
+  onCompositionStart?: () => void;
+  onCompositionEnd?: () => void;
+  onInput?: (event: any) => void;
 }
 
 const TextInputCustom = (props: TextInputCustomProps) => {

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/caption/useSTTAPI.tsx

@@ -121,7 +121,7 @@ const useSTTAPI = (): IuseSTTAPI => {
   const start = async (lang: LanguageType[]) => {
     try {
       setIsLangChangeInProgress(true);
-      const res = await apiCall('start', lang);
+      const res = await apiCall('startv7', lang);
       // null means stt startred successfully
       const isSTTAlreadyActive =
         res?.error?.message
@@ -209,7 +209,7 @@ const useSTTAPI = (): IuseSTTAPI => {
 
   const stop = async () => {
     try {
-      const res = await apiCall('stop');
+      const res = await apiCall('stopv7');
       // once STT is non-active in the channel , notify others so that they dont' trigger start again
       // events.send(
       //   EventNames.STT_ACTIVE,

package/template/src/subComponents/caption/utils.ts

@@ -12,20 +12,38 @@ export function formatTime(timestamp: number): string {
 }
 
 export type LanguageType =
-  | 'en-US'
-  | 'hi-IN'
+  | 'ar-EG'
+  | 'ar-JO'
+  | 'ar-SA'
+  | 'ar-AE'
+  | 'bn-IN'
   | 'zh-CN'
   | 'zh-HK'
+  | 'zh-TW'
+  | 'nl-NL'
+  | 'en-IN'
+  | 'en-US'
+  | 'fil-PH'
   | 'fr-FR'
   | 'de-DE'
-  | 'ko-KR'
-  | 'en-IN'
-  | 'ar'
+  | 'gu-IN'
+  | 'he-IL'
+  | 'hi-IN'
+  | 'id-ID'
+  | 'it-IT'
   | 'ja-JP'
+  | 'kn-IN'
+  | 'ko-KR'
+  | 'ms-MY'
+  | 'fa-IR'
   | 'pt-PT'
+  | 'ru-RU'
   | 'es-ES'
-  | 'it-IT'
-  | 'id-ID'
+  | 'ta-IN'
+  | 'te-IN'
+  | 'th-TH'
+  | 'tr-TR'
+  | 'vi-VN'
   | '';
 
 interface LanguageData {
@@ -34,20 +52,38 @@ interface LanguageData {
 }
 
 export const langData: LanguageData[] = [
+  {label: 'Arabic (EG)', value: 'ar-EG'},
+  {label: 'Arabic (JO)', value: 'ar-JO'},
+  {label: 'Arabic (SA)', value: 'ar-SA'},
+  {label: 'Arabic (UAE)', value: 'ar-AE'},
+  {label: 'Bengali (IN)', value: 'bn-IN'},
+  {label: 'Chinese', value: 'zh-CN'},
+  {label: 'Chinese (HK)', value: 'zh-HK'},
+  {label: 'Chinese (TW)', value: 'zh-TW'},
+  {label: 'Dutch', value: 'nl-NL'},
+  {label: 'English (IN)', value: 'en-IN'},
   {label: 'English (US)', value: 'en-US'},
-  {label: 'English (India)', value: 'en-IN'},
-  {label: 'Hindi', value: 'hi-IN'},
-  {label: 'Chinese (Simplified)', value: 'zh-CN'},
-  {label: 'Chinese (Traditional)', value: 'zh-HK'},
-  {label: 'Arabic', value: 'ar'},
+  {label: 'Filipino', value: 'fil-PH'},
   {label: 'French', value: 'fr-FR'},
   {label: 'German', value: 'de-DE'},
+  {label: 'Gujarati', value: 'gu-IN'},
+  {label: 'Hebrew', value: 'he-IL'},
+  {label: 'Hindi', value: 'hi-IN'},
+  {label: 'Indonesian', value: 'id-ID'},
+  {label: 'Italian', value: 'it-IT'},
   {label: 'Japanese', value: 'ja-JP'},
+  {label: 'Kannada', value: 'kn-IN'},
   {label: 'Korean', value: 'ko-KR'},
+  {label: 'Malay', value: 'ms-MY'},
+  {label: 'Persian', value: 'fa-IR'},
   {label: 'Portuguese', value: 'pt-PT'},
+  {label: 'Russian', value: 'ru-RU'},
   {label: 'Spanish', value: 'es-ES'},
-  {label: 'Italian', value: 'it-IT'},
-  {label: 'Indonesian', value: 'id-ID'},
+  {label: 'Tamil', value: 'ta-IN'},
+  {label: 'Telugu', value: 'te-IN'},
+  {label: 'Thai', value: 'th-TH'},
+  {label: 'Turkish', value: 'tr-TR'},
+  {label: 'Vietnamese', value: 'vi-VN'},
 ];
 
 export function getLanguageLabel(