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

package/lib/module/ChatScreen.js

@@ -1,38 +1,58 @@
 "use strict";
 
 // src/ChatScreen.tsx
-import { useState, useEffect, useRef, useMemo } from 'react';
-import { View, Text, TextInput, TouchableOpacity, SectionList, StyleSheet, SafeAreaView, KeyboardAvoidingView, Platform, Image, ActivityIndicator, Alert, Linking, Dimensions } from 'react-native';
+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 io from 'socket.io-client';
 import { pick, types } from '@react-native-documents/picker';
 import { ConnectXMobileSdk } from 'connect-x-react-native-sdk';
 import { apiGet, uploadFile, BASE_URL_LIVE_CHAT, apiPost } from "./api.js";
-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';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const SendIcon = ({
-  color,
-  size
-}) => /*#__PURE__*/_jsx(Svg, {
+  size,
+  backgroundColor,
+  iconColor
+}) => /*#__PURE__*/_jsxs(Svg, {
   width: size,
   height: size,
-  viewBox: "0 0 24 24",
+  viewBox: "0 0 32 32",
   fill: "none",
-  children: /*#__PURE__*/_jsx(Path, {
-    d: "M22 2L15 22L11 13L2 9L22 2Z",
-    stroke: color,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })
+  children: [/*#__PURE__*/_jsx(Rect, {
+    width: 32,
+    height: 32,
+    rx: 16,
+    fill: backgroundColor
+  }), /*#__PURE__*/_jsx(Defs, {
+    children: /*#__PURE__*/_jsx(ClipPath, {
+      id: "clip0_4087_14448",
+      children: /*#__PURE__*/_jsx(Rect, {
+        width: 20,
+        height: 20,
+        fill: "white",
+        transform: "translate(6 6)"
+      })
+    })
+  }), /*#__PURE__*/_jsx(G, {
+    clipPath: "url(#clip0_4087_14448)",
+    children: /*#__PURE__*/_jsx(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
+    })
+  })]
 });
