@developer_tribe/react-native-comnyx 0.13.13 → 0.15.0

package/src/NativeComnyxMediaPicker.ts

@@ -0,0 +1,83 @@
+import { NativeModules } from 'react-native';
+import type { MediaAsset } from './types/MediaTypes';
+
+const { ComnyxMediaPicker } = NativeModules;
+
+function mapResults(results: any[]): MediaAsset[] {
+  return results.map((result: any) => {
+    const isImage =
+      result.type === 'image' ||
+      (result.mimeType && result.mimeType.startsWith('image'));
+
+    return {
+      uri: result.uri,
+      type: isImage ? ('image' as const) : ('video' as const),
+      fileName: result.fileName,
+      fileSize: result.fileSize,
+      mimeType: result.mimeType,
+      width: isImage ? result.width : undefined,
+      height: isImage ? result.height : undefined,
+      duration: isImage ? undefined : result.duration,
+      thumbnailUri: isImage ? undefined : result.thumbnailUri,
+    };
+  });
+}
+
+export async function pickMedia(): Promise<MediaAsset[]> {
+  if (!ComnyxMediaPicker) {
+    return [];
+  }
+  const results = await ComnyxMediaPicker.pickMedia();
+  if (!results || !Array.isArray(results) || results.length === 0) return [];
+  return mapResults(results);
+}
+
+export async function pickImage(): Promise<MediaAsset[]> {
+  if (!ComnyxMediaPicker) {
+    return [];
+  }
+  const results = await ComnyxMediaPicker.pickImage();
+  if (!results || !Array.isArray(results) || results.length === 0) return [];
+  return mapResults(results);
+}
+
+export async function pickVideo(): Promise<MediaAsset[]> {
+  if (!ComnyxMediaPicker) {
+    return [];
+  }
+  const results = await ComnyxMediaPicker.pickVideo();
+  if (!results || !Array.isArray(results) || results.length === 0) return [];
+  return mapResults(results);
+}
+
+export async function openVideo(uri: string): Promise<void> {
+  if (!ComnyxMediaPicker) {
+    console.warn('[Comnyx] ComnyxMediaPicker native module is not available');
+    return;
+  }
+  await ComnyxMediaPicker.openVideo(uri);
+}
+
+export async function generateThumbnail(
+  videoUrl: string
+): Promise<string | null> {
+  if (!ComnyxMediaPicker) {
+    console.warn('[Comnyx] ComnyxMediaPicker native module is not available');
+    return null;
+  }
+  return ComnyxMediaPicker.generateThumbnail(videoUrl);
+}
+
+export async function deleteTempFile(uri: string): Promise<void> {
+  if (!ComnyxMediaPicker) {
+    return;
+  }
+  return ComnyxMediaPicker.deleteTempFile(uri);
+}
+
+export async function cleanupTempFiles(): Promise<void> {
+  if (!ComnyxMediaPicker) {
+    return;
+  }
+  return ComnyxMediaPicker.cleanupTempFiles();
+}

package/src/api/index.ts

@@ -4,3 +4,4 @@ export {
   getNewCustomerConversation,
 } from './conversations';
 export { sendCustomerMessage } from './messages';
+export { getUploadUrl, uploadFileToS3, sendMediaMessage } from './media';

package/src/api/media.ts

@@ -0,0 +1,116 @@
+import { Platform } from 'react-native';
+import type { UploadUrlResponse } from '../types/MediaTypes';
+import type { MessageResponse } from '../types/MessageResponse';
+import type { ApiOptions } from '../types/ApiOptions';
+import { axiosInstance } from './api';
+import {
+  getFakeUploadUrlResponse,
+  fakeUploadToS3,
+  getFakeMediaMessageResponse,
+} from '../data/fake/media';
+
+export function getUploadUrl(
+  fileName: string,
+  contentType: string,
+  options: ApiOptions
+): Promise<UploadUrlResponse> {
+  if (options.fake) {
+    return getFakeUploadUrlResponse(fileName);
+  }
+  return axiosInstance
+    .post<UploadUrlResponse>('/api/media/presign', {
+      fileName,
+      fileType: contentType,
+    })
+    .then((res) => res.data);
+}
+
+export function uploadFileToS3(
+  uploadUrl: string,
+  fileUri: string,
+  contentType: string,
+  onProgress?: (percentage: number) => void,
+  options?: ApiOptions
+): Promise<void> {
+  if (options?.fake) {
+    return fakeUploadToS3(onProgress);
+  }
+
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+
+    xhr.upload.addEventListener('progress', (event) => {
+      if (event.lengthComputable && onProgress) {
+        const percentage = Math.min(
+          100,
+          Math.round((event.loaded / event.total) * 100)
+        );
+        onProgress(percentage);
+      }
+    });
+
+    xhr.addEventListener('load', () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve();
+      } else {
+        console.error('[Comnyx] Upload failed:', xhr.status, xhr.responseText);
+        reject(new Error(`Upload failed with status ${xhr.status}`));
+      }
+    });
+
+    xhr.addEventListener('error', () => {
+      console.error(
+        '[Comnyx] Upload XHR error, status:',
+        xhr.status,
+        'response:',
+        xhr.responseText
+      );
+      reject(new Error('Upload failed'));
+    });
+
+    xhr.addEventListener('abort', () => {
+      reject(new Error('Upload aborted'));
+    });
+
+    xhr.open('PUT', uploadUrl);
+    xhr.setRequestHeader('Content-Type', contentType);
+
+    // React Native supports sending file URIs directly via XHR
+    const file: any = {
+      uri: Platform.OS === 'android' ? fileUri : fileUri.replace('file://', ''),
+      type: contentType,
+      name: fileUri.split('/').pop() || 'file',
+    };
+
+    xhr.send(file);
+  });
+}
+
+export function sendMediaMessage(
+  externalId: string,
+  fileUrls: string[],
+  mediaType: 'image' | 'video',
+  content: string,
+  options: ApiOptions
+): Promise<MessageResponse> {
+  if (options.fake) {
+    return getFakeMediaMessageResponse(fileUrls, mediaType);
+  }
+  return axiosInstance
+    .post<MessageResponse>(
+      '/api/customers/message',
+      {
+        externalId,
+        content,
+        files: fileUrls,
+        media_type: mediaType,
+      },
+      {
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        },
+      }
+    )
+    .then((res) => res.data);
+}

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}>