@developer_tribe/react-native-comnyx 0.15.0 → 0.16.0

package/src/components/ChatList.tsx

@@ -31,6 +31,7 @@ import { ScaledSheet } from './ScaledSheet';
 import { formatDate, getDateKey } from '../utils/formatDate';
 import { activeOpacity } from '../constants/activeOpacity';
 import { useAppStore } from '../store/store';
+import { useSupportConfig } from '../support/SupportConfigContext';
 
 const headphonesIcon = require('../assets/headphones-01.png');
 const closeIcon = require('../assets/x-close.png');
@@ -110,6 +111,7 @@ function CustomToast() {
   const { toastMessage } = useAppStore((s) => ({
     toastMessage: s.toastMessage,
   }));
+  const themeColors = useThemeColors();
 
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const translateY = useRef(new Animated.Value(50)).current;
@@ -157,8 +159,16 @@ function CustomToast() {
         },
       ]}
     >
-      <View style={styles.toastContent}>
-        <AppText style={styles.toastText} localization={toastMessage} />
+      <View
+        style={[
+          styles.toastContent,
+          { backgroundColor: themeColors.toastBackground },
+        ]}
+      >
+        <AppText
+          style={[styles.toastText, { color: themeColors.toastText }]}
+          localization={toastMessage}
+        />
       </View>
     </Animated.View>
   );
