connect-x-reactnative-livechat-sdk 1.5.0-legacy → 1.6.0-legacy

package/README.md

@@ -9,7 +9,8 @@ An SDK for easily integrating the Connect-X Live Chat into your React Native app
 * Displays chat history with date partitions.
 * Customizable styles and colors from from [Connect-X](https://app.connect-x.tech/) by navigating to: Organization Settings → Connector → Live Chat → Style.
 * Supports custom header components.
-* Image preview with zoom capabilities.
+* Image preview with zoom capabilities and download (Save to Files on iOS, save-as on Android).
+* Supports DNG, HEIC and JFIF images.
 
 ## 🔧 Installation
 
@@ -33,7 +34,7 @@ yarn connect-x-reactnative-livechat-sdk@1.4.7-legacy
 You need to install the following peer dependencies manually:
 
 ```bash
-npm install @react-native-documents/picker react-native-svg@13.4.0 react-native-image-zoom-viewer react-native-device-info @react-native-community/netinfo
+npm install @react-native-documents/picker react-native-image-picker react-native-svg@13.4.0 react-native-image-zoom-viewer react-native-device-info react-native-blob-util @react-native-community/netinfo
 ```
 
 If you have a problem with @react-native-documents/picker,
@@ -59,11 +60,30 @@ https://github.com/react-native-documents/document-picker/issues/777#issuecommen
 This library requires some peer dependencies. You need to install these libraries in your project as well:
 
 ```bash
-npm install socket.io-client @react-native-documents/picker react-native-svg react-native-image-zoom-viewer react-native-device-info @react-native-community/netinfo
+npm install socket.io-client @react-native-documents/picker react-native-image-picker react-native-svg react-native-image-zoom-viewer react-native-device-info react-native-blob-util @react-native-community/netinfo
 
 #or
 
-yarn add socket.io-client @react-native-documents/picker react-native-svg react-native-image-zoom-viewer react-native-device-info @react-native-community/netinfo
+yarn add socket.io-client @react-native-documents/picker react-native-image-picker react-native-svg react-native-image-zoom-viewer react-native-device-info react-native-blob-util @react-native-community/netinfo
+```
+
+### Camera & Photo Library Permissions
+
+The chat input has **File**, **Camera** and **Gallery** buttons (via `react-native-image-picker`). Add these to your app:
+
+**iOS** (`Info.plist`):
+
+```xml
+<key>NSCameraUsageDescription</key>
+<string>Take a photo to send in live chat</string>
+<key>NSPhotoLibraryUsageDescription</key>
+<string>Choose a photo to send in live chat</string>
+```
+
+**Android** (`AndroidManifest.xml`):
+
+```xml
+<uses-permission android:name="android.permission.CAMERA" />
 ```
 
 ## 🚀 Usage
@@ -89,8 +109,15 @@ const AppContent = () => {
             token: 'YOUR_AUTH_TOKEN',
             orgId: 'YOUR_ORGANIZATION_ID',
             channelId: 'YOUR_CHANNEL_ID',
-            externalValue: 'YOUR_EXTERNAL_VALUE',
-          });
+            customer: {
+              cx_Name: 'CUSTOMER_NAME',
+              cx_firstName: 'CUSTOMER_FIRST_NAME',
+              cx_lastName: 'CUSTOMER_LAST_NAME',
+              // You can add any customer field here
+              // Note: The customer object must contain at least one field configured as an Upsert Key in Connect-X.
+            },
+            customHeader: <YourCustomHeaderComponent />, // Optional
+});
         }}
       />
     </View>
@@ -167,6 +194,18 @@ A method to open the chat window. It accepts a `config` object with the followin
 
 ---
 
