fix: 流式思考行随到随显,消除底部隐形占位空白

This commit is contained in:
Rick Ye
2026-09-08 00:01:08 +08:00
parent 7565b8676f
commit 55f9838bcb
@@ -18,6 +18,11 @@ export function Thinking({
const [manualExpanded, setManualExpanded] = useState<boolean | null>(null) const [manualExpanded, setManualExpanded] = useState<boolean | null>(null)
const expanded = manualExpanded ?? streaming const expanded = manualExpanded ?? streaming
// 流式轨迹的行必须「随到随显」:fade-up 的 both+delay 会让新行在延迟期间
// 透明但占高,流式期间底部因此持续留出一大片空白。交错入场只保留给
// 非流式一次性渲染的静态轨迹(挂载时决定,之后不变更,避免整段重播动画)。
const streamedMountRef = useRef(streaming)
const traceRef = useRef<HTMLDivElement>(null) const traceRef = useRef<HTMLDivElement>(null)
const [lineHeight, setLineHeight] = useState(0) const [lineHeight, setLineHeight] = useState(0)
useLayoutEffect(() => { useLayoutEffect(() => {
@@ -98,9 +103,13 @@ export function Thinking({
<div ref={traceRef} className="flex flex-col gap-1 py-1"> <div ref={traceRef} className="flex flex-col gap-1 py-1">
{rows.map((row, i) => ( {rows.map((row, i) => (
<div <div
key={`${i}-${row.primary.slice(0, 12)}`} key={i}
className="flex min-h-7 w-full items-start gap-2 rounded-control px-1.5 py-0.5 text-left" className="flex min-h-7 w-full items-start gap-2 rounded-control px-1.5 py-0.5 text-left"
style={{ animation: `fade-up 400ms ease ${Math.min(i, 8) * 120}ms both` }} style={{
animation: streamedMountRef.current
? 'fade-up 250ms ease'
: `fade-up 400ms ease ${Math.min(i, 8) * 120}ms both`
}}
> >
<span className="min-w-0 text-[12.5px] leading-relaxed break-words text-ink-2">{row.primary}</span> <span className="min-w-0 text-[12.5px] leading-relaxed break-words text-ink-2">{row.primary}</span>
</div> </div>