fix: 流式思考行随到随显,消除底部隐形占位空白
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user