From 2fc522c911df1a7c4bf647f6a419fe6787dad3ff Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 26 Sep 2024 11:41:50 +0700
Subject: [PATCH 1/4] fix: Room mention in the message is not highlighted

---
 src/components/SelectionList/ChatListItem.tsx |  89 ++++-----
 src/pages/home/report/ReportActionItem.tsx    | 177 +++++++++---------
 2 files changed, 138 insertions(+), 128 deletions(-)

diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx
index 8322c7e1406a..1bb044d9b6df 100644
--- a/src/components/SelectionList/ChatListItem.tsx
+++ b/src/components/SelectionList/ChatListItem.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import {AttachmentContext} from '@components/AttachmentContext';
+import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
 import MultipleAvatars from '@components/MultipleAvatars';
 import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import TextWithTooltip from '@components/TextWithTooltip';
@@ -54,6 +55,8 @@ function ChatListItem<TItem extends ListItem>({
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
 
+    const mentionReportContextValue = useMemo(() => ({currentReportID: item?.reportID ?? ''}), [item.reportID]);
+
     return (
         <BaseListItem
             item={item}
@@ -77,49 +80,51 @@ function ChatListItem<TItem extends ListItem>({
             hoverStyle={item.isSelected && styles.activeComponentBG}
         >
             {(hovered) => (
-                <ShowContextMenuContext.Provider value={contextValue}>
-                    <AttachmentContext.Provider value={attachmentContextValue}>
-                        <MultipleAvatars
-                            icons={icons}
-                            shouldShowTooltip={showTooltip}
-                            secondAvatarStyle={[
-                                StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-                                isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
-                                hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
-                            ]}
-                        />
-                        <View style={[styles.chatItemRight]}>
-                            <View style={[styles.chatItemMessageHeader]}>
-                                <View style={[styles.flexShrink1, styles.mr1]}>
-                                    <TextWithTooltip
-                                        shouldShowTooltip={showTooltip}
-                                        text={reportActionItem.formattedFrom}
-                                        style={[
-                                            styles.chatItemMessageHeaderSender,
-                                            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
-                                            styles.sidebarLinkTextBold,
-                                            styles.pre,
-                                        ]}
-                                    />
+                <MentionReportContext.Provider value={mentionReportContextValue}>
+                    <ShowContextMenuContext.Provider value={contextValue}>
+                        <AttachmentContext.Provider value={attachmentContextValue}>
+                            <MultipleAvatars
+                                icons={icons}
+                                shouldShowTooltip={showTooltip}
+                                secondAvatarStyle={[
+                                    StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+                                    isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
+                                    hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
+                                ]}
+                            />
+                            <View style={[styles.chatItemRight]}>
+                                <View style={[styles.chatItemMessageHeader]}>
+                                    <View style={[styles.flexShrink1, styles.mr1]}>
+                                        <TextWithTooltip
+                                            shouldShowTooltip={showTooltip}
+                                            text={reportActionItem.formattedFrom}
+                                            style={[
+                                                styles.chatItemMessageHeaderSender,
+                                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                                                styles.sidebarLinkTextBold,
+                                                styles.pre,
+                                            ]}
+                                        />
+                                    </View>
+                                    <ReportActionItemDate created={reportActionItem.created ?? ''} />
+                                </View>
+                                <View style={styles.chatItemMessage}>
+                                    {reportActionItem.message.map((fragment, index) => (
+                                        <ReportActionItemFragment
+                                            // eslint-disable-next-line react/no-array-index-key
+                                            key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
+                                            fragment={fragment}
+                                            actionName={reportActionItem.actionName}
+                                            source=""
+                                            accountID={from.accountID}
+                                            isFragmentContainingDisplayName={index === 0}
+                                        />
+                                    ))}
                                 </View>
-                                <ReportActionItemDate created={reportActionItem.created ?? ''} />
-                            </View>
-                            <View style={styles.chatItemMessage}>
-                                {reportActionItem.message.map((fragment, index) => (
-                                    <ReportActionItemFragment
-                                        // eslint-disable-next-line react/no-array-index-key
-                                        key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
-                                        fragment={fragment}
-                                        actionName={reportActionItem.actionName}
-                                        source=""
-                                        accountID={from.accountID}
-                                        isFragmentContainingDisplayName={index === 0}
-                                    />
-                                ))}
                             </View>
-                        </View>
-                    </AttachmentContext.Provider>
-                </ShowContextMenuContext.Provider>
+                        </AttachmentContext.Provider>
+                    </ShowContextMenuContext.Provider>
+                </MentionReportContext.Provider>
             )}
         </BaseListItem>
     );
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 99d25e2b4023..ec3235d8c1d6 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -9,6 +9,7 @@ import {AttachmentContext} from '@components/AttachmentContext';
 import Button from '@components/Button';
 import DisplayNames from '@components/DisplayNames';
 import Hoverable from '@components/Hoverable';
+import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import InlineSystemMessage from '@components/InlineSystemMessage';
@@ -891,99 +892,103 @@ function ReportActionItem({
     const isWhisperOnlyVisibleByUser = isWhisper && ReportUtils.isCurrentUserTheOnlyParticipant(whisperedTo);
     const displayNamesWithTooltips = isWhisper ? ReportUtils.getDisplayNamesWithTooltips(whisperedToPersonalDetails, isMultipleParticipant) : [];
 
+    const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? ''}), [report?.reportID]);
+
     return (
-        <PressableWithSecondaryInteraction
-            ref={popoverAnchorRef}
-            onPress={draftMessage === undefined ? onPress : undefined}
-            style={[action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !isDeletedParentAction ? styles.pointerEventsNone : styles.pointerEventsAuto]}
-            onPressIn={() => shouldUseNarrowLayout && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-            onPressOut={() => ControlSelection.unblock()}
-            onSecondaryInteraction={showPopover}
-            preventDefaultContextMenu={draftMessage === undefined && !hasErrors}
-            withoutFocusOnSecondaryInteraction
-            accessibilityLabel={translate('accessibilityHints.chatMessage')}
-            accessible
-        >
-            <Hoverable
-                shouldHandleScroll
-                isDisabled={draftMessage !== undefined}
+        <MentionReportContext.Provider value={mentionReportContextValue}>
+            <PressableWithSecondaryInteraction
+                ref={popoverAnchorRef}
+                onPress={draftMessage === undefined ? onPress : undefined}
+                style={[action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !isDeletedParentAction ? styles.pointerEventsNone : styles.pointerEventsAuto]}
+                onPressIn={() => shouldUseNarrowLayout && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                onPressOut={() => ControlSelection.unblock()}
+                onSecondaryInteraction={showPopover}
+                preventDefaultContextMenu={draftMessage === undefined && !hasErrors}
+                withoutFocusOnSecondaryInteraction
+                accessibilityLabel={translate('accessibilityHints.chatMessage')}
+                accessible
             >
-                {(hovered) => (
-                    <View style={highlightedBackgroundColorIfNeeded}>
-                        {shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && <UnreadActionIndicator reportActionID={action.reportActionID} />}
-                        {shouldDisplayContextMenu && (
-                            <MiniReportActionContextMenu
-                                reportID={reportID}
-                                reportActionID={action.reportActionID}
-                                anchor={popoverAnchorRef}
-                                originalReportID={originalReportID}
-                                isArchivedRoom={isArchivedRoom}
-                                displayAsGroup={displayAsGroup}
-                                disabledActions={disabledActions}
-                                isVisible={hovered && draftMessage === undefined && !hasErrors}
-                                draftMessage={draftMessage}
-                                isChronosReport={isChronosReport}
-                                checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
-                                setIsEmojiPickerActive={setIsEmojiPickerActive}
-                            />
-                        )}
-                        <View
-                            style={StyleUtils.getReportActionItemStyle(
-                                hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || draftMessage !== undefined || isPaymentMethodPopoverActive,
-                                draftMessage === undefined && !!onPress,
+                <Hoverable
+                    shouldHandleScroll
+                    isDisabled={draftMessage !== undefined}
+                >
+                    {(hovered) => (
+                        <View style={highlightedBackgroundColorIfNeeded}>
+                            {shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && <UnreadActionIndicator reportActionID={action.reportActionID} />}
+                            {shouldDisplayContextMenu && (
+                                <MiniReportActionContextMenu
+                                    reportID={reportID}
+                                    reportActionID={action.reportActionID}
+                                    anchor={popoverAnchorRef}
+                                    originalReportID={originalReportID}
+                                    isArchivedRoom={isArchivedRoom}
+                                    displayAsGroup={displayAsGroup}
+                                    disabledActions={disabledActions}
+                                    isVisible={hovered && draftMessage === undefined && !hasErrors}
+                                    draftMessage={draftMessage}
+                                    isChronosReport={isChronosReport}
+                                    checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
+                                    setIsEmojiPickerActive={setIsEmojiPickerActive}
+                                />
                             )}
-                        >
-                            <OfflineWithFeedback
-                                onClose={() => {
-                                    const transactionID = ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID : undefined;
-                                    if (transactionID) {
-                                        Transaction.clearError(transactionID);
-                                    }
-                                    ReportActions.clearAllRelatedReportActionErrors(reportID, action);
-                                }}
-                                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                                pendingAction={
-                                    draftMessage !== undefined ? undefined : action.pendingAction ?? (action.isOptimisticAction ? CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD : undefined)
-                                }
-                                shouldHideOnDelete={!ReportActionsUtils.isThreadParentMessage(action, reportID)}
-                                errors={linkedTransactionRouteError ?? ErrorUtils.getLatestErrorMessageField(action as ErrorUtils.OnyxDataWithErrors)}
-                                errorRowStyles={[styles.ml10, styles.mr2]}
-                                needsOffscreenAlphaCompositing={ReportActionsUtils.isMoneyRequestAction(action)}
-                                shouldDisableStrikeThrough
+                            <View
+                                style={StyleUtils.getReportActionItemStyle(
+                                    hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || draftMessage !== undefined || isPaymentMethodPopoverActive,
+                                    draftMessage === undefined && !!onPress,
+                                )}
                             >
-                                {isWhisper && (
-                                    <View style={[styles.flexRow, styles.pl5, styles.pt2, styles.pr3]}>
-                                        <View style={[styles.pl6, styles.mr3]}>
-                                            <Icon
-                                                fill={theme.icon}
-                                                src={Expensicons.Eye}
-                                                small
+                                <OfflineWithFeedback
+                                    onClose={() => {
+                                        const transactionID = ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID : undefined;
+                                        if (transactionID) {
+                                            Transaction.clearError(transactionID);
+                                        }
+                                        ReportActions.clearAllRelatedReportActionErrors(reportID, action);
+                                    }}
+                                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                                    pendingAction={
+                                        draftMessage !== undefined ? undefined : action.pendingAction ?? (action.isOptimisticAction ? CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD : undefined)
+                                    }
+                                    shouldHideOnDelete={!ReportActionsUtils.isThreadParentMessage(action, reportID)}
+                                    errors={linkedTransactionRouteError ?? ErrorUtils.getLatestErrorMessageField(action as ErrorUtils.OnyxDataWithErrors)}
+                                    errorRowStyles={[styles.ml10, styles.mr2]}
+                                    needsOffscreenAlphaCompositing={ReportActionsUtils.isMoneyRequestAction(action)}
+                                    shouldDisableStrikeThrough
+                                >
+                                    {isWhisper && (
+                                        <View style={[styles.flexRow, styles.pl5, styles.pt2, styles.pr3]}>
+                                            <View style={[styles.pl6, styles.mr3]}>
+                                                <Icon
+                                                    fill={theme.icon}
+                                                    src={Expensicons.Eye}
+                                                    small
+                                                />
+                                            </View>
+                                            <Text style={[styles.chatItemMessageHeaderTimestamp]}>
+                                                {translate('reportActionContextMenu.onlyVisible')}
+                                                &nbsp;
+                                            </Text>
+                                            <DisplayNames
+                                                fullTitle={ReportUtils.getWhisperDisplayNames(whisperedTo) ?? ''}
+                                                displayNamesWithTooltips={displayNamesWithTooltips}
+                                                tooltipEnabled
+                                                numberOfLines={1}
+                                                textStyles={[styles.chatItemMessageHeaderTimestamp, styles.flex1]}
+                                                shouldUseFullTitle={isWhisperOnlyVisibleByUser}
                                             />
                                         </View>
-                                        <Text style={[styles.chatItemMessageHeaderTimestamp]}>
-                                            {translate('reportActionContextMenu.onlyVisible')}
-                                            &nbsp;
-                                        </Text>
-                                        <DisplayNames
-                                            fullTitle={ReportUtils.getWhisperDisplayNames(whisperedTo) ?? ''}
-                                            displayNamesWithTooltips={displayNamesWithTooltips}
-                                            tooltipEnabled
-                                            numberOfLines={1}
-                                            textStyles={[styles.chatItemMessageHeaderTimestamp, styles.flex1]}
-                                            shouldUseFullTitle={isWhisperOnlyVisibleByUser}
-                                        />
-                                    </View>
-                                )}
-                                {renderReportActionItem(!!hovered || !!isReportActionLinked, isWhisper, hasErrors)}
-                            </OfflineWithFeedback>
+                                    )}
+                                    {renderReportActionItem(!!hovered || !!isReportActionLinked, isWhisper, hasErrors)}
+                                </OfflineWithFeedback>
+                            </View>
                         </View>
-                    </View>
-                )}
-            </Hoverable>
-            <View style={styles.reportActionSystemMessageContainer}>
-                <InlineSystemMessage message={action.error} />
-            </View>
-        </PressableWithSecondaryInteraction>
+                    )}
+                </Hoverable>
+                <View style={styles.reportActionSystemMessageContainer}>
+                    <InlineSystemMessage message={action.error} />
+                </View>
+            </PressableWithSecondaryInteraction>
+        </MentionReportContext.Provider>
     );
 }
 

From 30d9b5862ba90b6c93c961bf73ff66d03e13a60d Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 26 Sep 2024 15:58:45 +0700
Subject: [PATCH 2/4] fix lint

---
 src/pages/home/report/ReportActionItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index ec3235d8c1d6..9c9e79de8a0a 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -393,6 +393,8 @@ function ReportActionItem({
 
     const attachmentContextValue = useMemo(() => ({reportID, type: CONST.ATTACHMENT_TYPE.REPORT}), [reportID]);
 
+    const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? ''}), [report?.reportID]);
+
     const actionableItemButtons: ActionableItem[] = useMemo(() => {
         if (ReportActionsUtils.isActionableAddPaymentCard(action) && shouldRenderAddPaymentCard()) {
             return [
@@ -892,8 +894,6 @@ function ReportActionItem({
     const isWhisperOnlyVisibleByUser = isWhisper && ReportUtils.isCurrentUserTheOnlyParticipant(whisperedTo);
     const displayNamesWithTooltips = isWhisper ? ReportUtils.getDisplayNamesWithTooltips(whisperedToPersonalDetails, isMultipleParticipant) : [];
 
-    const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? ''}), [report?.reportID]);
-
     return (
         <MentionReportContext.Provider value={mentionReportContextValue}>
             <PressableWithSecondaryInteraction

From 25a766bd8ee0f3523f47d1a59fbf39bc13acbea3 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 2 Oct 2024 17:07:55 +0700
Subject: [PATCH 3/4] fix some minor change

---
 src/components/SelectionList/ChatListItem.tsx |   2 +-
 src/pages/home/report/ReportActionItem.tsx    | 272 +++++++++---------
 2 files changed, 137 insertions(+), 137 deletions(-)

diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx
index 1bb044d9b6df..6e9fe0ddc35b 100644
--- a/src/components/SelectionList/ChatListItem.tsx
+++ b/src/components/SelectionList/ChatListItem.tsx
@@ -55,7 +55,7 @@ function ChatListItem<TItem extends ListItem>({
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
 
-    const mentionReportContextValue = useMemo(() => ({currentReportID: item?.reportID ?? ''}), [item.reportID]);
+    const mentionReportContextValue = useMemo(() => ({currentReportID: item?.reportID ?? '-1'}), [item.reportID]);
 
     return (
         <BaseListItem
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 9c9e79de8a0a..d4f2bf0dfdf3 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -682,59 +682,61 @@ function ReportActionItem({
                 ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) &&
                 !ReportActionsUtils.isPendingRemove(action);
             children = (
-                <ShowContextMenuContext.Provider value={contextValue}>
-                    <AttachmentContext.Provider value={attachmentContextValue}>
-                        {draftMessage === undefined ? (
-                            <View style={displayAsGroup && hasBeenFlagged ? styles.blockquote : {}}>
-                                <ReportActionItemMessage
-                                    reportID={reportID}
-                                    action={action}
-                                    displayAsGroup={displayAsGroup}
-                                    isHidden={isHidden}
-                                />
-                                {hasBeenFlagged && (
-                                    <Button
-                                        small
-                                        style={[styles.mt2, styles.alignSelfStart]}
-                                        onPress={() => updateHiddenState(!isHidden)}
-                                    >
-                                        <Text
-                                            style={[styles.buttonSmallText, styles.userSelectNone]}
-                                            dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                <MentionReportContext.Provider value={mentionReportContextValue}>
+                    <ShowContextMenuContext.Provider value={contextValue}>
+                        <AttachmentContext.Provider value={attachmentContextValue}>
+                            {draftMessage === undefined ? (
+                                <View style={displayAsGroup && hasBeenFlagged ? styles.blockquote : {}}>
+                                    <ReportActionItemMessage
+                                        reportID={reportID}
+                                        action={action}
+                                        displayAsGroup={displayAsGroup}
+                                        isHidden={isHidden}
+                                    />
+                                    {hasBeenFlagged && (
+                                        <Button
+                                            small
+                                            style={[styles.mt2, styles.alignSelfStart]}
+                                            onPress={() => updateHiddenState(!isHidden)}
                                         >
-                                            {isHidden ? translate('moderation.revealMessage') : translate('moderation.hideMessage')}
-                                        </Text>
-                                    </Button>
-                                )}
-                                {/**
+                                            <Text
+                                                style={[styles.buttonSmallText, styles.userSelectNone]}
+                                                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                                            >
+                                                {isHidden ? translate('moderation.revealMessage') : translate('moderation.hideMessage')}
+                                            </Text>
+                                        </Button>
+                                    )}
+                                    {/**
                                 These are the actionable buttons that appear at the bottom of a Concierge message
                                 for example: Invite a user mentioned but not a member of the room
                                 https://github.com/Expensify/App/issues/32741
                             */}
-                                {actionableItemButtons.length > 0 && (
-                                    <ActionableItemButtons
-                                        items={actionableItemButtons}
-                                        layout={ReportActionsUtils.isActionableTrackExpense(action) ? 'vertical' : 'horizontal'}
-                                    />
-                                )}
-                            </View>
-                        ) : (
-                            <ReportActionItemMessageEdit
-                                action={action}
-                                draftMessage={draftMessage}
-                                reportID={reportID}
-                                policyID={report?.policyID}
-                                index={index}
-                                ref={textInputRef}
-                                shouldDisableEmojiPicker={
-                                    (ReportUtils.chatIncludesConcierge(report) && User.isBlockedFromConcierge(blockedFromConcierge)) ||
-                                    ReportUtils.isArchivedRoom(report, reportNameValuePairs)
-                                }
-                                isGroupPolicyReport={!!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE}
-                            />
-                        )}
-                    </AttachmentContext.Provider>
-                </ShowContextMenuContext.Provider>
+                                    {actionableItemButtons.length > 0 && (
+                                        <ActionableItemButtons
+                                            items={actionableItemButtons}
+                                            layout={ReportActionsUtils.isActionableTrackExpense(action) ? 'vertical' : 'horizontal'}
+                                        />
+                                    )}
+                                </View>
+                            ) : (
+                                <ReportActionItemMessageEdit
+                                    action={action}
+                                    draftMessage={draftMessage}
+                                    reportID={reportID}
+                                    policyID={report?.policyID}
+                                    index={index}
+                                    ref={textInputRef}
+                                    shouldDisableEmojiPicker={
+                                        (ReportUtils.chatIncludesConcierge(report) && User.isBlockedFromConcierge(blockedFromConcierge)) ||
+                                        ReportUtils.isArchivedRoom(report, reportNameValuePairs)
+                                    }
+                                    isGroupPolicyReport={!!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE}
+                                />
+                            )}
+                        </AttachmentContext.Provider>
+                    </ShowContextMenuContext.Provider>
+                </MentionReportContext.Provider>
             );
         }
         const numberOfThreadReplies = action.childVisibleActionCount ?? 0;
@@ -895,100 +897,98 @@ function ReportActionItem({
     const displayNamesWithTooltips = isWhisper ? ReportUtils.getDisplayNamesWithTooltips(whisperedToPersonalDetails, isMultipleParticipant) : [];
 
     return (
-        <MentionReportContext.Provider value={mentionReportContextValue}>
-            <PressableWithSecondaryInteraction
-                ref={popoverAnchorRef}
-                onPress={draftMessage === undefined ? onPress : undefined}
-                style={[action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !isDeletedParentAction ? styles.pointerEventsNone : styles.pointerEventsAuto]}
-                onPressIn={() => shouldUseNarrowLayout && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                onPressOut={() => ControlSelection.unblock()}
-                onSecondaryInteraction={showPopover}
-                preventDefaultContextMenu={draftMessage === undefined && !hasErrors}
-                withoutFocusOnSecondaryInteraction
-                accessibilityLabel={translate('accessibilityHints.chatMessage')}
-                accessible
+        <PressableWithSecondaryInteraction
+            ref={popoverAnchorRef}
+            onPress={draftMessage === undefined ? onPress : undefined}
+            style={[action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !isDeletedParentAction ? styles.pointerEventsNone : styles.pointerEventsAuto]}
+            onPressIn={() => shouldUseNarrowLayout && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+            onPressOut={() => ControlSelection.unblock()}
+            onSecondaryInteraction={showPopover}
+            preventDefaultContextMenu={draftMessage === undefined && !hasErrors}
+            withoutFocusOnSecondaryInteraction
+            accessibilityLabel={translate('accessibilityHints.chatMessage')}
+            accessible
+        >
+            <Hoverable
+                shouldHandleScroll
+                isDisabled={draftMessage !== undefined}
             >
-                <Hoverable
-                    shouldHandleScroll
-                    isDisabled={draftMessage !== undefined}
-                >
-                    {(hovered) => (
-                        <View style={highlightedBackgroundColorIfNeeded}>
-                            {shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && <UnreadActionIndicator reportActionID={action.reportActionID} />}
-                            {shouldDisplayContextMenu && (
-                                <MiniReportActionContextMenu
-                                    reportID={reportID}
-                                    reportActionID={action.reportActionID}
-                                    anchor={popoverAnchorRef}
-                                    originalReportID={originalReportID}
-                                    isArchivedRoom={isArchivedRoom}
-                                    displayAsGroup={displayAsGroup}
-                                    disabledActions={disabledActions}
-                                    isVisible={hovered && draftMessage === undefined && !hasErrors}
-                                    draftMessage={draftMessage}
-                                    isChronosReport={isChronosReport}
-                                    checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
-                                    setIsEmojiPickerActive={setIsEmojiPickerActive}
-                                />
+                {(hovered) => (
+                    <View style={highlightedBackgroundColorIfNeeded}>
+                        {shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && <UnreadActionIndicator reportActionID={action.reportActionID} />}
+                        {shouldDisplayContextMenu && (
+                            <MiniReportActionContextMenu
+                                reportID={reportID}
+                                reportActionID={action.reportActionID}
+                                anchor={popoverAnchorRef}
+                                originalReportID={originalReportID}
+                                isArchivedRoom={isArchivedRoom}
+                                displayAsGroup={displayAsGroup}
+                                disabledActions={disabledActions}
+                                isVisible={hovered && draftMessage === undefined && !hasErrors}
+                                draftMessage={draftMessage}
+                                isChronosReport={isChronosReport}
+                                checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
+                                setIsEmojiPickerActive={setIsEmojiPickerActive}
+                            />
+                        )}
+                        <View
+                            style={StyleUtils.getReportActionItemStyle(
+                                hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || draftMessage !== undefined || isPaymentMethodPopoverActive,
+                                draftMessage === undefined && !!onPress,
                             )}
-                            <View
-                                style={StyleUtils.getReportActionItemStyle(
-                                    hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || draftMessage !== undefined || isPaymentMethodPopoverActive,
-                                    draftMessage === undefined && !!onPress,
-                                )}
-                            >
-                                <OfflineWithFeedback
-                                    onClose={() => {
-                                        const transactionID = ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID : undefined;
-                                        if (transactionID) {
-                                            Transaction.clearError(transactionID);
-                                        }
-                                        ReportActions.clearAllRelatedReportActionErrors(reportID, action);
-                                    }}
-                                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                                    pendingAction={
-                                        draftMessage !== undefined ? undefined : action.pendingAction ?? (action.isOptimisticAction ? CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD : undefined)
+                        >
+                            <OfflineWithFeedback
+                                onClose={() => {
+                                    const transactionID = ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID : undefined;
+                                    if (transactionID) {
+                                        Transaction.clearError(transactionID);
                                     }
-                                    shouldHideOnDelete={!ReportActionsUtils.isThreadParentMessage(action, reportID)}
-                                    errors={linkedTransactionRouteError ?? ErrorUtils.getLatestErrorMessageField(action as ErrorUtils.OnyxDataWithErrors)}
-                                    errorRowStyles={[styles.ml10, styles.mr2]}
-                                    needsOffscreenAlphaCompositing={ReportActionsUtils.isMoneyRequestAction(action)}
-                                    shouldDisableStrikeThrough
-                                >
-                                    {isWhisper && (
-                                        <View style={[styles.flexRow, styles.pl5, styles.pt2, styles.pr3]}>
-                                            <View style={[styles.pl6, styles.mr3]}>
-                                                <Icon
-                                                    fill={theme.icon}
-                                                    src={Expensicons.Eye}
-                                                    small
-                                                />
-                                            </View>
-                                            <Text style={[styles.chatItemMessageHeaderTimestamp]}>
-                                                {translate('reportActionContextMenu.onlyVisible')}
-                                                &nbsp;
-                                            </Text>
-                                            <DisplayNames
-                                                fullTitle={ReportUtils.getWhisperDisplayNames(whisperedTo) ?? ''}
-                                                displayNamesWithTooltips={displayNamesWithTooltips}
-                                                tooltipEnabled
-                                                numberOfLines={1}
-                                                textStyles={[styles.chatItemMessageHeaderTimestamp, styles.flex1]}
-                                                shouldUseFullTitle={isWhisperOnlyVisibleByUser}
+                                    ReportActions.clearAllRelatedReportActionErrors(reportID, action);
+                                }}
+                                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                                pendingAction={
+                                    draftMessage !== undefined ? undefined : action.pendingAction ?? (action.isOptimisticAction ? CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD : undefined)
+                                }
+                                shouldHideOnDelete={!ReportActionsUtils.isThreadParentMessage(action, reportID)}
+                                errors={linkedTransactionRouteError ?? ErrorUtils.getLatestErrorMessageField(action as ErrorUtils.OnyxDataWithErrors)}
+                                errorRowStyles={[styles.ml10, styles.mr2]}
+                                needsOffscreenAlphaCompositing={ReportActionsUtils.isMoneyRequestAction(action)}
+                                shouldDisableStrikeThrough
+                            >
+                                {isWhisper && (
+                                    <View style={[styles.flexRow, styles.pl5, styles.pt2, styles.pr3]}>
+                                        <View style={[styles.pl6, styles.mr3]}>
+                                            <Icon
+                                                fill={theme.icon}
+                                                src={Expensicons.Eye}
+                                                small
                                             />
                                         </View>
-                                    )}
-                                    {renderReportActionItem(!!hovered || !!isReportActionLinked, isWhisper, hasErrors)}
-                                </OfflineWithFeedback>
-                            </View>
+                                        <Text style={[styles.chatItemMessageHeaderTimestamp]}>
+                                            {translate('reportActionContextMenu.onlyVisible')}
+                                            &nbsp;
+                                        </Text>
+                                        <DisplayNames
+                                            fullTitle={ReportUtils.getWhisperDisplayNames(whisperedTo) ?? ''}
+                                            displayNamesWithTooltips={displayNamesWithTooltips}
+                                            tooltipEnabled
+                                            numberOfLines={1}
+                                            textStyles={[styles.chatItemMessageHeaderTimestamp, styles.flex1]}
+                                            shouldUseFullTitle={isWhisperOnlyVisibleByUser}
+                                        />
+                                    </View>
+                                )}
+                                {renderReportActionItem(!!hovered || !!isReportActionLinked, isWhisper, hasErrors)}
+                            </OfflineWithFeedback>
                         </View>
-                    )}
-                </Hoverable>
-                <View style={styles.reportActionSystemMessageContainer}>
-                    <InlineSystemMessage message={action.error} />
-                </View>
-            </PressableWithSecondaryInteraction>
-        </MentionReportContext.Provider>
+                    </View>
+                )}
+            </Hoverable>
+            <View style={styles.reportActionSystemMessageContainer}>
+                <InlineSystemMessage message={action.error} />
+            </View>
+        </PressableWithSecondaryInteraction>
     );
 }
 

From 52c3de16dee277c3695ab70d9b2d33afcfdf2e35 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 3 Oct 2024 11:16:59 +0700
Subject: [PATCH 4/4] add fallback reportId as -1

---
 src/pages/home/report/ReportActionItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 428ea082b42e..3a2fb427e630 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -393,7 +393,7 @@ function ReportActionItem({
 
     const attachmentContextValue = useMemo(() => ({reportID, type: CONST.ATTACHMENT_TYPE.REPORT}), [reportID]);
 
-    const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? ''}), [report?.reportID]);
+    const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? '-1'}), [report?.reportID]);
 
     const actionableItemButtons: ActionableItem[] = useMemo(() => {
         if (ReportActionsUtils.isActionableAddPaymentCard(action) && shouldRenderAddPaymentCard()) {