@droppii-org/chat-mobile 0.2.4 → 0.2.7

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

@@ -0,0 +1,403 @@
+import { memo, useCallback, useMemo, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import { LegendList, type LegendListRef } from '@legendapp/list/react-native';
+import { KContainer, KColors, KSpacingValue, KLabel } from '@droppii/libs';
+import { precomputeLegendListData } from '../../utils/legendListMessage';
+import type { ChatListProps } from './types';
+import type { DMessageItem } from '../../types/chat';
+import { LegendChatMessage } from './legend/LegendChatMessage';
+import { LegendChatDay } from './legend/LegendChatDay';
+import { LegendChatLoadEarlier } from './legend/LegendChatLoadEarlier';
+
+export const ChatListLegend = memo(
+  ({
+    messages = [],
+    currentUserId = '',
+    renderChat,
+    onLoadEarlier,
+    isLoading,
+    isLoadingEarlier,
+    hasMoreEarlier,
+    onLoadNewer,
+    isLoadingNewer,
+    hasMoreNewer,
+  }: 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),
+      [messages]
+    );
+
+    const listRef = useRef<LegendListRef>(null);
+    const buttonOpacity = useSharedValue(0);
+    const isAtBottomRef = useRef(true);
+    const lastMessageCountRef = useRef(messages.length);
+    const lastFirstMessageIdRef = useRef<string | null>(null);
+    const lastLastMessageIdRef = useRef<string | null>(null);
+    const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
+    const itemHeightsRef = useRef<Map<string, number>>(new Map());
+    const avgItemHeightRef = useRef(120);
+    const heightDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
+    const [showBadge, setShowBadge] = useState(false);
+
+    const handleItemLayout = useCallback(
+      (messageId: string, height: number) => {
+        itemHeightsRef.current.set(messageId, height);
+
+        // Debounce average height calculation (batch updates)
+        if (heightDebounceRef.current) {
+          clearTimeout(heightDebounceRef.current);
+        }
+
+        heightDebounceRef.current = setTimeout(() => {
+          if (itemHeightsRef.current.size > 0) {
+            const total = Array.from(itemHeightsRef.current.values()).reduce(
+              (a, b) => a + b,
+              0
+            );
+            avgItemHeightRef.current = Math.round(
+              total / itemHeightsRef.current.size
+            );
+          }
+        }, 100); // Batch updates every 100ms during load
+      },
+      []
+    );
+
+    const renderItem = useCallback(
+      ({ item, index }: any) => {
+        try {
+          if (!item) return null;
+
+          const message = item as DMessageItem;
+          const isOutgoing = message.sendID === currentUserId;
+          // Use same fallback as precomputeLegendListData
+          const messageId =
+            message.clientMsgID ||
+            message.serverMsgID ||
+            `temp-${message.sendTime || message.createTime}-${index}`;
+
+          const messageData = messageDataMap.get(messageId);
+          if (!messageData) {
+            return null; // Shouldn't happen if logic is consistent
+          }
+
+          const { dayStart, createdAt } = messageData;
+
+          return (
+            <>
+              {dayStart && <LegendChatDay createdAt={createdAt} />}
+              <KContainer.View
+                style={[
+                  styles.messageRow,
+                  isOutgoing ? styles.messageRowRight : styles.messageRowLeft,
+                ]}
+                onLayout={(e) =>
+                  handleItemLayout(messageId, e.nativeEvent.layout.height)
+                }
+              >
+                {renderChat ? (
+                  renderChat(message)
+                ) : (
+                  <LegendChatMessage
+                    message={message}
+                    isOutgoing={isOutgoing}
+                    createdAtTime={createdAt}
+                  />
+                )}
+              </KContainer.View>
+            </>
+          );
+        } catch (error) {
+          if (__DEV__)
+            console.error('[ChatListLegend] renderItem error:', error);
+          return (
+            <KContainer.View style={styles.errorRow}>
+              <KLabel.Text typo="TextXsNormal">
+                Error rendering message
+              </KLabel.Text>
+            </KContainer.View>
+          );
+        }
+      },
+      [currentUserId, renderChat, messageDataMap, handleItemLayout]
+    );
+
+    const maintainScrollConfig = useMemo(
+      () => ({
+        animated: false,
+        on: {
+          dataChange: !isLoadingEarlier,
+          layout: !isLoadingEarlier,
+          itemLayout: true,
+        },
+      }),
+      [isLoadingEarlier]
+    );
+
+    const handleStartReached = useCallback(() => {
+      if (__DEV__) {
+        console.log('[LegendList] onStartReached triggered', {
+          hasMoreEarlier,
+          isLoadingEarlier,
+          willLoad: hasMoreEarlier && !isLoadingEarlier,
+        });
+      }
+      if (hasMoreEarlier && !isLoadingEarlier) {
+        onLoadEarlier?.();
+      }
+    }, [hasMoreEarlier, isLoadingEarlier, onLoadEarlier]);
+
+    const handleEndReached = useCallback(() => {
+      if (hasMoreNewer && !isLoadingNewer) {
+        onLoadNewer?.();
+      }
+    }, [hasMoreNewer, isLoadingNewer, onLoadNewer]);
+
+    const handleScroll = useCallback(
+      (e: any) => {
+        const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
+        const isAtBottom =
+          contentOffset.y + layoutMeasurement.height >=
+          contentSize.height - 100;
+
+        // Debounce animation updates
+        if (scrollDebounceRef.current) {
+          clearTimeout(scrollDebounceRef.current);
+        }
+
+        scrollDebounceRef.current = setTimeout(() => {
+          if (isAtBottomRef.current !== isAtBottom) {
+            isAtBottomRef.current = isAtBottom;
+            buttonOpacity.value = withSpring(isAtBottom ? 0 : 1, {
+              duration: 300,
+            });
+          }
+        }, 50);
+      },
+      [buttonOpacity]
+    );
+
+    const handleScrollToBottom = useCallback(() => {
+      listRef.current?.scrollToEnd({ animated: true });
+      buttonOpacity.value = withSpring(0, { duration: 300 });
+      isAtBottomRef.current = true;
+      setShowBadge(false);
+    }, [buttonOpacity]);
+
+    const animatedButtonStyle = useAnimatedStyle(() => ({
+      opacity: buttonOpacity.value,
+      pointerEvents: buttonOpacity.value === 0 ? 'none' : 'auto',
+    }));
+
+    // Auto-scroll to bottom when new messages arrive
+    useEffect(() => {
+      const currentCount = messages.length;
+      const previousCount = lastMessageCountRef.current;
+      let timeoutId: NodeJS.Timeout | undefined;
+
+      if (currentCount > previousCount) {
+        // Detect if messages were prepended (added to top) or appended (added to bottom)
+        const firstMsgId = messages[0]?.clientMsgID || messages[0]?.serverMsgID;
+        const lastMsgId =
+          messages[currentCount - 1]?.clientMsgID ||
+          messages[currentCount - 1]?.serverMsgID;
+        const prevFirstMsgId = lastFirstMessageIdRef.current;
+        const prevLastMsgId = lastLastMessageIdRef.current;
+
+        // Messages were prepended if last message ID stayed same but first changed
+        const wasPrepended =
+          prevLastMsgId === lastMsgId && firstMsgId !== prevFirstMsgId;
+
+        // Check if new message is from current user
+        const newMessage = messages[currentCount - 1];
+        const isOwnMessage = newMessage?.sendID === currentUserId;
+
+        // Auto-scroll conditions:
+        // 1. Own message: ALWAYS scroll to bottom (user needs to see what they sent)
+        // 2. Received message: Only scroll if already at bottom (don't interrupt reading history)
+        const shouldScroll =
+          !wasPrepended &&
+          !isLoadingEarlier &&
+          (isOwnMessage || isAtBottomRef.current);
+
+        if (shouldScroll) {
+          timeoutId = setTimeout(() => {
+            listRef.current?.scrollToEnd({ animated: true });
+            buttonOpacity.value = withSpring(0, { duration: 300 });
+            setShowBadge(false);
+          }, 100);
+        } else if (!wasPrepended && !isLoadingEarlier && !isOwnMessage) {
+          // Show badge for received messages while scrolled up
+          setShowBadge(true);
+        }
+      }
+
+      lastMessageCountRef.current = currentCount;
+      if (messages.length > 0) {
+        // Use same ID logic as precomputeLegendListData (with fallback)
+        lastFirstMessageIdRef.current =
+          messages[0]?.clientMsgID || messages[0]?.serverMsgID || null;
+        lastLastMessageIdRef.current =
+          messages[messages.length - 1]?.clientMsgID ||
+          messages[messages.length - 1]?.serverMsgID ||
+          null;
+      }
+
+      return () => {
+        if (timeoutId) clearTimeout(timeoutId);
+      };
+    }, [messages, isLoadingEarlier, buttonOpacity, currentUserId]);
+
+    // Cleanup debounce timeouts on unmount
+    useEffect(() => {
+      return () => {
+        if (scrollDebounceRef.current) {
+          clearTimeout(scrollDebounceRef.current);
+        }
+        if (heightDebounceRef.current) {
+          clearTimeout(heightDebounceRef.current);
+        }
+      };
+    }, []);
+
+    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}>
+        <LegendList
+          ref={listRef}
+          data={messages}
+          renderItem={renderItem}
+          estimatedItemSize={avgItemHeightRef.current}
+          keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
+          recycleItems
+          alignItemsAtEnd
+          maintainVisibleContentPosition={!isLoadingEarlier}
+          maintainScrollAtEnd={maintainScrollConfig}
+          scrollEventThrottle={16}
+          onScroll={handleScroll}
+          contentContainerStyle={styles.content}
+          scrollIndicatorInsets={{ right: 1 }}
+          ListHeaderComponent={
+            <LegendChatLoadEarlier isLoading={isLoadingEarlier} />
+          }
+          onStartReached={handleStartReached}
+          onStartReachedThreshold={0.5}
+          onEndReached={handleEndReached}
+          onEndReachedThreshold={0.2}
+          showsVerticalScrollIndicator={false}
+          initialScrollAtEnd
+        />
+        <Animated.View
+          style={[styles.scrollToBottomButton, animatedButtonStyle]}
+        >
+          <KContainer.Touchable
+            onPress={handleScrollToBottom}
+            activeOpacity={0.7}
+            style={styles.buttonInner}
+            accessible
+            accessibilityLabel="Scroll to latest messages"
+            accessibilityRole="button"
+          >
+            <KLabel.Text
+              style={styles.scrollToBottomText}
+              accessibilityLabel=""
+            >
+              ↓
+            </KLabel.Text>
+            {showBadge && <KContainer.View style={styles.badge} />}
+          </KContainer.Touchable>
+        </Animated.View>
+      </KContainer.View>
+    );
+  }
+);
+
+ChatListLegend.displayName = 'ChatListLegend';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  messageRow: {
+    width: '100%',
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    marginBottom: KSpacingValue['0.25rem'],
+  },
+  messageRowLeft: {
+    alignItems: 'flex-start',
+  },
+  messageRowRight: {
+    alignItems: 'flex-end',
+  },
+  content: {
+    paddingVertical: KSpacingValue['0.75rem'],
+    flexGrow: 1,
+  },
+  scrollToBottomButton: {
+    position: 'absolute',
+    bottom: 20,
+    right: 16,
+    zIndex: 999,
+  },
+  buttonInner: {
+    position: 'relative',
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: KColors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: KColors.black,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.16,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  scrollToBottomText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: KColors.palette.primary.w400,
+  },
+  errorRow: {
+    padding: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badge: {
+    position: 'absolute',
+    top: -4,
+    right: -4,
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: KColors.palette.primary.w400,
+    borderWidth: 2,
+    borderColor: KColors.white,
+  },
+});

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

