feat: proper chat message styling without rerendering

client/src/components/ChatMessage.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ChatMessage } from "../../../shared";
+
+function ChatMessageDisplay({
+  message,
+  userId,
+}: {
+  message: ChatMessage;
+  userId: string | undefined; // pass userId as string to avoid rerendering. if we useChatState here, it would rerender every single message every time a new chat message is added.
+}) {
+  const isOwn = userId === message.author.userId;
+
+  return (
+    <div key={message.id} className={`mb-4 ${isOwn ? "ml-auto" : "mr-auto"}`}>
+      <div
+        className={`flex items-center gap-2 text-sm text-gray-600 mb-1
+        ${isOwn ? "justify-end" : "justify-start"}`}
+      >
+        {!isOwn && <span className="font-medium">{message.author.name}</span>}
+        <span>{new Date(message.timestamp).toLocaleTimeString()}</span>
+        {isOwn && <span className="font-medium">{message.author.name}</span>}
+      </div>
+      <div
+        className={`max-w-[80%] p-3 rounded-2xl shadow-sm bg-gray-200
+        ${isOwn ? "ml-auto rounded-tr-none" : "mr-auto rounded-tl-none"}`}
+      >
+        {message.content}
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(ChatMessageDisplay);

client/src/components/MessageDisplay.tsx

@@ -1,19 +1,15 @@
 import React from "react";
 import { useChatState } from "../contexts/ChatContext";
+import ChatMessage from "./ChatMessage";
 
 function ChatMessages() {
   const { state } = useChatState();
+  const userId = state.currentUser?.userId;
 
   return (
     <>
       {state.messages.map((message) => (
-        <div key={message.id}>
-          <div>
-            <span>{message.author.name}</span>
-            <span>{new Date(message.timestamp).toLocaleTimeString()}</span>
-          </div>
-          <div>{message.content}</div>
-        </div>
+        <ChatMessage message={message} userId={userId} />
       ))}
     </>
   );

client/src/contexts/ChatContext.tsx

@@ -34,3 +34,8 @@ export const useChatState = () => {
   }
   return context;
 };
+
+export const useCurrentUser = () => {
+  const { state } = useChatState();
+  return state.currentUser;
+};

client/src/hooks/useWebSocket.ts

@@ -9,7 +9,7 @@ import { useChatState } from "../contexts/ChatContext";
 export function useWebSocket(roomId: string) {
   const [ws, setWs] = useState<WebSocket | null>(null);
   const [isConnected, setIsConnected] = useState(false);
-  const { state, actions } = useChatState();
+  const { actions } = useChatState();
 
   // Handle incoming messages
   const handleMessage = useCallback(
@@ -17,20 +17,22 @@ export function useWebSocket(roomId: string) {
       const message = JSON.parse(event.data) as ServerMessage;
 
       switch (message.type) {
-        case "USER_JOINED":
-          console.log("User joined", message.payload);
-          if (message.payload.user.name === state.currentUser?.name) {
-            actions.setUser(message.payload.user);
-          }
+        case "REGISTRATION_CONFIRMED":
+          actions.setUser(message.payload.user);
           break;
+
+        case "USER_JOINED":
+          break;
+
         case "CHAT_MESSAGE":
           actions.addMessage(message.payload);
           break;
+
         default:
           console.error("Unknown message type", message);
       }
     },
-    [state.currentUser, actions],
+    [actions],
   );
 
   // Send a message to the server

client/src/pages/Room.tsx

@@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
 import Layout from "../components/Layout";
 import Connect from "../components/ConnectWithName";
 import { useWebSocket } from "../hooks/useWebSocket";
-import ChatMessages from "../components/ChatMessages";
+import ChatMessages from "../components/MessageDisplay";
 import ChatInput from "../components/ChatInput";
 import { useChatState } from "../contexts/ChatContext";