fix(chat): follow active response at bottom
This commit is contained in:
@@ -83,7 +83,7 @@ export function AgenticRectificationChat(props: AgenticRectificationChatProps) {
|
||||
const [acceptingTime, setAcceptingTime] = useState<string | null>(null);
|
||||
const [suggestions, setSuggestions] = useState<string[]>([]);
|
||||
const composer = useRef<HTMLTextAreaElement>(null);
|
||||
const conversationEnd = useRef<HTMLDivElement>(null);
|
||||
const conversation = useRef<HTMLElement>(null);
|
||||
const keyCounter = useRef(0);
|
||||
const openingStarted = useRef(false);
|
||||
|
||||
@@ -93,12 +93,14 @@ export function AgenticRectificationChat(props: AgenticRectificationChatProps) {
|
||||
}, [onPendingChange]);
|
||||
|
||||
useEffect(() => {
|
||||
const container = conversation.current;
|
||||
if (!container) return;
|
||||
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
conversationEnd.current?.scrollIntoView({
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: busy || reduceMotion ? "auto" : "smooth",
|
||||
block: "end",
|
||||
});
|
||||
}, [busy, error, messages.length, savedTime]);
|
||||
}, [busy, error, messages, savedTime]);
|
||||
|
||||
const send = useCallback(async (request: AgenticRectificationRequest, showUserMessage = true) => {
|
||||
const trimmed = request.action === "message" ? request.message.trim() : "";
|
||||
@@ -301,7 +303,7 @@ export function AgenticRectificationChat(props: AgenticRectificationChatProps) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="conversation" aria-label="生时校正对话" aria-busy={busy}>
|
||||
<section ref={conversation} className="conversation" aria-label="生时校正对话" aria-busy={busy}>
|
||||
<div className="message-list" aria-live="polite">
|
||||
{messages.map((message) => <ChatMessageRow key={message.renderKey} message={message} />)}
|
||||
{candidateResult?.selectionAllowed && candidateResult.candidates.length > 0 && (
|
||||
@@ -344,7 +346,6 @@ export function AgenticRectificationChat(props: AgenticRectificationChatProps) {
|
||||
</p>
|
||||
)}
|
||||
{error && <p className="error-message" role="alert">{error}</p>}
|
||||
<div ref={conversationEnd} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user