diff --git a/package.json b/package.json index a11777d..87f05eb 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "cookie": "0.6.0", "date-fns": "^4.1.0", "dayjs": "1.11.10", + "emoji-picker-react": "^4.12.0", "framer-motion": "10.16.4", "i18next": "23.6.0", "jotai": "2.5.1", @@ -41,6 +42,7 @@ "rc-table": "7.22.2", "react": "18.2.0", "react-apexcharts": "1.4.1", + "react-audio-visualize": "^1.2.0", "react-content-loader": "6.2.1", "react-countdown": "2.3.5", "react-datepicker": "4.21.0", @@ -50,6 +52,7 @@ "react-i18next": "13.3.1", "react-icons": "^5.4.0", "react-laag": "2.0.5", + "react-media-recorder": "^1.7.1", "react-phone-input-2": "2.15.1", "react-query": "3.39.3", "react-quill": "2.0.0", diff --git a/public/image/Frame 1000005529.svg b/public/image/Frame 1000005529.svg new file mode 100644 index 0000000..4afb24e --- /dev/null +++ b/public/image/Frame 1000005529.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/image/State=Send.svg b/public/image/State=Send.svg new file mode 100644 index 0000000..9754bf8 --- /dev/null +++ b/public/image/State=Send.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/image/Vector.svg b/public/image/Vector.svg new file mode 100644 index 0000000..c21a008 --- /dev/null +++ b/public/image/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/image/VectorWhite.svg b/public/image/VectorWhite.svg new file mode 100644 index 0000000..04d405d --- /dev/null +++ b/public/image/VectorWhite.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/image/bars.svg b/public/image/bars.svg new file mode 100644 index 0000000..3d9f2eb --- /dev/null +++ b/public/image/bars.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/image/clock-fast-forward.png b/public/image/clock-fast-forward.png new file mode 100644 index 0000000..b6e296c Binary files /dev/null and b/public/image/clock-fast-forward.png differ diff --git a/public/image/copy-06.svg b/public/image/copy-06.svg new file mode 100644 index 0000000..5661b35 --- /dev/null +++ b/public/image/copy-06.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/image/edit-04.svg b/public/image/edit-04.svg new file mode 100644 index 0000000..e8acb5a --- /dev/null +++ b/public/image/edit-04.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/image/quill_checkmark-double.svg b/public/image/quill_checkmark-double.svg new file mode 100644 index 0000000..9b0fac8 --- /dev/null +++ b/public/image/quill_checkmark-double.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/image/search.svg b/public/image/search.svg new file mode 100644 index 0000000..a9f61f6 --- /dev/null +++ b/public/image/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/image/trash-03.svg b/public/image/trash-03.svg new file mode 100644 index 0000000..2a879fb --- /dev/null +++ b/public/image/trash-03.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/chat/audio-message.tsx b/src/components/chat/audio-message.tsx new file mode 100644 index 0000000..f8829dd --- /dev/null +++ b/src/components/chat/audio-message.tsx @@ -0,0 +1,99 @@ +import { useRef, useState, useEffect } from "react"; +import { FaPlay, FaPause, FaCheckDouble } from "react-icons/fa"; +import { AudioVisualizer } from "react-audio-visualize"; + +const AudioMessage = ({ audio, timestamp = "2:47 PM" }) => { + const audioRef = useRef(null); + const [isPlaying, setIsPlaying] = useState(false); + const [currentTime, setCurrentTime] = useState(0); + const [audioBlob, setAudioBlob] = useState(null); + const isUser = audio.by_user.account_type === "user" + useEffect(() => { + // If audio.content is a URL string, fetch and convert it to Blob + if (typeof audio.content === 'string') { + fetch(audio.content) + .then(res => res.blob()) + .then(blob => { + setAudioBlob(blob); + }) + .catch(err => console.error("Error fetching audio:", err)); + } else if (audio.content instanceof Blob) { + // If audio.content is already a Blob, just set it + setAudioBlob(audio.content); + } else { + console.error("audio.content must be a Blob or a URL string."); + } + }, [audio.content]); + + const togglePlay = () => { + if (!audioRef.current) return; + if (isPlaying) { + audioRef.current.pause(); + } else { + audioRef.current.play(); + } + }; + + const handlePlay = () => setIsPlaying(true); + const handlePause = () => setIsPlaying(false); + const handleEnded = () => { + setIsPlaying(false); + setCurrentTime(0); + }; + + const handleTimeUpdate = () => { + if (audioRef.current) { + setCurrentTime(audioRef.current.currentTime); + } + }; + + // Create a URL for the audio element if we have a blob + const audioUrl = audioBlob ? URL.createObjectURL(audioBlob) : null; + + return ( +
+ {/* Play/Pause Button */} + + + {/* Audio Visualization */} +
+ {audioBlob && ( + + )} +
+ + {/* Timestamp and Status */} + + + {/* Hidden Audio Element */} + {audioUrl && ( +
+ ); +}; + +export default AudioMessage; diff --git a/src/components/chat/chat-input.tsx b/src/components/chat/chat-input.tsx new file mode 100644 index 0000000..5062d42 --- /dev/null +++ b/src/components/chat/chat-input.tsx @@ -0,0 +1,305 @@ +import { PiTrash } from "react-icons/pi"; +import Image from "next/image"; +import SendIcon from "public/assets/images/send-01.svg"; +import MicIcon from "public/assets/images/microphone-01.svg"; +import LinkIcon from "public/assets/images/link-simple.svg"; +import SmileIcon from "public/assets/images/face-smile.svg"; +import { MdClose } from "react-icons/md"; +import { useEffect, useState, useRef } from "react"; +import { useWebSocket } from "@/contexts/WebSocket.context"; +import FileInput from "../ui/file-input"; +import dynamic from "next/dynamic"; +import EmojiPicker from "emoji-picker-react"; +import { BsFillReplyFill } from "react-icons/bs"; +// Dynamically import ReactMediaRecorder to prevent SSR issues +const ReactMediaRecorder = dynamic( + () => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), + { ssr: false } +); + +// Helper function to format recording time +const formatTime = (seconds) => { + const mins = Math.floor(seconds / 60) + .toString() + .padStart(2, "0"); + const secs = (seconds % 60).toString().padStart(2, "0"); + return `${mins}:${secs}`; +}; + +const Input = ({ product = {} }) => { + const { + sendMessage, + setLoadingMessage, + editingMessage, + setEditingMessage, + editMessage, + } = useWebSocket(); + + // State variables + const [showProduct, setShowProduct] = useState(!!product.id); + const [isRecording, setIsRecording] = useState(false); + const [recordingTime, setRecordingTime] = useState(0); + const [message, setMessage] = useState(""); + const [showEmojiPicker, setShowEmojiPicker] = useState(false); // Emoji picker state + + // Ref for the timer interval + const timerRef = useRef(null); + const messageInputRef = useRef(null); + const emojiPickerRef = useRef(null); + const emojiButtonRef = useRef(null); // Ref for the emoji toggle button + + // Ref for sendRecording flag + const sendRecordingRef = useRef(false); + + // Handle sending text messages + const handleSendMessage = () => { + if (message.trim()) { + if (Object.keys(editingMessage).length) { + const msg = { + content: message, + id: editingMessage.id, + }; + editMessage(msg); + setEditingMessage({}) + setMessage(""); + } else { + sendMessage(message, product?.id); + setMessage(""); + setShowProduct(false); + } + } + }; + + // Start the recording timer + const startTimer = () => { + setRecordingTime(0); + timerRef.current = setInterval(() => { + setRecordingTime((prevTime) => prevTime + 1); + }, 1000); + }; + + // Stop the recording timer + const stopTimer = () => { + if (timerRef.current) { + clearInterval(timerRef.current); + timerRef.current = null; + } + }; + + // Cleanup on component unmount + useEffect(() => { + return () => { + stopTimer(); + }; + }, []); + + // Handle click outside to close the emoji picker + useEffect(() => { + const handleClickOutside = (event) => { + if ( + emojiPickerRef.current && + !emojiPickerRef.current.contains(event.target) && + messageInputRef.current && + !messageInputRef.current.contains(event.target) && + emojiButtonRef.current && + !emojiButtonRef.current.contains(event.target) // Ignore clicks on the emoji button + ) { + setShowEmojiPicker(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + useEffect(() => { + if (Object.keys(editingMessage).length) { + setMessage(editingMessage.content); + messageInputRef.current?.focus(); // Set focus on the input + } + }, [editingMessage]); + + return ( + { + setIsRecording(true); + sendRecordingRef.current = false; // Reset the flag on start + startTimer(); + }} + onStop={(blobUrl, blob) => { + setIsRecording(false); + stopTimer(); + if (sendRecordingRef.current) { + let selectedFile = blob; + selectedFile.status = "loading"; + selectedFile.name = `audio ${new Date()}.wav`; + setLoadingMessage((prev) => [...prev, selectedFile]); + } else { + console.log("Recording discarded:", blobUrl); + } + sendRecordingRef.current = false; // Reset the flag after handling + }} + render={({ startRecording, stopRecording }) => ( +
+ {/* Product Preview */} + {product.id && showProduct && ( +
+ Link Icon +
+
+ {product?.images && product.images.length > 0 && ( + {product.name + )} +
+

+ {product.name || "Unnamed Product"} +

+

{product.price}$

+
+
+ {setShowProduct(false)}} + size={20} + aria-label="Close product preview" + className="cursor-pointer" + /> +
+
+ )} + + {!!Object.keys(editingMessage).length && ( +
+ + +
+
+
+

+ {editingMessage.mime_type === "text" + ? editingMessage.content + : editingMessage.mime_type} +

+
+
+ {setEditingMessage({}); setMessage("")}} + size={20} + aria-label="Close product preview" + className="cursor-pointer" + /> +
+
+ )} + {/* Message Input Area */} +
+ {/* Emoji Button */} + + + {/* Emoji Picker */} + {showEmojiPicker && ( +
+ { + setMessage( + (prevMessage) => prevMessage + emojiObject.emoji + ); + messageInputRef.current?.focus(); + }} + emojiStyle="native" + skinTonesDisabled + previewConfig={{ + showPreview: false, + }} + /> +
+ )} + + {/* Textarea Input */} +