@developer_tribe/react-native-comnyx 0.16.0 → 0.16.1

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

@@ -17,7 +17,10 @@ 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';
+import {
+  useSupportConfig,
+  reportSupportError,
+} from '../support/SupportConfigContext';
 
 const sendDark = require('../assets/arrow-right.png');
 const circleXIcon = require('../assets/x-circle.png');
@@ -100,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);
@@ -125,6 +128,11 @@ export function MessageInput({
         } else {
           //TODO: ??
         }
+        reportSupportError(err, {
+          section: 'send',
+          recoverable: true,
+          extras: { contentLength: value.length },
+        });
       });
     setValue('');
   }, [value, customer, scrollToBottom]);
@@ -296,6 +304,15 @@ 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;
@@ -454,6 +471,7 @@ export function MessageInput({
         <Image
           style={[
             styles.sendIcon,
+            { tintColor: themeColors.text },
             isRtl && { transform: [{ rotate: '180deg' }] },
             isSending && { opacity: 0.4 },
           ]}

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;
 
@@ -45,6 +46,10 @@ export function usePolling() {
         .catch((err) => {
           if (controller.signal.aborted) return;
           console.warn('[Comnyx] Polling failed:', err);
+          reportSupportError(err, {
+            section: 'polling',
+            recoverable: true,
+          });
         });
     }, NEW_MESSAGES_CHECK_INTERVAL);
 

package/src/index.ts

@@ -16,7 +16,11 @@ export type {
   SupportErrorRenderProps,
   SupportMessageRenderProps,
   SupportSendPayload,
+  SupportErrorSection,
+  SupportErrorContext,
+  SupportErrorReporter,
 } from './support';
+export { ComnyxErrorBoundary } from './support';
 
 //deprecated
 export { registerOneSignalForComnyx } from './register/collectData';

package/src/register/login.ts

@@ -3,6 +3,7 @@ import { isInitCalled, setLoginForAxios } from '../api/api';
 import type { CreateCustomerRequest } from '../types/Customer';
 import { useAppStore } from '../store/store';
 import { updateCustomer } from '../api/customers';
+import { reportSupportError } from '../support/SupportConfigContext';
 
 interface LoginOptions {
   externalId: string;
@@ -27,6 +28,10 @@ export function login(loginOptions: LoginOptions) {
       useAppStore.getState().setCustomer(data.customer);
     } catch (error) {
       console.error('[Comnyx] Error in login', error);
+      reportSupportError(error, {
+        section: 'init',
+        recoverable: false,
+      });
     }
   });
 }

package/src/support/ComnyxSupport.tsx

@@ -2,6 +2,7 @@ import {
   View,
   TouchableOpacity,
   Image,
+  Appearance,
   type ViewStyle,
   type StyleProp,
 } from 'react-native';
@@ -21,15 +22,21 @@ import { accumulator } from '../register/Accumulator';
 import {
   SupportConfigProvider,
   type SupportConfig,
+  setGlobalSupportErrorReporter,
+  reportSupportError,
 } from './SupportConfigContext';
