feat: Implement real-time messaging functionality with dedicated services, types, a custom hook, and UI integration.

src/components/message/ChatHeader.tsx

@@ -10,6 +10,8 @@ interface ChatHeaderProps {
   isOnline?: boolean;
   pronouns?: string;
   expertise?: string[];
+  isTyping?: boolean;
+  typingText?: string;
 }
 
 export function ChatHeader({
@@ -20,6 +22,8 @@ export function ChatHeader({
   isOnline = false,
   pronouns,
   expertise = [],
+  isTyping = false,
+  typingText,
 }: ChatHeaderProps) {
   return (
     <div className="border-b border-[#00293d]/10 pb-4">
@@ -34,7 +38,11 @@ export function ChatHeader({
             {role}
           </span>
           <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
-            {lastSeen}
+            {isTyping ? (
+              <span className="text-[#e58625] italic">{typingText}</span>
+            ) : (
+              lastSeen
+            )}
           </span>
         </div>
         <div className="flex items-center gap-2">
@@ -67,7 +75,8 @@ export function ChatHeader({
               alt={name}
               width={50}
               height={50}
-              className="w-full h-full object-cover rounded-full"
+              className="object-cover rounded-full"
+              style={{ width: '100%', height: '100%' }}
             />
           </div>
           {isOnline && (