diff --git a/src/components/Chat/ChatDetail.jsx b/src/components/Chat/ChatDetail.jsx index 7b35fda..542caef 100644 --- a/src/components/Chat/ChatDetail.jsx +++ b/src/components/Chat/ChatDetail.jsx @@ -33,6 +33,8 @@ function ChatDetail() { const [websocket, setWebSocket] = useState(null); const [pastedImages, setPastedImages] = useState([]); const [selectedImage, setSelectedImage] = useState(null); + const [moreSelection, setMoreSelection] = useState(false); + const [hasCameraPermission, setHasCameraPermission] = useState(false); //const { userRole, changeUserRole } = useUserRole(); const { userUuid, @@ -68,6 +70,8 @@ function ChatDetail() { handleEmojiClick, handleSelectEmoji, handleCloseEmojiPicker, + handleOpenMoreSelection, + handleCloseMoreSelection, handleMediaButtonClick, handleFileChange, handleCloseMediaConfirm, @@ -77,9 +81,10 @@ function ChatDetail() { handleShowImage, handleCloseModalImage, handleVoiceMessages, + handleCameraClick, isRecording, mimeType, - } = useAgentInput(userUuid, selectedChat, idToken, company, typing, setTyping, inputRef, showEmojiPicker, setShowEmojiPicker, showMediaConfirm, setShowMediaConfirm, selectedMedia, setSelectedMedia, setMessages, fileInputRef, setIsLoading, isLoading, sendWebSocketMessage, pastedImages, setPastedImages, selectedImage, setSelectedImage); + } = useAgentInput(userUuid, selectedChat, idToken, company, typing, setTyping, inputRef, showEmojiPicker, setShowEmojiPicker, showMediaConfirm, setShowMediaConfirm, selectedMedia, setSelectedMedia, setMessages, fileInputRef, setIsLoading, isLoading, sendWebSocketMessage, pastedImages, setPastedImages, selectedImage, setSelectedImage, setMoreSelection, moreSelection, setHasCameraPermission, hasCameraPermission); const { handleArrowClick, handleScroll @@ -163,6 +168,11 @@ function ChatDetail() { handleShowImage={handleShowImage} handleCloseModalImage={handleCloseModalImage} selectedImage={selectedImage} + handleOpenMoreSelection={handleOpenMoreSelection} + handleCloseMoreSelection={handleCloseMoreSelection} + moreSelection={moreSelection} + handleCameraClick={handleCameraClick} + hasCameraPermission={hasCameraPermission} /> )} diff --git a/src/components/Chat/ChatDetail/ChatInput.jsx b/src/components/Chat/ChatDetail/ChatInput.jsx index 24f9f25..e7b9aa4 100644 --- a/src/components/Chat/ChatDetail/ChatInput.jsx +++ b/src/components/Chat/ChatDetail/ChatInput.jsx @@ -1,11 +1,12 @@ import React from 'react'; import { BiHappy, BiMicrophone} from 'react-icons/bi'; -import { FiPaperclip } from "react-icons/fi"; +import { FaPlus } from "react-icons/fa6"; import { MdSend } from 'react-icons/md'; import RoundedBtn from '../../common/RoundedBtn'; import EmojiPicker from '../EmojiPicker'; import MediaMessagePreview from '../MediaMessagePreview'; import ImageGallery from './ChatInput/ImageGallery'; +import MoreOptionsInput from '../../common/MoreOptionsInput'; const ChatInput = ({ typing, @@ -31,7 +32,12 @@ const ChatInput = ({ selectedImage, handleRemoveImage, handleShowImage, - handleCloseModalImage + handleCloseModalImage, + handleOpenMoreSelection, + handleCloseMoreSelection, + handleCameraClick, + hasCameraPermission, + moreSelection }) => { return ( @@ -47,8 +53,11 @@ const ChatInput = ({ /> )} - } onClick={handleMediaButtonClick} /> + } onClick={handleOpenMoreSelection} /> + {moreSelection && ( + + )} {showMediaConfirm && ( { + const handleClickOutside = (event) => { + if (divRef.current && !divRef.current.contains(event.target)) { + handleClose(); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [handleClose]); + + return ( + <> +
+
+ } onClick={media} /> + } onClick={camera} /> +
+
+ + ); +} + +export default MoreOptionsInput; \ No newline at end of file diff --git a/src/hooks/useAgentInput.jsx b/src/hooks/useAgentInput.jsx index bc70b1d..0b73ed9 100644 --- a/src/hooks/useAgentInput.jsx +++ b/src/hooks/useAgentInput.jsx @@ -5,10 +5,12 @@ import postMessageToWhatsApp from '../logic/PostMessageToWhatsapp'; import MicRecorder from 'mic-recorder-to-mp3' -const useAgentInput = (userUuid, selectedChat, idToken, company, externalTyping, externalSetTyping, externalInputRef, externalShowEmojiPicker, externalSetShowEmojiPicker, externalShowMediaConfirm, externalSetShowMediaConfirm, externalSelectedMedia, externalSetSelectedMedia, externalSetMessages, externalFileInputRef, externalSetIsLoading, externalIsLoading, sendWebSocketMessage, externalPastedImages, externalSetPastedImages, externalSelectedImage, externalSetSelectedImage) => { +const useAgentInput = (userUuid, selectedChat, idToken, company, externalTyping, externalSetTyping, externalInputRef, externalShowEmojiPicker, externalSetShowEmojiPicker, externalShowMediaConfirm, externalSetShowMediaConfirm, externalSelectedMedia, externalSetSelectedMedia, externalSetMessages, externalFileInputRef, externalSetIsLoading, externalIsLoading, sendWebSocketMessage, externalPastedImages, externalSetPastedImages, externalSelectedImage, externalSetSelectedImage, externalSetMoreSelection, externalMoreSelection, externalSetHasCameraPermission, externalHasCameraPermission) => { const [typing, setTyping] = useState(false); const inputRef = useRef(null); const fileInputRef = useRef(null); + const videoRef = useRef(null); + const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [showMediaConfirm, setShowMediaConfirm] = useState(false); const [selectedMedia, setSelectedMedia] = useState(null); @@ -21,6 +23,8 @@ const useAgentInput = (userUuid, selectedChat, idToken, company, externalTyping, const [isBlocked, setIsBlocked] = useState(null); const [pastedImages, setPastedImages] = useState([]); const [selectedImage, setSelectedImage] = useState(null); + const [moreSelection, setMoreSelection] = useState(false); + const [hasCameraPermission, setHasCameraPermission] = useState(false); const [metaContextMid, setMetaContextMid] = useState(""); const actualSetTyping = externalSetTyping || setTyping; @@ -39,6 +43,10 @@ const useAgentInput = (userUuid, selectedChat, idToken, company, externalTyping, const actualPastedImages = externalPastedImages || pastedImages; const actualSetSelectedImage = externalSetSelectedImage || setSelectedImage; const actualSelectedImage = externalSelectedImage || selectedImage; + const actualSetMoreSelection = externalSetMoreSelection || setMoreSelection; + const actualMoreSelection = externalMoreSelection || moreSelection; + const actualSetHasCameraPermission = externalSetHasCameraPermission || setHasCameraPermission; + const actualHasCameraPermission = externalHasCameraPermission || hasCameraPermission; const [Mp3Recorder, setMp3Recorder] = useState( new MicRecorder({ bitRate: 128 }) ); @@ -79,6 +87,24 @@ const useAgentInput = (userUuid, selectedChat, idToken, company, externalTyping, } }; + const handleOpenMoreSelection = () => { + actualSetMoreSelection(true); + }; + + const handleCloseMoreSelection = () => { + actualSetMoreSelection(false) + }; + + const handleCameraClick = async () => { + try { + const stream = await navigator.mediaDevices.getUserMedia({ video: true }); + videoRef.current.srcObject = stream; + actualSetHasCameraPermission(true); + } catch (err) { + console.error("Error accessing camera: ", err); + } + }; + const handleMediaButtonClick = () => { actualFileInputRef.current.click(); }; @@ -334,6 +360,8 @@ const useAgentInput = (userUuid, selectedChat, idToken, company, externalTyping, handleSelectEmoji, handleCloseEmojiPicker, handleFileChange, + handleOpenMoreSelection, + handleCloseMoreSelection, handleMediaButtonClick, handleCloseMediaConfirm, handlePaste, @@ -342,6 +370,7 @@ const useAgentInput = (userUuid, selectedChat, idToken, company, externalTyping, handleShowImage, handleCloseModalImage, handleVoiceMessages, + handleCameraClick, setIsLoading: actualSetIsLoading, isLoading: actualIsLoading, pastedImages: actualPastedImages,