@developer_tribe/react-native-comnyx 0.15.0 → 0.16.0

package/src/hooks/usePolling.ts

@@ -13,12 +13,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 +41,16 @@ export function usePolling() {
               ...(prevData ?? []),
             ];
           });
+        })
+        .catch((err) => {
+          if (controller.signal.aborted) return;
+          console.warn('[Comnyx] Polling failed:', err);
         });
-      }, 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,18 @@ 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,
+} 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);
       }
     }
   );

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/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

@@ -5,35 +5,100 @@ import {
   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,
+} 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';
+  /** 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'];
 }
 
-export function ComnyxSupport({
+function ComnyxSupportInner({
   language = 'en',
   theme = 'dark',
   fake = false,
   onBack,
   themes,
+  themeOverride,
   containerStyle,
+  renderHeader,
+  renderEmptyState,
+  renderErrorState,
+  renderMessage,
+  onBeforeSend,
 }: SupportComnyxProps) {
   const { customer, formSubmitted } = useAppStore((s) => ({
     customer: s.customer,
@@ -41,15 +106,39 @@ export function ComnyxSupport({
   }));
   const [initLoading, setInitLoading] = useState(true);
   const themeColors = useThemeColors();
+  const insets = useSafeAreaInsets();
   usePolling();
 
+  const supportConfig = useMemo<SupportConfig>(
+    () => ({
+      renderHeader,
+      renderEmptyState,
+      renderErrorState,
+      renderMessage,
+      onBeforeSend,
+    }),
+    [
+      renderHeader,
+      renderEmptyState,
+      renderErrorState,
+      renderMessage,
+      onBeforeSend,
+    ]
+  );
+
   useEffect(() => {
     if (!accumulator.isListenerCalledOnce()) {
-      accumulator.flush().then(() => {
-        setTimeout(() => {
+      accumulator
+        .flush()
+        .then(() => {
+          setTimeout(() => {
+            setInitLoading(false);
+          }, 100);
+        })
+        .catch((err) => {
+          console.error('[Comnyx] accumulator.flush failed', err);
           setInitLoading(false);
-        }, 100);
-      });
+        });
     } else {
       setInitLoading(false);
     }
@@ -62,25 +151,31 @@ 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, theme, fake, themes, themeOverride]);
 
+  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 +190,37 @@ 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>
+  );
+}
+
+export function ComnyxSupport(props: SupportComnyxProps) {
+  return (
+    <ComnyxErrorBoundary onBack={props.onBack}>
+      <ComnyxSupportInner {...props} />
+    </ComnyxErrorBoundary>
   );
 }
 
@@ -124,7 +231,6 @@ const styles = ScaledSheet.create({
   },
   iconContainer: {
     position: 'absolute',
-    top: '60@vs',
     left: '24@s',
   },
   closeIcon: {

package/src/support/SupportConfigContext.tsx

@@ -0,0 +1,79 @@
+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'>;
+}
+
+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>;
+}
+
+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);
+}

package/src/support/index.ts

@@ -1 +1,8 @@
 export { ComnyxSupport } from './ComnyxSupport';
+export type {
+  SupportConfig,
+  SupportHeaderRenderProps,
+  SupportErrorRenderProps,
+  SupportMessageRenderProps,
+  SupportSendPayload,
+} from './SupportConfigContext';

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[];
   };
 }