-import { ComnyxErrorBoundary } from '../components/ComnyxErrorBoundary';
 const closeIcon = require('../assets/x-close.png');
 
 interface SupportComnyxProps {
   /** Language code used for localised UI strings. Defaults to `'en'`. */
   language?: LanguageCode;
-  /** Colour palette mode. Defaults to `'dark'`. */
-  theme?: 'light' | 'dark';
+  /**
+   * Colour palette mode. Defaults to `'dark'`.
+   *
+   * Pass `'system'` to follow the OS colour scheme — the palette flips
+   * automatically when the user toggles dark/light at the system level.
+   */
+  theme?: 'light' | 'dark' | 'system';
   /** Render the chat in fake/demo mode (no network). */
   fake?: boolean;
   /** Called when the user taps the close button. */
@@ -84,9 +91,27 @@ interface SupportComnyxProps {
    * Use for analytics, rate limiting, moderation or injecting extra context.
    */
   onBeforeSend?: SupportConfig['onBeforeSend'];
+  /**
+   * Receives non-render operational errors caught inside the SDK (network
+   * failures, polling errors, upload crashes, customer-form submit errors).
+   * Wire to your host's error tracker — typically `Bugsnag.notify`:
+   *
+   * ```tsx
+   * onError={(err, ctx) => {
+   *   if (err instanceof Error) {
+   *     Bugsnag.notify(err, (event) => event.addMetadata('comnyx', ctx));
+   *   }
+   * }}
+   * ```
+   *
+   * Render-time exceptions intentionally bubble to your root React error
+   * boundary (e.g. `@bugsnag/plugin-react`) so the existing crash reporting
+   * path keeps working unchanged.
+   */
+  onError?: SupportConfig['onError'];
 }
 
-function ComnyxSupportInner({
+export function ComnyxSupport({
   language = 'en',
   theme = 'dark',
   fake = false,
@@ -99,6 +124,7 @@ function ComnyxSupportInner({
   renderErrorState,
   renderMessage,
   onBeforeSend,
+  onError,
 }: SupportComnyxProps) {
   const { customer, formSubmitted } = useAppStore((s) => ({
     customer: s.customer,
@@ -116,6 +142,7 @@ function ComnyxSupportInner({
       renderErrorState,
       renderMessage,
       onBeforeSend,
+      onError,
     }),
     [
       renderHeader,
@@ -123,9 +150,17 @@ function ComnyxSupportInner({
       renderErrorState,
       renderMessage,
       onBeforeSend,
+      onError,
     ]
   );
 
+  useEffect(() => {
+    setGlobalSupportErrorReporter(onError);
+    return () => {
+      setGlobalSupportErrorReporter(undefined);
+    };
+  }, [onError]);
+
   useEffect(() => {
     if (!accumulator.isListenerCalledOnce()) {
       accumulator
@@ -137,6 +172,10 @@ function ComnyxSupportInner({
         })
         .catch((err) => {
           console.error('[Comnyx] accumulator.flush failed', err);
+          reportSupportError(err, {
+            section: 'accumulator',
+            recoverable: true,
+          });
           setInitLoading(false);
         });
     } else {
@@ -152,7 +191,6 @@ function ComnyxSupportInner({
 
   useEffect(() => {
     useAppStore.getState().setLanguage(language);
-    useAppStore.getState().setTheme(theme);
     useAppStore.getState().setFake(fake);
     if (themes) {
       useAppStore.getState().setThemes(themes);
@@ -160,7 +198,20 @@ function ComnyxSupportInner({
     if (themeOverride) {
       useAppStore.getState().setThemeOverride(themeOverride);
     }
-  }, [language, theme, fake, themes, themeOverride]);
+  }, [language, fake, themes, themeOverride]);
+
+  useEffect(() => {
+    const setTheme = useAppStore.getState().setTheme;
+    if (theme !== 'system') {
+      setTheme(theme);
+      return undefined;
+    }
+    setTheme(Appearance.getColorScheme() === 'dark' ? 'dark' : 'light');
+    const sub = Appearance.addChangeListener(({ colorScheme }) => {
+      setTheme(colorScheme === 'dark' ? 'dark' : 'light');
+    });
+    return () => sub.remove();
+  }, [theme]);
 
   let body: ReactElement;
   if (!customer) {
@@ -216,14 +267,6 @@ function ComnyxSupportInner({
   );
 }
 
-export function ComnyxSupport(props: SupportComnyxProps) {
-  return (
-    <ComnyxErrorBoundary onBack={props.onBack}>
-      <ComnyxSupportInner {...props} />
-    </ComnyxErrorBoundary>
-  );
-}
-
 const styles = ScaledSheet.create({
   container: {
     flex: 1,

package/src/support/SupportConfigContext.tsx

@@ -26,6 +26,52 @@ export interface SupportSendPayload {
   mediaTypes: Array<'image' | 'video'>;
 }
 
+/**
+ * Where inside the SDK an error originated. Helpful for dashboard grouping
+ * and for deciding which errors are user-visible vs silent.
+ */
+export type SupportErrorSection =
+  | 'init'
+  | 'pagination'
+  | 'polling'
+  | 'send'
+  | 'upload'
+  | 'media-picker'
+  | 'customer-form'
+  | 'accumulator';
+
+export interface SupportErrorContext {
+  /** Which subsystem the error came from. */
+  section: SupportErrorSection;
+  /**
+   * True when the SDK already recovered (e.g. surfaced a retry affordance to
+   * the user). False for fire-and-forget failures worth investigating.
+   */
+  recoverable: boolean;
+  /** Additional structured context — usage varies per section. */
+  extras?: Record<string, unknown>;
+}
+
+/**
+ * Called whenever the SDK catches an operational error it cannot surface
+ * itself. Wire this to your error tracker — for Bugsnag:
+ *
+ * ```tsx
+ * onError={(err, ctx) => {
+ *   if (err instanceof Error) {
+ *     Bugsnag.notify(err, (event) => event.addMetadata('comnyx', ctx));
+ *   }
+ * }}
+ * ```
+ *
+ * Render-time exceptions are intentionally NOT funnelled here — they bubble
+ * to the host's React error boundary so `@bugsnag/plugin-react` sees them.
+ */
+export type SupportErrorReporter = (
+  error: unknown,
+  context: SupportErrorContext
+) => void;
+
 export interface SupportConfig {
   /**
    * Replace the built-in top header (close button + "Support team / Live" row).
@@ -54,6 +100,12 @@ export interface SupportConfig {
    * Use for analytics, rate limiting, moderation, or injecting extra context.
    */
   onBeforeSend?: (payload: SupportSendPayload) => void | Promise<void>;
+  /**
+   * Receives non-render operational errors the SDK catches internally. Route
+   * to your host's error tracker (e.g. `Bugsnag.notify`) so failures are not
+   * silently swallowed to the console.
+   */
+  onError?: SupportErrorReporter;
 }
 
 const EMPTY_CONFIG: SupportConfig = {};
@@ -77,3 +129,29 @@ export function SupportConfigProvider({
 export function useSupportConfig(): SupportConfig {
   return useContext(SupportConfigContext);
 }
+
+/**
+ * Module-level error forwarder so hooks that run outside of a render pass
+ * (accumulator.flush, polling tick) can still report. Set once per mount.
+ */
+let globalErrorReporter: SupportErrorReporter | undefined;
+
+export function setGlobalSupportErrorReporter(
+  reporter: SupportErrorReporter | undefined
+) {
+  globalErrorReporter = reporter;
+}
+
+export function reportSupportError(
+  error: unknown,
+  context: SupportErrorContext
+) {
+  if (globalErrorReporter) {
+    try {
+      globalErrorReporter(error, context);
+    } catch (reporterErr) {
+      // Never let a broken reporter take down the SDK.
+      console.error('[Comnyx] onError reporter threw:', reporterErr);
+    }
+  }
+}

package/src/support/index.ts

@@ -5,4 +5,8 @@ export type {
   SupportErrorRenderProps,
   SupportMessageRenderProps,
   SupportSendPayload,
+  SupportErrorSection,
+  SupportErrorContext,
+  SupportErrorReporter,
 } from './SupportConfigContext';
+export { ComnyxErrorBoundary } from '../components/ComnyxErrorBoundary';

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const VERSION = '0.16.0';
+export const VERSION = '0.16.1';