@droppii-org/chat-mobile 0.2.4 → 0.2.7

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

@@ -0,0 +1,304 @@
+import { memo } from 'react';
+import { Linking, StyleSheet, Text } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import type { DMessageItem, IMessageItemEx } from '../../../types/chat';
+import type { IUrlMetadata } from '../../../types/common';
+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';
+
+// Link Message Component
+const parseUrlMetadata = (ex?: string): IUrlMetadata | undefined => {
+  if (!ex) return undefined;
+  try {
+    return (JSON.parse(ex) as IMessageItemEx).urlMetadata;
+  } catch {
+    return undefined;
+  }
+};
+
+const renderTextWithLinks = (content: string, urls: string[]) => {
+  if (!urls.length) {
+    return (
+      <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+        {content}
+      </KLabel.Text>
+    );
+  }
+
+  const parts: { text: string; isUrl: boolean }[] = [];
+  let remaining = content;
+
+  for (const url of urls) {
+    const idx = remaining.indexOf(url);
+    if (idx === -1) continue;
+    if (idx > 0) parts.push({ text: remaining.slice(0, idx), isUrl: false });
+    parts.push({ text: url, isUrl: true });
+    remaining = remaining.slice(idx + url.length);
+  }
+
+  if (remaining) parts.push({ text: remaining, isUrl: false });
+
+  return (
+    <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+      {parts.map((part, i) =>
+        part.isUrl ? (
+          <Text
+            key={i}
+            style={styles.urlText}
+            onPress={() => Linking.openURL(part.text)}
+          >
+            {part.text}
+          </Text>
+        ) : (
+          <Text key={i}>{part.text}</Text>
+        )
+      )}
+    </KLabel.Text>
+  );
+};
+
+export const LegendLinkMessage = memo(
+  ({ message, isOutgoing, createdAtTime }: BaseLegendMessageProps) => {
+    const content = message?.urlTextElem?.content;
+    const urls = message?.urlTextElem?.urls ?? [];
+    const metadata = parseUrlMetadata(message.ex);
+    const timeLabel = formatMessageTime(createdAtTime);
+
+    return (
+      <KContainer.View style={styles.wrapper}>
+        <KContainer.View
+          style={[
+            styles.bubble,
+            isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
+          ]}
+        >
+          {!!content?.trim() && (
+            <KContainer.View style={styles.textRow}>
+              {renderTextWithLinks(content, urls)}
+            </KContainer.View>
+          )}
+
+          {metadata && (
+            <KContainer.Touchable
+              style={styles.card}
+              onPress={() => metadata.url && Linking.openURL(metadata.url)}
+            >
+              {!!metadata.image && (
+                <KImage.Base
+                  uri={metadata.image}
+                  style={styles.cardThumb}
+                  resizeMode="cover"
+                />
+              )}
+              <KContainer.View style={styles.cardBody}>
+                {!!metadata.title && (
+                  <KLabel.Text
+                    typo="TextNmMedium"
+                    color={KColors.palette.gray.w900}
+                    numberOfLines={1}
+                  >
+                    {metadata.title}
+                  </KLabel.Text>
+                )}
+                {!!metadata.url && (
+                  <KLabel.Text
+                    typo="TextXsMedium"
+                    color={KColors.palette.primary.w400}
+                    numberOfLines={1}
+                  >
+                    {metadata.url}
+                  </KLabel.Text>
+                )}
+                {!!metadata.description && (
+                  <KLabel.Text
+                    typo="TextXsNormal"
+                    color={KColors.gray.normal}
+                    numberOfLines={2}
+                  >
+                    {metadata.description}
+                  </KLabel.Text>
+                )}
+              </KContainer.View>
+            </KContainer.Touchable>
+          )}
+        </KContainer.View>
+
+        {!isOutgoing && timeLabel ? (
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={CHAT_BUBBLE_COLORS.timestamp}
+            marginL="0.25rem"
+          >
+            {timeLabel}
+          </KLabel.Text>
+        ) : null}
+      </KContainer.View>
+    );
+  }
+);
+LegendLinkMessage.displayName = 'LegendLinkMessage';
+
+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,
+  },
+  textRow: {
+    paddingHorizontal: KSpacingValue['0.25rem'],
+  },
+  urlText: {
+    color: KColors.palette.primary.w400,
+    fontWeight: '500',
+  },
+  card: {
+    borderRadius: KSpacingValue['0.75rem'],
+    borderWidth: 1,
+    borderColor: 'rgba(57,62,64,0.1)',
+    backgroundColor: KColors.white,
+    overflow: 'hidden',
+  },
+  cardThumb: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+  },
+  cardBody: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    gap: 2,
+  },
+});

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,7 @@
 import type { ReactNode } from 'react';
