Skip to content

Commit ff62b64

Browse files
fix(web): auto-scroll message list to latest
Fix message list to automatically scroll to the latest message on load and new messages. Ultraworked with [Sisyphus](https://github.com/code-yeonggu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
1 parent 277c198 commit ff62b64

File tree

1 file changed

+22
-3
lines changed

1 file changed

+22
-3
lines changed

web/src/components/MessageList.tsx

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useEffect, useRef } from 'react';
22
import { Message } from '../types';
33
import { ActionForm } from './ActionForm';
44
import { ActionPreview } from './ActionPreview';
@@ -7,7 +7,7 @@ interface MessageListProps {
77
messages: Message[];
88
onFormSubmit?: (messageId: string, formData: Record<string, any>) => void;
99
onActionConfirm?: (messageId: string) => void;
10-
onActionCancel?: (messageId: string) => void;
10+
onActionCancel?: (messageId: string) => void
1111
}
1212

1313
export const MessageList: React.FC<MessageListProps> = ({
@@ -16,6 +16,23 @@ export const MessageList: React.FC<MessageListProps> = ({
1616
onActionConfirm,
1717
onActionCancel,
1818
}) => {
19+
const messagesEndRef = useRef<HTMLDivElement>(null);
20+
21+
// 自动滚动到底部
22+
const scrollToBottom = () => {
23+
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
24+
};
25+
26+
// 当消息变化时滚动到底部
27+
useEffect(() => {
28+
scrollToBottom();
29+
}, [messages]);
30+
31+
// 组件加载时滚动到底部
32+
useEffect(() => {
33+
scrollToBottom();
34+
}, []);
35+
1936
return (
2037
<div className="flex-1 overflow-y-auto bg-white rounded-xl border border-gray-200 shadow-sm p-4">
2138
<div className="flex flex-col gap-4">
@@ -64,7 +81,9 @@ export const MessageList: React.FC<MessageListProps> = ({
6481
)}
6582
</div>
6683
))}
84+
{/* 滚动锚点 */}
85+
<div ref={messagesEndRef} />
6786
</div>
6887
</div>
6988
);
70-
};
89+
};

0 commit comments

Comments
 (0)