connect-x-reactnative-livechat-sdk 0.2.0 → 1.1.0

package/src/ChatScreen.tsx

@@ -1,5 +1,5 @@
 // src/ChatScreen.tsx
-import { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import {
   View,
   Text,
@@ -15,6 +15,7 @@ import {
   Alert,
   Linking,
   Dimensions,
+  Modal,
 } from 'react-native';
 import io from 'socket.io-client';
 import type { Socket } from 'socket.io-client';
@@ -25,8 +26,9 @@ import {
 } from '@react-native-documents/picker';
 import { ConnectXMobileSdk } from 'connect-x-react-native-sdk';
 import { apiGet, uploadFile, BASE_URL_LIVE_CHAT, apiPost } from './api';
-import Svg, { Path } from 'react-native-svg';
+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';
 
 interface Message {
   id?: string;
@@ -40,29 +42,47 @@ interface Message {
   [key: string]: any; // for other properties
 }
 
-const SendIcon = ({ color, size }: { color: string; size: number }) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path
-      d="M22 2L15 22L11 13L2 9L22 2Z"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
+const SendIcon = ({
+  size,
+  backgroundColor,
+  iconColor,
+}: {
+  size: number;
+  backgroundColor: string;
+  iconColor: string;
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+    <Rect width={32} height={32} rx={16} fill={backgroundColor} />
+    <Defs>
+      <ClipPath id="clip0_4087_14448">
+        <Rect width={20} height={20} fill="white" transform="translate(6 6)" />
+      </ClipPath>
+    </Defs>
+    <G clipPath="url(#clip0_4087_14448)">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.9918 11.0084L10.4985 14.8026L13.9943 16.826L17.0768 13.7426C17.2332 13.5864 17.4452 13.4986 17.6663 13.4987C17.8874 13.4988 18.0993 13.5867 18.2556 13.743C18.4118 13.8994 18.4996 14.1114 18.4995 14.3325C18.4994 14.5536 18.4115 14.7655 18.2552 14.9218L15.1718 18.0051L17.1968 21.5001L20.9918 11.0084ZM21.261 9.13845C22.2568 8.77762 23.2218 9.74262 22.861 10.7384L18.4593 22.9093C18.0977 23.9076 16.7343 24.0293 16.2018 23.1101L13.521 18.4784L8.88934 15.7976C7.97018 15.2651 8.09184 13.9018 9.09018 13.5401L21.261 9.13845Z"
+        fill={iconColor}
+      />
+    </G>
   </Svg>
 );
-
 // Component หลักของหน้าแชท
 export const ChatScreen = ({
   onClose,
   token,
   orgId,
   channelId,
+  externalValue,
+  customHeader,
 }: {
   onClose: () => void;
   token: string;
   orgId: string;
   channelId: string;
+  externalValue: string;
+  customHeader?: React.ReactNode;
 }) => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [inputText, setInputText] = useState('');
@@ -71,12 +91,17 @@ export const ChatScreen = ({
   const [userId, setUserId] = useState<string | null>(null);
   const [selectedFile, setSelectedFile] =
     useState<DocumentPickerResponse | null>(null);
-  const [styleSettings, setStyleSettings] = useState<any>(null);
+  const [settings, setSettings] = useState<any>(null);
   const [styles, setStyles] = useState<any>({});
   const sectionListRef = useRef<SectionList<Message>>(null);
   const [chatPhase, setChatPhase] = useState<'pre-chat' | 'chatting'>(
     'chatting'
   );
+  const [isSending, setIsSending] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isImageViewerVisible, setImageViewerVisible] = useState(false);
+  const [viewerImages, setViewerImages] = useState<{ url: string }[]>([]);
+  const [viewerIndex, setViewerIndex] = useState(0);
 
   useEffect(() => {
     const findCustomer = async (unknownId: String) => {
@@ -84,7 +109,7 @@ export const ChatScreen = ({
         const res = await apiPost(
           `liveChat/${orgId}/${channelId}/setLiveChatConnector`,
           {
-            externalValue: "Siwakorn'", //'ปุ้นซู่ซ่า', //sdf0001111111111  //78e839c38397b8cac97437d17b1c91b568a5adb4
+            externalValue: externalValue, //'ปุ้นซู่ซ่า', //sdf0001111111111  //78e839c38397b8cac97437d17b1c91b568a5adb4
             userId: unknownId,
           },
           token
@@ -96,12 +121,16 @@ export const ChatScreen = ({
           // initializeUserId();
         }
       } catch (error) {
-        // initializeUserId();
+        onClose();
+        Alert.alert('Message', 'Customer not found. Please try again later.');
         console.log('Error finding customer:', error);
       }
     };
 
     const initializeUserId = async () => {
+      if (!(await checkAllowed())) {
+        return;
+      }
       try {
         const res = await ConnectXMobileSdk.getUnknownId();
         console.log('Generated userId:', res);
@@ -111,6 +140,33 @@ export const ChatScreen = ({
         console.log('Error generating userId:', error);
       }
     };
+
+    const checkAllowed = async () => {
+      try {
+        const res = await apiGet(`liveChat/${orgId}/checkAllowApp`, token);
+        console.log('App permissions:', res);
+        if (res) {
+          console.log('Permission granted for app access');
+          return true;
+        } else {
+          onClose();
+          Alert.alert(
+            'Permission Denied',
+            `You do not have permission to access this chat`
+          );
+          return false;
+        }
+      } catch (error) {
+        onClose();
+        console.log('Error checking permissions:', error);
+        Alert.alert(
+          'Permission Denied',
+          `You do not have permission to access this chat.`
+        );
+        return false;
+      }
+    };
+
     if (!userId) {
       initializeUserId();
     }
@@ -122,12 +178,13 @@ export const ChatScreen = ({
       try {
         console.log('Checking domain/app permissions...');
 
-        const settings = await apiGet(
+        const resSettings = await apiGet(
           `liveChat/${orgId}/${channelId}/getSettingConnector`,
           token
         );
-        setStyleSettings(settings);
-        setStyles(getDynamicStyles(settings.styles));
+        console.log('Settings received:', resSettings);
+        setSettings(resSettings);
+        setStyles(getDynamicStyles(resSettings.styles));
 
         const history = await apiGet(
           `liveChat/${orgId}/${channelId}/getChatHistory/${userId}`,
@@ -174,7 +231,7 @@ export const ChatScreen = ({
 
     const groupedMessages = messages.reduce(
       (acc, message) => {
-        const dateKey = new Date(message.timestamp).toLocaleDateString('en-CA'); // YYYY-MM-DD format for reliable sorting
+        const dateKey = new Date(message.timestamp).toLocaleDateString('en-CA'); // yyyy-MM-dd format for reliable sorting
         if (!acc[dateKey]) {
           acc[dateKey] = [];
         }
@@ -308,13 +365,27 @@ export const ChatScreen = ({
               animated: true,
             });
           }
-        }, 400);
+        }, 1000);
       }
     } catch (error) {
       console.error('Error scrolling to last section:', error);
     }
   }, [messageSections]);
 
+  const handleContentSizeChange = () => {
+    if (sectionListRef.current && messageSections.length > 0) {
+      const lastSectionIndex = messageSections.length - 1;
+      sectionListRef.current.scrollToLocation({
+        sectionIndex: lastSectionIndex,
+        itemIndex: messageSections[lastSectionIndex]?.data
+          ? messageSections[lastSectionIndex].data.length - 1
+          : 0,
+        viewPosition: 0,
+        animated: true,
+      });
+    }
+  };
+
   const handleScrollToIndexFailed = (info: {
     index: number;
     highestMeasuredFrameIndex: number;
@@ -334,15 +405,18 @@ export const ChatScreen = ({
     }
   };
 
-  const sendMessage = (messageBody: Omit<Message, 'sender' | 'timestamp'>) => {
-    if (!socketRef.current) return;
+  const handleSendText = () => {
+    if (inputText.trim() === '' || isSending) return;
+    setIsSending(true);
+
     const fullMessage: Message = {
-      ...messageBody,
+      type: 'text',
+      text: inputText.trim(),
       sender: 'user',
       timestamp: Date.now(),
-      type: messageBody.type || 'text',
     };
-    socketRef.current.emit(
+
+    socketRef.current?.emit(
       'sendMessage',
       {
         organizeId: orgId,
@@ -351,19 +425,12 @@ export const ChatScreen = ({
         message: fullMessage,
       },
       () => {
-        if (fullMessage.type === 'text') {
-          setInputText('');
-        }
+        setInputText('');
+        setIsSending(false);
       }
     );
   };
 
-  const handleSendText = () => {
-    if (inputText.trim()) {
-      sendMessage({ type: 'text', text: inputText.trim() });
-    }
-  };
-
   const handleSelectFile = async () => {
     try {
       const result = await pick({
@@ -373,33 +440,96 @@ export const ChatScreen = ({
       setSelectedFile(result[0]);
     } catch (err) {
       if ((err as any)?.code !== 'DOCUMENT_PICKER_CANCELED') {
-        Alert.alert(
-          'File-Picker Error',
-          'An error occurred during file selection.'
-        );
+        // Alert.alert(
+        //   'File-Picker Error',
+        //   'An error occurred during file selection.'
+        // );
       }
     }
   };
 
+  const MessageWithLinks = ({
+    text,
+    textStyle,
+    linkStyle,
+  }: {
+    text: string;
+    textStyle: object;
+    linkStyle: object;
+  }) => {
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    const parts = text.split(urlRegex);
+
+    return (
+      <Text style={textStyle}>
+        {parts.map((part, index) => {
+          if (part.match(urlRegex)) {
+            return (
+              <Text
+                key={index}
+                style={linkStyle}
+                onPress={() => Linking.openURL(part)}
+              >
+                {part}
+              </Text>
+            );
+          }
+          return <Text key={index}>{part}</Text>;
+        })}
+      </Text>
+    );
+  };
+
+  const openImageViewer = (tappedImageUrl: string) => {
+    const allImages = messages
+      .filter((msg) => msg.type === 'image' && msg.url)
+      .map((msg) => ({ url: msg.url! }));
+
+    const tappedIndex = allImages.findIndex(
+      (img) => img.url === tappedImageUrl
+    );
+
+    if (tappedIndex !== -1) {
+      setViewerImages(allImages);
+      setViewerIndex(tappedIndex);
+      setImageViewerVisible(true);
+    }
+  };
+
   const handleCancelUpload = () => {
+    if (isUploading) return;
     setSelectedFile(null);
   };
 
   const handleConfirmUpload = async () => {
-    if (!selectedFile) return;
+    if (!selectedFile || isUploading) return;
+    setIsUploading(true);
     try {
       const fileUrl = await uploadFile(selectedFile, orgId, channelId);
       const type = selectedFile.type?.startsWith('image/') ? 'image' : 'file';
-      sendMessage({
+      const messageBody: Omit<Message, 'sender' | 'timestamp'> = {
         type,
         fileName: selectedFile.name || 'file',
         url: fileUrl,
+      };
+      const fullMessage: Message = {
+        ...messageBody,
+        sender: 'user',
+        timestamp: Date.now(),
+        type,
+      };
+      socketRef.current?.emit('sendMessage', {
+        organizeId: orgId,
+        channelId: channelId,
+        userId: userId,
+        message: fullMessage,
       });
     } catch (error) {
       Alert.alert('Upload Error', 'Failed to upload the file.');
       console.error('Upload failed', error);
     } finally {
       setSelectedFile(null);
+      setIsUploading(false);
     }
   };
 
@@ -436,12 +566,17 @@ export const ChatScreen = ({
           item.sender === 'user' ? styles.userRow : styles.agentRow,
         ]}
       >
-        {item.sender === 'agent' && styleSettings?.styles?.styleLogoUrl && (
+        {item.sender === 'agent' && settings?.styles?.styleLogoUrl && (
           <Image
-            source={{ uri: styleSettings.styles.styleLogoUrl }}
+            source={{ uri: settings.styles.styleLogoUrl }}
             style={styles.avatar}
           />
         )}
+        {item.sender === 'user' && (
+          <Text style={styles.timestampText}>
+            {formatTimestamp(item.timestamp)}
+          </Text>
+        )}
         <View
           style={
             item.sender === 'agent'
@@ -449,9 +584,6 @@ export const ChatScreen = ({
               : styles.messageContainer
           }
         >
-          <Text style={styles.timestampText}>
-            {formatTimestamp(item.timestamp)}
-          </Text>
           <View
             style={[
               styles.messageBubble,
@@ -459,22 +591,24 @@ export const ChatScreen = ({
             ]}
           >
             {item.type === 'text' && (
-              <Text
-                style={
+              <MessageWithLinks
+                text={item.text || ''}
+                textStyle={
                   item.sender === 'user'
                     ? styles.customerChatText
                     : styles.agentChatText
                 }
-              >
-                {item.text}
-              </Text>
+                linkStyle={styles.linkTextStyle}
+              />
             )}
             {item.type === 'image' && (
-              <Image
-                source={{ uri: item.url }}
-                style={styles.imageMessage}
-                resizeMode="cover"
-              />
+              <TouchableOpacity onPress={() => openImageViewer(item.url!)}>
+                <Image
+                  source={{ uri: item.url }}
+                  style={styles.imageMessage}
+                  resizeMode="cover"
+                />
+              </TouchableOpacity>
             )}
             {item.type === 'file' && (
               <TouchableOpacity onPress={handleFilePress}>
@@ -491,6 +625,11 @@ export const ChatScreen = ({
               </TouchableOpacity>
             )}
           </View>
+          {item.sender === 'agent' && (
+            <Text style={styles.timestampText}>
+              {formatTimestamp(item.timestamp)}
+            </Text>
+          )}
         </View>
       </View>
     );
@@ -504,36 +643,54 @@ export const ChatScreen = ({
     );
   }
 
-  // const agentProfile = {
-  //   name: styleSettings?.name,
-  //   avatarUrl: styleSettings?.styleLogoUrl,
-  // };
-
   return (
     <SafeAreaView style={styles.safeArea}>
-      <View style={styles.header}>
-        <View style={styles.headerProfile}>
-          {styleSettings?.styles?.styleLogoUrl && (
-            <Image
-              source={{ uri: styleSettings.styles.styleLogoUrl }}
-              style={styles.headerAvatar}
-            />
+      <Modal visible={isImageViewerVisible} transparent={true}>
+        <ImageViewer
+          imageUrls={viewerImages}
+          index={viewerIndex}
+          onCancel={() => setImageViewerVisible(false)}
+          enableSwipeDown
+          renderHeader={() => (
+            <TouchableOpacity
+              style={styles.imageViewerCloseButton}
+              onPress={() => setImageViewerVisible(false)}
+            >
+              <Text style={styles.imageViewerCloseButtonText}>✕</Text>
+            </TouchableOpacity>
           )}
-          <Text style={styles.headerTitle}>
-            {styleSettings?.styles.name || 'Live Chat'}
-          </Text>
+        />
+      </Modal>
+      {customHeader !== undefined ? (
+        customHeader
+      ) : (
+        <View style={styles.header}>
+          <View style={styles.headerProfile}>
+            {settings?.styles?.styleLogoUrl && (
+              <Image
+                source={{ uri: settings.styles.styleLogoUrl }}
+                style={styles.headerAvatar}
+              />
+            )}
+            <Text style={styles.headerTitle}>
+              {settings?.styles.name || 'Live Chat'}
+            </Text>
+          </View>
+          <TouchableOpacity onPress={onClose}>
+            <Text style={styles.closeButtonText}>✕</Text>
+          </TouchableOpacity>
         </View>
-        <TouchableOpacity onPress={onClose}>
-          <Text style={styles.closeButtonText}>✕</Text>
-        </TouchableOpacity>
-      </View>
-      <KeyboardAvoidingView style={styles.container}>
+      )}
+      <KeyboardAvoidingView
+        style={styles.container}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
         {chatPhase === 'pre-chat' ? (
           <PreChatForm
             onSubmit={() => setChatPhase('chatting')}
             // agentProfile={agentProfile}
             // styles={styles}
-            headerColor={styleSettings?.styles?.styleHeadColor}
+            headerColor={settings?.styles?.styleHeadColor}
           />
         ) : (
           <>
@@ -549,6 +706,7 @@ export const ChatScreen = ({
               keyExtractor={(item) => item.timestamp.toString()}
               style={styles.messageList}
               onScrollToIndexFailed={handleScrollToIndexFailed}
+              onContentSizeChange={handleContentSizeChange}
             />
             <View style={styles.inputContainer}>
               {selectedFile ? (
@@ -560,18 +718,30 @@ export const ChatScreen = ({
                     </Text>
                   </View>
                   <View style={styles.buttonRow}>
-                    <TouchableOpacity
-                      style={[styles.actionButton, styles.uploadButton]}
-                      onPress={handleConfirmUpload}
-                    >
-                      <Text style={styles.uploadButtonText}>Upload a file</Text>
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                      style={[styles.actionButton, styles.cancelButton]}
-                      onPress={handleCancelUpload}
-                    >
-                      <Text style={styles.cancelButtonText}>Cancel</Text>
-                    </TouchableOpacity>
+                    {isUploading ? (
+                      <ActivityIndicator
+                        color={styles.uploadButton.backgroundColor}
+                      />
+                    ) : (
+                      <>
+                        <TouchableOpacity
+                          style={[styles.actionButton, styles.uploadButton]}
+                          onPress={handleConfirmUpload}
+                          disabled={isUploading}
+                        >
+                          <Text style={styles.uploadButtonText}>
+                            Upload a file
+                          </Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                          style={[styles.actionButton, styles.cancelButton]}
+                          onPress={handleCancelUpload}
+                          disabled={isUploading}
+                        >
+                          <Text style={styles.cancelButtonText}>Cancel</Text>
+                        </TouchableOpacity>
+                      </>
+                    )}
                   </View>
                 </View>
               ) : (
@@ -601,12 +771,25 @@ export const ChatScreen = ({
                   />
                   <TouchableOpacity
                     onPress={handleSendText}
-                    style={styles.sendButton}
+                    style={[
+                      styles.sendButton,
+                      isSending && styles.disabledButton,
+                    ]}
+                    disabled={isSending}
                   >
-                    <SendIcon
-                      size={22}
-                      color={styleSettings?.styles?.styleTextColor || '#FFFFFF'}
-                    />
+                    {isSending ? (
+                      <ActivityIndicator size="small" color="#FFFFFF" />
+                    ) : (
+                      <SendIcon
+                        size={40}
+                        backgroundColor={
+                          settings?.styles?.styleHeadColor || '#3761DF'
+                        }
+                        iconColor={
+                          settings?.styles?.styleTextColor || '#FFFFFF'
+                        }
+                      />
+                    )}
                   </TouchableOpacity>
                 </View>
               )}
@@ -658,32 +841,36 @@ const getDynamicStyles = (settingStyle: any = {}) => {
       color: settingStyle?.styleTextColor || '#FFFFFF',
       fontWeight: 'bold',
     },
-    messageList: { flex: 1, paddingHorizontal: 10 },
+    messageList: { flex: 1, paddingHorizontal: 8 },
     messageRow: {
       flexDirection: 'row',
-      alignItems: 'flex-end',
+      alignItems: 'flex-start',
       marginVertical: 5,
     },
     agentRow: { justifyContent: 'flex-start' },
     userRow: { justifyContent: 'flex-end' },
     messageContainer: {
-      maxWidth: '80%',
-      alignItems: 'flex-start',
+      maxWidth: screenWidth * 0.6,
+      flexWrap: 'wrap',
       flexDirection: 'row',
-      // marginBottom: 10,
+      alignItems: 'flex-end',
     },
     messageAgentContainer: {
-      maxWidth: '80%',
-      alignItems: 'flex-start',
-      flexDirection: 'row-reverse',
-      marginVertical: 0,
+      maxWidth: screenWidth * 0.6,
+      alignItems: 'flex-end',
+      flexDirection: 'row',
+    },
+    avatar: {
+      width: 36,
+      height: 36,
+      borderRadius: 20,
+      marginRight: 6,
+      alignSelf: 'flex-end',
     },
-    avatar: { width: 36, height: 36, borderRadius: 20, marginRight: 8 },
     messageBubble: {
       paddingHorizontal: 8,
       paddingVertical: 8,
       borderRadius: 12,
-      // width: '80%',
     },
     agentBubble: {
       backgroundColor: settingStyle.styleAgentColor || '#E0E0E0',
@@ -698,16 +885,14 @@ const getDynamicStyles = (settingStyle: any = {}) => {
       color: settingStyle.styleAgentTextColor || '#000000',
     },
     fileLink: {
+      maxWidth: screenWidth * 0.6,
       textDecorationLine: 'underline',
-      elevation: 4,
-      width: screenWidth * 0.6,
     },
     timestampText: {
       fontSize: 12,
       color: '#888',
-      marginTop: 5,
+      marginHorizontal: 4,
       alignSelf: 'flex-end',
-      marginHorizontal: 8,
     },
     datePartition: {
       alignSelf: 'center',
@@ -735,12 +920,14 @@ const getDynamicStyles = (settingStyle: any = {}) => {
     },
     input: {
       flex: 1,
-      height: 42,
-      backgroundColor: '#F0F0F0',
+      height: 43,
+      backgroundColor: '#FFFFFF',
       borderRadius: 22.5,
       paddingHorizontal: 15,
       fontSize: 16,
       marginHorizontal: 10,
+      borderColor: '#EAECEC',
+      borderWidth: 1,
     },
     attachmentButton: { padding: 5 },
     sendButton: {
@@ -753,6 +940,13 @@ const getDynamicStyles = (settingStyle: any = {}) => {
       justifyContent: 'center',
       alignItems: 'center',
     },
+    disabledButton: {
+      opacity: 0.5,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingRight: 0,
+      paddingTop: 0,
+    },
     uploadPreviewContainer: {
       alignItems: 'center',
     },
@@ -801,29 +995,29 @@ const getDynamicStyles = (settingStyle: any = {}) => {
       fontSize: 16,
     },
     plusIconContainer: {
-      width: 24,
-      height: 24,
+      width: 10,
+      height: 18,
       justifyContent: 'center',
       alignItems: 'center',
     },
     plusIconBar: {
       position: 'absolute',
-      backgroundColor: '#8A8A8A',
+      backgroundColor: '#525E62',
     },
     plusIconBarHorizontal: {
-      width: 20,
+      width: 18,
       height: 2,
       borderRadius: 1,
     },
     plusIconBarVertical: {
       width: 2,
-      height: 20,
+      height: 18,
       borderRadius: 1,
     },
     imageMessage: {
       width: 200,
       height: 200,
-      borderRadius: 10,
+      borderRadius: 12,
     },
     formContainer: {
       // flex: 1,
@@ -910,5 +1104,22 @@ const getDynamicStyles = (settingStyle: any = {}) => {
       fontSize: 12,
       fontWeight: 'bold',
     },
+    imageViewerCloseButton: {
+      position: 'absolute',
+      top: 20,
+      right: 20,
+      zIndex: 20,
+      padding: 10,
+    },
+    imageViewerCloseButtonText: {
+      color: 'white',
+      fontSize: 20,
+      zIndex: 20,
+      fontWeight: 'bold',
+    },
+    linkTextStyle: {
+      color: '#0066CC',
+      textDecorationLine: 'underline',
+    },
   });
 };