@droppii-org/chat-mobile 0.2.0

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

@@ -0,0 +1,187 @@
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import {
+  GiftedChat,
+  type DayProps,
+  type LoadEarlierMessagesProps,
+  type MessageProps,
+} from 'react-native-gifted-chat';
+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';
+import { ChatScrollToBottom } from './ChatScrollToBottom';
+import { ChatMessageBubble } from './messages/ChatMessageBubble';
+
+export const ChatList = memo(
+  ({
+    messages = [],
+    currentUserId = '',
+    renderChat,
+    onLoadEarlier,
+    isLoading,
+    isLoadingEarlier,
+    hasMoreEarlier,
+  }: ChatListProps) => {
+    const giftedMessages = useMemo(
+      () => mapOpenIMMessagesToGiftedChat(messages),
+      [messages]
+    );
+
+    const user = useMemo(
+      () => ({ _id: String(currentUserId) }),
+      [currentUserId]
+    );
+
+    const renderMessage = useCallback(
+      (props: MessageProps<DGiftedChatMessage>) => {
+        const currentMessage = props.currentMessage;
+
+        if (!currentMessage) {
+          return <KContainer.View />;
+        }
+
+        const isOutgoing = props.position === 'right';
+
+        return (
+          <KContainer.View
+            style={[
+              styles.messageRow,
+              isOutgoing ? styles.messageRowRight : styles.messageRowLeft,
+            ]}
+          >
+            {renderChat ? (
+              renderChat(currentMessage.openIMMessage)
+            ) : (
+              <ChatMessageBubble
+                message={currentMessage}
+                position={props.position}
+              />
+            )}
+          </KContainer.View>
+        );
+      },
+      [renderChat]
+    );
+
+    const renderDay = useCallback(
+      (props: DayProps) => <ChatDay {...props} />,
+      []
+    );
+
+    const renderLoadEarlier = useCallback(
+      (props: LoadEarlierMessagesProps) => <ChatLoadEarlier {...props} />,
+      []
+    );
+
+    const onLoadEarlierRef = useRef(onLoadEarlier);
+    onLoadEarlierRef.current = onLoadEarlier;
+
+    const handleLoadEarlier = useCallback(() => {
+      onLoadEarlierRef.current?.();
+    }, []);
+
+    const loadEarlierMessagesProps = useMemo(
+      () =>
+        onLoadEarlier
+          ? {
+              isAvailable: !!hasMoreEarlier,
+              isInfiniteScrollEnabled: true,
+              onPress: handleLoadEarlier,
+              isLoading: isLoadingEarlier ?? false,
+            }
+          : undefined,
+      [hasMoreEarlier, isLoadingEarlier, onLoadEarlier, handleLoadEarlier]
+    );
+
+    const renderScrollToBottom = useCallback(() => <ChatScrollToBottom />, []);
+
+    return (
+      <KContainer.View flex background={KColors.white}>
+        {isLoading ? (
+          <KContainer.View flex center>
+            <ActivityIndicator
+              color={KColors.palette.primary.w400}
+              size="small"
+            />
+          </KContainer.View>
+        ) : (
+          <GiftedChat
+            messages={giftedMessages}
+            user={user}
+            renderInputToolbar={() => null}
+            renderAvatar={() => null}
+            renderMessage={renderMessage}
+            renderDay={renderDay}
+            renderLoadEarlier={onLoadEarlier ? renderLoadEarlier : undefined}
+            isDayAnimationEnabled={false}
+            keyboardAvoidingViewProps={{ enabled: false }}
+            messagesContainerStyle={styles.messagesContainer}
+            minInputToolbarHeight={0}
+            loadEarlierMessagesProps={loadEarlierMessagesProps}
+            listProps={{
+              showsVerticalScrollIndicator: false,
+              keyboardShouldPersistTaps: 'handled',
+              contentContainerStyle: styles.content,
+              onEndReachedThreshold: 0.5,
+            }}
+            reply={{
+              swipe: {
+                isEnabled: true,
+                direction: 'left',
+              },
+            }}
+            isScrollToBottomEnabled
+            scrollToBottomComponent={renderScrollToBottom}
+            scrollToBottomStyle={styles.scrollToBottom}
+            scrollToBottomContentStyle={styles.scrollToBottomContent}
+          />
+        )}
+      </KContainer.View>
+    );
+  }
+);
+
+ChatList.displayName = 'ChatList';
+
+const styles = StyleSheet.create({
+  messagesContainer: {
+    backgroundColor: KColors.white,
+  },
+  content: {
+    paddingVertical: KSpacingValue['0.75rem'],
+    flexGrow: 1,
+  },
+  messageRow: {
+    width: '100%',
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    marginBottom: KSpacingValue['0.25rem'],
+  },
+  messageRowLeft: {
+    alignItems: 'flex-start',
+  },
+  messageRowRight: {
+    alignItems: 'flex-end',
+  },
+  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',
+  },
+});

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

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

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

