feat: add typing indicator for better UI experience issue #8

backend/src/services/chatServer.ts

@@ -3,7 +3,7 @@ import { supabase } from '../lib/supabase';
 import { detectCrisis, getCrisisResourcesMessage } from './crisisDetection';
 
 interface ChatMessage {
-  type: 'join' | 'leave' | 'chat' | 'crisis_alert';
+  type: 'join' | 'leave' | 'chat' | 'crisis_alert' | 'typing';
   roomId?: string;
   userId?: string;
   nickname?: string;
@@ -79,11 +79,30 @@ export class ChatServer {
       case 'chat':
         await this.handleChatMessage(ws, message);
         break;
+      case 'typing':
+        this.handleTyping(ws, message);
+        break;
       default:
         ws.send(JSON.stringify({ type: 'error', message: 'Unknown message type' }));
     }
   }
 
+  private handleTyping(ws: WebSocket, message: ChatMessage) {
+    const roomId = (ws as any).roomId;
+    const userId = (ws as any).userId;
+    const nickname = (ws as any).nickname;
+
+    if (roomId && userId) {
+      // Broadcast to other users in the room
+      this.broadcastToRoom(roomId, {
+        type: 'typing',
+        userId,
+        nickname,
+        isTyping: message.content === 'true', // Use content field to convey on/off state if needed, or just presence of event
+      }, userId); // Exclude sender
+    }
+  }
+
   private async handleJoin(ws: WebSocket, message: ChatMessage) {
     const { roomId, userId, nickname } = message;
 
@@ -256,13 +275,13 @@ export class ChatServer {
     console.log('WebSocket disconnected');
   }
 
-  private broadcastToRoom(roomId: string, message: any) {
+  private broadcastToRoom(roomId: string, message: any, excludeUserId?: string) {
     const room = this.rooms.get(roomId);
     if (!room) return;
 
     const messageStr = JSON.stringify(message);
     room.forEach((member) => {
-      if (member.ws.readyState === WebSocket.OPEN) {
+      if (member.userId !== excludeUserId && member.ws.readyState === WebSocket.OPEN) {
         member.ws.send(messageStr);
       }
     });

frontend/src/components/ChatRoom.tsx

@@ -76,13 +76,25 @@ export default function ChatRoom({ room, currentUser, onClose }: ChatRoomProps)
           type: 'system',
         },
       ]);
-    } else if (message.type === 'crisis_alert') {
-      setShowCrisisAlert(true);
       setTimeout(() => setShowCrisisAlert(false), 10000);
+    } else if (message.type === 'typing') {
+      const { nickname, isTyping } = message;
+      setTypingUsers((prev) => {
+        const newSet = new Set(prev);
+        if (isTyping) {
+          newSet.add(nickname);
+        } else {
+          newSet.delete(nickname);
+        }
+        return newSet;
+      });
     }
   }, []);
 
-  const { isConnected, connectionError, sendMessage } = useWebSocket({
+  const [typingUsers, setTypingUsers] = useState<Set<string>>(new Set());
+  const typingTimeoutRef = useRef<NodeJS.Timeout>();
+
+  const { isConnected, connectionError, sendMessage, sendTyping } = useWebSocket({
     roomId: room.id,
     userId: currentUser.id,
     nickname: currentUser.nickname,
@@ -95,6 +107,23 @@ export default function ChatRoom({ room, currentUser, onClose }: ChatRoomProps)
     },
   });
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+
+    // Debounce typing indicator
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    } else {
+      sendTyping(true);
+    }
+
+    typingTimeoutRef.current = setTimeout(() => {
+      sendTyping(false);
+      typingTimeoutRef.current = undefined;
+    }, 2000);
+  };
+
+
   useEffect(() => {
     // Scroll to bottom when new messages arrive
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -248,13 +277,20 @@ export default function ChatRoom({ room, currentUser, onClose }: ChatRoomProps)
           <div ref={messagesEndRef} />
         </div>
 
+        {/* Typing Indicator */}
+        {typingUsers.size > 0 && (
+          <div className="px-4 py-2 text-xs text-gray-500 italic bg-gray-50 border-t border-gray-100">
+            {Array.from(typingUsers).join(', ')} {typingUsers.size === 1 ? 'is' : 'are'} typing...
+          </div>
+        )}
+
         {/* Input */}
         <form onSubmit={handleSendMessage} className="p-4 border-t border-gray-200 bg-white">
           <div className="flex gap-2">
             <input
               type="text"
               value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
+              onChange={handleInputChange}
               placeholder={isConnected ? 'Type your message...' : 'Connecting...'}
               disabled={!isConnected}
               className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed"

frontend/src/hooks/useWebSocket.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
 
 interface ChatMessage {
-  type: 'join' | 'leave' | 'chat' | 'crisis_alert' | 'history' | 'error';
+  type: 'join' | 'leave' | 'chat' | 'crisis_alert' | 'history' | 'error' | 'typing';
   roomId?: string;
   userId?: string;
   nickname?: string;
@@ -10,6 +10,7 @@ interface ChatMessage {
   timestamp?: string;
   messages?: any[];
   message?: string;
+  isTyping?: boolean;
 }
 
 interface UseWebSocketOptions {
@@ -164,6 +165,19 @@ export function useWebSocket({
     isConnected,
     connectionError,
     sendMessage,
+    sendTyping: (isTyping: boolean) => {
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(
+          JSON.stringify({
+            type: 'typing',
+            roomId,
+            userId,
+            nickname,
+            content: isTyping ? 'true' : 'false',
+          })
+        );
+      }
+    },
     reconnect: connect,
     disconnect,
   };

frontend/src/lib/api.ts

@@ -4,9 +4,9 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001
 async function apiFetch(endpoint: string, options: RequestInit = {}) {
   const { data: { session } } = await (await import('./supabase')).supabase.auth.getSession();
 
-  const headers: HeadersInit = {
+  const headers: Record<string, string> = {
     'Content-Type': 'application/json',
-    ...options.headers,
+    ...(options.headers as Record<string, string>),
   };
 
   if (session?.access_token) {