@developer_tribe/react-native-comnyx 0.1.1 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-native-comnyx",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "React Native chat component with integrated support panel, enabling real-time customer communication and efficient agent workflow management.",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -65,11 +65,13 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^19.6.0",
     "@evilmartians/lefthook": "^1.5.0",
+    "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-native-community/cli": "15.0.1",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.44",
+    "axios": "1.7.9",
     "commitlint": "^19.6.1",
     "del-cli": "^5.1.0",
     "eslint": "^8.51.0",
@@ -82,12 +84,15 @@
     "react-native-builder-bob": "^0.38.3",
     "release-it": "^17.10.0",
     "turbo": "^1.10.7",
-    "typescript": "^5.2.2"
+    "typescript": "5.1.6",
+    "use-sync-external-store": "^1.5.0",
+    "zustand": "^5.0.3"
   },
   "resolutions": {
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=2.0.0",
     "react": "*",
     "react-native": "*"
   },
@@ -199,5 +204,8 @@
   },
   "engines": {
     "node": ">=22.0.0"
+  },
+  "dependencies": {
+    "react-hook-form": "^7.55.0"
   }
 }

package/src/App.tsx

@@ -0,0 +1,59 @@
+import { View, StyleSheet } from 'react-native';
+import { useAppStore } from './store';
+import { ChatList } from './components/ChatList';
+import { CustomerForm } from './components/CustomerForm';
+import type { LanguageCode } from './types/Language';
+import { useEffect } from 'react';
+import { AppText } from './components/AppText';
+import { useThemeColors } from './hooks/useThemeColors';
+import { usePolling } from './hooks/usePolling';
+
+interface ComnyxProps {
+  language?: LanguageCode;
+  theme?: 'light' | 'dark';
+  fake?: boolean;
+}
+
+export function Comnyx({
+  language = 'en',
+  theme = 'dark',
+  fake = false,
+}: ComnyxProps) {
+  const { initialized, customer } = useAppStore((s) => ({
+    initialized: s.initialized,
+    customer: s.customer,
+  }));
+  const themeColors = useThemeColors();
+  usePolling();
+  useEffect(() => {
+    useAppStore.getState().setLanguage(language);
+    useAppStore.getState().setTheme(theme);
+    useAppStore.getState().setFake(fake);
+  }, [language, theme, fake]);
+
+  if (!initialized) {
+    return (
+      <View
+        style={[styles.container, { backgroundColor: themeColors.background }]}
+      >
+        <AppText localization="app.initialization.required" />
+      </View>
+    );
+  } else if (!customer) {
+    return <CustomerForm />;
+  }
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: themeColors.background }]}
+    >
+      <ChatList />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/__dev__.ts

@@ -0,0 +1,22 @@
+import { useAppStore } from './store';
+import type { LanguageCode } from './types/Language';
+
+// @ts-ignore
+global.clearStorage = async () => {
+  useAppStore.setState({ data: null });
+  console.info('Storage cleared');
+};
+
+// @ts-ignore
+global.changeLanguage = (language: string) => {
+  useAppStore.setState({ language: language as LanguageCode });
+  console.info(`Language changed to: ${language}`);
+};
+
+// @ts-ignore
+global.toggleTheme = () => {
+  const currentTheme = useAppStore.getState().theme;
+  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+  useAppStore.setState({ theme: newTheme });
+  console.info(`Theme changed to: ${newTheme}`);
+};

package/src/api/api.ts

@@ -0,0 +1,16 @@
+import axios from 'axios';
+const axiosInstance = axios.create({
+  //baseURL: 'https://api.comnyx.com',
+  baseURL: 'https://stage.comnyx.com',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 1000,
+});
+
+export function initApi(token: string) {
+  axiosInstance.defaults.headers.common['Content-Type'] = 'application/json';
+  axiosInstance.defaults.headers.common.Authorization = 'Bearer ' + token;
+}
+
+export { axiosInstance };

package/src/api/conversations.ts

