@droppii-org/chat-mobile 0.2.0

package/src/hooks/query-keys.ts

@@ -0,0 +1,11 @@
+export const conversationQueryKeys = {
+  all: ['conversations'] as const,
+  lists: () => [...conversationQueryKeys.all, 'list'] as const,
+  list: (applicationType: string) =>
+    [...conversationQueryKeys.lists(), applicationType] as const,
+  details: () => [...conversationQueryKeys.all, 'detail'] as const,
+  detail: (conversationId: string) =>
+    [...conversationQueryKeys.details(), conversationId] as const,
+};
+
+export type ConversationQueryKeys = typeof conversationQueryKeys;

package/src/hooks/useChatMessages.ts

@@ -0,0 +1,243 @@
+import OpenIMSDK, {
+  OpenIMEvent,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ChatMessageAPI } from '../services/message';
+import type { DMessageItem } from '../types/chat';
+import {
+  belongsToConversation,
+  getHistoryPaginationAnchor,
+  hasNewHistoryMessages,
+  mergeMessages,
+  type HistoryPaginationAnchor,
+} from '../utils/message';
+
+type UseChatMessagesOptions = {
+  conversationId: string;
+  recvID?: string;
+  groupID?: string;
+  enabled?: boolean;
+  pageSize?: number;
+};
+
+export function useChatMessages({
+  conversationId,
+  recvID = '',
+  groupID = '',
+  enabled = true,
+  pageSize = 20,
+}: UseChatMessagesOptions) {
+  const [messages, setMessages] = useState<DMessageItem[]>([]);
+  const [currentUserId, setCurrentUserId] = useState<string>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
+  const [hasMoreEarlier, setHasMoreEarlier] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const conversationIdRef = useRef(conversationId);
+  conversationIdRef.current = conversationId;
+
+  const isLoadingEarlierRef = useRef(false);
+  const messagesRef = useRef(messages);
+  const hasMoreEarlierRef = useRef(hasMoreEarlier);
+  const historyAnchorRef = useRef<HistoryPaginationAnchor | null>(null);
+  messagesRef.current = messages;
+  hasMoreEarlierRef.current = hasMoreEarlier;
+
+  const resetState = useCallback(() => {
+    setMessages([]);
+    setHasMoreEarlier(false);
+    setError(null);
+    isLoadingEarlierRef.current = false;
+    historyAnchorRef.current = null;
+  }, []);
+
+  const loadInitialMessages = useCallback(async () => {
+    if (!conversationId) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const [history, userId] = await Promise.all([
+        ChatMessageAPI.fetchHistoryMessages(conversationId, {
+          count: pageSize,
+        }),
+        ChatMessageAPI.getCurrentUserId(),
+      ]);
+
+      const initialMessages = history.messageList as DMessageItem[];
+      const oldestAnchor = getHistoryPaginationAnchor(initialMessages);
+
+      setCurrentUserId(userId);
+      setMessages(mergeMessages([], initialMessages));
+      historyAnchorRef.current = oldestAnchor
+        ? {
+            clientMsgID: oldestAnchor.clientMsgID,
+            // lastMinSeq: resolveHistoryLastMinSeq(
+            //   history,
+            //   initialMessages.find(
+            //     (message) => message.clientMsgID === oldestAnchor.clientMsgID
+            //   )
+            // ),
+          }
+        : null;
+      setHasMoreEarlier(!history.isEnd && !!oldestAnchor);
+
+      ChatMessageAPI.markConversationAsRead(conversationId).catch(
+        () => undefined
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [conversationId, pageSize]);
+
+  const onLoadEarlier = useCallback(async () => {
+    if (
+      !conversationId ||
+      isLoadingEarlierRef.current ||
+      !hasMoreEarlierRef.current ||
+      !messagesRef.current.length
+    ) {
+      return;
+    }
+
+    isLoadingEarlierRef.current = true;
+    setIsLoadingEarlier(true);
+    setError(null);
+
+    const anchor = historyAnchorRef.current;
+    if (!anchor?.clientMsgID) {
+      isLoadingEarlierRef.current = false;
+      setIsLoadingEarlier(false);
+      return;
+    }
+
+    try {
+      const history = await ChatMessageAPI.fetchHistoryMessages(
+        conversationId,
+        {
+          count: pageSize,
+          startClientMsgID: anchor.clientMsgID,
+        }
+      );
+      const incoming = history.messageList as DMessageItem[];
+      const hasNewMessages = hasNewHistoryMessages(
+        messagesRef.current,
+        incoming
+      );
+
+      if (hasNewMessages) {
+        setMessages((current) => mergeMessages(current, incoming));
+      }
+
+      const nextAnchor = getHistoryPaginationAnchor(incoming);
+      historyAnchorRef.current = nextAnchor
+        ? {
+            clientMsgID: nextAnchor.clientMsgID,
+            // lastMinSeq: resolveHistoryLastMinSeq(
+            //   history,
+            //   incoming.find(
+            //     (message) => message.clientMsgID === nextAnchor.clientMsgID
+            //   )
+            // ),
+          }
+        : null;
+
+      setHasMoreEarlier(!history.isEnd && hasNewMessages && !!nextAnchor);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      isLoadingEarlierRef.current = false;
+      setIsLoadingEarlier(false);
+    }
+  }, [conversationId, pageSize]);
+
+  const sendTextMessage = useCallback(
+    async (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed) {
+        return;
+      }
+
+      const sentMessage = await ChatMessageAPI.sendTextMessage({
+        text: trimmed,
+        recvID,
+        groupID,
+      });
+
+      setMessages((current) => mergeMessages(current, [sentMessage]));
+    },
+    [groupID, recvID]
+  );
+
+  const appendIncomingMessages = useCallback(
+    (incoming: MessageItem[]) => {
+      const relevant = incoming.filter((message) =>
+        belongsToConversation(message, conversationIdRef.current, groupID)
+      );
+
+      if (!relevant.length) {
+        return;
+      }
+
+      setMessages((current) =>
+        mergeMessages(current, relevant as DMessageItem[])
+      );
+
+      ChatMessageAPI.markConversationAsRead(conversationIdRef.current).catch(
+        () => undefined
+      );
+    },
+    [groupID]
+  );
+
+  useEffect(() => {
+    resetState();
+
+    if (!enabled || !conversationId) {
+      return;
+    }
+
+    loadInitialMessages();
+  }, [conversationId, enabled, loadInitialMessages, resetState]);
+
+  useEffect(() => {
+    if (!enabled || !conversationId) {
+      return;
+    }
+
+    const handleNewMessages = (incoming: MessageItem[]) => {
+      appendIncomingMessages(incoming);
+    };
+
+    const handleNewMessage = (incoming: MessageItem) => {
+      appendIncomingMessages([incoming]);
+    };
+
+    OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, handleNewMessages);
+    OpenIMSDK.on(OpenIMEvent.OnRecvNewMessage, handleNewMessage);
+
+    return () => {
+      OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, handleNewMessages);
+      OpenIMSDK.off(OpenIMEvent.OnRecvNewMessage, handleNewMessage);
+    };
+  }, [appendIncomingMessages, conversationId, enabled]);
+
+  return {
+    messages,
+    currentUserId,
+    isLoading,
+    isLoadingEarlier,
+    hasMoreEarlier,
+    error,
+    onLoadEarlier,
+    sendTextMessage,
+    refresh: loadInitialMessages,
+  };
+}

