@droppii-org/chat-mobile 0.2.0

package/src/components/Avatar/DoubleAvatar.tsx

@@ -0,0 +1,89 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KColors } from '@droppii/libs';
+import { SingleAvatar } from './SingleAvatar';
+
+interface DoubleAvatarProps {
+  primarySource: string | null | undefined;
+  secondarySource: string | null | undefined;
+  size: number;
+  borderColor: string;
+  borderWidth: number;
+  placeholderColor: string;
+  primaryFullName?: string;
+  secondaryFullName?: string;
+}
+
+export const DoubleAvatar = memo(
+  ({
+    primarySource,
+    secondarySource,
+    size,
+    borderColor,
+    borderWidth,
+    placeholderColor,
+    primaryFullName,
+    secondaryFullName,
+  }: DoubleAvatarProps) => {
+    const innerSize = Math.round(size * 0.6875); // 33/48 ratio
+    const offset = Math.round(size * 0.3125); // 15/48 ratio
+
+    return (
+      <KContainer.View
+        style={[styles.doubleAvatarContainer, { width: size, height: size }]}
+      >
+        <KContainer.View
+          style={[
+            styles.doubleAvatarChild,
+            styles.doubleAvatarTop,
+            { width: innerSize, height: innerSize, right: offset },
+          ]}
+        >
+          <SingleAvatar
+            source={primarySource}
+            size={innerSize}
+            borderColor={borderColor}
+            borderWidth={borderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={primaryFullName}
+          />
+        </KContainer.View>
+        <KContainer.View
+          style={[
+            styles.doubleAvatarChild,
+            styles.doubleAvatarBottom,
+            { width: innerSize, height: innerSize, left: offset },
+          ]}
+        >
+          <SingleAvatar
+            source={secondarySource}
+            size={innerSize}
+            borderColor={borderColor}
+            borderWidth={borderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={secondaryFullName}
+          />
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+DoubleAvatar.displayName = 'DoubleAvatar';
+
+const styles = StyleSheet.create({
+  doubleAvatarContainer: {
+    position: 'relative',
+  },
+  doubleAvatarChild: {
+    position: 'absolute',
+  },
+  doubleAvatarTop: {
+    top: 0,
+  },
+  doubleAvatarBottom: {
+    bottom: 0,
+  },
+});

package/src/components/Avatar/SingleAvatar.tsx

@@ -0,0 +1,74 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import { getInitials, TYPO_MAP } from './Avatar.utils';
+
+interface SingleAvatarProps {
+  source: string | null | undefined;
+  size: number;
+  borderColor: string;
+  borderWidth: number;
+  placeholderColor: string;
+  backgroundColor: string;
+  fullName?: string;
+}
+
+export const SingleAvatar = memo(
+  ({
+    source,
+    size,
+    borderColor,
+    borderWidth,
+    placeholderColor,
+    backgroundColor,
+    fullName,
+  }: SingleAvatarProps) => {
+    if (source) {
+      return (
+        <KImage.Avatar
+          uri={source}
+          size={size === 24 ? 'sm' : size === 48 ? 'md' : 'lg'}
+          style={{
+            borderWidth,
+            borderColor,
+            width: size,
+            height: size,
+          }}
+        />
+      );
+    }
+
+    return (
+      <KContainer.View
+        center
+        style={[
+          styles.placeholderAvatar,
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderWidth,
+            borderColor,
+            backgroundColor: backgroundColor || placeholderColor,
+          },
+        ]}
+      >
+        <KLabel.Text
+          typo={TYPO_MAP[size as keyof typeof TYPO_MAP] || 'TextNmBold'}
+          color={KColors.palette.primary.w400}
+        >
+          {getInitials(fullName)}
+        </KLabel.Text>
+      </KContainer.View>
+    );
+  }
+);
+
+SingleAvatar.displayName = 'SingleAvatar';
+
+const styles = StyleSheet.create({
+  placeholderAvatar: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/Avatar/index.ts

@@ -0,0 +1,5 @@
+export { default as Avatar } from './Avatar';
+export { SingleAvatar } from './SingleAvatar';
+export { DoubleAvatar } from './DoubleAvatar';
+export { AvatarBadge } from './AvatarBadge';
+export type { AvatarProps } from './Avatar.types';

package/src/components/ThreadCard/AvatarSection.tsx

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import { Avatar } from '../Avatar';
+import { DChatCategory } from '../../types/chat';
+import type { DConversationItem } from '../../types/chat';
+
+interface AvatarSectionProps extends Partial<
+  Pick<DConversationItem, 'chatCategory' | 'applicationType' | 'chatType'>
+> {
+  avatar: string | null;
+  fullName: string;
+}
+
+export const AvatarSection = memo(
+  ({ avatar, fullName, chatCategory, applicationType }: AvatarSectionProps) => {
+    if (
+      chatCategory === DChatCategory.BIZ_BOT_CRM ||
+      chatCategory === DChatCategory.BIZ_BOT_PDP
+    ) {
+      return (
+        <Avatar
+          source={avatar}
+          fullName={fullName}
+          badge={{ variant: 'bot' }}
+        />
+      );
+    }
+
+    if (applicationType === 'MALL') {
+      return (
+        <Avatar
+          source={avatar}
+          fullName={fullName}
+          badge={{ variant: 'mall' }}
+        />
+      );
+    }
+
+    return <Avatar source={avatar} fullName={fullName} />;
+  }
+);
+
+AvatarSection.displayName = 'AvatarSection';

package/src/components/ThreadCard/NamePrefixIcon.tsx

@@ -0,0 +1,45 @@
+import { memo } from 'react';
+import { KContainer, KImage, KColors } from '@droppii/libs';
+import { DChatCategory, DChatType } from '../../types/chat';
+
+interface NamePrefixIconProps {
+  chatCategory?: DChatCategory;
+  chatType?: DChatType;
+}
+
+export const NamePrefixIcon = memo(
+  ({ chatCategory, chatType }: NamePrefixIconProps) => {
+    if (
+      chatCategory === DChatCategory.BIZ_BOT_CRM ||
+      chatCategory === DChatCategory.BIZ_BOT_PDP
+    ) {
+      return (
+        <KContainer.View marginR="0.25rem">
+          <KImage.VectorIcons
+            name="robot-outline"
+            provider="MaterialCommunityIcons"
+            size={14}
+            color={KColors.palette.primary.w400}
+          />
+        </KContainer.View>
+      );
+    }
+
+    if (chatType === DChatType.GROUP) {
+      return (
+        <KContainer.View marginR="0.25rem">
+          <KImage.VectorIcons
+            name="account-multiple-outline"
+            provider="MaterialCommunityIcons"
+            size={14}
+            color={KColors.palette.gray.w500}
+          />
+        </KContainer.View>
+      );
+    }
+
+    return null;
+  }
+);
+
+NamePrefixIcon.displayName = 'NamePrefixIcon';

package/src/components/ThreadCard/ThreadCard.tsx

@@ -0,0 +1,145 @@
+import { memo, useCallback } from 'react';
+import { StyleSheet, type GestureResponderEvent } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import { DChatCategory } from '../../types/chat';
+import { AvatarSection } from './AvatarSection';
+import { NamePrefixIcon } from './NamePrefixIcon';
+import { UnreadBadge } from './UnreadBadge';
+import { formatTimestamp, getLastMessageText } from './thread-card.utils';
+import Images from '../../assets/images';
+import { useConversation, useUserStore } from '../../store';
+
+interface ThreadCardProps {
+  item: string;
+  onPress?: (params: { item: string; event: GestureResponderEvent }) => void;
+}
+
+const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
+  const {
+    peer,
+    chatCategory,
+    lastMessage,
+    unreadCount = 0,
+    isMuted,
+    pinnedAt,
+    applicationType,
+    chatType,
+    latestMsgSendTime,
+  } = useConversation(item) ?? {};
+
+  const fullName = peer?.fullName ?? peer?.username ?? '';
+  const hasUnread = unreadCount > 0;
+  const timestamp = formatTimestamp(
+    latestMsgSendTime ?? lastMessage?.sendTime ?? null
+  );
+  const currentUserId = useUserStore((s) => s.user?.userID);
+  const lastMessageText = getLastMessageText(lastMessage, currentUserId);
+
+  const handlePress = useCallback(
+    (event: GestureResponderEvent) => {
+      onPress?.({ item, event });
+    },
+    [item, onPress]
+  );
+
+  return (
+    <KContainer.Touchable
+      row
+      alignItems="center"
+      paddingH="0.75rem"
+      paddingV="0.75rem"
+      onPress={handlePress}
+      activeOpacity={0.7}
+    >
+      <AvatarSection
+        avatar={peer?.avatar ?? null}
+        fullName={fullName}
+        chatCategory={chatCategory}
+        applicationType={applicationType}
+        chatType={chatType}
+      />
+
+      {/* Chat-Content */}
+      <KContainer.View flex marginL="0.5rem" paddingB={2}>
+        {/* Row-Title */}
+        <KContainer.View row alignItems="center">
+          <NamePrefixIcon chatCategory={chatCategory} chatType={chatType} />
+          <KContainer.VisibleView
+            visible={
+              chatCategory === DChatCategory.BIZ_BOT_CRM ||
+              chatCategory === DChatCategory.BIZ_BOT_PDP
+            }
+          >
+            <KImage.Base
+              uri={Images.ICON_BOT}
+              size={14}
+              style={styles.botIcon}
+            />
+          </KContainer.VisibleView>
+          <KLabel.Text
+            typo={hasUnread ? 'TextMdBold' : 'TextMdNormal'}
+            numberOfLines={1}
+            color={KColors.black}
+            flex
+          >
+            {fullName}
+          </KLabel.Text>
+          <KContainer.VisibleView visible={!!isMuted}>
+            <KContainer.View marginL="0.25rem">
+              <KImage.VectorIcons
+                name="bell-off"
+                provider="MaterialCommunityIcons"
+                size={16}
+                color={KColors.palette.gray.w500}
+              />
+            </KContainer.View>
+          </KContainer.VisibleView>
+          <KContainer.VisibleView visible={Boolean(timestamp)}>
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={KColors.palette.gray.w400}
+              marginL="0.25rem"
+            >
+              {timestamp}
+            </KLabel.Text>
+          </KContainer.VisibleView>
+        </KContainer.View>
+
+        {/* In-Text */}
+        <KContainer.View row alignItems="center">
+          <KLabel.Text
+            typo={hasUnread ? 'TextNmMedium' : 'TextNmNormal'}
+            color={hasUnread ? KColors.black : KColors.gray.normal}
+            numberOfLines={1}
+            flex
+          >
+            {lastMessageText}
+          </KLabel.Text>
+          <KContainer.VisibleView visible={Boolean(pinnedAt)}>
+            <KContainer.View marginL="0.5rem">
+              <KImage.VectorIcons
+                name="pin-outline"
+                provider="MaterialCommunityIcons"
+                size={14}
+                color={KColors.palette.gray.w400}
+              />
+            </KContainer.View>
+          </KContainer.VisibleView>
+          <UnreadBadge count={unreadCount} />
+        </KContainer.View>
+      </KContainer.View>
+    </KContainer.Touchable>
+  );
+});
+
+ThreadCard.displayName = 'ThreadCard';
+
+export default ThreadCard;
+
+const styles = StyleSheet.create({
+  botIcon: {
+    width: 16,
+    height: 16,
+    marginRight: 4,
+  },
+});

package/src/components/ThreadCard/UnreadBadge.tsx

@@ -0,0 +1,35 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KLabel, KColors } from '@droppii/libs';
+
+interface UnreadBadgeProps {
+  count: number;
+}
+
+export const UnreadBadge = memo(({ count }: UnreadBadgeProps) => {
+  if (count <= 0) return null;
+
+  const label = count > 99 ? '99+' : String(count);
+
+  return (
+    <KContainer.View center marginL="0.5rem" style={styles.badge}>
+      <KLabel.Text typo="Text2XsBold" color={KColors.white}>
+        {label}
+      </KLabel.Text>
+    </KContainer.View>
+  );
+});
+
+UnreadBadge.displayName = 'UnreadBadge';
+
+const styles = StyleSheet.create({
+  badge: {
+    minWidth: 19,
+    height: 19,
+    borderRadius: 32,
+    paddingHorizontal: 3,
+    backgroundColor: KColors.palette.danger.w400,
+    borderWidth: 2,
+    borderColor: KColors.white,
+  },
+});

package/src/components/ThreadCard/index.ts

@@ -0,0 +1,4 @@
+export { default as ThreadCard } from './ThreadCard';
+export { AvatarSection } from './AvatarSection';
+export { NamePrefixIcon } from './NamePrefixIcon';
+export { UnreadBadge } from './UnreadBadge';

package/src/components/ThreadCard/thread-card.utils.ts

@@ -0,0 +1,68 @@
+import { MessageType } from '@droppii/openim-rn-client-sdk';
+import type { DMessageItem } from '../../types/chat';
+
+const extractTextContent = (message: DMessageItem): string => {
+  if (message.textElem?.content) return message.textElem.content;
+  try {
+    const parsed = JSON.parse(message.content) as { content?: string };
+    return parsed.content ?? '';
+  } catch {
+    return message.content ?? '';
+  }
+};
+
+export const getLastMessageText = (
+  message: DMessageItem | undefined,
+  currentUserId?: string
+): string => {
+  if (!message) return '';
+  if (message.contentType !== MessageType.TextMessage) return '';
+
+  const text = extractTextContent(message);
+  if (currentUserId && message.sendID === currentUserId) {
+    return `Bạn: ${text}`;
+  }
+  return text;
+};
+
+export const formatTimestamp = (ts: number | string | null): string => {
+  if (!ts) return '';
+
+  try {
+    const date = new Date(ts);
+    if (isNaN(date.getTime())) return '';
+
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+    const dateOnly = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate()
+    );
+
+    if (dateOnly.getTime() === today.getTime()) {
+      const h = date.getHours().toString().padStart(2, '0');
+      const m = date.getMinutes().toString().padStart(2, '0');
+      return `${h}:${m}`;
+    }
+
+    if (dateOnly.getTime() === yesterday.getTime()) {
+      return 'Hôm qua';
+    }
+
+    const daysAgo = Math.floor(
+      (today.getTime() - dateOnly.getTime()) / (24 * 60 * 60 * 1000)
+    );
+    if (daysAgo > 0 && daysAgo < 7) {
+      const dayNames = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
+      return dayNames[date.getDay()] ?? '';
+    }
+
+    const d = date.getDate().toString().padStart(2, '0');
+    const mo = (date.getMonth() + 1).toString().padStart(2, '0');
+    return `${d}/${mo}`;
+  } catch {
+    return '';
+  }
+};

package/src/core/index.ts

@@ -0,0 +1,10 @@
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import { useUserListener } from './useUserListener';
+import { useChatListener } from './useChatListener';
+
+export const initChatSdk = OpenIMSDK.initSDK.bind(OpenIMSDK);
+
+export const useChatSdk = () => {
+  useUserListener();
+  useChatListener();
+};

package/src/core/useChatListener.ts

@@ -0,0 +1,85 @@
+import OpenIMSDK, {
+  OpenIMEvent,
+  type ConversationItem,
+  type GroupMemberItem,
+  type MessageItem,
+  type RevokedInfo,
+} from '@droppii/openim-rn-client-sdk';
+import { useCallback, useEffect } from 'react';
+import { useConversationStore } from '../store/conversation';
+import { getConversationID } from '../utils/conversation';
+
+export const useChatListener = () => {
+  const onRecvNewMessages = useCallback((messages: MessageItem[]) => {
+    console.log('onRecvNewMessages', messages);
+    messages.map((message) => {
+      const conversationID = getConversationID(
+        message.sessionType,
+        message.sendID,
+        message.recvID
+      );
+      useConversationStore
+        .getState()
+        .updateLastMessage(conversationID, message);
+    });
+  }, []);
+
+  const onNewRecvMessageRevoked = useCallback((revokedInfo: RevokedInfo) => {
+    console.log('onNewRecvMessageRevoked', revokedInfo);
+  }, []);
+
+  const onConversationChanged = useCallback(
+    (conversations: ConversationItem[]) => {
+      console.log('onConversationChanged', conversations);
+      useConversationStore.getState().mergeOpenIMConversations(conversations);
+    },
+    []
+  );
+
+  const onNewConversation = useCallback((conversations: ConversationItem[]) => {
+    console.log('onNewConversation', conversations);
+    // mergeOpenIMConversations increments newConversationSignal when a conversation
+    // isn't in the store yet, which triggers a full refetch in useConversationList.
+    useConversationStore.getState().mergeOpenIMConversations(conversations);
+  }, []);
+
+  const onGroupMemberAdded = useCallback((member: GroupMemberItem) => {
+    console.log('onGroupMemberAdded', member);
+  }, []);
+
+  const onGroupMemberDeleted = useCallback((member: GroupMemberItem) => {
+    console.log('onGroupMemberDeleted', member);
+  }, []);
+
+  useEffect(() => {
+    // Message
+    OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
+    OpenIMSDK.on(OpenIMEvent.OnNewRecvMessageRevoked, onNewRecvMessageRevoked);
+
+    // Conversation
+    OpenIMSDK.on(OpenIMEvent.OnConversationChanged, onConversationChanged);
+    OpenIMSDK.on(OpenIMEvent.OnNewConversation, onNewConversation);
+
+    // Group members
+    OpenIMSDK.on(OpenIMEvent.OnGroupMemberAdded, onGroupMemberAdded);
+    OpenIMSDK.on(OpenIMEvent.OnGroupMemberDeleted, onGroupMemberDeleted);
+
+    return () => {
+      // Message
+      OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
+      OpenIMSDK.off(
+        OpenIMEvent.OnNewRecvMessageRevoked,
+        onNewRecvMessageRevoked
+      );
+
+      // Conversation
+      OpenIMSDK.off(OpenIMEvent.OnConversationChanged, onConversationChanged);
+      OpenIMSDK.off(OpenIMEvent.OnNewConversation, onNewConversation);
+
+      // Group members
+      OpenIMSDK.off(OpenIMEvent.OnGroupMemberAdded, onGroupMemberAdded);
+      OpenIMSDK.off(OpenIMEvent.OnGroupMemberDeleted, onGroupMemberDeleted);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/src/core/useUserListener.ts

@@ -0,0 +1,86 @@
+import OpenIMSDK, {
+  LoginStatus,
+  OpenIMEvent,
+} from '@droppii/openim-rn-client-sdk';
+import { useCallback, useEffect } from 'react';
+import { useUserStore } from '../store';
+import { SyncStatus } from '../types/auth';
+import { ChatAPI } from '../services';
+
+export const useUserListener = () => {
+  const isLoggedIn = useUserStore(
+    (state) => state.connectStatus === LoginStatus.Logged
+  );
+
+  const fetchAndUpdateUser = useCallback(async () => {
+    try {
+      const user = await ChatAPI.getUser();
+      useUserStore.getState().setUser(user);
+    } catch (error) {
+      console.error('OpenIM get user failed', error);
+    }
+  }, []);
+
+  useEffect(() => {
+    ChatAPI.getLoginStatus().then((value) => {
+      if (value) {
+        useUserStore.getState().updateConnectStatus(LoginStatus.Logged);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      fetchAndUpdateUser();
+    }
+  }, [isLoggedIn, fetchAndUpdateUser]);
+
+  const onConnecting = useCallback(() => {
+    useUserStore.getState().updateConnectStatus(LoginStatus.Logging);
+  }, []);
+
+  const onConnectSuccess = useCallback(() => {
+    useUserStore.getState().updateConnectStatus(LoginStatus.Logged);
+  }, []);
+
+  const onConnectFailed = useCallback(() => {
+    useUserStore.getState().updateConnectStatus(LoginStatus.Logout);
+  }, []);
+
+  const onSyncServerStart = useCallback(() => {
+    useUserStore.getState().updateSyncStatus(SyncStatus.Loading);
+  }, []);
+
+  const onSyncServerFinish = useCallback(() => {
+    useUserStore.getState().updateSyncStatus(SyncStatus.Success);
+  }, []);
+
+  const onSyncServerFailed = useCallback(() => {
+    useUserStore.getState().updateSyncStatus(SyncStatus.Failed);
+  }, []);
+
+  useEffect(() => {
+    // User
+    OpenIMSDK.on(OpenIMEvent.OnConnecting, onConnecting);
+    OpenIMSDK.on(OpenIMEvent.OnConnectSuccess, onConnectSuccess);
+    OpenIMSDK.on(OpenIMEvent.OnConnectFailed, onConnectFailed);
+
+    // Sync
+    OpenIMSDK.on(OpenIMEvent.OnSyncServerStart, onSyncServerStart);
+    OpenIMSDK.on(OpenIMEvent.OnSyncServerFinish, onSyncServerFinish);
+    OpenIMSDK.on(OpenIMEvent.OnSyncServerFailed, onSyncServerFailed);
+
+    return () => {
+      // User
+      OpenIMSDK.off(OpenIMEvent.OnConnecting, onConnecting);
+      OpenIMSDK.off(OpenIMEvent.OnConnectSuccess, onConnectSuccess);
+      OpenIMSDK.off(OpenIMEvent.OnConnectFailed, onConnectFailed);
+
+      // Sync
+      OpenIMSDK.off(OpenIMEvent.OnSyncServerStart, onSyncServerStart);
+      OpenIMSDK.off(OpenIMEvent.OnSyncServerFinish, onSyncServerFinish);
+      OpenIMSDK.off(OpenIMEvent.OnSyncServerFailed, onSyncServerFailed);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};