agora-appbuilder-core 4.1.12 → 4.1.13-beta.2

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

@@ -52,12 +52,10 @@ const CaptionText = ({
   setInActiveLinesAvaialble,
   captionUserStyle = {},
   captionTextStyle = {},
-  speakerUid,
-  userLocalUid,
-  spokenLanguageCode,
 }: CaptionTextProps) => {
   const isMobile = isMobileUA();
-  const {translationConfig, captionViewMode} = useCaption();
+  const {globalSttState, captionViewMode, selectedTranslationLanguageRef} =
+    useCaption();
 
   const LINE_HEIGHT = isMobile ? MOBILE_LINE_HEIGHT : DESKTOP_LINE_HEIGHT;
 
@@ -100,7 +98,7 @@ const CaptionText = ({
    */
 
   // Get the appropriate source text for display based on viewer's language preferences
-  const viewerSourceLanguage = translationConfig.source[0];
+  const globalSourceLanguage = globalSttState?.globalSpokenLanguage;
   // const localUserText = value;
   // const remoteUserTranslatedText: {
   //   text: string,
@@ -115,13 +113,17 @@ const CaptionText = ({
   //   return value;
   // };
 
+  // If translation is selected then show both local and remote in that translated language
   const displayTranslatedViewText = getUserTranslatedText(
     value,
     translations,
-    viewerSourceLanguage,
-    speakerUid,
-    userLocalUid,
+    globalSourceLanguage,
+    selectedTranslationLanguageRef.current,
   );
+  // const displayTranslatedViewText = {
+  //   value,
+  //   langCode: getLanguageLabel([globalSourceLanguage]) || '',
+  // };
 
   /**
    * ROBUST TEXT EXTRACTION LOGIC
@@ -131,7 +133,9 @@ const CaptionText = ({
    * - Without translation: 3 lines source (~150-180 chars)
    */
   const getLatestTextPortion = (text: string, maxChars: number) => {
-    if (!text || text.length <= maxChars) return text;
+    if (!text || text.length <= maxChars) {
+      return text;
+    }
 
     // Take last maxChars, try to find sentence boundary for cleaner cut
     const portion = text.slice(-maxChars);
@@ -211,24 +215,26 @@ const CaptionText = ({
             isAndroid() && {lineHeight: MOBILE_LINE_HEIGHT - 2},
             captionTextStyle,
           ]}>
+          {/* View mode when "Original and Translated" is selected - show original on top*/}
+          {selectedTranslationLanguageRef.current &&
+            captionViewMode === 'original-and-translated' && (
+              <>
+                <Text style={styles.languageLabel}>
+                  ({getLanguageLabel([globalSourceLanguage])}){' '}
+                </Text>
+                {getLatestTextPortion(value, sourceCharLimit)}
+                {'\n'}
+              </>
+            )}
+
           {/* Default view when view mode is : translated */}
           <Text style={styles.languageLabel}>
-            ({displayTranslatedViewText.langCode}
-            ):{' '}
+            ({displayTranslatedViewText.langLabel}){' '}
           </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>

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

@@ -1,4 +1,4 @@
-import React, {SetStateAction} from 'react';
+import React, {SetStateAction, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import Spacer from '../../atoms/Spacer';
 import Popup from '../../atoms/Popup';
@@ -6,27 +6,23 @@ import TertiaryButton from '../../atoms/TertiaryButton';
 import PrimaryButton from '../../atoms/PrimaryButton';
 import ThemeConfig from '../../theme';
 import {useIsDesktop} from '../../utils/common';
-import {LanguageTranslationConfig, useCaption} from './useCaption';
+import {useCaption} from './useCaption';
 import Dropdown from '../../atoms/Dropdown';
-import DropdownMulti from '../../atoms/DropDownMulti';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import Loading from '../Loading';
-import {LanguageType, langData, hasConfigChanged} from './utils';
+import {LanguageType, langData} from './utils';
 import {useString} from '../../utils/useString';
-import {useLocalUid} from '../../../agora-rn-uikit';
-// import {useRoomInfo} from '../../components/room-info/useRoomInfo';
 import {
   sttChangeLanguagePopupHeading,
   sttChangeLanguagePopupPrimaryBtnText,
   sttLanguageChangeInProgress,
-  sttChangeLanguagePopupDropdownInfo,
 } from '../../language/default-labels/videoCallScreenLabels';
 import {cancelText} from '../../language/default-labels/commonLabels';
 
 interface LanguageSelectorPopup {
   modalVisible: boolean;
   setModalVisible: React.Dispatch<SetStateAction<boolean>>;
-  onConfirm: (inputTranslationConfig: LanguageTranslationConfig) => void;
+  onConfirm: (newLang: LanguageType) => void;
 }
 
 const LanguageSelectorPopup = (props: LanguageSelectorPopup) => {
@@ -35,91 +31,19 @@ const LanguageSelectorPopup = (props: LanguageSelectorPopup) => {
   const cancelBtnLabel = useString(cancelText)();
   const ConfirmBtnLabel = useString(sttChangeLanguagePopupPrimaryBtnText)();
   const languageChangeInProgress = useString(sttLanguageChangeInProgress)();
-  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 [isTargetOpen, setIsTargetOpen] = React.useState(false);
-
-  const [inputTranslationConfig, setInputTranslationConfig] =
-    React.useState<LanguageTranslationConfig>({
-      source: [],
-      targets: [],
-    });
-
-  const isNotValidated =
-    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]);
+  const {globalSttState, isLangChangeInProgress} = useCaption();
 
-  // 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,
-    );
-
-    const mergedTargets = Array.from(
-      new Set([
-        ...(translationConfig.targets || []),
-        ...suggestedRemoteTargetLangs,
-      ]),
-    );
-
-    setInputTranslationConfig({
-      source: translationConfig.source,
-      targets: mergedTargets,
-    });
+  const [draftSpokenLanguage, setDraftSpokenLanguage] = useState<LanguageType>(
+    globalSttState?.globalSpokenLanguage || 'en-US',
+  );
 
-    console.log('[STT_PER_USER_BOT] mergedTargets —', mergedTargets);
-    console.log(
-      '[STT_PER_USER_BOT] all target langs —',
-      suggestedRemoteTargetLangs,
-    );
-  }, [props.modalVisible, translationConfig, suggestedRemoteTargetLangs]);
+  const hasSpokenLanguageChanged =
+    draftSpokenLanguage !== globalSttState?.globalSpokenLanguage;
 
   const onConfirmPress = async () => {
-    if (isNotValidated) {
-      return;
-    }
-
-    console.log('[LANG_SELECTOR] Confirm pressed:', {
-      inputTranslationConfig,
-    });
-
     try {
-      props?.onConfirm(inputTranslationConfig);
-      // props.setModalVisible(false);
+      props?.onConfirm(draftSpokenLanguage);
     } catch (err) {
       console.error('[LANG_SELECTOR] Error confirming STT config:', err);
     }
@@ -131,7 +55,12 @@ const LanguageSelectorPopup = (props: LanguageSelectorPopup) => {
       setModalVisible={props.setModalVisible}
       showCloseIcon={true}
       contentContainerStyle={styles.contentContainer}
-      title={heading(isSTTActive ? false : true)}>
+      title={heading(globalSttState?.globalSttEnabled ? false : true)}
+      subtitle={
+        globalSttState?.globalSttEnabled
+          ? ''
+          : 'Speech-to-text service will turn on for everyone in the call.'
+      }>
       {isLangChangeInProgress ? (
         <View style={styles.changeInProgress}>
           <Loading
@@ -145,67 +74,29 @@ const LanguageSelectorPopup = (props: LanguageSelectorPopup) => {
         <>
           {/* Source Language */}
           <View>
-            <Text style={styles.labelText}>
-              What language will you speak in this meeting?
-            </Text>
+            <Text style={styles.labelText}>Meeting Spoken language</Text>
             <Spacer size={8} />
             <Dropdown
               label="Select language"
-              data={sourceLanguageOptions}
-              selectedValue={inputTranslationConfig.source[0] || ''}
-              onSelect={item =>
-                setInputTranslationConfig(prev => ({
-                  ...prev,
-                  source: [item.value as LanguageType],
-                }))
-              }
+              data={[...langData]}
+              selectedValue={draftSpokenLanguage}
+              onSelect={item => {
+                if (item.value) {
+                  setDraftSpokenLanguage(item.value as LanguageType);
+                }
+              }}
               enabled={true}
             />
-            <Spacer size={2} />
+            <Spacer size={8} />
             <Text style={styles.infoText}>
-              Captions and transcript will appear in this language for you.
+              {globalSttState?.globalSttEnabled
+                ? 'Updates the spoken-language for everyone in the call.'
+                : 'Sets the spoken-language for everyone in the call.'}
             </Text>
           </View>
 
           <Spacer size={20} />
 
-          {/* Target Languages */}
-          <View>
-            <Text style={styles.labelText}>
-              Spoken languages in the meeting
-            </Text>
-            <Spacer size={8} />
-            <DropdownMulti
-              selectedValues={inputTranslationConfig.targets}
-              setSelectedValues={(val: LanguageType[]) =>
-                setInputTranslationConfig(prev => ({
-                  ...prev,
-                  targets: val,
-                }))
-              }
-              defaultSelectedValues={inputTranslationConfig.targets}
-              error={error}
-              setError={setError}
-              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} />
-          {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}}>
@@ -223,10 +114,7 @@ const LanguageSelectorPopup = (props: LanguageSelectorPopup) => {
             <View style={isDesktop && {flex: 1}}>
               <PrimaryButton
                 containerStyle={styles.button}
-                disabled={
-                  isNotValidated ||
-                  !hasConfigChanged(translationConfig, inputTranslationConfig)
-                }
+                disabled={!hasSpokenLanguageChanged}
                 text={ConfirmBtnLabel}
                 textStyle={styles.btnText}
                 onPress={onConfirmPress}

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

@@ -22,7 +22,7 @@ import {
 } from '../../utils/common';
 import {TranscriptHeader} from '../../pages/video-call/SidePanelHeader';
 import {useRtc, useContent} from 'customization-api';
-import {useCaption} from './useCaption';
+import {TranscriptItem, useCaption} from './useCaption';
 import {TranscriptText} from './TranscriptText';
 import PrimaryButton from '../../atoms/PrimaryButton';
 import ThemeConfig from '../../theme';
@@ -61,6 +61,8 @@ const Transcript = (props: TranscriptProps) => {
     setIsSTTListenerAdded,
     getBotOwnerUid,
     isSTTActive,
+    selectedTranslationLanguage,
+    transcriptViewMode,
   } = useCaption();
 
   const settingSpokenLanguageLabel = useString(sttSettingSpokenLanguageText)();
@@ -72,7 +74,7 @@ const Transcript = (props: TranscriptProps) => {
   const viewlatest = useString(sttTranscriptPanelViewLatestText)();
 
   const data = meetingTranscript; // Object.entries(transcript);
-  console.log('[STT_PER_USER_BOT] meetingTranscript data: ', data);
+  console.log('[STT_GLOBAL] meetingTranscript data: ', data);
 
   const [showButton, setShowButton] = React.useState(false);
 
@@ -108,41 +110,84 @@ 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'}
-        />
+  const renderItem = ({item}: {item: TranscriptItem}) => {
+    const speakerName =
+      defaultContent[getBotOwnerUid(item.uid)]?.name || 'Speaker';
+    const mode = transcriptViewMode;
+    // Find translation (always return TranslationItem | null)
+    const translation =
+      item.selectedTranslationLanguage &&
+      item.translations?.find(
+        tr => tr.lang === item.selectedTranslationLanguage,
+      )
+        ? item.translations.find(
+            tr => tr.lang === item.selectedTranslationLanguage,
+          )
+        : null;
+
+    // system messages - spoken lang update
+    if (item.uid.toString().indexOf('langUpdate') !== -1) {
+      return (
+        <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"
-          iconSize={20}
-          tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
-          name={'lang-select'}
-        />
+          <Text style={styles.langChange}>
+            {/* {defaultContent[item?.uid?.split('-')[1]]?.name + ' ' + item.text} */}
+            {item.text}
+          </Text>
+        </View>
+      );
+    }
+    // system messages - target update
+    if (item.uid.toString().indexOf('translationUpdate') !== -1) {
+      return (
+        <View style={styles.langChangeContainer}>
+          <ImageIcon
+            iconType="plain"
+            iconSize={20}
+            tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
+            name={'lang-select'}
+          />
 
-        <Text style={styles.langChange}>
-          {defaultContent[item?.uid?.split('-')[1]]?.name + ' has ' + item.text}
-        </Text>
-      </View>
-    ) : (
+          <Text style={styles.langChange}>
+            {/* {defaultContent[item?.uid?.split('-')[1]]?.name +
+              ' has ' +
+              item.text} */}
+            {item.text}
+          </Text>
+        </View>
+      );
+    }
+    // Translated mode (default)
+    if (mode === 'translated' && selectedTranslationLanguage) {
+      if (!translation) {
+        return null;
+      } // hide if translation not available
+      return (
+        <TranscriptText
+          user={speakerName}
+          time={item.time}
+          value={translation.text}
+          translations={[]}
+          searchQuery={searchQuery}
+          selectedTranslationLanguage={selectedTranslationLanguage}
+        />
+      );
+    }
+    // original and translated
+    return (
       <TranscriptText
-        user={defaultContent[getBotOwnerUid(item.uid)]?.name || 'Speaker'}
+        user={speakerName}
         time={item?.time}
         value={item.text}
-        translations={item.translations}
+        translations={translation ? [translation] : []}
         searchQuery={searchQuery}
-        selectedTranslationLanguage={item.selectedTranslationLanguage}
+        selectedTranslationLanguage={selectedTranslationLanguage}
       />
     );
   };
@@ -213,7 +258,7 @@ const Transcript = (props: TranscriptProps) => {
   };
 
   const handleStreamMessageCallback = (...args: StreamMessageArgs) => {
-    console.log('[STT_PER_USER_BOT] handleStreamMessageCallback', args);
+    console.log('[STT_GLOBAL] handleStreamMessageCallback', args);
     setIsSTTListenerAdded(true);
     if (isWebInternal()) {
       const [uid, data] = args as WebStreamMessageArgs;

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

@@ -3,11 +3,11 @@ import React from 'react';
 import {SidePanelType, useSidePanel} from 'customization-api';
 import IconButton, {IconButtonProps} from '../../atoms/IconButton';
 import LanguageSelectorPopup from './LanguageSelectorPopup';
-import {LanguageTranslationConfig, useCaption} from './useCaption';
-import useSTTAPI from './useSTTAPI';
+import {useCaption} from './useCaption';
 import {useString} from '../../utils/useString';
 import {toolbarItemTranscriptText} from '../../language/default-labels/videoCallScreenLabels';
 import {useToolbarProps} from '../../atoms/ToolbarItem';
+import {LanguageType} from './utils';
 
 interface TranscriptIconProps {
   plainIconHoverEffect?: boolean;
@@ -31,7 +31,8 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
   } = props;
 
   // const {start, restart, isAuthorizedTranscriptUser} = useSTTAPI();
-  const {isSTTActive, isSTTError, handleTranslateConfigChange} = useCaption();
+  const {isSTTActive, isSTTError, sttDepsReady, confirmSpokenLanguageChange} =
+    useCaption();
   // const isDisabled = !isAuthorizedTranscriptUser();
   const [isLanguagePopupOpen, setLanguagePopup] =
     React.useState<boolean>(false);
@@ -61,7 +62,7 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
         ? $config.PRIMARY_ACTION_TEXT_COLOR
         : $config.SECONDARY_ACTION_COLOR,
     },
-    disabled: false,
+    disabled: !sttDepsReady,
     btnTextProps: {
       text: showLabel
         ? isOnActionSheet
@@ -77,7 +78,7 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
     iconButtonProps.toolTipMessage = label(isTranscriptON);
   }
 
-  const onConfirm = async (inputTranslateConfig: LanguageTranslationConfig) => {
+  const onConfirm = async (newSpokenLang: LanguageType) => {
     // isFirstTimePopupOpen.current = false;
     // const method = isTranscriptON ? 'stop' : 'start';
     // if (method === 'stop') return; // not closing the stt service as it will stop for whole channel
@@ -89,7 +90,7 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
       //   // channel is already started now restart
       //   await restart(language, userOwnLanguages);
       // }
-      await handleTranslateConfigChange(inputTranslateConfig);
+      await confirmSpokenLanguageChange(newSpokenLang);
       if (!isTranscriptON) {
         setSidePanel(SidePanelType.Transcript);
       } else {

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

@@ -0,0 +1,128 @@
+import {useWindowDimensions, View} from 'react-native';
+import React from 'react';
+import {useCaption} from './useCaption';
+import {calculatePosition} from '../../utils/common';
+import ActionMenu, {ActionMenuItem} from '../../../src/atoms/ActionMenu';
+import {langData} from './utils';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+
+export interface TranslateActionMenuProps {
+  actionMenuVisible: boolean;
+  setActionMenuVisible: (actionMenuVisible: boolean) => void;
+  btnRef: React.RefObject<View>;
+}
+
+export const TranslateActionMenu = (props: TranslateActionMenuProps) => {
+  const {actionMenuVisible, setActionMenuVisible, btnRef} = props;
+  const [modalPosition, setModalPosition] = React.useState({});
+  const [isPosCalculated, setIsPosCalculated] = React.useState(false);
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const {
+    selectedTranslationLanguage,
+    confirmTargetLanguageChange,
+    globalSttState,
+    isLangChangeInProgress,
+  } = useCaption();
+
+  const sourceLang = globalSttState.globalSpokenLanguage;
+  const globalTargets = globalSttState.globalTranslationTargets || [];
+  const isGlobalTargetsFull = globalTargets.length >= 10;
+
+  const actionMenuitems: ActionMenuItem[] = [];
+
+  // Off option
+  actionMenuitems.push({
+    title: 'Off',
+    endIcon: !selectedTranslationLanguage ? 'tick-fill' : undefined,
+    iconColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    textColor: $config.FONT_COLOR,
+    iconPosition: 'end',
+    disabled: isLangChangeInProgress,
+    titleStyle: {
+      paddingLeft: 14,
+    },
+    onPress: () => {
+      confirmTargetLanguageChange(null);
+      setActionMenuVisible(false);
+    },
+  });
+
+  // Move selected translation language to the top
+  const sortedLangData = [...langData].sort((a, b) => {
+    if (a.value === selectedTranslationLanguage) {
+      return -1;
+    }
+    if (b.value === selectedTranslationLanguage) {
+      return 1;
+    }
+    return 0;
+  });
+
+  sortedLangData.forEach(lang => {
+    const selectedLang = lang.value === selectedTranslationLanguage;
+    // If global is full or if its a source disable all langs
+    const disabled = isGlobalTargetsFull || lang.value === sourceLang;
+    actionMenuitems.push({
+      title: lang.label,
+      endIcon: selectedLang ? 'tick-fill' : undefined,
+      iconPosition: 'end',
+      iconColor: disabled
+        ? $config.FONT_COLOR + hexadecimalTransparency['40%']
+        : $config.PRIMARY_ACTION_BRAND_COLOR,
+      textColor: disabled
+        ? $config.FONT_COLOR + hexadecimalTransparency['40%']
+        : $config.FONT_COLOR,
+      disabled,
+      titleStyle: {
+        paddingLeft: 14,
+      },
+      onPress: async () => {
+        if (disabled) {
+          return;
+        }
+        confirmTargetLanguageChange(lang.value);
+        setActionMenuVisible(false);
+      },
+    });
+  });
+
+  React.useEffect(() => {
+    if (actionMenuVisible) {
+      btnRef?.current?.measure(
+        (
+          _fx: number,
+          _fy: number,
+          localWidth: number,
+          localHeight: number,
+          px: number,
+          py: number,
+        ) => {
+          const data = calculatePosition({
+            px,
+            py,
+            localWidth,
+            localHeight,
+            globalHeight,
+            globalWidth,
+          });
+          setModalPosition(data);
+          setIsPosCalculated(true);
+        },
+      );
+    }
+  }, [actionMenuVisible]);
+
+  return (
+    <ActionMenu
+      from={'translation'}
+      actionMenuVisible={actionMenuVisible && isPosCalculated}
+      setActionMenuVisible={setActionMenuVisible}
+      modalPosition={modalPosition}
+      items={actionMenuitems}
+      containerStyle={{
+        maxHeight: Math.min(440, globalHeight * 0.6),
+        width: 220,
+      }}
+    />
+  );
+};