fix: 修复研究助手首屏滚动与欢迎区布局

This commit is contained in:
yuxuanhui
2026-09-10 13:26:57 +08:00
parent 37e390a073
commit 1ba8d3ff3d
5 changed files with 98 additions and 25 deletions
+17 -15
View File
@@ -10,7 +10,7 @@ import {
IconPlus,
IconChevronRight,
} from "@douyinfe/semi-icons";
import { contextLabel, contextReferences, researchPrompts } from "./workspace";
import { contextLabel, contextReferences } from "./workspace";
import { chatTransport } from "./transport";
import { runLabels } from "./types";
import type {
@@ -58,7 +58,7 @@ export function ChatPanel({
const [loading, setLoading] = useState(false);
const root = useRef<HTMLElement>(null);
const input = useRef<HTMLDivElement>(null);
const bottom = useRef<HTMLDivElement>(null);
const messagesViewport = useRef<HTMLDivElement>(null);
const previousFocus = useRef<HTMLElement | null>(null);
const seenChanges = useRef(new Set<string>());
const current = useRef({ conversationId, context });
@@ -206,7 +206,7 @@ export function ChatPanel({
const editor = input.current?.querySelector<HTMLElement>(
'[contenteditable="true"]',
);
if (editor) editor.focus();
if (editor) editor.focus({ preventScroll: true });
else
root.current
?.querySelector<HTMLButtonElement>('button[aria-label="收起研究助手"]')
@@ -226,7 +226,11 @@ export function ChatPanel({
};
}, [open]);
useEffect(() => {
if (open) bottom.current?.scrollIntoView({ block: "nearest" });
if (!open || !messagesViewport.current) return;
// Scroll only the message region; empty conversations always start at the welcome.
messagesViewport.current.scrollTop = chat.messages.length
? messagesViewport.current.scrollHeight
: 0;
}, [chat.messages, open]);
async function createConversation() {
@@ -409,7 +413,12 @@ export function ChatPanel({
/>
)}
{failure && <Banner type="danger" description={failure} />}
<div className="ai-messages" aria-live="polite" aria-busy={streaming}>
<div
ref={messagesViewport}
className="ai-messages"
aria-live="polite"
aria-busy={streaming}
>
{loading && <Spin />}
{!chat.messages.length && (
<div className="ai-empty">
@@ -428,7 +437,9 @@ export function ChatPanel({
开始新会话
</Button>
)}
<span>修改和任务操作会先展示预览,确认后执行。</span>
<p className="ai-empty-note">
修改和任务操作会先展示预览,确认后执行。
</p>
</div>
)}
<AssistantDialogue
@@ -460,7 +471,6 @@ export function ChatPanel({
)}
</div>
)}
<div ref={bottom} />
</div>
<footer className="ai-composer" ref={input}>
<div className="ai-context">{contextLabel(context)}</div>
@@ -477,14 +487,6 @@ export function ChatPanel({
busy={!!activeRun || streaming}
onSubmit={() => void send()}
onStop={activeRun ? () => void stop() : undefined}
prompts={researchPrompts(context)}
hint={
context.page === "datasets"
? context.unsaved_field_selection
? "字段选择尚未保存;请先保存为固定研究输入。未保存备注不会发送。"
: "引用随当前页面更新,未保存备注不会发送。"
: "引用随当前页面更新。修改和任务操作会先展示预览,确认后执行。"
}
/>
</footer>
</aside>