Merge pull request #1538 from swizzmagik/feat/add-autoscroll-chat-client

Author: monilpat

CHANGELOG.md

@@ -1224,4 +1224,4 @@
 
 
 
-\* *This Changelog was automatically generated by [github_changelog_generator](https://github.com/github-changelog-generator/github-changelog-generator)*
+\* *This Changelog was automatically generated by [github_changelog_generator](https://github.com/github-changelog-generator/github-changelog-generator)*

client/src/Chat.tsx

@@ -1,11 +1,10 @@
-import { useRef, useState } from "react";
-import { useParams } from "react-router-dom";
-import { useMutation } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
-import { ImageIcon } from "lucide-react";
 import { Input } from "@/components/ui/input";
+import { useMutation } from "@tanstack/react-query";
+import { ImageIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useParams } from "react-router-dom";
 import "./App.css";
-import path from "path";
 
 type TextResponse = {
     text: string;
@@ -19,6 +18,15 @@ export default function Chat() {
     const [messages, setMessages] = useState<TextResponse[]>([]);
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
 
     const mutation = useMutation({
         mutationFn: async (text: string) => {
@@ -115,6 +123,7 @@ export default function Chat() {
                             No messages yet. Start a conversation!
                         </div>
                     )}
+                    <div ref={messagesEndRef} />
                 </div>
             </div>