- {/* Recommended Workers Module */}
-
{/* My Shortlist Module */}
diff --git a/resources/js/Pages/Employer/Messages/Show.jsx b/resources/js/Pages/Employer/Messages/Show.jsx
index 02b935d..3391ca6 100644
--- a/resources/js/Pages/Employer/Messages/Show.jsx
+++ b/resources/js/Pages/Employer/Messages/Show.jsx
@@ -25,7 +25,9 @@ import {
MessageSquare,
Eye,
UploadCloud,
- FileText
+ FileText,
+ Mic,
+ Square
} from 'lucide-react';
import { toast } from 'sonner';
@@ -38,6 +40,9 @@ export default function Show({ conversation, initialMessages, conversations = []
const [showProfile, setShowProfile] = useState(true);
const [showAttachmentModal, setShowAttachmentModal] = useState(false);
const [uploadedFiles, setUploadedFiles] = useState([]);
+ const [isRecording, setIsRecording] = useState(false);
+ const mediaRecorderRef = useRef(null);
+ const audioChunksRef = useRef([]);
const messagesEndRef = useRef(null);
const scrollToBottom = () => {
@@ -63,6 +68,40 @@ export default function Show({ conversation, initialMessages, conversations = []
c.worker_name.toLowerCase().includes(searchTerm.toLowerCase())
);
+ const sendFile = (file) => {
+ if (!file) return;
+
+ const isImage = file.type.startsWith('image/');
+ const isAudio = file.type.startsWith('audio/');
+ const type = isImage ? 'image' : (isAudio ? 'voice' : 'document');
+
+ // Optimistically update message feed
+ const newMsg = {
+ id: Date.now(),
+ sender: 'employer',
+ text: file.name,
+ time: t('just_now', 'Just Now'),
+ read: false,
+ attachment_url: URL.createObjectURL(file),
+ attachment_type: type
+ };
+ setMessages(prev => [...prev, newMsg]);
+
+ router.post(`/employer/messages/${conversation.id}/send`, {
+ text: file.name,
+ file: file
+ }, {
+ preserveScroll: true,
+ onSuccess: () => {
+ toast.success(t('file_sent_success', 'File and notification sent successfully!'));
+ setShowAttachmentModal(false);
+ },
+ onError: (err) => {
+ toast.error(t('file_sent_error', 'Failed to upload file attachment.'));
+ }
+ });
+ };
+
const sendMsg = (text) => {
if (!text.trim()) return;
@@ -127,19 +166,63 @@ export default function Show({ conversation, initialMessages, conversations = []
const handleFileUpload = (e) => {
const file = e.target.files[0];
if (!file) return;
+ sendFile(file);
+ };
- const newFile = {
- name: file.name,
- size: (file.size / 1024).toFixed(1) + ' KB',
- date: t('today', 'Today')
- };
+ const startRecording = async () => {
+ try {
+ // Check browser permission status if query API is supported
+ if (navigator.permissions && navigator.permissions.query) {
+ try {
+ const permissionStatus = await navigator.permissions.query({ name: 'microphone' });
+ if (permissionStatus.state === 'denied') {
+ toast.error(t('microphone_blocked', 'Microphone access is blocked. Please enable microphone permissions in your browser settings.'));
+ return;
+ }
+ } catch (pe) {
+ // Ignore query check failures if name is not supported in some browsers
+ }
+ }
- setUploadedFiles([...uploadedFiles, newFile]);
- toast.success(t('document_attached', 'Document attached successfully!'));
- setShowAttachmentModal(false);
-
- // Optimistically insert attachment message
- sendMsg(`[${t('document_attached_msg', 'Document Attached')}: ${file.name}]`);
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+ audioChunksRef.current = [];
+ const recorder = new MediaRecorder(stream);
+
+ recorder.ondataavailable = (e) => {
+ if (e.data.size > 0) {
+ audioChunksRef.current.push(e.data);
+ }
+ };
+
+ recorder.onstop = () => {
+ const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
+ const file = new File([audioBlob], `voice_${Date.now()}.webm`, { type: 'audio/webm' });
+ sendFile(file);
+ // Stop all tracks to release mic
+ stream.getTracks().forEach(track => track.stop());
+ };
+
+ mediaRecorderRef.current = recorder;
+ recorder.start();
+ setIsRecording(true);
+ toast.info(t('recording_started', 'Recording voice message... Click microphone again to stop.'));
+ } catch (err) {
+ console.error(err);
+ if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
+ toast.error(t('microphone_permission_denied', 'Permission to access the microphone was denied. Please allow microphone access in your browser settings.'));
+ } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
+ toast.error(t('microphone_not_found', 'No microphone device was detected on your system.'));
+ } else {
+ toast.error(t('microphone_access_error', 'Could not access the microphone. Please check your system settings.'));
+ }
+ }
+ };
+
+ const stopRecording = () => {
+ if (mediaRecorderRef.current && isRecording) {
+ mediaRecorderRef.current.stop();
+ setIsRecording(false);
+ }
};
const chips = [
@@ -286,29 +369,80 @@ export default function Show({ conversation, initialMessages, conversations = []
{messages.map((msg, idx) => {
const isEmp = msg.sender === 'employer';
+ const hasImage = msg.attachment_url && msg.attachment_type === 'image';
+ const hasVoice = msg.attachment_url && msg.attachment_type === 'voice';
+ const hasDoc = msg.attachment_url && msg.attachment_type === 'document';
+ const isImageFilename = msg.text && msg.text.match(/\.(jpg|jpeg|png|gif|webp)$/i);
+
return (
-
-
+
+ {/* Main Message Bubble (WhatsApp Style) */}
+
- {msg.text}
-
-
-
{msg.time}
- {isEmp && (
-
- •
- {t('read', 'Read')}
-
-
+ ? 'bg-[#185FA5] text-white border-transparent rounded-tr-none'
+ : 'bg-white border-slate-100 text-slate-800 rounded-tl-none'
+ } ${hasImage ? 'p-1.5 pb-2.5 max-w-[320px]' : 'px-5 py-3'}`}>
+
+ {/* Image Attachment (WhatsApp Full Width style) */}
+ {hasImage && (
+
)}
+
+ {/* Voice Message */}
+ {hasVoice && (
+
+ )}
+
+ {/* Document Attachment */}
+ {hasDoc && (
+
+ )}
+
+ {/* Text Content (if not just the filename of the image) */}
+ {msg.text && (!hasImage || !isImageFilename) && (
+
+ {msg.text}
+
+ )}
+
+ {/* Time & Read Status Indicator */}
+
+ {msg.time}
+ {isEmp && (
+
+ •
+
+
+ )}
+
+
+
);
@@ -344,28 +478,40 @@ export default function Show({ conversation, initialMessages, conversations = []
+
+
setInput(e.target.value)}
+ placeholder={t('type_message_placeholder', 'Type a compliant secure message...')}
+ className="flex-1 px-5 py-3.5 bg-slate-50 rounded-xl text-xs font-semibold outline-none border border-transparent focus:border-slate-200 transition-all"
+ />
+
+
+