+
![]()
void;
+ onConfirm: (email: string) => Promise | void;
+ requestIdDisplay?: string;
+ requestTitle?: string;
+ existingParticipants?: Array<{ email: string; participantType: string; name?: string }>;
+}
+
+export function AddApproverModal({
+ open,
+ onClose,
+ onConfirm,
+ requestIdDisplay,
+ requestTitle,
+ existingParticipants = []
+}: AddApproverModalProps) {
+ const [email, setEmail] = useState('');
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [searchResults, setSearchResults] = useState([]);
+ const [isSearching, setIsSearching] = useState(false);
+ const searchTimer = useRef(null);
+
+ const handleConfirm = async () => {
+ const emailToAdd = email.trim().toLowerCase();
+
+ if (!emailToAdd) {
+ alert('Please enter an email address');
+ return;
+ }
+
+ // Basic email validation
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!emailRegex.test(emailToAdd)) {
+ alert('Please enter a valid email address');
+ return;
+ }
+
+ // Check if user is already a participant
+ const existingParticipant = existingParticipants.find(
+ p => (p.email || '').toLowerCase() === emailToAdd
+ );
+
+ if (existingParticipant) {
+ const participantType = existingParticipant.participantType?.toUpperCase() || 'PARTICIPANT';
+ const userName = existingParticipant.name || emailToAdd;
+
+ if (participantType === 'INITIATOR') {
+ alert(`${userName} is the request initiator and cannot be added as an approver.`);
+ return;
+ } else if (participantType === 'APPROVER') {
+ alert(`${userName} is already an approver on this request.`);
+ return;
+ } else if (participantType === 'SPECTATOR') {
+ alert(`${userName} is currently a spectator on this request and cannot be added as an approver. Please remove them as spectator first.`);
+ return;
+ } else {
+ alert(`${userName} is already a participant on this request.`);
+ return;
+ }
+ }
+
+ try {
+ setIsSubmitting(true);
+ await onConfirm(emailToAdd);
+ setEmail('');
+ onClose();
+ } catch (error) {
+ console.error('Failed to add approver:', error);
+ // Error handling is done in the parent component
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const handleClose = () => {
+ if (!isSubmitting) {
+ setEmail('');
+ setSearchResults([]);
+ setIsSearching(false);
+ onClose();
+ }
+ };
+
+ // Cleanup search timer on unmount
+ useEffect(() => {
+ return () => {
+ if (searchTimer.current) {
+ clearTimeout(searchTimer.current);
+ }
+ };
+ }, []);
+
+ // Handle user search with @ mention
+ const handleEmailChange = (value: string) => {
+ setEmail(value);
+
+ // Clear existing timer
+ if (searchTimer.current) {
+ clearTimeout(searchTimer.current);
+ }
+
+ // Only trigger search when using @ sign
+ if (!value || !value.startsWith('@') || value.length < 2) {
+ setSearchResults([]);
+ setIsSearching(false);
+ return;
+ }
+
+ // Start search with debounce
+ setIsSearching(true);
+ searchTimer.current = setTimeout(async () => {
+ try {
+ const term = value.slice(1); // Remove @ prefix
+ const results = await searchUsers(term, 10);
+ setSearchResults(results);
+ } catch (error) {
+ console.error('Search failed:', error);
+ setSearchResults([]);
+ } finally {
+ setIsSearching(false);
+ }
+ }, 300);
+ };
+
+ // Select user from search results
+ const handleSelectUser = (user: UserSummary) => {
+ setEmail(user.email);
+ setSearchResults([]);
+ setIsSearching(false);
+ };
+
+ return (
+
+ );
+}
+
diff --git a/src/components/participant/AddApproverModal/index.ts b/src/components/participant/AddApproverModal/index.ts
new file mode 100644
index 0000000..92d38a7
--- /dev/null
+++ b/src/components/participant/AddApproverModal/index.ts
@@ -0,0 +1,2 @@
+export { AddApproverModal } from './AddApproverModal';
+
diff --git a/src/components/participant/AddSpectatorModal/AddSpectatorModal.tsx b/src/components/participant/AddSpectatorModal/AddSpectatorModal.tsx
new file mode 100644
index 0000000..78495e3
--- /dev/null
+++ b/src/components/participant/AddSpectatorModal/AddSpectatorModal.tsx
@@ -0,0 +1,255 @@
+import { useState, useRef, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Eye, X, AtSign } from 'lucide-react';
+import { searchUsers, type UserSummary } from '@/services/userApi';
+
+interface AddSpectatorModalProps {
+ open: boolean;
+ onClose: () => void;
+ onConfirm: (email: string) => Promise | void;
+ requestIdDisplay?: string;
+ requestTitle?: string;
+ existingParticipants?: Array<{ email: string; participantType: string; name?: string }>;
+}
+
+export function AddSpectatorModal({
+ open,
+ onClose,
+ onConfirm,
+ requestIdDisplay,
+ requestTitle,
+ existingParticipants = []
+}: AddSpectatorModalProps) {
+ const [email, setEmail] = useState('');
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [searchResults, setSearchResults] = useState([]);
+ const [isSearching, setIsSearching] = useState(false);
+ const searchTimer = useRef(null);
+
+ const handleConfirm = async () => {
+ const emailToAdd = email.trim().toLowerCase();
+
+ if (!emailToAdd) {
+ alert('Please enter an email address');
+ return;
+ }
+
+ // Basic email validation
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!emailRegex.test(emailToAdd)) {
+ alert('Please enter a valid email address');
+ return;
+ }
+
+ // Check if user is already a participant
+ const existingParticipant = existingParticipants.find(
+ p => (p.email || '').toLowerCase() === emailToAdd
+ );
+
+ if (existingParticipant) {
+ const participantType = existingParticipant.participantType?.toUpperCase() || 'PARTICIPANT';
+ const userName = existingParticipant.name || emailToAdd;
+
+ if (participantType === 'INITIATOR') {
+ alert(`${userName} is the request initiator and cannot be added as a spectator.`);
+ return;
+ } else if (participantType === 'APPROVER') {
+ alert(`${userName} is already an approver on this request and cannot be added as a spectator.`);
+ return;
+ } else if (participantType === 'SPECTATOR') {
+ alert(`${userName} is already a spectator on this request.`);
+ return;
+ } else {
+ alert(`${userName} is already a participant on this request.`);
+ return;
+ }
+ }
+
+ try {
+ setIsSubmitting(true);
+ await onConfirm(emailToAdd);
+ setEmail('');
+ onClose();
+ } catch (error) {
+ console.error('Failed to add spectator:', error);
+ // Error handling is done in the parent component
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const handleClose = () => {
+ if (!isSubmitting) {
+ setEmail('');
+ setSearchResults([]);
+ setIsSearching(false);
+ onClose();
+ }
+ };
+
+ // Cleanup search timer on unmount
+ useEffect(() => {
+ return () => {
+ if (searchTimer.current) {
+ clearTimeout(searchTimer.current);
+ }
+ };
+ }, []);
+
+ // Handle user search with @ mention
+ const handleEmailChange = (value: string) => {
+ setEmail(value);
+
+ // Clear existing timer
+ if (searchTimer.current) {
+ clearTimeout(searchTimer.current);
+ }
+
+ // Only trigger search when using @ sign
+ if (!value || !value.startsWith('@') || value.length < 2) {
+ setSearchResults([]);
+ setIsSearching(false);
+ return;
+ }
+
+ // Start search with debounce
+ setIsSearching(true);
+ searchTimer.current = setTimeout(async () => {
+ try {
+ const term = value.slice(1); // Remove @ prefix
+ const results = await searchUsers(term, 10);
+ setSearchResults(results);
+ } catch (error) {
+ console.error('Search failed:', error);
+ setSearchResults([]);
+ } finally {
+ setIsSearching(false);
+ }
+ }, 300);
+ };
+
+ // Select user from search results
+ const handleSelectUser = (user: UserSummary) => {
+ setEmail(user.email);
+ setSearchResults([]);
+ setIsSearching(false);
+ };
+
+ return (
+
+ );
+}
+
diff --git a/src/components/participant/AddSpectatorModal/index.ts b/src/components/participant/AddSpectatorModal/index.ts
new file mode 100644
index 0000000..da33033
--- /dev/null
+++ b/src/components/participant/AddSpectatorModal/index.ts
@@ -0,0 +1,2 @@
+export { AddSpectatorModal } from './AddSpectatorModal';
+
diff --git a/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx b/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx
index 56a8155..5086f2b 100644
--- a/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx
+++ b/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx
@@ -1,16 +1,17 @@
import { useState, useRef, useEffect, useMemo } from 'react';
-import { getWorkNotes, createWorkNoteMultipart, getWorkflowDetails } from '@/services/workflowApi';
+import { getWorkNotes, createWorkNoteMultipart, getWorkflowDetails, downloadWorkNoteAttachment, getWorkNoteAttachmentPreviewUrl, addSpectator } from '@/services/workflowApi';
import { getSocket, joinRequestRoom, leaveRequestRoom } from '@/utils/socket';
import { useParams } from 'react-router-dom';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
import { Textarea } from '@/components/ui/textarea';
+import { FilePreview } from '@/components/common/FilePreview';
+import { AddSpectatorModal } from '@/components/participant/AddSpectatorModal';
+import { formatDateTime } from '@/utils/dateFormatter';
import {
ArrowLeft,
Send,
@@ -23,24 +24,13 @@ import {
MoreHorizontal,
MessageSquare,
Clock,
- CheckCircle,
- AlertCircle,
Search,
Hash,
AtSign,
- Phone,
- Video,
- Settings,
- Pin,
- Share,
Archive,
Plus,
- Filter,
- Calendar,
- Zap,
Activity,
Bell,
- Star,
Flag,
X,
FileSpreadsheet,
@@ -68,6 +58,7 @@ interface Message {
users: string[];
}[];
isHighPriority?: boolean;
+ isCurrentUser?: boolean;
}
interface Participant {
@@ -84,7 +75,6 @@ interface WorkNoteChatProps {
requestId: string;
onBack?: () => void;
messages?: any[]; // optional external messages
- loading?: boolean;
onSend?: (messageHtml: string, files: File[]) => Promise | void;
}
@@ -160,41 +150,6 @@ const MOCK_PARTICIPANTS: Participant[] = [
}
];
-const MOCK_DOCUMENTS = [
- {
- name: 'Q4_Marketing_Strategy.pdf',
- size: '2.4 MB',
- uploadedBy: 'Sarah Chen',
- uploadedAt: '2024-10-05 14:32',
- type: 'PDF',
- url: '#'
- },
- {
- name: 'Budget_Breakdown.xlsx',
- size: '1.1 MB',
- uploadedBy: 'Sarah Chen',
- uploadedAt: '2024-10-05 14:35',
- type: 'Excel',
- url: '#'
- },
- {
- name: 'Previous_Campaign_ROI.pdf',
- size: '856 KB',
- uploadedBy: 'Anna Smith',
- uploadedAt: '2024-10-06 09:15',
- type: 'PDF',
- url: '#'
- },
- {
- name: 'Competitor_Analysis.pptx',
- size: '3.2 MB',
- uploadedBy: 'Emily Davis',
- uploadedAt: '2024-10-06 15:22',
- type: 'PowerPoint',
- url: '#'
- }
-];
-
const INITIAL_MESSAGES: Message[] = [
{
id: '1',
@@ -294,34 +249,39 @@ const formatMessage = (content: string) => {
.replace(/\n/g, '
'); }; +const formatFileSize = (bytes: number): string => { + if (bytes < 1024) return bytes + ' B'; + if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'; + return (bytes / (1024 * 1024)).toFixed(1) + ' MB'; +}; + // File icon components using Lucide React const FileIcon = ({ type }: { type: string }) => { const iconClass = "w-4 h-4"; - switch (type.toLowerCase()) { - case 'pdf': return(INITIAL_MESSAGES);
const [showSidebar, setShowSidebar] = useState(false);
const [selectedFiles, setSelectedFiles] = useState([]);
+ const [currentUserId, setCurrentUserId] = useState(null);
+ const [previewFile, setPreviewFile] = useState<{ fileName: string; fileType: string; fileUrl: string; fileSize?: number; attachmentId?: string } | null>(null);
+ const [showAddSpectatorModal, setShowAddSpectatorModal] = useState(false);
const messagesEndRef = useRef(null);
const fileInputRef = useRef(null);
- // console.log for debugging if needed
- // console.log('WorkNoteChat onSend prop:', onSend);
// Get request info
const requestInfo = useMemo(() => {
@@ -342,6 +302,52 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo
msg.user.name.toLowerCase().includes(searchTerm.toLowerCase())
);
+ // Extract all shared files from messages with attachments
+ const sharedFiles = useMemo(() => {
+ const files: any[] = [];
+ messages.forEach((msg) => {
+ if (msg.attachments && msg.attachments.length > 0) {
+ msg.attachments.forEach((attachment: any) => {
+ files.push({
+ attachmentId: attachment.attachmentId || attachment.attachment_id,
+ name: attachment.fileName || attachment.file_name || attachment.name || 'Untitled',
+ fileName: attachment.fileName || attachment.file_name || attachment.name || 'Untitled',
+ size: attachment.fileSize || attachment.file_size,
+ type: attachment.fileType || attachment.file_type || attachment.type || 'file',
+ uploadedBy: msg.user.name,
+ uploadedAt: msg.timestamp,
+ url: attachment.storageUrl || attachment.storage_url || attachment.url || '#'
+ });
+ });
+ }
+ });
+ return files;
+ }, [messages]);
+
+ // Get all existing participants for validation
+ const existingParticipants = useMemo(() => {
+ return participants.map(p => ({
+ email: (p.email || '').toLowerCase(),
+ participantType: p.role === 'Initiator' ? 'INITIATOR' :
+ p.role === 'Approver' ? 'APPROVER' :
+ p.role === 'Spectator' ? 'SPECTATOR' :
+ 'PARTICIPANT',
+ name: p.name
+ }));
+ }, [participants]);
+
+ // Helper to format participant role (same as formatParticipantRole but for use in mapping)
+ const getFormattedRole = (role: string | undefined): string => {
+ if (!role) return 'Participant';
+ const roleUpper = role.toUpperCase();
+ switch (roleUpper) {
+ case 'INITIATOR': return 'Initiator';
+ case 'APPROVER': return 'Approver';
+ case 'SPECTATOR': return 'Spectator';
+ default: return role.charAt(0).toUpperCase() + role.slice(1).toLowerCase();
+ }
+ };
+
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};
@@ -350,6 +356,17 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo
scrollToBottom();
}, [messages]);
+ // Helper to format participant role
+ const formatParticipantRole = (type: string): string => {
+ const typeUpper = type.toUpperCase();
+ switch (typeUpper) {
+ case 'INITIATOR': return 'Initiator';
+ case 'APPROVER': return 'Approver';
+ case 'SPECTATOR': return 'Spectator';
+ default: return type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
+ }
+ };
+
// Load participants from backend workflow details
useEffect(() => {
(async () => {
@@ -357,21 +374,43 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo
const details = await getWorkflowDetails(effectiveRequestId);
const rows = Array.isArray(details?.participants) ? details.participants : [];
if (rows.length) {
- const mapped: Participant[] = rows.map((p: any) => ({
- name: p.userName || p.user_email || p.userEmail || 'User',
- avatar: (p.userName || p.user_email || 'U').toString().split(' ').map((s: string)=>s[0]).filter(Boolean).join('').slice(0,2).toUpperCase(),
- role: (p.participantType || p.participant_type || 'Participant').toString().toUpperCase() === 'SPECTATOR' ? 'Spectator' : 'Participant',
- status: 'online', // presence to be wired via websocket later
- email: p.userEmail || p.user_email || ''
- }));
+ const mapped: Participant[] = rows.map((p: any) => {
+ const participantType = p.participantType || p.participant_type || 'participant';
+ const userId = p.userId || p.user_id || '';
+ return {
+ name: p.userName || p.user_name || p.user_email || p.userEmail || 'User',
+ avatar: (p.userName || p.user_name || p.user_email || 'U').toString().split(' ').map((s: string)=>s[0]).filter(Boolean).join('').slice(0,2).toUpperCase(),
+ role: formatParticipantRole(participantType.toString()),
+ status: 'offline', // will be updated by presence events
+ email: p.userEmail || p.user_email || '',
+ permissions: ['read', 'write', 'mention'], // default permissions, can be enhanced later
+ userId: userId // store userId for presence matching
+ } as any;
+ });
setParticipants(mapped);
}
} catch {}
})();
}, [effectiveRequestId]);
+ // Load current user ID on mount
+ useEffect(() => {
+ const userDataStr = localStorage.getItem('userData');
+ if (userDataStr) {
+ try {
+ const userData = JSON.parse(userDataStr);
+ const userId = userData?.id || userData?.userId || userData?.user_id || null;
+ setCurrentUserId(userId);
+ } catch (err) {
+ console.error('[WorkNoteChat] Failed to parse userData:', err);
+ }
+ }
+ }, []);
+
// Realtime updates via Socket.IO (standalone usage)
useEffect(() => {
+ if (!currentUserId) return; // Wait for currentUserId to be loaded
+
let joinedId = effectiveRequestId;
(async () => {
try {
@@ -383,21 +422,90 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo
try {
const base = (import.meta as any).env.VITE_BASE_URL || window.location.origin;
const s = getSocket(base);
- joinRequestRoom(s, joinedId);
- const handler = (payload: any) => {
- const n = payload?.note || payload;
- if (!n) return;
- setMessages(prev => ([...prev, {
- id: n.noteId || String(Date.now()),
- user: { name: n.userName || 'User', avatar: (n.userName || 'U').slice(0,2).toUpperCase(), role: n.userRole || 'Participant' },
- content: n.message || '',
- timestamp: n.createdAt || new Date().toISOString()
- } as any]));
+
+ // Optimistically mark self as online immediately
+ setParticipants(prev => prev.map(p =>
+ (p as any).userId === currentUserId ? { ...p, status: 'online' as const } : p
+ ));
+
+ joinRequestRoom(s, joinedId, currentUserId);
+
+ // Handle new work notes
+ const noteHandler = (payload: any) => {
+ const n = payload?.note || payload;
+ if (!n) return;
+ // Prevent duplicates: check if message with same noteId already exists
+ setMessages(prev => {
+ if (prev.some(m => m.id === (n.noteId || n.id))) {
+ return prev; // Already exists, don't add
+ }
+
+ const userName = n.userName || n.user_name || 'User';
+ const userRole = n.userRole || n.user_role; // Get role directly from backend
+ const participantRole = getFormattedRole(userRole);
+ const noteUserId = n.userId || n.user_id;
+
+ return [...prev, {
+ id: n.noteId || String(Date.now()),
+ user: {
+ name: userName,
+ avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
+ role: participantRole
+ },
+ content: n.message || '',
+ timestamp: n.createdAt || new Date().toISOString(),
+ isCurrentUser: noteUserId === currentUserId,
+ attachments: Array.isArray(n.attachments) ? n.attachments.map((a: any) => ({
+ attachmentId: a.attachmentId || a.attachment_id,
+ name: a.fileName || a.file_name || a.name,
+ fileName: a.fileName || a.file_name || a.name,
+ url: a.storageUrl || a.storage_url || a.url || '#',
+ type: a.fileType || a.file_type || a.type || 'file',
+ fileType: a.fileType || a.file_type || a.type || 'file',
+ fileSize: a.fileSize || a.file_size
+ })) : undefined
+ } as any];
+ });
};
- s.on('worknote:new', handler);
+
+ // Handle presence: user joined
+ const presenceJoinHandler = (data: { userId: string; requestId: string }) => {
+ console.log('[WorkNoteChat] User joined:', data);
+ setParticipants(prev => prev.map(p =>
+ (p as any).userId === data.userId ? { ...p, status: 'online' as const } : p
+ ));
+ };
+
+ // Handle presence: user left
+ const presenceLeaveHandler = (data: { userId: string; requestId: string }) => {
+ console.log('[WorkNoteChat] User left:', data);
+ setParticipants(prev => prev.map(p =>
+ (p as any).userId === data.userId ? { ...p, status: 'offline' as const } : p
+ ));
+ };
+
+ // Handle initial online users list
+ const presenceOnlineHandler = (data: { requestId: string; userIds: string[] }) => {
+ console.log('[WorkNoteChat] Online users received:', data);
+ setParticipants(prev => prev.map(p => {
+ const pUserId = (p as any).userId || '';
+ const isOnline = data.userIds.includes(pUserId);
+ console.log(`[WorkNoteChat] User ${p.name} (${pUserId}): ${isOnline ? 'ONLINE' : 'offline'}`);
+ return { ...p, status: isOnline ? 'online' as const : 'offline' as const };
+ }));
+ };
+
+ s.on('worknote:new', noteHandler);
+ s.on('presence:join', presenceJoinHandler);
+ s.on('presence:leave', presenceLeaveHandler);
+ s.on('presence:online', presenceOnlineHandler);
+
// cleanup
const cleanup = () => {
- s.off('worknote:new', handler);
+ s.off('worknote:new', noteHandler);
+ s.off('presence:join', presenceJoinHandler);
+ s.off('presence:leave', presenceLeaveHandler);
+ s.off('presence:online', presenceOnlineHandler);
leaveRequestRoom(s, joinedId);
};
(window as any).__wn_cleanup = cleanup;
@@ -406,7 +514,7 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo
return () => {
try { (window as any).__wn_cleanup?.(); } catch {}
};
- }, [effectiveRequestId]);
+ }, [effectiveRequestId, currentUserId]);
const handleSendMessage = async () => {
if (message.trim() || selectedFiles.length > 0) {
@@ -430,7 +538,8 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo
}),
mentions: extractMentions(message),
isHighPriority: message.includes('!important') || message.includes('urgent'),
- attachments: attachments.length > 0 ? attachments : undefined
+ attachments: attachments.length > 0 ? attachments : undefined,
+ isCurrentUser: true
};
// console.log('new message ->', newMessage, onSend);
// If external onSend provided, delegate to caller (RequestDetail will POST and refresh)
@@ -441,12 +550,29 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo
try {
await createWorkNoteMultipart(effectiveRequestId, { message }, selectedFiles);
const rows = await getWorkNotes(effectiveRequestId);
- const mapped = Array.isArray(rows) ? rows.map((m: any) => ({
+ const mapped = Array.isArray(rows) ? rows.map((m: any) => {
+ const noteUserId = m.userId || m.user_id;
+ return {
id: m.noteId || m.id || String(Math.random()),
- user: { name: m.userName || 'User', avatar: (m.userName || 'U').slice(0,2).toUpperCase(), role: m.userRole || 'Participant' },
+ user: {
+ name: m.userName || 'User',
+ avatar: (m.userName || 'U').slice(0,2).toUpperCase(),
+ role: m.userRole || 'Participant'
+ },
content: m.message || '',
timestamp: m.createdAt || new Date().toISOString(),
- })) : [];
+ isCurrentUser: noteUserId === currentUserId,
+ attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({
+ attachmentId: a.attachmentId || a.attachment_id,
+ name: a.fileName || a.file_name || a.name,
+ fileName: a.fileName || a.file_name || a.name,
+ url: a.storageUrl || a.storage_url || a.url || '#',
+ type: a.fileType || a.file_type || a.type || 'file',
+ fileType: a.fileType || a.file_type || a.type || 'file',
+ fileSize: a.fileSize || a.file_size
+ })) : undefined
+ };
+ }) : [];
setMessages(mapped as any);
} catch {
setMessages(prev => [...prev, newMessage]);
@@ -461,31 +587,89 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo
useEffect(() => {
if (externalMessages && Array.isArray(externalMessages)) {
try {
- const mapped: Message[] = externalMessages.map((m: any) => ({
- id: m.noteId || m.id || String(Math.random()),
- user: { name: m.userName || m.user?.name || 'User', avatar: (m.userName || 'U').slice(0,2).toUpperCase(), role: m.userRole || 'Participant' },
- content: m.message || m.content || '',
- timestamp: m.createdAt || m.timestamp || new Date().toISOString(),
- attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({ name: a.fileName || a.name, url: a.storageUrl || a.url || '#', type: a.fileType || a.type || 'file' })) : undefined
- }));
+ const mapped: Message[] = externalMessages.map((m: any) => {
+ const userName = m.userName || m.user_name || m.user?.name || 'User';
+ const userRole = m.userRole || m.user_role; // Get role directly from backend
+ const participantRole = getFormattedRole(userRole);
+ const noteUserId = m.userId || m.user_id;
+
+ console.log('[WorkNoteChat] Mapping external message:', {
+ rawMessage: m,
+ extracted: { userName, userRole, participantRole }
+ });
+
+ return {
+ id: m.noteId || m.note_id || m.id || String(Math.random()),
+ user: {
+ name: userName,
+ avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
+ role: participantRole
+ },
+ content: m.message || m.content || '',
+ timestamp: m.createdAt || m.created_at || m.timestamp || new Date().toISOString(),
+ attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({
+ attachmentId: a.attachmentId || a.attachment_id,
+ name: a.fileName || a.file_name || a.name,
+ fileName: a.fileName || a.file_name || a.name,
+ url: a.storageUrl || a.storage_url || a.url || '#',
+ type: a.fileType || a.file_type || a.type || 'file',
+ fileType: a.fileType || a.file_type || a.type || 'file',
+ fileSize: a.fileSize || a.file_size
+ })) : undefined,
+ isCurrentUser: noteUserId === currentUserId
+ };
+ });
+ console.log('[WorkNoteChat] Mapped messages:', mapped);
setMessages(mapped);
- } catch {}
+ } catch (err) {
+ console.error('[WorkNoteChat] Error mapping messages:', err);
+ }
} else {
// Fallback: load from backend if parent didn't pass messages
(async () => {
try {
const rows = await getWorkNotes(effectiveRequestId);
- const mapped = Array.isArray(rows) ? rows.map((m: any) => ({
- id: m.noteId || m.id || String(Math.random()),
- user: { name: m.userName || 'User', avatar: (m.userName || 'U').slice(0,2).toUpperCase(), role: m.userRole || 'Participant' },
- content: m.message || '',
- timestamp: m.createdAt || new Date().toISOString(),
- })) : [];
+ console.log('[WorkNoteChat] Loaded work notes from backend:', rows);
+
+ const mapped = Array.isArray(rows) ? rows.map((m: any) => {
+ const userName = m.userName || m.user_name || 'User';
+ const userRole = m.userRole || m.user_role; // Get role directly from backend
+ const participantRole = getFormattedRole(userRole);
+ const noteUserId = m.userId || m.user_id;
+
+ console.log('[WorkNoteChat] Mapping note:', {
+ rawNote: m,
+ extracted: { userName, userRole, participantRole }
+ });
+
+ return {
+ id: m.noteId || m.note_id || m.id || String(Math.random()),
+ user: {
+ name: userName,
+ avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
+ role: participantRole
+ },
+ content: m.message || '',
+ timestamp: m.createdAt || m.created_at || new Date().toISOString(),
+ attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({
+ attachmentId: a.attachmentId || a.attachment_id,
+ name: a.fileName || a.file_name || a.name,
+ fileName: a.fileName || a.file_name || a.name,
+ url: a.storageUrl || a.storage_url || a.url || '#',
+ type: a.fileType || a.file_type || a.type || 'file',
+ fileType: a.fileType || a.file_type || a.type || 'file',
+ fileSize: a.fileSize || a.file_size
+ })) : undefined,
+ isCurrentUser: noteUserId === currentUserId
+ };
+ }) : [];
setMessages(mapped as any);
- } catch {}
+ } catch (err) {
+ console.error('[WorkNoteChat] Error loading work notes:', err);
+ }
})();
}
- }, [externalMessages, effectiveRequestId]);
+ }, [externalMessages, effectiveRequestId, participants]);
const handleFileSelect = (e: React.ChangeEvent) => {
if (e.target.files) {
@@ -511,6 +695,43 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo
fileInputRef.current?.click();
};
+ // Handler for adding spectator
+ const handleAddSpectator = async (email: string) => {
+ try {
+ await addSpectator(effectiveRequestId, email);
+ // Refresh participants list
+ const details = await getWorkflowDetails(effectiveRequestId);
+ const rows = Array.isArray(details?.participants) ? details.participants : [];
+ if (rows.length) {
+ const mapped: Participant[] = rows.map((p: any) => {
+ const participantType = p.participantType || p.participant_type || 'participant';
+ const userId = p.userId || p.user_id || '';
+ const userName = p.userName || p.user_name || p.userEmail || p.user_email || 'User';
+ const userEmail = p.userEmail || p.user_email || '';
+ const initials = userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase();
+
+ return {
+ name: userName,
+ avatar: initials,
+ role: formatParticipantRole(participantType),
+ status: 'online' as const,
+ email: userEmail,
+ lastSeen: undefined,
+ permissions: ['read'],
+ userId
+ };
+ });
+ setParticipants(mapped);
+ }
+ setShowAddSpectatorModal(false);
+ alert('Spectator added successfully');
+ } catch (error: any) {
+ console.error('Failed to add spectator:', error);
+ alert(error?.response?.data?.error || 'Failed to add spectator');
+ throw error;
+ }
+ };
+
// Emoji picker data - Expanded collection
const emojiList = [
// Smileys & Emotions
@@ -605,7 +826,7 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo
};
return (
-
'); }; +const formatFileSize = (bytes: number): string => { + if (bytes < 1024) return bytes + ' B'; + if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'; + return (bytes / (1024 * 1024)).toFixed(1) + ' MB'; +}; + // File icon components using Lucide React const FileIcon = ({ type }: { type: string }) => { const iconClass = "w-4 h-4"; - switch (type.toLowerCase()) { - case 'pdf': return
+
{/* Header - Fixed at top */}
-
@@ -647,14 +868,6 @@ export function WorkNoteChat({ requestId, onBack, messages: externalMessages, lo