@@ -61,7 +61,13 @@ const QuickActionItem = memo(
 QuickActionItem.displayName = 'QuickActionItem';
 
 export const ChatQuickActions = memo(
-  ({ actions, onActionPress, renderAction }: ChatQuickActionsProps) => {
+  ({
+    visible = true,
+    actions,
+    onActionPress,
+    renderAction,
+    renderQuickActions,
+  }: ChatQuickActionsProps) => {
     const handleActionPress = useChatActionPress(onActionPress);
 
     const renderItem = useCallback<ListRenderItem<DChatQuickAction>>(
@@ -79,10 +85,21 @@ export const ChatQuickActions = memo(
 
     const keyExtractor = useCallback((item: DChatQuickAction) => item.id, []);
 
-    if (!actions?.length) {
+    if (!visible || !actions?.length) {
       return null;
     }
 
+    if (renderQuickActions) {
+      return (
+        <>
+          {renderQuickActions({
+            actions,
+            onActionPress: handleActionPress,
+          })}
+        </>
+      );
+    }
+
     return (
       <KContainer.View paddingT="0.75rem" paddingB="0.25rem">
         <FlatList

package/src/screens/chat-detail/conversationHeader.utils.ts

@@ -0,0 +1,49 @@
+import { PeerType } from '@droppii/openim-rn-client-sdk';
+import { type DConversationItem } from '../../types/chat';
+
+export const getConversationTitle = (
+  conversation?: DConversationItem
+): string => {
+  if (!conversation) {
+    return 'Tin nhắn';
+  }
+
+  return conversation.showName ?? 'Tin nhắn';
+};
+
+export const getConversationAvatarUri = (
+  conversation?: DConversationItem
+): string | null => {
+  return conversation?.faceURL ?? null;
+};
+
+export const getConversationSubtitle = (
+  conversation?: DConversationItem
+): string | undefined => {
+  if (!conversation) {
+    return undefined;
+  }
+
+  if (conversation.peerType === PeerType.Group) {
+    const unreadLabel =
+      (conversation.unreadCount ?? 0) > 0
+        ? `${conversation.unreadCount} tin nhắn mới`
+        : 'Không có tin mới';
+    return `20 thành viên • ${unreadLabel}`;
+  }
+
+  if (
+    conversation.peerType === PeerType.Customer ||
+    conversation.applicationType === 'MALL'
+  ) {
+    return '338,5K Đã bán • 4,2K Theo dõi';
+  }
+
+  return 'Nhấn để xem thông tin';
+};
+
+export const shouldShowAddMember = (
+  conversation?: DConversationItem
+): boolean => {
+  return conversation?.peerType === PeerType.Group;
+};

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

@@ -9,6 +9,12 @@ export {
   DEFAULT_ATTACHMENT_ACTIONS,
   DEFAULT_ATTACHMENT_PANEL_HEIGHT,
 } from './constants';
+export {
+  getConversationTitle,
+  getConversationAvatarUri,
+  getConversationSubtitle,
+  shouldShowAddMember,
+} from './conversationHeader.utils';
 export type {
   DChatActionItem,
   DChatActionIconProvider,
@@ -19,6 +25,7 @@ export type {
   ChatListProps,
   ChatComposerProps,
   ChatQuickActionsProps,
+  ChatQuickActionsRenderParams,
   ChatAttachmentPanelProps,
 } from './types';
 export type { DGiftedChatMessage } from '../../utils/giftedChatMessage';

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

@@ -0,0 +1,70 @@
+import { memo, useMemo } from 'react';
+import { KContainer, KLabel } from '@droppii/libs';
+import { CHAT_BUBBLE_COLORS } from '../constants';
+
+const formatTime = (date: Date) =>
+  date.toLocaleTimeString('vi-VN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+
+const formatDayLabel = (createdAt: number): string | null => {
+  const date = new Date(createdAt);
+  if (Number.isNaN(date.getTime())) return null;
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const messageDay = new Date(date);
+  messageDay.setHours(0, 0, 0, 0);
+
+  if (messageDay.getTime() === today.getTime()) {
+    return `${formatTime(date)} Hôm nay`;
+  }
+
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  if (messageDay.getTime() === yesterday.getTime()) {
+    return `${formatTime(date)} Hôm qua`;
+  }
+
+  if (messageDay.getFullYear() === today.getFullYear()) {
+    return `${formatTime(date)} ${date.toLocaleDateString('vi-VN', {
+      day: 'numeric',
+      month: 'long',
+    })}`;
+  }
+
+  return `${formatTime(date)} ${date.toLocaleDateString('vi-VN', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })}`;
+};
+
+interface LegendChatDayProps {
+  createdAt: number;
+}
+
+export const LegendChatDay = memo(({ createdAt }: LegendChatDayProps) => {
+  const dateStr = useMemo(
+    () => (createdAt == null ? null : formatDayLabel(createdAt)),
+    [createdAt]
+  );
+
+  if (!dateStr) return null;
+
+  return (
+    <KContainer.View center marginV="0.5rem">
+      <KContainer.View>
+        <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
+          {dateStr}
+        </KLabel.Text>
+      </KContainer.View>
+    </KContainer.View>
+  );
+});
+
+LegendChatDay.displayName = 'LegendChatDay';

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

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { ActivityIndicator } from 'react-native';
+import { KContainer, KColors } from '@droppii/libs';
+
+interface LegendChatLoadEarlierProps {
+  isLoading?: boolean;
+}
+
+export const LegendChatLoadEarlier = memo(
+  ({ isLoading = false }: LegendChatLoadEarlierProps) => {
+    if (!isLoading) return null;
+
+    return (
+      <KContainer.View center marginV="0.75rem">
+        <ActivityIndicator color={KColors.palette.primary.w400} size="small" />
+      </KContainer.View>
+    );
+  }
+);
+
+LegendChatLoadEarlier.displayName = 'LegendChatLoadEarlier';

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

@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import type { ComponentType } from 'react';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
+import type { DMessageItem } from '../../../types/chat';
+import {
+  LegendTextMessage,
+  LegendImageMessage,
+  LegendVideoMessage,
+  LegendFileMessage,
+  LegendLinkMessage,
+} from './message-types';
+
+interface LegendChatMessageProps {
+  message: DMessageItem;
+  isOutgoing: boolean;
+  createdAtTime: number;
+}
+
+const messageComponentMap: Partial<Record<MessageType, ComponentType<any>>> = {
+  [MessageType.TextMessage]: LegendTextMessage,
+  [MessageType.AtTextMessage]: LegendTextMessage,
+  [MessageType.QuoteMessage]: LegendTextMessage,
+  [MessageType.UrlTextMessage]: LegendLinkMessage,
+  [MessageType.PictureMessage]: LegendImageMessage,
+  [MessageType.VideoMessage]: LegendVideoMessage,
+  [MessageType.FileMessage]: LegendFileMessage,
+};
+
+/**
+ * Dispatcher component - renders the appropriate message component
+ * based on message type. Extensible for new message types.
+ */
+export const LegendChatMessage = memo(
+  ({ message, isOutgoing, createdAtTime }: LegendChatMessageProps) => {
+    const MessageComponent =
+      messageComponentMap[message?.contentType] ?? LegendTextMessage;
+
+    return (
+      <MessageComponent
+        message={message}
+        isOutgoing={isOutgoing}
+        createdAtTime={createdAtTime}
+      />
+    );
+  }
+);
+
+LegendChatMessage.displayName = 'LegendChatMessage';

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

@@ -0,0 +1,56 @@
+import { memo, useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KColors, KLabel } from '@droppii/libs';
+
+interface LegendChatScrollToBottomProps {
+  listRef: React.RefObject<any>;
+}
+
+export const LegendChatScrollToBottom = memo(
+  ({ listRef }: LegendChatScrollToBottomProps) => {
+    const handlePress = useCallback(() => {
+      listRef.current?.scrollToEnd({ animated: true });
+    }, [listRef]);
+
+    return (
+      <KContainer.Touchable
+        onPress={handlePress}
+        style={styles.scrollToBottom}
+        activeOpacity={0.7}
+      >
+        <KContainer.View style={styles.scrollToBottomContent}>
+          <KLabel.Text style={styles.arrowDown}>↓</KLabel.Text>
+        </KContainer.View>
+      </KContainer.Touchable>
+    );
+  }
+);
+
+LegendChatScrollToBottom.displayName = 'LegendChatScrollToBottom';
+
+const styles = StyleSheet.create({
+  scrollToBottom: {
+    position: 'absolute',
+    bottom: 20,
+    right: 16,
+    zIndex: 999,
+  },
+  scrollToBottomContent: {
+    backgroundColor: KColors.white,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    shadowColor: KColors.black,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.16,
+    shadowRadius: 8,
+    elevation: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  arrowDown: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: KColors.palette.primary.w400,
+  },
+});