@developer_tribe/react-native-comnyx 0.13.13 → 0.15.0

package/lib/module/components/MediaViewerModal.js

@@ -0,0 +1,160 @@
+"use strict";
+
+import { Modal, View, Image, TouchableOpacity, StatusBar, useWindowDimensions } from 'react-native';
+import { useState, useEffect } from 'react';
+import { AppText } from "./AppText.js";
+import { ScaledSheet } from "./ScaledSheet.js";
+import { activeOpacity } from "../constants/activeOpacity.js";
+import { openVideo } from "../NativeComnyxMediaPicker.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function MediaViewerModal({
+  visible,
+  onClose,
+  mediaUri,
+  mediaType,
+  thumbnailUri
+}) {
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  const [imageError, setImageError] = useState(false);
+  const isVideo = mediaType === 'video';
+  const displayUri = isVideo ? thumbnailUri || undefined : mediaUri;
+  // Reset error state when URI or visibility changes
+  useEffect(() => {
+    if (visible) {
+      setImageError(false);
+    }
+  }, [visible, mediaUri]);
+  const handlePlayVideo = () => {
+    if (mediaUri) {
+      openVideo(mediaUri).catch(err => console.warn('[Comnyx] Could not open video:', err));
+    }
+  };
+  return /*#__PURE__*/_jsxs(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onClose,
+    statusBarTranslucent: true,
+    children: [/*#__PURE__*/_jsx(StatusBar, {
+      backgroundColor: "rgba(0,0,0,0.95)",
+      barStyle: "light-content"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.overlay,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.closeButton,
+        onPress: onClose,
+        activeOpacity: activeOpacity,
+        children: /*#__PURE__*/_jsx(AppText, {
+          style: styles.closeIcon,
+          children: "\u2715"
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: [styles.mediaContainer, {
+          width,
+          height: height * 0.7
+        }],
+        children: [displayUri && !imageError ? /*#__PURE__*/_jsx(Image, {
+          source: {
+            uri: displayUri
+          },
+          style: {
+            width,
+            height: height * 0.9
+          },
+          resizeMode: "contain",
+          resizeMethod: "resize",
+          onError: () => setImageError(true)
+        }) : /*#__PURE__*/_jsx(View, {
+          style: [styles.placeholder, {
+            width: width * 0.6,
+            height: width * 0.6
+          }],
+          children: /*#__PURE__*/_jsx(AppText, {
+            style: styles.placeholderIcon,
+            children: isVideo ? '🎬' : '🖼️'
+          })
+        }), isVideo && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.playOverlay,
+          onPress: handlePlayVideo,
+          activeOpacity: activeOpacity,
+          children: /*#__PURE__*/_jsx(View, {
+            style: styles.playButton,
+            children: /*#__PURE__*/_jsx(AppText, {
+              style: styles.playIcon,
+              children: "\u25B6"
+            })
+          })
+        })]
+      })]
+    })]
+  });
+}
+const styles = ScaledSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.95)',
+    justifyContent: 'center'
+  },
+  closeButton: {
+    ...{
+      position: 'absolute',
+      top: '50@vs',
+      left: '20@s',
+      zIndex: 10,
+      width: '40@vs',
+      height: '40@vs',
+      borderRadius: 20,
+      backgroundColor: 'rgba(255,255,255,0.2)',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  },
+  closeIcon: {
+    color: '#FFFFFF',
+    fontSize: '20@vs',
+    fontWeight: '300'
+  },
+  mediaContainer: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  placeholder: {
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  placeholderIcon: {
+    fontSize: '60@vs'
+  },
+  playOverlay: {
+    ...{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  },
+  playButton: {
+    width: '70@vs',
+    height: '70@vs',
+    borderRadius: '35@vs',
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: 'rgba(255,255,255,0.8)'
+  },
+  playIcon: {
+    fontSize: '30@vs',
+    color: '#FFFFFF',
+    marginLeft: '4@s'
+  }
+});
+//# sourceMappingURL=MediaViewerModal.js.map

package/lib/module/components/MediaViewerModal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Modal","View","Image","TouchableOpacity","StatusBar","useWindowDimensions","useState","useEffect","AppText","ScaledSheet","activeOpacity","openVideo","jsx","_jsx","jsxs","_jsxs","MediaViewerModal","visible","onClose","mediaUri","mediaType","thumbnailUri","width","height","imageError","setImageError","isVideo","displayUri","undefined","handlePlayVideo","catch","err","console","warn","transparent","animationType","onRequestClose","statusBarTranslucent","children","backgroundColor","barStyle","style","styles","overlay","closeButton","onPress","closeIcon","mediaContainer","source","uri","resizeMode","resizeMethod","onError","placeholder","placeholderIcon","playOverlay","playButton","playIcon","create","flex","justifyContent","position","top","left","zIndex","borderRadius","alignItems","color","fontSize","fontWeight","right","bottom","borderWidth","borderColor","marginLeft"],"sourceRoot":"../../../src","sources":["components/MediaViewerModal.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/MessageInput.js

@@ -1,118 +1,325 @@
 "use strict";
 
-import { TextInput, View, Image, TouchableOpacity } from 'react-native';
-import { useState } from 'react';
+import { TextInput, View, Image, TouchableOpacity, ScrollView } from 'react-native';
+import { useState, useCallback } from 'react';
 import { sendCustomerMessage } from "../api/index.js";
+import { getUploadUrl, uploadFileToS3, sendMediaMessage } from "../api/index.js";
+import { deleteTempFile } from "../NativeComnyxMediaPicker.js";
 import { useThemeColors } from "../hooks/useThemeColors.js";
 import { ScaledSheet } from "./ScaledSheet.js";
 import { useLocalize } from "../hooks/useLocalize.js";
 import { activeOpacity } from "../constants/activeOpacity.js";
 import { useIsRtl } from "../hooks/isRtl.js";
 import { useAppStore } from "../store/store.js";
+import { MediaPickerButton } from "./MediaPickerButton.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sendDark = require('../assets/arrow-right.png');
+const circleXIcon = require('../assets/x-circle.png');
 export function MessageInput({
   scrollToBottom
 }) {
   const [value, setValue] = useState('');
+  const [pendingMedia, setPendingMedia] = useState([]);
+  const [isSending, setIsSending] = useState(false);
   const customer = useAppStore(s => s.customer);
   const themeColors = useThemeColors();
   const localize = useLocalize();
   const isRtl = useIsRtl();
-  const sendMessage = () => {
-    if (value.trim()) {
-      const date = new Date();
-      useAppStore.getState().setData(data => [{
-        id: null,
-        approved: false,
-        content: value,
-        created_at: date,
-        customer: {
-          name: customer.name,
-          profile_photo_url: null
+  const sendTextOnlyMessage = useCallback(() => {
+    if (!value.trim()) return;
+    const date = new Date();
+    const localId = `local-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    useAppStore.getState().setData(data => [{
+      id: null,
+      local_id: localId,
+      approved: false,
+      content: value,
+      created_at: date,
+      customer: {
+        name: customer.name,
+        profile_photo_url: null
+      }
+    }, ...(data ?? [])]);
+    sendCustomerMessage(customer.external_id, value, {
+      fake: useAppStore.getState().fake
+    }).then(res => {
+      const data = useAppStore.getState().data;
+      if (data) {
+        const itemIndex = data.findIndex(item => item.local_id === localId);
+        if (itemIndex === -1) {
+          //TODO:??
+        } else {
+          const alteredData = [...data];
+          alteredData[itemIndex] = {
+            id: res.message.id,
+            content: res.message.content,
+            customer: res.message.customer ?? alteredData[itemIndex]?.customer,
+            created_at: new Date(res.message.created_at),
+            approved: true
+          };
+          useAppStore.setState({
+            data: alteredData
+          });
+          scrollToBottom(false);
         }
-      }, ...(data ?? [])]);
-      sendCustomerMessage(customer.external_id, value, {
-        fake: useAppStore.getState().fake
-      }).then(res => {
-        const data = useAppStore.getState().data;
-        if (data) {
-          const itemIndex = data.findIndex(item => item.id === null && new Date(item.created_at).getTime() === date.getTime());
-          if (itemIndex === -1) {
-            //TODO:??
-          } else {
-            const alteredData = [...data];
-            alteredData[itemIndex] = {
-              id: res.message.id,
-              content: res.message.content,
-              customer: res.message.customer ?? alteredData[itemIndex]?.customer,
-              created_at: new Date(res.message.created_at),
-              approved: true
-            };
-            useAppStore.setState({
-              data: alteredData
-            });
-            scrollToBottom(false);
-          }
+      } else {
+        //TODO: ??
+      }
+    }).catch(() => {
+      const data = useAppStore.getState().data;
+      if (data) {
+        const itemIndex = data.findIndex(item => item.local_id === localId);
+        if (itemIndex === -1) {
+          //TODO:??
         } else {
-          //TODO: ??
+          const alteredData = [...data];
+          alteredData[itemIndex] = {
+            ...alteredData[itemIndex],
+            id: alteredData[itemIndex]?.id ?? null,
+            content: alteredData[itemIndex]?.content ?? '',
+            created_at: alteredData[itemIndex]?.created_at ?? new Date(),
+            approved: alteredData[itemIndex]?.approved ?? false,
+            customer: alteredData[itemIndex]?.customer ?? null,
+            error: true
+          };
+          useAppStore.setState({
+            data: alteredData
+          });
+          scrollToBottom(false);
         }
-      }).catch(() => {
-        const data = useAppStore.getState().data;
-        if (data) {
-          const itemIndex = data.findIndex(item => item.id === null && new Date(item.created_at).getTime() === date.getTime());
-          if (itemIndex === -1) {
-            //TODO:??
-          } else {
-            const alteredData = [...data];
-            alteredData[itemIndex] = {
-              ...alteredData[itemIndex],
-              id: alteredData[itemIndex]?.id ?? null,
-              content: alteredData[itemIndex]?.content ?? '',
-              created_at: alteredData[itemIndex]?.created_at ?? new Date(),
-              approved: alteredData[itemIndex]?.approved ?? false,
-              customer: alteredData[itemIndex]?.customer ?? null,
-              error: true
+      } else {
+        //TODO: ??
+      }
+    });
+    setValue('');
+  }, [value, customer, scrollToBottom]);
+  const uploadSingleMedia = useCallback(async (asset, isFake, onProgress) => {
+    const presignResponse = await getUploadUrl(asset.fileName, asset.mimeType, {
+      fake: isFake
+    });
+    const uploadUrl = presignResponse.data.url;
+    const filePath = presignResponse.data.path;
+    await uploadFileToS3(uploadUrl, asset.uri, asset.mimeType, onProgress, {
+      fake: isFake
+    });
+    return isFake ? asset.uri : filePath;
+  }, []);
+  const sendMediaMessages = useCallback(async (assets, content) => {
+    const isFake = useAppStore.getState().fake;
+    const date = new Date();
+    const placeholderMediaFiles = assets.map(asset => ({
+      url: '',
+      type: asset.type,
+      local_uri: asset.uri,
+      thumbnail_uri: asset.thumbnailUri
+    }));
+    const localId = `local-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    useAppStore.getState().setData(data => [{
+      id: null,
+      local_id: localId,
+      approved: false,
+      content: content,
+      created_at: date,
+      customer: {
+        name: customer.name,
+        profile_photo_url: null
+      },
+      media_files: placeholderMediaFiles,
+      media_type: assets[0].type,
+      is_uploading: true,
+      upload_progress: 0
+    }, ...(data ?? [])]);
+    scrollToBottom(false);
+    try {
+      const fileProgresses = new Array(assets.length).fill(0);
+      let lastProgressUpdate = 0;
+      const updateOverallProgress = () => {
+        const now = Date.now();
+        if (now - lastProgressUpdate < 250) return;
+        lastProgressUpdate = now;
+        const sum = fileProgresses.reduce((a, b) => a + b, 0);
+        const overall = Math.min(95, Math.round(sum / assets.length));
+        const currentData = useAppStore.getState().data;
+        if (currentData) {
+          const idx = currentData.findIndex(item => item.local_id === localId);
+          if (idx !== -1) {
+            const updated = [...currentData];
+            updated[idx] = {
+              ...updated[idx],
+              upload_progress: overall
             };
             useAppStore.setState({
-              data: alteredData
+              data: updated
             });
-            scrollToBottom(false);
           }
-        } else {
-          //TODO: ??
         }
+      };
+      const uploadedPaths = [];
+      for (let i = 0; i < assets.length; i++) {
+        const path = await uploadSingleMedia(assets[i], isFake, percentage => {
+          fileProgresses[i] = percentage;
+          updateOverallProgress();
+        });
+        uploadedPaths.push(path);
+      }
+      const res = await sendMediaMessage(customer.external_id, uploadedPaths, assets[0].type, content, {
+        fake: isFake
       });
+      const currentData = useAppStore.getState().data;
+      if (currentData) {
+        const idx = currentData.findIndex(item => item.local_id === localId);
+        if (idx !== -1) {
+          const updated = [...currentData];
+          const finalMediaFiles = assets.map((asset, i) => ({
+            url: uploadedPaths[i],
+            type: asset.type,
+            local_uri: asset.uri,
+            thumbnail_uri: asset.thumbnailUri
+          }));
+          updated[idx] = {
+            id: res.message.id,
+            content: res.message.content,
+            customer: res.message.customer ?? updated[idx]?.customer ?? null,
+            created_at: new Date(res.message.created_at),
+            approved: true,
+            media_files: finalMediaFiles,
+            media_type: assets[0].type,
+            is_uploading: false,
+            upload_progress: 100
+          };
+          useAppStore.setState({
+            data: updated
+          });
+          scrollToBottom(false);
+        }
+      }
+
+      // Temp files are NOT deleted here — they are still needed for display
+      // until the backend data refresh provides full S3 URLs.
+      // The OS cleans up temp directory files automatically.
+    } catch (error) {
+      // Handle upload error — temp files are preserved for retry
+      const currentData = useAppStore.getState().data;
+      if (currentData) {
+        const idx = currentData.findIndex(item => item.local_id === localId);
+        if (idx !== -1) {
+          const updated = [...currentData];
+          updated[idx] = {
+            ...updated[idx],
+            is_uploading: false,
+            error: true
+          };
+          useAppStore.setState({
+            data: updated
+          });
+          scrollToBottom(false);
+        }
+      }
+      console.error('[Comnyx] Media upload failed:', error);
+    }
+  }, [customer, scrollToBottom, uploadSingleMedia]);
+  const handleMediaSelected = useCallback(assets => {
+    setPendingMedia(prev => [...prev, ...assets]);
+  }, []);
+  const removePendingMedia = useCallback(index => {
+    setPendingMedia(prev => {
+      const removed = prev[index];
+      if (removed) {
+        deleteTempFile(removed.uri).catch(e => console.warn('[Comnyx] Failed to delete temp file:', e));
+        if (removed.thumbnailUri) {
+          deleteTempFile(removed.thumbnailUri).catch(e => console.warn('[Comnyx] Failed to delete temp thumbnail:', e));
+        }
+      }
+      return prev.filter((_, i) => i !== index);
+    });
+  }, []);
+  const handleSend = useCallback(async () => {
+    if (isSending) return;
+    if (pendingMedia.length > 0) {
+      setIsSending(true);
+      const content = value.trim();
+      const assets = [...pendingMedia];
+      setPendingMedia([]);
       setValue('');
+      await sendMediaMessages(assets, content);
+      setIsSending(false);
+    } else if (value.trim()) {
+      sendTextOnlyMessage();
     }
-  };
+  }, [isSending, pendingMedia, value, sendMediaMessages, sendTextOnlyMessage]);
+  const hasPendingMedia = pendingMedia.length > 0;
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, {
       backgroundColor: themeColors.background
     }],
-    children: [/*#__PURE__*/_jsx(TextInput, {
-      value: value,
-      onChangeText: newValue => setValue(newValue),
-      onSubmitEditing: sendMessage,
-      returnKeyType: "send",
-      multiline: true,
-      maxLength: 1000,
-      style: [styles.textInput, {
-        backgroundColor: themeColors.background,
-        color: themeColors.text,
+    children: [/*#__PURE__*/_jsx(MediaPickerButton, {
+      onMediaSelected: handleMediaSelected
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.inputWrapper, {
         borderColor: themeColors.silver
       }],
-      placeholder: localize('chat.messageInput.placeholder'),
-      placeholderTextColor: themeColors.text + '80'
+      children: [hasPendingMedia && /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        style: styles.previewScroll,
+        contentContainerStyle: styles.previewContent,
+        children: pendingMedia.map((asset, index) => /*#__PURE__*/_jsxs(View, {
+          style: styles.previewItem,
+          children: [/*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: asset.type === 'video' && asset.thumbnailUri ? asset.thumbnailUri : asset.uri
+            },
+            style: styles.previewThumbnail
+          }), asset.type === 'video' && /*#__PURE__*/_jsx(View, {
+            style: styles.playIconOverlay,
+            children: /*#__PURE__*/_jsx(View, {
+              style: styles.playIcon,
+              children: /*#__PURE__*/_jsx(View, {
+                style: styles.playTriangle
+              })
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.removeButton,
+            onPress: () => removePendingMedia(index),
+            activeOpacity: activeOpacity,
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 8,
+              right: 8
+            },
+            children: /*#__PURE__*/_jsx(Image, {
+              source: circleXIcon,
+              style: styles.removeIcon
+            })
+          })]
+        }, `${asset.uri}-${index}`))
+      }), /*#__PURE__*/_jsx(TextInput, {
+        value: value,
+        onChangeText: newValue => setValue(newValue),
+        onSubmitEditing: handleSend,
+        returnKeyType: "send",
+        multiline: true,
+        maxLength: 1000,
+        style: [styles.textInput, {
+          backgroundColor: themeColors.background,
+          color: themeColors.text
+        }],
+        placeholder: localize('chat.messageInput.placeholder'),
+        placeholderTextColor: themeColors.text + '80'
+      })]
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
       style: [styles.sendButton],
-      onPress: sendMessage,
+      onPress: handleSend,
       activeOpacity: activeOpacity,
+      disabled: isSending,
       children: /*#__PURE__*/_jsx(Image, {
         style: [styles.sendIcon, isRtl && {
           transform: [{
             rotate: '180deg'
           }]
+        }, isSending && {
+          opacity: 0.4
         }],
         source: sendDark
       })
@@ -124,16 +331,80 @@ const styles = ScaledSheet.create({
     flexDirection: 'row',
     paddingHorizontal: '10@s',
     paddingVertical: '10@vs',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     position: 'relative',
     zIndex: 1
   },
-  textInput: {
+  inputWrapper: {
     flex: 1,
     borderWidth: 1,
     borderRadius: '20@s',
-    paddingHorizontal: '15@s',
     marginRight: '10@s',
+    overflow: 'hidden'
+  },
+  previewScroll: {
+    maxHeight: '80@vs',
+    marginTop: '8@vs',
+    marginHorizontal: '10@s'
+  },
+  previewContent: {
+    flexDirection: 'row',
+    gap: '6@s'
+  },
+  previewItem: {
+    position: 'relative',
+    width: '60@vs',
+    height: '60@vs',
+    borderRadius: '8@s'
+  },
+  previewThumbnail: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '8@s'
+  },
+  playIconOverlay: {
+    ...{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  },
+  playIcon: {
+    width: '22@vs',
+    height: '22@vs',
+    borderRadius: '11@vs',
+    borderWidth: 1.5,
+    borderColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  playTriangle: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: '7@vs',
+    borderTopWidth: '5@vs',
+    borderBottomWidth: '5@vs',
+    borderLeftColor: '#fff',
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    marginLeft: '2@s'
+  },
+  removeButton: {
+    position: 'absolute',
+    top: '-1@vs',
+    right: 0,
+    zIndex: 1
+  },
+  removeIcon: {
+    width: '20@vs',
+    height: '20@vs'
+  },
+  textInput: {
+    paddingHorizontal: '15@s',
     fontSize: '16@vs',
     paddingVertical: '10@vs',
     minHeight: 40,
@@ -144,7 +415,8 @@ const styles = ScaledSheet.create({
     height: '40@vs',
     borderRadius: '20@vs',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    marginBottom: 0
   },
   sendIcon: {
     width: '40@vs',