fix: 流式思考行随到随显,消除底部隐形占位空白
This commit is contained in:
@@ -18,6 +18,11 @@ export function Thinking({
|
||||
const [manualExpanded, setManualExpanded] = useState<boolean | null>(null)
|
||||
const expanded = manualExpanded ?? streaming
|
||||
|
||||
// 流式轨迹的行必须「随到随显」:fade-up 的 both+delay 会让新行在延迟期间
|
||||
// 透明但占高,流式期间底部因此持续留出一大片空白。交错入场只保留给
|
||||
// 非流式一次性渲染的静态轨迹(挂载时决定,之后不变更,避免整段重播动画)。
|
||||
const streamedMountRef = useRef(streaming)
|
||||
|
||||
const traceRef = useRef<HTMLDivElement>(null)
|
||||
const [lineHeight, setLineHeight] = useState(0)
|
||||
useLayoutEffect(() => {
|
||||
@@ -98,9 +103,13 @@ export function Thinking({
|
||||
<div ref={traceRef} className="flex flex-col gap-1 py-1">
|
||||
{rows.map((row, i) => (
|
||||
<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"
|
||||
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>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user