@droppii-org/chat-mobile 0.2.3 → 0.2.6

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,66 @@
+import { memo, ComponentType } from 'react';
+import type { DMessageItem } from '../../../types/chat';
+import type { DChatMessageType } from '../../../types/message';
+import {
+  LegendTextMessage,
+  LegendImageMessage,
+  LegendVideoMessage,
+  LegendFileMessage,
+} from './message-types';
+import { DChatMessageType as MessageTypeEnum } from '../../../types/message';
+
+interface LegendChatMessageProps {
+  message: DMessageItem;
+  messageType: DChatMessageType;
+  isOutgoing: boolean;
+  createdAtTime: number;
+}
+
+// Message type to component mapping
+const messageComponentMap: Partial<
+  Record<DChatMessageType, ComponentType<any>>
+> = {
+  [MessageTypeEnum.Text]: LegendTextMessage,
+  [MessageTypeEnum.Image]: LegendImageMessage,
+  [MessageTypeEnum.Video]: LegendVideoMessage,
+  [MessageTypeEnum.File]: LegendFileMessage,
+  [MessageTypeEnum.Link]: LegendTextMessage, // Link renders as text for now
+  [MessageTypeEnum.Order]: LegendTextMessage, // Order renders as text for now
+  [MessageTypeEnum.Unsupported]: LegendTextMessage, // Unsupported renders as text for now
+};
+
+/**
+ * Dispatcher component - renders the appropriate message component
+ * based on message type. Extensible for new message types.
+ */
+export const LegendChatMessage = memo(
+  ({
+    message,
+    messageType,
+    isOutgoing,
+    createdAtTime,
+  }: LegendChatMessageProps) => {
+    const MessageComponent = messageComponentMap[messageType];
+
+    // Fallback to text message if type not found
+    if (!MessageComponent) {
+      return (
+        <LegendTextMessage
+          message={message}
+          isOutgoing={isOutgoing}
+          createdAtTime={createdAtTime}
+        />
+      );
+    }
+
+    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,
+  },
+});

package/src/screens/chat-detail/legend/message-types.tsx

