@droppii-org/chat-mobile 0.2.6 → 0.2.8

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

@@ -1,73 +0,0 @@
-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/legend/message-types.tsx

@@ -1,149 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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>;