@developer_tribe/react-native-comnyx 0.14.0 → 0.16.0

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

@@ -51,5 +51,4 @@ export type LocalizationKeys = {
   'chat.media.pick.title': string;
   'chat.media.pick.photo': string;
   'chat.media.pick.video': string;
-  'chat.media.pick.cancel': string;
 };

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

package/src/types/Theme.ts

@@ -18,6 +18,11 @@ export interface ThemeColors {
   navy: string;
   lavender: string;
   silver: string;
+  link: string;
+  toastBackground: string;
+  toastText: string;
+  playIcon: string;
+  videoPlaceholder: string;
 }
 
 export const lightTheme: ThemeColors = {
@@ -40,6 +45,11 @@ export const lightTheme: ThemeColors = {
   navy: '#191A21',
   lavender: '#E0E0E0',
   silver: '#C7C7C7',
+  link: '#0066CC',
+  toastBackground: '#333333',
+  toastText: '#FFFFFF',
+  playIcon: '#FFFFFF',
+  videoPlaceholder: '#1A1A2E',
 };
 
 export const darkTheme: ThemeColors = {
@@ -62,9 +72,37 @@ export const darkTheme: ThemeColors = {
   navy: '#F5F5F5',
   lavender: '#262730',
   silver: '#44454D',
+  link: '#4D9FFF',
+  toastBackground: '#2A2A2A',
+  toastText: '#FFFFFF',
+  playIcon: '#FFFFFF',
+  videoPlaceholder: '#1A1A2E',
 };
 
 export interface Theme {
   light: ThemeColors;
   dark: ThemeColors;
 }
+
+/**
+ * Partial override for a single theme mode. Consumers can change one or more
+ * tokens without redeclaring the whole palette.
+ */
+export type ThemeColorsOverride = Partial<ThemeColors>;
+
+/**
+ * Full override map accepted by `ComnyxSupport.themeOverride`. Any token not
+ * provided falls back to the built-in light/dark palette.
+ *
+ * @example
+ * <ComnyxSupport
+ *   themeOverride={{
+ *     light: { primary: '#FF6B6B', link: '#FF9999' },
+ *     dark: { primary: '#FF9999' },
+ *   }}
+ * />
+ */
+export interface ThemeOverrideConfig {
+  light?: ThemeColorsOverride;
+  dark?: ThemeColorsOverride;
+}

package/src/version.ts

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