fix: thread header is not showing the exact message sent v3

src/components/DisplayNames/index.native.tsx

@@ -8,9 +8,14 @@ import TextWithEmojiFragment from '@pages/home/report/comment/TextWithEmojiFragm
 import type DisplayNamesProps from './types';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
-function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1, renderAdditionalText, forwardedFSClass, testID}: DisplayNamesProps) {
+function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1, renderAdditionalText, forwardedFSClass, testID, shouldParseFullTitle = true}: DisplayNamesProps) {
     const {translate} = useLocalize();
     const titleContainsTextAndCustomEmoji = useMemo(() => containsCustomEmoji(fullTitle) && !containsOnlyCustomEmoji(fullTitle), [fullTitle]);
+    const title = useMemo(() => {
+        const processedTitle = shouldParseFullTitle ? Parser.htmlToText(fullTitle) : fullTitle;
+        return StringUtils.lineBreaksToSpaces(processedTitle) || translate('common.hidden');
+    }, [fullTitle, shouldParseFullTitle, translate]);
+
     return (
         <Text
             accessibilityLabel={accessibilityLabel}
@@ -21,11 +26,11 @@ function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfL
         >
             {titleContainsTextAndCustomEmoji ? (
                 <TextWithEmojiFragment
-                    message={StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden')}
+                    message={title}
                     style={textStyles}
                 />
             ) : (
-                StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden')
+                title
             )}
             {renderAdditionalText?.()}
         </Text>

src/components/DisplayNames/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import useLocalize from '@hooks/useLocalize';
 import Parser from '@libs/Parser';
 import StringUtils from '@libs/StringUtils';
@@ -16,9 +16,13 @@ function DisplayNames({
     displayNamesWithTooltips,
     renderAdditionalText,
     forwardedFSClass,
+    shouldParseFullTitle = true,
 }: DisplayNamesProps) {
     const {translate} = useLocalize();
-    const title = StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden');
+    const title = useMemo(() => {
+        const processedTitle = shouldParseFullTitle ? Parser.htmlToText(fullTitle) : fullTitle;
+        return StringUtils.lineBreaksToSpaces(processedTitle) || translate('common.hidden');
+    }, [fullTitle, shouldParseFullTitle, translate]);
 
     if (!tooltipEnabled) {
         return (

src/components/DisplayNames/types.ts

@@ -20,6 +20,14 @@ type DisplayNamesProps = ForwardedFSClassProps & {
     /** The full title of the DisplayNames component (not split up) */
     fullTitle: string;
 
+    /**
+     * Whether `fullTitle` should be processed through Parser.htmlToText().
+     * Set to true when `fullTitle` contains HTML that needs to be converted to plain text
+     * Set to false when `fullTitle` is already plain text or when you want to preserve
+     * any HTML formatting in the display.
+     */
+    shouldParseFullTitle?: boolean;
+
     /** Array of objects that map display names to their corresponding tooltip */
     displayNamesWithTooltips?: DisplayNameWithTooltip[];
 

src/components/HeaderWithBackButton/types.ts

@@ -132,6 +132,9 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     /** Whether we should enable detail page navigation */
     shouldEnableDetailPageNavigation?: boolean;
 
+    /** Number of lines to display for the title */
+    numberOfTitleLines?: number;
+
     /** Whether we should overlay the 3 dots menu */
     shouldOverlayDots?: boolean;
 

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -4,7 +4,7 @@
 import DisplayNames from '@components/DisplayNames';
 import Hoverable from '@components/Hoverable';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {useSession} from '@components/OnyxListItemProvider';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
@@ -170,6 +170,8 @@
     const subscriptAvatarBorderColor = isOptionFocused ? focusedBackgroundColor : theme.sidebar;
     const firstIcon = optionItem.icons?.at(0);
 
+    // This is used to ensure that we display the text exactly as the user entered it when displaying LHN title, instead of parsing their text to HTML.
+    const shouldParseFullTitle = optionItem?.parentReportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT;
     const alternateTextFSClass = FS.getChatFSClass(report);
 
     const onOptionPress = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
@@ -272,6 +274,7 @@
                                                 <DisplayNames
                                                     accessibilityLabel={translate('accessibilityHints.chatUserDisplayNames')}
                                                     fullTitle={optionItem.text ?? ''}
+                                                    shouldParseFullTitle={shouldParseFullTitle}
                                                     displayNamesWithTooltips={optionItem.displayNamesWithTooltips ?? []}
                                                     tooltipEnabled
                                                     numberOfLines={1}

src/components/MenuItem.tsx

@@ -34,7 +34,7 @@
 import FormHelpMessage from './FormHelpMessage';
 import Hoverable from './Hoverable';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import {MenuItemGroupContext} from './MenuItemGroup';
 import PlaidCardFeedIcon from './PlaidCardFeedIcon';
 import type {PressableRef} from './Pressable/GenericPressable/types';
@@ -611,6 +611,7 @@
             return (
                 <DisplayNames
                     fullTitle={title}
+                    shouldParseFullTitle={!shouldRenderAsHTML}
                     displayNamesWithTooltips={titleWithTooltips}
                     tooltipEnabled
                     numberOfLines={1}

src/pages/home/HeaderView.tsx

@@ -145,6 +145,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
     const parentNavigationReport = isParentOneTransactionThread ? parentReport : reportHeaderData;
     const isReportHeaderDataArchived = useReportIsArchived(reportHeaderData?.reportID);
     // Use sorted display names for the title for group chats on native small screen widths
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     const title = getReportName(reportHeaderData, policy, parentReportAction, personalDetails, invoiceReceiverPolicy, undefined, undefined, isReportHeaderDataArchived);
     const subtitle = getChatRoomSubtitle(reportHeaderData, false, isReportHeaderDataArchived);
     const isParentReportHeaderDataArchived = useReportIsArchived(reportHeaderData?.parentReportID);
@@ -154,6 +155,8 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
     const policyDescription = getPolicyDescriptionText(policy);
     const isPersonalExpenseChat = isPolicyExpenseChat && isCurrentUserSubmitter(report);
     const hasTeam2025Pricing = useHasTeam2025Pricing();
+    // This is used to ensure that we display the text exactly as the user entered it when displaying thread header text, instead of parsing their text to HTML.
+    const shouldParseFullTitle = parentReportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT;
     const subscriptionPlan = useSubscriptionPlan();
     const ancestors = useAncestors(report);
 
@@ -300,6 +303,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
                                             <DisplayNames
                                                 fullTitle={title}
                                                 displayNamesWithTooltips={displayNamesWithTooltips}
+                                                shouldParseFullTitle={shouldParseFullTitle}
                                                 tooltipEnabled
                                                 numberOfLines={1}
                                                 textStyles={[styles.headerText, styles.pre]}