mirror
/
ollama
mirror of https://github.com/ollama/ollama
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

app/ui: use requestAnimationFrame to prevent bottom line cutoff in streaming thinking display (#13137)

This commit is contained in:
Eva H 2025-12-10 15:29:48 -05:00 committed by GitHub
parent 7cf6f18c1f
commit c34fc64688
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/ui/app/src/components/Thinking.tsx
View File

@ -50,21 +50,33 @@ export default function Thinking({
// Position content to show bottom when collapsed // Position content to show bottom when collapsed
useEffect(() => { useEffect(() => {
if (isCollapsed && contentRef.current && wrapperRef.current) { if (isCollapsed && contentRef.current && wrapperRef.current) {
const contentHeight = contentRef.current.scrollHeight; requestAnimationFrame(() => {
const wrapperHeight = wrapperRef.current.clientHeight; if (!contentRef.current || !wrapperRef.current) return;
if (contentHeight > wrapperHeight) {
const translateY = -(contentHeight - wrapperHeight); const contentHeight = contentRef.current.scrollHeight;
contentRef.current.style.transform = `translateY(${translateY}px)`; const wrapperHeight = wrapperRef.current.clientHeight;
setHasOverflow(true); if (contentHeight > wrapperHeight) {
} else { const translateY = -(contentHeight - wrapperHeight);
setHasOverflow(false); contentRef.current.style.transform = `translateY(${translateY}px)`;
} setHasOverflow(true);
} else {
contentRef.current.style.transform = "translateY(0)";
setHasOverflow(false);
}
});
} else if (contentRef.current) { } else if (contentRef.current) {
contentRef.current.style.transform = "translateY(0)"; contentRef.current.style.transform = "translateY(0)";
setHasOverflow(false); setHasOverflow(false);
} }
}, [thinking, isCollapsed]); }, [thinking, isCollapsed]);
useEffect(() => {
if (activelyThinking && wrapperRef.current && !isCollapsed) {
// When expanded and actively thinking, scroll to bottom
wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
}
}, [thinking, activelyThinking, isCollapsed]);
const handleToggle = () => { const handleToggle = () => {
setIsCollapsed(!isCollapsed); setIsCollapsed(!isCollapsed);
setHasUserInteracted(true); setHasUserInteracted(true);