+## 📝 Changelog
+
+### 1.6.0-legacy
+
+* **Attach buttons:** the chat input has separate **File** (+ icon), **Camera** and **Gallery** buttons.
+* **DNG / HEIC / JFIF:** these images can be sent, viewed and downloaded. Images the device can't decode fall back to a download link.
+* **Correct file types:** DNG and HEIC picked from the iOS gallery keep their real extension instead of becoming `.jpg`.
+* **Image preview:** the close button sits below the notch, and a new download button saves the image through the system Save to Files / save-as sheet.
+* **New dependency:** `react-native-blob-util`. Install it and run `pod install` after upgrading.
+
+---
+
 ## 📄 License
 
 [![Apache License](https://img.shields.io/badge/License-Apache-blue.svg)](https://www.apache.org/licenses/LICENSE-2.0)

package/lib/module/ChatScreen.js

@@ -2,16 +2,45 @@
 
 // src/ChatScreen.tsx
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { View, Text, TextInput, TouchableOpacity, SectionList, StyleSheet, SafeAreaView, KeyboardAvoidingView, Platform, Image, ActivityIndicator, Alert, Linking, Dimensions, Modal } from 'react-native';
+import { View, Text, TextInput, TouchableOpacity, SectionList, StyleSheet, SafeAreaView, KeyboardAvoidingView, Platform, StatusBar, Image, ActivityIndicator, Alert, Linking, Dimensions, Modal } from 'react-native';
 import io from 'socket.io-client';
-import { pick, types } from '@react-native-documents/picker';
+import { errorCodes, pick, saveDocuments, types } from '@react-native-documents/picker';
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import { ConnectXMobileSdk } from 'connect-x-react-native-sdk';
-import { apiGet, uploadFile, BASE_URL_LIVE_CHAT, apiPost } from "./api.js";
+import { apiGet, uploadFile, BASE_URL_LIVE_CHAT, apiPost, buildConnectorBody, fileMimeType, sniffImageExt } from "./api.js";
 import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
 import hexToRgba from 'hex-to-rgba';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import { mergeIncomingMessage, mergeHistory, messageSig } from "./mergeMessages.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ponytail: ไอคอน SVG ในไฟล์ แทน vector-icons เพราะไม่ต้องให้แอปที่ใช้ SDK link font เพิ่ม
+const ATTACH_ICONS = {
+  file: 'M12 5v14M5 12h14',
+  camera: 'M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
+  gallery: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM21 15l-5-5L5 21',
+  download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'
+};
+
+// ระยะจากขอบบนของ preview ให้พ้น status bar / notch
+// ponytail: ค่าคงที่ ไม่ใช้ safe-area lib; iOS 60 พอสำหรับ Dynamic Island
+const VIEWER_TOP = Platform.OS === 'ios' ? 60 : (StatusBar.currentHeight ?? 0) + 16;
+const AttachIcon = ({
+  name,
+  color = '#525E62'
+}) => /*#__PURE__*/_jsx(Svg, {
+  width: 22,
+  height: 22,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: /*#__PURE__*/_jsx(Path, {
+    d: ATTACH_ICONS[name],
+    stroke: color,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })
+});
 const SendIcon = ({
   size,
   backgroundColor,
@@ -52,6 +81,7 @@ export const ChatScreen = ({
   token,
   orgId,
   channelId,
+  externalValue,
   customHeader,
   customer
 }) => {
@@ -63,6 +93,8 @@ export const ChatScreen = ({
   const socketRef = useRef(null);
   const hasConnectedRef = useRef(false);
   const [userId, setUserId] = useState(null);
+  // ponytail: url ที่ <Image> decode ไม่ผ่าน (dng/heic บน Android ฯลฯ) → ตกไปเป็นลิงก์ดาวน์โหลด
+  const [undecodableUrls, setUndecodableUrls] = useState({});
   const [selectedFile, setSelectedFile] = useState(null);
   const [settings, setSettings] = useState(null);
   const [styles, setStyles] = useState({});
@@ -72,14 +104,15 @@ export const ChatScreen = ({
   const [viewerImages, setViewerImages] = useState([]);
   const [viewerIndex, setViewerIndex] = useState(0);
   useEffect(() => {
+    // ponytail: ยังรับ unknownId ไว้เฉย ๆ ไม่ได้ส่งเข้า body แล้ว แต่ getUnknownId() ฝั่ง native ยังต้องเรียก
     const findCustomer = async _unknownId => {
       try {
-        console.log('customer:', customer);
-        const res = await apiPost(`liveChat/${orgId}/${channelId}/setLiveChatConnector`, {
-          customers: {
-            ...customer
-          }
-        }, token);
+        const body = buildConnectorBody({
+          externalValue,
+          customer
+        });
+        console.log('setLiveChatConnector body:', body);
+        const res = await apiPost(`liveChat/${orgId}/${channelId}/setLiveChatConnector`, body, token);
         console.log('Found customer:', res);
         if (res) {
           setUserId(res?.userId);
@@ -337,10 +370,19 @@ export const ChatScreen = ({
   const handleSelectFile = async () => {
     try {
       const result = await pick({
-        type: [types.images, types.doc, types.pdf],
+        // ponytail: allFiles เพราะ iOS ไม่รู้จักนามสกุลแปลก ๆ (.jfif) เลย grey out
+        // ถ้าปล่อยเป็น public.image; ชนิดไฟล์คัดตอนส่งด้วย mime อยู่แล้ว
+        type: [types.allFiles],
         allowMultiSelection: false
       });
-      setSelectedFile(result[0]);
+      const file = result[0];
+      if (file) {
+        setSelectedFile({
+          uri: file.uri,
+          name: file.name || 'file',
+          type: file.type
+        });
+      }
     } catch (err) {
       if (err?.code !== 'DOCUMENT_PICKER_CANCELED') {
         // Alert.alert(
@@ -350,6 +392,51 @@ export const ChatScreen = ({
       }
     }
   };
+
+  // อ่านแค่ 12 byte แรกของไฟล์ ไว้เช็คชนิดจริง
+  const readFileHead = async uri => {
+    try {
+      const head = `${ReactNativeBlobUtil.fs.dirs.CacheDir}/head_${Date.now()}`;
+      await ReactNativeBlobUtil.fs.slice(uri.replace('file://', ''), head, 0, 12);
+      const bytes = await ReactNativeBlobUtil.fs.readFile(head, 'ascii');
+      ReactNativeBlobUtil.fs.unlink(head).catch(() => {});
+      return bytes;
+    } catch {
+      return [];
+    }
+  };
+  const handleImagePicked = async res => {
+    if (res.didCancel) return;
+    const asset = res.assets?.[0];
+    if (res.errorCode || !asset?.uri) {
+      if (res.errorCode === 'permission') {
+        Alert.alert('Permission required', 'Please allow access in Settings.');
+      }
+      return;
+    }
+    let name = asset.fileName || `image_${Date.now()}.jpg`;
+    let type = asset.type || 'image/jpeg';
+    const realExt = sniffImageExt(await readFileHead(asset.uri));
+    if (realExt) {
+      name = `${name.replace(/\.[^.]+$/, '')}.${realExt}`;
+      type = fileMimeType({
+        name
+      });
+    }
+    setSelectedFile({
+      uri: asset.uri,
+      name,
+      type
+    });
+  };
+  const handleOpenCamera = () => launchCamera({
+    mediaType: 'photo',
+    saveToPhotos: false
+  }).then(handleImagePicked);
+  const handleOpenGallery = () => launchImageLibrary({
+    mediaType: 'photo',
+    selectionLimit: 1
+  }).then(handleImagePicked);
   const MessageWithLinks = ({
     text,
     textStyle,
@@ -373,8 +460,9 @@ export const ChatScreen = ({
       })
     });
   };
+  const isDisplayableImage = item => item.type === 'image' && !!item.url && !undecodableUrls[item.url];
   const openImageViewer = tappedImageUrl => {
-    const allImages = messages.filter(msg => msg.type === 'image' && msg.url).map(msg => ({
+    const allImages = messages.filter(isDisplayableImage).map(msg => ({
       url: msg.url
     }));
     const tappedIndex = allImages.findIndex(img => img.url === tappedImageUrl);
@@ -384,6 +472,30 @@ export const ChatScreen = ({
       setImageViewerVisible(true);
     }
   };
+
+  // โหลดรูปลง cache ก่อน แล้วเปิดหน้า "Save to Files" (iOS) / "บันทึกเป็น" (Android)
+  // เพราะ saveDocuments รับแค่ไฟล์ในเครื่อง
+  const handleDownloadImage = async url => {
+    try {
+      // ใช้ชื่อไฟล์ตอนส่ง (เช่น .dng / .jfif) ก่อน ชื่อใน url อาจถูก storage เปลี่ยนนามสกุล
+      const name = messages.find(m => m.url === url)?.fileName || decodeURIComponent(url.split('?')[0].split('/').pop() || 'image');
+      const res = await ReactNativeBlobUtil.config({
+        path: `${ReactNativeBlobUtil.fs.dirs.CacheDir}/${name}`
+      }).fetch('GET', url);
+      await saveDocuments({
+        sourceUris: [`file://${res.path()}`],
+        fileName: name,
+        mimeType: fileMimeType({
+          name
+        })
+      });
+    } catch (err) {
+      if (err?.code !== errorCodes.OPERATION_CANCELED) {
+        Alert.alert('Download Error', 'Failed to save the image.');
+        console.error('Download failed', err);
+      }
+    }
+  };
   const handleCancelUpload = () => {
     if (isUploading) return;
     setSelectedFile(null);
@@ -393,7 +505,7 @@ export const ChatScreen = ({
     setIsUploading(true);
     try {
       const fileUrl = await uploadFile(selectedFile, orgId, channelId);
-      const type = selectedFile.type?.startsWith('image/') ? 'image' : 'file';
+      const type = fileMimeType(selectedFile).startsWith('image/') ? 'image' : 'file';
       const messageBody = {
         type,
         fileName: selectedFile.name || 'file',
@@ -461,16 +573,20 @@ export const ChatScreen = ({
             text: item.text || '',
             textStyle: item.sender === 'user' ? styles.customerChatText : styles.agentChatText,
             linkStyle: styles.linkTextStyle
-          }), item.type === 'image' && /*#__PURE__*/_jsx(TouchableOpacity, {
+          }), isDisplayableImage(item) && /*#__PURE__*/_jsx(TouchableOpacity, {
             onPress: () => openImageViewer(item.url),
             children: /*#__PURE__*/_jsx(Image, {
               source: {
                 uri: item.url
               },
               style: styles.imageMessage,
-              resizeMode: "cover"
+              resizeMode: "cover",
+              onError: () => setUndecodableUrls(prev => ({
+                ...prev,
+                [item.url]: true
+              }))
             })
-          }), item.type === 'file' && /*#__PURE__*/_jsx(TouchableOpacity, {
+          }), (item.type === 'file' || item.type === 'image' && !isDisplayableImage(item)) && /*#__PURE__*/_jsx(TouchableOpacity, {
             onPress: handleFilePress,
             children: /*#__PURE__*/_jsx(Text, {
               style: [styles.fileLink, item.sender === 'user' ? styles.customerChatText : styles.agentChatText],
@@ -510,7 +626,9 @@ export const ChatScreen = ({
         renderIndicator: (currentIndex, allSize) => /*#__PURE__*/_jsx(View, {
           style: {
             position: 'absolute',
-            top: 45,
+            top: VIEWER_TOP,
+            height: 42,
+            justifyContent: 'center',
             width: '100%',
             alignItems: 'center',
             zIndex: 1
@@ -524,30 +642,41 @@ export const ChatScreen = ({
             children: [currentIndex, " / ", allSize]
           })
         }),
-        renderHeader: () => /*#__PURE__*/_jsx(TouchableOpacity
-        // FIX 1: Add dynamic top spacing and zIndex
-        , {
-          style: [styles.imageViewerCloseButton, {
-            top: 30,
-            zIndex: 9999,
-            // Force it to be the top-most layer
-            position: 'absolute',
-            // Ensure it floats correctly
-            right: 20
-          }]
-          // FIX 2: Add hitSlop so users don't have to hit the "X" pixel-perfectly
-          ,
-          hitSlop: {
-            top: 30,
-            bottom: 30,
-            left: 30,
-            right: 30
-          },
-          onPress: () => setImageViewerVisible(false),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.imageViewerCloseButtonText,
-            children: "\u2715"
-          })
+        renderHeader: currentIndex => /*#__PURE__*/_jsxs(View, {
+          pointerEvents: "box-none",
+          style: [styles.imageViewerHeader, {
+            top: VIEWER_TOP
+          }],
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.imageViewerCloseButton,
+            hitSlop: {
+              top: 20,
+              bottom: 20,
+              left: 20,
+              right: 20
+            },
+            onPress: () => {
+              const url = viewerImages[currentIndex ?? 0]?.url;
+              if (url) handleDownloadImage(url);
+            },
+            children: /*#__PURE__*/_jsx(AttachIcon, {
+              name: "download",
+              color: "white"
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.imageViewerCloseButton,
+            hitSlop: {
+              top: 20,
+              bottom: 20,
+              left: 20,
+              right: 20
+            },
+            onPress: () => setImageViewerVisible(false),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.imageViewerCloseButtonText,
+              children: "\u2715"
+            })
+          })]
         })
       })
     }), customHeader !== undefined ? customHeader : /*#__PURE__*/_jsxs(View, {
@@ -648,13 +777,23 @@ export const ChatScreen = ({
             children: [/*#__PURE__*/_jsx(TouchableOpacity, {
               onPress: handleSelectFile,
               style: styles.attachmentButton,
-              children: /*#__PURE__*/_jsxs(View, {
-                style: styles.plusIconContainer,
-                children: [/*#__PURE__*/_jsx(View, {
-                  style: [styles.plusIconBar, styles.plusIconBarHorizontal]
-                }), /*#__PURE__*/_jsx(View, {
-                  style: [styles.plusIconBar, styles.plusIconBarVertical]
-                })]
+              accessibilityLabel: "Attach file",
+              children: /*#__PURE__*/_jsx(AttachIcon, {
+                name: "file"
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleOpenCamera,
+              style: styles.attachmentButton,
+              accessibilityLabel: "Take photo",
+              children: /*#__PURE__*/_jsx(AttachIcon, {
+                name: "camera"
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleOpenGallery,
+              style: styles.attachmentButton,
+              accessibilityLabel: "Choose from gallery",
+              children: /*#__PURE__*/_jsx(AttachIcon, {
+                name: "gallery"
               })
             }), /*#__PURE__*/_jsx(TextInput, {
               style: styles.input,
@@ -846,13 +985,8 @@ const getDynamicStyles = (settingStyle = {}) => {
     attachmentButton: {
       padding: 5
     },
+    // ponytail: วงกลม+สีพื้นอยู่ใน SendIcon (SVG) แล้ว ตรงนี้เลยไม่ต้องมีอีกวง
     sendButton: {
-      paddingRight: 3,
-      paddingTop: 2,
-      width: 42,
-      height: 42,
-      borderRadius: 24,
-      backgroundColor: settingStyle?.styleHeadColor || '#3761DF',
       justifyContent: 'center',
       alignItems: 'center'
     },
@@ -910,26 +1044,6 @@ const getDynamicStyles = (settingStyle = {}) => {
       fontWeight: 'bold',
       fontSize: 16
     },
-    plusIconContainer: {
-      width: 10,
-      height: 18,
-      justifyContent: 'center',
-      alignItems: 'center'
-    },
-    plusIconBar: {
-      position: 'absolute',
-      backgroundColor: '#525E62'
-    },
-    plusIconBarHorizontal: {
-      width: 18,
-      height: 2,
-      borderRadius: 1
-    },
-    plusIconBarVertical: {
-      width: 2,
-      height: 18,
-      borderRadius: 1
-    },
     imageMessage: {
       width: 200,
       height: 200,
@@ -1017,11 +1131,16 @@ const getDynamicStyles = (settingStyle = {}) => {
       fontSize: 12,
       fontWeight: 'bold'
     },
-    imageViewerCloseButton: {
+    imageViewerHeader: {
       position: 'absolute',
-      top: 20,
-      right: 20,
-      zIndex: 20,
+      left: 10,
+      right: 10,
+      zIndex: 9999,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    imageViewerCloseButton: {
       padding: 10
     },
     imageViewerCloseButtonText: {