@droppii-org/chat-mobile 0.2.17 → 0.2.19

package/src/components/AttachmentPreview/FilePreview.tsx

@@ -0,0 +1,137 @@
+import { memo, useCallback } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import FileViewer from 'react-native-file-viewer';
+import UIUtils from '../../utils/ui';
+import { trans } from '../../translation';
+import { formatFileSize, getFileIcon } from '../../utils/imageUtils';
+import type { AttachmentItem } from '../../types/attachment';
+
+export const FilePreview = memo(
+  ({
+    file,
+    onRemove,
+  }: {
+    file: AttachmentItem;
+    onRemove: (id: string) => void;
+  }) => {
+    const handlePress = useCallback(async () => {
+      if (file.isUploading || file.error) return;
+      try {
+        const path = file.metadata.uri?.startsWith('file://')
+          ? file.metadata.uri.slice(7)
+          : file.metadata.uri;
+        await FileViewer.open(path ?? '', {
+          showOpenWithDialog: true,
+          showAppsSuggestions: true,
+        });
+      } catch {
+        UIUtils.toast.open({
+          title: trans('chat:file_preview_unsupported'),
+          theme: 'warning',
+        });
+      }
+    }, [file]);
+
+    const handleRemove = useCallback(() => {
+      onRemove(file.metadata.id ?? '');
+    }, [file.metadata?.id, onRemove]);
+
+    const iconSource = getFileIcon(file.metadata.mimeType);
+    const hasError = !!file.error;
+
+    return (
+      <KContainer.Touchable
+        row
+        alignItems
+        width={160}
+        onPress={handlePress}
+        br="3x"
+        background={
+          !hasError
+            ? KColors.hexToRgba(KColors.palette.gray.w400, 0.1)
+            : KColors.hexToRgba(KColors.danger.light, 0.2)
+        }
+        paddingL={'0.5rem'}
+        paddingR={'1rem'}
+        paddingV={'0.25rem'}
+      >
+        {/* File icon */}
+        <KContainer.VisibleView visible={file.isUploading}>
+          <ActivityIndicator
+            size="small"
+            color={KColors.palette.primary.w400}
+            style={styles.loader}
+          />
+        </KContainer.VisibleView>
+        <KContainer.VisibleView visible={!file.isUploading}>
+          <KImage.Base
+            uri={iconSource}
+            style={styles.icon}
+            resizeMode="contain"
+          />
+        </KContainer.VisibleView>
+
+        {/* File info */}
+        <KContainer.View flex>
+          <KLabel.Text
+            typo="TextSmMedium"
+            color={KColors.gray.dark}
+            numberOfLines={1}
+            ellipsizeMode="middle"
+          >
+            {file.metadata.filename}
+          </KLabel.Text>
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={KColors.palette.gray.w500}
+            numberOfLines={1}
+          >
+            {hasError
+              ? file.error
+              : file.isUploading
+                ? `${file.uploadProgress}%`
+                : formatFileSize(file.metadata.size ?? 0)}
+          </KLabel.Text>
+        </KContainer.View>
+
+        {/* Remove button */}
+        <KContainer.Touchable
+          onPress={handleRemove}
+          center
+          width={20}
+          height={20}
+          br={'round'}
+          background={KColors.gray.dark}
+          hitSlop={8}
+          style={styles.removeBtn}
+        >
+          <KImage.VectorIcons
+            name="close"
+            provider="MaterialCommunityIcons"
+            size={18}
+            color={KColors.white}
+          />
+        </KContainer.Touchable>
+      </KContainer.Touchable>
+    );
+  }
+);
+
+FilePreview.displayName = 'FilePreview';
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 7,
+  },
+  loader: {
+    marginRight: 8,
+  },
+  removeBtn: {
+    position: 'absolute',
+    right: -4,
+    top: -4,
+  },
+});

package/src/components/AttachmentPreview/MediaPreview.tsx