@@ -0,0 +1,53 @@
+import type { ConversationResponse } from '../types/Conversation';
+import type { ApiOptions } from '../types/ApiOptions';
+import {
+  getFakeConversationResponse,
+  getFakePaginatedConversationResponse,
+} from '../data/fake/conversations';
+import { axiosInstance } from './api';
+import { dateToUnixTimestamp } from '../utils/date';
+
+const PER_PAGE = 25;
+
+export function getCustomerConversation(
+  externalId: string,
+  created_at: Date | undefined,
+  page: number = 0,
+  options: ApiOptions & { per_page?: number }
+): Promise<ConversationResponse> {
+  if (options.fake) {
+    return getFakePaginatedConversationResponse(
+      page,
+      options.per_page ?? PER_PAGE
+    );
+  }
+  return axiosInstance
+    .get<ConversationResponse>(`/api/customers/${externalId}/conversation`, {
+      params: {
+        page,
+        // per_page: PER_PAGE,
+        getOld: 1,
+        getFrom: dateToUnixTimestamp(created_at),
+      },
+    })
+    .then((res) => res.data);
+}
+
+export function getNewCustomerConversation(
+  externalId: string,
+  created_at: Date | undefined,
+  options: ApiOptions
+): Promise<ConversationResponse> {
+  if (options.fake) {
+    return getFakeConversationResponse(25, 0, 0, true);
+  }
+  return axiosInstance
+    .get<ConversationResponse>(`/api/customers/${externalId}/conversation`, {
+      params: {
+        page: 1,
+        // per_page: 25,
+        getFrom: dateToUnixTimestamp(created_at),
+      },
+    })
+    .then((res) => res.data);
+}

package/src/api/customers.ts

@@ -0,0 +1,16 @@
+import type { CreateCustomerRequest, Customer } from '../types/Customer';
+import type { ApiOptions } from '../types/ApiOptions';
+import { getFakeCustomer } from '../data/fake/customers';
+import { axiosInstance } from './api';
+
+export function createCustomer(
+  customerData: CreateCustomerRequest,
+  options: ApiOptions
+): Promise<Customer> {
+  if (options.fake) {
+    return Promise.resolve(getFakeCustomer(customerData));
+  }
+  return axiosInstance
+    .post('/api/customers/create', customerData)
+    .then((res) => res.data);
+}

package/src/api/index.ts

@@ -0,0 +1,6 @@
+export { createCustomer } from './customers';
+export {
+  getCustomerConversation,
+  getNewCustomerConversation,
+} from './conversations';
+export { sendCustomerMessage } from './messages';

package/src/api/messages.ts

@@ -0,0 +1,33 @@
+import type { MessageResponse } from '../types/MessageResponse';
+import type { ApiOptions } from '../types/ApiOptions';
+import { getFakeMessageResponse } from '../data/fake/messages';
+import { axiosInstance } from './api';
+
+export function sendCustomerMessage(
+  externalId: string,
+  content: string,
+  options: ApiOptions
+): Promise<MessageResponse> {
+  if (options.fake) {
+    return new Promise<MessageResponse>((resolve, _) => {
+      setTimeout(() => {
+        resolve(getFakeMessageResponse(content));
+      }, 500);
+    });
+  }
+  return axiosInstance
+    .post<MessageResponse>(
+      '/api/customers/message',
+      {
+        externalId,
+        content,
+      },
+      {
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+      }
+    )
+    .then((res) => res.data);
+}

package/src/components/AppText.tsx

@@ -0,0 +1,43 @@
+import { Text } from 'react-native';
+import type { TextProps } from 'react-native';
+import { LocalizationList } from '../constants/translations';
+import { useAppStore } from '../store';
+import { useThemeColors } from '../hooks/useThemeColors';
+import type { LocalizationKeys } from '../types/LocalizationKeys';
+
+interface AppTextProps extends Omit<TextProps, 'children'> {
+  localization?: keyof LocalizationKeys;
+  children?: React.ReactNode;
+}
+
+export function AppText({
+  style,
+  localization,
+  children,
+  ...props
+}: AppTextProps) {
+  const themeColors = useThemeColors();
+  const { language } = useAppStore((s) => ({
+    language: s.language,
+  }));
+
+  const localizedText = localization
+    ? (LocalizationList[language as keyof typeof LocalizationList] ||
+        LocalizationList.en)[localization]
+    : undefined;
+
+  const content = localizedText || children;
+
+  if (!content) {
+    console.warn(
+      'AppText: No content provided. Either localization or children must be provided.'
+    );
+    return null;
+  }
+
+  return (
+    <Text style={[{ color: themeColors.text }, style]} {...props}>
+      {content}
+    </Text>
+  );
+}

