@developer_tribe/react-native-comnyx 0.1.1 → 0.2.0

package/src/hooks/usePolling.ts

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { useAppStore } from '../store';
+import { getNewCustomerConversation } from '../api';
+
+const NEW_MESSAGES_CHECK_INTERVAL = 10000;
+
+export function usePolling() {
+  const { customer, data, setData } = useAppStore((s) => ({
+    customer: s.customer,
+    data: s.data,
+    setData: s.setData,
+  }));
+  const lastMessage = data ? data[data.length - 1] : null;
+  useEffect(() => {
+    const created_at = lastMessage?.created_at;
+    let interval: NodeJS.Timeout | null = null;
+    if (customer?.external_id && created_at) {
+      interval = setInterval(() => {
+        getNewCustomerConversation(customer.external_id, created_at, {
+          fake: useAppStore.getState().fake,
+        }).then((newData) => {
+          setData((prevData) => {
+            const newMessages = newData.page.data;
+            const existingIds = new Set(prevData?.map((msg) => msg.id));
+            const uniqueNewMessages = newMessages.filter(
+              (msg) => !existingIds.has(msg.id)
+            );
+            return [
+              ...uniqueNewMessages.map((u) => ({
+                ...u,
+                created_at: new Date(u.created_at),
+                approved: true,
+              })),
+              ...(prevData ?? []),
+            ];
+          });
+        });
+      }, NEW_MESSAGES_CHECK_INTERVAL);
+    }
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [customer?.external_id, lastMessage?.created_at, setData]);
+}

package/src/hooks/useThemeColors.ts

@@ -0,0 +1,10 @@
+import { useAppStore } from '../store';
+import { lightTheme, darkTheme, type ThemeColors } from '../types/Theme';
+
+export function useThemeColors(): ThemeColors {
+  const { theme } = useAppStore((s) => ({
+    theme: s.theme,
+  }));
+
+  return theme === 'light' ? lightTheme : darkTheme;
+}

package/src/index.tsx

@@ -1,5 +1,4 @@
-import Comnyx from './NativeComnyx';
-
-export function multiply(a: number, b: number): number {
-  return Comnyx.multiply(a, b);
-}
+import './__dev__';
+export { registerComnyx } from './register';
+export type { CreateCustomerRequest } from './types/Customer';
+export { Comnyx } from './App';

package/src/register.ts

@@ -0,0 +1,17 @@
+import { initApi } from './api/api';
+import { useAppStore } from './store';
+
+export function registerComnyx(registerOptions: {
+  externalId: string;
+  token: string;
+}) {
+  if (!registerOptions.externalId) {
+    throw new Error('External ID is required for initialization');
+  }
+  if (!registerOptions.token) {
+    throw new Error('Authentication token is required');
+  }
+
+  initApi(registerOptions.token);
+  useAppStore.getState().init({ externalId: registerOptions.externalId });
+}

package/src/store.ts

@@ -0,0 +1,85 @@
+import { createJSONStorage, persist } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { StateCreator } from 'zustand';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type { Customer } from './types/Customer';
+import type { AppConversationMessage } from './types/Conversation';
+import type { LanguageCode } from './types/Language';
+
+interface AppStoreState {
+  initialized: boolean;
+  customer: Customer | null;
+  data: AppConversationMessage[] | null;
+  externalId: string | null;
+  language: LanguageCode;
+  theme: 'light' | 'dark';
+  fake: boolean;
+  firstMessage: AppConversationMessage | null;
+  setData: (
+    cb: (
+      prevData: AppConversationMessage[] | null
+    ) => AppConversationMessage[] | null
+  ) => void;
+  setFirstMessage: (message: AppConversationMessage | null) => void;
+  init: ({ externalId }: { externalId: string }) => void;
+  initForm: (createCustomerResponse: Customer) => void;
+  setLanguage: (language: LanguageCode) => void;
+  setTheme: (theme: 'light' | 'dark') => void;
+  setFake: (fake: boolean) => void;
+}
+
+const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
+  initialized: false,
+  customer: null,
+  data: null,
+  externalId: null,
+  language: 'en',
+  theme: 'light',
+  fake: false,
+  firstMessage: null,
+  setData: (cb) => {
+    const newData = cb(get().data);
+    set({ data: newData });
+  },
+  setFirstMessage: (message) => {
+    set({ firstMessage: message });
+  },
+  init: ({ externalId }: { externalId: string }) => {
+    set({ externalId: externalId, initialized: true });
+  },
+  initForm: (createCustomerResponse: Customer) => {
+    set({ customer: createCustomerResponse });
+  },
+  setLanguage: (language: LanguageCode) => {
+    set({ language });
+  },
+  setTheme: (theme: 'light' | 'dark') => {
+    set({ theme });
+  },
+  setFake: (fake: boolean) => {
+    set({ fake });
+  },
+});
+
+export const useAppStore = createWithEqualityFn<AppStoreState>()(
+  persist(storeCreator, {
+    name: 'appStore-9',
+    storage: createJSONStorage(() => AsyncStorage),
+    skipHydration: false,
+    partialize: (state) => ({
+      customer: state.customer,
+      externalId: state.externalId,
+      data: [],
+      /*  data: state.data
+        ?.filter((message) => message.approved)
+        .map((message) => ({
+          ...message,
+          created_at: message.created_at
+            ? new Date(message.created_at)
+            : undefined,
+        })),*/
+    }),
+  }),
+  shallow
+);

package/src/types/ApiOptions.ts

