Feature/camera button

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}
           />
         </>                  
       )}

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 = ({
           />
         )}
         <span className="mr-2">
-          <RoundedBtn icon={<FiPaperclip />} onClick={handleMediaButtonClick} />
+        <RoundedBtn icon={<FaPlus />} onClick={handleOpenMoreSelection} />
         </span>
+        {moreSelection && (
+          <MoreOptionsInput media={handleMediaButtonClick} camera={handleCameraClick} handleClose={handleCloseMoreSelection}/>
+        )}
         {showMediaConfirm && (
           <MediaMessagePreview
             selectedMedia={selectedMedia}

src/components/common/MoreOptionsInput.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef, useState } from "react";
+import { FiPaperclip } from "react-icons/fi";
+import { MdCameraAlt } from 'react-icons/md';
+import RoundedBtn from "./RoundedBtn";
+
+function MoreOptionsInput({ media, camera, handleClose }) {
+    const divRef = useRef(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (divRef.current && !divRef.current.contains(event.target)) {
+                handleClose();
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [handleClose]);
+
+    return (
+        <>
+            <div className="absolute inset-0 bg-black bg-opacity-50 flex justify-start items-end mb-16">
+                <div ref={divRef} className="p-2 bg-[#0c4a6e] rounded-lg flex flex-col ml-12">
+                    <RoundedBtn icon={<FiPaperclip />} onClick={media} />
+                    <RoundedBtn icon={<MdCameraAlt />} onClick={camera} />
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default MoreOptionsInput;

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,