@@ -0,0 +1,108 @@
+import { memo, useCallback } from 'react';
+import { FlatList, type ListRenderItem, StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import { useChatActionPress } from './useChatActionPress';
+import type { DChatQuickAction, ChatQuickActionsProps } from './types';
+
+const QuickActionItem = memo(
+  ({
+    action,
+    onPress,
+  }: {
+    action: DChatQuickAction;
+    onPress: (action: DChatQuickAction) => void;
+  }) => {
+    const handlePress = useCallback(() => {
+      onPress(action);
+    }, [action, onPress]);
+
+    return (
+      <KContainer.Touchable
+        row
+        alignItems
+        onPress={handlePress}
+        disabled={action.disabled}
+        paddingH="0.75rem"
+        paddingV="0.375rem"
+        marginR="0.5rem"
+        background={KColors.palette.gray.w25}
+        br="3x"
+        activeOpacity={0.7}
+      >
+        <KImage.VectorIcons
+          name={action.iconName}
+          provider={action.iconProvider ?? 'MaterialCommunityIcons'}
+          size={14}
+          color={
+            action.disabled ? KColors.palette.gray.w300 : KColors.gray.dark
+          }
+        />
+        <KLabel.Text
+          typo="TextXsMedium"
+          color={
+            action.disabled ? KColors.palette.gray.w300 : KColors.gray.dark
+          }
+          marginL="0.25rem"
+          numberOfLines={1}
+        >
+          {action.label}
+        </KLabel.Text>
+      </KContainer.Touchable>
+    );
+  }
+);
+
+QuickActionItem.displayName = 'QuickActionItem';
+
+export const ChatQuickActions = memo(
+  ({ actions, onActionPress, renderAction }: ChatQuickActionsProps) => {
+    const handleActionPress = useChatActionPress(onActionPress);
+
+    const renderItem = useCallback<ListRenderItem<DChatQuickAction>>(
+      ({ item }) => {
+        const onPress = () => handleActionPress(item);
+
+        if (renderAction) {
+          return <>{renderAction(item, onPress)}</>;
+        }
+
+        return <QuickActionItem action={item} onPress={handleActionPress} />;
+      },
+      [handleActionPress, renderAction]
+    );
+
+    const keyExtractor = useCallback((item: DChatQuickAction) => item.id, []);
+
+    if (!actions?.length) {
+      return null;
+    }
+
+    return (
+      <KContainer.View paddingT="0.75rem" paddingB="0.25rem">
+        <FlatList
+          data={actions}
+          horizontal
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.content}
+          keyboardShouldPersistTaps="handled"
+        />
+      </KContainer.View>
+    );
+  }
+);
+
+ChatQuickActions.displayName = 'ChatQuickActions';
+
+const styles = StyleSheet.create({
+  content: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
+});

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

@@ -0,0 +1,8 @@
+import { memo } from 'react';
+import { KImage, KColors } from '@droppii/libs';
+
+export const ChatScrollToBottom = memo(() => (
+  <KImage.VectorIcons name="arrow-down-o" size={16} color={KColors.black} />
+));
+
+ChatScrollToBottom.displayName = 'ChatScrollToBottom';

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

@@ -0,0 +1,73 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KLabel, KSpacingValue } from '@droppii/libs';
+import type { ChatMessageBubbleProps } from './messages/types';
+import { CHAT_BUBBLE_COLORS } from './constants';
+
+const formatMessageTime = (createdAt: Date | 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,
+  });
+};
+
+export const ChatTextBubble = memo(
+  ({ message, position }: ChatMessageBubbleProps) => {
+    const isOutgoing = position === 'right';
+    const timeLabel = formatMessageTime(message.createdAt);
+
+    if (!message.text?.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}>
+            {message.text}
+          </KLabel.Text>
+        </KContainer.View>
+
+        {!isOutgoing && timeLabel ? (
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={CHAT_BUBBLE_COLORS.timestamp}
+            marginL={'0.25rem'}
+          >
+            {timeLabel}
+          </KLabel.Text>
+        ) : null}
+      </KContainer.View>
+    );
+  }
+);
+
+ChatTextBubble.displayName = 'ChatTextBubble';
+
+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/constants.ts

