@droppii-org/chat-mobile 0.2.23 → 0.2.25

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

@@ -1,4 +1,4 @@
-import { memo, useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Platform, StyleSheet } from 'react-native';
 
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
@@ -14,26 +14,16 @@ import { useConversation, useConversationStore } from '../../store';
 import ChatDetailHeader from './ChatDetailHeader';
 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 type {
-  ChatDetailProps,
-  DChatQuickAction,
-  DChatAttachmentAction,
-} from './types';
-import { useSendMessage } from '../../hooks/message/useSendMessage';
-import type { IUrlMetadata } from '../../types/common';
-import { useMessageStore } from '../../store/message';
+import type { ChatDetailProps } from './types';
 import { ChatDetailProvider } from '../../context/ChatDetailContext';
 import { normalizeUrl } from '../../utils/url';
+// import { ChatMessageAPI } from '../../services/message';
 
 const ChatDetail = memo(
   ({
@@ -50,58 +40,27 @@ const ChatDetail = memo(
     onPressAddMember,
     onPressMenu,
     onPressAvatar,
-    showQuickActions = true,
-    quickActions,
-    inputPlaceholder,
-    onChangeInput,
-    onPressAttach,
-    onPressEmoji,
-    attachmentActions,
-    onQuickActionPress,
-    onAttachmentAction,
-    renderQuickAction,
-    renderQuickActions,
-    renderAttachmentAction,
-    attachmentColumns,
     onPressUrl,
     customMessageItemFactory,
   }: ChatDetailProps) => {
     const navigation = useNavigation();
-    const [internalInput, setInternalInput] = useState<string>('');
     const mediaViewerRef = useRef<MediaViewerModalHandle>(null);
     const conversation = useConversation(conversationId);
-    // const user = conversation?.peer;
 
-    // Default handlers when props not provided
     const handleBackDefault = useCallback(() => {
       navigation.goBack();
     }, [navigation]);
 
-    const quickActionsDefault = useMemo<DChatQuickAction[]>(
-      () =>
-        DEFAULT_Chat_QUICK_ACTIONS.map((action) => ({
-          ...action,
-          onPress: () => {
-            console.log('[quick-action]', action.id);
-          },
-        })),
-      []
-    );
-
-    const attachmentActionsDefault = useMemo<DChatAttachmentAction[]>(
-      () =>
-        DEFAULT_ATTACHMENT_ACTIONS.map((action) => ({
-          ...action,
-          onPress: () => {
-            console.log('[attachment-action]', action.id);
-          },
-        })),
+    const handleMediaPress = useCallback(
+      (
+        items: Parameters<MediaViewerModalHandle['show']>[0],
+        index?: number
+      ) => {
+        mediaViewerRef.current?.show(items, index);
+      },
       []
     );
 
-    const { sendMessage } = useSendMessage();
-    const { pushNewMessage } = useMessageStore();
-
     const {
       messages,
       currentUserId,
@@ -109,30 +68,23 @@ const ChatDetail = memo(
       isLoading,
       isLoadingEarlier,
       hasMoreEarlier,
-    } = useChatMessages({
-      conversationId,
-      enabled,
-    });
-
-    // Callback for attachment messages - add them to the message list
-    const handleAttachmentMessageSent = useCallback(
-      (message: any) => {
-        if (__DEV__)
-          console.log('[ChatDetail] Attachment message received:', {
-            clientMsgID: message?.clientMsgID,
-            contentType: message?.contentType,
-          });
-        if (message) {
-          pushNewMessage(message);
-        }
-      },
-      [pushNewMessage]
-    );
+    } = useChatMessages({ conversationId, enabled });
 
     useEffect(() => {
       useConversationStore.getState().setCurrentConversation(conversationId);
     }, [conversationId]);
 
+    // useEffect(() => {
+    //   if (!conversationId) return;
+    //   ChatMessageAPI.searchLocalMessages(conversationId, { count: 20 })
+    //     .then((result) => {
+    //       console.log('[TEST searchLocalMessages] success:', result);
+    //     })
+    //     .catch((err) => {
+    //       console.log('[TEST searchLocalMessages] error:', err);
+    //     });
+    // }, [conversationId]);
+
     const resolvedTitle = title ?? getConversationTitle(conversation);
     const resolvedAvatarUri =
       avatarUri ?? getConversationAvatarUri(conversation);
@@ -140,84 +92,18 @@ const ChatDetail = memo(
     const resolvedShowAddMember =
       showAddMember ?? shouldShowAddMember(conversation);
     const resolvedSubtitle = useMemo(() => {
-      if (subtitle !== undefined) {
-        return subtitle;
-      }
-
-      if (getSubtitle && conversation) {
-        return getSubtitle(conversation);
-      }
-
+      if (subtitle !== undefined) return subtitle;
+      if (getSubtitle && conversation) return getSubtitle(conversation);
       return getConversationSubtitle(conversation);
     }, [conversation, getSubtitle, subtitle]);
 
-    const currentInput = internalInput;
-
-    const handleChangeText = useCallback(
-      (text?: string) => {
-        const newText = text ?? '';
-        if (onChangeInput) {
-          onChangeInput(newText);
-        } else {
-          setInternalInput(newText);
-        }
-      },
-      [onChangeInput]
-    );
-
-    const handleSend = useCallback(
-      async (urlMetadata?: any) => {
-        // Support captured text passed from attachment handler
-        const capturedText = (urlMetadata as any)?._capturedText;
-        const cleanMetadata = capturedText
-          ? (({ _capturedText, ...rest }) => rest)(urlMetadata)
-          : (urlMetadata as IUrlMetadata);
-
-        const text = (capturedText || currentInput).trim();
-
-        // Validate: must have text OR preview metadata (text is optional if preview exists)
-        // If metadata exists, trust it (useLinkPreview is responsible for validity)
-        if (!text && !cleanMetadata) {
-          if (__DEV__)
-            console.warn('[ChatDetail] No text or preview link to send');
-          return;
-        }
-
-        // Log if metadata seems incomplete
-        if (cleanMetadata && !cleanMetadata.url) {
-          if (__DEV__)
-            console.warn(
-              '[ChatDetail] Preview metadata missing URL - check useLinkPreview'
-            );
-        }
-
-        try {
-          await sendMessage({
-            files: [],
-            plainText: text,
-            urlMetadata: cleanMetadata || undefined,
-          });
+    const insets = useSafeAreaInsets();
 
-          // Clear input after successful send
-          if (onChangeInput) {
-            onChangeInput('');
-          } else {
-            setInternalInput('');
-          }
-        } catch (error) {
-          if (__DEV__)
-            console.error('[ChatDetail] Failed to send message:', {
-              error,
-              text: text.substring(0, 50),
-              hasPreview: !!cleanMetadata,
-            });
-        }
-      },
-      [currentInput, onChangeInput, sendMessage]
+    const keyboardVerticalOffset = useMemo(
+      () => Platform.select({ android: insets.bottom, default: 0 }),
+      [insets.bottom]
     );
 
-    const insets = useSafeAreaInsets();
-
     const handlePressUrl = useCallback(
       (url: string) => {
         onPressUrl?.(normalizeUrl(url));
@@ -236,25 +122,16 @@ const ChatDetail = memo(
             avatarFullName={resolvedAvatarFullName}
             showAddMember={resolvedShowAddMember}
             onBack={onBack ?? handleBackDefault}
-            onPressSearch={
-              onPressSearch ?? (() => console.log('[onPressSearch]'))
-            }
-            onPressAddMember={
-              onPressAddMember ?? (() => console.log('[onPressAddMember]'))
-            }
-            onPressMenu={onPressMenu ?? (() => console.log('[onPressMenu]'))}
-            onPressAvatar={
-              onPressAvatar ?? (() => console.log('[onPressAvatar]'))
-            }
+            onPressSearch={onPressSearch}
+            onPressAddMember={onPressAddMember}
+            onPressMenu={onPressMenu}
+            onPressAvatar={onPressAvatar}
           />
 
           <KeyboardAvoidingView
             style={styles.keyboardAvoiding}
             behavior="padding"
-            keyboardVerticalOffset={Platform.select({
-              android: insets.bottom,
-              default: 0,
-            })}
+            keyboardVerticalOffset={keyboardVerticalOffset}
           >
             <ChatListLegend
               messages={messages}
@@ -264,45 +141,11 @@ const ChatDetail = memo(
               isLoading={isLoading}
               isLoadingEarlier={isLoadingEarlier}
               hasMoreEarlier={hasMoreEarlier}
-              onMediaPress={(items, index) => {
-                mediaViewerRef.current?.show(items, index);
-              }}
+              onMediaPress={handleMediaPress}
               onPressUrl={handlePressUrl}
             />
 
-            <ChatComposer
-              value={currentInput}
-              placeholder={inputPlaceholder}
-              onChangeText={handleChangeText}
-              onSend={handleSend}
-              onMessageSent={handleAttachmentMessageSent}
-              onPressAttach={
-                onPressAttach ?? (() => console.log('[onPressAttach]'))
-              }
-              onPressEmoji={
-                onPressEmoji ?? (() => console.log('[onPressEmoji]'))
-              }
-              showQuickActions={showQuickActions}
-              quickActions={quickActions ?? quickActionsDefault}
-              attachmentActions={attachmentActions ?? attachmentActionsDefault}
-              onQuickActionPress={
-                onQuickActionPress ??
-                ((action: DChatQuickAction) => {
-                  console.log('[onQuickActionPress]', action.id, action.meta);
-                })
-              }
-              onAttachmentAction={
-                onAttachmentAction ??
-                ((action: DChatAttachmentAction) => {
-                  console.log('[onAttachmentAction]', action.id, action.meta);
-                })
-              }
-              renderQuickAction={renderQuickAction}
-              renderQuickActions={renderQuickActions}
-              renderAttachmentAction={renderAttachmentAction}
-              attachmentColumns={attachmentColumns}
-              isEmptyMessage={messages?.length === 0}
-            />
+            <ChatComposer isEmptyMessage={messages?.length === 0} />
           </KeyboardAvoidingView>
 
           <MediaViewerModal ref={mediaViewerRef} />
@@ -315,9 +158,7 @@ const ChatDetail = memo(
 ChatDetail.displayName = 'ChatDetail';
 
 const styles = StyleSheet.create({
-  keyboardAvoiding: {
-    flex: 1,
-  },
+  keyboardAvoiding: { flex: 1 },
 });
 
 export default ChatDetail;

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

@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo, useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -18,6 +18,7 @@ import { getFlowInputButtonsNode } from '../../utils/flows';
 import { InputButtonFlow } from '../../components/flows/inputButtons';
 import { useResetFlow, useRunFlow } from '../../hooks/flows/useFlow';
 import type { IRunConversationFlowPayload } from '../../types/flows';
+import { useSendMessage } from '../../hooks/message/useSendMessage';
 
 export const ChatListLegend = memo(
   ({
@@ -25,7 +26,6 @@ export const ChatListLegend = memo(
     currentUserId = '',
     customMessageItemFactory,
     onLoadEarlier,
-    isLoading,
     isLoadingEarlier,
     hasMoreEarlier,
     onLoadNewer,
@@ -41,6 +41,7 @@ export const ChatListLegend = memo(
     );
 
     const { isBotConversation, conversationFlow } = useChatDetailContext();
+    const { retryMessage } = useSendMessage();
 
     const lastMessageId = useMemo(() => {
       const last = messages[messages.length - 1];
@@ -143,6 +144,7 @@ export const ChatListLegend = memo(
                   createdAtTime={createdAt}
                   onMediaPress={onMediaPress}
                   onPressUrl={onPressUrl}
+                  onRetry={retryMessage}
                   customMessageItemFactory={customMessageItemFactory}
                 />
                 {!!flowInputButtonsNode && (
@@ -179,6 +181,7 @@ export const ChatListLegend = memo(
         onRunFlow,
         conversationFlow?.flowCurrentStep,
         handleItemLayout,
+        retryMessage,
       ]
     );
 
@@ -327,16 +330,16 @@ export const ChatListLegend = memo(
       };
     }, []);
 
-    if (isLoading) {
-      return (
-        <KContainer.View flex center background={KColors.white}>
-          <ActivityIndicator
-            color={KColors.palette.primary.w400}
-            size="small"
-          />
-        </KContainer.View>
-      );
-    }
+    // if (isLoading) {
+    //   return (
+    //     <KContainer.View flex center background={KColors.white}>
+    //       <ActivityIndicator
+    //         color={KColors.palette.primary.w400}
+    //         size="small"
+    //       />
+    //     </KContainer.View>
+    //   );
+    // }
 
     return (
       <KContainer.View flex background={KColors.white} style={styles.container}>
@@ -346,7 +349,7 @@ export const ChatListLegend = memo(
           renderItem={renderItem}
           estimatedItemSize={avgItemHeightRef.current}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
-          recycleItems={false}
+          recycleItems={true}
           extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}`}
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}

package/src/screens/chat-detail/index.ts

@@ -27,12 +27,8 @@ export type {
   ChatQuickActionsRenderParams,
   ChatAttachmentPanelProps,
 } from './types';
-export type { DGiftedChatMessage } from '../../utils/giftedChatMessage';
+
 export {
   DChatMessageType,
   CUSTOM_MESSAGE_DATA_TYPE,
 } from '../../types/message';
-export {
-  mapOpenIMMessageToGiftedChat,
-  mapOpenIMMessagesToGiftedChat,
-} from '../../utils/giftedChatMessage';

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -1,6 +1,8 @@
 import { memo } from 'react';
 import type { ComponentType, ReactNode } from 'react';
+import { KContainer } from '@droppii/libs';
 import { MessageType } from '@droppii/openim-rn-client-sdk';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import type { DMessageItem } from '../../../types/chat';
 import type { MediaItem } from '../../../hooks/useMediaViewer';
 import { TextMessage } from '../../../components/messages/textMessage';
@@ -9,6 +11,7 @@ import { VideoMessage } from '../../../components/messages/videoMessage';
 import { FileMessage } from '../../../components/messages/fileMessage';
 import { LinkMessage } from '../../../components/messages/linkMessage';
 import { MergedMessage } from '../../../components/messages/mergedMessage';
+import { MessageStatusIndicator } from '../../../components/messages/MessageStatusIndicator';
 import type { BaseLegendMessageProps } from '../../../components/messages/types';
 
 type MessageProps = BaseLegendMessageProps & {
@@ -21,6 +24,7 @@ interface LegendChatMessageProps {
   createdAtTime: number;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
+  onRetry?: (message: MessageItem) => void;
   customMessageItemFactory?: (m: DMessageItem) => ReactNode;
 }
 
@@ -46,10 +50,6 @@ const MEDIA_TYPES: number[] = [
   MERGED_MESSAGE_TYPE,
 ];
 
-/**
- * Dispatcher component - renders the appropriate message component
- * based on message type. Extensible for new message types.
- */
 export const LegendChatMessage = memo(
   ({
     message,
@@ -57,9 +57,9 @@ export const LegendChatMessage = memo(
     createdAtTime,
     onMediaPress,
     onPressUrl,
+    onRetry,
     customMessageItemFactory,
   }: LegendChatMessageProps) => {
-    console.log('customMessageItemFactory', customMessageItemFactory);
     const customNode = customMessageItemFactory?.(message);
     if (customNode) {
       return customNode;
@@ -74,13 +74,20 @@ export const LegendChatMessage = memo(
       onPressUrl && message?.contentType === MessageType.UrlTextMessage;
 
     return (
-      <MessageComponent
-        message={message}
-        isOutgoing={isOutgoing}
-        createdAtTime={createdAtTime}
-        onMediaPress={hasMediaPress ? onMediaPress : undefined}
-        onPressUrl={hasUrlPress ? onPressUrl : undefined}
-      />
+      <KContainer.View row alignItems>
+        <MessageStatusIndicator
+          message={message}
+          isOutgoing={isOutgoing}
+          onRetry={onRetry}
+        />
+        <MessageComponent
+          message={message}
+          isOutgoing={isOutgoing}
+          createdAtTime={createdAtTime}
+          onMediaPress={hasMediaPress ? onMediaPress : undefined}
+          onPressUrl={hasUrlPress ? onPressUrl : undefined}
+        />
+      </KContainer.View>
     );
   }
 );

package/src/screens/chat-detail/types.ts

@@ -1,8 +1,6 @@
 import type { ReactNode } from 'react';
-
 import type { MediaItem } from '../../hooks/useMediaViewer';
 import type { DMessageItem } from '../../types/chat';
-import type { IUrlMetadata } from '../../types/common';
 import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
 
 export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
@@ -58,23 +56,7 @@ export interface ChatAttachmentPanelProps {
 }
 
 export interface ChatComposerProps {
-  value?: string;
-  placeholder?: string;
-  onChangeText?: (text?: string) => void;
-  onSend?: (urlMetadata?: IUrlMetadata) => void;
-  onPressAttach?: () => void;
-  onPressEmoji?: () => void;
-  onMessageSent?: (message: DMessageItem) => void;
-  showQuickActions?: boolean;
-  quickActions?: DChatQuickAction[];
-  attachmentActions?: DChatAttachmentAction[];
-  onQuickActionPress?: (action: DChatQuickAction) => void;
-  onAttachmentAction?: (action: DChatAttachmentAction) => void;
-  renderQuickAction?: ChatQuickActionsProps['renderAction'];
-  renderQuickActions?: ChatQuickActionsProps['renderQuickActions'];
-  renderAttachmentAction?: ChatAttachmentPanelProps['renderAction'];
-  attachmentColumns?: number;
-  isEmptyMessage: boolean;
+  isEmptyMessage?: boolean;
 }
 
 export interface ChatListProps {
@@ -110,25 +92,6 @@ export interface ChatDetailProps extends Omit<
   avatarFullName?: string;
   showAddMember?: boolean;
   getSubtitle?: (conversation: ConversationItem) => string | undefined;
-  renderChat?: (item: DMessageItem) => ReactNode;
-  showQuickActions?: boolean;
-  showAttachmentActions?: boolean;
-  quickActions?: DChatQuickAction[];
-  getQuickActions?: (
-    conversation: ConversationItem
-  ) => DChatQuickAction[] | undefined;
-  attachmentActions?: DChatAttachmentAction[];
-  inputPlaceholder?: string;
-  onChangeInput?: (text: string) => void;
-  onSend?: () => void;
-  onPressAttach?: () => void;
-  onPressEmoji?: () => void;
-  onQuickActionPress?: (action: DChatQuickAction) => void;
-  onAttachmentAction?: (action: DChatAttachmentAction) => void;
-  renderQuickAction?: ChatQuickActionsProps['renderAction'];
-  renderQuickActions?: ChatQuickActionsProps['renderQuickActions'];
-  renderAttachmentAction?: ChatAttachmentPanelProps['renderAction'];
-  attachmentColumns?: number;
   onPressUrl?: (url: string) => void;
   customMessageItemFactory?: (item: DMessageItem) => ReactNode;
 }

package/src/services/attachmentHandlers/fileAttachmentHandler.ts

@@ -9,8 +9,9 @@ interface FileElem {
   sourceUrl: string;
 }
 
-const MB = 1024 * 1024;
-export const MAX_FILE_SIZE = 50 * MB;
+import { UPLOAD_LIMITS } from '../../config/uploadLimits';
+
+export const MAX_FILE_SIZE = UPLOAD_LIMITS.file;
 
 export class FileAttachmentHandler implements IAttachmentHandler {
   validate(

package/src/services/attachmentHandlers/imageAttachmentHandler.ts

@@ -1,12 +1,15 @@
 import type { ImageAttachment } from '../../types/attachment';
 import type { IAttachmentHandler } from '../../types/attachmentHandler';
 import { generateUUID } from '../../utils/imageUtils';
+import { UPLOAD_LIMITS } from '../../config/uploadLimits';
 
 export const ImageAttachmentHandler: IAttachmentHandler = {
   validate(attachment: ImageAttachment) {
-    const MAX_SIZE = 5 * 1024 * 1024;
-    if (attachment.sourceFile.size > MAX_SIZE) {
-      return { valid: false, reason: 'Image exceeds 5MB limit' };
+    if (attachment.sourceFile.size > UPLOAD_LIMITS.image) {
+      return {
+        valid: false,
+        reason: `Image exceeds ${UPLOAD_LIMITS.image / 1024 / 1024}MB limit`,
+      };
     }
 
     const validMimes = [

package/src/services/attachmentHandlers/videoAttachmentHandler.ts

@@ -1,5 +1,6 @@
 import type { Attachment, VideoAttachment } from '../../types/attachment';
 import type { IAttachmentHandler } from '../../types/attachmentHandler';
+import { UPLOAD_LIMITS } from '../../config/uploadLimits';
 
 interface VideoPicInfo {
   videoUUID: string;
@@ -18,7 +19,7 @@ interface VideoPicInfo {
 }
 
 export class VideoAttachmentHandler implements IAttachmentHandler {
-  private static readonly MAX_VIDEO_SIZE = 200 * 1024 * 1024; // 200MB
+  private static readonly MAX_VIDEO_SIZE = UPLOAD_LIMITS.video;
   private static readonly SUPPORTED_TYPES = ['video/mp4', 'video/quicktime'];
 
   validate(