@@ -0,0 +1,4 @@
+export interface ApiOptions {
+  //TODO: silinecek
+  fake: boolean;
+}

package/src/types/Conversation.ts

@@ -0,0 +1,29 @@
+export interface ConversationMessage {
+  id: number;
+  content: string;
+  created_at: string;
+  user: any | null;
+}
+
+export interface AppConversationMessage
+  extends Omit<ConversationMessage, 'id' | 'created_at'> {
+  id: number | null;
+  approved?: boolean;
+  created_at: Date;
+}
+
+export interface ConversationPage {
+  current_page: number;
+  data: ConversationMessage[];
+  first_page_url: string;
+  from: number;
+  next_page_url: string | null;
+  path: string;
+  per_page: number; //TODO: backend string gönderiyor, number yapılabilir.
+  prev_page_url: string | null;
+  to: number;
+}
+
+export interface ConversationResponse {
+  page: ConversationPage;
+}

package/src/types/Customer.ts

@@ -0,0 +1,31 @@
+export interface CustomParameter {
+  name: string;
+  value: string;
+}
+
+export interface CreateCustomerRequest {
+  name: string;
+  country: string;
+  language: string;
+  externalId: string;
+  email: string;
+  phone: string;
+  ipAddress: string;
+  customParameters?: CustomParameter[];
+}
+
+export interface Customer {
+  id: number;
+  project_id: number;
+  external_id: string;
+  name: string;
+  country: string;
+  language: string;
+  email: string;
+  phone: string;
+  ip_address: string;
+  custom_parameters: string;
+  user_code: string;
+  updated_at: string;
+  created_at: string;
+}

package/src/types/Language.ts

@@ -0,0 +1,11 @@
+export type LanguageCode =
+  | 'en'
+  | 'tr'
+  | 'es'
+  | 'fr'
+  | 'de'
+  | 'it'
+  | 'pt'
+  | 'ru'
+  | 'ja'
+  | 'zh';

package/src/types/LocalizationKeys.ts

@@ -0,0 +1,21 @@
+export type LocalizationKeys = {
+  'customer.form.title': string;
+  'customer.form.email': string;
+  'customer.form.phone': string;
+  'customer.form.country': string;
+  'customer.form.submit': string;
+  'customer.form.error': string;
+  'customer.form.instructions': string;
+  'customer.form.error.country': string;
+  'customer.form.error.email': string;
+  'customer.form.error.phone': string;
+  'customer.form.placeholder.name': string;
+  'customer.form.placeholder.country': string;
+  'customer.form.placeholder.email': string;
+  'customer.form.placeholder.phone': string;
+  'chat.messageInput.placeholder': string;
+  'app.initialization.required': string;
+  'chat.load.error': string;
+  'chat.init.error': string;
+  'chat.empty': string;
+};

package/src/types/MessageResponse.ts

@@ -0,0 +1,58 @@
+export interface MessageResponse {
+  message: {
+    conversation_id: number;
+    content: string;
+    is_note: boolean;
+    updated_at: string;
+    created_at: string;
+    id: number;
+    user: null | any;
+    conversation: {
+      id: number;
+      project_id: number;
+      customer_id: number;
+      created_at: string;
+      updated_at: string;
+      deleted_at: null | string;
+      language: string;
+      use_ai_answers: number;
+      project: {
+        id: number;
+        name: string;
+        organization_id: number;
+        created_at: string;
+        updated_at: string;
+        deleted_at: null | string;
+        uuid: string;
+        organization: {
+          id: number;
+          name: string;
+          created_at: string;
+          updated_at: string;
+          deleted_at: null | string;
+          owner: Array<{
+            id: number;
+            name: string;
+            email: string;
+            email_verified_at: null | string;
+            created_at: string;
+            updated_at: string;
+            avatar: null | string;
+            two_factor_secret: null | string;
+            two_factor_recovery_codes: null | string;
+            is_bot: boolean;
+            profile_photo_url: string;
+            pivot: {
+              organization_id: number;
+              user_id: number;
+              role: string;
+              created_at: string;
+              updated_at: string;
+            };
+          }>;
+        };
+      };
+    };
+    events: any[];
+  };
+}

package/src/types/Theme.ts

@@ -0,0 +1,40 @@
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  background: string;
+  text: string;
+  error: string;
+  success: string;
+  warning: string;
+  info: string;
+  border: string;
+}
+
+export const lightTheme: ThemeColors = {
+  primary: '#4361EE',
+  secondary: '#3A0CA3',
+  background: '#FFFFFF',
+  text: '#212529',
+  error: '#FF3B30',
+  success: '#34C759',
+  warning: '#FF9500',
+  info: '#007AFF',
+  border: '#E9ECEF',
+};
+
+export const darkTheme: ThemeColors = {
+  primary: '#4361EE',
+  secondary: '#3A0CA3',
+  background: '#121212',
+  text: '#FFFFFF',
+  error: '#FF453A',
+  success: '#32D74B',
+  warning: '#FF9F0A',
+  info: '#0A84FF',
+  border: '#2C2C2C',
+};
+
+export interface Theme {
+  light: ThemeColors;
+  dark: ThemeColors;
+}

package/src/utils/date.ts

@@ -0,0 +1,11 @@
+/**
+ * Converts a Date object to Unix timestamp (seconds)
+ * @param date - The Date object to convert
+ * @returns Unix timestamp in seconds, or undefined if date is undefined
+ */
+export const dateToUnixTimestamp = (
+  date: Date | undefined
+): number | undefined => {
+  if (!date) return undefined;
+  return Math.floor(date.getTime() / 1000);
+};