@@ -0,0 +1,76 @@
+import { KColors } from '@droppii/libs';
+import type { DChatQuickAction, DChatAttachmentAction } from './types';
+
+export const CHAT_BUBBLE_COLORS = {
+  received: 'rgba(131, 137, 157, 0.1)',
+  sent: 'rgba(0, 81, 255, 0.1)',
+  text: KColors.gray.dark,
+  timestamp: KColors.gray.light,
+  dayLabel: KColors.gray.light,
+} as const;
+
+export const DEFAULT_Chat_QUICK_ACTIONS: DChatQuickAction[] = [
+  {
+    id: 'restart',
+    label: 'Bắt đầu lại',
+    iconName: 'refresh',
+  },
+  {
+    id: 'send-order',
+    label: 'Gửi đơn hàng',
+    iconName: 'file-document-outline',
+  },
+  {
+    id: 'scam-warning',
+    label: 'Cảnh báo lừa đảo/g...',
+    iconName: 'alert-outline',
+  },
+];
+
+export const ATTACHMENT_PANEL_COLUMNS = 4;
+export const ATTACHMENT_ITEM_HEIGHT = 100;
+export const ATTACHMENT_PANEL_VERTICAL_PADDING = 16;
+
+export const getAttachmentPanelHeight = (
+  actionCount: number,
+  columns = ATTACHMENT_PANEL_COLUMNS
+): number => {
+  const rows = Math.ceil(actionCount / columns);
+  return rows * ATTACHMENT_ITEM_HEIGHT + ATTACHMENT_PANEL_VERTICAL_PADDING;
+};
+
+/** @deprecated use getAttachmentPanelHeight */
+export const DEFAULT_ATTACHMENT_PANEL_HEIGHT = getAttachmentPanelHeight(6);
+
+export const DEFAULT_ATTACHMENT_ACTIONS: DChatAttachmentAction[] = [
+  {
+    id: 'gallery',
+    label: 'Ảnh/Video',
+    iconName: 'image-multiple-outline',
+  },
+  {
+    id: 'camera',
+    label: 'Chụp ảnh',
+    iconName: 'camera-outline',
+  },
+  {
+    id: 'file',
+    label: 'Đính kèm file',
+    iconName: 'paperclip',
+  },
+  {
+    id: 'order',
+    label: 'Gửi đơn hàng',
+    iconName: 'receipt',
+  },
+  {
+    id: 'product',
+    label: 'Gửi sản phẩm',
+    iconName: 'basket-outline',
+  },
+  {
+    id: 'poll',
+    label: 'Tạo bình chọn',
+    iconName: 'poll',
+  },
+];

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

@@ -0,0 +1,33 @@
+export { default as ChatDetail } from './ChatDetail';
+export { default as ChatDetailHeader } from './ChatDetailHeader';
+export { ChatList } from './ChatList';
+export { ChatComposer } from './ChatComposer';
+export { ChatQuickActions } from './ChatQuickActions';
+export { ChatAttachmentPanel } from './ChatAttachmentPanel';
+export {
+  DEFAULT_Chat_QUICK_ACTIONS,
+  DEFAULT_ATTACHMENT_ACTIONS,
+  DEFAULT_ATTACHMENT_PANEL_HEIGHT,
+} from './constants';
+export type {
+  DChatActionItem,
+  DChatActionIconProvider,
+  DChatQuickAction,
+  DChatAttachmentAction,
+  ChatDetailProps,
+  ChatDetailHeaderProps,
+  ChatListProps,
+  ChatComposerProps,
+  ChatQuickActionsProps,
+  ChatAttachmentPanelProps,
+} from './types';
+export type { DGiftedChatMessage } from '../../utils/giftedChatMessage';
+export {
+  DChatMessageType,
+  CUSTOM_MESSAGE_DATA_TYPE,
+} from '../../types/message';
+export type { ChatMessageBubbleProps } from './messages/types';
+export {
+  mapOpenIMMessageToGiftedChat,
+  mapOpenIMMessagesToGiftedChat,
+} from '../../utils/giftedChatMessage';

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

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+import { DChatMessageType } from '../../../types/message';
+import { ChatTextBubble } from '../ChatTextBubble';
+import type { ChatMessageBubbleProps, ChatMessageRenderer } from './types';
+
+const getMessageRenderers = (): Partial<
+  Record<DChatMessageType, ChatMessageRenderer>
+> => ({
+  [DChatMessageType.Text]: ChatTextBubble,
+});
+
+export const ChatMessageBubble = memo(
+  ({ message, position }: ChatMessageBubbleProps) => {
+    const Renderer = getMessageRenderers()[message.messageType];
+
+    if (!Renderer) {
+      return null;
+    }
+
+    return <Renderer message={message} position={position} />;
+  }
+);
+
+ChatMessageBubble.displayName = 'ChatMessageBubble';

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

