feat: improve ux with autoscroll to end, closer to styling guidelines

client/src/components/ChatInput.tsx

@@ -17,18 +17,13 @@ function ChatInput({ onSendMessage }: ChatInputProps) {
 
   return (
     <form onSubmit={handleSubmit} className="mt-4">
-      <div className="flex gap-2">
-        <input
-          type="text"
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          placeholder="Type a message..."
-          className="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-        />
-        <button type="submit" disabled={!message.trim()} className="btn">
-          Send
-        </button>
-      </div>
+      <input
+        type="text"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="Message"
+        className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+      />
     </form>
   );
 }

client/src/components/ChatMessage.tsx

@@ -16,9 +16,18 @@ function ChatMessageDisplay({
         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>}
+        {!isOwn && (
+          <span className="font-bold text-gray-700">{message.author.name}</span>
+        )}
+        <span className="font-medium opacity-45">
+          {new Date(message.timestamp).toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}
+        </span>
+        {isOwn && (
+          <span className="font-bold text-gray-700">{message.author.name}</span>
+        )}
       </div>
       <div
         className={`max-w-[80%] p-3 rounded-2xl shadow-sm bg-gray-200

client/src/components/Layout.tsx

@@ -6,7 +6,7 @@ function Layout({ children }: LayoutProps) {
   return (
     <>
       <main className="min-h-screen p-4">
-        <header className="top-0 w-full bg-white py-4">
+        <header className="top-0 w-full bg-white">
           <h1 className="text-3xl text-center">Simple Chat</h1>
         </header>
         <div className="max-w-2xl md:p-8 m-auto">{children}</div>

client/src/components/MessageDisplay.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { ServerMessage } from "../../../shared";
 import { useChatState } from "../contexts/ChatContext";
 import ChatMessage from "./ChatMessage";
@@ -6,6 +6,16 @@ import ChatMessage from "./ChatMessage";
 function ChatMessages() {
   const { state } = useChatState();
   const userId = state.currentUser?.userId;
+  const messagesEndRef = useRef<HTMLDivElement>(null); // ref to an empty div at the end to scroll to
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  // scroll to bottom when messages change
+  useEffect(() => {
+    scrollToBottom();
+  }, [state.messages]);
 
   function renderMessage(message: ServerMessage) {
     switch (message.type) {
@@ -40,7 +50,12 @@ function ChatMessages() {
     }
   }
 
-  return <>{state.messages.map(renderMessage)}</>;
+  return (
+    <div className="min-h-[calc(100vh-theme('spacing.48'))] overflow-y-auto p-4">
+      {state.messages.map(renderMessage)}
+      <div ref={messagesEndRef} />
+    </div>
+  );
 }
 
 export default React.memo(ChatMessages);