feat: impprove chat feature

Author: truongnat

client/bun.lock

@@ -32,7 +32,9 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.60.0",
+    "react-hot-toast": "^2.5.2",
     "socket.io-client": "^4.8.1",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.5",
     "vite": "^6.0.0",

client/package.json

@@ -27,10 +27,10 @@ export function ChatRoom({ roomId }: ChatRoomProps) {
 
   const { connected } = useSocketStatus();
   const { user } = useAuthStore();
-  
+
   // Fetch room data
   const { data: room, isLoading: roomLoading, error: roomError } = useRoom(roomId);
-  
+
   // Fetch messages with infinite scroll
   const {
     data: messagesData,
@@ -39,7 +39,7 @@ export function ChatRoom({ roomId }: ChatRoomProps) {
     fetchNextPage,
     isFetchingNextPage,
   } = useInfiniteMessages(roomId);
-  
+
   // Setup real-time message updates
   useRealTimeMessages(roomId);
 
@@ -60,10 +60,10 @@ export function ChatRoom({ roomId }: ChatRoomProps) {
 
   // Handle member removal notifications
   useRealTimeMemberRemoval();
-  
+
   // Get messages from store (real-time updates)
   const storeMessages = messagesByRoom[roomId] || [];
-  
+
   // Combine server messages with store messages, prioritizing store messages (real-time)
   const allMessages = messagesData?.pages.flatMap(page => page.messages) || [];
 
@@ -86,11 +86,11 @@ export function ChatRoom({ roomId }: ChatRoomProps) {
   // Set current room and join via socket
   useEffect(() => {
     setCurrentRoom(roomId);
-    
+
     if (connected) {
       joinRoom(roomId);
     }
-    
+
     return () => {
       setCurrentRoom(null);
     };
@@ -125,8 +125,6 @@ export function ChatRoom({ roomId }: ChatRoomProps) {
     );
   }
 
-
-
   return (
     <div className="h-full flex flex-col bg-white">
       {/* Room header - Sticky */}
@@ -138,7 +136,7 @@ export function ChatRoom({ roomId }: ChatRoomProps) {
               {room.name.charAt(0).toUpperCase()}
             </AvatarFallback>
           </Avatar>
-          
+
           <div>
             <h1 className="font-semibold text-gray-900">{room.name}</h1>
             <div className="flex items-center gap-2 text-sm text-gray-500">
@@ -149,7 +147,7 @@ export function ChatRoom({ roomId }: ChatRoomProps) {
             </div>
           </div>
         </div>
-        
+
         <div className="flex items-center gap-2">
           {/* Show invite button only for room author */}
           {user && room.authorId === user.id && (
@@ -178,7 +176,7 @@ export function ChatRoom({ roomId }: ChatRoomProps) {
           />
         </div>
       </div>
-      
+
       {/* Connection status - Also sticky */}
       {!connected && (
         <div className="sticky top-[73px] z-10 bg-yellow-50 border-b border-yellow-200 px-4 py-2">
@@ -188,7 +186,7 @@ export function ChatRoom({ roomId }: ChatRoomProps) {
           </div>
         </div>
       )}
-      
+
       {/* Messages */}
       <MessageList
         roomId={roomId}
@@ -197,7 +195,7 @@ export function ChatRoom({ roomId }: ChatRoomProps) {
         hasNextPage={hasNextPage}
         onLoadMore={() => fetchNextPage()}
       />
-      
+
       {/* Message input */}
       <MessageInput
         roomId={roomId}

client/pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { Send } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useChatStore } from '@/stores/chatStore';
@@ -42,44 +42,44 @@ export function MessageInput({ roomId, disabled = false, placeholder = "Type a m
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!message.trim() || disabled) return;
-    
+
     // Send message
     sendMessage(roomId, message.trim());
-    
+
     // Clear input
     setMessage('');
-    
+
     // Stop typing indicator
     if (isTyping) {
       setTyping(roomId, false);
       setIsTyping(false);
     }
-    
+
     // Reset textarea height
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto';
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
       e.preventDefault();
       handleSubmit(e);
     }
-  };
+  }, [handleSubmit]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
     setMessage(value);
-    
+
     // Auto-resize textarea
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto';
       textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 120)}px`;
     }
-    
+
     // Handle typing indicator with debounce
     const now = Date.now();
 
@@ -132,7 +132,7 @@ export function MessageInput({ roomId, disabled = false, placeholder = "Type a m
 
   return (
     <div className="sticky bottom-0 z-10 border-t bg-white p-4 shadow-lg">
-      <form onSubmit={handleSubmit} className="flex items-end gap-2">
+      <div className="flex items-end gap-2">
         <div className="flex-1 relative">
           <textarea
             ref={textareaRef}
@@ -145,24 +145,25 @@ export function MessageInput({ roomId, disabled = false, placeholder = "Type a m
             style={{ minHeight: '40px', maxHeight: '120px' }}
             rows={1}
           />
-          
+
           {/* Emoji picker */}
           <div className="absolute right-2 top-1/2 -translate-y-1/2">
             <EmojiPicker onEmojiSelect={handleEmojiSelect} disabled={disabled} />
           </div>
         </div>
-        
+
         <Button
-          type="submit"
+          type="button"
           size="sm"
           disabled={!message.trim() || disabled}
           className="h-10 px-3"
+          onClick={(e) => handleSubmit(e)}
         >
           <Send className="w-4 h-4" />
           <span className="sr-only">Send message</span>
         </Button>
-      </form>
-      
+      </div>
+
       {/* Character count (optional) */}
       {message.length > 1800 && (
         <div className="mt-1 text-xs text-gray-500 text-right">