fix: chat delete and iOS file path issues

aws-samples · Dec 1, 2024 · efb87ea · efb87ea
1 parent f84a61e
commit efb87ea
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 15 deletions.
diff --git a/react-native/src/chat/ChatScreen.tsx b/react-native/src/chat/ChatScreen.tsx
@@ -201,6 +201,8 @@ function ChatScreen(): React.JSX.Element {
       const { id } = event.params;
       if (sessionIdRef.current === id) {
         sessionIdRef.current = getSessionId() + 1;
+        setUsage(undefined);
+        bedrockMessages.current = [];
         clearCachedNode();
         setMessages([]);
       }
@@ -501,7 +503,9 @@ function ChatScreen(): React.JSX.Element {
             />
           )
         }
-        renderMessage={props => <CustomMessageComponent {...props} />}
+        renderMessage={props => (
+          <CustomMessageComponent {...props} chatStatus={chatStatus} />
+        )}
         listViewProps={{
           contentContainerStyle: styles.contentContainer,
           contentInset: { top: 2 },

diff --git a/react-native/src/chat/component/CustomFileListComponent.tsx b/react-native/src/chat/component/CustomFileListComponent.tsx
@@ -14,6 +14,7 @@ import { ImageSource } from 'react-native-image-viewing/dist/@types';
 import Share from 'react-native-share';
 import FileViewer from 'react-native-file-viewer';
 import { isMac } from '../../App.tsx';
+import { getFullFileUrl } from '../util/FileUtils.ts';
 
 interface CustomFileProps {
   files: FileInfo[];
@@ -55,6 +56,7 @@ export const CustomFileListComponent: React.FC<CustomFileProps> = ({
 
   const renderFileItem = (file: FileInfo, fileIndex: number) => {
     const isImage = file.type === FileType.image;
+    const fullFileUrl = getFullFileUrl(file.url);
     const itemKey = `file-${fileIndex}-${file.url}`;
     return (
       <View
@@ -81,7 +83,7 @@ export const CustomFileListComponent: React.FC<CustomFileProps> = ({
             try {
               const options = {
                 type: 'text/plain',
-                url: file.url,
+                url: fullFileUrl,
                 showAppsToView: true,
               };
               Share.open(options).then();
@@ -91,13 +93,13 @@ export const CustomFileListComponent: React.FC<CustomFileProps> = ({
           }}
           onPress={() => {
             if (isMac || file.type === FileType.document) {
-              openInFileViewer(file.url);
+              openInFileViewer(fullFileUrl);
             } else {
               const images = files
                 .filter(item => item.type === FileType.image)
-                .map(item => ({ uri: item.url }));
+                .map(item => ({ uri: getFullFileUrl(item.url) }));
               const currentIndex = images.findIndex(
-                img => img.uri === file.url
+                img => img.uri === fullFileUrl
               );
               setImageUrls(images);
               setIndex(currentIndex);
@@ -106,7 +108,7 @@ export const CustomFileListComponent: React.FC<CustomFileProps> = ({
           }}>
           {isImage ? (
             <Image
-              source={{ uri: file.url }}
+              source={{ uri: fullFileUrl }}
               style={styles.thumbnail}
               resizeMode="cover"
             />

diff --git a/react-native/src/chat/component/CustomMessageComponent.tsx b/react-native/src/chat/component/CustomMessageComponent.tsx
@@ -20,7 +20,7 @@ import { IMessage, MessageProps } from 'react-native-gifted-chat';
 import { CustomMarkdownRenderer } from './CustomMarkdownRenderer.tsx';
 import { MarkedStyles } from 'react-native-marked/src/theme/types.ts';
 import ImageView from 'react-native-image-viewing';
-import { PressMode } from '../../types/Chat.ts';
+import { ChatStatus, PressMode } from '../../types/Chat.ts';
 import { trigger } from '../util/HapticUtils.ts';
 import { HapticFeedbackTypes } from 'react-native-haptic-feedback/src/types.ts';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -33,8 +33,13 @@ import { isMac } from '../../App.tsx';
 import { CustomTokenizer } from './CustomTokenizer.ts';
 import { State, TapGestureHandler } from 'react-native-gesture-handler';
 
-const CustomMessageComponent: React.FC<MessageProps<IMessage>> = ({
+interface CustomMessageProps extends MessageProps<IMessage> {
+  chatStatus: ChatStatus;
+}
+
+const CustomMessageComponent: React.FC<CustomMessageProps> = ({
   currentMessage,
+  chatStatus,
 }) => {
   const [visible, setIsVisible] = useState(false);
   const [imgUrl, setImgUrl] = useState('');
@@ -79,19 +84,25 @@ const CustomMessageComponent: React.FC<MessageProps<IMessage>> = ({
   const customTokenizer = useMemo(() => new CustomTokenizer(), []);
   const handleCopy = () => {
     if (isEdit) {
-      setIsEdit(false);
+      setIsEditValue(false);
       return;
     }
     Clipboard.setString(currentMessage?.text ?? '');
     setCopied(true);
   };
 
   const handleEdit = () => {
-    setIsEdit(!isEdit);
+    setIsEditValue(!isEdit);
   };
 
   const onDoubleTap = () => {
-    setIsEdit(true);
+    setIsEditValue(true);
+  };
+
+  const setIsEditValue = (value: boolean) => {
+    if (chatStatus !== ChatStatus.Running) {
+      setIsEdit(value);
+    }
   };
 
   useEffect(() => {

diff --git a/react-native/src/chat/util/FileUtils.ts b/react-native/src/chat/util/FileUtils.ts
@@ -24,11 +24,12 @@ export const saveFile = async (sourceUrl: string, fileName: string) => {
     if (!filesDirExists) {
       await RNFS.mkdir(filesDir);
     }
-    const destinationPath = await getUniqueFileName(filesDir, fileName);
+    const uniqueFileName = await getUniqueFileName(filesDir, fileName);
+    const destinationPath = `${filesDir}/${uniqueFileName}`;
     await RNFS.copyFile(sourceUrl, destinationPath);
     return Platform.OS === 'android'
       ? `file://${destinationPath}`
-      : destinationPath;
+      : `files/${uniqueFileName}`;
   } catch (error) {
     console.warn('Error saving file:', error);
   }
@@ -37,7 +38,8 @@ export const saveFile = async (sourceUrl: string, fileName: string) => {
 
 export const getFileBytes = async (fileUrl: string) => {
   try {
-    return await RNFS.readFile(fileUrl, 'base64');
+    const fullFileUrl = getFullFileUrl(fileUrl);
+    return await RNFS.readFile(fullFileUrl, 'base64');
   } catch (error) {
     console.warn('Error reading image file:', fileUrl, error);
     throw error;
@@ -61,7 +63,21 @@ const getUniqueFileName = async (
     finalFileName = `${nameWithoutExt}(${counter})${extension}`;
     finalPath = `${basePath}/${finalFileName}`;
   }
-  return finalPath;
+  return finalFileName;
+};
+
+export const getFullFileUrl = (url: string) => {
+  if (Platform.OS === 'android') {
+    return url;
+  } else if (url.startsWith('files/')) {
+    return `${RNFS.DocumentDirectoryPath}/${url}`;
+  } else {
+    return (
+      RNFS.DocumentDirectoryPath +
+      '/files' +
+      url.substring(url.lastIndexOf('/'))
+    );
+  }
 };
 
 const MAX_IMAGES = 20;