@droppii-org/chat-mobile 0.2.0

package/src/screens/inbox/Inbox.tsx

@@ -0,0 +1,164 @@
+import { memo, useCallback, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { TabView } from 'react-native-tab-view';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import { MessagesTab } from './MessagesTab';
+
+interface InboxProps {
+  applicationType: string;
+  onPressThread?: (item: string) => void;
+  onPressSearch?: () => void;
+  onPressEdit?: () => void;
+  onPressGroup?: () => void;
+}
+
+type TabRoute = { key: string; title: string };
+
+const Inbox = memo(
+  ({
+    applicationType,
+    onPressThread,
+    onPressSearch,
+    onPressEdit,
+    onPressGroup,
+  }: InboxProps) => {
+    const [index, setIndex] = useState(0);
+    const [routes] = useState<TabRoute[]>([
+      { key: 'messages', title: 'Tin nhắn' },
+    ]);
+
+    const renderScene = useCallback(
+      ({ route }: { route: TabRoute }) => {
+        if (route.key === 'messages') {
+          return (
+            <MessagesTab
+              applicationType={applicationType}
+              onPressThread={onPressThread}
+            />
+          );
+        }
+        return null;
+      },
+      [applicationType, onPressThread]
+    );
+
+    const renderTabBar = useCallback(
+      (props: { navigationState: { index: number; routes: TabRoute[] } }) => (
+        <KContainer.View row alignItems="center" style={styles.tabBar}>
+          {/* Tab labels */}
+          <KContainer.View row flex>
+            {props.navigationState.routes.map((route, i) => {
+              const isActive = props.navigationState.index === i;
+              return (
+                <KContainer.Touchable
+                  key={route.key}
+                  onPress={() => setIndex(i)}
+                  paddingV="0.75rem"
+                  marginR="1rem"
+                  style={styles.tabItem}
+                  activeOpacity={0.7}
+                >
+                  <KLabel.Text
+                    typo="TextNmBold"
+                    color={
+                      isActive
+                        ? KColors.palette.primary.w400
+                        : KColors.palette.gray.w500
+                    }
+                  >
+                    {route.title}
+                  </KLabel.Text>
+                  {isActive && (
+                    <KContainer.View style={styles.activeIndicator} />
+                  )}
+                </KContainer.Touchable>
+              );
+            })}
+          </KContainer.View>
+
+          {/* Action buttons */}
+          <KContainer.View row alignItems="center" style={styles.actionGroup}>
+            <KContainer.Touchable
+              onPress={onPressSearch}
+              padding="0.5rem"
+              activeOpacity={0.7}
+            >
+              <KImage.VectorIcons
+                name="magnify"
+                provider="MaterialCommunityIcons"
+                size={24}
+                color={KColors.palette.primary.w400}
+              />
+            </KContainer.Touchable>
+            <KContainer.Touchable
+              onPress={onPressEdit}
+              padding="0.5rem"
+              activeOpacity={0.7}
+            >
+              <KImage.VectorIcons
+                name="square-edit-outline"
+                provider="MaterialCommunityIcons"
+                size={24}
+                color={KColors.palette.primary.w400}
+              />
+            </KContainer.Touchable>
+            <KContainer.Touchable
+              onPress={onPressGroup}
+              padding="0.5rem"
+              activeOpacity={0.7}
+            >
+              <KImage.VectorIcons
+                name="account-group-outline"
+                provider="MaterialCommunityIcons"
+                size={24}
+                color={KColors.palette.primary.w400}
+              />
+            </KContainer.Touchable>
+          </KContainer.View>
+        </KContainer.View>
+      ),
+      [onPressSearch, onPressEdit, onPressGroup]
+    );
+
+    return (
+      <KContainer.Page flex edges={['top', 'bottom']}>
+        <TabView
+          navigationState={{ index, routes }}
+          renderScene={renderScene}
+          renderTabBar={renderTabBar}
+          onIndexChange={setIndex}
+          swipeEnabled={routes.length > 1}
+        />
+      </KContainer.Page>
+    );
+  }
+);
+
+Inbox.displayName = 'Inbox';
+
+export default Inbox;
+
+const styles = StyleSheet.create({
+  tabBar: {
+    borderBottomWidth: 0.5,
+    borderBottomColor: KColors.palette.gray.w100,
+    paddingHorizontal: 12,
+  },
+  tabItem: {
+    position: 'relative',
+    paddingTop: 2,
+    paddingBottom: 0,
+  },
+  activeIndicator: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 3,
+    borderRadius: 4,
+    backgroundColor: KColors.palette.primary.w400,
+  },
+  actionGroup: {
+    gap: 4,
+  },
+});

