@developer_tribe/react-native-comnyx 0.13.11 → 0.14.0

package/src/components/ChatList.tsx

@@ -15,7 +15,10 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getCustomerConversation, sendCustomerMessage } from '../api';
-import type { AppConversationMessage } from '../types/Conversation';
+import type {
+  AppConversationMessage,
+  ConversationMessage,
+} from '../types/Conversation';
 import { MessageItem } from './MessageItem';
 import { MessageInput } from './MessageInput';
 import { useThemeColors } from '../hooks/useThemeColors';
@@ -32,6 +35,66 @@ import { useAppStore } from '../store/store';
 const headphonesIcon = require('../assets/headphones-01.png');
 const closeIcon = require('../assets/x-close.png');
 
+const VIDEO_EXTENSIONS = [
+  '.mp4',
+  '.mov',
+  '.m4v',
+  '.avi',
+  '.webm',
+  '.mkv',
+  '.3gp',
+];
+const IMAGE_EXTENSIONS = [
+  '.jpg',
+  '.jpeg',
+  '.png',
+  '.gif',
+  '.heic',
+  '.heif',
+  '.webp',
+  '.bmp',
+];
+
+function getMediaTypeFromFile(
+  file: { mime_type?: string; url?: string } | null
+): 'image' | 'video' | undefined {
+  if (!file) return undefined;
+  // 1. Try mime_type first
+  if (file.mime_type) {
+    if (file.mime_type.startsWith('image')) return 'image';
+    if (file.mime_type.startsWith('video')) return 'video';
+  }
+  // 2. Fallback: check URL for known extensions
+  if (file.url) {
+    // Strip query params from URL for extension check
+    const urlPath = file.url.split('?')[0] || '';
+    const lower = urlPath.toLowerCase();
+    if (VIDEO_EXTENSIONS.some((ext) => lower.endsWith(ext))) return 'video';
+    if (IMAGE_EXTENSIONS.some((ext) => lower.endsWith(ext))) return 'image';
+  }
+  // 3. Default to image if file exists but can't determine type
+  return file.url ? 'image' : undefined;
+}
+
+function processRawMessage(msg: ConversationMessage): AppConversationMessage {
+  const file = msg.files && msg.files.length > 0 ? msg.files[0] : null;
+  const mediaFiles =
+    msg.files && msg.files.length > 0
+      ? msg.files.map((f) => ({
+          url: f.url,
+          type: getMediaTypeFromFile(f) || ('image' as const),
+        }))
+      : undefined;
+  return {
+    ...msg,
+    created_at: new Date(msg.created_at),
+    approved: true,
+    media_url: file?.url || undefined,
+    media_type: getMediaTypeFromFile(file),
+    media_files: mediaFiles,
+  };
+}
+
 function LoadingItem() {
   const themeColors = useThemeColors();
   return (
@@ -141,7 +204,15 @@ export function ChatList({
   const sections = useMemo(() => {
     if (!data || data.length === 0) return [];
 
-    const validData = data.map((message) => {
+    const seenIds = new Set<number>();
+    const dedupedData = data.filter((msg) => {
+      if (msg.id == null) return true;
+      if (seenIds.has(msg.id)) return false;
+      seenIds.add(msg.id);
+      return true;
+    });
+
+    const validData = dedupedData.map((message) => {
       if (!message.created_at || !(message.created_at instanceof Date)) {
         return {
           ...message,
@@ -340,11 +411,8 @@ export function ChatList({
                 (msg) => !existingIds.has(msg.id)
               );
 
-              const processedMessages = uniqueNewMessages.map((u) => ({
-                ...u,
-                created_at: new Date(u.created_at),
-                approved: true,
-              }));
+              const processedMessages =
+                uniqueNewMessages.map(processRawMessage);
 
               if (processedMessages.length === 0) {
                 nextPageStatus.current = 'empty';
@@ -355,11 +423,7 @@ export function ChatList({
               }
             } else if (newMessages.length > 0) {
               // Only new messages, no previous data
-              const processedMessages = newMessages.map((u) => ({
-                ...u,
-                created_at: new Date(u.created_at),
-                approved: true,
-              }));
+              const processedMessages = newMessages.map(processRawMessage);
               nextPageStatus.current = undefined;
               return processedMessages;
             } else {
@@ -464,11 +528,8 @@ export function ChatList({
               const uniqueNewMessages = newMessages.filter(
                 (msg) => !existingIds.has(msg.id)
               );
-              const processedMessages = uniqueNewMessages.map((u) => ({
-                ...u,
-                created_at: new Date(u.created_at),
-                approved: true,
-              }));
+              const processedMessages =
+                uniqueNewMessages.map(processRawMessage);
               useAppStore.setState({
                 firstMessage: processedMessages[0] || prevData[0],
               });
@@ -478,11 +539,7 @@ export function ChatList({
               return [...prevData, ...processedMessages];
             } else {
               // Handle the case where there's no previous data
-              const processedMessages = newMessages.map((u) => ({
-                ...u,
-                created_at: new Date(u.created_at),
-                approved: true,
-              }));
+              const processedMessages = newMessages.map(processRawMessage);
               useAppStore.setState({
                 firstMessage: processedMessages[0],
               });
@@ -638,8 +695,8 @@ export function ChatList({
                 ) : null
               }
               ListFooterComponent={loading ? <LoadingItem /> : null}
-              keyExtractor={(item: AppConversationMessage) =>
-                item.id + '-' + item.created_at
+              keyExtractor={(item: AppConversationMessage, index: number) =>
+                item.id?.toString() ?? item.local_id ?? `fake-${index}`
               }
               removeClippedSubviews={false}
               maxToRenderPerBatch={20}

package/src/components/CustomerForm.tsx

@@ -38,7 +38,7 @@ interface InfoButtonProps {
 
 const closeIcon = require('../assets/x-close.png');
 const infoIcon = require('../assets/info-circle.png');
-const BORDER_BOTTOM_WIDTH = 1
+const BORDER_BOTTOM_WIDTH = 1;
 
 export function CustomerForm({
   loading,

package/src/components/LinkifyText.tsx

@@ -15,7 +15,8 @@ interface Props {
   patterns: Pattern[];
 }
 
-function parseText(text: string, patterns: Pattern[]) {
+function parseText(text: string | null | undefined, patterns: Pattern[]) {
+  if (!text) return [{ type: 'text' as const, value: '' }];
   type Segment =
     | { type: 'text'; value: string }
     | { type: 'match'; pattern: Pattern; value: string; matchedText: string };
@@ -74,7 +75,7 @@ export function LinkifyText({
   containerStyle,
   ...props
 }: Props) {
-  const parts = parseText(children, patterns);
+  const parts = parseText(children || '', patterns);
 
   return (
     <AppText style={containerStyle} {...props}>

package/src/components/MediaMessageItem.tsx

@@ -0,0 +1,390 @@
+import { View, Image, TouchableOpacity } from 'react-native';
+import { useState, useEffect } from 'react';
+import type { AppConversationMessage } from '../types/Conversation';
+import { useThemeColors } from '../hooks/useThemeColors';
+import { AppText } from './AppText';
+import { ScaledSheet } from './ScaledSheet';
+import { activeOpacity } from '../constants/activeOpacity';
+import { MediaViewerModal } from './MediaViewerModal';
+import { openVideo, generateThumbnail } from '../NativeComnyxMediaPicker';
+import { LinkifyText } from './LinkifyText';
+import { Linking } from 'react-native';
+import type { MediaFileDisplay } from '../types/MediaTypes';
+
+const infoIcon = require('../assets/info-circle.png');
+const clockIcon = require('../assets/iconamoon_clock-fill.png');
+
+function MediaThumbnail({
+  file,
+  isUploading,
+  onImagePress,
+  onVideoPress,
+  single,
+}: {
+  file: MediaFileDisplay;
+  isUploading?: boolean;
+  onImagePress: (uri: string) => void;
+  onVideoPress: (uri: string) => void;
+  single?: boolean;
+}) {
+  const [generatedThumb, setGeneratedThumb] = useState<string | null>(null);
+  const displayUri = file.local_uri || file.url;
+  const isVideo = file.type === 'video';
+
+  useEffect(() => {
+    if (isVideo && !file.thumbnail_uri && !isUploading && displayUri) {
+      generateThumbnail(displayUri)
+        .then((thumb) => {
+          if (thumb) setGeneratedThumb(thumb);
+        })
+        .catch((err) => {
+          console.warn('[Comnyx] Could not generate thumbnail:', err);
+        });
+    }
+  }, [isVideo, file.thumbnail_uri, isUploading, displayUri]);
+
+  const effectiveThumb = file.thumbnail_uri || generatedThumb;
+  const thumbSource = isVideo
+    ? effectiveThumb
+      ? { uri: effectiveThumb }
+      : undefined
+    : { uri: displayUri };
+
+  const handlePress = () => {
+    if (isUploading) return;
+    if (isVideo) {
+      onVideoPress(displayUri);
+    } else {
+      onImagePress(displayUri);
+    }
+  };
+
+  const wrapperStyle = single ? styles.singleMediaWrapper : styles.gridItem;
+  const imageStyle = single ? styles.singleMediaImage : styles.gridImage;
+  const placeholderStyle = single
+    ? [styles.singleMediaImage, { backgroundColor: '#1a1a2e' }]
+    : [styles.videoPlaceholder, { backgroundColor: '#1a1a2e' }];
+
+  return (
+    <TouchableOpacity
+      style={wrapperStyle}
+      onPress={handlePress}
+      activeOpacity={activeOpacity}
+      disabled={isUploading}
+    >
+      {thumbSource ? (
+        <Image source={thumbSource} style={imageStyle} resizeMode="cover" />
+      ) : (
+        <View style={placeholderStyle} />
+      )}
+      {isVideo && !isUploading && (
+        <View style={styles.playOverlay}>
+          <AppText style={styles.playIcon}>▶</AppText>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+export function MediaMessageItem({
+  item,
+  onShowPopup,
+}: {
+  item: AppConversationMessage;
+  onShowPopup: () => void;
+}) {
+  const themeColors = useThemeColors();
+  const isDeviceOwner = !item.user && !item.bot;
+  const isUploading = item.is_uploading;
+  const uploadProgress = item.upload_progress ?? 0;
+
+  const [viewerVisible, setViewerVisible] = useState(false);
+  const [viewerUri, setViewerUri] = useState<string>('');
+
+  const mediaFiles: MediaFileDisplay[] = (() => {
+    if (item.media_files && item.media_files.length > 0) {
+      return item.media_files.map((f) => ({
+        url: f.url,
+        type: f.type,
+        local_uri: f.local_uri,
+        thumbnail_uri: f.thumbnail_uri,
+      }));
+    }
+
+    const singleUri = item.media_local_uri || item.media_url;
+    if (singleUri) {
+      return [
+        {
+          url: item.media_url || singleUri,
+          type: (item.media_type as 'image' | 'video') || 'image',
+          local_uri: item.media_local_uri || undefined,
+          thumbnail_uri: item.media_thumbnail_uri || undefined,
+        },
+      ];
+    }
+    return [];
+  })();
+
+  const isMultiMedia = mediaFiles.length > 1;
+  const hasContent = !!(
+    typeof item.content === 'string' && item.content.trim()
+  );
+
+  const formattedDate = new Date(item.created_at).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  const handleImagePress = (uri: string) => {
+    setViewerUri(uri);
+    setViewerVisible(true);
+  };
+
+  const handleVideoPress = (uri: string) => {
+    openVideo(uri).catch((err) =>
+      console.warn('[Comnyx] Could not open video:', err)
+    );
+  };
+
+  const renderFooter = () => {
+    if (isDeviceOwner && item.error) {
+      return <Image source={infoIcon} style={styles.infoIcon} />;
+    } else if (isDeviceOwner && (isUploading || !item.approved)) {
+      return (
+        <View style={styles.footerRow}>
+          {isUploading && (
+            <AppText style={styles.uploadPercentText}>
+              %{uploadProgress}
+            </AppText>
+          )}
+          <Image source={clockIcon} style={styles.clockIcon} />
+        </View>
+      );
+    } else {
+      return (
+        <AppText
+          style={[
+            styles.timestamp,
+            isDeviceOwner
+              ? styles.rightTimestamp
+              : [styles.leftTimestamp, { color: themeColors.text }],
+          ]}
+        >
+          {formattedDate}
+        </AppText>
+      );
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={isDeviceOwner && item.error ? 0.8 : 1}
+      onLongPress={onShowPopup}
+      onPress={() => {
+        isDeviceOwner && item.error ? onShowPopup() : {};
+      }}
+      style={[
+        styles.container,
+        isDeviceOwner ? styles.rightMessage : styles.leftMessage,
+      ]}
+    >
+      <View
+        style={[
+          styles.mediaBubble,
+          isDeviceOwner
+            ? { backgroundColor: themeColors.light_green }
+            : { backgroundColor: themeColors.ghost },
+        ]}
+      >
+        {isMultiMedia ? (
+          <View style={styles.gridContent}>
+            {mediaFiles.map((file, index) => (
+              <MediaThumbnail
+                key={`${file.url}-${index}`}
+                file={file}
+                isUploading={isUploading}
+                onImagePress={handleImagePress}
+                onVideoPress={handleVideoPress}
+              />
+            ))}
+          </View>
+        ) : mediaFiles.length === 1 ? (
+          <MediaThumbnail
+            file={mediaFiles[0]!}
+            isUploading={isUploading}
+            onImagePress={handleImagePress}
+            onVideoPress={handleVideoPress}
+            single
+          />
+        ) : null}
+
+        {hasContent && (
+          <View style={styles.contentContainer}>
+            <AppText
+              selectable={true}
+              style={[
+                styles.contentText,
+                isDeviceOwner
+                  ? styles.rightContentText
+                  : [styles.leftContentText, { color: themeColors.text }],
+              ]}
+            >
+              <LinkifyText
+                patterns={[
+                  {
+                    regex:
+                      /https?:\/\/(?:[-\w.])+(?::[0-9]+)?(?:\/(?:[\w/_.])*(?:\?(?:[\w&=%.])*)?(?:#(?:[\w.])*)?)?/g,
+                    color: '#0066CC',
+                    navigate: (url) => {
+                      if (url) {
+                        Linking.openURL(url);
+                      }
+                    },
+                  },
+                ]}
+              >
+                {typeof item.content === 'string' ? item.content : ''}
+              </LinkifyText>
+            </AppText>
+          </View>
+        )}
+        <View style={styles.footer}>{renderFooter()}</View>
+      </View>
+      {viewerVisible && (
+        <MediaViewerModal
+          visible={viewerVisible}
+          onClose={() => {
+            setViewerVisible(false);
+            setViewerUri('');
+          }}
+          mediaUri={viewerUri}
+          mediaType={'image'}
+        />
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = ScaledSheet.create({
+  container: {
+    maxWidth: '80%',
+    minWidth: 100,
+    marginVertical: '5@vs',
+  },
+  leftMessage: {
+    alignSelf: 'flex-start',
+  },
+  rightMessage: {
+    alignSelf: 'flex-end',
+  },
+  mediaBubble: {
+    borderRadius: '16@vs',
+    overflow: 'hidden',
+    paddingTop: '4@vs',
+    paddingHorizontal: '4@vs',
+  },
+  gridContent: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: '3@s',
+  },
+  gridItem: {
+    position: 'relative',
+    width: '40@vs',
+    height: '40@vs',
+    borderRadius: '10@vs',
+    overflow: 'hidden',
+  },
+  gridImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '10@vs',
+  },
+  singleMediaWrapper: {
+    position: 'relative',
+    borderRadius: '12@vs',
+    overflow: 'hidden',
+    alignSelf: 'flex-start',
+  },
+  singleMediaImage: {
+    width: '40@s',
+    aspectRatio: 1,
+    borderRadius: '12@vs',
+  },
+  videoPlaceholder: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '10@vs',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playOverlay: {
+    ...({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+    } as any),
+  },
+  playIcon: {
+    fontSize: '20@vs',
+    color: '#E0E0E0',
+    marginLeft: '2@s',
+  },
+  // Text content
+  contentContainer: {
+    paddingHorizontal: '8@s',
+    paddingTop: '4@vs',
+  },
+  contentText: {
+    fontSize: '16@vs',
+  },
+  leftContentText: {
+    color: '#000000',
+  },
+  rightContentText: {
+    color: '#000000',
+  },
+  // Footer
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    marginTop: '4@vs',
+    paddingHorizontal: '8@s',
+    paddingBottom: '4@vs',
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: '4@s',
+  },
+  uploadPercentText: {
+    fontSize: '10@vs',
+    opacity: 0.7,
+    color: '#000000',
+  },
+  timestamp: {
+    fontSize: '10@vs',
+    opacity: 0.7,
+  },
+  leftTimestamp: {
+    color: '#666666',
+  },
+  rightTimestamp: {
+    color: '#000000',
+  },
+  infoIcon: {
+    width: '12@vs',
+    height: '12@vs',
+    marginLeft: '4@s',
+  },
+  clockIcon: {
+    width: '12@vs',
+    height: '12@vs',
+    marginLeft: '4@s',
+  },
+});

package/src/components/MediaPickerButton.tsx

@@ -0,0 +1,48 @@
+import { TouchableOpacity, Image } from 'react-native';
+import { useCallback } from 'react';
+import { useThemeColors } from '../hooks/useThemeColors';
+import { ScaledSheet } from './ScaledSheet';
+import { activeOpacity } from '../constants/activeOpacity';
+import { pickMedia } from '../NativeComnyxMediaPicker';
+import type { MediaAsset } from '../types/MediaTypes';
+
+const paperclipIcon = require('../assets/attachment-01.png');
+
+export function MediaPickerButton({
+  onMediaSelected,
+}: {
+  onMediaSelected: (assets: MediaAsset[]) => void;
+}) {
+  const themeColors = useThemeColors();
+
+  const showPicker = useCallback(async () => {
+    const assets = await pickMedia();
+    if (assets.length > 0) onMediaSelected(assets);
+  }, [onMediaSelected]);
+
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={showPicker}
+      activeOpacity={activeOpacity}
+    >
+      <Image
+        source={paperclipIcon}
+        style={[styles.icon, { tintColor: themeColors.text }]}
+      />
+    </TouchableOpacity>
+  );
+}
+
+const styles = ScaledSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '6@s',
+    paddingVertical: '6@vs',
+  },
+  icon: {
+    width: '28@vs',
+    height: '28@vs',
+  },
+});