@droppii-org/chat-mobile 0.2.6 → 0.2.8

package/src/components/messages/imageMessage/index.tsx

@@ -0,0 +1,137 @@
+import { memo, useState, useCallback, useMemo } from 'react';
+import { StyleSheet, Image, useWindowDimensions } from 'react-native';
+import { KContainer, KImage } from '@droppii/libs';
+import ChatImageDimens from '../../../utils/chatImageDimens';
+import { messageStyles } from '../styles';
+import type { BaseLegendMessageProps } from '../types';
+
+export const ImageMessage = memo(
+  ({ message, onMediaPress }: BaseLegendMessageProps) => {
+    const windowWidth = useWindowDimensions().width;
+    const [isLoading, setIsLoading] = useState(true);
+    const pictureElem = (message as any).pictureElem;
+    const rawImageUrl =
+      pictureElem?.snapshotPicture?.url ||
+      pictureElem?.bigPicture?.url ||
+      pictureElem?.sourcePicture?.url;
+
+    // Calculate dimensions respecting aspect ratio and 80% device width
+    const imageDimensions = useMemo(() => {
+      if (!rawImageUrl) return { width: 250, height: 250 };
+
+      const responseWidth =
+        pictureElem?.width ||
+        pictureElem?.bigPicture?.width ||
+        pictureElem?.snapshotPicture?.width;
+      const responseHeight =
+        pictureElem?.height ||
+        pictureElem?.bigPicture?.height ||
+        pictureElem?.snapshotPicture?.height;
+
+      let imgWidth = responseWidth;
+      let imgHeight = responseHeight;
+
+      // If no dimensions in response, try to resolve from image source
+      if (!imgWidth || !imgHeight) {
+        try {
+          const source = Image.resolveAssetSource({ uri: rawImageUrl });
+          imgWidth = source?.width || 300;
+          imgHeight = source?.height || 300;
+        } catch {
+          // Fallback to default if resolution fails
+          imgWidth = 300;
+          imgHeight = 300;
+        }
+      }
+
+      const aspectRatio = imgWidth / imgHeight;
+      // Account for all margins/padding: use 75% of window width with buffer
+      const horizontalBuffer = 16; // Left and right combined buffer
+      const maxWidth = Math.floor(windowWidth * 0.75 - horizontalBuffer);
+
+      // Calculate final dimensions
+      let finalWidth = maxWidth;
+      let finalHeight = maxWidth / aspectRatio;
+
+      // Cap maximum height to avoid overly tall images
+      const maxHeight = 500;
+      if (finalHeight > maxHeight) {
+        finalHeight = maxHeight;
+        finalWidth = finalHeight * aspectRatio;
+      }
+
+      return {
+        width: Math.round(finalWidth),
+        height: Math.round(finalHeight),
+      };
+    }, [pictureElem, rawImageUrl, windowWidth]);
+
+    const handleLoadEnd = useCallback(() => {
+      setIsLoading(false);
+    }, []);
+
+    const handlePress = useCallback(() => {
+      onMediaPress?.([{ url: rawImageUrl }], 0);
+    }, [onMediaPress, rawImageUrl]);
+
+    if (!rawImageUrl) {
+      return null;
+    }
+
+    // Use dynamic optimization matching calculated dimensions
+    const optimizedUrl = ChatImageDimens.getOptimizedImageUrlWithDimensions(
+      rawImageUrl,
+      imageDimensions.width,
+      imageDimensions.height
+    );
+
+    return (
+      <KContainer.View style={[messageStyles.wrapper, styles.wrapper]}>
+        <KContainer.Touchable
+          onPress={handlePress}
+          style={[
+            messageStyles.imageBubble,
+            styles.imageContainer,
+            {
+              width: imageDimensions.width,
+              height: imageDimensions.height,
+            },
+          ]}
+        >
+          <KImage.Base
+            uri={optimizedUrl}
+            width={imageDimensions.width}
+            height={imageDimensions.height}
+            style={[messageStyles.imageBubble]}
+            onLoadEnd={handleLoadEnd}
+          />
+
+          {isLoading && <KContainer.View style={styles.skeleton} />}
+        </KContainer.Touchable>
+      </KContainer.View>
+    );
+  }
+);
+
+ImageMessage.displayName = 'ImageMessage';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    // paddingRight: 8,
+    overflow: 'hidden',
+  },
+  skeleton: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+  },
+  imageContainer: {
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: 8,
+  },
+});

package/src/components/messages/linkMessage/index.tsx

