@droppii-org/chat-mobile 0.2.4 → 0.2.7

package/src/hooks/useChatMessages.ts

@@ -7,11 +7,10 @@ import { ChatMessageAPI } from '../services/message';
 import type { DMessageItem } from '../types/chat';
 import {
   belongsToConversation,
-  getHistoryPaginationAnchor,
   hasNewHistoryMessages,
   mergeMessages,
-  type HistoryPaginationAnchor,
 } from '../utils/message';
+import { useMessageStore } from '../store/message';
 
 type UseChatMessagesOptions = {
   conversationId: string;
@@ -24,35 +23,24 @@ export function useChatMessages({
   enabled = true,
   pageSize = 20,
 }: UseChatMessagesOptions) {
-  const [messages, setMessages] = useState<DMessageItem[]>([]);
+  const messages = useMessageStore((s) => s.messages);
+  const hasMoreEarlier = useMessageStore((s) => s.hasMoreEarlier);
+  const hasMoreNewer = useMessageStore((s) => s.hasMoreNewer);
+  const setMessages = useMessageStore((s) => s.setMessages);
+  const pushNewMessage = useMessageStore((s) => s.pushNewMessage);
+  const reset = useMessageStore((s) => s.reset);
+
   const [currentUserId, setCurrentUserId] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
-  const [hasMoreEarlier, setHasMoreEarlier] = useState(false);
+  const [isLoadingNewer, setIsLoadingNewer] = 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;
-    }
+  const fetchInitial = useCallback(async () => {
+    if (!conversationId) return;
 
     setIsLoading(true);
     setError(null);
@@ -66,22 +54,9 @@ export function useChatMessages({
       ]);
 
       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);
+      setMessages(mergeMessages([], initialMessages), !history.isEnd);
 
       ChatMessageAPI.markConversationAsRead(conversationId).catch(
         () => undefined
@@ -91,122 +66,117 @@ export function useChatMessages({
     } finally {
       setIsLoading(false);
     }
-  }, [conversationId, pageSize]);
+  }, [conversationId, pageSize, setMessages]);
 
   const onLoadEarlier = useCallback(async () => {
-    if (
-      !conversationId ||
-      isLoadingEarlierRef.current ||
-      !hasMoreEarlierRef.current ||
-      !messagesRef.current.length
-    ) {
-      return;
-    }
+    if (isLoadingEarlier || !hasMoreEarlier || !messages.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,
+          startClientMsgID: messages[0]!.clientMsgID,
         }
       );
-      const incoming = history.messageList as DMessageItem[];
-      const hasNewMessages = hasNewHistoryMessages(
-        messagesRef.current,
-        incoming
-      );
 
-      if (hasNewMessages) {
-        setMessages((current) => mergeMessages(current, incoming));
+      const incoming = history.messageList as DMessageItem[];
+      const hasNew = hasNewHistoryMessages(messages, incoming);
+
+      if (hasNew) {
+        setMessages(
+          mergeMessages(messages, incoming),
+          !history.isEnd && hasNew
+        );
+      } else {
+        setMessages(messages, false);
       }
-
-      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]);
+  }, [
+    conversationId,
+    hasMoreEarlier,
+    isLoadingEarlier,
+    messages,
+    pageSize,
+    setMessages,
+  ]);
 