@@ -0,0 +1,238 @@
+import { memo } from 'react';
+import { KColors, KContainer, KImage, KLabel } from '@droppii/libs';
+import type { AttachmentItem, AttachmentType } from '../../types/attachment';
+import { StyleSheet } from 'react-native';
+
+type Props = {
+  item: AttachmentItem;
+  index: number;
+  onRemove(type: AttachmentType, index: number): void;
+};
+
+const formatDuration = (seconds: number): string => {
+  const totalSecs = Math.floor(seconds);
+  const mins = Math.floor(totalSecs / 60);
+  const secs = totalSecs % 60;
+  return `${mins.toString().padStart(2, '0')}:${secs
+    .toString()
+    .padStart(2, '0')}`;
+};
+
+const getAttachmentIcon = (type: AttachmentType): string => {
+  switch (type) {
+    case 'image':
+      return 'image';
+    case 'video':
+      return 'play-circle';
+    case 'audio':
+      return 'music';
+    case 'document':
+      return 'file-document';
+    case 'file':
+    default:
+      return 'file';
+  }
+};
+
+export const MediaPreview = memo(({ item, index, onRemove }: Props) => {
+  const { type, metadata, uploadProgress, error, isUploading, thumbnailUrl } =
+    item;
+
+  const isImage = type === 'image';
+  const isVideo = type === 'video';
+  const hasPreview = isImage || isVideo;
+
+  return (
+    <KContainer.View>
+      <KContainer.View style={styles.thumbnail} center>
+        {/* Video thumbnail */}
+        {isVideo && thumbnailUrl && (
+          <KImage.Base
+            uri={thumbnailUrl}
+            width={48}
+            height={48}
+            resizeMode="cover"
+          />
+        )}
+
+        {/* Video placeholder (no thumbnail yet) */}
+        {isVideo && !thumbnailUrl && (
+          <KContainer.View style={[styles.videoBg, styles.videoThumbnail]} />
+        )}
+
+        {/* Image preview */}
+        {isImage && (
+          <KImage.Base uri={`file://${metadata.path}`} width={48} height={48} />
+        )}
+
+        {/* Show icon overlay for non-media files */}
+        {!hasPreview && (
+          <KContainer.View
+            style={styles.iconOverlay}
+            center
+            background={KColors.palette.gray.w100}
+          >
+            <KImage.VectorIcons
+              name={getAttachmentIcon(type)}
+              provider="MaterialCommunityIcons"
+              size={24}
+              color={KColors.palette.primary.w400}
+            />
+          </KContainer.View>
+        )}
+
+        {/* Video duration badge */}
+        {isVideo && !!metadata.duration && (
+          <KContainer.View style={styles.durationBadge} center>
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={KColors.white}
+              style={styles.durationText}
+            >
+              {formatDuration(metadata.duration / 1000)}
+            </KLabel.Text>
+          </KContainer.View>
+        )}
+
+        {/* Type icon for non-preview items */}
+        {!hasPreview && (
+          <KContainer.View style={styles.typeIcon} center>
+            <KImage.VectorIcons
+              name={getAttachmentIcon(type)}
+              provider="MaterialCommunityIcons"
+              size={14}
+              color={KColors.white}
+            />
+          </KContainer.View>
+        )}
+
+        {/* Error state */}
+        {error && (
+          <KContainer.View style={styles.errorOverlay} center>
+            <KImage.VectorIcons
+              name="close-circle"
+              provider="MaterialCommunityIcons"
+              size={28}
+              color={KColors.white}
+            />
+          </KContainer.View>
+        )}
+
+        {/* Progress overlay */}
+        {isUploading && (
+          <KContainer.View style={styles.progressOverlay} center>
+            <KLabel.Text typo="TextSmNormal" color={KColors.white}>
+              {uploadProgress}%
+            </KLabel.Text>
+          </KContainer.View>
+        )}
+      </KContainer.View>
+      {/* Remove button */}
+      <KContainer.Touchable
+        style={styles.removeButton}
+        center
+        br="round"
+        background={KColors.black}
+        onPress={() => onRemove(type, index)}
+        disabled={isUploading}
+        hitSlop={10}
+      >
+        <KImage.VectorIcons
+          name="close"
+          provider="MaterialCommunityIcons"
+          size={18}
+          color={KColors.white}
+        />
+      </KContainer.Touchable>
+    </KContainer.View>
+  );
+});
+
+MediaPreview.displayName = 'MediaPreview';
+
+const styles = StyleSheet.create({
+  thumbnail: {
+    position: 'relative',
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+    overflow: 'hidden',
+    backgroundColor: KColors.palette.gray.w50,
+  },
+  durationBadge: {
+    position: 'absolute',
+    bottom: 4,
+    right: 4,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderRadius: 3,
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+  },
+  durationText: {
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  iconOverlay: {
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+  },
+  videoIcon: {
+    position: 'absolute',
+    top: 2,
+    right: 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    borderRadius: 8,
+    width: 20,
+    height: 20,
+  },
+  typeIcon: {
+    position: 'absolute',
+    bottom: 2,
+    right: 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderRadius: 6,
+    width: 16,
+    height: 16,
+  },
+  videoBg: {
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+  },
+  videoThumbnail: {
+    backgroundColor: KColors.black,
+  },
+  progressOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
+  errorOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(255, 59, 48, 0.8)',
+  },
+  removeButton: {
+    position: 'absolute',
+    right: -4,
+    top: -4,
+    width: 22,
+    height: 22,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 3,
+  },
+  sendButton: {
+    width: 48,
+    height: 48,
+  },
+});