package/src/screens/inbox/MessagesTab.tsx

@@ -0,0 +1,62 @@
+import { memo, useCallback } from 'react';
+import { GestureResponderEvent } from 'react-native';
+import { KContainer, KDivider, KLabel, KColors } from '@droppii/libs';
+import { useConversationList } from '../../hooks/useConversationList';
+import { ThreadCard } from '../../components/ThreadCard';
+import { useConversationStore } from '../../store';
+
+interface MessagesTabProps {
+  applicationType: string;
+  onPressThread?: (item: string) => void;
+}
+
+const Separator = () => <KDivider type="line" size="hairline" />;
+const keyExtractor = (item: string) => item;
+
+export const MessagesTab = memo(
+  ({ applicationType, onPressThread }: MessagesTabProps) => {
+    const data = useConversationStore((state) => state.list);
+
+    const { isLoading, refetch, isRefetching } = useConversationList({
+      applicationType,
+      page: 1,
+    });
+
+    const handleThreadPress = useCallback(
+      (params: { item: string; event: GestureResponderEvent }) => {
+        onPressThread?.(params.item);
+      },
+      [onPressThread]
+    );
+
+    const renderItem = useCallback(
+      ({ item }: { item: string }) => (
+        <ThreadCard item={item} onPress={handleThreadPress} />
+      ),
+      [handleThreadPress]
+    );
+
+    const EmptyComponent = isLoading ? null : (
+      <KContainer.View center flex paddingV="3rem">
+        <KLabel.Text typo="TextSmNormal" color={KColors.palette.gray.w400}>
+          Không có tin nhắn nào
+        </KLabel.Text>
+      </KContainer.View>
+    );
+
+    return (
+      <KContainer.FlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        ItemSeparatorComponent={Separator}
+        ListEmptyComponent={EmptyComponent}
+        refreshing={isRefetching}
+        onRefresh={refetch}
+        showsVerticalScrollIndicator={false}
+      />
+    );
+  }
+);
+
+MessagesTab.displayName = 'MessagesTab';

package/src/screens/inbox/index.ts

@@ -0,0 +1,2 @@
+export { default as Inbox } from './Inbox';
+export { MessagesTab } from './MessagesTab';

package/src/services/apis.ts

@@ -0,0 +1,60 @@
+import { type AxiosInstance } from 'axios';
+import type {
+  DConversationItem,
+  DConversationQueryParams,
+} from '../types/chat';
+import OpenIMSDK, { LoginStatus } from '@droppii/openim-rn-client-sdk';
+import type { BaseResponse, GetOpenIMTokenResponse } from '../types/auth';
+import { Platform } from 'react-native';
+
+let apiInstance: AxiosInstance | null = null;
+
+export namespace ChatAPI {
+  export function initApiInstance(api: AxiosInstance): void {
+    apiInstance = api;
+  }
+
+  export const getLoginStatus = async (operationID?: string) => {
+    return (await OpenIMSDK.getLoginStatus(operationID)) === LoginStatus.Logged;
+  };
+
+  export const login = async (
+    instance: AxiosInstance,
+    operationID?: string
+  ) => {
+    const isLoggedIn = await getLoginStatus(operationID);
+
+    if (isLoggedIn) return;
+
+    const response = await instance.post<BaseResponse<GetOpenIMTokenResponse>>(
+      `/chat-service/v1/auth/token?platform=${Platform.OS.toUpperCase()}`
+    );
+
+    const token = response?.data?.data;
+
+    if (token == null) return;
+
+    return OpenIMSDK.login({ userID: token.id, token: token.token });
+  };
+
+  export const logout = async (operationID?: string) => {
+    return OpenIMSDK.logout(operationID);
+  };
+
+  export const getUser = async (operationID?: string | undefined) => {
+    return OpenIMSDK.getSelfUserInfo(operationID);
+  };
+
+  export async function queryConversations(params: DConversationQueryParams) {
+    if (!apiInstance) {
+      throw new Error(
+        'apiInstance is not initialized. Call initApiInstance() first.'
+      );
+    }
+    const response = await apiInstance.post<BaseResponse<DConversationItem[]>>(
+      '/chat-service/v1/app/conversations/query',
+      params
+    );
+    return response.data;
+  }
+}

package/src/services/index.ts

@@ -0,0 +1,2 @@
+export { ChatAPI } from './apis';
+export { ChatMessageAPI } from './message';