package/src/hooks/useConversationList.ts

@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import { ChatAPI } from '../services';
+import { conversationQueryKeys } from './query-keys';
+import { useConversationStore } from '../store';
+import { mergeOpenIMIntoConversation } from '../utils/conversation';
+
+type Params = {
+  applicationType: string;
+  page: number;
+  enabled?: boolean;
+};
+
+export function useConversationList({
+  applicationType,
+  page = 1,
+  enabled = true,
+}: Params) {
+  const newConversationSignal = useConversationStore(
+    (s) => s.newConversationSignal
+  );
+
+  const query = useQuery({
+    queryKey: [...conversationQueryKeys.list(applicationType), page],
+    enabled: enabled !== false,
+    queryFn: async () => {
+      const offset = (page - 1) * 20;
+      const [{ data: droppiiList }, openimList] = await Promise.all([
+        ChatAPI.queryConversations({ applicationType, page, pageSize: 20 }),
+        OpenIMSDK.getConversationListSplit({ offset, count: 20 }),
+      ]);
+      const openimMap = new Map(openimList.map((c) => [c.conversationID, c]));
+
+      const merged = droppiiList.map((conv) => {
+        const openimConv = openimMap.get(conv.conversationId);
+        return openimConv
+          ? mergeOpenIMIntoConversation(conv, openimConv)
+          : conv;
+      });
+
+      useConversationStore.getState().updateConversations(merged);
+      return merged;
+    },
+  });
+
+  // Refetch when a new conversation arrives from a realtime event that wasn't
+  // already in the store (signal is incremented by mergeOpenIMConversations).
+  useEffect(() => {
+    if (newConversationSignal > 0) {
+      query.refetch();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [newConversationSignal]);
+
+  return query;
+}

package/src/index.tsx

@@ -0,0 +1,36 @@
+export { ChatAPI } from './services';
+export * from './core';
+export * from './store';
+export * from './hooks/useConversationList';
+export * from './hooks/useChatMessages';
+export * from './types/chat';
+export { Avatar } from './components/Avatar';
+export { ThreadCard } from './components/ThreadCard';
+export { Inbox } from './screens/inbox';
+export {
+  ChatDetail,
+  ChatDetailHeader,
+  ChatList,
+  ChatComposer,
+  ChatQuickActions,
+  ChatAttachmentPanel,
+  DEFAULT_Chat_QUICK_ACTIONS,
+  DEFAULT_ATTACHMENT_ACTIONS,
+} from './screens/chat-detail';
+export type {
+  DChatActionItem,
+  DChatActionIconProvider,
+  DChatQuickAction,
+  DChatAttachmentAction,
+  ChatDetailProps,
+  ChatDetailHeaderProps,
+  ChatListProps,
+  ChatComposerProps,
+  ChatQuickActionsProps,
+  ChatAttachmentPanelProps,
+} from './screens/chat-detail';
+export type { DGiftedChatMessage } from './utils/giftedChatMessage';
+export {
+  mapOpenIMMessageToGiftedChat,
+  mapOpenIMMessagesToGiftedChat,
+} from './utils/giftedChatMessage';

package/src/screens/chat-detail/ChatAttachmentPanel.tsx

@@ -0,0 +1,142 @@
+import { memo, useCallback, useMemo } from 'react';
+import { FlatList, type ListRenderItem, StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import { ATTACHMENT_PANEL_COLUMNS } from './constants';
+import { useChatActionPress } from './useChatActionPress';
+import type { DChatAttachmentAction, ChatAttachmentPanelProps } from './types';
+
+const AttachmentActionItem = memo(
+  ({
+    action,
+    itemWidth,
+    onPress,
+  }: {
+    action: DChatAttachmentAction;
+    itemWidth: `${number}%`;
+    onPress: (action: DChatAttachmentAction) => void;
+  }) => {
+    const handlePress = useCallback(() => {
+      onPress(action);
+    }, [action, onPress]);
+
+    return (
+      <KContainer.Touchable
+        style={[styles.item, { width: itemWidth }]}
+        onPress={handlePress}
+        disabled={action.disabled}
+        activeOpacity={0.7}
+      >
+        <KContainer.View style={styles.iconCircle} center>
+          <KImage.VectorIcons
+            name={action.iconName}
+            provider={action.iconProvider ?? 'MaterialCommunityIcons'}
+            size={24}
+            color={
+              action.disabled ? KColors.palette.gray.w300 : KColors.gray.dark
+            }
+          />
+        </KContainer.View>
+        <KLabel.Text
+          typo="TextXsMedium"
+          color={
+            action.disabled ? KColors.palette.gray.w300 : KColors.gray.dark
+          }
+          textAlign="center"
+          numberOfLines={2}
+          marginT="0.25rem"
+        >
+          {action.label}
+        </KLabel.Text>
+      </KContainer.Touchable>
+    );
+  }
+);
+
+AttachmentActionItem.displayName = 'AttachmentActionItem';
+
+export const ChatAttachmentPanel = memo(
+  ({
+    actions,
+    columns = ATTACHMENT_PANEL_COLUMNS,
+    onActionPress,
+    renderAction,
+  }: ChatAttachmentPanelProps) => {
+    const handleActionPress = useChatActionPress(onActionPress);
+
+    const itemWidth = useMemo(
+      () => `${100 / columns}%` as `${number}%`,
+      [columns]
+    );
+
+    const renderItem = useCallback<ListRenderItem<DChatAttachmentAction>>(
+      ({ item }) => {
+        const onPress = () => handleActionPress(item);
+
+        if (renderAction) {
+          return <>{renderAction(item, onPress)}</>;
+        }
+
+        return (
+          <AttachmentActionItem
+            action={item}
+            itemWidth={itemWidth}
+            onPress={handleActionPress}
+          />
+        );
+      },
+      [handleActionPress, itemWidth, renderAction]
+    );
+
+    const keyExtractor = useCallback(
+      (item: DChatAttachmentAction) => item.id,
+      []
+    );
+
+    if (!actions?.length) {
+      return null;
+    }
+
+    return (
+      <KContainer.View background={KColors.white} flex>
+        <FlatList
+          data={actions}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          numColumns={columns}
+          scrollEnabled={false}
+          contentContainerStyle={styles.grid}
+          columnWrapperStyle={columns > 1 ? styles.row : undefined}
+        />
+      </KContainer.View>
+    );
+  }
+);
+
+ChatAttachmentPanel.displayName = 'ChatAttachmentPanel';
+
+const styles = StyleSheet.create({
+  grid: {
+    paddingHorizontal: KSpacingValue['0.5rem'],
+    paddingTop: KSpacingValue['1.5rem'],
+    paddingBottom: KSpacingValue['0.5rem'],
+  },
+  row: {
+    justifyContent: 'flex-start',
+  },
+  item: {
+    alignItems: 'center',
+    marginBottom: KSpacingValue['1.5rem'],
+  },
+  iconCircle: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: KColors.hexToRgba(KColors.gray.light, 0.1),
+  },
+});