-import type { DChatType, DChatCategory } from '../../types/chat';
 import type { DConversationItem, DMessageItem } from '../../types/chat';
+import type { IUrlMetadata } from '../../types/common';
+import type { PeerType } from '@droppii/openim-rn-client-sdk';
 
 export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
 
@@ -22,8 +23,7 @@ export interface ChatDetailHeaderProps {
   subtitle?: string;
   avatarUri?: string | null;
   avatarFullName?: string;
-  chatType?: DChatType;
-  chatCategory?: DChatCategory;
+  peerType?: PeerType;
   applicationType?: DConversationItem['applicationType'];
   showAddMember?: boolean;
   onBack?: () => void;
@@ -33,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 {
@@ -53,14 +60,16 @@ export interface ChatComposerProps {
   value?: string;
   placeholder?: string;
   onChangeText?: (text: string) => void;
-  onSend?: () => void;
+  onSend?: (urlMetadata?: IUrlMetadata) => 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;
 }
@@ -73,17 +82,45 @@ 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'
+  | 'peerType'
+  | 'applicationType'
+  | 'showAddMember'
+> {
+  conversationId: string;
+  enabled?: boolean;
+  title?: string;
+  subtitle?: string;
+  avatarUri?: string | null;
+  avatarFullName?: string;
+  peerType?: PeerType;
+  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;
@@ -94,6 +131,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/store/conversation.ts

@@ -48,7 +48,7 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
       sortConversation(
         conversations.reduce(
           (pre, curr) => {
-            pre[curr.conversationId] = curr;
+            pre[curr.conversationID] = curr;
             return pre;
           },
           { ...get().map }

package/src/store/message.ts

@@ -0,0 +1,44 @@
+import { create } from 'zustand';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import type { DMessageItem, MessageStore } from '../types/chat';
+import { mergeMessages } from '../utils/message';
+
+export const useMessageStore = create<MessageStore>()((set, get) => ({
+  messages: [],
+  hasMoreEarlier: false,
+  hasMoreNewer: false,
+
+  setMessages: (messages, hasMore) => {
+    set({ messages, hasMoreEarlier: hasMore });
+  },
+
+  pushNewMessage: (message: MessageItem) => {
+    set((state) => ({
+      messages: mergeMessages(state.messages, [message as DMessageItem]),
+    }));
+  },
+
+  updateOneMessage: (message: MessageItem) => {
+    const tmpList = [...get().messages];
+    const idx = tmpList.findIndex(
+      (msg) => msg.clientMsgID === message.clientMsgID
+    );
+    if (idx < 0) return;
+    tmpList[idx] = { ...tmpList[idx]!, ...message } as DMessageItem;
+    set({ messages: tmpList });
+  },
+
+  deleteOneMessage: (clientMsgID: string) => {
+    set((state) => ({
+      messages: state.messages.filter((msg) => msg.clientMsgID !== clientMsgID),
+    }));
+  },
+
+  reset: () => {
+    set({
+      messages: [],
+      hasMoreEarlier: false,
+      hasMoreNewer: false,
+    });
+  },
+}));

package/src/translation/resources/i18n.ts

@@ -1,6 +1,12 @@
 const i18nKey: Record<string, string> = {
   thread_card_bot_crm_name: 'Droppii Hỗ Trợ',
   thread_card_fallback_name: 'Người dùng',
+  msg_type_image: '[Hình ảnh]',
+  msg_type_voice: '[Tin nhắn thoại]',
+  msg_type_video: '[Video]',
+  msg_type_file: '[File đính kèm]',
+  msg_type_link: '[Liên kết]',
+  msg_type_revoke: 'Đã thu hồi tin nhắn',
 };
 
 export default {

package/src/types/chat.ts

@@ -1,10 +1,10 @@
 import {
   type MessageItem,
-  type SessionType,
-  type MessageReceiveOptType,
-  type GroupAtType,
+  type ConversationItem,
+  PeerType,
 } from '@droppii/openim-rn-client-sdk';
 import type { PropsWithChildren } from 'react';
+import type { IUrlMetadata } from './common';
 
 export const EventProvider = {
   ga: 'ga',
@@ -20,16 +20,17 @@ type LogGA = (
 
 export interface ChatContextType {
   logGA?: LogGA;
+  applicationType: DChatApplicationType;
 }
 
 export type ChatProviderProps = PropsWithChildren<{
-  enabled?: boolean;
   logGA?: LogGA;
+  applicationType: DChatApplicationType;
 }>;
 
 export enum DChatApplicationType {
-  BIZ = 'BIZ',
-  MALL = 'MALL',
+  DROPPII = 'DROPPII',
+  OBEFE = 'OBEFE',
 }
 
 export enum DChatCategory {
@@ -40,11 +41,6 @@ export enum DChatCategory {
   BIZ_BOT_CRM = 'BIZ_BOT_CRM',
 }
 
-export enum DChatType {
-  SINGLE = 'SINGLE',
-  GROUP = 'GROUP',
-}
-
 export enum DMemberRole {
   AGENT = 'AGENT',
   MEMBER = 'MEMBER',
@@ -65,11 +61,11 @@ export interface DConversationPeer {
   group: null; // to be defined when group is implemented
 }
 
-export interface DConversationItem {
+export interface DConversationItem extends ConversationItem {
   // Droppii API fields
   conversationId: string;
   chatCategory: DChatCategory;
-  chatType: DChatType;
+  chatType: PeerType;
   applicationType: string;
   memberRole: DMemberRole;
   pinnedAt: string | null;
@@ -77,23 +73,6 @@ export interface DConversationItem {
   peer: DConversationPeerUser;
   // Merged from OpenIM (available after getConversationListSplit merge)
   lastMessage?: DMessageItem;
-  unreadCount?: number;
-  conversationType?: SessionType;
-  userID?: string;
-  groupID?: string;
-  showName?: string;
-  faceURL?: string;
-  recvMsgOpt?: MessageReceiveOptType;
-  groupAtType?: GroupAtType;
-  latestMsgSendTime?: number;
-  draftText?: string;
-  draftTextTime?: number;
-  isPinned?: boolean;
-  isNotInGroup?: boolean;
-  isPrivateChat?: boolean;
-  isMsgDestruct?: boolean;
-  attachedInfo?: string;
-  ex?: string;
 }
 
 export interface DConversationQueryParams {
@@ -134,3 +113,25 @@ export interface DMessagePushInfoEx {
   title: string;
   desc: string;
 }
+
+export interface IMessageItemEx {
+  applicationType: DChatApplicationType;
+  sessionId?: string;
+  messageInfo?: {
+    type: 'MESSAGE_INFO';
+    data: 'rich_text';
+    content: string;
+  };
+  urlMetadata?: IUrlMetadata;
+}
+
+export interface MessageStore {
+  messages: DMessageItem[];
+  hasMoreEarlier: boolean;
+  hasMoreNewer: boolean;
+  setMessages: (messages: DMessageItem[], hasMore: boolean) => void;
+  pushNewMessage: (message: MessageItem) => void;
+  updateOneMessage: (message: MessageItem) => void;
+  deleteOneMessage: (clientMsgID: string) => void;
+  reset: () => void;
+}

package/src/types/common.ts

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