@@ -174,6 +184,12 @@ export function ChatList({
   const themeColors = useThemeColors();
   const { height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
+  const {
+    renderHeader: renderHeaderOverride,
+    renderEmptyState: renderEmptyStateOverride,
+    renderErrorState: renderErrorStateOverride,
+    renderMessage: renderMessageOverride,
+  } = useSupportConfig();
   const MESSAGE_MIN_HEIGHT = 60;
   const FLATLIST_PADDING = 20;
   const MESSAGES_PER_PAGE = Math.ceil(
@@ -184,6 +200,17 @@ export function ChatList({
     setLoading((l) => l && initLoading);
   }, [initLoading]);
 
+  const lifecycleAbortRef = useRef<AbortController | null>(null);
+  if (lifecycleAbortRef.current === null) {
+    lifecycleAbortRef.current = new AbortController();
+  }
+  useEffect(() => {
+    const controller = lifecycleAbortRef.current;
+    return () => {
+      controller?.abort();
+    };
+  }, []);
+
   const { data, setData, customer, language } = useAppStore((s) => ({
     data: s.data,
     setData: s.setData,
@@ -192,7 +219,9 @@ export function ChatList({
   }));
   const ref = useRef<SectionList<AppConversationMessage>>(null);
   const [page, setPage] = useState(1);
-  const nextPageStatus = useRef<'fail' | 'loading' | 'empty'>();
+  const nextPageStatus = useRef<'fail' | 'loading' | 'empty' | undefined>(
+    undefined
+  );
   const [nexPageFailed, setNexPageFailed] = useState(false);
   const [initFailed, setInitFailed] = useState(false);
   const [showScrollDownButton, setShowScrollDownButton] = useState(false);
@@ -398,7 +427,8 @@ export function ChatList({
         {
           fake: useAppStore.getState().fake,
           per_page: MESSAGES_PER_PAGE,
-        }
+        },
+        lifecycleAbortRef.current?.signal
       )
         .then((newData) => {
           listChangedRef.current = true;
@@ -445,7 +475,7 @@ export function ChatList({
 
   const renderItem = useCallback(
     ({ item }: { item: AppConversationMessage }) => {
-      return (
+      const defaultNode = (
         <MessageItem
           item={item}
           onShowPopup={() => {
@@ -454,8 +484,12 @@ export function ChatList({
           }}
         />
       );
+      if (renderMessageOverride) {
+        return <>{renderMessageOverride({ message: item, defaultNode })}</>;
+      }
+      return defaultNode;
     },
-    []
+    [renderMessageOverride]
   );
 
   const renderSectionFooter = useCallback(
@@ -515,10 +549,16 @@ export function ChatList({
 
   useEffect(() => {
     if (customer?.external_id && !initFailed) {
-      getCustomerConversation(customer?.external_id, new Date(), 1, {
-        fake: useAppStore.getState().fake,
-        per_page: MESSAGES_PER_PAGE,
-      })
+      getCustomerConversation(
+        customer?.external_id,
+        new Date(),
+        1,
+        {
+          fake: useAppStore.getState().fake,
+          per_page: MESSAGES_PER_PAGE,
+        },
+        lifecycleAbortRef.current?.signal
+      )
         .then((newData) => {
           setData((prevData) => {
             const newMessages = newData?.page?.data ?? [];
@@ -609,6 +649,11 @@ export function ChatList({
   }
 
   if (initFailed) {
+    if (renderErrorStateOverride) {
+      return (
+        <>{renderErrorStateOverride({ retry: () => setInitFailed(false) })}</>
+      );
+    }
     return <InitFailed setInitFailed={setInitFailed} />;
   }
 
@@ -633,49 +678,60 @@ export function ChatList({
             },
           ]}
         >
-          <TouchableOpacity
-            style={[styles.iconContainer, { top: insets.top || 40 }]}
-            onPress={onBack}
-            activeOpacity={activeOpacity}
-          >
-            <Image
-              source={closeIcon}
-              style={[styles.closeIcon, { tintColor: themeColors.text }]}
-            />
-          </TouchableOpacity>
-          <View
-            style={[
-              styles.headerContainer,
-              {
-                backgroundColor: themeColors.background,
-                borderBottomColor: themeColors.lavender,
-              },
-            ]}
-          >
-            <AppText
-              localization="chat.support-team"
-              weight={'600'}
-              style={[styles.header, { color: themeColors.text }]}
-            />
-            <View
-              style={[
-                styles.headerText,
-                { backgroundColor: themeColors.background },
-              ]}
-            >
-              <Image
-                source={headphonesIcon}
-                style={[styles.headphonesIcon, { tintColor: themeColors.text }]}
-              />
-              <AppText
-                localization="chat.live"
-                style={[styles.liveChat, { color: themeColors.text }]}
-              />
+          {renderHeaderOverride ? (
+            <>{renderHeaderOverride({ onBack })}</>
+          ) : (
+            <>
+              <TouchableOpacity
+                style={[styles.iconContainer, { top: insets.top || 40 }]}
+                onPress={onBack}
+                activeOpacity={activeOpacity}
+                accessibilityRole="button"
+                accessibilityLabel="Close support"
+              >
+                <Image
+                  source={closeIcon}
+                  style={[styles.closeIcon, { tintColor: themeColors.text }]}
+                />
+              </TouchableOpacity>
               <View
-                style={[styles.dot, { backgroundColor: themeColors.green }]}
-              />
-            </View>
-          </View>
+                style={[
+                  styles.headerContainer,
+                  {
+                    backgroundColor: themeColors.background,
+                    borderBottomColor: themeColors.lavender,
+                  },
+                ]}
+              >
+                <AppText
+                  localization="chat.support-team"
+                  weight={'600'}
+                  style={[styles.header, { color: themeColors.text }]}
+                />
+                <View
+                  style={[
+                    styles.headerText,
+                    { backgroundColor: themeColors.background },
+                  ]}
+                >
+                  <Image
+                    source={headphonesIcon}
+                    style={[
+                      styles.headphonesIcon,
+                      { tintColor: themeColors.text },
+                    ]}
+                  />
+                  <AppText
+                    localization="chat.live"
+                    style={[styles.liveChat, { color: themeColors.text }]}
+                  />
+                  <View
+                    style={[styles.dot, { backgroundColor: themeColors.green }]}
+                  />
+                </View>
+              </View>
+            </>
+          )}
 
           <View style={styles.listContainer}>
             <SectionList
@@ -691,7 +747,11 @@ export function ChatList({
               style={styles.list}
               ListEmptyComponent={
                 !loading && (!sections || sections.length === 0) ? (
-                  <EmptyList />
+                  renderEmptyStateOverride ? (
+                    <>{renderEmptyStateOverride()}</>
+                  ) : (
+                    <EmptyList />
+                  )
                 ) : null
               }
               ListFooterComponent={loading ? <LoadingItem /> : null}
@@ -722,6 +782,8 @@ export function ChatList({
                 isKeyboardVisible && styles.scrollDownButtonWithKeyboard,
               ]}
               onPress={() => scrollToBottom(true)}
+              accessibilityRole="button"
+              accessibilityLabel="Scroll to latest message"
             >
               <Image
                 source={require('../assets/down.png')}
@@ -880,7 +942,6 @@ const styles = ScaledSheet.create({
     zIndex: 9999,
   },
   toastContent: {
-    backgroundColor: '#333333',
     borderRadius: '8@s',
     paddingHorizontal: '16@s',
     paddingVertical: '12@vs',
@@ -895,7 +956,6 @@ const styles = ScaledSheet.create({
     maxWidth: '90%',
   },
   toastText: {
-    color: '#FFFFFF',
     fontSize: '14@vs',
     fontWeight: '400',
     textAlign: 'center',

package/src/components/ComnyxErrorBoundary.tsx

@@ -0,0 +1,91 @@
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+import { View, TouchableOpacity, Image, Text } from 'react-native';
+import { ScaledSheet } from './ScaledSheet';
+
+const closeIcon = require('../assets/x-close.png');
+
+interface Props {
+  children: ReactNode;
+  onBack?: () => void;
+  fallback?: (reset: () => void) => ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ComnyxErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('[Comnyx] UI error caught by boundary', error, info);
+  }
+
+  reset = () => {
+    this.setState({ hasError: false });
+  };
+
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children;
+    }
+
+    if (this.props.fallback) {
+      return this.props.fallback(this.reset);
+    }
+
+    return (
+      <View style={styles.container}>
+        {this.props.onBack ? (
+          <TouchableOpacity
+            activeOpacity={1}
+            style={styles.iconContainer}
+            onPress={this.props.onBack}
+          >
+            <Image source={closeIcon} style={styles.closeIcon} />
+          </TouchableOpacity>
+        ) : null}
+        <Text style={styles.message}>Something went wrong.</Text>
+        <TouchableOpacity onPress={this.reset} style={styles.retryButton}>
+          <Text style={styles.retryLabel}>Retry</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const styles = ScaledSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: '20@s',
+    paddingVertical: '20@vs',
+  },
+  iconContainer: {
+    position: 'absolute',
+    top: '60@vs',
+    left: '24@s',
+  },
+  closeIcon: {
+    width: '24@vs',
+    height: '24@vs',
+  },
+  message: {
+    textAlign: 'center',
+    fontSize: '14@vs',
+  },
+  retryButton: {
+    marginTop: '16@vs',
+    paddingHorizontal: '16@s',
+    paddingVertical: '10@vs',
+  },
+  retryLabel: {
+    fontSize: '14@vs',
+    fontWeight: '500',
+  },
+});

package/src/components/CustomerForm.tsx

@@ -244,7 +244,7 @@ export function CustomerForm({
                     },
                   ]}
                 >
-                  Email
+                  {localize('customer.form.email')}
                 </AppText>
                 <Controller
                   control={control}
@@ -291,7 +291,7 @@ export function CustomerForm({
                     },
                   ]}
                 >
-                  Phone
+                  {localize('customer.form.phone')}
                 </AppText>
                 <Controller
                   control={control}

package/src/components/MediaMessageItem.tsx

@@ -30,6 +30,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) {
@@ -62,8 +63,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
@@ -234,7 +241,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);

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,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);