@@ -0,0 +1,162 @@
+import { memo } from 'react';
+import { Linking, StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import type { DMessageItem } from '../../../types/chat';
+import type { IUrlMetadata } from '../../../types/common';
+import { formatMessageTime } from '../types';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
+
+interface BaseLegendMessageProps {
+  message: DMessageItem;
+  isOutgoing: boolean;
+  createdAtTime: number;
+}
+
+const parseUrlMetadata = (ex?: string): IUrlMetadata | undefined => {
+  if (!ex) return undefined;
+  try {
+    const parsed = JSON.parse(ex) as any;
+    // Handle nested urlMetadata structure
+    return parsed.urlMetadata || parsed;
+  } catch {
+    return undefined;
+  }
+};
+
+const renderTextWithLinks = (content: string, urls: string[]) => {
+  if (!urls.length) {
+    return <KLabel.Text typo="TextMdNormal">{content}</KLabel.Text>;
+  }
+
+  return (
+    <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+      {content}
+    </KLabel.Text>
+  );
+};
+
+export const LinkMessage = 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 && (
+                <KContainer.View style={styles.cardThumb}>
+                  <KImage.Base
+                    uri={metadata.image}
+                    style={StyleSheet.absoluteFill}
+                    resizeMode="cover"
+                  />
+                </KContainer.View>
+              )}
+              <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>
+    );
+  }
+);
+
+LinkMessage.displayName = 'LinkMessage';
+
+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'],
+  },
+  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/components/messages/mergedMessage/index.tsx

