@droppii-org/chat-mobile 0.2.7 → 0.2.8

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

@@ -1,13 +1,17 @@
-import { memo, useState, useCallback, useEffect, useMemo } from 'react';
+import { memo, useState, useCallback, useEffect, useMemo, useRef } 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 { useNavigation } from '@react-navigation/native';
 import { useChatMessages } from '../../hooks/useChatMessages';
+import {
+  MediaViewerModal,
+  type MediaViewerModalHandle,
+} from '../../components/MediaViewerModal';
 import { useConversation, useConversationStore } from '../../store';
 import ChatDetailHeader from './ChatDetailHeader';
-import { ChatList } from './ChatList';
 import { ChatListLegend } from './ChatListLegend';
 import { ChatComposer } from './ChatComposer';
 import {
@@ -20,10 +24,14 @@ import {
   getConversationTitle,
   shouldShowAddMember,
 } from './conversationHeader.utils';
-import { getFeatureFlag, onFlagsChange } from '../../config/feature-flags';
-import type { ChatDetailProps } from './types';
+import type {
+  ChatDetailProps,
+  DChatQuickAction,
+  DChatAttachmentAction,
+} from './types';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import type { IUrlMetadata } from '../../types/common';
+import { useMessageStore } from '../../store/message';
 
 const ChatDetail = memo(
   ({
@@ -44,9 +52,7 @@ const ChatDetail = memo(
     onPressAvatar,
     renderChat,
     showQuickActions = true,
-    showAttachmentActions = true,
     quickActions,
-    getQuickActions,
     inputValue,
     inputPlaceholder,
     onChangeInput,
@@ -60,10 +66,41 @@ const ChatDetail = memo(
     renderAttachmentAction,
     attachmentColumns,
   }: ChatDetailProps) => {
-    const [internalInput, setInternalInput] = useState('');
+    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 { sendMessage } = useSendMessage();
+    const { pushNewMessage } = useMessageStore();
 
     const {
       messages,
@@ -77,6 +114,21 @@ const ChatDetail = memo(
       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]
+    );
+
     useEffect(() => {
       useConversationStore.getState().setCurrentConversation(conversationId);
     }, [conversationId]);
@@ -85,7 +137,7 @@ const ChatDetail = memo(
     const resolvedAvatarUri =
       avatarUri ?? getConversationAvatarUri(conversation);
     const resolvedAvatarFullName = avatarFullName ?? resolvedTitle;
-    const resolvedPeerType = peerType ?? conversation?.peerType;
+    const resolvedPeerType = peerType;
     const resolvedApplicationType =
       applicationType ?? conversation?.applicationType;
     const resolvedShowAddMember =
@@ -102,77 +154,66 @@ const ChatDetail = memo(
       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 currentInput = inputValue ?? internalInput;
 
-    const handleChangeInput = useCallback(
-      (text: string) => {
+    const handleChangeText = useCallback(
+      (text?: string) => {
+        const newText = text ?? '';
         if (onChangeInput) {
-          onChangeInput(text);
-          return;
+          onChangeInput(newText);
+        } else {
+          setInternalInput(newText);
         }
-        setInternalInput(text);
       },
       [onChangeInput]
     );
 
-    const currentInput = inputValue ?? internalInput;
-
     const handleSend = useCallback(
-      async (urlMetadata?: IUrlMetadata) => {
-        const text = currentInput.trim();
-        if (!text) {
+      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,
+            urlMetadata: cleanMetadata || undefined,
           });
 
+          // Clear input after successful send
           if (onChangeInput) {
             onChangeInput('');
           } else {
             setInternalInput('');
           }
         } catch (error) {
-          console.error('[send-message]', error);
+          if (__DEV__)
+            console.error('[ChatDetail] Failed to send message:', {
+              error,
+              text: text.substring(0, 50),
+              hasPreview: !!cleanMetadata,
+            });
         }
       },
       [currentInput, onChangeInput, sendMessage]
@@ -190,11 +231,17 @@ const ChatDetail = memo(
           peerType={resolvedPeerType}
           applicationType={resolvedApplicationType}
           showAddMember={resolvedShowAddMember}
-          onBack={onBack}
-          onPressSearch={onPressSearch}
-          onPressAddMember={onPressAddMember}
-          onPressMenu={onPressMenu}
-          onPressAvatar={onPressAvatar}
+          onBack={onBack ?? handleBackDefault}
+          onPressSearch={
+            onPressSearch ?? (() => console.log('[onPressSearch]'))
+          }
+          onPressAddMember={
+            onPressAddMember ?? (() => console.log('[onPressAddMember]'))
+          }
+          onPressMenu={onPressMenu ?? (() => console.log('[onPressMenu]'))}
+          onPressAvatar={
+            onPressAvatar ?? (() => console.log('[onPressAvatar]'))
+          }
         />
 
         <KeyboardAvoidingView
@@ -205,46 +252,52 @@ const ChatDetail = memo(
             default: 0,
           })}
         >
-          {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}
-            />
-          )}
+          <ChatListLegend
+            messages={messages}
+            currentUserId={currentUserId}
+            renderChat={renderChat}
+            onLoadEarlier={onLoadEarlier}
+            isLoading={isLoading}
+            isLoadingEarlier={isLoadingEarlier}
+            hasMoreEarlier={hasMoreEarlier}
+            onMediaPress={(items, index) => {
+              mediaViewerRef.current?.show(items, index);
+            }}
+          />
 
           <ChatComposer
             value={currentInput}
             placeholder={inputPlaceholder}
-            onChangeText={handleChangeInput}
+            onChangeText={handleChangeText}
             onSend={handleSend}
-            onPressAttach={onPressAttach}
-            onPressEmoji={onPressEmoji}
+            onMessageSent={handleAttachmentMessageSent}
+            onPressAttach={
+              onPressAttach ?? (() => console.log('[onPressAttach]'))
+            }
+            onPressEmoji={onPressEmoji ?? (() => console.log('[onPressEmoji]'))}
             showQuickActions={showQuickActions}
-            quickActions={resolvedQuickActions}
-            attachmentActions={resolvedAttachmentActions}
-            onQuickActionPress={onQuickActionPress}
-            onAttachmentAction={onAttachmentAction}
+            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}
           />
         </KeyboardAvoidingView>
+
+        <MediaViewerModal ref={mediaViewerRef} />
       </KContainer.Page>
     );
   }

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

@@ -26,17 +26,8 @@ export const ChatListLegend = memo(
     onLoadNewer,
     isLoadingNewer,
     hasMoreNewer,
+    onMediaPress,
   }: ChatListProps) => {
-    if (__DEV__) {
-      console.log('[LegendList] Props:', {
-        hasMoreEarlier,
-        isLoadingEarlier,
-        hasMoreNewer,
-        isLoadingNewer,
-        messagesCount: messages.length,
-      });
-    }
-
     // Precompute all message data in single pass (O(n))
     const messageDataMap = useMemo(
       () => precomputeLegendListData(messages),
@@ -118,6 +109,7 @@ export const ChatListLegend = memo(
                     message={message}
                     isOutgoing={isOutgoing}
                     createdAtTime={createdAt}
+                    onMediaPress={onMediaPress}
                   />
                 )}
               </KContainer.View>
@@ -135,7 +127,13 @@ export const ChatListLegend = memo(
           );
         }
       },
