@droppii-org/chat-mobile 0.2.4 → 0.2.6

package/lib/typescript/src/utils/url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../../src/utils/url.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEhE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",
@@ -67,11 +67,13 @@
     "build:web": "vite build"
   },
   "dependencies": {
-    "@droppii/openim-rn-client-sdk": "git+ssh://git@github.com/droppii/open-im-sdk-reactnative.git#v1.0.0-rc5",
+    "@droppii/openim-rn-client-sdk": "git+ssh://git@github.com/droppii/open-im-sdk-reactnative.git#v1.0.0-rc7",
+    "@legendapp/list": "^3.0.6",
     "axios": "^1.16.1",
     "lodash": "^4.18.1",
     "react-native-fs": "^2.20.0",
     "react-native-gifted-chat": "^3.3.3",
+    "react-native-permissions": "^5.6.0",
     "react-native-tab-view": "^4.3.1"
   },
   "devDependencies": {

package/src/config/feature-flags.ts

@@ -0,0 +1,49 @@
+export interface FeatureFlags {
+  USE_LEGEND_LIST_CHAT: boolean;
+  CHAT_LIST_VARIANT: 'gifted' | 'legend';
+  ENABLE_PERFORMANCE_METRICS: boolean;
+  METRICS_SAMPLE_RATE: number;
+}
+
+const DEFAULT_FLAGS: FeatureFlags = {
+  USE_LEGEND_LIST_CHAT: false,
+  CHAT_LIST_VARIANT: 'legend',
+  ENABLE_PERFORMANCE_METRICS: true,
+  METRICS_SAMPLE_RATE: 1.0,
+};
+
+let flags: FeatureFlags = { ...DEFAULT_FLAGS };
+
+export const getFeatureFlag = <K extends keyof FeatureFlags>(
+  flag: K
+): FeatureFlags[K] => {
+  return flags[flag];
+};
+
+export const setFeatureFlag = <K extends keyof FeatureFlags>(
+  flag: K,
+  value: FeatureFlags[K]
+) => {
+  flags[flag] = value;
+  notifyListeners();
+};
+
+export const resetFlags = () => {
+  flags = { ...DEFAULT_FLAGS };
+  notifyListeners();
+};
+
+const listeners = new Set<() => void>();
+
+export const onFlagsChange = (callback: () => void) => {
+  listeners.add(callback);
+  return () => {
+    listeners.delete(callback);
+  };
+};
+
+const notifyListeners = () => {
+  listeners.forEach((cb) => cb());
+};
+
+export const getAllFlags = (): FeatureFlags => ({ ...flags });

package/src/hooks/query-keys.ts

@@ -1,3 +1,8 @@
+export const commonQueryKeys = {
+  all: ['common'] as const,
+  urlMetadata: (url: string) => ['list', url] as const,
+};
+
 export const conversationQueryKeys = {
   all: ['conversations'] as const,
   lists: () => [...conversationQueryKeys.all, 'list'] as const,

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;
@@ -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();
@@ -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

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

@@ -1,15 +1,32 @@
-import { memo, useState, useCallback } from 'react';
+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,
@@ -18,33 +35,108 @@ const ChatDetail = memo(
     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) => {
@@ -58,19 +150,39 @@ 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}
-          chatCategory={chatCategory}
-          applicationType={applicationType}
-          showAddMember={showAddMember}
+          title={resolvedTitle}
+          subtitle={resolvedSubtitle}
+          avatarUri={resolvedAvatarUri}
+          avatarFullName={resolvedAvatarFullName}
+          chatType={resolvedChatType}
+          chatCategory={resolvedChatCategory}
+          applicationType={resolvedApplicationType}
+          showAddMember={resolvedShowAddMember}
           onBack={onBack}
           onPressSearch={onPressSearch}
           onPressAddMember={onPressAddMember}
@@ -86,28 +198,42 @@ const ChatDetail = memo(
             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/ChatLinkPreview.tsx

@@ -0,0 +1,86 @@
+import { memo } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+  KDims,
+} from '@droppii/libs';
+import type { IUrlMetadata } from '../../types/common';
+
+interface ChatLinkPreviewProps {
+  metadata?: IUrlMetadata;
+  isLoading?: boolean;
+  onDismiss?: () => void;
+}
+
+const HEIGHT = 51;
+
+export const ChatLinkPreview = memo(
+  ({ metadata, isLoading, onDismiss }: ChatLinkPreviewProps) => {
+    return (
+      <KContainer.View style={styles.container}>
+        <KContainer.View style={styles.left}>
+          {isLoading ? (
+            <ActivityIndicator color={KColors.primary.normal} size={16} />
+          ) : metadata?.image ? (
+            <KImage.Base uri={metadata?.image} width={HEIGHT} height={HEIGHT} />
+          ) : (
+            <KImage.VectorIcons
+              name="link-alt-o"
+              color={KColors.primary.normal}
+            />
+          )}
+        </KContainer.View>
+        <KContainer.View style={styles.center}>
+          <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
+            {metadata?.title}
+          </KLabel.Text>
+          <KLabel.Text
+            typo="TextSmNormal"
+            color={KColors.gray.light}
+            numberOfLines={1}
+          >
+            {metadata?.description}
+          </KLabel.Text>
+        </KContainer.View>
+        <KContainer.Touchable onPress={onDismiss} style={styles.right}>
+          <KImage.VectorIcons name="close" size={16} />
+        </KContainer.Touchable>
+      </KContainer.View>
+    );
+  }
+);
+
+ChatLinkPreview.displayName = 'ChatLinkPreview';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    flexDirection: 'row',
+    flex: 1,
+    width: KDims.width,
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    backgroundColor: KColors.palette.blue.w25,
+    height: HEIGHT,
+    top: -HEIGHT,
+    zIndex: 10000,
+  },
+  left: {
+    width: HEIGHT,
+    height: HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  center: {
+    flex: 1,
+  },
+  right: {
+    paddingRight: KSpacingValue['0.5rem'],
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

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

@@ -9,6 +9,7 @@ import {
 import { KContainer, KColors, KSpacingValue } from '@droppii/libs';
 import { mapOpenIMMessagesToGiftedChat } from '../../utils/giftedChatMessage';
 import type { DGiftedChatMessage } from '../../utils/giftedChatMessage';
+
 import type { ChatListProps } from './types';
 import { ChatDay } from './ChatDay';
 import { ChatLoadEarlier } from './ChatLoadEarlier';
@@ -24,6 +25,8 @@ export const ChatList = memo(
     isLoading,
     isLoadingEarlier,
     hasMoreEarlier,
+    // Note: onLoadNewer, isLoadingNewer, hasMoreNewer are not used in GiftedChat
+    // as it has its own pagination mechanism. They're kept for API compatibility.
   }: ChatListProps) => {
     const giftedMessages = useMemo(
       () => mapOpenIMMessagesToGiftedChat(messages),