package/src/components/AttachmentPreview/index.tsx

@@ -0,0 +1,68 @@
+import { memo, useCallback } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import type { AttachmentItem, AttachmentType } from '../../types/attachment';
+import { MediaPreview } from './MediaPreview';
+import { FilePreview } from './FilePreview';
+
+interface AttachmentPreviewProps {
+  visible: boolean;
+  attachments?: Array<AttachmentItem>;
+  onRemove: (type: AttachmentType, data: unknown) => void;
+}
+
+export const AttachmentPreview = memo(
+  ({ visible, attachments, onRemove }: AttachmentPreviewProps) => {
+    const onFileRemove = useCallback(
+      (id: string) => {
+        onRemove('file', id);
+      },
+      [onRemove]
+    );
+
+    if (!visible || !attachments?.length) {
+      return null;
+    }
+
+    return (
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        scrollEventThrottle={16}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {attachments?.map((item, index) => {
+          switch (item.type) {
+            case 'file':
+              return (
+                <FilePreview
+                  key={`${item.type}-${index}`}
+                  file={item}
+                  onRemove={onFileRemove}
+                />
+              );
+
+            default:
+              return (
+                <MediaPreview
+                  key={`${item.type}-${index}`}
+                  index={index}
+                  item={item}
+                  onRemove={onRemove}
+                />
+              );
+          }
+        })}
+      </ScrollView>
+    );
+  }
+);
+
+AttachmentPreview.displayName = 'AttachmentPreview';
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    padding: 8,
+    paddingTop: 12,
+    gap: 8,
+  },
+});

package/src/components/ThreadCard/AvatarSection.tsx

@@ -1,10 +1,9 @@
 import { memo } from 'react';
 import { Avatar } from '../Avatar';
-import type { DConversationItem } from '../../types/chat';
-import { PeerType } from '@droppii/openim-rn-client-sdk';
+import { PeerType, type ConversationItem } from '@droppii/openim-rn-client-sdk';
 
 interface AvatarSectionProps extends Partial<
