Switched HTML input element with HTML textarea element; Adjust ref for messages; Create handler and useEffect for resizing textarea

Author: leekahung

frontend/src/pages/Chat/components/InputField.tsx

@@ -1,12 +1,13 @@
+import { useCallback, useEffect } from "react";
 import useMessages, { type IMessage } from "../../../hooks/useMessages";
 
 interface Props {
   setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>;
   isLoading: boolean;
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
   value: string;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  inputRef: React.RefObject<HTMLTextAreaElement | null>;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
 export default function InputField({
@@ -26,7 +27,9 @@ export default function InputField({
     const userMessageId = Date.now().toString();
     const botMessageId = (Date.now() + 1).toString();
 
-    onChange({ target: { value: "" } } as React.ChangeEvent<HTMLInputElement>);
+    onChange({
+      target: { value: "" },
+    } as React.ChangeEvent<HTMLTextAreaElement>);
     setIsLoading(true);
 
     // Add user message
@@ -60,10 +63,8 @@ export default function InputField({
         // Update only the bot's message
         setMessages((prev) =>
           prev.map((msg) =>
-            msg.messageId === botMessageId
-              ? { ...msg, content: fullText }
-              : msg,
-          ),
+            msg.messageId === botMessageId ? { ...msg, content: fullText } : msg
+          )
         );
       }
     } catch (error) {
@@ -75,33 +76,46 @@ export default function InputField({
                 ...msg,
                 content: "Sorry, I encountered an error. Please try again.",
               }
-            : msg,
-        ),
+            : msg
+        )
       );
     } finally {
       setIsLoading(false);
     }
   };
 
+  const resizeTextArea = useCallback(() => {
+    const inputElement = inputRef.current;
+    if (inputElement !== null) {
+      inputElement.style.height = "auto";
+      inputElement.style.height = `${inputElement.scrollHeight}px`;
+    }
+  }, [inputRef]);
+
+  useEffect(() => {
+    resizeTextArea();
+  }, [value, resizeTextArea]);
+
   return (
-    <div className="flex gap-2 mt-4 h-11 items-stretch mx-auto max-w-[700px]">
-      <input
-        type="text"
+    <div className="flex gap-2 mt-4 justify-center items-center mx-auto max-w-[700px]">
+      <textarea
         value={value}
         onChange={onChange}
+        onInput={resizeTextArea}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
             e.preventDefault();
             handleSend();
           }
         }}
-        className="w-full p-3 border-1 border-[#ddd] rounded-md box-border transition-colors duration-300 focus:outline-0 focus:border-[#4a90e2] focus:shadow-[0_0_0_2px_rgba(74,144,226,0.2)]"
+        rows={1}
+        className="overflow-auto resize-none max-h-22 w-full px-3 py-2 border-1 border-[#ddd] rounded-md box-border transition-colors duration-300 focus:outline-0 focus:border-[#4a90e2] focus:shadow-[0_0_0_2px_rgba(74,144,226,0.2)]"
         placeholder="Type your message here..."
         disabled={isLoading}
         ref={inputRef}
       />
       <button
-        className="px-6 bg-[#1F584F] hover:bg-[#4F8B82] text-white rounded-md cursor-pointer transition-color duration-300"
+        className="px-6 h-10 bg-[#1F584F] hover:bg-[#4F8B82] text-white rounded-md cursor-pointer transition-color duration-300"
         onClick={handleSend}
         disabled={isLoading || !value.trim()}
       >

frontend/src/pages/Chat/components/MessageWindow.tsx

@@ -25,7 +25,7 @@ export default function MessageWindow({
   const [isLoading, setIsLoading] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const { handleNewSession } = useSession();
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const messagesRef = useRef<HTMLDivElement | null>(null);
 
   const handleClearSession = () => {
@@ -56,18 +56,18 @@ export default function MessageWindow({
 
   return (
     <>
-      <div className="flex-1">
+      <div
+        className={`flex-1 ${
+          isOngoing ? "overflow-y-scroll" : "overflow-y-none"
+        }`}
+        ref={messagesRef}
+      >
         {isError ? (
           <div className="flex items-center justify-center h-full text-center">
             Error fetching chat history. Try refreshing...
           </div>
         ) : (
-          <div
-            className={`max-h-[calc(100dvh-240px)] sm:max-h-[calc(100dvh-20rem)] mx-auto max-w-[700px] ${
-              isOngoing ? "overflow-y-scroll" : "overflow-y-none"
-            }`}
-            ref={messagesRef}
-          >
+          <div className="max-h-[calc(100dvh-240px)] sm:max-h-[calc(100dvh-20rem)] mx-auto max-w-[700px]">
             {isOngoing ? (
               <div className="flex flex-col gap-4">
                 {messages.map((message) => (