feat: Enable agents to initiate conversations with connected users and refactor the conversation start flow to be role-aware.

src/components/message/MessagingPage.tsx

@@ -6,6 +6,7 @@ import { useSession } from 'next-auth/react';
 import { ChatHeader } from './ChatHeader';
 import { MessageInput } from './MessageInput';
 import { ChatDropdownMenu, type DropdownMenuItem } from './ChatDropdownMenu';
+import { NewConversationModal, type ConnectedContact } from './NewConversationModal';
 import { useMessaging } from '@/hooks/useMessaging';
 import { connectionRequestsService, type ConnectionRequest } from '@/services/connection-requests.service';
 import { uploadService } from '@/services/upload.service';
@@ -112,13 +113,15 @@ function AvatarWithPlaceholder({ src, alt, size }: { src: string; alt: string; s
   );
 }
 
-// Connected agent with avatar URL
+// Connected contact with avatar URL (used for both user-side agents and agent-side users)
 interface ConnectedAgent {
   agentProfileId: string;
+  userId?: string; // The user's ID (for agent-side contacts)
   name: string;
   avatar: string | null;
   avatarUrl: string | null;
   headline: string | null;
+  email: string | null;
   city: string | null;
   state: string | null;
 }
@@ -154,6 +157,7 @@ export function MessagingPage() {
   const [connectedAgents, setConnectedAgents] = useState<ConnectedAgent[]>([]);
   const [isLoadingAgents, setIsLoadingAgents] = useState(false);
   const [isStartingConversation, setIsStartingConversation] = useState<string | null>(null);
+  const [isComposeOpen, setIsComposeOpen] = 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)
@@ -196,6 +200,7 @@ export function MessagingPage() {
                 avatar: agent?.avatar || null,
                 avatarUrl,
                 headline: agent?.headline || null,
+                email: null,
                 city: agent?.city || null,
                 state: agent?.state || null,
               };
@@ -204,9 +209,43 @@ export function MessagingPage() {
 
           setConnectedAgents(agents);
         } else {
-          // For AGENT role - they don't start conversations, they receive them
-          // So we don't need to show a list to start conversations
-          setConnectedAgents([]);
+          // AGENT role — fetch accepted connections (users who connected with this agent)
+          const requests = await connectionRequestsService.getReceivedRequests('ACCEPTED');
+
+          const users: ConnectedAgent[] = await Promise.all(
+            requests.map(async (req) => {
+              const user = req.user;
+              const profile = user?.userProfile;
+              let avatarUrl: string | null = null;
+
+              const avatarKey = profile?.avatar || user?.avatar;
+              if (avatarKey) {
+                try {
+                  avatarUrl = await uploadService.getPresignedDownloadUrl(avatarKey);
+                } catch {
+                  avatarUrl = null;
+                }
+              }
+
+              const fullName = profile
+                ? `${profile.firstName || ''} ${profile.lastName || ''}`.trim()
+                : '';
+
+              return {
+                agentProfileId: req.agentProfileId,
+                userId: req.userId,
+                name: fullName || user?.email || 'User',
+                avatar: avatarKey || null,
+                avatarUrl,
+                headline: null,
+                email: user?.email || null,
+                city: null,
+                state: null,
+              };
+            })
+          );
+
+          setConnectedAgents(users);
         }
       } catch (error) {
         console.error('Failed to fetch connected contacts:', error);
@@ -321,18 +360,21 @@ export function MessagingPage() {
     setMessageFileUrls({});
   }, [currentConversation?.id]);
 