@@ -0,0 +1,14 @@
+import type { ComponentType } from 'react';
+import type { IMessage } from 'react-native-gifted-chat';
+import type { DMessageItem } from '../../../types/chat';
+import type { DChatMessageType } from '../../../types/message';
+
+export type ChatMessageBubbleProps = {
+  message: IMessage & {
+    openIMMessage: DMessageItem;
+    messageType: DChatMessageType;
+  };
+  position: 'left' | 'right';
+};
+
+export type ChatMessageRenderer = ComponentType<ChatMessageBubbleProps>;

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

@@ -0,0 +1,97 @@
+import type { ReactNode } from 'react';
+import type { DChatType } from '../../types/chat';
+import type { DMessageItem } from '../../types/chat';
+
+export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
+
+export interface DChatActionItem {
+  id: string;
+  label: string;
+  iconName: string;
+  iconProvider?: DChatActionIconProvider;
+  disabled?: boolean;
+  onPress?: () => void;
+  meta?: Record<string, unknown>;
+}
+
+export type DChatQuickAction = DChatActionItem;
+export type DChatAttachmentAction = DChatActionItem;
+
+export interface ChatDetailHeaderProps {
+  title: string;
+  subtitle?: string;
+  avatarUri?: string | null;
+  avatarFullName?: string;
+  chatType?: DChatType;
+  showAddMember?: boolean;
+  onBack?: () => void;
+  onPressSearch?: () => void;
+  onPressAddMember?: () => void;
+  onPressMenu?: () => void;
+  onPressAvatar?: () => void;
+}
+
+export interface ChatQuickActionsProps {
+  actions?: DChatQuickAction[];
+  onActionPress?: (action: DChatQuickAction) => void;
+  renderAction?: (action: DChatQuickAction, onPress: () => void) => ReactNode;
+}
+
+export interface ChatAttachmentPanelProps {
+  actions?: DChatAttachmentAction[];
+  columns?: number;
+  onActionPress?: (action: DChatAttachmentAction) => void;
+  renderAction?: (
+    action: DChatAttachmentAction,
+    onPress: () => void
+  ) => ReactNode;
+}
+
+export interface ChatComposerProps {
+  value?: string;
+  placeholder?: string;
+  onChangeText?: (text: string) => void;
+  onSend?: () => void;
+  onPressAttach?: () => void;
+  onPressEmoji?: () => void;
+  quickActions?: DChatQuickAction[];
+  attachmentActions?: DChatAttachmentAction[];
+  onQuickActionPress?: (action: DChatQuickAction) => void;
+  onAttachmentAction?: (action: DChatAttachmentAction) => void;
+  renderQuickAction?: ChatQuickActionsProps['renderAction'];
+  renderAttachmentAction?: ChatAttachmentPanelProps['renderAction'];
+  attachmentColumns?: number;
+}
+
+export interface ChatListProps {
+  messages?: DMessageItem[];
+  currentUserId?: string;
+  renderChat?: (item: DMessageItem) => ReactNode;
+  onLoadEarlier?: () => void;
+  isLoading?: boolean;
+  isLoadingEarlier?: boolean;
+  hasMoreEarlier?: boolean;
+}
+
+export interface ChatDetailProps extends ChatDetailHeaderProps {
+  messages?: DMessageItem[];
+  currentUserId?: string;
+  renderChat?: (item: DMessageItem) => ReactNode;
+  onLoadEarlier?: () => void;
+  isLoading?: boolean;
+  isLoadingEarlier?: boolean;
+  hasMoreEarlier?: boolean;
+  quickActions?: DChatQuickAction[];
+  attachmentActions?: DChatAttachmentAction[];
+  inputValue?: string;
+  inputPlaceholder?: string;
+  onChangeInput?: (text: string) => void;
+  onSend?: () => void;
+  onPressAttach?: () => void;
+  onPressEmoji?: () => void;
+  onQuickActionPress?: (action: DChatQuickAction) => void;
+  onAttachmentAction?: (action: DChatAttachmentAction) => void;
+  renderQuickAction?: ChatQuickActionsProps['renderAction'];
+  renderAttachmentAction?: ChatAttachmentPanelProps['renderAction'];
+  attachmentColumns?: number;
+}

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

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import type { DChatActionItem } from './types';
+
+export const useChatActionPress = <T extends DChatActionItem>(
+  onActionPress?: (action: T) => void
+) =>
+  useCallback(
+    (action: T) => {
+      if (action.disabled) {
+        return;
+      }
+
+      action.onPress?.();
+      onActionPress?.(action);
+    },
+    [onActionPress]
+  );