-  const sendTextMessage = useCallback(async (text: string) => {
-    const trimmed = text.trim();
-    if (!trimmed) {
-      return;
-    }
+  const onLoadNewer = useCallback(async () => {
+    if (isLoadingNewer || !hasMoreNewer || !messages.length) return;
 
-    const sentMessage = await ChatMessageAPI.sendTextMessage({
-      text: trimmed,
-    });
+    setIsLoadingNewer(true);
+    setError(null);
 
-    setMessages((current) => mergeMessages(current, [sentMessage]));
-  }, []);
+    try {
+      const history = await ChatMessageAPI.fetchHistoryMessages(
+        conversationId,
+        {
+          count: pageSize,
+          startClientMsgID: messages[messages.length - 1]!.clientMsgID,
+        }
+      );
 
-  const appendIncomingMessages = useCallback((incoming: MessageItem[]) => {
-    const relevant = incoming.filter((message) =>
-      belongsToConversation(message, conversationIdRef.current)
-    );
+      const incoming = history.messageList as DMessageItem[];
+      const hasNew = incoming.length > 0;
 
-    if (!relevant.length) {
-      return;
+      if (hasNew) {
+        setMessages(
+          mergeMessages(messages, incoming),
+          !history.isEnd && hasNew
+        );
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setIsLoadingNewer(false);
     }
+  }, [
+    conversationId,
+    hasMoreNewer,
+    isLoadingNewer,
+    messages,
+    pageSize,
+    setMessages,
+  ]);
+
+  const appendIncomingMessages = useCallback(
+    (incoming: MessageItem[]) => {
+      const relevant = incoming.filter((message) =>
+        belongsToConversation(message, conversationIdRef.current)
+      );
 
-    setMessages((current) =>
-      mergeMessages(current, relevant as DMessageItem[])
-    );
+      if (!relevant.length) return;
 
-    ChatMessageAPI.markConversationAsRead(conversationIdRef.current).catch(
-      () => undefined
-    );
-  }, []);
+      relevant.forEach((msg) => pushNewMessage(msg));
+      ChatMessageAPI.markConversationAsRead(conversationIdRef.current).catch(
+        () => undefined
+      );
+    },
+    [pushNewMessage]
+  );
 
   useEffect(() => {
-    resetState();
+    reset();
 
-    if (!enabled || !conversationId) {
-      return;
-    }
+    if (!enabled || !conversationId) return;
 
-    loadInitialMessages();
-  }, [conversationId, enabled, loadInitialMessages, resetState]);
+    fetchInitial();
+  }, [conversationId, enabled, fetchInitial, reset]);
 
   useEffect(() => {
-    if (!enabled || !conversationId) {
-      return;
-    }
+    if (!enabled || !conversationId) return;
 
-    const handleNewMessages = (incoming: MessageItem[]) => {
+    const handleNewMessages = (incoming: MessageItem[]) =>
       appendIncomingMessages(incoming);
-    };
-
-    const handleNewMessage = (incoming: MessageItem) => {
+    const handleNewMessage = (incoming: MessageItem) =>
       appendIncomingMessages([incoming]);
-    };
 
     OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, handleNewMessages);
     OpenIMSDK.on(OpenIMEvent.OnRecvNewMessage, handleNewMessage);
@@ -223,9 +193,11 @@ export function useChatMessages({
     isLoading,
     isLoadingEarlier,
     hasMoreEarlier,
+    isLoadingNewer,
+    hasMoreNewer,
     error,
     onLoadEarlier,
-    sendTextMessage,
-    refresh: loadInitialMessages,
+    onLoadNewer,
+    refresh: fetchInitial,
   };
 }

package/src/hooks/useConversationList.ts

@@ -1,10 +1,11 @@
 import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import OpenIMSDK from '@droppii/openim-rn-client-sdk';
-import { ChatAPI } from '../services';
+import OpenIMSDK, {
+  type ConversationItem,
+} from '@droppii/openim-rn-client-sdk';
 import { conversationQueryKeys } from './query-keys';
 import { useConversationStore } from '../store';
-import { mergeOpenIMIntoConversation } from '../utils/conversation';
+import type { DConversationItem, DMessageItem } from '../types/chat';
 
 type Params = {
   applicationType: string;
@@ -12,6 +13,29 @@ type Params = {
   enabled?: boolean;
 };
 
+function toConversationItem(raw: ConversationItem): DConversationItem {
+  let lastMessage: DMessageItem | undefined;
+  if (raw.latestMsg) {
+    try {
+      lastMessage = JSON.parse(raw.latestMsg) as DMessageItem;
+    } catch {
+      // leave undefined
+    }
+  }
+
+  let applicationType: string | undefined;
+  if (raw.ex) {
+    try {
+      applicationType = (JSON.parse(raw.ex) as { applicationType?: string })
+        .applicationType;
+    } catch {
+      // leave undefined
+    }
+  }
+
+  return { ...(raw as DConversationItem), lastMessage, applicationType };
+}
+
 export function useConversationList({
   applicationType,
   page = 1,
@@ -26,21 +50,15 @@ export function useConversationList({
     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;
+      const rawList = await OpenIMSDK.getConversationListSplitApp({
+        offset,
+        count: 20,
+        applicationType,
       });
 
-      useConversationStore.getState().updateConversations(merged);
-      return merged;
+      const conversations = rawList.map(toConversationItem);
+      useConversationStore.getState().updateConversations(conversations);
+      return conversations;
     },
   });
 

package/src/hooks/useLinkPreview/useFetchUrlMetadata.ts

@@ -0,0 +1,18 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { commonQueryKeys } from '../query-keys';
+import { apiInstance } from '../../services/apis';
+import type { BaseResponse } from '../../types/auth';
+import type { IUrlMetadata } from '../../types/common';
+import { ENDPOINTS } from '../../services/endpoints';
+
+export const useFetchUrlMetadata = (url?: string) =>
+  useQuery({
+    queryKey: commonQueryKeys.urlMetadata(url || ''),
+    queryFn: async () => {
+      const path = `${ENDPOINTS.chatService.urlMetadata}?url=${url}`;
+      const res = await apiInstance?.get<BaseResponse<IUrlMetadata>>(path);
+      return res?.data?.data;
+    },
+    enabled: !!url,
+    placeholderData: keepPreviousData,
+  });

package/src/hooks/useLinkPreview/useLinkPreview.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useFetchUrlMetadata } from './useFetchUrlMetadata';
+import { extractUrls } from '../../utils/url';
+
+export function useLinkPreview(value: string | undefined) {
+  const [detectedUrl, setDetectedUrl] = useState<string | undefined>(undefined);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      const urls = value ? extractUrls(value) : [];
+      const url = urls.length === 1 ? urls[0] : undefined;
+      setDetectedUrl(url);
+      if (url) setIsDismissed(false);
+    }, 500);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [value]);
+
+  const { data: metadata, isFetching: isLoading } =
+    useFetchUrlMetadata(detectedUrl);
+
+  const dismiss = useCallback(() => setIsDismissed(true), []);
+
+  const isVisible = !!detectedUrl && !isDismissed;
+
+  return { isVisible, metadata, isLoading, dismiss };
+}

