hazo_chat 2.0.16 → 2.1.1

package/dist/hooks/use_chat_messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_chat_messages.d.ts","sourceRoot":"","sources":["../../src/hooks/use_chat_messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAKH,OAAO,KAAK,EAKV,qBAAqB,EAEtB,MAAM,mBAAmB,CAAC;AAQ3B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMtD,MAAM,WAAW,qBAAqB;IACpC,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,iGAAiG;IACjG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA6BD,wBAAgB,eAAe,CAAC,EAC9B,gBAAgB,EAChB,YAAiB,EACjB,cAAuB,EACvB,YAA+B,EAC/B,aAAqC,EACrC,gBAA2C,EAC3C,iBAA6C,EAC9C,EAAE,qBAAqB,GAAG,qBAAqB,CA6hB/C"}
+{"version":3,"file":"use_chat_messages.d.ts","sourceRoot":"","sources":["../../src/hooks/use_chat_messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH,OAAO,KAAK,EAKV,qBAAqB,EAErB,YAAY,EACb,MAAM,mBAAmB,CAAC;AA0B3B,MAAM,WAAW,qBAAqB;IACpC,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,iGAAiG;IACjG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAoDD,wBAAgB,eAAe,CAAC,EAC9B,gBAAgB,EAChB,YAAiB,EACjB,cAAuB,EACvB,YAA+B,EAC/B,aAAqC,EACrC,gBAA2C,EAC3C,iBAA6C,GAC9C,EAAE,qBAAqB,GAAG,qBAAqB,CAgqB/C"}

package/dist/hooks/use_chat_messages.js

@@ -7,17 +7,33 @@
  * - Optimistic updates for sent messages
  * - Soft delete functionality
  * - Exponential backoff on errors
+ * - Abstracted transport layer for future WebSocket/SSE support
  *
  * Uses fetch() to call API endpoints instead of direct database access.
  * This allows the hook to work in client components without Node.js dependencies.
  */
 'use client';
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { DEFAULT_REALTIME_MODE, DEFAULT_POLLING_INTERVAL, DEFAULT_MESSAGES_PER_PAGE, MAX_RETRY_ATTEMPTS, RETRY_BASE_DELAY } from '../lib/constants.js';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { DEFAULT_REALTIME_MODE, DEFAULT_POLLING_INTERVAL, DEFAULT_MESSAGES_PER_PAGE, MAX_RETRY_ATTEMPTS, } from '../lib/constants.js';
+// ============================================================================
+// Constants
+// ============================================================================
+/** Maximum entries in the user profile cache */
+const PROFILE_CACHE_MAX_SIZE = 200;
+/** Cache TTL in milliseconds (30 minutes) */
+const PROFILE_CACHE_TTL = 1000 * 60 * 30;
+/** Maximum polling delay cap in milliseconds */
+const MAX_POLLING_DELAY = 30000;
+// ============================================================================
+// Helper: Generate unique ID for optimistic messages
+// ============================================================================
+function generateOptimisticId() {
+    return `optimistic-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
 // ============================================================================
 // Hook Implementation
 // ============================================================================
-export function useChatMessages({ receiver_user_id, reference_id = '', reference_type = 'chat', api_base_url = '/api/hazo_chat', realtime_mode = DEFAULT_REALTIME_MODE, polling_interval = DEFAULT_POLLING_INTERVAL, messages_per_page = DEFAULT_MESSAGES_PER_PAGE }) {
+export function useChatMessages({ receiver_user_id, reference_id = '', reference_type = 'chat', api_base_url = '/api/hazo_chat', realtime_mode = DEFAULT_REALTIME_MODE, polling_interval = DEFAULT_POLLING_INTERVAL, messages_per_page = DEFAULT_MESSAGES_PER_PAGE, }) {
     // -------------------------------------------------------------------------
     // State
     // -------------------------------------------------------------------------
@@ -29,13 +45,26 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
     const [polling_status, set_polling_status] = useState('connected');
     const [current_user_id, set_current_user_id] = useState(null);
     // -------------------------------------------------------------------------
-    // Refs
+    // Refs (stable across renders)
     // -------------------------------------------------------------------------
-    const cursor_ref = useRef(0);
+    const cursor_ref = useRef(null);
     const retry_count_ref = useRef(0);
     const user_profiles_cache_ref = useRef(new Map());
     const polling_timer_ref = useRef(null);
     const is_mounted_ref = useRef(true);
+    const is_polling_ref = useRef(false);
+    // -------------------------------------------------------------------------
+    // Memoized config to prevent effect re-runs
+    // -------------------------------------------------------------------------
+    const config = useMemo(() => ({
+        receiver_user_id,
+        reference_id,
+        reference_type,
+        api_base_url,
+        realtime_mode,
+        polling_interval,
+        messages_per_page,
+    }), [receiver_user_id, reference_id, reference_type, api_base_url, realtime_mode, polling_interval, messages_per_page]);
     // -------------------------------------------------------------------------
     // Cleanup on unmount
     // -------------------------------------------------------------------------
@@ -44,29 +73,77 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
         return () => {
             is_mounted_ref.current = false;
             if (polling_timer_ref.current) {
-                clearInterval(polling_timer_ref.current);
+                clearTimeout(polling_timer_ref.current);
+                polling_timer_ref.current = null;
             }
         };
     }, []);
     // -------------------------------------------------------------------------
-    // Fetch user profiles via API
+    // User profile cache with TTL and eviction
+    // -------------------------------------------------------------------------
+    const get_cached_profile = useCallback((user_id) => {
+        const entry = user_profiles_cache_ref.current.get(user_id);
+        if (!entry)
+            return null;
+        // Check TTL
+        if (Date.now() - entry.timestamp > PROFILE_CACHE_TTL) {
+            user_profiles_cache_ref.current.delete(user_id);
+            return null;
+        }
+        return entry.value;
+    }, []);
+    const set_cached_profile = useCallback((profile) => {
+        // Evict oldest entries if cache is too large
+        if (user_profiles_cache_ref.current.size >= PROFILE_CACHE_MAX_SIZE) {
+            // Find and remove oldest entry
+            let oldest_key = null;
+            let oldest_timestamp = Infinity;
+            user_profiles_cache_ref.current.forEach((entry, key) => {
+                if (entry.timestamp < oldest_timestamp) {
+                    oldest_timestamp = entry.timestamp;
+                    oldest_key = key;
+                }
+            });
+            if (oldest_key) {
+                user_profiles_cache_ref.current.delete(oldest_key);
+            }
+        }
+        user_profiles_cache_ref.current.set(profile.id, {
+            value: profile,
+            timestamp: Date.now(),
+        });
+    }, []);
+    // -------------------------------------------------------------------------
+    // Fetch user profiles via API (with cache)
     // -------------------------------------------------------------------------
     const fetch_user_profiles = useCallback(async (user_ids) => {
-        const uncached_ids = user_ids.filter((id) => !user_profiles_cache_ref.current.has(id));
+        const result = new Map();
+        const uncached_ids = [];
+        // Check cache first
+        user_ids.forEach((id) => {
+            const cached = get_cached_profile(id);
+            if (cached) {
+                result.set(id, cached);
+            }
+            else {
+                uncached_ids.push(id);
+            }
+        });
+        // Fetch uncached profiles
         if (uncached_ids.length > 0) {
             try {
-                // Use the hazo_auth profiles endpoint
                 const response = await fetch('/api/hazo_auth/profiles', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ user_ids: uncached_ids }),
-                    credentials: 'include'
+                    credentials: 'include',
                 });
                 if (response.ok) {
                     const data = await response.json();
                     if (data.success && data.profiles) {
                         data.profiles.forEach((profile) => {
-                            user_profiles_cache_ref.current.set(profile.id, profile);
+                            set_cached_profile(profile);
+                            result.set(profile.id, profile);
                         });
                     }
                 }
@@ -75,8 +152,8 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
                 console.error('[useChatMessages] Failed to fetch user profiles:', err);
             }
         }
-        return user_profiles_cache_ref.current;
-    }, []);
+        return result;
+    }, [get_cached_profile, set_cached_profile]);
     // -------------------------------------------------------------------------
     // Transform DB messages to ChatMessage
     // -------------------------------------------------------------------------
@@ -95,24 +172,44 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
             sender_profile: profiles.get(msg.sender_user_id),
             receiver_profile: profiles.get(msg.receiver_user_id),
             is_sender: msg.sender_user_id === user_id,
-            send_status: 'sent'
+            send_status: 'sent',
         }));
     }, [fetch_user_profiles]);
     // -------------------------------------------------------------------------
-    // Fetch messages via API
+    // Calculate polling delay with exponential backoff
     // -------------------------------------------------------------------------
-    const fetch_messages_from_api = useCallback(async () => {
-        if (!receiver_user_id) {
-            return { messages: [], user_id: null };
+    const get_poll_delay = useCallback(() => {
+        if (retry_count_ref.current === 0) {
+            return config.polling_interval;
+        }
+        // Exponential backoff: interval * 2^retryCount, capped at MAX_POLLING_DELAY
+        const delay = config.polling_interval * Math.pow(2, retry_count_ref.current);
+        return Math.min(delay, MAX_POLLING_DELAY);
+    }, [config.polling_interval]);
+    // -------------------------------------------------------------------------
+    // Fetch messages via API with optional pagination
+    // -------------------------------------------------------------------------
+    const fetch_messages_from_api = useCallback(async (options) => {
+        if (!config.receiver_user_id) {
+            return { messages: [], user_id: null, has_more: false, next_cursor: null };
         }
         try {
             const params = new URLSearchParams({
-                receiver_user_id,
-                ...(reference_id && { reference_id }),
-                ...(reference_type && { reference_type }),
+                receiver_user_id: config.receiver_user_id,
+                limit: String(options?.limit || config.messages_per_page),
             });
-            const response = await fetch(`${api_base_url}/messages?${params.toString()}`, {
-                credentials: 'include'
+            if (config.reference_id) {
+                params.set('reference_id', config.reference_id);
+            }
+            if (config.reference_type) {
+                params.set('reference_type', config.reference_type);
+            }
+            if (options?.cursor) {
+                params.set('cursor', options.cursor);
+                params.set('direction', options.direction || 'older');
+            }
+            const response = await fetch(`${config.api_base_url}/messages?${params.toString()}`, {
+                credentials: 'include',
             });
             if (!response.ok) {
                 throw new Error(`HTTP ${response.status}`);
@@ -121,7 +218,9 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
             if (data.success) {
                 return {
                     messages: data.messages || [],
-                    user_id: data.current_user_id || null
+                    user_id: data.current_user_id || null,
+                    has_more: data.pagination?.has_more ?? false,
+                    next_cursor: data.pagination?.next_cursor ?? null,
                 };
             }
             else {
@@ -132,29 +231,35 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
             console.error('[useChatMessages] Fetch error:', err);
             throw err;
         }
-    }, [receiver_user_id, reference_id, reference_type, api_base_url]);
+    }, [config]);
     // -------------------------------------------------------------------------
     // Initial load
     // -------------------------------------------------------------------------
     const load_initial = useCallback(async () => {
-        if (!receiver_user_id) {
+        if (!config.receiver_user_id) {
             set_is_loading(false);
             return;
         }
         set_is_loading(true);
         set_error(null);
         try {
-            const { messages: db_messages, user_id } = await fetch_messages_from_api();
-            if (user_id && is_mounted_ref.current) {
-                set_current_user_id(user_id);
+            const result = await fetch_messages_from_api();
+            if (result.user_id && is_mounted_ref.current) {
+                set_current_user_id(result.user_id);
             }
             if (is_mounted_ref.current) {
-                const transformed = user_id
-                    ? await transform_messages(db_messages, user_id)
-                    : db_messages.map(msg => ({ ...msg, is_sender: false, send_status: 'sent' }));
-                set_messages(transformed);
-                set_has_more(db_messages.length >= messages_per_page);
-                cursor_ref.current = db_messages.length;
+                const transformed = result.user_id
+                    ? await transform_messages(result.messages, result.user_id)
+                    : result.messages.map((msg) => ({
+                        ...msg,
+                        is_sender: false,
+                        send_status: 'sent',
+                    }));
+                // Sort messages in ascending order (oldest first, newest last)
+                const sorted = transformed.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+                set_messages(sorted);
+                set_has_more(result.has_more);
+                cursor_ref.current = result.next_cursor;
                 retry_count_ref.current = 0;
                 set_polling_status('connected');
             }
@@ -170,23 +275,32 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
                 set_is_loading(false);
             }
         }
-    }, [receiver_user_id, fetch_messages_from_api, transform_messages, messages_per_page]);
+    }, [config.receiver_user_id, fetch_messages_from_api, transform_messages]);
     // -------------------------------------------------------------------------
-    // Load more (pagination) - Note: simplified, API should support pagination params
+    // Load more (pagination)
     // -------------------------------------------------------------------------
     const load_more = useCallback(async () => {
-        if (!current_user_id || !has_more || is_loading_more) {
+        if (!current_user_id || !has_more || is_loading_more || !cursor_ref.current) {
             return;
         }
         set_is_loading_more(true);
         try {
-            // For now, reload all messages - pagination can be added to API later
-            const { messages: db_messages } = await fetch_messages_from_api();
-            const transformed = await transform_messages(db_messages, current_user_id);
+            const result = await fetch_messages_from_api({
+                cursor: cursor_ref.current,
+                direction: 'older',
+            });
+            const transformed = await transform_messages(result.messages, current_user_id);
             if (is_mounted_ref.current) {
-                set_messages(transformed);
-                set_has_more(false); // Simplified - loaded all
-                cursor_ref.current = db_messages.length;
+                set_messages((prev) => {
+                    // Prepend older messages and sort
+                    const combined = [...transformed, ...prev];
+                    return combined.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+                });
+                set_has_more(result.has_more);
+                // Update cursor to oldest message for next load_more
+                if (result.messages.length > 0) {
+                    cursor_ref.current = result.messages[0].created_at;
+                }
             }
         }
         catch (err) {
@@ -199,88 +313,87 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
         }
     }, [current_user_id, has_more, is_loading_more, fetch_messages_from_api, transform_messages]);
     // -------------------------------------------------------------------------
-    // Poll for new messages
+    // Poll for new messages (uses setTimeout for proper backoff)
     // -------------------------------------------------------------------------
-    const poll_for_new_messages = useCallback(async () => {
-        if (!current_user_id || !receiver_user_id) {
+    const schedule_next_poll = useCallback(() => {
+        if (!is_mounted_ref.current || config.realtime_mode !== 'polling' || !config.receiver_user_id) {
             return;
         }
-        try {
-            const { messages: db_messages } = await fetch_messages_from_api();
-            if (db_messages.length > 0 && is_mounted_ref.current) {
-                const transformed = await transform_messages(db_messages, current_user_id);
-                set_messages((prev) => {
-                    // Merge new messages, avoiding duplicates
-                    const existing_ids = new Set(prev.map(m => m.id));
-                    const new_messages = transformed.filter(m => !existing_ids.has(m.id));
-                    if (new_messages.length > 0) {
-                        // Combine and sort by created_at
-                        const combined = [...prev, ...new_messages];
-                        combined.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
-                        return combined;
-                    }
-                    return prev;
-                });
+        const delay = get_poll_delay();
+        polling_timer_ref.current = setTimeout(async () => {
+            if (!is_mounted_ref.current || is_polling_ref.current) {
+                return;
             }
-            retry_count_ref.current = 0;
-            if (is_mounted_ref.current) {
-                set_polling_status('connected');
+            is_polling_ref.current = true;
+            try {
+                // Fetch only newer messages since our latest
+                const latest_message = messages[messages.length - 1];
+                const result = await fetch_messages_from_api(latest_message
+                    ? { cursor: latest_message.created_at, direction: 'newer', limit: 50 }
+                    : undefined);
+                if (result.messages.length > 0 && is_mounted_ref.current && current_user_id) {
+                    const transformed = await transform_messages(result.messages, current_user_id);
+                    set_messages((prev) => {
+                        // Merge new messages, avoiding duplicates
+                        const existing_ids = new Set(prev.map((m) => m.id));
+                        const new_messages = transformed.filter((m) => !existing_ids.has(m.id));
+                        if (new_messages.length > 0) {
+                            const combined = [...prev, ...new_messages];
+                            return combined.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+                        }
+                        return prev;
+                    });
+                }
+                // Reset retry count on success
+                retry_count_ref.current = 0;
+                if (is_mounted_ref.current) {
+                    set_polling_status('connected');
+                }
             }
-        }
-        catch (err) {
-            console.error('[useChatMessages] Polling error:', err);
-            retry_count_ref.current += 1;
-            if (is_mounted_ref.current) {
-                if (retry_count_ref.current >= MAX_RETRY_ATTEMPTS) {
-                    set_polling_status('error');
+            catch (err) {
+                console.error('[useChatMessages] Polling error:', err);
+                retry_count_ref.current += 1;
+                if (is_mounted_ref.current) {
+                    if (retry_count_ref.current >= MAX_RETRY_ATTEMPTS) {
+                        set_polling_status('error');
+                    }
+                    else {
+                        set_polling_status('reconnecting');
+                    }
                 }
-                else {
-                    set_polling_status('reconnecting');
+            }
+            finally {
+                is_polling_ref.current = false;
+                // Schedule next poll with updated delay (backoff applied via get_poll_delay)
+                if (is_mounted_ref.current && config.realtime_mode === 'polling') {
+                    schedule_next_poll();
                 }
             }
-        }
-    }, [current_user_id, receiver_user_id, fetch_messages_from_api, transform_messages]);
+        }, delay);
+    }, [config.realtime_mode, config.receiver_user_id, get_poll_delay, fetch_messages_from_api, transform_messages, messages, current_user_id]);
     // -------------------------------------------------------------------------
-    // Start polling (only if realtime_mode is 'polling')
+    // Start/stop polling based on realtime_mode
     // -------------------------------------------------------------------------
     useEffect(() => {
-        // Only start polling if mode is 'polling'
-        if (realtime_mode !== 'polling' || !receiver_user_id) {
-            // Clear any existing timer if switching to manual mode
-            if (polling_timer_ref.current) {
-                clearInterval(polling_timer_ref.current);
-                polling_timer_ref.current = null;
-            }
-            // Set status to connected for manual mode (no polling needed)
-            if (realtime_mode === 'manual') {
-                set_polling_status('connected');
-            }
-            return;
-        }
         // Clear any existing timer
         if (polling_timer_ref.current) {
-            clearInterval(polling_timer_ref.current);
+            clearTimeout(polling_timer_ref.current);
+            polling_timer_ref.current = null;
+        }
+        // Only start polling if mode is 'polling' and we have a receiver
+        if (config.realtime_mode === 'polling' && config.receiver_user_id && current_user_id) {
+            schedule_next_poll();
+        }
+        else if (config.realtime_mode === 'manual') {
+            set_polling_status('connected');
         }
-        // Calculate delay with exponential backoff
-        const get_poll_delay = () => {
-            if (retry_count_ref.current === 0) {
-                return polling_interval;
-            }
-            return Math.min(polling_interval * Math.pow(2, retry_count_ref.current), RETRY_BASE_DELAY * 30 // Cap at 30 seconds
-            );
-        };
-        const start_polling = () => {
-            polling_timer_ref.current = setInterval(() => {
-                poll_for_new_messages();
-            }, get_poll_delay());
-        };
-        start_polling();
         return () => {
             if (polling_timer_ref.current) {
-                clearInterval(polling_timer_ref.current);
+                clearTimeout(polling_timer_ref.current);
+                polling_timer_ref.current = null;
             }
         };
-    }, [receiver_user_id, realtime_mode, polling_interval, poll_for_new_messages]);
+    }, [config.realtime_mode, config.receiver_user_id, current_user_id, schedule_next_poll]);
     // -------------------------------------------------------------------------
     // Initial load effect
     // -------------------------------------------------------------------------
@@ -295,8 +408,10 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
             set_error('Not authenticated');
             return false;
         }
-        // Create optimistic message
-        const optimistic_id = `optimistic-${Date.now()}`;
+        // Create optimistic message with unique ID
+        const optimistic_id = generateOptimisticId();
+        const sender_profile = get_cached_profile(current_user_id);
+        const receiver_profile = get_cached_profile(payload.receiver_user_id);
         const optimistic_message = {
             id: optimistic_id,
             reference_id: payload.reference_id,
@@ -309,15 +424,18 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
             deleted_at: null,
             created_at: new Date().toISOString(),
             changed_at: new Date().toISOString(),
-            sender_profile: user_profiles_cache_ref.current.get(current_user_id),
-            receiver_profile: user_profiles_cache_ref.current.get(payload.receiver_user_id),
+            sender_profile: sender_profile || undefined,
+            receiver_profile: receiver_profile || undefined,
             is_sender: true,
-            send_status: 'sending'
+            send_status: 'sending',
         };
         // Add optimistic message to state
-        set_messages((prev) => [...prev, optimistic_message]);
+        set_messages((prev) => {
+            const updated = [...prev, optimistic_message];
+            return updated.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+        });
         try {
-            const response = await fetch(`${api_base_url}/messages`, {
+            const response = await fetch(`${config.api_base_url}/messages`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 credentials: 'include',
@@ -333,27 +451,25 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
                 // Replace optimistic message with real one
                 const real_message = {
                     ...data.message,
-                    // Ensure all required fields are set with proper defaults
                     reference_list: data.message.reference_list ?? null,
                     read_at: data.message.read_at ?? null,
                     deleted_at: data.message.deleted_at ?? null,
                     changed_at: data.message.changed_at ?? data.message.created_at,
-                    sender_profile: user_profiles_cache_ref.current.get(current_user_id),
-                    receiver_profile: user_profiles_cache_ref.current.get(payload.receiver_user_id),
+                    sender_profile: sender_profile || undefined,
+                    receiver_profile: receiver_profile || undefined,
                     is_sender: true,
-                    send_status: 'sent'
+                    send_status: 'sent',
                 };
                 set_messages((prev) => {
                     // Check if real message already exists (from polling)
-                    const real_message_exists = prev.some(msg => msg.id === real_message.id);
+                    const real_message_exists = prev.some((msg) => msg.id === real_message.id);
                     if (real_message_exists) {
                         // Real message already exists from polling, just remove optimistic one
-                        return prev.filter(msg => msg.id !== optimistic_id);
+                        return prev.filter((msg) => msg.id !== optimistic_id);
                     }
                     else {
                         // Replace optimistic message with real one
                         const replaced = prev.map((msg) => msg.id === optimistic_id ? real_message : msg);
-                        // Sort to ensure correct chronological order
                         return replaced.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
                     }
                 });
@@ -367,13 +483,11 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
             console.error('[useChatMessages] Send error:', err);
             // Mark optimistic message as failed
             if (is_mounted_ref.current) {
-                set_messages((prev) => prev.map((msg) => msg.id === optimistic_id
-                    ? { ...msg, send_status: 'failed' }
-                    : msg));
+                set_messages((prev) => prev.map((msg) => msg.id === optimistic_id ? { ...msg, send_status: 'failed' } : msg));
             }
             return false;
         }
-    }, [current_user_id, api_base_url]);
+    }, [current_user_id, config.api_base_url, get_cached_profile]);
     // -------------------------------------------------------------------------
     // Delete message (soft delete) via API
     // -------------------------------------------------------------------------
@@ -387,14 +501,17 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
             set_error('Cannot delete this message');
             return false;
         }
+        // Store original values for rollback
+        const original_deleted_at = message.deleted_at;
+        const original_message_text = message.message_text;
         // Optimistic update
         set_messages((prev) => prev.map((msg) => msg.id === message_id
             ? { ...msg, deleted_at: new Date().toISOString(), message_text: null }
             : msg));
         try {
-            const response = await fetch(`${api_base_url}/messages/${message_id}`, {
+            const response = await fetch(`${config.api_base_url}/messages/${message_id}`, {
                 method: 'DELETE',
-                credentials: 'include'
+                credentials: 'include',
             });
             if (!response.ok) {
                 throw new Error('Failed to delete message');
@@ -406,12 +523,12 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
             // Rollback on error
             if (is_mounted_ref.current) {
                 set_messages((prev) => prev.map((msg) => msg.id === message_id
-                    ? { ...msg, deleted_at: message.deleted_at, message_text: message.message_text }
+                    ? { ...msg, deleted_at: original_deleted_at, message_text: original_message_text }
                     : msg));
             }
             return false;
         }
-    }, [current_user_id, messages, api_base_url]);
+    }, [current_user_id, messages, config.api_base_url]);
     // -------------------------------------------------------------------------
     // Mark as read via API
     // -------------------------------------------------------------------------
@@ -424,25 +541,31 @@ export function useChatMessages({ receiver_user_id, reference_id = '', reference
             return;
         }
         try {
-            const response = await fetch(`${api_base_url}/messages/${message_id}/read`, {
+            const response = await fetch(`${config.api_base_url}/messages/${message_id}/read`, {
                 method: 'PATCH',
-                credentials: 'include'
+                credentials: 'include',
             });
-            if (response.ok && is_mounted_ref.current) {
+            if (!response.ok) {
+                console.error('[useChatMessages] Mark as read failed:', response.status);
+                return;
+            }
+            const data = await response.json();
+            if (data.success && is_mounted_ref.current) {
                 set_messages((prev) => prev.map((msg) => msg.id === message_id
-                    ? { ...msg, read_at: new Date().toISOString() }
+                    ? { ...msg, read_at: data.message?.read_at || new Date().toISOString() }
                     : msg));
             }
         }
         catch (err) {
             console.error('[useChatMessages] Mark as read error:', err);
         }
-    }, [current_user_id, messages, api_base_url]);
+    }, [current_user_id, messages, config.api_base_url]);
     // -------------------------------------------------------------------------
     // Refresh
     // -------------------------------------------------------------------------
     const refresh = useCallback(() => {
-        cursor_ref.current = 0;
+        cursor_ref.current = null;
+        retry_count_ref.current = 0;
         set_messages([]);
         load_initial();
     }, [load_initial]);