@droppii-org/chat-mobile 0.2.6 → 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,8 +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(
   ({
@@ -31,8 +41,7 @@ const ChatDetail = memo(
     subtitle,
     avatarUri,
     avatarFullName,
-    chatType,
-    chatCategory,
+    peerType,
     applicationType,
     showAddMember,
     getSubtitle,
@@ -43,9 +52,7 @@ const ChatDetail = memo(
     onPressAvatar,
     renderChat,
     showQuickActions = true,
-    showAttachmentActions = true,
     quickActions,
-    getQuickActions,
     inputValue,
     inputPlaceholder,
     onChangeInput,
@@ -59,14 +66,46 @@ 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,
       currentUserId,
       onLoadEarlier,
-      sendTextMessage,
       isLoading,
       isLoadingEarlier,
       hasMoreEarlier,
@@ -75,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]);
@@ -83,8 +137,7 @@ const ChatDetail = memo(
     const resolvedAvatarUri =
       avatarUri ?? getConversationAvatarUri(conversation);
     const resolvedAvatarFullName = avatarFullName ?? resolvedTitle;
-    const resolvedChatType = chatType ?? conversation?.chatType;
-    const resolvedChatCategory = chatCategory ?? conversation?.chatCategory;
+    const resolvedPeerType = peerType;
     const resolvedApplicationType =
       applicationType ?? conversation?.applicationType;
     const resolvedShowAddMember =
@@ -101,74 +154,70 @@ 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'
-    );
+    const currentInput = inputValue ?? internalInput;
 
-    useEffect(() => {
-      const unsubscribe = onFlagsChange(() => {
-        const newVariant = getFeatureFlag('CHAT_LIST_VARIANT') as
-          | 'gifted'
-          | 'legend';
-        setVariant(newVariant);
-      });
-      return unsubscribe;
-    }, []);
-
-    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?: 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 handleSend = useCallback(async () => {
-      const text = currentInput.trim();
-      if (!text) {
-        return;
-      }
+        const text = (capturedText || currentInput).trim();
 
-      try {
-        await sendTextMessage(text);
+        // 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;
+        }
 
-        if (onChangeInput) {
-          onChangeInput('');
-        } else {
-          setInternalInput('');
+        // Log if metadata seems incomplete
+        if (cleanMetadata && !cleanMetadata.url) {
+          if (__DEV__)
+            console.warn(
+              '[ChatDetail] Preview metadata missing URL - check useLinkPreview'
+            );
         }
-      } catch (error) {
-        console.error('[send-message]', error);
-      }
-    }, [currentInput, onChangeInput, sendTextMessage]);
+
+        try {
+          await sendMessage({
+            files: [],
+            plainText: text,
+            urlMetadata: cleanMetadata || undefined,
+          });
+
+          // 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 insets = useSafeAreaInsets();
 
@@ -179,15 +228,20 @@ const ChatDetail = memo(
           subtitle={resolvedSubtitle}
           avatarUri={resolvedAvatarUri}
           avatarFullName={resolvedAvatarFullName}
-          chatType={resolvedChatType}
-          chatCategory={resolvedChatCategory}
+          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
@@ -198,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/ChatDetailHeader.tsx

@@ -16,8 +16,7 @@ const ChatDetailHeader = memo(
     subtitle,
     avatarUri,
     avatarFullName,
-    chatType,
-    chatCategory,
+    peerType,
     applicationType,
     showAddMember = false,
     onBack,
@@ -81,17 +80,13 @@ const ChatDetailHeader = memo(
             <AvatarSection
               avatar={avatarUri ?? null}
               fullName={avatarFullName ?? title}
-              chatCategory={chatCategory}
+              peerType={peerType}
               applicationType={applicationType}
-              chatType={chatType}
             />
 
             <KContainer.View flex marginL="0.5rem">
               <KContainer.View row alignItems>
-                <NamePrefixIcon
-                  chatCategory={chatCategory}
-                  chatType={chatType}
-                />
+                <NamePrefixIcon peerType={peerType} />
                 <KLabel.Text
                   typo="TextLgBold"
                   color={KColors.gray.dark}
@@ -117,9 +112,8 @@ const ChatDetailHeader = memo(
       [
         avatarFullName,
         avatarUri,
-        chatCategory,
+        peerType,
         applicationType,
-        chatType,
         onBack,
         onPressAvatar,
         subtitle,

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

@@ -47,7 +47,7 @@ export const ChatLinkPreview = memo(
           </KLabel.Text>
         </KContainer.View>
         <KContainer.Touchable onPress={onDismiss} style={styles.right}>
-          <KImage.VectorIcons name="close" size={16} />
+          <KImage.VectorIcons name="close-o" size={16} />
         </KContainer.Touchable>
       </KContainer.View>
     );

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),
@@ -97,7 +88,7 @@ export const ChatListLegend = memo(
             return null; // Shouldn't happen if logic is consistent
           }
 
-          const { dayStart, messageType, createdAt } = messageData;
+          const { dayStart, createdAt } = messageData;
 
           return (
             <>
@@ -116,9 +107,9 @@ export const ChatListLegend = memo(
                 ) : (
                   <LegendChatMessage
                     message={message}
-                    messageType={messageType}
                     isOutgoing={isOutgoing}
                     createdAtTime={createdAt}
+                    onMediaPress={onMediaPress}
                   />
                 )}
               </KContainer.View>
@@ -136,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,
+  },
+});