@@ -0,0 +1,149 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KLabel, KSpacingValue } from '@droppii/libs';
+import type { DMessageItem } from '../../../types/chat';
+import { getMessageText } from '../../../utils/legendListMessage';
+import { CHAT_BUBBLE_COLORS } from '../constants';
+
+interface BaseLegendMessageProps {
+  message: DMessageItem;
+  isOutgoing: boolean;
+  createdAtTime: number;
+}
+
+const formatMessageTime = (createdAt: number) => {
+  const date = new Date(createdAt);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  return date.toLocaleTimeString('vi-VN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+};
+
+// Text Message Component
+export const LegendTextMessage = memo(
+  ({ message, isOutgoing, createdAtTime }: BaseLegendMessageProps) => {
+    const messageText = getMessageText(message);
+    const timeLabel = formatMessageTime(createdAtTime);
+
+    if (!messageText?.trim()) {
+      return null;
+    }
+
+    return (
+      <KContainer.View style={styles.wrapper}>
+        <KContainer.View
+          style={[
+            styles.bubble,
+            isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
+          ]}
+        >
+          <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+            {messageText}
+          </KLabel.Text>
+        </KContainer.View>
+
+        {!isOutgoing && timeLabel ? (
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={CHAT_BUBBLE_COLORS.timestamp}
+            marginL={'0.25rem'}
+          >
+            {timeLabel}
+          </KLabel.Text>
+        ) : null}
+      </KContainer.View>
+    );
+  }
+);
+
+LegendTextMessage.displayName = 'LegendTextMessage';
+
+// Image Message Component (placeholder)
+export const LegendImageMessage = memo(
+  ({ isOutgoing }: BaseLegendMessageProps) => {
+    return (
+      <KContainer.View style={styles.wrapper}>
+        <KContainer.View
+          style={[
+            styles.bubble,
+            isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
+          ]}
+        >
+          <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
+            [Image]
+          </KLabel.Text>
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+LegendImageMessage.displayName = 'LegendImageMessage';
+
+// Video Message Component (placeholder)
+export const LegendVideoMessage = memo(
+  ({ isOutgoing }: BaseLegendMessageProps) => {
+    return (
+      <KContainer.View style={styles.wrapper}>
+        <KContainer.View
+          style={[
+            styles.bubble,
+            isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
+          ]}
+        >
+          <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
+            [Video]
+          </KLabel.Text>
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+LegendVideoMessage.displayName = 'LegendVideoMessage';
+
+// File Message Component
+export const LegendFileMessage = memo(
+  ({ message, isOutgoing }: BaseLegendMessageProps) => {
+    const fileName = message.fileElem?.fileName || message.content || '[File]';
+
+    return (
+      <KContainer.View style={styles.wrapper}>
+        <KContainer.View
+          style={[
+            styles.bubble,
+            isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
+          ]}
+        >
+          <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
+            📎 {fileName}
+          </KLabel.Text>
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+LegendFileMessage.displayName = 'LegendFileMessage';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    maxWidth: '80%',
+  },
+  bubble: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    borderRadius: KSpacingValue['1.25rem'],
+  },
+  bubbleReceived: {
+    backgroundColor: CHAT_BUBBLE_COLORS.received,
+  },
+  bubbleSent: {
+    backgroundColor: CHAT_BUBBLE_COLORS.sent,
+  },
+});

package/src/screens/chat-detail/messages/ChatMessageBubble.tsx

@@ -12,7 +12,6 @@ const getMessageRenderers = (): Partial<
 export const ChatMessageBubble = memo(
   ({ message, position }: ChatMessageBubbleProps) => {
     const Renderer = getMessageRenderers()[message.messageType];
-
     if (!Renderer) {
       return null;
     }

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import type { DChatType } from '../../types/chat';
-import type { DMessageItem } from '../../types/chat';
+import type { DChatType, DChatCategory } from '../../types/chat';
+import type { DConversationItem, DMessageItem } from '../../types/chat';
 
 export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
 
@@ -23,6 +23,8 @@ export interface ChatDetailHeaderProps {
   avatarUri?: string | null;
   avatarFullName?: string;
   chatType?: DChatType;
+  chatCategory?: DChatCategory;
+  applicationType?: DConversationItem['applicationType'];
   showAddMember?: boolean;
   onBack?: () => void;
   onPressSearch?: () => void;
@@ -31,10 +33,17 @@ export interface ChatDetailHeaderProps {
   onPressAvatar?: () => void;
 }
 
+export interface ChatQuickActionsRenderParams {
+  actions: DChatQuickAction[];
+  onActionPress: (action: DChatQuickAction) => void;
+}
+
 export interface ChatQuickActionsProps {
+  visible?: boolean;
   actions?: DChatQuickAction[];
   onActionPress?: (action: DChatQuickAction) => void;
   renderAction?: (action: DChatQuickAction, onPress: () => void) => ReactNode;
+  renderQuickActions?: (params: ChatQuickActionsRenderParams) => ReactNode;
 }
 
 export interface ChatAttachmentPanelProps {
@@ -54,11 +63,13 @@ export interface ChatComposerProps {
   onSend?: () => void;
   onPressAttach?: () => void;
   onPressEmoji?: () => 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;
 }
@@ -71,17 +82,47 @@ export interface ChatListProps {
   isLoading?: boolean;
   isLoadingEarlier?: boolean;
   hasMoreEarlier?: boolean;
+  onLoadNewer?: () => void;
+  isLoadingNewer?: boolean;
+  hasMoreNewer?: boolean;
 }
 
-export interface ChatDetailProps extends ChatDetailHeaderProps {
-  messages?: DMessageItem[];
-  currentUserId?: string;
+export interface ChatDetailProps extends Omit<
+  ChatDetailHeaderProps,
+  | 'title'
+  | 'subtitle'
+  | 'avatarUri'
+  | 'avatarFullName'
+  | 'chatType'
+  | 'chatCategory'
+  | 'applicationType'
+  | 'showAddMember'
+> {
+  conversationId: string;
+  enabled?: boolean;
+  title?: string;
+  subtitle?: string;
+  avatarUri?: string | null;
+  avatarFullName?: string;
+  chatType?: DChatType;
+  chatCategory?: DChatCategory;
+  applicationType?: DConversationItem['applicationType'];
+  showAddMember?: boolean;
+  getSubtitle?: (conversation: DConversationItem) => string | undefined;
   renderChat?: (item: DMessageItem) => ReactNode;
+  showQuickActions?: boolean;
+  showAttachmentActions?: boolean;
   onLoadEarlier?: () => void;
   isLoading?: boolean;
   isLoadingEarlier?: boolean;
   hasMoreEarlier?: boolean;
+  onLoadNewer?: () => void;
+  isLoadingNewer?: boolean;
+  hasMoreNewer?: boolean;
   quickActions?: DChatQuickAction[];
+  getQuickActions?: (
+    conversation: DConversationItem
+  ) => DChatQuickAction[] | undefined;
   attachmentActions?: DChatAttachmentAction[];
   inputValue?: string;
   inputPlaceholder?: string;
@@ -92,6 +133,7 @@ export interface ChatDetailProps extends ChatDetailHeaderProps {
   onQuickActionPress?: (action: DChatQuickAction) => void;
   onAttachmentAction?: (action: DChatAttachmentAction) => void;
   renderQuickAction?: ChatQuickActionsProps['renderAction'];
+  renderQuickActions?: ChatQuickActionsProps['renderQuickActions'];
   renderAttachmentAction?: ChatAttachmentPanelProps['renderAction'];
   attachmentColumns?: number;
 }

package/src/services/apis.ts

@@ -8,7 +8,7 @@ import type { BaseResponse, GetOpenIMTokenResponse } from '../types/auth';
 import { Platform } from 'react-native';
 import { useConversationStore } from '../store';
 
-let apiInstance: AxiosInstance | null = null;
+export let apiInstance: AxiosInstance | null = null;
 
 export namespace ChatAPI {
   export function initApiInstance(api: AxiosInstance): void {

package/src/services/endpoints.ts

@@ -0,0 +1,5 @@
+export const ENDPOINTS = {
+  chatService: {
+    urlMetadata: '/chat-service/v1/utils/url-metadata',
+  },
+};

package/src/types/common.ts

@@ -0,0 +1,5 @@
+export interface IUrlMetadata {
+  title?: string;
+  description?: string;
+  image?: string;
+}

package/src/utils/legendListMessage.ts

@@ -0,0 +1,102 @@
+import { MessageType } from '@droppii/openim-rn-client-sdk';
+import type { DMessageItem } from '../types/chat';
+import { resolveChatMessageType } from './resolveMessageType';
+import type { DChatMessageType } from '../types/message';
+
+/**
+ * Extract message text based on content type
+ */
+export const getMessageText = (message: DMessageItem): string => {
+  switch (message.contentType) {
+    case MessageType.TextMessage:
+      return message.textElem?.content ?? message.content;
+    case MessageType.AtTextMessage:
+      return message.atTextElem?.text ?? message.content;
+    case MessageType.QuoteMessage:
+      return message.quoteElem?.text ?? message.content;
+    case MessageType.PictureMessage:
+      return '';
+    case MessageType.VoiceMessage:
+      return message.soundElem?.sourceUrl ? '' : '[Tin nhắn thoại]';
+    case MessageType.VideoMessage:
+      return message.videoElem?.videoUrl ? '' : '[Video]';
+    case MessageType.FileMessage:
+      return message.fileElem?.fileName ?? message.content;
+    case MessageType.CardMessage:
+      return message.cardElem?.nickname ?? message.content;
+    case MessageType.LocationMessage:
+      return message.locationElem?.description ?? message.content;
+    case MessageType.CustomMessage:
+      return message.customElem?.description ?? message.content;
+    case MessageType.FaceMessage:
+      return '[Sticker]';
+    default:
+      if (message.notificationElem?.detail) {
+        return message.notificationElem.detail;
+      }
+      return message.content || '';
+  }
+};
+
+export interface PrecomputedMessageData {
+  messageId: string;
+  dayStart: boolean;
+  messageType: DChatMessageType;
+  createdAt: number;
+}
+
+/**
+ * Precompute all message rendering data in single pass O(n)
+ * Eliminates redundant Date creation and type resolution during render
+ *
+ * Returns: Map of messageId -> {dayStart, messageType, createdAt}
+ */
+export const precomputeLegendListData = (
+  messages: DMessageItem[]
+): Map<string, PrecomputedMessageData> => {
+  const dataMap = new Map<string, PrecomputedMessageData>();
+  let lastDay: number | null = null;
+
+  messages.forEach((message, index) => {
+    // Get message ID - use timestamp as fallback for newly sent messages
+    const messageId =
+      message.clientMsgID ||
+      message.serverMsgID ||
+      `temp-${message.sendTime || message.createTime}-${index}`;
+
+    const createdAt = message.sendTime || message.createTime;
+    const day = new Date(createdAt).getDate();
+    const messageType = resolveChatMessageType(message);
+
+    dataMap.set(messageId, {
+      messageId,
+      dayStart: lastDay !== day,
+      messageType,
+      createdAt,
+    });
+
+    lastDay = day;
+  });
+
+  return dataMap;
+};
+
+/**
+ * Legacy: Use precomputeLegendListData instead
+ * Kept for backward compatibility
+ */
+export const computeDayStarts = (
+  messages: DMessageItem[]
+): Map<string, boolean> => {
+  const dayStartMap = new Map<string, boolean>();
+  let lastDay: number | null = null;
+
+  messages.forEach((message) => {
+    const day = new Date(message.sendTime || message.createTime).getDate();
+    const messageId = message.clientMsgID || message.serverMsgID || '';
+    dayStartMap.set(messageId, lastDay !== day);
+    lastDay = day;
+  });
+
+  return dayStartMap;
+};

package/src/utils/url.ts

@@ -0,0 +1,5 @@
+const URL_REGEX = /https?:\/\/[^\s]+/i;
+
+export function extractFirstUrl(text: string): string | undefined {
+  return text.match(URL_REGEX)?.[0];
+}