package/src/services/message.ts

@@ -0,0 +1,61 @@
+import OpenIMSDK, {
+  ViewType,
+  type AdvancedGetMessageResult,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
+import type { DMessageItem } from '../types/chat';
+
+const DEFAULT_PAGE_SIZE = 20;
+
+export type HistoryMessageResult = AdvancedGetMessageResult & {
+  lastMinSeq?: number;
+};
+
+export namespace ChatMessageAPI {
+  export async function fetchHistoryMessages(
+    conversationID: string,
+    options?: {
+      count?: number;
+      startClientMsgID?: string;
+      lastMinSeq?: number;
+    }
+  ): Promise<HistoryMessageResult> {
+    return OpenIMSDK.getAdvancedHistoryMessageList({
+      conversationID,
+      count: options?.count ?? DEFAULT_PAGE_SIZE,
+      startClientMsgID: options?.startClientMsgID ?? '',
+      viewType: ViewType.History,
+      // ...(options?.startClientMsgID
+      //   ? { lastMinSeq: options.lastMinSeq ?? 0 }
+      //   : {}),
+    } as Parameters<
+      typeof OpenIMSDK.getAdvancedHistoryMessageList
+    >[0]) as Promise<HistoryMessageResult>;
+  }
+
+  export async function sendTextMessage(params: {
+    text: string;
+    recvID?: string;
+    groupID?: string;
+  }): Promise<DMessageItem> {
+    const message = await OpenIMSDK.createTextMessage(params.text);
+
+    const sentMessage = await OpenIMSDK.sendMessage({
+      recvID: params.recvID ?? '',
+      groupID: params.groupID ?? '',
+      message,
+    });
+
+    return sentMessage;
+  }
+
+  export async function markConversationAsRead(conversationID: string) {
+    return OpenIMSDK.markConversationMessageAsRead(conversationID);
+  }
+
+  export async function getCurrentUserId() {
+    return OpenIMSDK.getLoginUserID();
+  }
+}
+
+export type { MessageItem };

package/src/store/conversation.ts

@@ -0,0 +1,116 @@
+import { create } from 'zustand';
+import {
+  dConversationCompare,
+  mergeOpenIMIntoConversation,
+} from '../utils/conversation';
+import type { DConversationItem } from '../types/chat';
+import type {
+  ConversationItem,
+  MessageItem,
+} from '@droppii/openim-rn-client-sdk';
+
+type ConversationID = string;
+
+export interface ConversationStore {
+  currentConversationId?: ConversationID;
+  setCurrentConversation(id: ConversationID): void;
+  getCurrentConversation(): DConversationItem | undefined;
+  list: ConversationID[];
+  map: Record<ConversationID, DConversationItem>;
+  /** Signal incremented when a truly new conversation arrives and a full refetch is needed. */
+  newConversationSignal: number;
+  updateConversations(conversations: DConversationItem[]): void;
+  /**
+   * Patches existing conversations with real-time data from OpenIM events.
+   * Returns true if any conversation was not found in the store (triggers refetch).
+   */
+  mergeOpenIMConversations(conversations: ConversationItem[]): boolean;
+  removeConversation(id: ConversationID): void;
+  updateLastMessage(id: ConversationID, message: MessageItem): void;
+}
+
+export const useConversationStore = create<ConversationStore>()((set, get) => ({
+  list: [],
+  map: {},
+  newConversationSignal: 0,
+  setCurrentConversation(id) {
+    set({ currentConversationId: id });
+  },
+  getCurrentConversation() {
+    const id = get().currentConversationId;
+    if (id == null) return;
+
+    return get().map[id];
+  },
+  updateConversations(conversations) {
+    const newMap = conversations.reduce(
+      (pre, curr) => {
+        pre[curr.conversationId] = curr;
+        return pre;
+      },
+      { ...get().map }
+    );
+    const newList = Object.keys(newMap).sort((a, b) =>
+      dConversationCompare(newMap[a]!, newMap[b]!)
+    );
+    set({
+      map: newMap,
+      list: newList,
+    });
+  },
+  mergeOpenIMConversations(conversations) {
+    const currentMap = get().map;
+    let hasUnknown = false;
+    let changed = false;
+
+    const nextMap = { ...currentMap };
+    for (const openim of conversations) {
+      const existing = currentMap[openim.conversationID];
+      if (existing == null) {
+        hasUnknown = true;
+        continue;
+      }
+      nextMap[openim.conversationID] = mergeOpenIMIntoConversation(
+        existing,
+        openim
+      );
+      changed = true;
+    }
+
+    if (changed) {
+      const newList = Object.keys(nextMap).sort((a, b) =>
+        dConversationCompare(nextMap[a]!, nextMap[b]!)
+      );
+      set({ map: nextMap, list: newList });
+    }
+
+    if (hasUnknown) {
+      set((s) => ({ newConversationSignal: s.newConversationSignal + 1 }));
+    }
+
+    return hasUnknown;
+  },
+  removeConversation(id) {
+    const newMap = { ...get().map };
+    delete newMap[id];
+
+    set({
+      map: newMap,
+      list: get().list.filter((item) => item !== id),
+    });
+  },
+  updateLastMessage(id, message) {
+    const conversation = get().map[id];
+    if (conversation == null) return;
+    set({
+      map: {
+        [id]: { ...conversation, lastMessage: message },
+        ...get().map,
+      },
+    });
+  },
+}));
+
+export const useConversation = (id: string): DConversationItem | undefined => {
+  return useConversationStore((state) => state.map[id]);
+};

package/src/store/index.ts

@@ -0,0 +1,3 @@
+export * from './storeConfig';
+export * from './user';
+export * from './conversation';

package/src/store/storeConfig.ts

@@ -0,0 +1,19 @@
+import { createMMKV } from 'react-native-mmkv';
+import { createJSONStorage, type StateStorage } from 'zustand/middleware';
+
+const storage = createMMKV();
+
+export const stateStorage: StateStorage<void> = {
+  setItem: (key, value) => {
+    return storage.set(key, value);
+  },
+  getItem: (key) => {
+    const value = storage.getString(key);
+    return value ?? null;
+  },
+  removeItem: (key) => {
+    return storage.remove(key);
+  },
+};
+
+export const zustandStorage = createJSONStorage(() => stateStorage);

package/src/store/user.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand';
+import { LoginStatus, type SelfUserInfo } from '@droppii/openim-rn-client-sdk';
+import { SyncStatus } from '../types/auth';
+
+export interface UserStore {
+  user?: SelfUserInfo;
+  setUser: (user: SelfUserInfo) => void;
+  connectStatus: LoginStatus;
+  updateConnectStatus: (status: LoginStatus) => void;
+  syncStatus: SyncStatus;
+  updateSyncStatus: (status: SyncStatus) => void;
+}
+
+export const useUserStore = create<UserStore>()((set) => ({
+  connectStatus: LoginStatus.Logout,
+  syncStatus: SyncStatus.Loading,
+  setUser(user) {
+    set({ user });
+  },
+  updateConnectStatus(connectStatus) {
+    set({ connectStatus });
+  },
+  updateSyncStatus(syncStatus) {
+    set({ syncStatus });
+  },
+}));

package/src/translation/index.ts

@@ -0,0 +1,30 @@
+import i18n from './resources/i18n';
+
+export const replaceAll = (
+  target: string | undefined,
+  oldStr: string,
+  newStr: string
+) => {
+  return typeof target === 'string'
+    ? target?.replace(new RegExp(oldStr, 'g'), newStr) || newStr
+    : '';
+};
+
+export const replaceMulti = (target: string | undefined, param: any) => {
+  if (typeof target !== 'string') {
+    return '';
+  }
+  let out = target;
+  for (const key in param) {
+    if (key) {
+      const textReplace = '{{' + key + '}}';
+      out = replaceAll(out, textReplace, String(param[key]));
+    }
+  }
+  return out;
+};
+
+export const trans = (key: string, params?: Record<string, any>) => {
+  const text = i18n?.vi?.[key] || '';
+  return params ? replaceMulti(text, params) : text;
+};

package/src/translation/resources/i18n.ts

@@ -0,0 +1,8 @@
+const i18nKey: Record<string, string> = {
+  thread_card_bot_crm_name: 'Droppii Hỗ Trợ',
+  thread_card_fallback_name: 'Người dùng',
+};
+
+export default {
+  vi: i18nKey,
+};

package/src/types/auth.ts

@@ -0,0 +1,25 @@
+export type BaseResponse<T = unknown> = {
+  statusCode: number;
+  message: string | null;
+  metadata: unknown;
+  pageable: Pageable;
+  data: T;
+};
+
+type Pageable = {
+  pageNumber: number;
+  pageSize: number;
+  totalPages: number;
+  totalElements: number;
+};
+
+export type GetOpenIMTokenResponse = {
+  id: string;
+  token: string;
+};
+
+export enum SyncStatus {
+  Loading = 0,
+  Success = 1,
+  Failed = 2,
+}