package/src/index.tsx

@@ -28,6 +28,7 @@ export type {
   ChatListProps,
   ChatComposerProps,
   ChatQuickActionsProps,
+  ChatQuickActionsRenderParams,
   ChatAttachmentPanelProps,
 } from './screens/chat-detail';
 export type { DGiftedChatMessage } from './utils/giftedChatMessage';

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

@@ -22,8 +22,10 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer, KImage, KColors, KSpacingValue } from '@droppii/libs';
 import { ChatQuickActions } from './ChatQuickActions';
 import { ChatAttachmentPanel } from './ChatAttachmentPanel';
+import { ChatLinkPreview } from './ChatLinkPreview';
 import { getAttachmentPanelHeight } from './constants';
 import type { ChatComposerProps } from './types';
+import { useLinkPreview } from '../../hooks/useLinkPreview/useLinkPreview';
 
 const ACCESSORY_ANIMATION_MS = 250;
 const ACCESSORY_SETTLE_MS = 150;
@@ -44,11 +46,13 @@ export const ChatComposer = memo(
     onSend,
     onPressAttach,
     onPressEmoji,
+    showQuickActions = true,
     quickActions,
     attachmentActions,
     onQuickActionPress,
     onAttachmentAction,
     renderQuickAction,
+    renderQuickActions,
     renderAttachmentAction,
     attachmentColumns,
   }: ChatComposerProps) => {
@@ -60,6 +64,13 @@ export const ChatComposer = memo(
     const [isInputWrapped, setIsInputWrapped] = useState(false);
     const insets = useSafeAreaInsets();
 
+    const {
+      isVisible: showLinkPreview,
+      metadata: urlMetadata,
+      isLoading: isMetadataLoading,
+      dismiss: handleDismissPreview,
+    } = useLinkPreview(value);
+
     const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
     const keyboardHeight = useKeyboardState((state) => state.height);
     const { progress: keyboardProgress } = useReanimatedKeyboardAnimation();
@@ -170,8 +181,8 @@ export const ChatComposer = memo(
     });
 
     const handleSend = useCallback(() => {
-      onSend?.();
-    }, [onSend]);
+      onSend?.(showLinkPreview ? urlMetadata : undefined);
+    }, [onSend, urlMetadata, showLinkPreview]);
 
     const handleToggleAttachment = useCallback(() => {
       if (!hasAttachmentActions) {
@@ -268,11 +279,21 @@ export const ChatComposer = memo(
     return (
       <KContainer.View background={'rgba(131, 137, 157, 0.05)'}>
         <ChatQuickActions
+          visible={showQuickActions}
           actions={quickActions}
           onActionPress={onQuickActionPress}
           renderAction={renderQuickAction}
+          renderQuickActions={renderQuickActions}
         />
 
+        {showLinkPreview ? (
+          <ChatLinkPreview
+            metadata={urlMetadata}
+            isLoading={isMetadataLoading}
+            onDismiss={handleDismissPreview}
+          />
+        ) : null}
+
         <KContainer.View
           row
           alignItems