I’m building an AI chatbot and I’m using tailwind to integrate css in my jsx file. I’ve been stuck on how to make the app scroll down automatically whenever a new message is sent or recieved. I want it so that if i scrolled up while waiting for the bot to respond it drops me down to see the response immediately. I also want it so that it doesn’t send a blank message.

import { io } from "socket.io-client";

function ChatMessage( {message, type}) {
  return(
    <div className={`flex w-full ${type == "send" ?  "justify-end" : "justify-start"}`}>
      {type == "send" ? (
        <div className="bg-green-300 p-2 m-3 rounded-b-xl rounded-tl-xl shadow-md" >
          {message}
          </div>
      ) : ( 
        <div className="bg-gray-300 p-2 m-3 rounded-b-xl rounded-tr-xl shadow-md" >
        {message}
        </div>
      )}

      
    </div>
  )
}

function App() {
  const [socket, setSocket] = useState(null);
  const [input_message, setInputMessage] = useState("");
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const newSocket = io("http://localhost:8080"); // Ensure this is the correct server endpoint
    setSocket(newSocket);

    newSocket.on("response", (message) => {
      setMessages((prevMessages) => [
        ...prevMessages,
        {
          type: "recieve",
          message,
        },
      ]);
    });

    return () => newSocket.close();
  }, []);

  const sendMessage = ($event) => {
    if($event.key !== "Enter") return;
    if (socket) {
      setMessages((prevMessages) => [
        ...prevMessages,
        {
          type: "send",
          message: input_message,
        },
      ]);
      socket.emit("message", input_message);
      setInputMessage(""); // Clear the input field after sending the message
    }
  };

  return (
    <div className="p-5 h-screen bg-gradient-to-b from-green-950 to-green-200">
      <div className="container mx-auto bg-blend-screen opacity-90 h-full flex flex-col">
        <div className="flex-grow p-3 flex flex-col items-end overflow-auto">
          <div className="w-full">
            {messages.map((message, index) => (
              <ChatMessage key={index} message={message.message} type={message.type} />
            ))}
          </div>
        </div>
        <div className="h-[100px] p-3 flex justify-center items-center bg-green-700 opacity-65">
          <input
            onKeyDown={sendMessage}
            value={input_message}
            onChange={(e) => setInputMessage(e.target.value)}
            placeholder="Ask me anything...."
            type="text"
            className="w-full p-2 bg-transparent text-white border-white border-2 rounded-md outline-none"
          />
          <button onClick={sendMessage} className="bg-white px-3 py-2 rounded-md mx-2 cursor-pointer">
            Send
          </button>
        </div>
      </div>
    </div>
  );
}

export default App;

I tried adding h-full in before overflow-auto but that doesn’t work.