@@ -0,0 +1,45 @@
+import { memo } from 'react';
+import { KContainer } from '@droppii/libs';
+import { MergedImageGrid } from '../../MergedImageGrid';
+import { messageStyles } from '../styles';
+import type { BaseLegendMessageProps } from '../types';
+
+export const MergedMessage = memo(
+  ({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => {
+    const mergeElem = (message as any).mergeElem;
+
+    if (!mergeElem?.multiMessage) {
+      return null;
+    }
+
+    const { multiMessage } = mergeElem;
+    const imageMessages = multiMessage.filter(
+      (msg: any) => msg.contentType === 102
+    );
+
+    return (
+      <KContainer.View style={messageStyles.wrapper}>
+        <KContainer.View
+          style={[
+            messageStyles.bubble,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.bubbleReceived,
+          ]}
+        >
+          {imageMessages.length > 0 && (
+            <KContainer.View marginB="0.5rem">
+              <MergedImageGrid
+                images={imageMessages}
+                maxDisplay={4}
+                onMediaPress={onMediaPress}
+              />
+            </KContainer.View>
+          )}
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+MergedMessage.displayName = 'MergedMessage';

package/src/components/messages/styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { KSpacingValue } from '@droppii/libs';
+import { CHAT_BUBBLE_COLORS } from '../../screens/chat-detail/constants';
+
+export const messageStyles = 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,
+  },
+  imageBubble: {
+    borderRadius: KSpacingValue['0.75rem'],
+  },
+  videoPlaceholder: {
+    backgroundColor: CHAT_BUBBLE_COLORS.received,
+  },
+  videoContainer: {
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: KSpacingValue['0.75rem'],
+  },
+  playButtonOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+});

package/src/components/messages/textMessage/index.tsx

@@ -0,0 +1,53 @@
+import { memo } from 'react';
+import { KContainer, KLabel } from '@droppii/libs';
+import { getMessageText } from '../../../utils/legendListMessage';
+import type { DMessageItem } from '../../../types/chat';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
+import { messageStyles } from '../styles';
+import { formatMessageTime } from '../types';
+
+interface TextMessageProps {
+  message: DMessageItem;
+  isOutgoing: boolean;
+  createdAtTime: number;
+}
+
+export const TextMessage = memo(
+  ({ message, isOutgoing, createdAtTime }: TextMessageProps) => {
+    const messageText = getMessageText(message);
+    const timeLabel = formatMessageTime(createdAtTime);
+
+    if (!messageText?.trim()) {
+      return null;
+    }
+
+    return (
+      <KContainer.View style={messageStyles.wrapper}>
+        <KContainer.View
+          style={[
+            messageStyles.bubble,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.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>
+    );
+  }
+);
+
+TextMessage.displayName = 'TextMessage';

package/src/components/messages/types.ts

@@ -0,0 +1,22 @@
+import type { DMessageItem } from '../../types/chat';
+import type { MediaItem } from '../../hooks/useMediaViewer';
+
+export interface BaseLegendMessageProps {
+  message: DMessageItem;
+  isOutgoing: boolean;
+  createdAtTime: number;
+  onMediaPress?: (items: MediaItem[], index?: number) => void;
+}
+
+export 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,
+  });
+};

package/src/components/messages/videoMessage/index.tsx

@@ -0,0 +1,120 @@
+import { memo, useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel } from '@droppii/libs';
+import ChatImageDimens, {
+  CHAT_IMAGE_VIEW_SOURCE,
+} from '../../../utils/chatImageDimens';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
+import { messageStyles } from '../styles';
+import type { BaseLegendMessageProps } from '../types';
+
+const formatDuration = (durationMs: number): string => {
+  const totalSeconds = Math.floor(durationMs / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+};
+
+export const VideoMessage = memo(
+  ({ message, onMediaPress }: BaseLegendMessageProps) => {
+    const videoElem = message?.videoElem;
+    const videoUrl = videoElem?.videoUrl;
+    const duration = videoElem?.duration;
+    const thumbnail = videoElem?.snapshotUrl;
+
+    const handlePress = useCallback(() => {
+      if (videoUrl && onMediaPress) {
+        onMediaPress([{ url: videoUrl, isVideo: true }], 0);
+      }
+    }, [videoUrl, onMediaPress]);
+
+    if (!videoUrl) {
+      return (
+        <KContainer.View style={messageStyles.wrapper}>
+          <KContainer.View
+            style={[messageStyles.bubble, messageStyles.videoPlaceholder]}
+          >
+            <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
+              📹 [Video unavailable]
+            </KLabel.Text>
+          </KContainer.View>
+        </KContainer.View>
+      );
+    }
+
+    const dimen = ChatImageDimens.getDimensions(
+      CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail
+    );
+
+    return (
+      <KContainer.View style={messageStyles.wrapper}>
+        <KContainer.Touchable
+          onPress={handlePress}
+          style={[
+            styles.videoContainer,
+            { width: dimen.width, height: dimen.height },
+          ]}
+        >
+          {thumbnail ? (
+            <KImage.Base
+              uri={thumbnail}
+              width={dimen.width}
+              height={dimen.height}
+              resizeMode="cover"
+            />
+          ) : (
+            <KContainer.View style={styles.videoBg} />
+          )}
+
+          <KContainer.View style={styles.playOverlay} center>
+            <KImage.VectorIcons
+              name="play-circle"
+              provider="MaterialCommunityIcons"
+              size={48}
+              color="white"
+            />
+          </KContainer.View>
+
+          {duration && (
+            <KContainer.View style={styles.durationBadge}>
+              <KLabel.Text typo="TextXsNormal" color="white">
+                {formatDuration(duration)}
+              </KLabel.Text>
+            </KContainer.View>
+          )}
+        </KContainer.Touchable>
+      </KContainer.View>
+    );
+  }
+);
+
+VideoMessage.displayName = 'VideoMessage';
+
+const styles = StyleSheet.create({
+  videoContainer: {
+    overflow: 'hidden',
+    borderRadius: 8,
+    backgroundColor: '#000',
+  },
+  videoBg: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  playOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+  durationBadge: {
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+  },
+});

package/src/config/api-endpoints.ts

@@ -0,0 +1,72 @@
+/**
+ * API Endpoints Configuration
+ *
+ * Centralized endpoint management for all API calls.
+ * Can be overridden per environment or feature flag.
+ *
+ * Note: imageUpload is a relative path because ReactNativeBlobUtil.fetch()
+ * is used for image uploads (not axios). The full URL is constructed
+ * in the imageUpload service using the base URL from environment/config.
+ */
+
+export interface ApiEndpoints {
+  // Chat service (relative paths - used with axios baseURL)
+  urlMetadata: string;
+  // Image upload service (relative path - full URL constructed in imageUpload service)
+  imageUpload: string;
+}
+
+const DEFAULT_ENDPOINTS: ApiEndpoints = {
+  urlMetadata: '/chat-service/v1/utils/url-metadata',
+  imageUpload: '/uploader-service/v1/uploader/permanently',
+};
+
+let endpoints: ApiEndpoints = { ...DEFAULT_ENDPOINTS };
+
+/**
+ * Get a specific API endpoint
+ * @param key - Endpoint key
+ * @returns Full endpoint URL
+ */
+export const getApiEndpoint = <K extends keyof ApiEndpoints>(
+  key: K
+): ApiEndpoints[K] => {
+  return endpoints[key];
+};
+
+/**
+ * Set a specific API endpoint (useful for testing/override)
+ * @param key - Endpoint key
+ * @param value - New endpoint URL
+ */
+export const setApiEndpoint = <K extends keyof ApiEndpoints>(
+  key: K,
+  value: ApiEndpoints[K]
+) => {
+  endpoints[key] = value;
+};
+
+/**
+ * Set all endpoints at once
+ * @param newEndpoints - New endpoints object
+ */
+export const setAllApiEndpoints = (newEndpoints: Partial<ApiEndpoints>) => {
+  endpoints = {
+    ...endpoints,
+    ...newEndpoints,
+  };
+};
+
+/**
+ * Reset to default endpoints
+ */
+export const resetApiEndpoints = () => {
+  endpoints = { ...DEFAULT_ENDPOINTS };
+};
+
+/**
+ * Get all endpoints (returns copy)
+ */
+export const getAllApiEndpoints = (): ApiEndpoints => ({
+  ...endpoints,
+});