feat: implement user reporting functionality with a dedicated modal and service, integrated into the chat header.

src/components/message/MessagingPage.tsx

@@ -7,6 +7,7 @@ import { ChatHeader } from './ChatHeader';
 import { MessageInput } from './MessageInput';
 import { ChatDropdownMenu, type DropdownMenuItem } from './ChatDropdownMenu';
 import { NewConversationModal, type ConnectedContact } from './NewConversationModal';
+import { ReportUserModal } from './ReportUserModal';
 import { useMessaging } from '@/hooks/useMessaging';
 import { connectionRequestsService, type ConnectionRequest } from '@/services/connection-requests.service';
 import { uploadService } from '@/services/upload.service';
@@ -159,6 +160,7 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
   const [isLoadingAgents, setIsLoadingAgents] = useState(false);
   const [isStartingConversation, setIsStartingConversation] = useState<string | null>(null);
   const [isComposeOpen, setIsComposeOpen] = useState(false);
+  const [isReportModalOpen, setIsReportModalOpen] = useState(false);
   // Store converted avatar URLs by conversation ID
   const [conversationAvatarUrls, setConversationAvatarUrls] = useState<Record<string, string>>({});
   // Store converted file URLs by message ID (for S3-stored images/files)
@@ -595,6 +597,17 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
         }}
       />
 
+      {/* Report user modal */}
+      {currentConversation && (
+        <ReportUserModal
+          isOpen={isReportModalOpen}
+          onClose={() => setIsReportModalOpen(false)}
+          reportedUserId={currentConversation.otherParty?.userId || currentConversation.otherParty?.id || ''}
+          reportedUserName={currentConversation.otherParty?.name || 'User'}
+          conversationId={currentConversation.id}
+        />
+      )}
+
       <div className="border border-[#00293d]/10 rounded-[20px] bg-white overflow-hidden">
         {/* Header */}
         <div className="flex items-center gap-4 p-4 border-b border-[#00293d]/10">
@@ -818,6 +831,7 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
                   typingText={typingUserNames.length > 0 ? `${typingUserNames.join(', ')} is typing...` : undefined}
                   onClearChat={clearMessages}
                   onDeleteConversation={handleDeleteConversation}
+                  onReportUser={() => setIsReportModalOpen(true)}
                 />
 
                 {/* Messages area wrapper */}