connect-x-reactnative-livechat-sdk 0.2.0

package/lib/module/ChatScreen.js

@@ -0,0 +1,834 @@
+"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 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 hexToRgba from 'hex-to-rgba';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const SendIcon = ({
+  color,
+  size
+}) => /*#__PURE__*/_jsx(Svg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: /*#__PURE__*/_jsx(Path, {
+    d: "M22 2L15 22L11 13L2 9L22 2Z",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })
+});
+
+// Component หลักของหน้าแชท
+export const ChatScreen = ({
+  onClose,
+  token,
+  orgId,
+  channelId
+}) => {
+  const [messages, setMessages] = useState([]);
+  const [inputText, setInputText] = useState('');
+  const [loading, setLoading] = useState(true);
+  const socketRef = useRef(null);
+  const [userId, setUserId] = useState(null);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [styleSettings, setStyleSettings] = useState(null);
+  const [styles, setStyles] = useState({});
+  const sectionListRef = useRef(null);
+  const [chatPhase, setChatPhase] = useState('chatting');
+  useEffect(() => {
+    const findCustomer = async unknownId => {
+      try {
+        const res = await apiPost(`liveChat/${orgId}/${channelId}/setLiveChatConnector`, {
+          externalValue: "Siwakorn'",
+          //'ปุ้นซู่ซ่า', //sdf0001111111111  //78e839c38397b8cac97437d17b1c91b568a5adb4
+          userId: unknownId
+        }, token);
+        console.log('Found customer:', res);
+        if (res) {
+          setUserId(res?.userId);
+        } else {
+          // initializeUserId();
+        }
+      } catch (error) {
+        // initializeUserId();
+        console.log('Error finding customer:', error);
+      }
+    };
+    const initializeUserId = async () => {
+      try {
+        const res = await ConnectXMobileSdk.getUnknownId();
+        console.log('Generated userId:', res);
+        // setUserId(res);
+        findCustomer(res);
+      } catch (error) {
+        console.log('Error generating userId:', error);
+      }
+    };
+    if (!userId) {
+      initializeUserId();
+    }
+  });
+  useEffect(() => {
+    const initializeChat = async () => {
+      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 history = await apiGet(`liveChat/${orgId}/${channelId}/getChatHistory/${userId}`, token);
+        console.log('Chat history:', history);
+        setMessages(history);
+        const socket = io(`${BASE_URL_LIVE_CHAT}/liveChat`, {
+          transports: ['websocket']
+        });
+        socketRef.current = socket;
+        socket.on('connect', () => {
+          console.log('Socket connected!');
+          socket.emit('joinRoom', {
+            userId,
+            socketId: socket.id
+          });
+        });
+        socket.on('receiveMessage', payload => {
+          console.log('Received message:', payload.message);
+          setMessages(prev => [...prev, payload.message]);
+        });
+        socket.on('disconnect', reason => {
+          console.log(`Socket disconnected: ${reason}`);
+        });
+      } catch (error) {
+        console.log('Initialization failed:', error);
+        // Alert.alert('Error', 'Could not initialize chat.');
+      } finally {
+        setLoading(false);
+      }
+    };
+    initializeChat();
+    return () => {
+      socketRef.current?.disconnect();
+    };
+  }, [userId, orgId, channelId, token]);
+  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
+      if (!acc[dateKey]) {
+        acc[dateKey] = [];
+      }
+      acc[dateKey].push(message);
+      return acc;
+    }, {});
+    return Object.keys(groupedMessages).sort().map(date => ({
+      title: new Date(date).toLocaleDateString('en-GB', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+      }),
+      data: groupedMessages[date] ?? []
+    }));
+  }, [messages]);
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const PreChatForm = ({
+    onSubmit,
+    headerColor
+  }) => {
+    const [formData, setFormData] = useState({});
+    const [consentChecked, setConsentChecked] = useState(false);
+    const handleInputChange = (field, value) => {
+      setFormData(prev => ({
+        ...prev,
+        [field]: value
+      }));
+    };
+    const handleStartChat = () => {
+      if (!consentChecked) {
+        Alert.alert('Consent Required', 'Please click the consent checkbox to continue.');
+        return;
+      }
+      onSubmit(formData);
+    };
+    return /*#__PURE__*/_jsxs(SafeAreaView, {
+      style: styles.safeArea,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.formContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.formWelcomeText,
+          children: "Hello there! Are you looking for an automation program in branding for your product?"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.formInputContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.formLabel,
+            children: "First Name"
+          }), /*#__PURE__*/_jsx(TextInput, {
+            style: styles.formInput,
+            placeholder: "First Name",
+            placeholderTextColor: '#BBC1C3',
+            onChangeText: text => handleInputChange('firstName', text)
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.formInputContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.formLabel,
+            children: "Lorem"
+          }), /*#__PURE__*/_jsx(TextInput, {
+            style: styles.formInput,
+            placeholder: "Lorem",
+            placeholderTextColor: '#BBC1C3',
+            onChangeText: text => handleInputChange('lorem', text)
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.consentContainer,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => setConsentChecked(!consentChecked),
+          style: [styles.checkboxBase, {
+            backgroundColor: consentChecked ? '#3761DF' : '#fff'
+          }],
+          accessibilityRole: "checkbox",
+          accessibilityState: {
+            checked: consentChecked
+          },
+          children: consentChecked && /*#__PURE__*/_jsx(Text, {
+            style: styles.checkmark,
+            children: "\u2713"
+          })
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.consentText,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: {
+              color: 'red'
+            },
+            children: "*"
+          }), " Click", ' ', /*#__PURE__*/_jsx(Text, {
+            style: styles.consentLink,
+            children: "Consent"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.formFooter,
+        children: /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.startButton, {
+            backgroundColor: headerColor
+          }],
+          onPress: handleStartChat,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.startButtonText,
+            children: "Start Chat"
+          })
+        })
+      })]
+    });
+  };
+  useEffect(() => {
+    console.log('Message sections updated:', messageSections);
+    try {
+      if (sectionListRef.current && messageSections.length > 0) {
+        setTimeout(() => {
+          const lastSectionIndex = messageSections.length - 1;
+          const lastSection = messageSections[lastSectionIndex];
+          console.log('Scrolling to last section:', lastSectionIndex, lastSection);
+          if (lastSection && lastSection?.data && lastSection?.data?.length > 0) {
+            sectionListRef.current?.scrollToLocation({
+              sectionIndex: lastSectionIndex,
+              itemIndex: lastSection?.data?.length - 1,
+              viewPosition: 0,
+              animated: true
+            });
+          }
+        }, 400);
+      }
+    } catch (error) {
+      console.error('Error scrolling to last section:', error);
+    }
+  }, [messageSections]);
+  const handleScrollToIndexFailed = info => {
+    console.warn('Scroll to index failed:', info);
+    // As a fallback, scroll to the last rendered item, which is a safer option.
+    try {
+      sectionListRef.current?.scrollToLocation({
+        sectionIndex: info.highestMeasuredFrameIndex,
+        itemIndex: 0,
+        viewPosition: 0,
+        animated: false
+      });
+    } catch (error) {
+      console.log('Fallback scroll failed:', error);
+    }
+  };
+  const sendMessage = messageBody => {
+    if (!socketRef.current) return;
+    const fullMessage = {
+      ...messageBody,
+      sender: 'user',
+      timestamp: Date.now(),
+      type: messageBody.type || 'text'
+    };
+    socketRef.current.emit('sendMessage', {
+      organizeId: orgId,
+      channelId: channelId,
+      userId: userId,
+      message: fullMessage
+    }, () => {
+      if (fullMessage.type === 'text') {
+        setInputText('');
+      }
+    });
+  };
+  const handleSendText = () => {
+    if (inputText.trim()) {
+      sendMessage({
+        type: 'text',
+        text: inputText.trim()
+      });
+    }
+  };
+  const handleSelectFile = async () => {
+    try {
+      const result = await pick({
+        type: [types.images, types.doc, types.pdf],
+        allowMultiSelection: false
+      });
+      setSelectedFile(result[0]);
+    } catch (err) {
+      if (err?.code !== 'DOCUMENT_PICKER_CANCELED') {
+        Alert.alert('File-Picker Error', 'An error occurred during file selection.');
+      }
+    }
+  };
+  const handleCancelUpload = () => {
+    setSelectedFile(null);
+  };
+  const handleConfirmUpload = async () => {
+    if (!selectedFile) return;
+    try {
+      const fileUrl = await uploadFile(selectedFile, orgId, channelId);
+      const type = selectedFile.type?.startsWith('image/') ? 'image' : 'file';
+      sendMessage({
+        type,
+        fileName: selectedFile.name || 'file',
+        url: fileUrl
+      });
+    } catch (error) {
+      Alert.alert('Upload Error', 'Failed to upload the file.');
+      console.error('Upload failed', error);
+    } finally {
+      setSelectedFile(null);
+    }
+  };
+  const formatTimestamp = timestamp => {
+    const now = Date.now();
+    const messageTime = new Date(timestamp).getTime();
+    const differenceInSeconds = (now - messageTime) / 1000;
+    if (differenceInSeconds < 60) {
+      return 'Just now';
+    }
+    return new Date(timestamp).toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
+  };
+  const renderMessage = ({
+    item
+  }) => {
+    const handleFilePress = () => {
+      if (item.url) {
+        Linking.openURL(item.url).catch(err => {
+          console.log('Failed to open URL:', err);
+          // Alert.alert('Cannot open file');
+        });
+      }
+    };
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.messageRow, item.sender === 'user' ? styles.userRow : styles.agentRow],
+      children: [item.sender === 'agent' && styleSettings?.styles?.styleLogoUrl && /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: styleSettings.styles.styleLogoUrl
+        },
+        style: styles.avatar
+      }), /*#__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, {
+          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"
+          }), item.type === 'file' && /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: handleFilePress,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.fileLink, item.sender === 'user' ? styles.customerChatText : styles.agentChatText],
+              children: item.fileName
+            })
+          })]
+        })]
+      })]
+    });
+  };
+  if (loading) {
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "large",
+        color: '#3761DF'
+      })
+    });
+  }
+
+  // const agentProfile = {
+  //   name: styleSettings?.name,
+  //   avatarUrl: styleSettings?.styleLogoUrl,
+  // };
+
+  return /*#__PURE__*/_jsxs(SafeAreaView, {
+    style: styles.safeArea,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.headerProfile,
+        children: [styleSettings?.styles?.styleLogoUrl && /*#__PURE__*/_jsx(Image, {
+          source: {
+            uri: styleSettings.styles.styleLogoUrl
+          },
+          style: styles.headerAvatar
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.headerTitle,
+          children: styleSettings?.styles.name || 'Live Chat'
+        })]
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onClose,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.closeButtonText,
+          children: "\u2715"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      style: styles.container,
+      children: chatPhase === 'pre-chat' ? /*#__PURE__*/_jsx(PreChatForm, {
+        onSubmit: () => setChatPhase('chatting')
+        // agentProfile={agentProfile}
+        // styles={styles}
+        ,
+        headerColor: styleSettings?.styles?.styleHeadColor
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(SectionList, {
+          ref: sectionListRef,
+          sections: messageSections,
+          renderItem: renderMessage,
+          renderSectionHeader: ({
+            section: {
+              title
+            }
+          }) => /*#__PURE__*/_jsx(View, {
+            style: styles.datePartition,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.datePartitionText,
+              children: title
+            })
+          }),
+          keyExtractor: item => item.timestamp.toString(),
+          style: styles.messageList,
+          onScrollToIndexFailed: handleScrollToIndexFailed
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.inputContainer,
+          children: selectedFile ? /*#__PURE__*/_jsxs(View, {
+            style: styles.uploadPreviewContainer,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.fileInfoContainer,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: {
+                  fontSize: 20
+                },
+                children: "\uD83D\uDCCE"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.fileNameText,
+                numberOfLines: 1,
+                children: selectedFile.name
+              })]
+            }), /*#__PURE__*/_jsxs(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"
+                })
+              })]
+            })]
+          }) : /*#__PURE__*/_jsxs(View, {
+            style: styles.normalInputContainer,
+            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]
+                })]
+              })
+            }), /*#__PURE__*/_jsx(TextInput, {
+              style: styles.input,
+              value: inputText,
+              onChangeText: setInputText,
+              placeholder: "Enter a message...",
+              placeholderTextColor: "#9E9E9E"
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleSendText,
+              style: styles.sendButton,
+              children: /*#__PURE__*/_jsx(SendIcon, {
+                size: 22,
+                color: styleSettings?.styles?.styleTextColor || '#FFFFFF'
+              })
+            })]
+          })
+        })]
+      })
+    })]
+  });
+};
+const getDynamicStyles = (settingStyle = {}) => {
+  const screenWidth = Dimensions.get('window').width;
+  // const screenHeight = Dimensions.get('window').height;
+  return StyleSheet.create({
+    safeArea: {
+      flex: 1,
+      backgroundColor: '#FFFFFF'
+      // padding: 12,
+    },
+    container: {
+      flex: 1,
+      backgroundColor: '#F4F7FC'
+    },
+    centered: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: settingStyle?.styleHeadColor || '#3761DF',
+      paddingVertical: 10,
+      paddingHorizontal: 15,
+      paddingTop: Platform.OS === 'android' ? 15 : 15
+    },
+    headerProfile: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    headerAvatar: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      marginRight: 10
+    },
+    headerTitle: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      color: settingStyle?.styleTextColor || '#FFFFFF'
+    },
+    closeButtonText: {
+      fontSize: 20,
+      color: settingStyle?.styleTextColor || '#FFFFFF',
+      fontWeight: 'bold'
+    },
+    messageList: {
+      flex: 1,
+      paddingHorizontal: 10
+    },
+    messageRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      marginVertical: 5
+    },
+    agentRow: {
+      justifyContent: 'flex-start'
+    },
+    userRow: {
+      justifyContent: 'flex-end'
+    },
+    messageContainer: {
+      maxWidth: '80%',
+      alignItems: 'flex-start',
+      flexDirection: 'row'
+      // marginBottom: 10,
+    },
+    messageAgentContainer: {
+      maxWidth: '80%',
+      alignItems: 'flex-start',
+      flexDirection: 'row-reverse',
+      marginVertical: 0
+    },
+    avatar: {
+      width: 36,
+      height: 36,
+      borderRadius: 20,
+      marginRight: 8
+    },
+    messageBubble: {
+      paddingHorizontal: 8,
+      paddingVertical: 8,
+      borderRadius: 12
+      // width: '80%',
+    },
+    agentBubble: {
+      backgroundColor: settingStyle.styleAgentColor || '#E0E0E0'
+    },
+    userBubble: {
+      backgroundColor: settingStyle.styleCustomerColor || '#E0E0E0'
+    },
+    customerChatText: {
+      color: settingStyle.styleCustomerTextColor || '#000000'
+    },
+    agentChatText: {
+      color: settingStyle.styleAgentTextColor || '#000000'
+    },
+    fileLink: {
+      textDecorationLine: 'underline',
+      elevation: 4,
+      width: screenWidth * 0.6
+    },
+    timestampText: {
+      fontSize: 12,
+      color: '#888',
+      marginTop: 5,
+      alignSelf: 'flex-end',
+      marginHorizontal: 8
+    },
+    datePartition: {
+      alignSelf: 'center',
+      backgroundColor: 'rgb(244, 243, 244)',
+      borderRadius: 16,
+      paddingVertical: 5,
+      paddingHorizontal: 12,
+      marginVertical: 15
+    },
+    datePartitionText: {
+      color: 'rgb(130, 135, 143)',
+      fontSize: 12,
+      fontWeight: '600'
+    },
+    inputContainer: {
+      paddingVertical: 10,
+      paddingHorizontal: 15,
+      borderTopWidth: 1,
+      borderTopColor: '#E0E0E0',
+      backgroundColor: 'white'
+    },
+    normalInputContainer: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    input: {
+      flex: 1,
+      height: 42,
+      backgroundColor: '#F0F0F0',
+      borderRadius: 22.5,
+      paddingHorizontal: 15,
+      fontSize: 16,
+      marginHorizontal: 10
+    },
+    attachmentButton: {
+      padding: 5
+    },
+    sendButton: {
+      paddingRight: 3,
+      paddingTop: 2,
+      width: 42,
+      height: 42,
+      borderRadius: 24,
+      backgroundColor: settingStyle?.styleHeadColor || '#3761DF',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    uploadPreviewContainer: {
+      alignItems: 'center'
+    },
+    fileInfoContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: '#F0F0F0',
+      borderRadius: 22.5,
+      paddingHorizontal: 15,
+      paddingVertical: 12,
+      width: '100%'
+    },
+    fileNameText: {
+      flex: 1,
+      marginLeft: 10,
+      fontSize: 16,
+      color: '#333'
+    },
+    buttonRow: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginTop: 10,
+      width: '100%'
+    },
+    actionButton: {
+      flex: 1,
+      paddingVertical: 10,
+      borderRadius: 8,
+      alignItems: 'center',
+      marginHorizontal: 5
+    },
+    uploadButton: {
+      backgroundColor: settingStyle?.styleHeadColor || '#3761DF'
+    },
+    uploadButtonText: {
+      color: settingStyle?.styleTextColor || '#FFFFFF',
+      fontWeight: 'bold',
+      fontSize: 16
+    },
+    cancelButton: {
+      backgroundColor: '#E0E0E0'
+    },
+    cancelButtonText: {
+      color: '#333',
+      fontWeight: 'bold',
+      fontSize: 16
+    },
+    plusIconContainer: {
+      width: 24,
+      height: 24,
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    plusIconBar: {
+      position: 'absolute',
+      backgroundColor: '#8A8A8A'
+    },
+    plusIconBarHorizontal: {
+      width: 20,
+      height: 2,
+      borderRadius: 1
+    },
+    plusIconBarVertical: {
+      width: 2,
+      height: 20,
+      borderRadius: 1
+    },
+    imageMessage: {
+      width: 200,
+      height: 200,
+      borderRadius: 10
+    },
+    formContainer: {
+      // flex: 1,
+      backgroundColor: hexToRgba(settingStyle?.styleHeadColor, '0.5') || hexToRgba('#3761DF', '0.5'),
+      // opacity: 0.5,
+      padding: 14,
+      margin: 14,
+      borderRadius: 6
+    },
+    formWelcomeText: {
+      fontSize: 16,
+      color: '#2D3335',
+      marginBottom: 20,
+      borderRadius: 10
+    },
+    formInputContainer: {
+      marginBottom: 15
+    },
+    formLabel: {
+      fontSize: 14,
+      color: '#2D3335',
+      marginBottom: 5,
+      fontWeight: '600'
+    },
+    formInput: {
+      borderWidth: 1,
+      borderColor: '#ccc',
+      backgroundColor: '#fff',
+      color: '#2D3335',
+      borderRadius: 8,
+      padding: 12,
+      fontSize: 16
+    },
+    consentContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginHorizontal: 14
+    },
+    consentText: {
+      marginLeft: 2,
+      fontSize: 14,
+      color: '#333'
+    },
+    consentLink: {
+      color: '#3761DF',
+      textDecorationLine: 'underline'
+    },
+    checkboxChecked: {
+      width: 14,
+      height: 14,
+      backgroundColor: settingStyle?.styleHeadColor || '#3761DF'
+    },
+    formFooter: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      padding: 16,
+      backgroundColor: 'white'
+    },
+    startButton: {
+      padding: 12,
+      borderRadius: 12,
+      alignItems: 'center'
+    },
+    startButtonText: {
+      color: 'white',
+      fontSize: 16
+      // fontWeight: 'bold',
+    },
+    checkboxBase: {
+      width: 20,
+      height: 20,
+      borderWidth: 2,
+      borderColor: '#3761DF',
+      borderRadius: 4,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: 3
+    },
+    checkmark: {
+      color: '#fff',
+      fontSize: 12,
+      fontWeight: 'bold'
+    }
+  });
+};
+//# sourceMappingURL=ChatScreen.js.map