@developer_tribe/react-native-comnyx 0.15.0 → 0.16.1

package/src/register/Accumulator.ts

@@ -1,4 +1,4 @@
-import type { CreateCustomerRequest } from '../types/Customer';
+import type { CreateCustomerRequest, CustomParameter } from '../types/Customer';
 
 const ACCUMULATOR_DEBOUNCE_TIME_IN_MS = 3000;
 
@@ -21,11 +21,17 @@ export class Accumulator {
 
   add(data: Partial<Omit<CreateCustomerRequest, 'externalId'>>) {
     if (!this.registerData) {
-      throw new Error('Register data is not set');
+      // Late events (push token callbacks, AppState changes) may arrive
+      // after logout() or before login(). Ignore silently instead of
+      // throwing so the host app is not crashed by SDK-internal races.
+      console.warn(
+        '[Comnyx] add() called before register/after logout — ignored'
+      );
+      return;
     }
 
     // First, create a map of existing custom parameters by name
-    const customParamsMap = new Map<string, string>();
+    const customParamsMap = new Map<string, CustomParameter['value']>();
 
     // Add existing parameters to the map
     (this.registerData.customParameters || []).forEach((param) => {
@@ -59,10 +65,19 @@ export class Accumulator {
 
   async flush() {
     if (!this.registerData) {
-      throw new Error('Register data is not set');
+      console.warn(
+        '[Comnyx] flush() called before register/after logout — ignored'
+      );
+      return;
     }
     if (this.listener) {
-      await this.listener(this.registerData!);
+      try {
+        await this.listener(this.registerData!);
+      } catch (err) {
+        console.error('[Comnyx] flush listener error', err);
+        this.reset();
+        return;
+      }
       this.registerData = {
         ...this.registerData,
         customParameters: [],
@@ -74,14 +89,16 @@ export class Accumulator {
 
   debounce() {
     if (!this.registerData) {
-      throw new Error('Register data is not set');
+      return;
     }
     this.reset();
     this.__select_time = setTimeout(() => {
-      if (this.listener) {
-        this.listener(this.registerData!);
+      if (this.listener && this.registerData) {
+        Promise.resolve(this.listener(this.registerData)).catch((err) => {
+          console.error('[Comnyx] debounce listener error', err);
+        });
         this.registerData = {
-          ...this.registerData!,
+          ...this.registerData,
           customParameters: [],
         };
         this._isListenerCalledOnce = true;

package/src/register/collectData.ts

@@ -1,12 +1,20 @@
+import type { CustomParameter } from '../types/Customer';
 import { accumulator } from './Accumulator';
 
-export function collectData<T>(key: string | Record<string, any>, value?: T) {
+export function collectData(key: string, value: CustomParameter['value']): void;
+export function collectData(
+  data: Partial<Parameters<typeof accumulator.add>[0]>
+): void;
+export function collectData(
+  key: string | Partial<Parameters<typeof accumulator.add>[0]>,
+  value?: CustomParameter['value']
+) {
   if (typeof key === 'string') {
     accumulator.add({
       customParameters: [
         {
           name: key,
-          value,
+          value: value ?? null,
         },
       ],
     });

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/store/store.ts

@@ -6,6 +6,8 @@ import type { AppConversationMessage } from '../types/Conversation';
 import type { LanguageCode } from '../types/Language';
 import type { Customer } from '../types/Customer';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
+import type { GlobalTheme } from '../types/GlobalTheme';
+import type { ThemeOverrideConfig } from '../types/Theme';
 import { mmkvStorage } from '../utils/mmkvStorage';
 
 interface AppStoreState {
@@ -16,7 +18,8 @@ interface AppStoreState {
   language: LanguageCode;
   theme: 'light' | 'dark';
   fake: boolean;
-  themes: any;
+  themes: GlobalTheme;
+  themeOverride: ThemeOverrideConfig;
   firstMessage: AppConversationMessage | null;
   setData: (
     cb: (
@@ -28,7 +31,8 @@ interface AppStoreState {
   setLanguage: (language: LanguageCode) => void;
   setTheme: (theme: 'light' | 'dark') => void;
   setFake: (fake: boolean) => void;
-  setThemes: (themes: any) => void;
+  setThemes: (themes: GlobalTheme) => void;
+  setThemeOverride: (themeOverride: ThemeOverrideConfig) => void;
   updateBaseDimensions: (config: {
     baseHeight: number;
     baseWidth: number;
@@ -57,6 +61,7 @@ export const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
   theme: 'light',
   fake: false,
   themes: {},
+  themeOverride: {},
   firstMessage: null,
   formSubmitted: false,
   setData: (cb) => {
@@ -81,9 +86,12 @@ export const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
   setFake: (fake: boolean) => {
     set({ fake });
   },
-  setThemes: (themes: any) => {
+  setThemes: (themes: GlobalTheme) => {
     set({ themes });
   },
+  setThemeOverride: (themeOverride: ThemeOverrideConfig) => {
+    set({ themeOverride });
+  },
   updateBaseDimensions: ({ baseWidth, baseHeight }) => {
     set({ baseWidth, baseHeight });
   },

package/src/support/ComnyxSupport.tsx

@@ -2,29 +2,113 @@ import {
   View,
   TouchableOpacity,
   Image,
+  Appearance,
   type ViewStyle,
   type StyleProp,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ChatList } from '../components/ChatList';
 import { CustomerForm } from '../components/CustomerForm';
 import type { LanguageCode } from '../types/Language';
-import { useEffect, useState } from 'react';
+import type { GlobalTheme } from '../types/GlobalTheme';
+import type { ThemeOverrideConfig } from '../types/Theme';
+import { useEffect, useMemo, useState, type ReactElement } from 'react';
 import { AppText } from '../components/AppText';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { usePolling } from '../hooks/usePolling';
 import { useAppStore } from '../store/store';
 import { ScaledSheet } from '../components/ScaledSheet';
 import { accumulator } from '../register/Accumulator';
+import {
+  SupportConfigProvider,
+  type SupportConfig,
+  setGlobalSupportErrorReporter,
+  reportSupportError,
+} from './SupportConfigContext';
 const closeIcon = require('../assets/x-close.png');
 
 interface SupportComnyxProps {
+  /** Language code used for localised UI strings. Defaults to `'en'`. */
   language?: LanguageCode;
-  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. */
   onBack: () => void;
-  themes?: any;
+  /**
+   * Font-family provider. Shape: `{ family: (languageCode) => FamilyWeight }`.
+   * Not related to colour theming — use `themeOverride` for colours.
+   */
+  themes?: GlobalTheme;
+  /**
+   * Partial override for the built-in colour palette. Only the tokens you
+   * specify are replaced; the rest fall back to the default light/dark theme.
+   *
+   * @example
+   * <ComnyxSupport
+   *   themeOverride={{
+   *     light: { primary: '#FF6B6B', link: '#FF9999' },
+   *     dark: { primary: '#FF9999' },
+   *   }}
+   * />
+   */
+  themeOverride?: ThemeOverrideConfig;
+  /**
+   * @deprecated No longer consumed. Kept for backward compatibility and will
+   * be removed in a future major release.
+   */
   rtlFix?: boolean;
+  /** Additional style merged onto the root container. */
   containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Replace the built-in header. Receives `{ onBack }`. Return `null` to hide
+   * the header entirely.
+   */
+  renderHeader?: SupportConfig['renderHeader'];
+  /** Replace the built-in empty-state card shown when there are no messages. */
+  renderEmptyState?: SupportConfig['renderEmptyState'];
+  /**
+   * Replace the built-in init-failed screen. Receives `{ retry }` to trigger a
+   * first-page refetch.
+   */
+  renderErrorState?: SupportConfig['renderErrorState'];
+  /**
+   * Wrap or replace individual message bubbles. Receives
+   * `{ message, defaultNode }` — return `defaultNode` as-is for no change,
+   * wrap it for decorations (reactions, swipe actions), or render a fully
+   * custom bubble.
+   */
+  renderMessage?: SupportConfig['renderMessage'];
+  /**
+   * Called immediately before a message is dispatched. Throw or reject to
+   * cancel the send — the user's input and any pending media are preserved.
+   * 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'];
 }
 
 export function ComnyxSupport({
@@ -33,7 +117,14 @@ export function ComnyxSupport({
   fake = false,
   onBack,
   themes,
+  themeOverride,
   containerStyle,
+  renderHeader,
+  renderEmptyState,
+  renderErrorState,
+  renderMessage,
+  onBeforeSend,
+  onError,
 }: SupportComnyxProps) {
   const { customer, formSubmitted } = useAppStore((s) => ({
     customer: s.customer,
@@ -41,15 +132,52 @@ export function ComnyxSupport({
   }));
   const [initLoading, setInitLoading] = useState(true);
   const themeColors = useThemeColors();
+  const insets = useSafeAreaInsets();
   usePolling();
 
+  const supportConfig = useMemo<SupportConfig>(
+    () => ({
+      renderHeader,
+      renderEmptyState,
+      renderErrorState,
+      renderMessage,
+      onBeforeSend,
+      onError,
+    }),
+    [
+      renderHeader,
+      renderEmptyState,
+      renderErrorState,
+      renderMessage,
+      onBeforeSend,
+      onError,
+    ]
+  );
+
+  useEffect(() => {
+    setGlobalSupportErrorReporter(onError);
+    return () => {
+      setGlobalSupportErrorReporter(undefined);
+    };
+  }, [onError]);
+
   useEffect(() => {
     if (!accumulator.isListenerCalledOnce()) {
-      accumulator.flush().then(() => {
-        setTimeout(() => {
+      accumulator
+        .flush()
+        .then(() => {
+          setTimeout(() => {
+            setInitLoading(false);
+          }, 100);
+        })
+        .catch((err) => {
+          console.error('[Comnyx] accumulator.flush failed', err);
+          reportSupportError(err, {
+            section: 'accumulator',
+            recoverable: true,
+          });
           setInitLoading(false);
-        }, 100);
-      });
+        });
     } else {
       setInitLoading(false);
     }
@@ -62,25 +190,43 @@ export function ComnyxSupport({
   }, [customer, customer?.external_id]);
 
   useEffect(() => {
-    //TOOD: getState().initApp({language,theme,fake,rtlFix,themes})
     useAppStore.getState().setLanguage(language);
-    useAppStore.getState().setTheme(theme);
     useAppStore.getState().setFake(fake);
     if (themes) {
       useAppStore.getState().setThemes(themes);
     }
-  }, [language, theme, fake, themes]);
+    if (themeOverride) {
+      useAppStore.getState().setThemeOverride(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) {
     //NOTE: customer yoksa register hiç çalışmamış
-    return (
+    body = (
       <View
         style={[styles.container, { backgroundColor: themeColors.background }]}
       >
         <TouchableOpacity
           activeOpacity={1}
-          style={[styles.iconContainer]}
+          style={[styles.iconContainer, { top: Math.max(insets.top, 16) + 16 }]}
           onPress={onBack}
+          accessibilityRole="button"
+          accessibilityLabel="Close support"
+          hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
         >
           <Image
             source={closeIcon}
@@ -95,25 +241,29 @@ export function ComnyxSupport({
     );
   } else if (!formSubmitted) {
     //NOTE: customer var ama forSubmitted false (name===null)
-    return (
+    body = (
       <CustomerForm
         loading={initLoading}
         onBack={onBack}
         containerStyle={containerStyle}
       />
     );
+  } else {
+    body = (
+      <View
+        style={[
+          styles.container,
+          { backgroundColor: themeColors.background },
+          containerStyle,
+        ]}
+      >
+        <ChatList initLoading={initLoading} onBack={onBack} />
+      </View>
+    );
   }
 
   return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: themeColors.background },
-        containerStyle,
-      ]}
-    >
-      <ChatList initLoading={initLoading} onBack={onBack} />
-    </View>
+    <SupportConfigProvider value={supportConfig}>{body}</SupportConfigProvider>
   );
 }
 
@@ -124,7 +274,6 @@ const styles = ScaledSheet.create({
   },
   iconContainer: {
     position: 'absolute',
-    top: '60@vs',
     left: '24@s',
   },
   closeIcon: {

package/src/support/SupportConfigContext.tsx

@@ -0,0 +1,157 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { AppConversationMessage } from '../types/Conversation';
+
+export interface SupportHeaderRenderProps {
+  /** Invoke to close the support screen — same callback passed to `onBack`. */
+  onBack?: () => void;
+}
+
+export interface SupportErrorRenderProps {
+  /** Trigger a retry. Safe to call multiple times. */
+  retry: () => void;
+}
+
+export interface SupportMessageRenderProps {
+  message: AppConversationMessage;
+  /** The built-in bubble node — render it as-is, wrap it, or ignore it. */
+  defaultNode: ReactNode;
+}
+
+export interface SupportSendPayload {
+  /** Plain text content the user is sending. Empty when only media is attached. */
+  content: string;
+  /** Number of media attachments. 0 for text-only messages. */
+  mediaCount: number;
+  /** Types of the attached media. Empty for text-only messages. */
+  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).
+   * Return any React node; returning `null` hides the header entirely.
+   */
+  renderHeader?: (props: SupportHeaderRenderProps) => ReactNode;
+  /** Replace the built-in empty-state card shown when there are no messages. */
+  renderEmptyState?: () => ReactNode;
+  /**
+   * Replace the built-in init-failed screen. The `retry` callback re-runs the
+   * first-page fetch.
+   */
+  renderErrorState?: (props: SupportErrorRenderProps) => ReactNode;
+  /**
+   * Replace or wrap individual message bubbles. `defaultNode` is the
+   * built-in `<MessageItem />` — return it for no change, wrap it to add
+   * decorations (reactions, swipe actions), or substitute a fully custom
+   * bubble.
+   */
+  renderMessage?: (props: SupportMessageRenderProps) => ReactNode;
+  /**
+   * Called immediately before a message is dispatched to the backend. Throw
+   * (or reject the returned promise) to cancel the send — the user's input
+   * and any pending media are preserved and the UI re-enables.
+   *
+   * 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 = {};
+
+const SupportConfigContext = createContext<SupportConfig>(EMPTY_CONFIG);
+
+export function SupportConfigProvider({
+  value,
+  children,
+}: {
+  value: SupportConfig;
+  children: ReactNode;
+}) {
+  return (
+    <SupportConfigContext.Provider value={value}>
+      {children}
+    </SupportConfigContext.Provider>
+  );
+}
+
+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

@@ -1 +1,12 @@
 export { ComnyxSupport } from './ComnyxSupport';
+export type {
+  SupportConfig,
+  SupportHeaderRenderProps,
+  SupportErrorRenderProps,
+  SupportMessageRenderProps,
+  SupportSendPayload,
+  SupportErrorSection,
+  SupportErrorContext,
+  SupportErrorReporter,
+} from './SupportConfigContext';
+export { ComnyxErrorBoundary } from '../components/ComnyxErrorBoundary';

package/src/types/Conversation.ts

@@ -2,8 +2,8 @@ export interface ConversationMessage {
   id: number;
   content: string;
   created_at: string;
-  user?: any | null;
-  bot?: any | null;
+  user?: unknown | null;
+  bot?: unknown | null;
   customer?: { name: string; profile_photo_url: null } | null;
   files?: Array<{
     id: number;

package/src/types/Customer.ts

@@ -1,7 +1,6 @@
 export interface CustomParameter {
   name: string;
-  //JSON any, Record<string, T>, Its added to prevent any type errors. T could be any primitive type.
-  value: any;
+  value: string | number | boolean | null;
 }
 
 export interface OneSignalIntegrationParameters {

package/src/types/MessageResponse.ts

@@ -6,9 +6,9 @@ export interface MessageResponse {
     updated_at: string;
     created_at: string;
     id: number;
-    user: null | any;
-    customer: null | any;
-    bot: null | any;
+    user: null | unknown;
+    customer: null | { name: string; profile_photo_url: null };
+    bot: null | unknown;
     conversation: {
       id: number;
       project_id: number;
@@ -55,6 +55,6 @@ export interface MessageResponse {
         };
       };
     };
-    events: any[];
+    events: unknown[];
   };
 }