Skip to content

Commit 907bbf9

Browse files
author
Dylan Huang
committed
Add auto-scroll functionality to ChatInterface for new messages
- Implemented auto-scrolling to the bottom of the chat window when new messages are received, enhancing user experience during conversations. - Introduced a new scrollContainerRef to manage scrolling behavior effectively.
1 parent bc3e395 commit 907bbf9

File tree

1 file changed

+12
-0
lines changed

1 file changed

+12
-0
lines changed

vite-app/src/components/ChatInterface.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,20 @@ export const ChatInterface = ({ messages }: ChatInterfaceProps) => {
1616
const [initialMouseX, setInitialMouseX] = useState(0);
1717
const [initialMouseY, setInitialMouseY] = useState(0);
1818
const chatContainerRef = useRef<HTMLDivElement>(null);
19+
const scrollContainerRef = useRef<HTMLDivElement>(null);
1920
const resizeHandleRef = useRef<HTMLDivElement>(null);
2021
const heightResizeHandleRef = useRef<HTMLDivElement>(null);
2122

23+
// Auto-scroll to bottom when new messages come in
24+
useEffect(() => {
25+
if (scrollContainerRef.current) {
26+
scrollContainerRef.current.scrollTo({
27+
top: scrollContainerRef.current.scrollHeight,
28+
behavior: "smooth",
29+
});
30+
}
31+
}, [messages]);
32+
2233
// Handle horizontal resizing
2334
useEffect(() => {
2435
const handleMouseMove = (e: MouseEvent) => {
@@ -113,6 +124,7 @@ export const ChatInterface = ({ messages }: ChatInterfaceProps) => {
113124
style={{ width: `${chatWidth}px` }}
114125
>
115126
<div
127+
ref={scrollContainerRef}
116128
className="bg-white border border-gray-200 p-4 overflow-y-auto relative"
117129
style={{ height: `${chatHeight}px` }}
118130
>

0 commit comments

Comments
 (0)