Merge pull request #92142 from Expensify/claude-systemMessagesSelectable

Make system/violation messages text-selectable on desktop web

Author: flodnv

src/components/InlineSystemMessage.tsx

@@ -1,7 +1,10 @@
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+
 import React from 'react';
 import {View} from 'react-native';
 
@@ -16,7 +19,9 @@ type InlineSystemMessageProps = {
 function InlineSystemMessage({message = ''}: InlineSystemMessageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const icons = useMemoizedLazyExpensifyIcons(['Exclamation']);
+    const selectableStyle = !canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone;
     if (!message) {
         return null;
     }
@@ -27,7 +32,7 @@ function InlineSystemMessage({message = ''}: InlineSystemMessageProps) {
                 src={icons.Exclamation}
                 fill={theme.danger}
             />
-            <Text style={styles.inlineSystemMessage}>{message}</Text>
+            <Text style={[styles.inlineSystemMessage, selectableStyle]}>{message}</Text>
         </View>
     );
 }

src/components/ReportActionItem/TaskAction.tsx

@@ -2,8 +2,10 @@ import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {getTaskReportActionMessage} from '@libs/TaskUtils';
 
 import type {ReportAction} from '@src/types/onyx';
@@ -21,14 +23,20 @@ type TaskActionProps = {
 function TaskAction({action}: TaskActionProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const message = getTaskReportActionMessage(translate, action);
+    const isSelectable = !canUseTouchScreen() || !shouldUseNarrowLayout;
+    const selectableStyle = isSelectable ? styles.userSelectText : styles.userSelectNone;
 
     return (
         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.breakWord, styles.preWrap]}>
             {message.html ? (
-                <RenderHTML html={`<comment><muted-text>${message.html}</muted-text></comment>`} />
+                <RenderHTML
+                    html={`<comment><muted-text>${message.html}</muted-text></comment>`}
+                    isSelectable={isSelectable}
+                />
             ) : (
-                <Text style={[styles.chatItemMessage, styles.colorMuted]}>{message.text}</Text>
+                <Text style={[styles.chatItemMessage, styles.colorMuted, selectableStyle]}>{message.text}</Text>
             )}
         </View>
     );

src/pages/inbox/report/ReportActionItemBasicMessage.tsx

@@ -1,7 +1,9 @@
 import Text from '@components/Text';
 
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {containsCustomEmoji, containsOnlyCustomEmoji} from '@libs/EmojiUtils';
 
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
@@ -18,19 +20,21 @@ type ReportActionItemBasicMessageProps = Partial<ChildrenProps> & {
 
 function ReportActionItemBasicMessage({message, children}: ReportActionItemBasicMessageProps) {
     const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const messageContainsCustomEmojiWithText = useMemo(() => containsCustomEmoji(message) && !containsOnlyCustomEmoji(message), [message]);
+    const selectableStyle = !canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone;
 
     return (
         <View>
             {!!message &&
                 (messageContainsCustomEmojiWithText ? (
                     <TextWithEmojiFragment
                         message={Str.htmlDecode(message)}
-                        style={[styles.chatItemMessage, styles.colorMuted]}
+                        style={[styles.chatItemMessage, styles.colorMuted, selectableStyle]}
                         alignCustomEmoji
                     />
                 ) : (
-                    <Text style={[styles.chatItemMessage, styles.colorMuted]}>{Str.htmlDecode(message)}</Text>
+                    <Text style={[styles.chatItemMessage, styles.colorMuted, selectableStyle]}>{Str.htmlDecode(message)}</Text>
                 ))}
             {children}
         </View>

src/pages/inbox/report/ReportActionItemMessageWithExplain.tsx

@@ -6,9 +6,11 @@ import useDelegateAccountID from '@hooks/useDelegateAccountID';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 import {openLink} from '@libs/actions/Link';
 import {explain} from '@libs/actions/Report';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {getParticipantsPersonalDetails} from '@libs/PersonalDetailsUtils';
 import {hasReasoning} from '@libs/ReportActionsUtils';
 
@@ -46,6 +48,7 @@ function ReportActionItemMessageWithExplain({message, action, childReport, origi
     const {translate} = useLocalize();
     const personalDetail = useCurrentUserPersonalDetails();
     const {environmentURL} = useEnvironment();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});
     const [betas] = useOnyx(ONYXKEYS.BETAS);
@@ -83,7 +86,7 @@ function ReportActionItemMessageWithExplain({message, action, childReport, origi
         <ReportActionItemBasicMessage>
             <RenderHTML
                 html={`<comment><muted-text>${computedMessage}</muted-text></comment>`}
-                isSelectable={false}
+                isSelectable={!canUseTouchScreen() || !shouldUseNarrowLayout}
                 onLinkPress={handleLinkPress}
             />
         </ReportActionItemBasicMessage>