package/src/components/ChatList.tsx

@@ -0,0 +1,299 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useAppStore } from '../store';
+import {
+  FlatList,
+  View,
+  useWindowDimensions,
+  ActivityIndicator,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import { getCustomerConversation } from '../api';
+import type { AppConversationMessage } from '../types/Conversation';
+import { StyleSheet } from 'react-native';
+import { MessageItem } from './MessageItem';
+import { MessageInput } from './MessageInput';
+import { useThemeColors } from '../hooks/useThemeColors';
+import { AppText } from './AppText';
+import { InitFailed } from './InitFailed';
+import { EmptyList } from './EmptyList';
+
+function LoadingItem() {
+  const themeColors = useThemeColors();
+  return (
+    <View
+      style={[styles.loadingItem, { backgroundColor: themeColors.background }]}
+    >
+      <ActivityIndicator size="large" color={themeColors.primary} />
+    </View>
+  );
+}
+
+export function ChatList() {
+  const themeColors = useThemeColors();
+  const { height: windowHeight } = useWindowDimensions();
+  const MESSAGE_MIN_HEIGHT = 60;
+  const FLATLIST_PADDING = 20;
+  const MESSAGES_PER_PAGE = Math.ceil(
+    (windowHeight - FLATLIST_PADDING) / MESSAGE_MIN_HEIGHT
+  );
+  const [loading, setLoading] = useState(true);
+  const { customer, data, setData } = useAppStore((s) => ({
+    customer: s.customer,
+    data: s.data,
+    setData: s.setData,
+  }));
+  const ref = useRef<FlatList<AppConversationMessage>>(null);
+  const [page, setPage] = useState(1);
+  const nextPageStatus = useRef<'fail' | 'loading' | 'empty'>();
+  const [nexPageFailed, setNexPageFailed] = useState(false);
+  const [initFailed, setInitFailed] = useState(false);
+  const [isScrollingUp, setIsScrollingUp] = useState(false);
+  const listChangedRef = useRef(false);
+
+  const nextPage = useCallback(() => {
+    if (nextPageStatus.current) {
+      return;
+    }
+    console.log('next');
+    nextPageStatus.current = 'loading';
+    if (customer?.external_id) {
+      const newPage = page + 1;
+      setPage(newPage);
+      const firstMessage = useAppStore.getState().firstMessage;
+      getCustomerConversation(
+        customer?.external_id,
+        firstMessage?.created_at,
+        newPage,
+        {
+          fake: useAppStore.getState().fake,
+          per_page: MESSAGES_PER_PAGE,
+        }
+      )
+        .then((newData) => {
+          listChangedRef.current = true;
+          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)
+            );
+
+            const processedMessages = uniqueNewMessages.map((u) => ({
+              ...u,
+              created_at: new Date(u.created_at),
+              approved: true,
+            }));
+            if (processedMessages.length === 0) {
+              nextPageStatus.current = 'empty';
+            } else {
+              nextPageStatus.current = undefined;
+            }
+            return [...(prevData ?? []), ...processedMessages];
+          });
+        })
+        .catch((_) => {
+          nextPageStatus.current = 'fail';
+          setNexPageFailed(true);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, [MESSAGES_PER_PAGE, customer?.external_id, page, setData]);
+
+  const renderItem = useCallback(
+    ({ item }: { item: AppConversationMessage }) => <MessageItem item={item} />,
+    []
+  );
+
+  const handleScroll = useCallback(
+    (event: any) => {
+      const currentScrollY = event.nativeEvent.contentOffset.y;
+      const contentHeight = event.nativeEvent.contentSize.height;
+      const scrollViewHeight = event.nativeEvent.layoutMeasurement.height;
+      setIsScrollingUp(currentScrollY > 100);
+
+      if (currentScrollY >= contentHeight - scrollViewHeight - 200) {
+        nextPage();
+      }
+    },
+    [nextPage]
+  );
+
+  const scrollToBottom = useCallback(
+    (animated: boolean) => {
+      if (ref.current && data?.length) {
+        ref.current.scrollToOffset({
+          offset: 0,
+          animated,
+        });
+      }
+    },
+    [data]
+  );
+
+  useEffect(() => {
+    if (customer?.external_id && !initFailed) {
+      getCustomerConversation(customer?.external_id, new Date(), 1, {
+        fake: useAppStore.getState().fake,
+        per_page: MESSAGES_PER_PAGE,
+      })
+        .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)
+            );
+            const processedMessages = uniqueNewMessages.map((u) => ({
+              ...u,
+              created_at: new Date(u.created_at),
+              approved: true,
+            }));
+            useAppStore.setState({
+              firstMessage: processedMessages[0],
+            });
+            if (processedMessages.length === 0) {
+              setLoading(false);
+            }
+            return processedMessages;
+          });
+        })
+        .catch((e) => {
+          setInitFailed(true);
+          console.error(e);
+        });
+    }
+  }, [MESSAGES_PER_PAGE, customer?.external_id, initFailed, setData]);
+
+  if (nexPageFailed) {
+    return (
+      <View
+        style={[
+          styles.retryContainer,
+          { backgroundColor: themeColors.background },
+        ]}
+      >
+        <TouchableOpacity
+          style={[styles.retryButton, { backgroundColor: themeColors.primary }]}
+          onPress={() => {
+            setNexPageFailed(false);
+            nextPageStatus.current = undefined;
+            nextPage();
+          }}
+        >
+          <AppText
+            localization="chat.load.error"
+            style={[styles.retryText, { color: themeColors.background }]}
+          />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  if (initFailed) {
+    return <InitFailed setInitFailed={setInitFailed} />;
+  }
+  return (
+    <View
+      style={[styles.container, { backgroundColor: themeColors.background }]}
+    >
+      <FlatList
+        ref={ref}
+        data={data}
+        inverted
+        renderItem={renderItem}
+        contentContainerStyle={[
+          styles.contentContainer,
+          { backgroundColor: themeColors.background },
+        ]}
+        style={styles.list}
+        ListEmptyComponent={
+          !loading && (!data || data.length === 0) ? <EmptyList /> : null
+        }
+        ListFooterComponent={loading ? <LoadingItem /> : null}
+        keyExtractor={(item) => item.id + '-' + item.created_at}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={10}
+        windowSize={21}
+        initialNumToRender={MESSAGES_PER_PAGE}
+        getItemLayout={(_, index) => ({
+          length: MESSAGE_MIN_HEIGHT + 10,
+          offset: (MESSAGE_MIN_HEIGHT + 10) * index,
+          index,
+        })}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+      />
+      {isScrollingUp && (
+        <TouchableOpacity
+          style={[
+            styles.scrollDownButton,
+            { backgroundColor: themeColors.background },
+          ]}
+          onPress={() => scrollToBottom(true)}
+        >
+          <Image
+            source={require('../assets/down.png')}
+            style={[styles.scrollUpIcon, { tintColor: themeColors.text }]}
+          />
+        </TouchableOpacity>
+      )}
+      <MessageInput scrollToBottom={scrollToBottom} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  list: {
+    flex: 1,
+  },
+  contentContainer: {
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+  },
+  loadingItem: {
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollDownButton: {
+    position: 'absolute',
+    right: 20,
+    bottom: '15%',
+    borderRadius: 25,
+    padding: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  scrollUpIcon: {
+    width: 24,
+    height: 24,
+  },
+  retryContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  retryButton: {
+    padding: 15,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  retryText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});