feat: add text selection functionality in chat view with modal support

src/components/ChatView/ChatView.tsx

@@ -33,7 +33,7 @@ import ImageView from './ImageView';
 import {createStyles} from './styles';
 
 import {chatSessionStore, modelStore} from '../../store';
-
+import {SelectTextView} from '../SelectTextView';
 import {l10n} from '../../utils/l10n';
 import {MessageType, User} from '../../utils/types';
 import {
@@ -264,13 +264,22 @@ export const ChatView = observer(
       chatSessionStore.exitEditMode();
     }, []);
 
-    const {handleCopy, handleEdit, handleTryAgain, handleTryAgainWith} =
-      useMessageActions({
-        user,
-        messages,
-        handleSendPress: wrappedOnSendPress,
-        setInputText,
-      });
+    const {
+      handleSelectView,
+      handleCopy,
+      handleEdit,
+      handleTryAgain,
+      handleTryAgainWith,
+      isSelectionModalVisible,
+      selectedMessageContent,
+      handleTextSelected,
+      setSelectionModalVisible,
+    } = useMessageActions({
+      user,
+      messages,
+      handleSendPress: wrappedOnSendPress,
+      setInputText,
+    });
 
     const l10nValue = React.useMemo(
       () => ({...l10n[locale], ...unwrap(l10nOverride)}),
@@ -429,6 +438,15 @@ export const ChatView = observer(
           icon: 'content-copy',
           disabled: false,
         },
+        {
+          label: 'Select Text',
+          onPress: () => {
+            handleSelectView(selectedMessage);
+            handleMenuDismiss();
+          },
+          icon: 'select-drag',
+          disabled: false,
+        },
       ];
 
       if (!isAuthor) {
@@ -479,6 +497,7 @@ export const ChatView = observer(
       handleEdit,
       handleMenuDismiss,
       size.width,
+      handleSelectView,
     ]);
 
     const renderMenuItem = React.useCallback(
@@ -756,6 +775,12 @@ export const ChatView = observer(
               onRequestClose={handleRequestClose}
               visible={isImageViewVisible}
             />
+            <SelectTextView
+              visible={isSelectionModalVisible}
+              onClose={() => setSelectionModalVisible(false)}
+              content={selectedMessageContent}
+              onTextSelected={handleTextSelected}
+            />
             <Menu
               visible={menuVisible}
               onDismiss={handleMenuDismiss}

src/components/SelectTextView/SelectTextView.tsx

@@ -0,0 +1,67 @@
+import React, {useRef} from 'react';
+import {Modal, Pressable, Text, View, ScrollView} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {useTheme} from '../../hooks/useTheme';
+import {getStyles} from './styles';
+
+interface SelectTextViewProps {
+  visible: boolean;
+  onClose: () => void;
+  content: string;
+  onTextSelected: (selectedText: string) => void;
+}
+
+export const SelectTextView: React.FC<SelectTextViewProps> = ({
+  visible,
+  onClose,
+  content,
+  onTextSelected,
+}) => {
+  const theme = useTheme();
+  const textRef = useRef<Text>(null);
+  const styles = getStyles(theme);
+
+  const handleTextSelection = (event: any) => {
+    const {selection} = event.nativeEvent;
+    if (selection && selection.start !== selection.end) {
+      const selectedText = content.substring(selection.start, selection.end);
+      onTextSelected(selectedText);
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}>
+      <View style={styles.modalContainer}>
+        <View style={styles.headerContainer}>
+          <Pressable onPress={onClose}>
+            {({pressed}) => (
+              <Icon
+                name="arrow-left"
+                size={26}
+                color={
+                  pressed ? theme.colors.surfaceVariant : theme.colors.text
+                }
+              />
+            )}
+          </Pressable>
+          <Text style={styles.headerText}>Select Text</Text>
+        </View>
+
+        <ScrollView contentContainerStyle={styles.scrollViewContent}>
+          <Text
+            ref={textRef}
+            selectable
+            selectionColor={theme.colors.surfaceVariant}
+            onTextLayout={handleTextSelection}
+            style={styles.contentText}>
+            {content}
+          </Text>
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+};

src/components/SelectTextView/index.ts

@@ -0,0 +1 @@
+export * from './SelectTextView';

src/components/SelectTextView/styles.ts

@@ -0,0 +1,34 @@
+import {StyleSheet} from 'react-native';
+import {MD3Theme} from 'react-native-paper';
+
+export const getStyles = (theme: MD3Theme) =>
+  StyleSheet.create({
+    modalContainer: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+      padding: 16,
+    },
+    headerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 16,
+    },
+    headerText: {
+      fontSize: 22,
+      fontWeight: 'bold',
+      color: theme.colors.primary,
+      marginLeft: 16,
+    },
+    contentText: {
+      color: theme.colors.primary,
+      fontSize: 18,
+      lineHeight: 24,
+      marginTop: 5,
+      maxWidth: '95%',
+      alignSelf: 'center',
+    },
+    scrollViewContent: {
+      flexGrow: 1,
+      padding: 5,
+    },
+  });

src/hooks/useMessageActions.ts

@@ -1,9 +1,7 @@
-import {useCallback} from 'react';
-
+import {useCallback, useState} from 'react';
 import Clipboard from '@react-native-clipboard/clipboard';
 
 import {chatSessionStore, modelStore} from '../store';
-
 import {MessageType, User} from '../utils/types';
 
 interface UseMessageActionsProps {
@@ -19,12 +17,29 @@ export const useMessageActions = ({
   handleSendPress,
   setInputText,
 }: UseMessageActionsProps) => {
+  const [isSelectionModalVisible, setSelectionModalVisible] = useState(false);
+  const [selectedMessageContent, setSelectedMessageContent] = useState('');
+  const [selectedText, setSelectedText] = useState('');
+
   const handleCopy = useCallback((message: MessageType.Text) => {
     if (message.type === 'text') {
       Clipboard.setString(message.text.trim());
     }
   }, []);
 
+  const handleSelectView = useCallback((message: MessageType.Text) => {
+    if (message.type === 'text') {
+      setSelectedMessageContent(message.text);
+      setSelectionModalVisible(true);
+    }
+  }, []);
+
+  const handleTextSelected = useCallback((text: string) => {
+    setSelectedText(text);
+    Clipboard.setString(text);
+    setSelectionModalVisible(false);
+  }, []);
+
   const handleEdit = useCallback(
     async (message: MessageType.Text) => {
       if (message.type !== 'text' || message.author.id !== user.id) {
@@ -46,7 +61,6 @@ export const useMessageActions = ({
 
       // If it's the user's message, resubmit it
       if (message.author.id === user.id) {
-        // Remove all messages from this point (inclusive)
         const messageText = message.text;
         chatSessionStore.removeMessagesFromId(message.id, true);
         await handleSendPress({text: messageText, type: 'text'});
@@ -87,7 +101,13 @@ export const useMessageActions = ({
   return {
     handleCopy,
     handleEdit,
+    handleSelectView,
     handleTryAgain,
     handleTryAgainWith,
+    isSelectionModalVisible,
+    selectedMessageContent,
+    handleTextSelected,
+    setSelectionModalVisible,
+    selectedText,
   };
 };