-
 // Component หลักของหน้าแชท
 export const ChatScreen = ({
   onClose,
   token,
   orgId,
-  channelId
+  channelId,
+  externalValue,
+  customHeader
 }) => {
   const [messages, setMessages] = useState([]);
   const [inputText, setInputText] = useState('');
@@ -40,15 +60,20 @@ export const ChatScreen = ({
   const socketRef = useRef(null);
   const [userId, setUserId] = useState(null);
   const [selectedFile, setSelectedFile] = useState(null);
-  const [styleSettings, setStyleSettings] = useState(null);
+  const [settings, setSettings] = useState(null);
   const [styles, setStyles] = useState({});
   const sectionListRef = useRef(null);
   const [chatPhase, setChatPhase] = useState('chatting');
+  const [isSending, setIsSending] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isImageViewerVisible, setImageViewerVisible] = useState(false);
+  const [viewerImages, setViewerImages] = useState([]);
+  const [viewerIndex, setViewerIndex] = useState(0);
   useEffect(() => {
     const findCustomer = async unknownId => {
       try {
         const res = await apiPost(`liveChat/${orgId}/${channelId}/setLiveChatConnector`, {
-          externalValue: "Siwakorn'",
+          externalValue: externalValue,
           //'ปุ้นซู่ซ่า', //sdf0001111111111  //78e839c38397b8cac97437d17b1c91b568a5adb4
           userId: unknownId
         }, token);
@@ -59,11 +84,15 @@ 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);
@@ -73,6 +102,25 @@ 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();
     }
@@ -82,9 +130,10 @@ export const ChatScreen = ({
       if (!userId) return;
       try {
         console.log('Checking domain/app permissions...');
-        const settings = await apiGet(`liveChat/${orgId}/${channelId}/getSettingConnector`, token);
-        setStyleSettings(settings);
-        setStyles(getDynamicStyles(settings.styles));
+        const resSettings = await apiGet(`liveChat/${orgId}/${channelId}/getSettingConnector`, token);
+        console.log('Settings received:', resSettings);
+        setSettings(resSettings);
+        setStyles(getDynamicStyles(resSettings.styles));
         const history = await apiGet(`liveChat/${orgId}/${channelId}/getChatHistory/${userId}`, token);
         console.log('Chat history:', history);
         setMessages(history);
@@ -121,7 +170,7 @@ export const ChatScreen = ({
   const messageSections = useMemo(() => {
     if (!messages || messages.length === 0) return [];
     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] = [];
       }
@@ -246,12 +295,23 @@ 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 => {
     console.warn('Scroll to index failed:', info);
     // As a fallback, scroll to the last rendered item, which is a safer option.
@@ -266,33 +326,25 @@ export const ChatScreen = ({
       console.log('Fallback scroll failed:', error);
     }
   };
-  const sendMessage = messageBody => {
-    if (!socketRef.current) return;
+  const handleSendText = () => {
+    if (inputText.trim() === '' || isSending) return;
+    setIsSending(true);
     const fullMessage = {
-      ...messageBody,
+      type: 'text',
+      text: inputText.trim(),
       sender: 'user',
-      timestamp: Date.now(),
-      type: messageBody.type || 'text'
+      timestamp: Date.now()
     };
-    socketRef.current.emit('sendMessage', {
+    socketRef.current?.emit('sendMessage', {
       organizeId: orgId,
       channelId: channelId,
       userId: userId,
       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({
@@ -302,28 +354,80 @@ export const ChatScreen = ({
       setSelectedFile(result[0]);
     } catch (err) {
       if (err?.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
+  }) => {
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    const parts = text.split(urlRegex);
+    return /*#__PURE__*/_jsx(Text, {
+      style: textStyle,
+      children: parts.map((part, index) => {
+        if (part.match(urlRegex)) {
+          return /*#__PURE__*/_jsx(Text, {
+            style: linkStyle,
+            onPress: () => Linking.openURL(part),
+            children: part
+          }, index);
+        }
+        return /*#__PURE__*/_jsx(Text, {
+          children: part
+        }, index);
+      })
+    });
+  };
+  const openImageViewer = tappedImageUrl => {
+    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 = {
         type,
         fileName: selectedFile.name || 'file',
         url: fileUrl
+      };
+      const fullMessage = {
+        ...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);
     }
   };
   const formatTimestamp = timestamp => {
@@ -352,27 +456,31 @@ export const ChatScreen = ({
     };
     return /*#__PURE__*/_jsxs(View, {
       style: [styles.messageRow, item.sender === 'user' ? styles.userRow : styles.agentRow],
-      children: [item.sender === 'agent' && styleSettings?.styles?.styleLogoUrl && /*#__PURE__*/_jsx(Image, {
+      children: [item.sender === 'agent' && settings?.styles?.styleLogoUrl && /*#__PURE__*/_jsx(Image, {
         source: {
-          uri: styleSettings.styles.styleLogoUrl
+          uri: settings.styles.styleLogoUrl
         },
         style: styles.avatar
+      }), item.sender === 'user' && /*#__PURE__*/_jsx(Text, {
+        style: styles.timestampText,
+        children: formatTimestamp(item.timestamp)
       }), /*#__PURE__*/_jsxs(View, {
         style: item.sender === 'agent' ? styles.messageAgentContainer : styles.messageContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.timestampText,
-          children: formatTimestamp(item.timestamp)
-        }), /*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsxs(View, {
           style: [styles.messageBubble, item.sender === 'user' ? styles.userBubble : styles.agentBubble],
-          children: [item.type === 'text' && /*#__PURE__*/_jsx(Text, {
-            style: item.sender === 'user' ? styles.customerChatText : styles.agentChatText,
-            children: item.text
-          }), item.type === 'image' && /*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: item.url
-            },
-            style: styles.imageMessage,
-            resizeMode: "cover"
+          children: [item.type === 'text' && /*#__PURE__*/_jsx(MessageWithLinks, {
+            text: item.text || '',
+            textStyle: item.sender === 'user' ? styles.customerChatText : styles.agentChatText,
+            linkStyle: styles.linkTextStyle
+          }), item.type === 'image' && /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => openImageViewer(item.url),
+            children: /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: item.url
+              },
+              style: styles.imageMessage,
+              resizeMode: "cover"
+            })
           }), item.type === 'file' && /*#__PURE__*/_jsx(TouchableOpacity, {
             onPress: handleFilePress,
             children: /*#__PURE__*/_jsx(Text, {
@@ -380,6 +488,9 @@ export const ChatScreen = ({
               children: item.fileName
             })
           })]
+        }), item.sender === 'agent' && /*#__PURE__*/_jsx(Text, {
+          style: styles.timestampText,
+          children: formatTimestamp(item.timestamp)
         })]
       })]
     });
@@ -397,26 +508,37 @@ export const ChatScreen = ({
       })
     });
   }
-
-  // const agentProfile = {
-  //   name: styleSettings?.name,
-  //   avatarUrl: styleSettings?.styleLogoUrl,
-  // };
-
   return /*#__PURE__*/_jsxs(SafeAreaView, {
     style: styles.safeArea,
-    children: [/*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(Modal, {
+      visible: isImageViewerVisible,
+      transparent: true,
+      children: /*#__PURE__*/_jsx(ImageViewer, {
+        imageUrls: viewerImages,
+        index: viewerIndex,
+        onCancel: () => setImageViewerVisible(false),
+        enableSwipeDown: true,
+        renderHeader: () => /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.imageViewerCloseButton,
+          onPress: () => setImageViewerVisible(false),
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.imageViewerCloseButtonText,
+            children: "\u2715"
+          })
+        })
+      })
+    }), customHeader !== undefined ? customHeader : /*#__PURE__*/_jsxs(View, {
       style: styles.header,
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.headerProfile,
-        children: [styleSettings?.styles?.styleLogoUrl && /*#__PURE__*/_jsx(Image, {
+        children: [settings?.styles?.styleLogoUrl && /*#__PURE__*/_jsx(Image, {
           source: {
-            uri: styleSettings.styles.styleLogoUrl
+            uri: settings.styles.styleLogoUrl
           },
           style: styles.headerAvatar
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.headerTitle,
-          children: styleSettings?.styles.name || 'Live Chat'
+          children: settings?.styles.name || 'Live Chat'
         })]
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: onClose,
@@ -427,12 +549,13 @@ export const ChatScreen = ({
       })]
     }), /*#__PURE__*/_jsx(KeyboardAvoidingView, {
       style: styles.container,
+      behavior: Platform.OS === 'ios' ? 'padding' : undefined,
       children: chatPhase === 'pre-chat' ? /*#__PURE__*/_jsx(PreChatForm, {
         onSubmit: () => setChatPhase('chatting')
         // agentProfile={agentProfile}
         // styles={styles}
         ,
-        headerColor: styleSettings?.styles?.styleHeadColor
+        headerColor: settings?.styles?.styleHeadColor
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(SectionList, {
           ref: sectionListRef,
@@ -451,7 +574,8 @@ export const ChatScreen = ({
           }),
           keyExtractor: item => item.timestamp.toString(),
           style: styles.messageList,
-          onScrollToIndexFailed: handleScrollToIndexFailed
+          onScrollToIndexFailed: handleScrollToIndexFailed,
+          onContentSizeChange: handleContentSizeChange
         }), /*#__PURE__*/_jsx(View, {
           style: styles.inputContainer,
           children: selectedFile ? /*#__PURE__*/_jsxs(View, {
@@ -468,23 +592,29 @@ export const ChatScreen = ({
                 numberOfLines: 1,
                 children: selectedFile.name
               })]
-            }), /*#__PURE__*/_jsxs(View, {
+            }), /*#__PURE__*/_jsx(View, {
               style: styles.buttonRow,
-              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-                style: [styles.actionButton, styles.uploadButton],
-                onPress: handleConfirmUpload,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.uploadButtonText,
-                  children: "Upload a file"
-                })
-              }), /*#__PURE__*/_jsx(TouchableOpacity, {
-                style: [styles.actionButton, styles.cancelButton],
-                onPress: handleCancelUpload,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.cancelButtonText,
-                  children: "Cancel"
-                })
-              })]
+              children: isUploading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                color: styles.uploadButton.backgroundColor
+              }) : /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                  style: [styles.actionButton, styles.uploadButton],
+                  onPress: handleConfirmUpload,
+                  disabled: isUploading,
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: styles.uploadButtonText,
+                    children: "Upload a file"
+                  })
+                }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                  style: [styles.actionButton, styles.cancelButton],
+                  onPress: handleCancelUpload,
+                  disabled: isUploading,
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: styles.cancelButtonText,
+                    children: "Cancel"
+                  })
+                })]
+              })
             })]
           }) : /*#__PURE__*/_jsxs(View, {
             style: styles.normalInputContainer,
@@ -507,10 +637,15 @@ export const ChatScreen = ({
               placeholderTextColor: "#9E9E9E"
             }), /*#__PURE__*/_jsx(TouchableOpacity, {
               onPress: handleSendText,
-              style: styles.sendButton,
-              children: /*#__PURE__*/_jsx(SendIcon, {
-                size: 22,
-                color: styleSettings?.styles?.styleTextColor || '#FFFFFF'
+              style: [styles.sendButton, isSending && styles.disabledButton],
+              disabled: isSending,
+              children: isSending ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                size: "small",
+                color: "#FFFFFF"
+              }) : /*#__PURE__*/_jsx(SendIcon, {
+                size: 40,
+                backgroundColor: settings?.styles?.styleHeadColor || '#3761DF',
+                iconColor: settings?.styles?.styleTextColor || '#FFFFFF'
               })
             })]
           })
