@droppii-org/chat-mobile 0.2.3 → 0.2.6

package/src/hooks/useChatMessages.ts

@@ -29,24 +29,33 @@ export function useChatMessages({
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
   const [hasMoreEarlier, setHasMoreEarlier] = useState(false);
+  const [isLoadingNewer, setIsLoadingNewer] = useState(false);
+  const [hasMoreNewer, setHasMoreNewer] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
   const conversationIdRef = useRef(conversationId);
   conversationIdRef.current = conversationId;
 
   const isLoadingEarlierRef = useRef(false);
+  const isLoadingNewerRef = useRef(false);
   const messagesRef = useRef(messages);
   const hasMoreEarlierRef = useRef(hasMoreEarlier);
+  const hasMoreNewerRef = useRef(hasMoreNewer);
   const historyAnchorRef = useRef<HistoryPaginationAnchor | null>(null);
+  const newestAnchorRef = useRef<HistoryPaginationAnchor | null>(null);
   messagesRef.current = messages;
   hasMoreEarlierRef.current = hasMoreEarlier;
+  hasMoreNewerRef.current = hasMoreNewer;
 
   const resetState = useCallback(() => {
     setMessages([]);
     setHasMoreEarlier(false);
+    setHasMoreNewer(false);
     setError(null);
     isLoadingEarlierRef.current = false;
+    isLoadingNewerRef.current = false;
     historyAnchorRef.current = null;
+    newestAnchorRef.current = null;
   }, []);
 
   const loadInitialMessages = useCallback(async () => {
@@ -154,6 +163,54 @@ export function useChatMessages({
     }
   }, [conversationId, pageSize]);
 
+  const onLoadNewer = useCallback(async () => {
+    if (
+      !conversationId ||
+      isLoadingNewerRef.current ||
+      !hasMoreNewerRef.current ||
+      !messagesRef.current.length
+    ) {
+      return;
+    }
+
+    isLoadingNewerRef.current = true;
+    setIsLoadingNewer(true);
+    setError(null);
+
+    const anchor = newestAnchorRef.current;
+    if (!anchor?.clientMsgID && messagesRef.current.length === 0) {
+      isLoadingNewerRef.current = false;
+      setIsLoadingNewer(false);
+      return;
+    }
+
+    try {
+      // Get the newest message ID to load from
+      const newestMessage = messagesRef.current[messagesRef.current.length - 1];
+      const history = await ChatMessageAPI.fetchHistoryMessages(
+        conversationId,
+        {
+          count: pageSize,
+          startClientMsgID: newestMessage?.clientMsgID,
+        }
+      );
+
+      const incoming = history.messageList as DMessageItem[];
+      const hasNewMessages = incoming.length > 0;
+
+      if (hasNewMessages) {
+        setMessages((current) => mergeMessages(current, incoming));
+      }
+
+      setHasMoreNewer(!history.isEnd && hasNewMessages);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      isLoadingNewerRef.current = false;
+      setIsLoadingNewer(false);
+    }
+  }, [conversationId, pageSize]);
+
   const sendTextMessage = useCallback(async (text: string) => {
     const trimmed = text.trim();
     if (!trimmed) {
@@ -223,8 +280,11 @@ export function useChatMessages({
     isLoading,
     isLoadingEarlier,
     hasMoreEarlier,
+    isLoadingNewer,
+    hasMoreNewer,
     error,
     onLoadEarlier,
+    onLoadNewer,
     sendTextMessage,
     refresh: loadInitialMessages,
   };

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,30 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useFetchUrlMetadata } from './useFetchUrlMetadata';
+import { extractFirstUrl } 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 url = value ? extractFirstUrl(value) : 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;
@@ -31,6 +33,10 @@ const IS_IOS = Platform.OS === 'ios';
 const INPUT_FONT_SIZE = 16;
 const INPUT_LINE_HEIGHT = 22.4;
 const INPUT_MAX_HEIGHT = INPUT_LINE_HEIGHT * 5;
+// Android's onContentSizeChange includes paddingVertical (4*2=8) in reported height
+const WRAPPED_HEIGHT_THRESHOLD = IS_IOS
+  ? INPUT_LINE_HEIGHT + 4
+  : INPUT_LINE_HEIGHT + 12;
 
 export const ChatComposer = memo(
   ({
@@ -40,11 +46,13 @@ export const ChatComposer = memo(
     onSend,
     onPressAttach,
     onPressEmoji,
+    showQuickActions = true,
     quickActions,
     attachmentActions,
     onQuickActionPress,
     onAttachmentAction,
     renderQuickAction,
+    renderQuickActions,
     renderAttachmentAction,
     attachmentColumns,
   }: ChatComposerProps) => {
@@ -56,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();
@@ -221,7 +236,7 @@ export const ChatComposer = memo(
     const handleInputContentSizeChange = useCallback(
       (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
         const { height } = event.nativeEvent.contentSize;
-        setIsInputWrapped(height > INPUT_LINE_HEIGHT + 4);
+        setIsInputWrapped(height > WRAPPED_HEIGHT_THRESHOLD);
       },
       []
     );
@@ -242,14 +257,10 @@ export const ChatComposer = memo(
 
     const renderEmojiNode = useCallback(
       () => (
-        <KContainer.Touchable
-          marginR="0.5rem"
-          onPress={onPressEmoji}
-          activeOpacity={0.7}
-        >
+        <KContainer.Touchable marginR="0.5rem" onPress={onPressEmoji}>
           <KImage.VectorIcons
             name="sticker-o"
-            size={22}
+            size={24}
             color={KColors.gray.normal}
           />
         </KContainer.Touchable>
@@ -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
@@ -397,7 +418,7 @@ const styles = StyleSheet.create({
   inputContainer: {
     borderRadius: KSpacingValue['1.25rem'],
     minHeight: 48,
-    paddingVertical: IS_IOS ? 4 : 0,
+    paddingVertical: KSpacingValue['0.25rem'],
   },
   textInput: {
     flex: 1,
@@ -407,6 +428,6 @@ const styles = StyleSheet.create({
     color: KColors.palette.gray.w900,
     paddingVertical: IS_IOS ? 0 : 4,
     paddingHorizontal: IS_IOS ? 2 : 0,
-    marginVertical: IS_IOS ? 0 : -8,
+    includeFontPadding: false,
   },
 });

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

@@ -1,47 +1,142 @@
-import { memo, useState, useCallback } from 'react';
-import { StyleSheet } from 'react-native';
+import { memo, useState, useCallback, useEffect, useMemo } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer } from '@droppii/libs';
+import { useChatMessages } from '../../hooks/useChatMessages';
+import { useConversation, useConversationStore } from '../../store';
 import ChatDetailHeader from './ChatDetailHeader';
 import { ChatList } from './ChatList';
+import { ChatListLegend } from './ChatListLegend';
 import { ChatComposer } from './ChatComposer';
+import {
+  DEFAULT_ATTACHMENT_ACTIONS,
+  DEFAULT_Chat_QUICK_ACTIONS,
+} from './constants';
+import {
+  getConversationAvatarUri,
+  getConversationSubtitle,
+  getConversationTitle,
+  shouldShowAddMember,
+} from './conversationHeader.utils';
+import { getFeatureFlag, onFlagsChange } from '../../config/feature-flags';
 import type { ChatDetailProps } from './types';
 
 const ChatDetail = memo(
   ({
+    conversationId,
+    enabled = true,
     title,
     subtitle,
     avatarUri,
     avatarFullName,
     chatType,
+    chatCategory,
+    applicationType,
     showAddMember,
+    getSubtitle,
     onBack,
     onPressSearch,
     onPressAddMember,
     onPressMenu,
     onPressAvatar,
-    messages = [],
-    currentUserId,
     renderChat,
-    onLoadEarlier,
-    isLoading,
-    isLoadingEarlier,
-    hasMoreEarlier,
+    showQuickActions = true,
+    showAttachmentActions = true,
     quickActions,
+    getQuickActions,
     inputValue,
     inputPlaceholder,
     onChangeInput,
-    onSend,
     onPressAttach,
     onPressEmoji,
     attachmentActions,
     onQuickActionPress,
     onAttachmentAction,
     renderQuickAction,
+    renderQuickActions,
     renderAttachmentAction,
     attachmentColumns,
   }: ChatDetailProps) => {
     const [internalInput, setInternalInput] = useState('');
+    const conversation = useConversation(conversationId);
+
+    const {
+      messages,
+      currentUserId,
+      onLoadEarlier,
+      sendTextMessage,
+      isLoading,
+      isLoadingEarlier,
+      hasMoreEarlier,
+    } = useChatMessages({
+      conversationId,
+      enabled,
+    });
+
+    useEffect(() => {
+      useConversationStore.getState().setCurrentConversation(conversationId);
+    }, [conversationId]);
+
+    const resolvedTitle = title ?? getConversationTitle(conversation);
+    const resolvedAvatarUri =
+      avatarUri ?? getConversationAvatarUri(conversation);
+    const resolvedAvatarFullName = avatarFullName ?? resolvedTitle;
+    const resolvedChatType = chatType ?? conversation?.chatType;
+    const resolvedChatCategory = chatCategory ?? conversation?.chatCategory;
+    const resolvedApplicationType =
+      applicationType ?? conversation?.applicationType;
+    const resolvedShowAddMember =
+      showAddMember ?? shouldShowAddMember(conversation);
+    const resolvedSubtitle = useMemo(() => {
+      if (subtitle !== undefined) {
+        return subtitle;
+      }
+
+      if (getSubtitle && conversation) {
+        return getSubtitle(conversation);
+      }
+
+      return getConversationSubtitle(conversation);
+    }, [conversation, getSubtitle, subtitle]);
+
+    const resolvedQuickActions = useMemo(() => {
+      if (!showQuickActions) {
+        return undefined;
+      }
+
+      if (quickActions) {
+        return quickActions;
+      }
+
+      if (getQuickActions && conversation) {
+        return getQuickActions(conversation);
+      }
+
+      return DEFAULT_Chat_QUICK_ACTIONS;
+    }, [conversation, getQuickActions, quickActions, showQuickActions]);
+
+    const resolvedAttachmentActions = useMemo(() => {
+      if (!showAttachmentActions) {
+        return undefined;
+      }
+
+      return attachmentActions ?? DEFAULT_ATTACHMENT_ACTIONS;
+    }, [attachmentActions, showAttachmentActions]);
+    const [variant, setVariant] = useState<'gifted' | 'legend'>(
+      () => getFeatureFlag('CHAT_LIST_VARIANT') as 'gifted' | 'legend'
+    );
+
+    useEffect(() => {
+      const unsubscribe = onFlagsChange(() => {
+        const newVariant = getFeatureFlag('CHAT_LIST_VARIANT') as
+          | 'gifted'
+          | 'legend';
+        setVariant(newVariant);
+      });
+      return unsubscribe;
+    }, []);
 
     const handleChangeInput = useCallback(
       (text: string) => {
@@ -56,15 +151,38 @@ const ChatDetail = memo(
 
     const currentInput = inputValue ?? internalInput;
 
+    const handleSend = useCallback(async () => {
+      const text = currentInput.trim();
+      if (!text) {
+        return;
+      }
+
+      try {
+        await sendTextMessage(text);
+
+        if (onChangeInput) {
+          onChangeInput('');
+        } else {
+          setInternalInput('');
+        }
+      } catch (error) {
+        console.error('[send-message]', error);
+      }
+    }, [currentInput, onChangeInput, sendTextMessage]);
+
+    const insets = useSafeAreaInsets();
+
     return (
       <KContainer.Page flex edges={['bottom']}>
         <ChatDetailHeader
-          title={title}
-          subtitle={subtitle}
-          avatarUri={avatarUri}
-          avatarFullName={avatarFullName}
-          chatType={chatType}
-          showAddMember={showAddMember}
+          title={resolvedTitle}
+          subtitle={resolvedSubtitle}
+          avatarUri={resolvedAvatarUri}
+          avatarFullName={resolvedAvatarFullName}
+          chatType={resolvedChatType}
+          chatCategory={resolvedChatCategory}
+          applicationType={resolvedApplicationType}
+          showAddMember={resolvedShowAddMember}
           onBack={onBack}
           onPressSearch={onPressSearch}
           onPressAddMember={onPressAddMember}
@@ -75,29 +193,47 @@ const ChatDetail = memo(
         <KeyboardAvoidingView
           style={styles.keyboardAvoiding}
           behavior="padding"
+          keyboardVerticalOffset={Platform.select({
+            android: insets.bottom,
+            default: 0,
+          })}
         >
-          <ChatList
-            messages={messages}
-            currentUserId={currentUserId}
-            renderChat={renderChat}
-            onLoadEarlier={onLoadEarlier}
-            isLoading={isLoading}
-            isLoadingEarlier={isLoadingEarlier}
-            hasMoreEarlier={hasMoreEarlier}
-          />
+          {variant === 'legend' ? (
+            <ChatListLegend
+              messages={messages}
+              currentUserId={currentUserId}
+              renderChat={renderChat}
+              onLoadEarlier={onLoadEarlier}
+              isLoading={isLoading}
+              isLoadingEarlier={isLoadingEarlier}
+              hasMoreEarlier={hasMoreEarlier}
+            />
+          ) : (
+            <ChatList
+              messages={messages}
+              currentUserId={currentUserId}
+              renderChat={renderChat}
+              onLoadEarlier={onLoadEarlier}
+              isLoading={isLoading}
+              isLoadingEarlier={isLoadingEarlier}
+              hasMoreEarlier={hasMoreEarlier}
+            />
+          )}
 
           <ChatComposer
             value={currentInput}
             placeholder={inputPlaceholder}
             onChangeText={handleChangeInput}
-            onSend={onSend}
+            onSend={handleSend}
             onPressAttach={onPressAttach}
             onPressEmoji={onPressEmoji}
-            quickActions={quickActions}
-            attachmentActions={attachmentActions}
+            showQuickActions={showQuickActions}
+            quickActions={resolvedQuickActions}
+            attachmentActions={resolvedAttachmentActions}
             onQuickActionPress={onQuickActionPress}
             onAttachmentAction={onAttachmentAction}
             renderQuickAction={renderQuickAction}
+            renderQuickActions={renderQuickActions}
             renderAttachmentAction={renderAttachmentAction}
             attachmentColumns={attachmentColumns}
           />

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

@@ -6,7 +6,8 @@ import {
   KLabel,
   KColors,
 } from '@droppii/libs';
-import { Avatar } from '../../components/Avatar';
+import { AvatarSection } from '../../components/ThreadCard/AvatarSection';
+import { NamePrefixIcon } from '../../components/ThreadCard/NamePrefixIcon';
 import type { ChatDetailHeaderProps } from './types';
 
 const ChatDetailHeader = memo(
@@ -15,6 +16,9 @@ const ChatDetailHeader = memo(
     subtitle,
     avatarUri,
     avatarFullName,
+    chatType,
+    chatCategory,
+    applicationType,
     showAddMember = false,
     onBack,
     onPressSearch,
@@ -58,7 +62,7 @@ const ChatDetailHeader = memo(
 
     const leftNode = useMemo(
       () => (
-        <KContainer.View row alignItems marginR="0.25rem">
+        <KContainer.View row alignItems flex marginR="0.25rem">
           <KContainer.Touchable onPress={onBack} height={40} width={40} center>
             <KImage.VectorIcons
               name="arrow-left-o"
@@ -67,41 +71,69 @@ const ChatDetailHeader = memo(
             />
           </KContainer.Touchable>
 
-          <Avatar
-            source={avatarUri}
-            fullName={avatarFullName ?? title}
-            size="md"
+          <KContainer.Touchable
+            row
+            alignItems
+            flex
             onPress={onPressAvatar}
-          />
+            activeOpacity={0.7}
+          >
+            <AvatarSection
+              avatar={avatarUri ?? null}
+              fullName={avatarFullName ?? title}
+              chatCategory={chatCategory}
+              applicationType={applicationType}
+              chatType={chatType}
+            />
+
+            <KContainer.View flex marginL="0.5rem">
+              <KContainer.View row alignItems>
+                <NamePrefixIcon
+                  chatCategory={chatCategory}
+                  chatType={chatType}
+                />
+                <KLabel.Text
+                  typo="TextLgBold"
+                  color={KColors.gray.dark}
+                  numberOfLines={1}
+                  flex
+                >
+                  {title}
+                </KLabel.Text>
+              </KContainer.View>
+              {!!subtitle && (
+                <KLabel.Text
+                  typo="TextSmNormal"
+                  color={KColors.palette.gray.w500}
+                  numberOfLines={1}
+                >
+                  {subtitle}
+                </KLabel.Text>
+              )}
+            </KContainer.View>
+          </KContainer.Touchable>
         </KContainer.View>
       ),
-      [avatarFullName, avatarUri, onBack, onPressAvatar, title]
+      [
+        avatarFullName,
+        avatarUri,
+        chatCategory,
+        applicationType,
+        chatType,
+        onBack,
+        onPressAvatar,
+        subtitle,
+        title,
+      ]
     );
 
-    const subTitleNode = useMemo(() => {
-      if (!subtitle) {
-        return null;
-      }
-
-      return (
-        <KLabel.Text
-          typo="TextSmNormal"
-          color={KColors.palette.gray.w500}
-          numberOfLines={1}
-        >
-          {subtitle}
-        </KLabel.Text>
-      );
-    }, [subtitle]);
-
     return (
       <KNavigation.Header
         theme="light"
         alignment="left"
         size="small"
         leftNode={leftNode}
-        title={title}
-        subTitle={subTitleNode}
+        disableCenterSpace
         initRightButtons={rightButtons}
         shadow
       />