@droppii-org/chat-mobile 0.2.4 → 0.2.7

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

@@ -1,50 +1,143 @@
-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';
+import { useSendMessage } from '../../hooks/message/useSendMessage';
+import type { IUrlMetadata } from '../../types/common';
 
 const ChatDetail = memo(
   ({
+    conversationId,
+    enabled = true,
     title,
     subtitle,
     avatarUri,
     avatarFullName,
-    chatType,
-    chatCategory,
+    peerType,
     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 { sendMessage } = useSendMessage();
+
+    const {
+      messages,
+      currentUserId,
+      onLoadEarlier,
+      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 resolvedPeerType = peerType ?? conversation?.peerType;
+    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 +151,45 @@ const ChatDetail = memo(
     );
 
     const currentInput = inputValue ?? internalInput;
+
+    const handleSend = useCallback(
+      async (urlMetadata?: IUrlMetadata) => {
+        const text = currentInput.trim();
+        if (!text) {
+          return;
+        }
+
+        try {
+          await sendMessage({
+            files: [],
+            plainText: text,
+            urlMetadata,
+          });
+
+          if (onChangeInput) {
+            onChangeInput('');
+          } else {
+            setInternalInput('');
+          }
+        } catch (error) {
+          console.error('[send-message]', error);
+        }
+      },
+      [currentInput, onChangeInput, sendMessage]
+    );
+
     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}
+          peerType={resolvedPeerType}
+          applicationType={resolvedApplicationType}
+          showAddMember={resolvedShowAddMember}
           onBack={onBack}
           onPressSearch={onPressSearch}
           onPressAddMember={onPressAddMember}
@@ -86,28 +205,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/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

@@ -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-o" 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),