@droppii-org/chat-mobile 0.2.7 → 0.2.8

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

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

@@ -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>;