-      [currentUserId, renderChat, messageDataMap, handleItemLayout]
+      [
+        currentUserId,
+        renderChat,
+        messageDataMap,
+        handleItemLayout,
+        onMediaPress,
+      ]
     );
 
     const maintainScrollConfig = useMemo(

package/src/screens/chat-detail/components/ChatInputActions.tsx

@@ -0,0 +1,71 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KImage, KColors } from '@droppii/libs';
+
+export interface ChatInputActionsProps {
+  onSend: () => void;
+  onAttachmentToggle: () => void;
+  hasAttachmentActions: boolean;
+  isAttachmentOpen: boolean;
+}
+
+export const ChatInputActions = memo(
+  ({
+    onSend,
+    onAttachmentToggle,
+    hasAttachmentActions,
+    isAttachmentOpen,
+  }: ChatInputActionsProps) => {
+    return (
+      <>
+        {hasAttachmentActions && (
+          <KContainer.Touchable
+            onPress={onAttachmentToggle}
+            center
+            br="round"
+            style={styles.attachmentButton}
+          >
+            <KImage.VectorIcons
+              name={isAttachmentOpen ? 'close-circle-o' : 'plus-circle-o'}
+              size={24}
+              color={
+                isAttachmentOpen
+                  ? KColors.palette.primary.w400
+                  : KColors.palette.gray.w600
+              }
+            />
+          </KContainer.Touchable>
+        )}
+
+        <KContainer.Touchable
+          onPress={onSend}
+          width={40}
+          height={40}
+          center
+          br="round"
+          background={KColors.palette.primary.w400}
+          marginL="0.75rem"
+          style={styles.sendButton}
+        >
+          <KImage.VectorIcons
+            name="send"
+            provider="MaterialCommunityIcons"
+            size={20}
+            color={KColors.white}
+          />
+        </KContainer.Touchable>
+      </>
+    );
+  }
+);
+
+ChatInputActions.displayName = 'ChatInputActions';
+
+const styles = StyleSheet.create({
+  attachmentButton: {
+    // Touchable styling handled by KContainer
+  },
+  sendButton: {
+    // Touchable styling handled by KContainer
+  },
+});

