đã fix rất nhiều vào tối thứ 5

src/App.jsx

@@ -13,6 +13,11 @@ import ManageAgent from "./components/createspace/ManageAgent";
 import ManageAgentTips from "./components/createspace/ManageAgentTips";
 import LoginPage from "./pages/LoginPage";
 import { initializeAuth } from "./store/slices/authSlice";
+import {
+  addMessage as addDMMessage,
+  markConversationAsFetched,
+  updateConversationLastMessage,
+} from "./store/slices/dmSlice";
 import socketService from "./services/socket.service";
 
 function App() {
@@ -26,6 +31,7 @@ function App() {
   const [roomListCollapsed, setRoomListCollapsed] = useState(false);
   const [memberListCollapsed, setMemberListCollapsed] = useState(false);
   const [isCreatingRoom, setIsCreatingRoom] = useState(false);
+  const [isRoomSettingsOpen, setIsRoomSettingsOpen] = useState(false);
 
   useEffect(() => {
     if (window.location.pathname !== "/") {
@@ -49,6 +55,57 @@ function App() {
     };
   }, [isAuthenticated]);
 
+  // Global WebSocket listener: always cache incoming DMs regardless of current view
+  useEffect(() => {
+    if (!isAuthenticated) return;
+
+    const handleNewDM = (data) => {
+      if (!data?.id) return;
+
+      const conversationId = data.conversation_id || data.conversationId;
+      if (!conversationId) return;
+
+      // Cache the message in Redux so it's available when user opens the conversation
+      dispatch(
+        addDMMessage({
+          conversationId,
+          message: {
+            id: data.id,
+            conversation_id: conversationId,
+            sender_id: data.sender_id,
+            content: data.content,
+            is_read: data.is_read ?? false,
+            created_at: data.created_at || data.timestamp,
+            sender: data.sender,
+          },
+        })
+      );
+
+      // Note: We do NOT mark conversation as fetched here.
+      // Only mark as fetched after a full API fetch (page 1) so that
+      // opening a conversation for the first time still loads historical messages.
+      // WebSocket messages are cached but the conversation is not "fully fetched" yet.
+
+      // Update last message in conversation list
+      dispatch(
+        updateConversationLastMessage({
+          conversationId,
+          message: {
+            id: data.id,
+            content: data.content,
+            created_at: data.created_at || data.timestamp,
+          },
+        })
+      );
+    };
+
+    socketService.onNewDM(handleNewDM);
+
+    return () => {
+      socketService.off("newDM", handleNewDM);
+    };
+  }, [isAuthenticated, dispatch]);
+
   const currentView = isSettings ? "settings" : activeView;
 
   if (!initialized || isLoggingOut) {
@@ -168,6 +225,9 @@ function App() {
             memberListCollapsed={memberListCollapsed}
             isCreatingRoom={isCreatingRoom}
             onCancelCreateRoom={() => setIsCreatingRoom(false)}
+            isRoomSettingsOpen={isRoomSettingsOpen}
+            onOpenRoomSettings={() => setIsRoomSettingsOpen(true)}
+            onCloseRoomSettings={() => setIsRoomSettingsOpen(false)}
           />
 
           {/* Collapsed member list indicator */}

src/components/ChatArea.jsx

@@ -6,10 +6,6 @@ import { SettingsView } from "./settings/index.js";
 import { CreateRoomView } from "./createroom/index.js";
 import { UserProfilePopup } from "./memberlist/index.js";
 import {
-  setReplyTo,
-  cancelReply,
-  setEditMessage,
-  cancelEdit,
   setSelectedUser,
   clearSelectedUser,
 } from "../store/slices/chatSlice";
@@ -21,14 +17,15 @@ import {
   setActiveConversation,
   markConversationAsRead,
   createOrGetConversation,
+  markConversationAsFetched,
 } from "../store/slices/dmSlice";
 import { addMessage } from "../store/slices/messageSlice";
 import socketService from "../services/socket.service";
 
-function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList, roomListCollapsed, memberListCollapsed }) {
+function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList, roomListCollapsed, memberListCollapsed, onOpenRoomSettings }) {
   const dispatch = useDispatch();
   const { isDark } = useSelector((state) => state.theme);
-  const { replyTo, editMessage, selectedUser, selectedDMUser } = useSelector(
+  const { selectedUser, selectedDMUser } = useSelector(
     (state) => state.chat,
   );
   const { user: currentUser } = useSelector((state) => state.auth);
@@ -38,6 +35,7 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
     activeConversation,
     typing: typingMap,
     messagesLoading,
+    fetchedConversations,
   } = useSelector((state) => state.dm);
   const appState = useSelector((state) => state.app);
 
@@ -47,13 +45,19 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
   const [dmUser, setDmUser] = useState(null);
   const [isTyping, setIsTypingState] = useState(false);
   const [sendingMessages, setSendingMessages] = useState({}); // { [tempId]: { content, timestamp } }
+  const [isCreatingConversation, setIsCreatingConversation] = useState(false);
   const typingTimeoutRef = useRef(null);
   const processedMessageIds = useRef(new Set());
+  const processedTimers = useRef([]);
+  const isCreatingConversationRef = useRef(false);
 
   const allRoomIds = Object.values(rooms).flat().map((r) => r.id);
   const isBotRoom = room === "tro-ly-ai";
   const isDM = (view === "messages") || (room && !allRoomIds.includes(room) && !isBotRoom);
 
+  // Move useSelector hooks to top (was at line 281)
+  const userMessagesMap = useSelector((state) => state.message.userMessages);
+
   // Build dmUser from selectedDMUser or activeConversation
   useEffect(() => {
     if (!isDM || !room) {
@@ -101,23 +105,15 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
     }
   }, [room, isDM, selectedDMUser, activeConversation]);
 
-  // When DM room changes, set active conversation and fetch messages
+  // Reset processedMessageIds when conversation changes
   useEffect(() => {
-    if (!isDM || !room) return;
+    processedMessageIds.current.clear();
+    // Clear pending timers
+    processedTimers.current.forEach((timer) => clearTimeout(timer));
+    processedTimers.current = [];
+  }, [activeConversationId]);
 
-    // If we have an activeConversation matching this room, use it
-    if (activeConversation?.id === room) {
-      dispatch(fetchMessages({ conversationId: room, page: 1, limit: 50 }));
-      socketService.joinDM(room);
-      dispatch(markConversationAsRead(room));
-      return;
-    }
-
-    // Otherwise try to find conversation by userId in conversations list
-    // This is handled by DMList when clicking a user
-  }, [isDM, room, activeConversation, dispatch]);
-
-  // Join/leave DM via WebSocket
+  // Join/leave DM via WebSocket - single effect
   useEffect(() => {
     if (!isDM || !activeConversationId) return;
 
@@ -129,65 +125,100 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
     };
   }, [isDM, activeConversationId, dispatch]);
 
