@developer_tribe/react-native-comnyx 0.15.0 → 0.16.1

package/src/components/MediaMessageItem.tsx

@@ -1,4 +1,5 @@
-import { View, Image, TouchableOpacity } from 'react-native';
+import { View, Image, TouchableOpacity, ActivityIndicator } from 'react-native';
+import FastImage from '@d11/react-native-fast-image';
 import { useState, useEffect } from 'react';
 import type { AppConversationMessage } from '../types/Conversation';
 import { useThemeColors } from '../hooks/useThemeColors';
@@ -30,6 +31,7 @@ function MediaThumbnail({
   const [generatedThumb, setGeneratedThumb] = useState<string | null>(null);
   const displayUri = file.local_uri || file.url;
   const isVideo = file.type === 'video';
+  const themeColors = useThemeColors();
 
   useEffect(() => {
     if (isVideo && !file.thumbnail_uri && !isUploading && displayUri) {
@@ -44,11 +46,8 @@ function MediaThumbnail({
   }, [isVideo, file.thumbnail_uri, isUploading, displayUri]);
 
   const effectiveThumb = file.thumbnail_uri || generatedThumb;
-  const thumbSource = isVideo
-    ? effectiveThumb
-      ? { uri: effectiveThumb }
-      : undefined
-    : { uri: displayUri };
+  const thumbUri = isVideo ? effectiveThumb : displayUri;
+  const isRemote = !!thumbUri && /^https?:\/\//i.test(thumbUri);
 
   const handlePress = () => {
     if (isUploading) return;
@@ -62,8 +61,14 @@ function MediaThumbnail({
   const wrapperStyle = single ? styles.singleMediaWrapper : styles.gridItem;
   const imageStyle = single ? styles.singleMediaImage : styles.gridImage;
   const placeholderStyle = single
-    ? [styles.singleMediaImage, { backgroundColor: '#1a1a2e' }]
-    : [styles.videoPlaceholder, { backgroundColor: '#1a1a2e' }];
+    ? [
+        styles.singleMediaImage,
+        { backgroundColor: themeColors.videoPlaceholder },
+      ]
+    : [
+        styles.videoPlaceholder,
+        { backgroundColor: themeColors.videoPlaceholder },
+      ];
 
   return (
     <TouchableOpacity
@@ -72,8 +77,23 @@ function MediaThumbnail({
       activeOpacity={activeOpacity}
       disabled={isUploading}
     >
-      {thumbSource ? (
-        <Image source={thumbSource} style={imageStyle} resizeMode="cover" />
+      {thumbUri ? (
+        isRemote ? (
+          <FastImage
+            source={{
+              uri: thumbUri,
+              cache: FastImage.cacheControl.immutable,
+            }}
+            style={imageStyle}
+            resizeMode={FastImage.resizeMode.cover}
+          />
+        ) : (
+          <Image
+            source={{ uri: thumbUri }}
+            style={imageStyle}
+            resizeMode="cover"
+          />
+        )
       ) : (
         <View style={placeholderStyle} />
       )}
@@ -82,6 +102,11 @@ function MediaThumbnail({
           <AppText style={styles.playIcon}>▶</AppText>
         </View>
       )}
+      {isUploading && (
+        <View style={styles.uploadOverlay}>
+          <ActivityIndicator size="small" color="#FFFFFF" />
+        </View>
+      )}
     </TouchableOpacity>
   );
 }
@@ -234,7 +259,7 @@ export function MediaMessageItem({
                   {
                     regex:
                       /https?:\/\/(?:[-\w.])+(?::[0-9]+)?(?:\/(?:[\w/_.])*(?:\?(?:[\w&=%.])*)?(?:#(?:[\w.])*)?)?/g,
-                    color: '#0066CC',
+                    color: themeColors.link,
                     navigate: (url) => {
                       if (url) {
                         Linking.openURL(url);
@@ -329,6 +354,18 @@ const styles = ScaledSheet.create({
       alignItems: 'center',
     } as any),
   },
+  uploadOverlay: {
+    ...({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0,0,0,0.35)',
+    } as any),
+  },
   playIcon: {
     fontSize: '20@vs',
     color: '#E0E0E0',

package/src/components/MediaViewerModal.tsx

@@ -6,6 +6,7 @@ import {
   StatusBar,
   useWindowDimensions,
 } from 'react-native';
+import FastImage from '@d11/react-native-fast-image';
 import { useState, useEffect } from 'react';
 import { AppText } from './AppText';
 import { ScaledSheet } from './ScaledSheet';
@@ -61,15 +62,27 @@ export function MediaViewerModal({
         >
           <AppText style={styles.closeIcon}>✕</AppText>
         </TouchableOpacity>
-        <View style={[styles.mediaContainer, { width, height: height * 0.7 }]}>
+        <View style={[styles.mediaContainer, { width, height }]}>
           {displayUri && !imageError ? (
-            <Image
-              source={{ uri: displayUri }}
-              style={{ width, height: height * 0.9 }}
-              resizeMode="contain"
-              resizeMethod="resize"
-              onError={() => setImageError(true)}
-            />
+            /^https?:\/\//i.test(displayUri) ? (
+              <FastImage
+                source={{
+                  uri: displayUri,
+                  cache: FastImage.cacheControl.immutable,
+                }}
+                style={{ width, height }}
+                resizeMode={FastImage.resizeMode.contain}
+                onError={() => setImageError(true)}
+              />
+            ) : (
+              <Image
+                source={{ uri: displayUri }}
+                style={{ width, height }}
+                resizeMode="contain"
+                resizeMethod="resize"
+                onError={() => setImageError(true)}
+              />
+            )
           ) : (
             <View
               style={[

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,10 @@ import { useIsRtl } from '../hooks/isRtl';
 import { useAppStore } from '../store/store';
 import { MediaPickerButton } from './MediaPickerButton';
 import type { MediaAsset } from '../types/MediaTypes';
+import {
+  useSupportConfig,
+  reportSupportError,
+} from '../support/SupportConfigContext';
 
 const sendDark = require('../assets/arrow-right.png');
 const circleXIcon = require('../assets/x-circle.png');
@@ -34,6 +38,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 +71,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);
@@ -81,7 +103,7 @@ export function MessageInput({
           //TODO: ??
         }
       })
-      .catch(() => {
+      .catch((err) => {
         const data = useAppStore.getState().data;
         if (data) {
           const itemIndex = data.findIndex((item) => item.local_id === localId);
@@ -106,6 +128,11 @@ export function MessageInput({
         } else {
           //TODO: ??
         }
+        reportSupportError(err, {
+          section: 'send',
+          recoverable: true,
+          extras: { contentLength: value.length },
+        });
       });
     setValue('');
   }, [value, customer, scrollToBottom]);
@@ -114,6 +141,7 @@ export function MessageInput({
     async (
       asset: MediaAsset,
       isFake: boolean,
+      signal: AbortSignal,
       onProgress?: (percentage: number) => void
     ): Promise<string> => {
       const presignResponse = await getUploadUrl(
@@ -124,9 +152,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 +199,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 +235,7 @@ export function MessageInput({
           const path = await uploadSingleMedia(
             assets[i]!,
             isFake,
+            controller.signal,
             (percentage) => {
               fileProgresses[i] = percentage;
               updateOverallProgress();
@@ -211,7 +249,8 @@ export function MessageInput({
           uploadedPaths,
           assets[0]!.type,
           content,
-          { fake: isFake }
+          { fake: isFake },
+          controller.signal
         );
 
         const currentData = useAppStore.getState().data;
@@ -265,6 +304,19 @@ export function MessageInput({
           }
         }
         console.error('[Comnyx] Media upload failed:', error);
+        reportSupportError(error, {
+          section: 'upload',
+          recoverable: true,
+          extras: {
+            assetCount: assets.length,
+            mediaTypes: assets.map((a) => a.type),
+            aborted: controller.signal.aborted,
+          },
+        });
+      } finally {
+        if (uploadAbortRef.current === controller) {
+          uploadAbortRef.current = null;
+        }
       }
     },
     [customer, scrollToBottom, uploadSingleMedia]
@@ -294,18 +346,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 +414,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,10 +464,14 @@ export function MessageInput({
         onPress={handleSend}
         activeOpacity={activeOpacity}
         disabled={isSending}
+        accessibilityRole="button"
+        accessibilityLabel={localize('chat.messageInput.placeholder')}
+        accessibilityState={{ disabled: isSending, busy: isSending }}
       >
         <Image
           style={[
             styles.sendIcon,
+            { tintColor: themeColors.text },
             isRtl && { transform: [{ rotate: '180deg' }] },
             isSending && { opacity: 0.4 },
           ]}
@@ -441,7 +534,6 @@ const styles = ScaledSheet.create({
     height: '22@vs',
     borderRadius: '11@vs',
     borderWidth: 1.5,
-    borderColor: '#fff',
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -451,7 +543,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,7 +182,7 @@ function TextMessageItem({
                 {
                   regex:
                     /https?:\/\/(?:[-\w.])+(?::[0-9]+)?(?:\/(?:[\w/_.])*(?:\?(?:[\w&=%.])*)?(?:#(?:[\w.])*)?)?/g,
-                  color: '#0066CC',
+                  color: themeColors.link,
                   navigate: (url) => {
                     if (url) {
                       Linking.openURL(url);

package/src/hooks/usePolling.ts

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { getNewCustomerConversation } from '../api';
 import { useAppStore } from '../store/store';
+import { reportSupportError } from '../support/SupportConfigContext';
 
 const NEW_MESSAGES_CHECK_INTERVAL = 10000;
 
@@ -13,12 +14,19 @@ export function usePolling() {
   const lastMessage = data ? data[data.length - 1] : null;
   useEffect(() => {
     const created_at = lastMessage?.created_at;
-    let interval: ReturnType<typeof setInterval> | null = null;
-    if (customer && created_at) {
-      interval = setInterval(() => {
-        getNewCustomerConversation(customer?.external_id, created_at, {
-          fake: useAppStore.getState().fake,
-        }).then((newData) => {
+    if (!customer || !created_at) {
+      return undefined;
+    }
+    const controller = new AbortController();
+    const interval = setInterval(() => {
+      getNewCustomerConversation(
+        customer.external_id,
+        created_at,
+        { fake: useAppStore.getState().fake },
+        controller.signal
+      )
+        .then((newData) => {
+          if (controller.signal.aborted) return;
           setData((prevData) => {
             const newMessages = newData.page.data;
             const existingIds = new Set(prevData?.map((msg) => msg.id));
@@ -34,13 +42,20 @@ export function usePolling() {
               ...(prevData ?? []),
             ];
           });
+        })
+        .catch((err) => {
+          if (controller.signal.aborted) return;
+          console.warn('[Comnyx] Polling failed:', err);
+          reportSupportError(err, {
+            section: 'polling',
+            recoverable: true,
+          });
         });
-      }, NEW_MESSAGES_CHECK_INTERVAL);
-    }
+    }, NEW_MESSAGES_CHECK_INTERVAL);
+
     return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
+      clearInterval(interval);
+      controller.abort();
     };
   }, [customer, lastMessage?.created_at, setData]);
 }

package/src/hooks/useThemeColors.ts

@@ -1,5 +1,14 @@
-import { lightTheme, type ThemeColors } from '../types/Theme';
+import { useMemo } from 'react';
+import { darkTheme, lightTheme, type ThemeColors } from '../types/Theme';
+import { useAppStore } from '../store/store';
 
 export function useThemeColors(): ThemeColors {
-  return lightTheme;
+  const theme = useAppStore((s) => s.theme);
+  const override = useAppStore((s) => s.themeOverride);
+
+  return useMemo(() => {
+    const base = theme === 'dark' ? darkTheme : lightTheme;
+    const patch = override?.[theme];
+    return patch ? { ...base, ...patch } : base;
+  }, [theme, override]);
 }

package/src/index.ts

@@ -5,6 +5,22 @@ export { ComnyxSupport } from './support';
 export { ComnyxNotifications } from './notifications';
 //types
 export { NotificationPermissionStatus } from './NativeComnyx';
+export type {
+  ThemeColors,
+  ThemeColorsOverride,
+  ThemeOverrideConfig,
+} from './types/Theme';
+export type {
+  SupportConfig,
+  SupportHeaderRenderProps,
+  SupportErrorRenderProps,
+  SupportMessageRenderProps,
+  SupportSendPayload,
+  SupportErrorSection,
+  SupportErrorContext,
+  SupportErrorReporter,
+} from './support';
+export { ComnyxErrorBoundary } from './support';
 
 //deprecated
 export { registerOneSignalForComnyx } from './register/collectData';

package/src/notifications/initializeNotifications.ts

@@ -81,10 +81,11 @@ function changePermissionStatus(status: NotificationPermissionStatus) {
 
 async function initializeNativeNotifications(options: InitializeOptions) {
   const state = useAppStore.getState();
-  //TODO: better event listener. Event listener doesn't work if its set after initialize
+  // Listeners are attached BEFORE nativeComnyx.initialize so that a
+  // synchronous TOKEN_INIT emission (e.g. cached APN token on iOS) is not
+  // lost between native resolve and JS subscription.
   globalSubscriptions.subscriptionsForNotification = [
     ComnyxNotifications.addEventListener('TOKEN_INIT', (data) => {
-      console.log('TOKEN_INIT', data);
       useAppStore.getState().setToken(data.token);
       if (Platform.OS === 'ios') {
         accumulator.add({
@@ -168,7 +169,11 @@ export async function initializeNotifications(
   globalSubscriptions.subscriptionsForOptIn = AppState.addEventListener(
     'change',
     async (nextAppState) => {
-      if (nextAppState === 'active') {
+      // AppState callbacks are fire-and-forget — any throw here becomes an
+      // unhandled rejection that can surface as a red-screen in the host app.
+      // Keep the whole body inside a guard.
+      try {
+        if (nextAppState !== 'active') return;
         const permissionGivenInForeground =
           await ComnyxNotifications.checkOptIn();
         changePermissionStatus(permissionGivenInForeground);
@@ -179,24 +184,21 @@ export async function initializeNotifications(
           if (!state.notificationInitialized) {
             await initializeNativeNotifications(options);
           }
-        } else {
-          if (params.showOptInOnForeground) {
-            ComnyxNotifications.optIn().then(async (permissionResultInner) => {
-              changePermissionStatus(permissionResultInner);
-              if (
-                permissionResultInner === NotificationPermissionStatus.GRANTED
-              ) {
-                await initializeNativeNotifications(options);
-              } else if (
-                permissionResultInner === NotificationPermissionStatus.BLOCKED
-              ) {
-                if (params.linkToSettings) {
-                  showAlertDialog();
-                }
-              }
-            });
-          }
+          return;
+        }
+        if (!params.showOptInOnForeground) return;
+        const permissionResultInner = await ComnyxNotifications.optIn();
+        changePermissionStatus(permissionResultInner);
+        if (permissionResultInner === NotificationPermissionStatus.GRANTED) {
+          await initializeNativeNotifications(options);
+        } else if (
+          permissionResultInner === NotificationPermissionStatus.BLOCKED &&
+          params.linkToSettings
+        ) {
+          showAlertDialog();
         }
+      } catch (err) {
+        console.warn('[Comnyx] AppState handler failed', err);
       }
     }
   );