@developer_tribe/react-native-comnyx 0.13.13 → 0.15.0

package/src/components/MessageInput.tsx

@@ -1,14 +1,25 @@
-import { TextInput, View, Image, TouchableOpacity } from 'react-native';
-import { useState } from 'react';
+import {
+  TextInput,
+  View,
+  Image,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+import { useState, useCallback } from 'react';
 import { sendCustomerMessage } from '../api';
+import { getUploadUrl, uploadFileToS3, sendMediaMessage } from '../api';
+import { deleteTempFile } from '../NativeComnyxMediaPicker';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { ScaledSheet } from './ScaledSheet';
 import { useLocalize } from '../hooks/useLocalize';
 import { activeOpacity } from '../constants/activeOpacity';
 import { useIsRtl } from '../hooks/isRtl';
 import { useAppStore } from '../store/store';
+import { MediaPickerButton } from './MediaPickerButton';
+import type { MediaAsset } from '../types/MediaTypes';
 
 const sendDark = require('../assets/arrow-right.png');
+const circleXIcon = require('../assets/x-circle.png');
 
 export function MessageInput({
   scrollToBottom,
@@ -17,124 +28,359 @@ export function MessageInput({
   selectedMessage?: string;
 }) {
   const [value, setValue] = useState('');
+  const [pendingMedia, setPendingMedia] = useState<MediaAsset[]>([]);
+  const [isSending, setIsSending] = useState(false);
   const customer = useAppStore((s) => s.customer!);
   const themeColors = useThemeColors();
   const localize = useLocalize();
   const isRtl = useIsRtl();
 
-  const sendMessage = () => {
-    if (value.trim()) {
+  const sendTextOnlyMessage = useCallback(() => {
+    if (!value.trim()) return;
+    const date = new Date();
+    const localId = `local-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    useAppStore.getState().setData((data) => [
+      {
+        id: null,
+        local_id: localId,
+        approved: false,
+        content: value,
+        created_at: date,
+        customer: {
+          name: customer.name,
+          profile_photo_url: null,
+        },
+      },
+      ...(data ?? []),
+    ]);
+    sendCustomerMessage(customer.external_id as string, value, {
+      fake: useAppStore.getState().fake,
+    })
+      .then((res) => {
+        const data = useAppStore.getState().data;
+        if (data) {
+          const itemIndex = data.findIndex((item) => item.local_id === localId);
+          if (itemIndex === -1) {
+            //TODO:??
+          } else {
+            const alteredData = [...data];
+            alteredData[itemIndex] = {
+              id: res.message.id,
+              content: res.message.content,
+              customer:
+                res.message.customer ?? alteredData[itemIndex]?.customer,
+              created_at: new Date(res.message.created_at),
+              approved: true,
+            };
+            useAppStore.setState({
+              data: alteredData,
+            });
+            scrollToBottom(false);
+          }
+        } else {
+          //TODO: ??
+        }
+      })
+      .catch(() => {
+        const data = useAppStore.getState().data;
+        if (data) {
+          const itemIndex = data.findIndex((item) => item.local_id === localId);
+          if (itemIndex === -1) {
+            //TODO:??
+          } else {
+            const alteredData = [...data];
+            alteredData[itemIndex] = {
+              ...alteredData[itemIndex],
+              id: alteredData[itemIndex]?.id ?? null,
+              content: alteredData[itemIndex]?.content ?? '',
+              created_at: alteredData[itemIndex]?.created_at ?? new Date(),
+              approved: alteredData[itemIndex]?.approved ?? false,
+              customer: alteredData[itemIndex]?.customer ?? null,
+              error: true,
+            };
+            useAppStore.setState({
+              data: alteredData,
+            });
+            scrollToBottom(false);
+          }
+        } else {
+          //TODO: ??
+        }
+      });
+    setValue('');
+  }, [value, customer, scrollToBottom]);
+
+  const uploadSingleMedia = useCallback(
+    async (
+      asset: MediaAsset,
+      isFake: boolean,
+      onProgress?: (percentage: number) => void
+    ): Promise<string> => {
+      const presignResponse = await getUploadUrl(
+        asset.fileName,
+        asset.mimeType,
+        { fake: isFake }
+      );
+      const uploadUrl = presignResponse.data.url;
+      const filePath = presignResponse.data.path;
+
+      await uploadFileToS3(uploadUrl, asset.uri, asset.mimeType, onProgress, {
+        fake: isFake,
+      });
+
+      return isFake ? asset.uri : filePath;
+    },
+    []
+  );
+
+  const sendMediaMessages = useCallback(
+    async (assets: MediaAsset[], content: string) => {
+      const isFake = useAppStore.getState().fake;
       const date = new Date();
+
+      const placeholderMediaFiles = assets.map((asset) => ({
+        url: '',
+        type: asset.type,
+        local_uri: asset.uri,
+        thumbnail_uri: asset.thumbnailUri,
+      }));
+
+      const localId = `local-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
       useAppStore.getState().setData((data) => [
         {
           id: null,
+          local_id: localId,
           approved: false,
-          content: value,
+          content: content,
           created_at: date,
           customer: {
             name: customer.name,
             profile_photo_url: null,
           },
+          media_files: placeholderMediaFiles,
+          media_type: assets[0]!.type,
+          is_uploading: true,
+          upload_progress: 0,
         },
         ...(data ?? []),
       ]);
-      sendCustomerMessage(customer.external_id as string, value, {
-        fake: useAppStore.getState().fake,
-      })
-        .then((res) => {
-          const data = useAppStore.getState().data;
-          if (data) {
-            const itemIndex = data.findIndex(
-              (item) =>
-                item.id === null &&
-                new Date(item.created_at).getTime() === date.getTime()
+      scrollToBottom(false);
+
+      try {
+        const fileProgresses = new Array(assets.length).fill(0);
+        let lastProgressUpdate = 0;
+
+        const updateOverallProgress = () => {
+          const now = Date.now();
+          if (now - lastProgressUpdate < 250) return;
+          lastProgressUpdate = now;
+
+          const sum = fileProgresses.reduce((a, b) => a + b, 0);
+          const overall = Math.min(95, Math.round(sum / assets.length));
+          const currentData = useAppStore.getState().data;
+          if (currentData) {
+            const idx = currentData.findIndex(
+              (item) => item.local_id === localId
             );
-            if (itemIndex === -1) {
-              //TODO:??
-            } else {
-              const alteredData = [...data];
-              alteredData[itemIndex] = {
-                id: res.message.id,
-                content: res.message.content,
-                customer:
-                  res.message.customer ?? alteredData[itemIndex]?.customer,
-                created_at: new Date(res.message.created_at),
-                approved: true,
+            if (idx !== -1) {
+              const updated = [...currentData];
+              updated[idx] = {
+                ...updated[idx]!,
+                upload_progress: overall,
               };
-              useAppStore.setState({
-                data: alteredData,
-              });
-              scrollToBottom(false);
+              useAppStore.setState({ data: updated });
             }
-          } else {
-            //TODO: ??
           }
-        })
-        .catch(() => {
-          const data = useAppStore.getState().data;
-          if (data) {
-            const itemIndex = data.findIndex(
-              (item) =>
-                item.id === null &&
-                new Date(item.created_at).getTime() === date.getTime()
-            );
-            if (itemIndex === -1) {
-              //TODO:??
-            } else {
-              const alteredData = [...data];
-              alteredData[itemIndex] = {
-                ...alteredData[itemIndex],
-                id: alteredData[itemIndex]?.id ?? null,
-                content: alteredData[itemIndex]?.content ?? '',
-                created_at: alteredData[itemIndex]?.created_at ?? new Date(),
-                approved: alteredData[itemIndex]?.approved ?? false,
-                customer: alteredData[itemIndex]?.customer ?? null,
-                error: true,
-              };
-              useAppStore.setState({
-                data: alteredData,
-              });
-              scrollToBottom(false);
+        };
+
+        const uploadedPaths: string[] = [];
+        for (let i = 0; i < assets.length; i++) {
+          const path = await uploadSingleMedia(
+            assets[i]!,
+            isFake,
+            (percentage) => {
+              fileProgresses[i] = percentage;
+              updateOverallProgress();
             }
-          } else {
-            //TODO: ??
+          );
+          uploadedPaths.push(path);
+        }
+
+        const res = await sendMediaMessage(
+          customer.external_id as string,
+          uploadedPaths,
+          assets[0]!.type,
+          content,
+          { fake: isFake }
+        );
+
+        const currentData = useAppStore.getState().data;
+        if (currentData) {
+          const idx = currentData.findIndex(
+            (item) => item.local_id === localId
+          );
+          if (idx !== -1) {
+            const updated = [...currentData];
+            const finalMediaFiles = assets.map((asset, i) => ({
+              url: uploadedPaths[i]!,
+              type: asset.type,
+              local_uri: asset.uri,
+              thumbnail_uri: asset.thumbnailUri,
+            }));
+            updated[idx] = {
+              id: res.message.id,
+              content: res.message.content,
+              customer: res.message.customer ?? updated[idx]?.customer ?? null,
+              created_at: new Date(res.message.created_at),
+              approved: true,
+              media_files: finalMediaFiles,
+              media_type: assets[0]!.type,
+              is_uploading: false,
+              upload_progress: 100,
+            };
+            useAppStore.setState({ data: updated });
+            scrollToBottom(false);
+          }
+        }
+
+        // Temp files are NOT deleted here — they are still needed for display
+        // until the backend data refresh provides full S3 URLs.
+        // The OS cleans up temp directory files automatically.
+      } catch (error) {
+        // Handle upload error — temp files are preserved for retry
+        const currentData = useAppStore.getState().data;
+        if (currentData) {
+          const idx = currentData.findIndex(
+            (item) => item.local_id === localId
+          );
+          if (idx !== -1) {
+            const updated = [...currentData];
+            updated[idx] = {
+              ...updated[idx]!,
+              is_uploading: false,
+              error: true,
+            };
+            useAppStore.setState({ data: updated });
+            scrollToBottom(false);
           }
-        });
+        }
+        console.error('[Comnyx] Media upload failed:', error);
+      }
+    },
+    [customer, scrollToBottom, uploadSingleMedia]
+  );
+
+  const handleMediaSelected = useCallback((assets: MediaAsset[]) => {
+    setPendingMedia((prev) => [...prev, ...assets]);
+  }, []);
+
+  const removePendingMedia = useCallback((index: number) => {
+    setPendingMedia((prev) => {
+      const removed = prev[index];
+      if (removed) {
+        deleteTempFile(removed.uri).catch((e) =>
+          console.warn('[Comnyx] Failed to delete temp file:', e)
+        );
+        if (removed.thumbnailUri) {
+          deleteTempFile(removed.thumbnailUri).catch((e) =>
+            console.warn('[Comnyx] Failed to delete temp thumbnail:', e)
+          );
+        }
+      }
+      return prev.filter((_, i) => i !== index);
+    });
+  }, []);
+
+  const handleSend = useCallback(async () => {
+    if (isSending) return;
+
+    if (pendingMedia.length > 0) {
+      setIsSending(true);
+      const content = value.trim();
+      const assets = [...pendingMedia];
+      setPendingMedia([]);
       setValue('');
+      await sendMediaMessages(assets, content);
+      setIsSending(false);
+    } else if (value.trim()) {
+      sendTextOnlyMessage();
     }
-  };
+  }, [isSending, pendingMedia, value, sendMediaMessages, sendTextOnlyMessage]);
+
+  const hasPendingMedia = pendingMedia.length > 0;
 
   return (
     <View
       style={[styles.container, { backgroundColor: themeColors.background }]}
     >
-      <TextInput
-        value={value}
-        onChangeText={(newValue) => setValue(newValue)}
-        onSubmitEditing={sendMessage}
-        returnKeyType="send"
-        multiline={true}
-        maxLength={1000}
-        style={[
-          styles.textInput,
-          {
-            backgroundColor: themeColors.background,
-            color: themeColors.text,
-            borderColor: themeColors.silver,
-          },
-        ]}
-        placeholder={localize('chat.messageInput.placeholder')}
-        placeholderTextColor={themeColors.text + '80'}
-      />
+      <MediaPickerButton onMediaSelected={handleMediaSelected} />
+      <View style={[styles.inputWrapper, { borderColor: themeColors.silver }]}>
+        {hasPendingMedia && (
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={styles.previewScroll}
+            contentContainerStyle={styles.previewContent}
+          >
+            {pendingMedia.map((asset, index) => (
+              <View key={`${asset.uri}-${index}`} style={styles.previewItem}>
+                <Image
+                  source={{
+                    uri:
+                      asset.type === 'video' && asset.thumbnailUri
+                        ? asset.thumbnailUri
+                        : asset.uri,
+                  }}
+                  style={styles.previewThumbnail}
+                />
+                {asset.type === 'video' && (
+                  <View style={styles.playIconOverlay}>
+                    <View style={styles.playIcon}>
+                      <View style={styles.playTriangle} />
+                    </View>
+                  </View>
+                )}
+                <TouchableOpacity
+                  style={styles.removeButton}
+                  onPress={() => removePendingMedia(index)}
+                  activeOpacity={activeOpacity}
+                  hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                >
+                  <Image source={circleXIcon} style={styles.removeIcon} />
+                </TouchableOpacity>
+              </View>
+            ))}
+          </ScrollView>
+        )}
+        <TextInput
+          value={value}
+          onChangeText={(newValue) => setValue(newValue)}
+          onSubmitEditing={handleSend}
+          returnKeyType="send"
+          multiline={true}
+          maxLength={1000}
+          style={[
+            styles.textInput,
+            {
+              backgroundColor: themeColors.background,
+              color: themeColors.text,
+            },
+          ]}
+          placeholder={localize('chat.messageInput.placeholder')}
+          placeholderTextColor={themeColors.text + '80'}
+        />
+      </View>
       <TouchableOpacity
         style={[styles.sendButton]}
-        onPress={sendMessage}
+        onPress={handleSend}
         activeOpacity={activeOpacity}
+        disabled={isSending}
       >
         <Image
           style={[
             styles.sendIcon,
             isRtl && { transform: [{ rotate: '180deg' }] },
+            isSending && { opacity: 0.4 },
           ]}
           source={sendDark}
         />
@@ -148,16 +394,81 @@ const styles = ScaledSheet.create({
     flexDirection: 'row',
     paddingHorizontal: '10@s',
     paddingVertical: '10@vs',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     position: 'relative',
     zIndex: 1,
   },
-  textInput: {
+  inputWrapper: {
     flex: 1,
     borderWidth: 1,
     borderRadius: '20@s',
-    paddingHorizontal: '15@s',
     marginRight: '10@s',
+    overflow: 'hidden',
+  },
+  previewScroll: {
+    maxHeight: '80@vs',
+    marginTop: '8@vs',
+    marginHorizontal: '10@s',
+  },
+  previewContent: {
+    flexDirection: 'row',
+    gap: '6@s',
+  },
+  previewItem: {
+    position: 'relative',
+    width: '60@vs',
+    height: '60@vs',
+    borderRadius: '8@s',
+  },
+  previewThumbnail: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '8@s',
+  },
+  playIconOverlay: {
+    ...({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+    } as any),
+  },
+  playIcon: {
+    width: '22@vs',
+    height: '22@vs',
+    borderRadius: '11@vs',
+    borderWidth: 1.5,
+    borderColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playTriangle: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: '7@vs',
+    borderTopWidth: '5@vs',
+    borderBottomWidth: '5@vs',
+    borderLeftColor: '#fff',
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    marginLeft: '2@s',
+  },
+  removeButton: {
+    position: 'absolute',
+    top: '-1@vs',
+    right: 0,
+    zIndex: 1,
+  },
+  removeIcon: {
+    width: '20@vs',
+    height: '20@vs',
+  },
+  textInput: {
+    paddingHorizontal: '15@s',
+
     fontSize: '16@vs',
     paddingVertical: '10@vs',
     minHeight: 40,
@@ -169,6 +480,7 @@ const styles = ScaledSheet.create({
     borderRadius: '20@vs',
     justifyContent: 'center',
     alignItems: 'center',
+    marginBottom: 0,
   },
   sendIcon: {
     width: '40@vs',

package/src/components/MessageItem.tsx

@@ -6,6 +6,7 @@ import { useState, useRef, useEffect } from 'react';
 import { ScaledSheet } from './ScaledSheet';
 import { useAppStore } from '../store/store';
 import { LinkifyText } from './LinkifyText';
+import { MediaMessageItem } from './MediaMessageItem';
 
 const clockIcon = require('../assets/iconamoon_clock-fill.png');
 const infoIcon = require('../assets/info-circle.png');
@@ -30,6 +31,23 @@ export function MessageItem({
 }: {
   item: AppConversationMessage;
   onShowPopup: () => void;
+}) {
+  if (
+    item.media_url ||
+    item.media_local_uri ||
+    (item.media_files && item.media_files.length > 0)
+  ) {
+    return <MediaMessageItem item={item} onShowPopup={onShowPopup} />;
+  }
+  return <TextMessageItem item={item} onShowPopup={onShowPopup} />;
+}
+
+function TextMessageItem({
+  item,
+  onShowPopup,
+}: {
+  item: AppConversationMessage;
+  onShowPopup: () => void;
 }) {
   const themeColors = useThemeColors();
   const isDeviceOwner = !item.user && !item.bot;
@@ -101,17 +119,14 @@ export function MessageItem({
     setLayoutComplete(false);
   }, [item.content]);
 
-  // Check if there's enough space for the timestamp
   const hasSpaceInLastLine =
     layoutRef.current.lines >= 1 &&
     layoutRef.current.lastLineWidth < layoutRef.current.totalWidth * 0.8;
 
-  // A single line message with enough space for the timestamp
   const isSingleLineWithSpace =
     layoutRef.current.lines === 1 &&
     layoutRef.current.lastLineWidth > layoutRef.current.totalWidth * 0.8;
 
-  // For multi-line messages, check if the last line has space
   const isMultiLineWithSpace =
     layoutRef.current.lines > 1 && hasSpaceInLastLine;
 
@@ -170,7 +185,6 @@ export function MessageItem({
                     /https?:\/\/(?:[-\w.])+(?::[0-9]+)?(?:\/(?:[\w/_.])*(?:\?(?:[\w&=%.])*)?(?:#(?:[\w.])*)?)?/g,
                   color: '#0066CC',
                   navigate: (url) => {
-                    console.log('url', url);
                     if (url) {
                       Linking.openURL(url);
                     }
@@ -178,7 +192,7 @@ export function MessageItem({
                 },
               ]}
             >
-              {item.content}
+              {typeof item.content === 'string' ? item.content : ''}
             </LinkifyText>
           </AppText>