package/src/screens/chat-detail/components/ChatMessageInput.tsx

@@ -0,0 +1,127 @@
+import { memo, useCallback } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  TextInput,
+  type NativeSyntheticEvent,
+  type TextInputContentSizeChangeEventData,
+} from 'react-native';
+import { KContainer, KImage, KColors, KSpacingValue } from '@droppii/libs';
+
+const INPUT_FONT_SIZE = 16;
+const INPUT_LINE_HEIGHT = 22.4;
+const INPUT_MAX_HEIGHT = INPUT_LINE_HEIGHT * 5;
+const IS_IOS = Platform.OS === 'ios';
+
+export interface ChatMessageInputProps {
+  value?: string;
+  placeholder?: string;
+  onChangeText: (text?: string) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+  onContentSizeChange: (
+    event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>
+  ) => void;
+  isInputFocused: boolean;
+  isMultilineInput: boolean;
+  onEmojiPress?: () => void;
+  inputRef: React.RefObject<TextInput>;
+}
+
+export const ChatMessageInput = memo(
+  ({
+    value,
+    placeholder = 'Nhập tin nhắn...',
+    onChangeText,
+    onFocus,
+    onBlur,
+    onContentSizeChange,
+    isInputFocused,
+    isMultilineInput,
+    onEmojiPress,
+    inputRef,
+  }: ChatMessageInputProps) => {
+    const renderEmojiNode = useCallback(
+      () => (
+        <KContainer.Touchable marginR="0.5rem" onPress={onEmojiPress}>
+          <KImage.VectorIcons
+            name="sticker-o"
+            size={24}
+            color={KColors.gray.normal}
+          />
+        </KContainer.Touchable>
+      ),
+      [onEmojiPress]
+    );
+
+    return (
+      <KContainer.View flex marginL="0.75rem" style={styles.inputWrapper}>
+        <KContainer.View
+          row
+          alignItems={isMultilineInput ? 'flex-end' : 'center'}
+          brW={1}
+          brC={
+            isInputFocused
+              ? KColors.palette.primary.w400
+              : KColors.palette.gray.w100
+          }
+          background={KColors.white}
+          paddingL="0.75rem"
+          style={styles.inputContainer}
+        >
+          <KContainer.View marginR="0.75rem">
+            <KImage.VectorIcons
+              name="chat-suggest-o"
+              size={24}
+              color={KColors.gray.normal}
+            />
+          </KContainer.View>
+
+          <TextInput
+            ref={inputRef}
+            placeholder={placeholder}
+            placeholderTextColor={KColors.palette.gray.w200}
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onContentSizeChange={onContentSizeChange}
+            multiline
+            blurOnSubmit={false}
+            scrollEnabled
+            allowFontScaling={false}
+            underlineColorAndroid={KColors.transparent}
+            selectionColor={KColors.selector}
+            textAlignVertical={isMultilineInput ? 'top' : 'center'}
+            style={[styles.textInput]}
+          />
+
+          {renderEmojiNode()}
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+ChatMessageInput.displayName = 'ChatMessageInput';
+
+const styles = StyleSheet.create({
+  inputWrapper: {
+    overflow: 'hidden',
+  },
+  inputContainer: {
+    borderRadius: KSpacingValue['1.25rem'],
+    minHeight: 48,
+    paddingVertical: KSpacingValue['0.25rem'],
+  },
+  textInput: {
+    flex: 1,
+    maxHeight: INPUT_MAX_HEIGHT,
+    fontSize: INPUT_FONT_SIZE,
+    lineHeight: INPUT_LINE_HEIGHT,
+    color: KColors.palette.gray.w900,
+    paddingVertical: IS_IOS ? 0 : 4,
+    paddingHorizontal: IS_IOS ? 2 : 0,
+    includeFontPadding: false,
+  },
+});