@developer_tribe/react-native-comnyx 0.14.0 → 0.16.0

package/src/components/MediaViewerModal.tsx

@@ -6,7 +6,7 @@ import {
   StatusBar,
   useWindowDimensions,
 } from 'react-native';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { AppText } from './AppText';
 import { ScaledSheet } from './ScaledSheet';
 import { activeOpacity } from '../constants/activeOpacity';
@@ -29,6 +29,12 @@ export function MediaViewerModal({
   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) {
@@ -61,6 +67,7 @@ export function MediaViewerModal({
               source={{ uri: displayUri }}
               style={{ width, height: height * 0.9 }}
               resizeMode="contain"
+              resizeMethod="resize"
               onError={() => setImageError(true)}
             />
           ) : (

package/src/components/MessageInput.tsx

@@ -5,7 +5,7 @@ import {
   TouchableOpacity,
   ScrollView,
 } from 'react-native';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { sendCustomerMessage } from '../api';
 import { getUploadUrl, uploadFileToS3, sendMediaMessage } from '../api';
 import { deleteTempFile } from '../NativeComnyxMediaPicker';
@@ -17,6 +17,7 @@ import { useIsRtl } from '../hooks/isRtl';
 import { useAppStore } from '../store/store';
 import { MediaPickerButton } from './MediaPickerButton';
 import type { MediaAsset } from '../types/MediaTypes';
+import { useSupportConfig } from '../support/SupportConfigContext';
 
 const sendDark = require('../assets/arrow-right.png');
 const circleXIcon = require('../assets/x-circle.png');
@@ -34,6 +35,20 @@ export function MessageInput({
   const themeColors = useThemeColors();
   const localize = useLocalize();
   const isRtl = useIsRtl();
+  const { onBeforeSend } = useSupportConfig();
+
+  const uploadAbortRef = useRef<AbortController | null>(null);
+  const lifecycleAbortRef = useRef<AbortController | null>(null);
+  if (lifecycleAbortRef.current === null) {
+    lifecycleAbortRef.current = new AbortController();
+  }
+  useEffect(() => {
+    const controller = lifecycleAbortRef.current;
+    return () => {
+      uploadAbortRef.current?.abort();
+      controller?.abort();
+    };
+  }, []);
 
   const sendTextOnlyMessage = useCallback(() => {
     if (!value.trim()) return;
@@ -53,10 +68,14 @@ export function MessageInput({
       },
       ...(data ?? []),
     ]);
-    sendCustomerMessage(customer.external_id as string, value, {
-      fake: useAppStore.getState().fake,
-    })
+    sendCustomerMessage(
+      customer.external_id as string,
+      value,
+      { fake: useAppStore.getState().fake },
+      lifecycleAbortRef.current?.signal
+    )
       .then((res) => {
+        if (lifecycleAbortRef.current?.signal.aborted) return;
         const data = useAppStore.getState().data;
         if (data) {
           const itemIndex = data.findIndex((item) => item.local_id === localId);
@@ -114,6 +133,7 @@ export function MessageInput({
     async (
       asset: MediaAsset,
       isFake: boolean,
+      signal: AbortSignal,
       onProgress?: (percentage: number) => void
     ): Promise<string> => {
       const presignResponse = await getUploadUrl(
@@ -124,9 +144,14 @@ export function MessageInput({
       const uploadUrl = presignResponse.data.url;
       const filePath = presignResponse.data.path;
 
-      await uploadFileToS3(uploadUrl, asset.uri, asset.mimeType, onProgress, {
-        fake: isFake,
-      });
+      await uploadFileToS3(
+        uploadUrl,
+        asset.uri,
+        asset.mimeType,
+        onProgress,
+        { fake: isFake },
+        signal
+      );
 
       return isFake ? asset.uri : filePath;
     },
@@ -166,6 +191,10 @@ export function MessageInput({
       ]);
       scrollToBottom(false);
 
+      uploadAbortRef.current?.abort();
+      const controller = new AbortController();
+      uploadAbortRef.current = controller;
+
       try {
         const fileProgresses = new Array(assets.length).fill(0);
         let lastProgressUpdate = 0;
@@ -198,6 +227,7 @@ export function MessageInput({
           const path = await uploadSingleMedia(
             assets[i]!,
             isFake,
+            controller.signal,
             (percentage) => {
               fileProgresses[i] = percentage;
               updateOverallProgress();
@@ -211,7 +241,8 @@ export function MessageInput({
           uploadedPaths,
           assets[0]!.type,
           content,
-          { fake: isFake }
+          { fake: isFake },
+          controller.signal
         );
 
         const currentData = useAppStore.getState().data;
@@ -265,6 +296,10 @@ export function MessageInput({
           }
         }
         console.error('[Comnyx] Media upload failed:', error);
+      } finally {
+        if (uploadAbortRef.current === controller) {
+          uploadAbortRef.current = null;
+        }
       }
     },
     [customer, scrollToBottom, uploadSingleMedia]
@@ -294,18 +329,45 @@ export function MessageInput({
   const handleSend = useCallback(async () => {
     if (isSending) return;
 
-    if (pendingMedia.length > 0) {
-      setIsSending(true);
+    const hasMedia = pendingMedia.length > 0;
+    const hasText = !!value.trim();
+    if (!hasMedia && !hasText) return;
+
+    if (onBeforeSend) {
+      try {
+        setIsSending(true);
+        await onBeforeSend({
+          content: value.trim(),
+          mediaCount: pendingMedia.length,
+          mediaTypes: pendingMedia.map((m) => m.type),
+        });
+      } catch (err) {
+        console.warn('[Comnyx] onBeforeSend cancelled the message:', err);
+        setIsSending(false);
+        return;
+      }
+    }
+
+    if (hasMedia) {
+      if (!onBeforeSend) setIsSending(true);
       const content = value.trim();
       const assets = [...pendingMedia];
       setPendingMedia([]);
       setValue('');
       await sendMediaMessages(assets, content);
       setIsSending(false);
-    } else if (value.trim()) {
+    } else if (hasText) {
       sendTextOnlyMessage();
+      if (onBeforeSend) setIsSending(false);
     }
-  }, [isSending, pendingMedia, value, sendMediaMessages, sendTextOnlyMessage]);
+  }, [
+    isSending,
+    pendingMedia,
+    value,
+    sendMediaMessages,
+    sendTextOnlyMessage,
+    onBeforeSend,
+  ]);
 
   const hasPendingMedia = pendingMedia.length > 0;
 
@@ -335,8 +397,18 @@ export function MessageInput({
                 />
                 {asset.type === 'video' && (
                   <View style={styles.playIconOverlay}>
-                    <View style={styles.playIcon}>
-                      <View style={styles.playTriangle} />
+                    <View
+                      style={[
+                        styles.playIcon,
+                        { borderColor: themeColors.playIcon },
+                      ]}
+                    >
+                      <View
+                        style={[
+                          styles.playTriangle,
+                          { borderLeftColor: themeColors.playIcon },
+                        ]}
+                      />
                     </View>
                   </View>
                 )}
@@ -375,6 +447,9 @@ export function MessageInput({
         onPress={handleSend}
         activeOpacity={activeOpacity}
         disabled={isSending}
+        accessibilityRole="button"
+        accessibilityLabel={localize('chat.messageInput.placeholder')}
+        accessibilityState={{ disabled: isSending, busy: isSending }}
       >
         <Image
           style={[
@@ -441,7 +516,6 @@ const styles = ScaledSheet.create({
     height: '22@vs',
     borderRadius: '11@vs',
     borderWidth: 1.5,
-    borderColor: '#fff',
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -451,7 +525,6 @@ const styles = ScaledSheet.create({
     borderLeftWidth: '7@vs',
     borderTopWidth: '5@vs',
     borderBottomWidth: '5@vs',
-    borderLeftColor: '#fff',
     borderTopColor: 'transparent',
     borderBottomColor: 'transparent',
     marginLeft: '2@s',

package/src/components/MessageItem.tsx

@@ -1,4 +1,11 @@
-import { View, Image, TouchableOpacity, Linking } from 'react-native';
+import {
+  View,
+  Image,
+  TouchableOpacity,
+  Linking,
+  type NativeSyntheticEvent,
+  type TextLayoutEventData,
+} from 'react-native';
 import { AppText } from './AppText';
 import type { AppConversationMessage } from '../types/Conversation';
 import { useThemeColors } from '../hooks/useThemeColors';
@@ -11,14 +18,6 @@ import { MediaMessageItem } from './MediaMessageItem';
 const clockIcon = require('../assets/iconamoon_clock-fill.png');
 const infoIcon = require('../assets/info-circle.png');
 
-interface TextLine {
-  width: number;
-  height: number;
-  x: number;
-  y: number;
-  text: string;
-}
-
 interface MessageLayout {
   lines: number;
   lastLineWidth: number;
@@ -90,7 +89,7 @@ function TextMessageItem({
     }
   };
 
-  const onTextLayout = (event: any) => {
+  const onTextLayout = (event: NativeSyntheticEvent<TextLayoutEventData>) => {
     const { lines } = event.nativeEvent;
 
     const numLines = lines.length;
@@ -99,9 +98,9 @@ function TextMessageItem({
 
     if (numLines >= 1) {
       // Get the width of the last line
-      lastLineWidth = lines[numLines - 1].width;
+      lastLineWidth = lines[numLines - 1]!.width;
       // Use the widest line as the total width
-      totalWidth = Math.max(...lines.map((line: TextLine) => line.width));
+      totalWidth = Math.max(...lines.map((line) => line.width));
     }
 
     layoutRef.current = {
@@ -183,9 +182,8 @@ function TextMessageItem({
                 {
                   regex:
                     /https?:\/\/(?:[-\w.])+(?::[0-9]+)?(?:\/(?:[\w/_.])*(?:\?(?:[\w&=%.])*)?(?:#(?:[\w.])*)?)?/g,
-                  color: '#0066CC',
+                  color: themeColors.link,
                   navigate: (url) => {
-                    console.log('url', url);
                     if (url) {
                       Linking.openURL(url);
                     }