-  Pick<DConversationItem, 'peerType' | 'applicationType'>
+  Pick<ConversationItem, 'peerType'>
 > {
   avatar: string | null;
   fullName: string;

package/src/components/ThreadCard/ThreadCard.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { type GestureResponderEvent } from 'react-native';
 import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
 import { AvatarSection } from './AvatarSection';
@@ -7,6 +7,7 @@ import { UnreadBadge } from './UnreadBadge';
 import { formatTimestamp } from '../../utils/dateTimeUtils';
 import { getLastMessageText } from '../../utils/messageUtils';
 import { useConversation, useUserStore } from '../../store';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 
 interface ThreadCardProps {
   item: string;
@@ -14,26 +15,41 @@ interface ThreadCardProps {
 }
 
 const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
+  const consversation = useConversation(item);
+
   const {
     peerType,
     showName,
     faceURL,
-    lastMessage,
     unreadCount = 0,
     recvMsgOpt,
     isPinned,
-    applicationType,
     latestMsgSendTime,
-  } = useConversation(item) ?? {};
+    latestMsg,
+  } = consversation || {};
+
+  const latestMsgData: MessageItem = useMemo(() => {
+    let result = null;
+    try {
+      result = JSON.parse(latestMsg || '{}');
+    } catch (error) {
+      console.error('Failed to parse ex conversation', error);
+    }
+    return result;
+  }, [latestMsg]);
 
   const fullName = showName ?? '';
   const hasUnread = unreadCount > 0;
   const isMuted = (recvMsgOpt ?? 0) !== 0;
   const timestamp = formatTimestamp(
-    latestMsgSendTime ?? lastMessage?.sendTime ?? null
+    latestMsgSendTime ?? latestMsgData?.sendTime ?? null
   );
   const currentUserId = useUserStore((s) => s.user?.userID);
-  const lastMessageText = getLastMessageText(lastMessage, currentUserId);
+  const lastMessageText = getLastMessageText(
+    latestMsgData,
+    currentUserId,
+    consversation
+  );
 
   const handlePress = useCallback(
     (event: GestureResponderEvent) => {
@@ -55,7 +71,6 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
         avatar={faceURL ?? null}
         fullName={fullName}
         peerType={peerType}
-        applicationType={applicationType}
       />
 
       {/* Chat-Content */}
@@ -63,14 +78,6 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
         {/* Row-Title */}
         <KContainer.View row alignItems="center">
           <NamePrefixIcon peerType={peerType} />
-          {/* For verified PDP (configuration details to be defined later) */}
-          {/* <KContainer.VisibleView visible={peerType === DChatPeerType.BOT}>
-            <KImage.Base
-              uri={Images.ICON_BOT}
-              size={14}
-              style={styles.botIcon}
-            />
-          </KContainer.VisibleView> */}
           <KLabel.Text
             typo={hasUnread ? 'TextMdBold' : 'TextMdNormal'}
             numberOfLines={1}

package/src/components/flows/inputButtons/index.tsx

@@ -50,7 +50,7 @@ export const InputButtonFlow = memo((props: IInputButtonFlow) => {
           style={styles.buttonItem}
           onPress={() => onPressItem(item)}
         >
-          <KLabel.Text typo="TextMdMedium">
+          <KLabel.Text typo="TextMdMedium" flex>
             {item?.id === DEFAULT_BUTTON_ID
               ? trans('restart')
               : item?.label || ''}
@@ -87,11 +87,13 @@ const styles = StyleSheet.create({
     borderRadius: KSpacingValue['1.25rem'],
     ...messageStyles.bubbleReceived,
     marginVertical: KSpacingValue['0.5rem'],
+    width: '100%',
   },
   buttonsContainer: {
     backgroundColor: KColors.white,
     borderRadius: KRadiusValue['3x'],
     paddingHorizontal: KSpacingValue['0.75rem'],
+    width: '100%',
   },
   buttonItem: {
     flexDirection: 'row',
@@ -101,5 +103,6 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: KColors.border.light,
     paddingVertical: KSpacingValue['0.5rem'],
+    width: '100%',
   },
 });