@@ -568,11 +703,11 @@ const getDynamicStyles = (settingStyle = {}) => {
     },
     messageList: {
       flex: 1,
-      paddingHorizontal: 10
+      paddingHorizontal: 8
     },
     messageRow: {
       flexDirection: 'row',
-      alignItems: 'flex-end',
+      alignItems: 'flex-start',
       marginVertical: 5
     },
     agentRow: {
@@ -582,28 +717,27 @@ const getDynamicStyles = (settingStyle = {}) => {
       justifyContent: 'flex-end'
     },
     messageContainer: {
-      maxWidth: '80%',
-      alignItems: 'flex-start',
-      flexDirection: 'row'
-      // marginBottom: 10,
+      maxWidth: screenWidth * 0.6,
+      flexWrap: 'wrap',
+      flexDirection: 'row',
+      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: 8
+      marginRight: 6,
+      alignSelf: 'flex-end'
     },
     messageBubble: {
       paddingHorizontal: 8,
       paddingVertical: 8,
       borderRadius: 12
-      // width: '80%',
     },
     agentBubble: {
       backgroundColor: settingStyle.styleAgentColor || '#E0E0E0'
@@ -618,16 +752,14 @@ const getDynamicStyles = (settingStyle = {}) => {
       color: settingStyle.styleAgentTextColor || '#000000'
     },
     fileLink: {
-      textDecorationLine: 'underline',
-      elevation: 4,
-      width: screenWidth * 0.6
+      maxWidth: screenWidth * 0.6,
+      textDecorationLine: 'underline'
     },
     timestampText: {
       fontSize: 12,
       color: '#888',
-      marginTop: 5,
-      alignSelf: 'flex-end',
-      marginHorizontal: 8
+      marginHorizontal: 4,
+      alignSelf: 'flex-end'
     },
     datePartition: {
       alignSelf: 'center',
@@ -655,12 +787,14 @@ const getDynamicStyles = (settingStyle = {}) => {
     },
     input: {
       flex: 1,
-      height: 42,
-      backgroundColor: '#F0F0F0',
+      height: 43,
+      backgroundColor: '#FFFFFF',
       borderRadius: 22.5,
       paddingHorizontal: 15,
       fontSize: 16,
-      marginHorizontal: 10
+      marginHorizontal: 10,
+      borderColor: '#EAECEC',
+      borderWidth: 1
     },
     attachmentButton: {
       padding: 5
@@ -675,6 +809,13 @@ const getDynamicStyles = (settingStyle = {}) => {
       justifyContent: 'center',
       alignItems: 'center'
     },
+    disabledButton: {
+      opacity: 0.5,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingRight: 0,
+      paddingTop: 0
+    },
     uploadPreviewContainer: {
       alignItems: 'center'
     },
@@ -723,29 +864,29 @@ const getDynamicStyles = (settingStyle = {}) => {
       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,
@@ -828,6 +969,23 @@ const getDynamicStyles = (settingStyle = {}) => {
       color: '#fff',
       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'
     }
   });
 };