From b3d5e3d3cb8cbbbd36f14b1ed1a1fc7e7bdb40e5 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 21:44:20 -0600 Subject: [PATCH 01/26] feat: add text selection functionality in chat view with modal support --- src/components/ChatView/ChatView.tsx | 29 +++++++- .../MessageSelectionView.tsx | 67 +++++++++++++++++++ src/components/MessageSelectionView/index.ts | 1 + src/components/MessageSelectionView/styles.ts | 28 ++++++++ src/hooks/useMessageActions.ts | 28 ++++++-- 5 files changed, 147 insertions(+), 6 deletions(-) create mode 100644 src/components/MessageSelectionView/MessageSelectionView.tsx create mode 100644 src/components/MessageSelectionView/index.ts create mode 100644 src/components/MessageSelectionView/styles.ts diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx index 3e5bc68..3d2567b 100644 --- a/src/components/ChatView/ChatView.tsx +++ b/src/components/ChatView/ChatView.tsx @@ -33,7 +33,7 @@ import ImageView from './ImageView'; import {createStyles} from './styles'; import {chatSessionStore, modelStore} from '../../store'; - +import { MessageSelectionView } from '../MessageSelectionView'; import {l10n} from '../../utils/l10n'; import {MessageType, User} from '../../utils/types'; import { @@ -264,7 +264,17 @@ export const ChatView = observer( chatSessionStore.exitEditMode(); }, []); - const {handleCopy, handleEdit, handleTryAgain, handleTryAgainWith} = + const { + handleSelectView, + handleCopy, + handleEdit, + handleTryAgain, + handleTryAgainWith, + isSelectionModalVisible, + selectedMessageContent, + handleTextSelected, + setSelectionModalVisible, + } = useMessageActions({ user, messages, @@ -429,6 +439,15 @@ export const ChatView = observer( icon: 'content-copy', disabled: false, }, + { + label: 'Select Text', + onPress: () => { + handleSelectView(selectedMessage); + handleMenuDismiss(); + }, + icon: 'select-drag', + disabled: false, + }, ]; if (!isAuthor) { @@ -756,6 +775,12 @@ export const ChatView = observer( onRequestClose={handleRequestClose} visible={isImageViewVisible} /> + setSelectionModalVisible(false)} + content={selectedMessageContent} + onTextSelected={handleTextSelected} + /> void; + content: string; + onTextSelected: (selectedText: string) => void; +} + +export const MessageSelectionView: React.FC = ({ + visible, + onClose, + content, + onTextSelected, +}) => { + const theme = useTheme(); + const textRef = useRef(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 ( + + + + + {({ pressed }) => ( + + )} + + + Select Text + + + + + {content} + + + + ); +}; \ No newline at end of file diff --git a/src/components/MessageSelectionView/index.ts b/src/components/MessageSelectionView/index.ts new file mode 100644 index 0000000..8f397c3 --- /dev/null +++ b/src/components/MessageSelectionView/index.ts @@ -0,0 +1 @@ +export * from './MessageSelectionView'; \ No newline at end of file diff --git a/src/components/MessageSelectionView/styles.ts b/src/components/MessageSelectionView/styles.ts new file mode 100644 index 0000000..29a0c36 --- /dev/null +++ b/src/components/MessageSelectionView/styles.ts @@ -0,0 +1,28 @@ +import { StyleSheet } from 'react-native'; + +export const getStyles = (theme: any) => StyleSheet.create({ + modalContainer: { + flex: 1, + backgroundColor: theme.colors.background, + padding: 16, + }, + headerContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: 16, + }, + headerText: { + fontSize: 18, + fontWeight: 'bold', + color: theme.colors.text, + flex: 1, + textAlign: 'center', + }, + contentText: { + color: theme.colors.text, + fontSize: 16, + lineHeight: 24, + marginTop: 48, + }, +}); \ No newline at end of file diff --git a/src/hooks/useMessageActions.ts b/src/hooks/useMessageActions.ts index afad942..d0c9b58 100644 --- a/src/hooks/useMessageActions.ts +++ b/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, }; }; From 6aacea412ccb6f8819504622196dfb0dc71a92a2 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:20:05 -0600 Subject: [PATCH 02/26] fix(styles): add missing newline at end of file in MessageSelectionView styles --- src/components/MessageSelectionView/styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MessageSelectionView/styles.ts b/src/components/MessageSelectionView/styles.ts index 29a0c36..ac52ff2 100644 --- a/src/components/MessageSelectionView/styles.ts +++ b/src/components/MessageSelectionView/styles.ts @@ -8,7 +8,7 @@ export const getStyles = (theme: any) => StyleSheet.create({ }, headerContainer: { flexDirection: 'row', - alignItems: 'center', + alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }, @@ -25,4 +25,4 @@ export const getStyles = (theme: any) => StyleSheet.create({ lineHeight: 24, marginTop: 48, }, -}); \ No newline at end of file +}); From 9971957b8cf715136f8989e0b6742bb9e3b64f53 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:21:17 -0600 Subject: [PATCH 03/26] fix(styles): add missing newline at end of file in MessageSelectionView components --- src/components/MessageSelectionView/MessageSelectionView.tsx | 4 ++-- src/components/MessageSelectionView/index.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index 002fc4e..b2e9a94 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -38,7 +38,7 @@ export const MessageSelectionView: React.FC = ({ > - + {({ pressed }) => ( = ({ ); -}; \ No newline at end of file +}; diff --git a/src/components/MessageSelectionView/index.ts b/src/components/MessageSelectionView/index.ts index 8f397c3..fec330c 100644 --- a/src/components/MessageSelectionView/index.ts +++ b/src/components/MessageSelectionView/index.ts @@ -1 +1 @@ -export * from './MessageSelectionView'; \ No newline at end of file +export * from './MessageSelectionView'; From ae9f1479f8ee6cbcb4b4cd1e6245c864504229ca Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:26:40 -0600 Subject: [PATCH 04/26] fix(styles): format import statement in ChatView component --- src/components/ChatView/ChatView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx index 3d2567b..e04a164 100644 --- a/src/components/ChatView/ChatView.tsx +++ b/src/components/ChatView/ChatView.tsx @@ -33,7 +33,7 @@ import ImageView from './ImageView'; import {createStyles} from './styles'; import {chatSessionStore, modelStore} from '../../store'; -import { MessageSelectionView } from '../MessageSelectionView'; +import {MessageSelectionView} from '../MessageSelectionView'; import {l10n} from '../../utils/l10n'; import {MessageType, User} from '../../utils/types'; import { From 79587e6c7a4972b2ada2733182e6a77b8e44038f Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:28:38 -0600 Subject: [PATCH 05/26] fix(styles): format code for consistency in ChatView component --- src/components/ChatView/ChatView.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx index e04a164..2dd5a5e 100644 --- a/src/components/ChatView/ChatView.tsx +++ b/src/components/ChatView/ChatView.tsx @@ -264,7 +264,7 @@ export const ChatView = observer( chatSessionStore.exitEditMode(); }, []); - const { + const { handleSelectView, handleCopy, handleEdit, @@ -274,8 +274,7 @@ export const ChatView = observer( selectedMessageContent, handleTextSelected, setSelectionModalVisible, - } = - useMessageActions({ + } = useMessageActions({ user, messages, handleSendPress: wrappedOnSendPress, From b79d978e1441c577ea2efcec8515748494d475ee Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:33:16 -0600 Subject: [PATCH 06/26] fix: format code for consistency in ChatView component --- src/components/ChatView/ChatView.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx index 2dd5a5e..ddf64ba 100644 --- a/src/components/ChatView/ChatView.tsx +++ b/src/components/ChatView/ChatView.tsx @@ -275,11 +275,11 @@ export const ChatView = observer( handleTextSelected, setSelectionModalVisible, } = useMessageActions({ - user, - messages, - handleSendPress: wrappedOnSendPress, - setInputText, - }); + user, + messages, + handleSendPress: wrappedOnSendPress, + setInputText, + }); const l10nValue = React.useMemo( () => ({...l10n[locale], ...unwrap(l10nOverride)}), From 00fbd3a18ba6d89fd5734115ad9052ff8f650d90 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:35:29 -0600 Subject: [PATCH 07/26] fix(styles): adjust indentation for MessageSelectionView in ChatView component --- src/components/ChatView/ChatView.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx index ddf64ba..e73d928 100644 --- a/src/components/ChatView/ChatView.tsx +++ b/src/components/ChatView/ChatView.tsx @@ -774,12 +774,12 @@ export const ChatView = observer( onRequestClose={handleRequestClose} visible={isImageViewVisible} /> - setSelectionModalVisible(false)} - content={selectedMessageContent} - onTextSelected={handleTextSelected} - /> + setSelectionModalVisible(false)} + content={selectedMessageContent} + onTextSelected={handleTextSelected} + /> Date: Thu, 30 Jan 2025 22:37:27 -0600 Subject: [PATCH 08/26] fix(styles): format import statements in MessageSelectionView component --- .../MessageSelectionView/MessageSelectionView.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index b2e9a94..ca9248b 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -1,8 +1,8 @@ -import React, { useRef } from 'react'; -import { Modal, Pressable, Text, View } from 'react-native'; -import { useTheme } from '../../hooks/useTheme'; +import React, {useRef} from 'react'; +import {Modal, Pressable, Text, View} from 'react-native'; +import {useTheme} from '../../hooks/useTheme'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -import { getStyles } from './styles'; +import {getStyles} from './styles'; interface MessageSelectionViewProps { visible: boolean; From 37a026ec3fc56662f6c4f00e6c8827d25fe45e2b Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:39:57 -0600 Subject: [PATCH 09/26] fix(styles): format code for consistency in MessageSelectionView component --- .../MessageSelectionView/MessageSelectionView.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index ca9248b..a5113ee 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -22,7 +22,7 @@ export const MessageSelectionView: React.FC = ({ const styles = getStyles(theme); const handleTextSelection = (event: any) => { - const { selection } = event.nativeEvent; + const {selection} = event.nativeEvent; if (selection && selection.start !== selection.end) { const selectedText = content.substring(selection.start, selection.end); onTextSelected(selectedText); @@ -34,12 +34,11 @@ export const MessageSelectionView: React.FC = ({ visible={visible} transparent animationType="slide" - onRequestClose={onClose} - > + onRequestClose={onClose}> - {({ pressed }) => ( + {({pressed}) => ( = ({ /> )} - - Select Text - + Select Text Date: Thu, 30 Jan 2025 22:43:21 -0600 Subject: [PATCH 10/26] fix: update icon name in MessageSelectionView component for consistency --- .../MessageSelectionView.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index a5113ee..53fdec1 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -37,16 +37,16 @@ export const MessageSelectionView: React.FC = ({ onRequestClose={onClose}> - - {({pressed}) => ( - - )} - - Select Text + + {({ pressed }) => ( + + )} + + Select Text Date: Thu, 30 Jan 2025 22:46:43 -0600 Subject: [PATCH 11/26] fix(styles): adjust formatting for consistency in MessageSelectionView component --- .../MessageSelectionView.tsx | 47 ++++++++++--------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index 53fdec1..ecb6026 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -1,7 +1,7 @@ import React, {useRef} from 'react'; import {Modal, Pressable, Text, View} from 'react-native'; -import {useTheme} from '../../hooks/useTheme'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import {useTheme} from '../../hooks/useTheme'; import {getStyles} from './styles'; interface MessageSelectionViewProps { @@ -34,31 +34,32 @@ export const MessageSelectionView: React.FC = ({ visible={visible} transparent animationType="slide" - onRequestClose={onClose}> + onRequestClose={onClose} + > - - {({ pressed }) => ( - - )} - - Select Text - + + {({ pressed }) => ( + + )} + + Select Text + - - {content} - + + {content} + ); -}; +}; \ No newline at end of file From 6a10d6a04852b149751567f7df244b27f2947b9a Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:49:26 -0600 Subject: [PATCH 12/26] fix(styles): improve formatting and indentation in MessageSelectionView component --- .../MessageSelectionView/MessageSelectionView.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index ecb6026..240b74c 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -39,11 +39,13 @@ export const MessageSelectionView: React.FC = ({ - {({ pressed }) => ( + {({pressed}) => ( )} @@ -55,11 +57,10 @@ export const MessageSelectionView: React.FC = ({ selectable selectionColor={theme.colors.surfaceVariant} onTextLayout={handleTextSelection} - style={styles.contentText} - > + style={styles.contentText}> {content} ); -}; \ No newline at end of file +}; From f3b1569aae7787c56da61d3ec8c20a6280d02ffd Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:50:41 -0600 Subject: [PATCH 13/26] fix(styles): correct formatting in MessageSelectionView component --- src/components/MessageSelectionView/MessageSelectionView.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index 240b74c..def2369 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -34,8 +34,7 @@ export const MessageSelectionView: React.FC = ({ visible={visible} transparent animationType="slide" - onRequestClose={onClose} - > + onRequestClose={onClose}> From 786b07dd2ad1efe571b86c1d520c890a17c812ea Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:59:03 -0600 Subject: [PATCH 14/26] fix(styles): update theme type and adjust color usage in MessageSelectionView component --- .../MessageSelectionView/MessageSelectionView.tsx | 3 ++- src/components/MessageSelectionView/styles.ts | 10 ++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index def2369..07f168d 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -34,7 +34,8 @@ export const MessageSelectionView: React.FC = ({ visible={visible} transparent animationType="slide" - onRequestClose={onClose}> + onRequestClose={onClose} +> diff --git a/src/components/MessageSelectionView/styles.ts b/src/components/MessageSelectionView/styles.ts index ac52ff2..1f54d94 100644 --- a/src/components/MessageSelectionView/styles.ts +++ b/src/components/MessageSelectionView/styles.ts @@ -1,6 +1,8 @@ -import { StyleSheet } from 'react-native'; +import {StyleSheet} from 'react-native'; +import { MD3Theme } from 'react-native-paper'; -export const getStyles = (theme: any) => StyleSheet.create({ +export const getStyles = (theme: MD3Theme) => StyleSheet.create({ + modalContainer: { flex: 1, backgroundColor: theme.colors.background, @@ -15,12 +17,12 @@ export const getStyles = (theme: any) => StyleSheet.create({ headerText: { fontSize: 18, fontWeight: 'bold', - color: theme.colors.text, + color: theme.colors.primary, flex: 1, textAlign: 'center', }, contentText: { - color: theme.colors.text, + color: theme.colors.primary, fontSize: 16, lineHeight: 24, marginTop: 48, From 9acff702fa6ff6ce3dcfcc41f17288b76fc204c4 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 22:59:29 -0600 Subject: [PATCH 15/26] fix: correct JSX formatting in MessageSelectionView component --- src/components/MessageSelectionView/MessageSelectionView.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index 07f168d..def2369 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -34,8 +34,7 @@ export const MessageSelectionView: React.FC = ({ visible={visible} transparent animationType="slide" - onRequestClose={onClose} -> + onRequestClose={onClose}> From 076eaa28165366346d7e11c38bcfb11169e76a5f Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 23:04:40 -0600 Subject: [PATCH 16/26] fix(styles): improve formatting and indentation in MessageSelectionView styles --- src/components/MessageSelectionView/styles.ts | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/MessageSelectionView/styles.ts b/src/components/MessageSelectionView/styles.ts index 1f54d94..7a316a4 100644 --- a/src/components/MessageSelectionView/styles.ts +++ b/src/components/MessageSelectionView/styles.ts @@ -1,30 +1,30 @@ import {StyleSheet} from 'react-native'; -import { MD3Theme } from 'react-native-paper'; +import {MD3Theme} from 'react-native-paper'; export const getStyles = (theme: MD3Theme) => StyleSheet.create({ - + modalContainer: { - flex: 1, - backgroundColor: theme.colors.background, - padding: 16, + flex: 1, + backgroundColor: theme.colors.background, + padding: 16, }, headerContainer: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - marginBottom: 16, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: 16, }, headerText: { - fontSize: 18, - fontWeight: 'bold', - color: theme.colors.primary, - flex: 1, - textAlign: 'center', + fontSize: 18, + fontWeight: 'bold', + color: theme.colors.primary, + flex: 1, + textAlign: 'center', }, contentText: { - color: theme.colors.primary, - fontSize: 16, - lineHeight: 24, - marginTop: 48, + color: theme.colors.primary, + fontSize: 16, + lineHeight: 24, + marginTop: 48, }, }); From 073c9dd4822c3656dfc04c5d8050021a40b440a6 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 23:07:20 -0600 Subject: [PATCH 17/26] fix(styles): adjust formatting in getStyles function in MessageSelectionView styles --- src/components/MessageSelectionView/styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MessageSelectionView/styles.ts b/src/components/MessageSelectionView/styles.ts index 7a316a4..58bb87d 100644 --- a/src/components/MessageSelectionView/styles.ts +++ b/src/components/MessageSelectionView/styles.ts @@ -1,8 +1,8 @@ import {StyleSheet} from 'react-native'; import {MD3Theme} from 'react-native-paper'; -export const getStyles = (theme: MD3Theme) => StyleSheet.create({ - +export const getStyles = (theme: MD3Theme) => + StyleSheet.create({ modalContainer: { flex: 1, backgroundColor: theme.colors.background, From 82fa8a600a9b2985abc05a4db9b8949d2c81ad1c Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 23:09:52 -0600 Subject: [PATCH 18/26] fix(styles): improve formatting in getStyles function in MessageSelectionView styles --- src/components/MessageSelectionView/styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MessageSelectionView/styles.ts b/src/components/MessageSelectionView/styles.ts index 58bb87d..374cd85 100644 --- a/src/components/MessageSelectionView/styles.ts +++ b/src/components/MessageSelectionView/styles.ts @@ -1,8 +1,8 @@ import {StyleSheet} from 'react-native'; import {MD3Theme} from 'react-native-paper'; -export const getStyles = (theme: MD3Theme) => - StyleSheet.create({ +export const getStyles = (theme: MD3Theme) => + StyleSheet.create({ modalContainer: { flex: 1, backgroundColor: theme.colors.background, @@ -27,4 +27,4 @@ export const getStyles = (theme: MD3Theme) => lineHeight: 24, marginTop: 48, }, -}); + }); From 3cf8829bc3d75687f384828b5de217e89021b0b5 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Thu, 30 Jan 2025 23:14:00 -0600 Subject: [PATCH 19/26] fix: add handleSelectView to dependencies in ChatView component --- src/components/ChatView/ChatView.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx index e73d928..1c48789 100644 --- a/src/components/ChatView/ChatView.tsx +++ b/src/components/ChatView/ChatView.tsx @@ -497,6 +497,7 @@ export const ChatView = observer( handleEdit, handleMenuDismiss, size.width, + handleSelectView, ]); const renderMenuItem = React.useCallback( From 695acf8f3459bafd8fe853561c0efc3228483fbe Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Fri, 31 Jan 2025 21:27:18 -0600 Subject: [PATCH 20/26] fix: update icon and improve styles in MessageSelectionView component --- .../MessageSelectionView/MessageSelectionView.tsx | 4 ++-- src/components/MessageSelectionView/styles.ts | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index def2369..5de1861 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -40,8 +40,8 @@ export const MessageSelectionView: React.FC = ({ {({pressed}) => ( headerContainer: { flexDirection: 'row', alignItems: 'center', - justifyContent: 'space-between', marginBottom: 16, }, headerText: { - fontSize: 18, + fontSize: 22, fontWeight: 'bold', color: theme.colors.primary, - flex: 1, - textAlign: 'center', + marginLeft: 16, }, contentText: { color: theme.colors.primary, - fontSize: 16, + fontSize: 18, lineHeight: 24, - marginTop: 48, + marginTop: 5, + maxWidth: 375, + alignSelf: 'center', }, }); From d2c8d8651ec508e8fefb0b43fa6580ab427b23c1 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Fri, 31 Jan 2025 21:58:14 -0600 Subject: [PATCH 21/26] fix: add ScrollView to MessageSelectionView for improved text selection and adjust styles --- .../MessageSelectionView/MessageSelectionView.tsx | 7 +++++-- src/components/MessageSelectionView/styles.ts | 6 +++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index 5de1861..d7fdb9d 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -1,5 +1,5 @@ import React, {useRef} from 'react'; -import {Modal, Pressable, Text, View} from 'react-native'; +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'; @@ -51,14 +51,17 @@ export const MessageSelectionView: React.FC = ({ Select Text + + style={styles.contentText} + > {content} + ); diff --git a/src/components/MessageSelectionView/styles.ts b/src/components/MessageSelectionView/styles.ts index 27f58e8..29e2273 100644 --- a/src/components/MessageSelectionView/styles.ts +++ b/src/components/MessageSelectionView/styles.ts @@ -24,7 +24,11 @@ export const getStyles = (theme: MD3Theme) => fontSize: 18, lineHeight: 24, marginTop: 5, - maxWidth: 375, + maxWidth: '95%', alignSelf: 'center', }, + scrollViewContent: { + flexGrow: 1, + padding: 5, + }, }); From 164ccb33ed83c2467e6d01371e7c27aa032fd216 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Fri, 31 Jan 2025 22:05:29 -0600 Subject: [PATCH 22/26] fix: adjust formatting in MessageSelectionView component for improved readability --- .../MessageSelectionView.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index d7fdb9d..0ce35c0 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -52,16 +52,15 @@ export const MessageSelectionView: React.FC = ({ - - {content} + {content} - + ); From 9c7213ed3411e676a83fcfd14df1096b85735256 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Fri, 31 Jan 2025 22:08:14 -0600 Subject: [PATCH 23/26] fix: adjust text formatting in MessageSelectionView for consistency --- .../MessageSelectionView/MessageSelectionView.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index 0ce35c0..8a494d5 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -52,14 +52,14 @@ export const MessageSelectionView: React.FC = ({ - {content} - + style={styles.contentText}> + {content} + From 59106d46c6ce388587e429975ce54d73fa0d7f15 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Fri, 31 Jan 2025 22:08:42 -0600 Subject: [PATCH 24/26] fix: improve code formatting in MessageSelectionView for consistency --- .../MessageSelectionView.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index 8a494d5..0eb30e1 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -1,8 +1,8 @@ -import React, {useRef} from 'react'; -import {Modal, Pressable, Text, View, ScrollView} from 'react-native'; +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'; +import { useTheme } from '../../hooks/useTheme'; +import { getStyles } from './styles'; interface MessageSelectionViewProps { visible: boolean; @@ -22,7 +22,7 @@ export const MessageSelectionView: React.FC = ({ const styles = getStyles(theme); const handleTextSelection = (event: any) => { - const {selection} = event.nativeEvent; + const { selection } = event.nativeEvent; if (selection && selection.start !== selection.end) { const selectedText = content.substring(selection.start, selection.end); onTextSelected(selectedText); @@ -38,7 +38,7 @@ export const MessageSelectionView: React.FC = ({ - {({pressed}) => ( + {({ pressed }) => ( = ({ - - {content} - - + {content} + + ); From 54deece18e9019ce2ce00e79079fb9a8324f7c47 Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Fri, 31 Jan 2025 22:09:03 -0600 Subject: [PATCH 25/26] fix: improve code formatting in MessageSelectionView for consistency --- .../MessageSelectionView.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/MessageSelectionView/MessageSelectionView.tsx index 0eb30e1..8a494d5 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/MessageSelectionView/MessageSelectionView.tsx @@ -1,8 +1,8 @@ -import React, { useRef } from 'react'; -import { Modal, Pressable, Text, View, ScrollView } from 'react-native'; +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'; +import {useTheme} from '../../hooks/useTheme'; +import {getStyles} from './styles'; interface MessageSelectionViewProps { visible: boolean; @@ -22,7 +22,7 @@ export const MessageSelectionView: React.FC = ({ const styles = getStyles(theme); const handleTextSelection = (event: any) => { - const { selection } = event.nativeEvent; + const {selection} = event.nativeEvent; if (selection && selection.start !== selection.end) { const selectedText = content.substring(selection.start, selection.end); onTextSelected(selectedText); @@ -38,7 +38,7 @@ export const MessageSelectionView: React.FC = ({ - {({ pressed }) => ( + {({pressed}) => ( = ({ - - {content} - - + {content} + + ); From f5d2fecc117bb68935f7b35df40c1636d80dfe2e Mon Sep 17 00:00:00 2001 From: sohailbaig Date: Fri, 31 Jan 2025 22:22:09 -0600 Subject: [PATCH 26/26] chore: replace MessageSelectionView with SelectTextView component --- src/components/ChatView/ChatView.tsx | 4 ++-- src/components/MessageSelectionView/index.ts | 1 - .../SelectTextView.tsx} | 12 ++++++------ src/components/SelectTextView/index.ts | 1 + .../styles.ts | 0 5 files changed, 9 insertions(+), 9 deletions(-) delete mode 100644 src/components/MessageSelectionView/index.ts rename src/components/{MessageSelectionView/MessageSelectionView.tsx => SelectTextView/SelectTextView.tsx} (90%) create mode 100644 src/components/SelectTextView/index.ts rename src/components/{MessageSelectionView => SelectTextView}/styles.ts (100%) diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx index 1c48789..b7ab7f7 100644 --- a/src/components/ChatView/ChatView.tsx +++ b/src/components/ChatView/ChatView.tsx @@ -33,7 +33,7 @@ import ImageView from './ImageView'; import {createStyles} from './styles'; import {chatSessionStore, modelStore} from '../../store'; -import {MessageSelectionView} from '../MessageSelectionView'; +import {SelectTextView} from '../SelectTextView'; import {l10n} from '../../utils/l10n'; import {MessageType, User} from '../../utils/types'; import { @@ -775,7 +775,7 @@ export const ChatView = observer( onRequestClose={handleRequestClose} visible={isImageViewVisible} /> - setSelectionModalVisible(false)} content={selectedMessageContent} diff --git a/src/components/MessageSelectionView/index.ts b/src/components/MessageSelectionView/index.ts deleted file mode 100644 index fec330c..0000000 --- a/src/components/MessageSelectionView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './MessageSelectionView'; diff --git a/src/components/MessageSelectionView/MessageSelectionView.tsx b/src/components/SelectTextView/SelectTextView.tsx similarity index 90% rename from src/components/MessageSelectionView/MessageSelectionView.tsx rename to src/components/SelectTextView/SelectTextView.tsx index 8a494d5..f34f7ef 100644 --- a/src/components/MessageSelectionView/MessageSelectionView.tsx +++ b/src/components/SelectTextView/SelectTextView.tsx @@ -4,14 +4,14 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import {useTheme} from '../../hooks/useTheme'; import {getStyles} from './styles'; -interface MessageSelectionViewProps { +interface SelectTextViewProps { visible: boolean; onClose: () => void; content: string; onTextSelected: (selectedText: string) => void; } -export const MessageSelectionView: React.FC = ({ +export const SelectTextView: React.FC = ({ visible, onClose, content, @@ -52,15 +52,15 @@ export const MessageSelectionView: React.FC = ({ - - {content} - - + {content} + + ); diff --git a/src/components/SelectTextView/index.ts b/src/components/SelectTextView/index.ts new file mode 100644 index 0000000..016a6f3 --- /dev/null +++ b/src/components/SelectTextView/index.ts @@ -0,0 +1 @@ +export * from './SelectTextView'; diff --git a/src/components/MessageSelectionView/styles.ts b/src/components/SelectTextView/styles.ts similarity index 100% rename from src/components/MessageSelectionView/styles.ts rename to src/components/SelectTextView/styles.ts