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

backend/src/services/chatServer.ts

@@ -2,18 +2,26 @@ import WebSocket from 'ws';
 import { supabase } from '../lib/supabase';
 import { detectCrisis, getCrisisResourcesMessage } from './crisisDetection';
 
+export interface AuthenticatedWebSocket extends WebSocket {
+  isAlive?: boolean;
+  roomId?: string;
+  userId?: string;
+  nickname?: string;
+}
+
 interface ChatMessage {
-  type: 'join' | 'leave' | 'chat' | 'crisis_alert';
+  type: 'join' | 'leave' | 'chat' | 'crisis_alert' | 'typing';
   roomId?: string;
   userId?: string;
   nickname?: string;
   content?: string;
   riskLevel?: string;
   timestamp?: string;
+  isTyping?: boolean;
 }
 
 interface RoomMember {
-  ws: WebSocket;
+  ws: AuthenticatedWebSocket;
   userId: string;
   nickname: string;
 }
@@ -30,7 +38,8 @@ export class ChatServer {
 
     // Heartbeat to detect dead connections
     setInterval(() => {
-      this.wss.clients.forEach((ws: any) => {
+      this.wss.clients.forEach((client) => {
+        const ws = client as AuthenticatedWebSocket;
         if (ws.isAlive === false) {
           return ws.terminate();
         }
@@ -40,12 +49,13 @@ export class ChatServer {
     }, 30000);
   }
 
-  private handleConnection(ws: WebSocket) {
+  private handleConnection(client: WebSocket) {
+    const ws = client as AuthenticatedWebSocket;
     console.log('New WebSocket connection');
 
-    (ws as any).isAlive = true;
+    ws.isAlive = true;
     ws.on('pong', () => {
-      (ws as any).isAlive = true;
+      ws.isAlive = true;
     });
 
     ws.on('message', async (data: string) => {
@@ -68,7 +78,7 @@ export class ChatServer {
     });
   }
 
-  private async handleMessage(ws: WebSocket, message: ChatMessage) {
+  private async handleMessage(ws: AuthenticatedWebSocket, message: ChatMessage) {
     switch (message.type) {
       case 'join':
         await this.handleJoin(ws, message);
@@ -79,12 +89,29 @@ 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 async handleJoin(ws: WebSocket, message: ChatMessage) {
+  private handleTyping(ws: AuthenticatedWebSocket, message: ChatMessage) {
+    const { roomId, userId, nickname } = ws;
+
+    if (roomId && userId) {
+      // Broadcast to other users in the room
+      this.broadcastToRoom(roomId, {
+        type: 'typing',
+        userId,
+        nickname,
+        isTyping: message.isTyping,
+      }, userId); // Exclude sender
+    }
+  }
+
+  private async handleJoin(ws: AuthenticatedWebSocket, message: ChatMessage) {
     const { roomId, userId, nickname } = message;
 
     if (!roomId || !userId || !nickname) {
@@ -102,9 +129,9 @@ export class ChatServer {
       room.add({ ws, userId, nickname });
 
       // Store connection metadata
-      (ws as any).roomId = roomId;
-      (ws as any).userId = userId;
-      (ws as any).nickname = nickname;
+      ws.roomId = roomId;
+      ws.userId = userId;
+      ws.nickname = nickname;
 
       // Fetch recent messages from database (without profile join - nicknames come from messages)
       const { data: messages, error } = await supabase
@@ -148,10 +175,8 @@ export class ChatServer {
     }
   }
 
-  private handleLeave(ws: WebSocket, message: ChatMessage) {
-    const roomId = (ws as any).roomId;
-    const userId = (ws as any).userId;
-    const nickname = (ws as any).nickname;
+  private handleLeave(ws: AuthenticatedWebSocket, message: ChatMessage) {
+    const { roomId, userId, nickname } = ws;
 
     if (roomId && userId) {
       const room = this.rooms.get(roomId);
@@ -176,11 +201,9 @@ export class ChatServer {
     }
   }
 
-  private async handleChatMessage(ws: WebSocket, message: ChatMessage) {
+  private async handleChatMessage(ws: AuthenticatedWebSocket, message: ChatMessage) {
     const { content } = message;
-    const roomId = (ws as any).roomId;
-    const userId = (ws as any).userId;
-    const nickname = (ws as any).nickname;
+    const { roomId, userId, nickname } = ws;
 
     if (!content || !roomId || !userId) {
       ws.send(JSON.stringify({ type: 'error', message: 'Missing required fields' }));
@@ -238,9 +261,8 @@ export class ChatServer {
     }
   }
 
-  private handleDisconnect(ws: WebSocket) {
-    const roomId = (ws as any).roomId;
-    const userId = (ws as any).userId;
+  private handleDisconnect(ws: AuthenticatedWebSocket) {
+    const { roomId, userId } = ws;
 
     if (roomId && userId) {
       const room = this.rooms.get(roomId);
@@ -256,13 +278,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);
       }
     });

backend/src/services/crisisDetection.ts

@@ -97,7 +97,7 @@ async function analyzeWithHuggingFace(
       return null;
     }
 
-    const result: HuggingFaceResponse[][] = await response.json();
+    const result = (await response.json()) as HuggingFaceResponse[][];
     return result[0] || null;
   } catch (error) {
     console.error('Error calling HuggingFace API:', error);
@@ -110,49 +110,23 @@ async function analyzeWithHuggingFace(
  */
 function analyzeWithKeywords(message: string): CrisisDetectionResult {
   const lowerMessage = message.toLowerCase();
-  const triggeredKeywords: string[] = [];
+
+  const foundCritical = CRISIS_KEYWORDS.critical.filter(k => lowerMessage.includes(k));
+  const foundHigh = CRISIS_KEYWORDS.high.filter(k => lowerMessage.includes(k));
+  const foundMedium = CRISIS_KEYWORDS.medium.filter(k => lowerMessage.includes(k));
+  const foundLow = CRISIS_KEYWORDS.low.filter(k => lowerMessage.includes(k));
+
+  const triggeredKeywords = [...foundCritical, ...foundHigh, ...foundMedium, ...foundLow];
+
   let highestRiskLevel: 'none' | 'low' | 'medium' | 'high' | 'critical' = 'none';
-
-  // Check critical keywords
-  for (const keyword of CRISIS_KEYWORDS.critical) {
-    if (lowerMessage.includes(keyword)) {
-      triggeredKeywords.push(keyword);
-      highestRiskLevel = 'critical';
-    }
-  }
-
-  // Check high-risk keywords
-  if (highestRiskLevel !== 'critical') {
-    for (const keyword of CRISIS_KEYWORDS.high) {
-      if (lowerMessage.includes(keyword)) {
-        triggeredKeywords.push(keyword);
-        if (highestRiskLevel !== 'high') {
-          highestRiskLevel = 'high';
-        }
-      }
-    }
-  }
-
-  // Check medium-risk keywords
-  if (highestRiskLevel === 'none' || highestRiskLevel === 'low') {
-    for (const keyword of CRISIS_KEYWORDS.medium) {
-      if (lowerMessage.includes(keyword)) {
-        triggeredKeywords.push(keyword);
-        if (highestRiskLevel !== 'medium' && highestRiskLevel !== 'high') {
-          highestRiskLevel = 'medium';
-        }
-      }
-    }
-  }
-
-  // Check low-risk keywords
-  if (highestRiskLevel === 'none') {
-    for (const keyword of CRISIS_KEYWORDS.low) {
-      if (lowerMessage.includes(keyword)) {
-        triggeredKeywords.push(keyword);
-        highestRiskLevel = 'low';
-      }
-    }
+  if (foundCritical.length > 0) {
+    highestRiskLevel = 'critical';
+  } else if (foundHigh.length > 0) {
+    highestRiskLevel = 'high';
+  } else if (foundMedium.length > 0) {
+    highestRiskLevel = 'medium';
+  } else if (foundLow.length > 0) {
+    highestRiskLevel = 'low';
   }
 
   return {

frontend/src/components/ChatRoom.tsx

@@ -76,13 +76,24 @@ 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<ReturnType<typeof setTimeout>>();
+
+  const { isConnected, connectionError, sendMessage, sendTyping } = useWebSocket({
     roomId: room.id,
     userId: currentUser.id,
     nickname: currentUser.nickname,
@@ -95,11 +106,38 @@ 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;
+    }, 1000);
+  };
+
+
   useEffect(() => {
     // Scroll to bottom when new messages arrive
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [messages]);
 
+  useEffect(() => {
+    // Clear typing timeout and reset typing users on unmount
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+      setTypingUsers(new Set());
+    };
+  }, []);
+
   const handleSendMessage = (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -248,13 +286,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 {
@@ -34,7 +35,7 @@ export function useWebSocket({
   const wsRef = useRef<WebSocket | null>(null);
   const [isConnected, setIsConnected] = useState(false);
   const [connectionError, setConnectionError] = useState<string | null>(null);
-  const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const reconnectAttemptsRef = useRef(0);
   const maxReconnectAttempts = 2;
 
@@ -124,6 +125,7 @@ export function useWebSocket({
         );
       }
 
+      wsRef.current.onclose = null; // Prevent reconnect loop
       wsRef.current.close();
       wsRef.current = null;
     }
@@ -164,6 +166,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,
+            isTyping,
+          })
+        );
+      }
+    },
     reconnect: connect,
     disconnect,
   };

frontend/src/lib/api.ts

@@ -4,13 +4,11 @@ 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 = {
-    'Content-Type': 'application/json',
-    ...options.headers,
-  };
+  const headers = new Headers(options.headers);
+  headers.set('Content-Type', 'application/json');
 
   if (session?.access_token) {
-    headers['Authorization'] = `Bearer ${session.access_token}`;
+    headers.set('Authorization', `Bearer ${session.access_token}`);
   }
 
   const response = await fetch(`${API_BASE_URL}${endpoint}`, {