-  // Listen to WebSocket events for this DM
+  // Fetch messages when active conversation changes — only if not already fetched
   useEffect(() => {
     if (!isDM || !activeConversationId) return;
+    const isFetched = fetchedConversations[activeConversationId];
+    console.log("[ChatArea] Check fetch:", { activeConversationId, isFetched, fetchedConversations });
+    if (isFetched) return; // Skip: already cached
+    dispatch(fetchMessages({ conversationId: activeConversationId, page: 1, limit: 50 }));
+  }, [isDM, activeConversationId, dispatch, fetchedConversations]);
+
+  // Use refs to keep stable handler references and avoid duplicate listeners
+  const activeConversationIdRef = useRef(activeConversationId);
+  useEffect(() => {
+    activeConversationIdRef.current = activeConversationId;
+  }, [activeConversationId]);
+
+  const currentUserRef = useRef(currentUser);
+  useEffect(() => {
+    currentUserRef.current = currentUser;
+  }, [currentUser]);
+
+  // Listen to WebSocket events for this DM - register once only
+  useEffect(() => {
+    if (!isDM) return;
 
     const handleNewDM = (data) => {
-      // Received newDM from server
       if (!data?.id) return;
       if (processedMessageIds.current.has(data.id)) return;
       processedMessageIds.current.add(data.id);
-      setTimeout(() => processedMessageIds.current.delete(data.id), 60000);
+      const timer = setTimeout(() => processedMessageIds.current.delete(data.id), 60000);
+      processedTimers.current.push(timer);
 
       const conversationId = data.conversation_id || data.conversationId;
-      if (conversationId === activeConversationId) {
-        // Remove from sendingMessages if exists
+      const currentConvId = activeConversationIdRef.current;
+
+      // Always cache the message regardless of which conversation is active
+      dispatch(
+        addDMMessage({
+          conversationId,
+          message: {
+            id: data.id,
+            conversation_id: conversationId,
+            sender_id: data.sender_id,
+            content: data.content,
+            is_read: data.is_read ?? false,
+            created_at: data.created_at || data.timestamp,
+            sender: data.sender,
+          },
+        })
+      );
+
+      // Note: We do NOT mark conversation as fetched here.
+      // Only mark as fetched after a full API fetch (page 1) so that
+      // opening a conversation for the first time still loads historical messages.
+
+      // If this is the currently active conversation, also update UI state
+      if (conversationId === currentConvId) {
         setSendingMessages((prev) => {
           const next = { ...prev };
-          Object.keys(next).forEach((key) => {
-            if (next[key].content === data.content) {
-              delete next[key];
-            }
-          });
+          if (data.tempId && next[data.tempId]) {
+            delete next[data.tempId];
+          } else {
+            Object.keys(next).forEach((key) => {
+              if (next[key].content === data.content && data.sender_id === currentUserRef.current?.id) {
+                delete next[key];
+              }
+            });
+          }
           return next;
         });
-        dispatch(
-          addDMMessage({
-            conversationId,
-            message: {
-              id: data.id,
-              conversation_id: conversationId,
-              sender_id: data.sender_id,
-              content: data.content,
-              is_read: data.is_read ?? false,
-              created_at: data.created_at || data.timestamp,
-              sender: data.sender,
-            },
-          })
-        );
       }
     };
 
     const handleDmSent = (data) => {
-      // Received dmSent from server
       if (data.success && data.message) {
-        // Remove from sendingMessages if exists
+        const currentConvId = activeConversationIdRef.current;
         setSendingMessages((prev) => {
           const next = { ...prev };
-          Object.keys(next).forEach((key) => {
-            if (next[key].content === data.message.content) {
-              delete next[key];
-            }
-          });
+          if (data.tempId && next[data.tempId]) {
+            delete next[data.tempId];
+          } else {
+            Object.keys(next).forEach((key) => {
+              if (next[key].content === data.message.content) {
+                delete next[key];
+              }
+            });
+          }
           return next;
         });
         dispatch(
           addDMMessage({
-            conversationId: activeConversationId,
+            conversationId: currentConvId,
             message: {
               ...data.message,
-              conversation_id: activeConversationId,
+              conversation_id: currentConvId,
             },
           })
         );
@@ -195,7 +226,8 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
     };
 
     const handleDmTyping = (data) => {
-      if (data.conversationId === activeConversationId) {
+      const currentConvId = activeConversationIdRef.current;
+      if (data.conversationId === currentConvId) {
         if (data.isTyping) {
           dispatch(
             setTyping({
@@ -211,9 +243,16 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
     };
 
     const handleDmRead = (data) => {
-      if (data.conversationId === activeConversationId) {
-        // Update read status for messages
-        // Backend handles this, we can refresh if needed
+      const currentConvId = activeConversationIdRef.current;
+      if (data.conversationId === currentConvId) {
+        dispatch({
+          type: "dm/updateMessage",
+          payload: {
+            conversationId: currentConvId,
+            messageId: data.messageId,
+            updates: { is_read: true },
+          },
+        });
       }
     };
 
@@ -228,18 +267,23 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
       socketService.off("dmTyping", handleDmTyping);
       socketService.off("dmRead", handleDmRead);
     };
-  }, [isDM, activeConversationId, dispatch]);
+  }, [isDM, dispatch]);
 
   // Build messages for display
-  const dmMessages = isDM && activeConversationId
-    ? (dmMessagesMap[activeConversationId] || [])
+  // Use activeConversationId if available, fallback to room for existing conversations
+  const conversationId = activeConversationId || (isDM && room && !isBotRoom ? room : null);
+  const dmMessages = conversationId
+    ? (dmMessagesMap[conversationId] || [])
     : [];
 
   // Sort messages by created_at ascending (oldest first, newest last)
+  // Stable sort: fallback to id comparison if timestamps are equal
   const sortedDmMessages = [...dmMessages].sort((a, b) => {
-    const dateA = new Date(a.created_at);
-    const dateB = new Date(b.created_at);
-    return dateA - dateB;
+    const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
+    const timeB = b.created_at ? new Date(b.created_at).getTime() : 0;
+    if (timeA !== timeB) return timeA - timeB;
+    // Stable fallback: compare by id (string comparison for UUIDs)
+    return String(a.id).localeCompare(String(b.id));
   });
 
   // Convert API messages to UI format
@@ -255,10 +299,12 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
       ? (currentUser?.color || null)
       : (msg.sender?.color || null);
 
-    const date = new Date(msg.created_at);
-    const timestamp = isNaN(date.getTime())
-      ? msg.created_at
-      : date.toLocaleTimeString("vi-VN", { hour: "2-digit", minute: "2-digit" });
+    const timestamp = (() => {
+      if (!msg.created_at) return "—";
+      const date = new Date(msg.created_at);
+      if (isNaN(date.getTime())) return msg.created_at;
+      return date.toLocaleTimeString("vi-VN", { hour: "2-digit", minute: "2-digit" });
+    })();
 
     return {
       id: msg.id,
@@ -278,7 +324,6 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
 
   // Combine with mock data for non-DM or fallback
   const mockMessages = isDM ? directMessages[room] || [] : messages[room] || [];
-  const userMessagesMap = useSelector((state) => state.message.userMessages);
   const userMessages = userMessagesMap[room] || [];
 
   const chatMessages = isDM && activeConversationId
@@ -302,10 +347,21 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
     if (!content.trim()) return;
 
     if (isDM) {
+      // Guard: prevent chatting with self
+      if (dmUser?.id && dmUser.id === currentUser?.id) {
+        console.warn("Cannot send message to yourself");
+        return;
+      }
+
       let conversationId = activeConversationId;
 
       // Lazy create conversation if not exists
       if (!conversationId && dmUser?.id) {
+        // Prevent race condition: lock creation
+        if (isCreatingConversationRef.current) return;
+        isCreatingConversationRef.current = true;
+        setIsCreatingConversation(true);
+
         try {
           const result = await dispatch(
             createOrGetConversation(dmUser.id)
@@ -316,18 +372,22 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
           }
         } catch (err) {
           // Failed to create conversation
+          isCreatingConversationRef.current = false;
+          setIsCreatingConversation(false);
           return;
         }
+
+        isCreatingConversationRef.current = false;
+        setIsCreatingConversation(false);
       }
 
       if (!conversationId) return;
 
-      // Send via WebSocket
-      // Send DM via WebSocket
-      socketService.sendDM(conversationId, content.trim());
+      // Send via WebSocket with tempId for tracking
+      const tempId = `temp-${Date.now()}`;
+      socketService.sendDM(conversationId, content.trim(), tempId);
 
       // Optimistic UI
-      const tempId = `temp-${Date.now()}`;
       const optimisticMsg = {
         id: tempId,
         sender: currentUser?.display_name || currentUser?.name || "Bạn",
@@ -346,7 +406,7 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
         pending: true,
       };
 
-      // Track sending message
+      // Track sending message (already have tempId from above)
       setSendingMessages((prev) => ({
         ...prev,
         [tempId]: { content: content.trim(), timestamp: Date.now() },
@@ -415,6 +475,23 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
     }, 3000);
   }, [isDM, activeConversationId, isTyping]);
 
+  // Cleanup typing on unmount / before unload
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      if (isDM && activeConversationId) {
+        socketService.dmTyping(activeConversationId, false);
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      // Also clear typing when unmounting
+      if (isDM && activeConversationId) {
+        socketService.dmTyping(activeConversationId, false);
+      }
+    };
+  }, [isDM, activeConversationId]);
+
   const handleStopTyping = useCallback(() => {
     if (!isDM || !activeConversationId) return;
     setIsTypingState(false);
@@ -440,6 +517,7 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
         onToggleMemberList={onToggleMemberList}
         roomListCollapsed={roomListCollapsed}
         memberListCollapsed={memberListCollapsed}
+        onOpenRoomSettings={onOpenRoomSettings}
       />
       {/* User Profile Popup */}
       {selectedUser && (
@@ -460,14 +538,8 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
         hasNoSelection={isDM && !dmUser}
         sendingMessages={sendingMessages}
         isLoading={isDM && messagesLoading}
-        onReply={(msg) => {
-          dispatch(setReplyTo(msg));
-          dispatch(cancelEdit());
-        }}
-        onEdit={(msg) => {
-          dispatch(setEditMessage(msg));
-          dispatch(cancelReply());
-        }}
+        conversationId={conversationId}
+
         onShowProfile={(senderName) => {
           if (isDM && dmUser && senderName !== (currentUser?.display_name || currentUser?.name)) {
             dispatch(setSelectedUser(dmUser));
@@ -491,10 +563,7 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
       <ChatInput
         isDark={isDark}
         placeholder={placeholder}
-        replyTo={replyTo}
-        onCancelReply={() => dispatch(cancelReply())}
-        editMessage={editMessage}
-        onCancelEdit={() => dispatch(cancelEdit())}
+
         onSend={handleSend}
         onTyping={handleTyping}
         onStopTyping={handleStopTyping}
@@ -503,7 +572,7 @@ function ChatArea({ activeView, activeRoom, onToggleRoomList, onToggleMemberList
   );
 }
 
-function ChatAreaWrapper({ isCreatingRoom, onCancelCreateRoom, ...props }) {
+function ChatAreaWrapper({ isCreatingRoom, onCancelCreateRoom, isRoomSettingsOpen, onOpenRoomSettings, onCloseRoomSettings, ...props }) {
   const appState = useSelector((state) => state.app);
   const { isDark } = useSelector((state) => state.theme);
   const view = props.activeView || appState.activeView;
@@ -524,7 +593,7 @@ function ChatAreaWrapper({ isCreatingRoom, onCancelCreateRoom, ...props }) {
     return <SettingsView isDark={isDark} />;
   }
 
-  return <ChatArea {...props} />;
+  return <ChatArea {...props} onOpenRoomSettings={onOpenRoomSettings} />;
 }
 
 export default ChatAreaWrapper;

src/components/chatarea/ChatHeader.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FiSidebar } from "react-icons/fi";
+import { FiSidebar, FiSettings } from "react-icons/fi";
 import { getUserColor } from "../../utils/userColor";
 
 function getInitials(name) {
@@ -74,6 +74,7 @@ function ChatHeader({
   onToggleMemberList,
   roomListCollapsed,
   memberListCollapsed,
+  onOpenRoomSettings,
 }) {
   const hasNoSelection = isDM && !dmUser;
 
@@ -152,6 +153,18 @@ function ChatHeader({
         >
           <FiSidebar size={18} style={{ transform: "scaleX(-1)" }} />
         </button>
+
+        {/* Room Settings — chỉ hiển thị khi ở room (không phải DM) */}
+        {!isDM && (
+          <button
+            onClick={onOpenRoomSettings}
+            className="p-1.5 rounded hover:opacity-70 transition-opacity cursor-pointer"
+            style={{ color: "var(--text-muted)" }}
+            title="Thiết lập room"
+          >
+            <FiSettings size={18} />
+          </button>
+        )}
       </div>
     </div>
   );

src/components/chatarea/ChatInput.jsx

@@ -24,11 +24,7 @@ function ChatInput({
   isDark,
   placeholder,
   replyTo,
-  onCancelReply,
-  editMessage,
-  onCancelEdit,
   onSend,
-  onEdit,
   onTyping,
   onStopTyping,
 }) {
@@ -43,27 +39,9 @@ function ChatInput({
   const containerRef = useRef(null);
   const fileInputRef = useRef(null);
 
-  const placeholderText = editMessage
-    ? "Chỉnh sửa tin nhắn..."
-    : replyTo
-      ? `Reply to ${replyTo.sender}...`
-      : placeholder;
+  const placeholderText = placeholder;
+
 
-  useEffect(() => {
-    if (editMessage) {
-      if (editorRef.current) {
-        editorRef.current.innerHTML = editMessage.content;
-      }
-      setIsEmpty(!editMessage.content);
-    } else {
-      if (editorRef.current) {
-        editorRef.current.innerHTML = "";
-      }
-      setMentions([]);
-      setIsEmpty(true);
-    }
-    setShowMentions(false);
-  }, [editMessage]);
 
   useEffect(() => {
     const handleClickOutside = (e) => {
@@ -180,10 +158,7 @@ function ChatInput({
   const handleSend = () => {
     const content = getPlainText().trim();
     if (content || selectedFiles.length > 0) {
-      if (editMessage && onEdit) {
-        onEdit(editMessage.id, content);
-        if (onCancelEdit) onCancelEdit();
-      } else if (onSend) {
+      if (onSend) {
         onSend(content, replyTo, selectedFiles);
         if (editorRef.current) {
           editorRef.current.innerHTML = "";
@@ -191,7 +166,6 @@ function ChatInput({
         setMentions([]);
         setSelectedFiles([]);
         setIsEmpty(true);
-        if (onCancelReply) onCancelReply();
       }
       setShowMentions(false);
       if (onStopTyping) onStopTyping();
@@ -384,63 +358,6 @@ function ChatInput({
         background: "var(--bg-surface-secondary)",
       }}
     >
-      {editMessage && (
-        <div
-          className="flex items-center justify-between px-3 py-2 mb-2 rounded-md text-xs"
-          style={{
-            background: isDark ? "var(--bg-surface-tertiary)" : "#f0f2f5",
-            border: "1px solid var(--primary)",
-          }}
-        >
-          <div className="flex items-center gap-2 min-w-0">
-            <span style={{ color: "var(--primary)", fontWeight: "600" }}>
-              Chỉnh sửa tin nhắn
-            </span>
-            <span
-              className="truncate"
-              style={{ color: "var(--text-secondary)" }}
-            >
-              {editMessage.content}
-            </span>
-          </div>
-          <button
-            className="ml-2 shrink-0 p-0.5 rounded hover:bg-opacity-20"
-            style={{ color: "var(--text-secondary)" }}
-            onClick={onCancelEdit}
-          >
-            <FiX size={14} />
-          </button>
-        </div>
-      )}
-      {replyTo && !editMessage && (
-        <div
-          className="flex items-center justify-between px-3 py-2 mb-2 rounded-md text-xs"
-          style={{
-            background: isDark ? "var(--bg-surface-tertiary)" : "#f0f2f5",
-            border: "1px solid var(--border-primary)",
-          }}
-        >
-          <div className="flex items-center gap-2 min-w-0">
-            <span style={{ color: "var(--primary)", fontWeight: "600" }}>
-              Replying to {replyTo.sender}
-            </span>
-            <span
-              className="truncate"
-              style={{ color: "var(--text-secondary)" }}
-            >
-              {replyTo.content}
-            </span>
-          </div>
-          <button
-            className="ml-2 shrink-0 p-0.5 rounded hover:bg-opacity-20"
-            style={{ color: "var(--text-secondary)" }}
-            onClick={onCancelReply}
-          >
-            <FiX size={14} />
-          </button>
-        </div>
-      )}
-
       {/* File attachment preview */}
       {selectedFiles.length > 0 && (
         <FileAttachmentPreview
@@ -523,23 +440,17 @@ function ChatInput({
           type="button"
           className="w-9 h-9 border-none rounded-md cursor-pointer flex items-center justify-center transition-colors"
           style={{
-            background: editMessage
-              ? "var(--secondary-active, #f59e0b)"
-              : "var(--primary)",
+            background: "var(--primary)",
             color: isDark ? "var(--bg-surface)" : "#fff",
           }}
           onMouseEnter={(e) =>
-            (e.currentTarget.style.background = editMessage
-              ? "var(--secondary-hover, #d97706)"
-              : "var(--primary-hover)")
+            (e.currentTarget.style.background = "var(--primary-hover)")
           }
           onMouseLeave={(e) =>
-            (e.currentTarget.style.background = editMessage
-              ? "var(--secondary-active, #f59e0b)"
-              : "var(--primary)")
+            (e.currentTarget.style.background = "var(--primary)")
           }
           onClick={handleSend}
-          title={editMessage ? "Lưu chỉnh sửa" : "Gửi"}
+          title="Gửi"
         >
           <IoSend size={18} />
         </button>

src/components/chatarea/ChatMessages.jsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 import { FiPaperclip } from "react-icons/fi";
-import { MessageActions, ReplyPreview, ReactionBar } from "./MessageActions";
+import { ReplyPreview } from "./MessageActions";
 import { renderMessageWithMentions } from "./MessageContent";
 import FileAttachment from "./FileAttachment";
 import { getUserColor } from "../../utils/userColor";
@@ -14,50 +14,19 @@ function ChatMessage({
   isSending,
 }) {
   const senderColor = getUserColor(msg.sender, msg.color);
-  const [showActions, setShowActions] = useState(false);
-  const [reactions, setReactions] = useState(msg.reactions || []);
-  const [showPicker, setShowPicker] = useState(false);
   const isOwnMessage = msg.isOwn;
-
-  const handleAddReaction = (emoji) => {
-    const existing = reactions.find((r) => r.emoji === emoji);
-    if (existing) {
-      setReactions(
-        reactions.map((r) =>
-          r.emoji === emoji ? { ...r, count: r.count + 1 } : r,
-        ),
-      );
-    } else {
-      setReactions([...reactions, { emoji, count: 1, users: ["You"] }]);
-    }
-    setShowPicker(false);
-  };
+  const [isHovered, setIsHovered] = useState(false);
 
   return (
     <div
       className="flex gap-3 px-3 py-2 rounded-lg transition-colors relative group"
       style={{
-        background: showActions ? "var(--hover-primary)" : "transparent",
+        background: isHovered ? "var(--hover-primary)" : "transparent",
         opacity: msg.pending ? 0.6 : 1,
       }}
-      onMouseEnter={() => setShowActions(true)}
-      onMouseLeave={() => {
-        setShowActions(false);
-        setShowPicker(false);
-      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      {/* Action buttons on hover */}
-      <MessageActions
-        show={showActions}
-        isDark={isDark}
-        isOwnMessage={isOwnMessage}
-        onReply={() => onReply(msg)}
-        onEdit={() => onEdit(msg)}
-        onReaction={handleAddReaction}
-        showPicker={showPicker}
-        onTogglePicker={() => setShowPicker(!showPicker)}
-      />
-
       <div
         className="w-9 h-9 rounded-lg flex items-center justify-center text-sm font-semibold shrink-0 cursor-pointer"
         style={{
@@ -111,8 +80,7 @@ function ChatMessage({
             </span>
           )}
         </div>
-        {/* Reply preview below sender info */}
-        <ReplyPreview replyTo={msg.replyTo} isDark={isDark} />
+
         {/* Message content */}
         <div
           className="text-sm leading-relaxed"
@@ -150,13 +118,7 @@ function ChatMessage({
             <FiPaperclip size={14} /> {msg.attachmentName}
           </div>
         ) : null}
-        {reactions.length > 0 && (
-          <ReactionBar
-            reactions={reactions}
-            onAddReaction={handleAddReaction}
-            isDark={isDark}
-          />
-        )}
+
       </div>
     </div>
   );
@@ -308,17 +270,24 @@ function ChatMessages({
   hasNoSelection,
   sendingMessages,
   isLoading,
+  conversationId,
 }) {
   const messagesContainerRef = useRef(null);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const prevLoadingRef = useRef(isLoading);
   const prevMessagesLengthRef = useRef(chatMessages.length);
+  const prevConversationIdRef = useRef(conversationId);
 
-  // Auto scroll to bottom when loading finishes or new messages arrive
+  // Auto scroll to bottom when loading finishes, new messages arrive, or conversation changes
   useEffect(() => {
     const container = messagesContainerRef.current;
     if (!container) return;
 
+    // Scroll to bottom when conversation changes
+    if (prevConversationIdRef.current !== conversationId) {
+      container.scrollTop = container.scrollHeight;
+    }
+
     // Scroll to bottom when loading finishes
     if (prevLoadingRef.current && !isLoading) {
       container.scrollTop = container.scrollHeight;
@@ -331,7 +300,8 @@ function ChatMessages({
 
     prevLoadingRef.current = isLoading;
     prevMessagesLengthRef.current = chatMessages.length;
-  }, [isLoading, chatMessages.length, isLoadingMore]);
+    prevConversationIdRef.current = conversationId;
+  }, [isLoading, chatMessages.length, isLoadingMore, conversationId]);
 
   // Handle scroll event to detect when user reaches the top
   const handleScroll = (e) => {
@@ -348,7 +318,7 @@ function ChatMessages({
 
   const hasMessages = chatMessages.length > 0;
 
-  const isEmpty = !hasMessages && !isTyping;
+  const isEmpty = !hasMessages && !isTyping && !isLoading;
 
   return (
     <div

src/components/chatarea/MessageActions.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FiMessageSquare, FiCornerDownRight, FiEdit2 } from "react-icons/fi";
+import { FiCornerDownRight } from "react-icons/fi";
 import { getUserColor } from "../../utils/userColor";
 
 const quickReactions = ["👍", "❤️", "😂", "😮", "😢", "🔥"];
@@ -96,11 +96,6 @@ export function MessageActions({
   show,
   isDark,
   isOwnMessage,
-  onReply,
-  onEdit,
-  onReaction,
-  showPicker,
-  onTogglePicker,
 }) {
   if (!show) return null;
 
@@ -115,58 +110,9 @@ export function MessageActions({
         boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
       }}
     >
-      {/* Quick reactions */}
-      {quickReactions.slice(0, 3).map((emoji) => (
-        <button
-          key={emoji}
-          className="w-6 h-6 flex items-center justify-center rounded text-sm hover:scale-125 transition-transform"
-          onClick={() => onReaction(emoji)}
-        >
-          {emoji}
-        </button>
-      ))}
-      {/* Reply button */}
-      <button
-        className="w-7 h-7 flex items-center justify-center rounded-full transition-all"
-        style={{
-          color: "var(--text-secondary)",
-        }}
-        onClick={onReply}
-        title="Reply"
-      >
-        <FiMessageSquare size={14} />
-      </button>
-      {/* Edit button (only for own messages) */}
-      {isOwnMessage && onEdit && (
-        <button
-          className="w-7 h-7 flex items-center justify-center rounded-full transition-all"
-          style={{
-            color: "var(--text-secondary)",
-          }}
-          onClick={onEdit}
-          title="Edit message"
-        >
-          <FiEdit2 size={13} />
-        </button>
-      )}
-      {/* Add reaction button */}
-      <div className="relative">
-        <button
-          className="w-7 h-7 flex items-center justify-center rounded-full transition-all"
-          style={{
-            color: "var(--text-secondary)",
-          }}
-          onClick={onTogglePicker}
-          title="Add reaction"
-        >
-          <span className="text-sm font-bold">+</span>
-        </button>
-        <ReactionPicker
-          show={showPicker}
-          onSelect={onReaction}
-          isDark={isDark}
-        />
-      </div>
+      <span className="text-[10px] px-2" style={{ color: "var(--text-muted)" }}>
+        Tùy chọn tạm ẩn
+      </span>
     </div>
   );
 }

src/components/roomlist/DMList.jsx

@@ -5,7 +5,7 @@ import { setActiveRoom } from "../../store/slices/appSlice";
 import { setSelectedDMUser } from "../../store/slices/chatSlice";
 import {
   setActiveConversation,
-  fetchMessages,
+  clearActiveConversation,
 } from "../../store/slices/dmSlice";
 import { getUserColor } from "../../utils/userColor";
 import { DMListHeader, DMListSection } from "./DMListComponents";
@@ -210,7 +210,7 @@ function DMItem({ dm, isDark, isActive, onClick, onAddFriend, isOnline }) {
 function DMList({ activeRoom, setActiveRoom: setActiveRoomProp }) {
   const dispatch = useDispatch();
   const { isDark } = useSelector((state) => state.theme);
-  const { loading: dmLoading } = useSelector((state) => state.dm);
+  const { loading: dmLoading, conversations, conversationsFetched } = useSelector((state) => state.dm);
   const [sentRequests, setSentRequests] = useState([]);
 
   const {
@@ -224,7 +224,8 @@ function DMList({ activeRoom, setActiveRoom: setActiveRoomProp }) {
     getUserOnlineStatus,
   } = useDMList();
 
-  const isLoading = hookLoading || dmLoading;
+  // Only show loading if we truly have no data yet
+  const isLoading = (hookLoading || dmLoading) && !conversationsFetched && conversations.length === 0;
 
   const handleNavigateToChat = async (user) => {
     dispatch(setSelectedDMUser(user));
@@ -242,13 +243,6 @@ function DMList({ activeRoom, setActiveRoom: setActiveRoomProp }) {
     // If user has a conversation object, use it directly
     if (user.conversation) {
       dispatch(setActiveConversation(user.conversation));
-      dispatch(
-        fetchMessages({
-          conversationId: user.conversation.id,
-          page: 1,
-          limit: 50,
-        }),
-      );
       if (setActiveRoomProp) {
         setActiveRoomProp(user.conversation.id);
       } else {
@@ -257,8 +251,9 @@ function DMList({ activeRoom, setActiveRoom: setActiveRoomProp }) {
       return;
     }
 
-    // Lazy create: don't create conversation yet, just set the user as active
+    // Lazy create: clear previous conversation and set the user as active
     // Conversation will be created when first message is sent
+    dispatch(clearActiveConversation());
     if (setActiveRoomProp) {
       setActiveRoomProp(user.id);
     } else {

src/components/settings/UserProfile.jsx

@@ -12,6 +12,9 @@ const UserProfile = forwardRef(function UserProfile(_, ref) {
   const [userName, setUserName] = useState(
     () => localStorage.getItem("userName") || authUser?.name || "Sinh viên",
   );
+  const [username] = useState(
+    () => localStorage.getItem("username") || authUser?.username || "",
+  );
   const [userAvatar, setUserAvatar] = useState(
     () => localStorage.getItem("userAvatar") || authUser?.avatar || null,
   );
@@ -23,11 +26,13 @@ const UserProfile = forwardRef(function UserProfile(_, ref) {
   );
   const [nameError, setNameError] = useState("");
 
+
   useEffect(() => {
     if (authUser) {
       if (!localStorage.getItem("userName")) {
         setUserName(authUser.name || "Sinh viên");
       }
+
       if (!localStorage.getItem("userAvatar")) {
         setUserAvatar(authUser.avatar || null);
       }
@@ -51,13 +56,17 @@ const UserProfile = forwardRef(function UserProfile(_, ref) {
       }
       setNameError("");
 
+
+
       const trimmedBio = userBio.trim();
       const originalName = authUser?.name || "";
+      const originalUsername = authUser?.username || "";
       const originalBio = authUser?.bio || "";
       const originalAvatar = authUser?.avatar || null;
 
       const hasChanged =
         trimmedName !== originalName ||
+
         trimmedBio !== originalBio ||
         userAvatar !== originalAvatar;
 
@@ -66,6 +75,7 @@ const UserProfile = forwardRef(function UserProfile(_, ref) {
       }
 
       localStorage.setItem("userName", trimmedName);
+      localStorage.setItem("username", username);
       localStorage.setItem("userAvatar", userAvatar);
       localStorage.setItem("userBio", trimmedBio);
       if (usernameColor) {
@@ -82,6 +92,7 @@ const UserProfile = forwardRef(function UserProfile(_, ref) {
           bio: trimmedBio || null,
           avatar: userAvatar || null,
         };
+
         const { data } = await authService.updateProfile(payload);
         if (data?.user) {
           dispatch(updateProfileSuccess(data.user));
@@ -116,39 +127,64 @@ const UserProfile = forwardRef(function UserProfile(_, ref) {
         >
           {userAvatar || userName.charAt(0) || "S"}
         </div>
-        <div className="flex-1">
-          <label
-            className="text-xs font-medium mb-1 block"
-            style={{ color: "var(--text-secondary)" }}
-          >
-            Tên hiển thị <span style={{ color: "var(--danger)" }}>*</span>
-          </label>
-          <input
-            type="text"
-            value={userName}
-            onChange={(e) => {
-              setUserName(e.target.value);
-              if (nameError) setNameError("");
-            }}
-            placeholder="Nhập tên hiển thị"
-            className="w-full px-3 py-2 rounded-md text-sm border outline-none"
-            style={{
-              background: "var(--input-bg)",
-              borderColor: nameError ? "var(--danger)" : "var(--input-border)",
-              color: "var(--input-text)",
-            }}
-            onFocus={(e) =>
-              (e.currentTarget.style.borderColor = "var(--primary)")
-            }
-            onBlur={(e) =>
-              (e.currentTarget.style.borderColor = nameError ? "var(--danger)" : "var(--input-border)")
-            }
-          />
-          {nameError && (
-            <div className="text-xs mt-1" style={{ color: "var(--danger)" }}>
-              {nameError}
+        <div className="flex-1 space-y-3">
+          <div>
+            <label
+              className="text-xs font-medium mb-1 block"
+              style={{ color: "var(--text-secondary)" }}
+            >
+              Tên hiển thị <span style={{ color: "var(--danger)" }}>*</span>
+            </label>
+            <input
+              type="text"
+              value={userName}
+              onChange={(e) => {
+                setUserName(e.target.value);
+                if (nameError) setNameError("");
+              }}
+              placeholder="Nhập tên hiển thị"
+              className="w-full px-3 py-2 rounded-md text-sm border outline-none"
+              style={{
+                background: "var(--input-bg)",
+                borderColor: nameError ? "var(--danger)" : "var(--input-border)",
+                color: "var(--input-text)",
+              }}
+              onFocus={(e) =>
+                (e.currentTarget.style.borderColor = "var(--primary)")
+              }
+              onBlur={(e) =>
+                (e.currentTarget.style.borderColor = nameError ? "var(--danger)" : "var(--input-border)")
+              }
+            />
+            {nameError && (
+              <div className="text-xs mt-1" style={{ color: "var(--danger)" }}>
+                {nameError}
+              </div>
+            )}
+          </div>
+          <div>
+            <label
+              className="text-xs font-medium mb-1 block"
+              style={{ color: "var(--text-secondary)" }}
+            >
+              Username
+            </label>
+            <div
+              className="w-full px-3 py-2 rounded-md text-sm border"
+              style={{
+                background: "var(--input-bg)",
+                borderColor: "var(--input-border)",
+                color: "var(--text-muted)",
+                cursor: "default",
+                userSelect: "text",
+              }}
+            >
+              {username || "Chưa có username"}
             </div>
-          )}
+            <div className="text-xs mt-1" style={{ color: "var(--text-muted)" }}>
+              Dùng để mention và phân biệt ngườidùng.
+            </div>
+          </div>
         </div>
       </div>
       <div>

src/hooks/useDMList.js

@@ -42,7 +42,7 @@ function matchesStudyBot(query) {
 
 export function useDMList() {
   const dispatch = useDispatch();
-  const { conversations, onlineUsers } = useSelector((state) => state.dm);
+  const { conversations, onlineUsers, conversationsFetched } = useSelector((state) => state.dm);
 
   const [searchResults, setSearchResults] = useState([]);
   const [searchQuery, setSearchQuery] = useState("");
@@ -53,10 +53,11 @@ export function useDMList() {
   const statusPollingRef = useRef(null);
   const processedMessageIds = useRef(new Set());
 
-  // Fetch conversations on mount
+  // Fetch conversations on mount — only if not already fetched
   useEffect(() => {
+    if (conversationsFetched) return; // Skip: already cached
     dispatch(fetchConversations());
-  }, [dispatch]);
+  }, [dispatch, conversationsFetched]);
 
   // Listen to realtime updates via WebSocket
   useEffect(() => {
@@ -214,7 +215,7 @@ export function useDMList() {
     return () => {
       mounted = false;
     };
-  }, [searchQuery]);
+  }, [searchQuery, dispatch]);
 
   // Polling online status for visible users
   const fetchStatuses = useCallback(async (userIds) => {
@@ -257,8 +258,18 @@ export function useDMList() {
     };
   }, [conversations, searchResults, searchQuery, fetchStatuses]);
 
-  // Normalize conversations for UI
-  const normalizedConversations = conversations.map((conv) => ({
+  // Normalize conversations for UI and sort by latest message (newest first)
+  const normalizedConversations = [...conversations]
+    .sort((a, b) => {
+      const timeA = a.last_message?.created_at
+        ? new Date(a.last_message.created_at).getTime()
+        : 0;
+      const timeB = b.last_message?.created_at
+        ? new Date(b.last_message.created_at).getTime()
+        : 0;
+      return timeB - timeA; // Descending: newest first
+    })
+    .map((conv) => ({
       id: conv.id,
       userId: conv.other_user?.id,
       name: conv.other_user?.display_name || "Unknown",
@@ -271,7 +282,7 @@ export function useDMList() {
       email: conv.other_user?.email || "",
       mutualFriends: 0,
       conversation: conv,
-  }));
+    }));
 
   const filteredConversations = searchQuery.trim()
     ? normalizedConversations.filter((dm) =>

src/pages/LoginPage.jsx

@@ -4,6 +4,7 @@ import {
   FiMail,
   FiLock,
   FiUser,
+  FiAtSign,
   FiEye,
   FiEyeOff,
   FiLoader,
@@ -41,14 +42,32 @@ function LoginPage() {
   const [showPassword, setShowPassword] = useState(false);
   const [form, setForm] = useState({
     displayName: "",
+    username: "",
     email: "",
     password: "",
   });
   const dispatch = useDispatch();
   const { loading, error } = useSelector((state) => state.auth);
+  const [usernameError, setUsernameError] = useState("");
 
-  const handleChange = (e) =>
-    setForm({ ...form, [e.target.name]: e.target.value });
+  const validateUsername = (value) => {
+    if (!value) return "";
+    if (value.length < 3) return "Username phải có ít nhất 3 ký tự";
+    if (value.length > 30) return "Username tối đa 30 ký tự";
+    if (!/^[a-z0-9_-]+$/.test(value)) return "Username chỉ chứa a-z, 0-9, _, -";
+    return "";
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    if (name === "username") {
+      const lowerValue = value.toLowerCase();
+      setForm({ ...form, [name]: lowerValue });
+      if (usernameError) setUsernameError("");
+    } else {
+      setForm({ ...form, [name]: value });
+    }
+  };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -56,13 +75,22 @@ function LoginPage() {
     if (isLogin) {
       dispatch(login({ email: form.email, password: form.password }));
     } else {
-      dispatch(
-        register({
-          displayName: form.displayName,
-          email: form.email,
-          password: form.password,
-        }),
-      );
+      const usernameValidation = validateUsername(form.username);
+      if (usernameValidation) {
+        setUsernameError(usernameValidation);
+        return;
+      }
+      const payload = {
+        displayName: form.displayName,
+        email: form.email,
+        password: form.password,
+      };
+      const trimmedUsername = form.username.trim();
+      if (trimmedUsername) {
+        payload.username = trimmedUsername;
+      }
+      console.log("Register payload:", JSON.stringify(payload, null, 2));
+      dispatch(register(payload));
     }
   };
 
@@ -239,26 +267,53 @@ function LoginPage() {
             {/* Form */}
             <form onSubmit={handleSubmit} className="space-y-4">
               {!isLogin && (
-                <div className="group">
-                  <label className="block text-xs font-semibold text-slate-600 mb-1.5 ml-1">
-                    Họ và tên
-                  </label>
-                  <div className="relative">
-                    <FiUser
-                      className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-indigo-500"
-                      size={18}
-                    />
-                    <input
-                      name="displayName"
-                      type="text"
-                      required={!isLogin}
-                      value={form.displayName}
-                      onChange={handleChange}
-                      className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 bg-white/80 text-slate-800 text-sm outline-none transition-all focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200/50 focus:bg-white placeholder:text-slate-400"
-                      placeholder="Nguyễn Văn A"
-                    />
+                <>
+                  <div className="group">
+                    <label className="block text-xs font-semibold text-slate-600 mb-1.5 ml-1">
+                      Họ và tên
+                    </label>
+                    <div className="relative">
+                      <FiUser
+                        className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-indigo-500"
+                        size={18}
+                      />
+                      <input
+                        name="displayName"
+                        type="text"
+                        required={!isLogin}
+                        value={form.displayName}
+                        onChange={handleChange}
+                        className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 bg-white/80 text-slate-800 text-sm outline-none transition-all focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200/50 focus:bg-white placeholder:text-slate-400"
+                        placeholder="Nguyễn Văn A"
+                      />
+                    </div>
                   </div>
-                </div>
+                  <div className="group">
+                    <label className="block text-xs font-semibold text-slate-600 mb-1.5 ml-1">
+                      Username
+                    </label>
+                    <div className="relative">
+                      <FiAtSign
+                        className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-indigo-500"
+                        size={18}
+                      />
+                      <input
+                        name="username"
+                        type="text"
+                        value={form.username}
+                        onChange={handleChange}
+                        className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 bg-white/80 text-slate-800 text-sm outline-none transition-all focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200/50 focus:bg-white placeholder:text-slate-400"
+                        placeholder="nguyenvana (tùy chọn)"
+                      />
+                    </div>
+                    {usernameError && (
+                      <p className="text-xs text-red-500 mt-1 ml-1">{usernameError}</p>
+                    )}
+                    <p className="text-xs text-slate-400 mt-1 ml-1">
+                      Tùy chọn. Nếu để trống, hệ thống sẽ tự tạo username từ email.
+                    </p>
+                  </div>
+                </>
               )}
 
               <div className="group">

src/services/api.js

@@ -99,10 +99,7 @@ async function silentRefresh() {
       localStorage.setItem("refreshToken", data.refreshToken);
     }
   } catch {
-    clearAccessToken();
-    if (typeof window !== "undefined") {
-      window.location.reload();
-    }
+    clearAuth();
   }
 }
 
@@ -129,6 +126,10 @@ export const clearAccessToken = () => {
 
 export const clearAuth = () => {
   clearAccessToken();
+  if (refreshTimer) {
+    clearTimeout(refreshTimer);
+    refreshTimer = null;
+  }
   if (typeof window !== "undefined") {
     localStorage.removeItem("refreshToken");
     localStorage.removeItem("auth_user");

src/services/socket.service.js

@@ -7,6 +7,7 @@ class SocketService {
     this.socket = null;
     this.listeners = new Map();
     this._connected = false;
+    this._activeDMRooms = new Set();
   }
 
   // ==================== Connection ====================
@@ -45,7 +46,10 @@ class SocketService {
     });
 
     this.socket.on("reconnect", (attemptNumber) => {
-      // Socket reconnected
+      // Socket reconnected - re-join active DM rooms
+      this._activeDMRooms.forEach((conversationId) => {
+        this.joinDM(conversationId);
+      });
     });
 
     this.socket.on("reconnect_error", (error) => {
@@ -81,15 +85,22 @@ class SocketService {
   // ==================== DM Room Events ====================
 
   joinDM(conversationId) {
+    if (!conversationId) return;
+    this._activeDMRooms.add(conversationId);
     this.socket?.emit("joinDM", { conversationId });
   }
 
   leaveDM(conversationId) {
+    if (!conversationId) return;
+    this._activeDMRooms.delete(conversationId);
     this.socket?.emit("leaveDM", { conversationId });
   }
 
-  sendDM(conversationId, content) {
-    this.socket?.emit("sendDM", { conversationId, content });
+  sendDM(conversationId, content, tempId) {
+    if (!conversationId) return;
+    const payload = { conversationId, content };
+    if (tempId) payload.tempId = tempId;
+    this.socket?.emit("sendDM", payload);
   }
 
   dmTyping(conversationId, isTyping) {

src/store/slices/authSlice.js

@@ -86,9 +86,9 @@ export const login = createAsyncThunk(
 
 export const register = createAsyncThunk(
   "auth/register",
-  async ({ displayName, email, password, avatar }, { rejectWithValue }) => {
+  async ({ displayName, username, email, password, avatar }, { rejectWithValue }) => {
     try {
-      const payload = { displayName, email, password };
+      const payload = { displayName, username, email, password };
       if (avatar) payload.avatar = avatar;
       const { data } = await authService.register(payload);
       const user = { ...data.user, name: data.user.displayName };

src/store/slices/dmSlice.js

@@ -66,6 +66,8 @@ const initialState = {
   typing: {}, // { [conversationId]: { userId, isTyping, timestamp } }
   onlineUsers: [],
   unreadCounts: {}, // { [conversationId]: number }
+  fetchedConversations: {}, // { [conversationId]: boolean } Track which conversations have been fetched (page 1)
+  conversationsFetched: false, // Track if conversations list has been fetched at least once
   loading: false,
   messagesLoading: false,
   error: null,
@@ -79,6 +81,7 @@ const dmSlice = createSlice({
     setActiveConversation: (state, action) => {
       state.activeConversationId = action.payload?.id || null;
       state.activeConversation = action.payload || null;
+      state.messagesLoading = false; // Reset loading when switching conversations
     },
 
     clearActiveConversation: (state) => {
@@ -212,6 +215,15 @@ const dmSlice = createSlice({
 
     clearMessages: (state, action) => {
       delete state.messages[action.payload];
+      delete state.fetchedConversations[action.payload];
+    },
+
+    setConversationsFetched: (state, action) => {
+      state.conversationsFetched = action.payload;
+    },
+
+    markConversationAsFetched: (state, action) => {
+      state.fetchedConversations[action.payload] = true;
     },
 
     resetDMState: () => initialState,
@@ -262,14 +274,27 @@ const dmSlice = createSlice({
       })
       .addCase(fetchMessages.fulfilled, (state, action) => {
         state.messagesLoading = false;
-        const { conversationId, messages } = action.payload;
+        const { conversationId, messages, meta } = action.payload;
         if (!state.messages[conversationId]) {
           state.messages[conversationId] = [];
         }
-        // Merge without dupes
-        const existingIds = new Set(state.messages[conversationId].map((m) => m.id));
+        const page = meta?.page || 1;
+        const existing = state.messages[conversationId];
+        const existingIds = new Set(existing.map((m) => m.id));
         const newMessages = messages.filter((m) => !existingIds.has(m.id));
-        state.messages[conversationId] = [...state.messages[conversationId], ...newMessages];
+
+        if (page === 1) {
+          // Initial load: merge new messages into existing
+          // Keep ALL existing messages (including real ones from WebSocket)
+          // Only add messages from API that don't already exist
+          state.messages[conversationId] = [...existing, ...newMessages];
+        } else {
+          // Load more: prepend older messages
+          state.messages[conversationId] = [...newMessages, ...existing];
+        }
+
+        // Mark this conversation as fetched (page 1)
+        state.fetchedConversations[conversationId] = true;
       })
       .addCase(fetchMessages.rejected, (state, action) => {
         state.messagesLoading = false;
@@ -304,6 +329,8 @@ export const {
   updateConversationLastMessage,
   setUnreadCount,
   clearMessages,
+  markConversationAsFetched,
+  setConversationsFetched,
   resetDMState,
   clearError,
 } = dmSlice.actions;