feat: improve message scrolling and enhance conversation header UX

- Fixed auto-scrolling to the latest message by targeting the correct scroll container.
- Updated the conversation header to include a clickable link to the recipient's profile.

frontend/src/app/(dashboard)/messages/page.tsx

@@ -151,7 +151,12 @@ export default function MessagesPage() {
 
 	React.useEffect(() => {
 		if (scrollRef.current) {
-			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+			const scrollContainer = scrollRef.current.querySelector(
+				"[data-slot='scroll-area-viewport']",
+			);
+			if (scrollContainer) {
+				scrollContainer.scrollTop = scrollContainer.scrollHeight;
+			}
 		}
 	}, []);
 
@@ -334,19 +339,24 @@ export default function MessagesPage() {
 				{activeConv ? (
 					<>
 						{/* Header */}
-						<div className="p-4 border-b flex items-center gap-3">
+						<div className="p-4 border-b flex items-center justify-between">
-							<Avatar className="h-8 w-8">
+							<Link
-								<AvatarImage src={activeConv.recipient.avatarUrl} />
+								href={`/user/${activeConv.recipient.username}`}
-								<AvatarFallback>
+								className="flex items-center gap-3 hover:opacity-80 transition-opacity"
-									{activeConv.recipient.username[0].toUpperCase()}
+							>
-								</AvatarFallback>
+								<Avatar className="h-8 w-8">
-							</Avatar>
+									<AvatarImage src={activeConv.recipient.avatarUrl} />
-							<div>
+									<AvatarFallback>
-								<h3 className="font-bold leading-none">
+										{activeConv.recipient.username[0].toUpperCase()}
-									{activeConv.recipient.displayName || activeConv.recipient.username}
+									</AvatarFallback>
-								</h3>
+								</Avatar>
-								<span className="text-xs text-green-500 font-medium">En ligne</span>
+								<div>
-							</div>
+									<h3 className="font-bold leading-none">
+										{activeConv.recipient.displayName || activeConv.recipient.username}
+									</h3>
+									<span className="text-xs text-green-500 font-medium">En ligne</span>
+								</div>
+							</Link>
 						</div>
 
 						{/* Messages */}