-  // Handle starting a new conversation with an agent
-  const handleStartConversation = useCallback(async (agentProfileId: string) => {
-    setIsStartingConversation(agentProfileId);
+  // Handle starting a new conversation — role-aware
+  const handleStartConversation = useCallback(async (contactId: string) => {
+    setIsStartingConversation(contactId);
     try {
-      const conversation = await startConversation(agentProfileId);
+      const body = userRole === 'AGENT'
+        ? { userId: contactId }
+        : { agentProfileId: contactId };
+      const conversation = await startConversation(body);
       await selectConversation(conversation.id);
     } catch (error) {
       console.error('Failed to start conversation:', error);
     } finally {
       setIsStartingConversation(null);
     }
-  }, [startConversation, selectConversation]);
+  }, [startConversation, selectConversation, userRole]);
 
   // Handle sending a message
   const handleSendMessage = useCallback(async (content: string) => {
@@ -518,6 +560,26 @@ export function MessagingPage() {
         </div>
       )}
 
+      {/* New conversation modal */}
+      <NewConversationModal
+        isOpen={isComposeOpen}
+        onClose={() => setIsComposeOpen(false)}
+        contacts={connectedAgents.map((agent) => ({
+          id: userRole === 'AGENT' ? agent.userId! : agent.agentProfileId,
+          name: agent.name,
+          avatar: agent.avatar,
+          avatarUrl: agent.avatarUrl,
+          headline: agent.headline,
+          email: agent.email,
+          city: agent.city,
+          state: agent.state,
+        }))}
+        isLoading={isLoadingAgents}
+        onStartConversation={async (contactId) => {
+          await handleStartConversation(contactId);
+        }}
+      />
+
       <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">
@@ -572,7 +634,10 @@ export function MessagingPage() {
                 onClose={() => setIsPageMenuOpen(false)}
               />
             </div>
-            <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <button
+              onClick={() => setIsComposeOpen(true)}
+              className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
+            >
               <Image
                 src="/assets/icons/compose-icon.svg"
                 alt="Compose"
@@ -597,7 +662,7 @@ export function MessagingPage() {
                 {/* Header for connected agents */}
                 <div className="p-4 border-b border-[#00293d]/10">
                   <p className="font-serif font-normal text-[14px] text-[#00293D]/50 text-center">
-                    {searchQuery ? 'No conversations found' : 'No conversations yet. Start a conversation with an agent!'}
+                    {searchQuery ? 'No conversations found' : `No conversations yet. Start a conversation with ${userRole === 'AGENT' ? 'a user' : 'an agent'}!`}
                   </p>
                 </div>
 
@@ -605,7 +670,7 @@ export function MessagingPage() {
                 {connectedAgents.length > 0 ? (
                   <div className="flex-1 overflow-y-auto p-2 space-y-2 custom-scrollbar">
                     <p className="px-2 py-1 font-fractul font-medium text-[12px] text-[#00293D]/70 uppercase tracking-wide">
-                      Your Connected Agents
+                      {userRole === 'AGENT' ? 'Your Connected Users' : 'Your Connected Agents'}
                     </p>
                     {connectedAgents
                       .filter((agent) =>
@@ -614,7 +679,7 @@ export function MessagingPage() {
                       .map((agent) => (
                         <button
                           key={agent.agentProfileId}
-                          onClick={() => handleStartConversation(agent.agentProfileId)}
+                          onClick={() => handleStartConversation(userRole === 'AGENT' ? agent.userId! : agent.agentProfileId)}
                           disabled={isStartingConversation === agent.agentProfileId}
                           className="w-full flex items-center gap-3 p-4 rounded-[15px] cursor-pointer transition-colors hover:bg-[#00293d]/5 disabled:opacity-50"
                           style={{ border: '1px solid rgba(0, 41, 61, 0.1)' }}
@@ -668,7 +733,7 @@ export function MessagingPage() {
                   </div>
                 ) : (
                   <div className="flex-1 flex items-center justify-center text-[#00293D]/50 font-serif p-4 text-center">
-                    <p>No connected agents yet. Connect with agents to start messaging!</p>
+                    <p>{userRole === 'AGENT' ? 'No connected users yet.' : 'No connected agents yet. Connect with agents to start messaging!'}</p>
                   </div>
                 )}
               </div>