Bohdan Triapitsyn
f34027df10
* feat: add chat virtualization and turn grouping infrastructure Implement VirtualMessageList with virtualization and overscan for smooth scrolling Refactor MessageList to render only visible messages and pass scroll refs Introduce TurnGroupingContext and provider to stabilize per-turn rendering and reduce re-renders * feat: add web server session activity endpoint for visibility restore Add /api/session-activity endpoint to expose tracked session activity Use web server activity first when restoring visibility, with fallback to global status Update server SSE to set session phase on activity events * feat(chat): split TurnGroupingContext into UI/Streaming contexts Add separate UI state and streaming contexts to reduce re-renders. Skip animations for items visible in collapsed view when expanding. Track shown parts in collapsed mode to fade in progressively * feat(ui): cache turn groups with expand state and guard web activity Add isExpanded to the turn cache key to trigger updates correctly Expose isGroupExpanded from UI state so groups reflect expand/collapse Limit web server session activity fetch to web runtime only
70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface FadeInOnRevealProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
skipAnimation?: boolean;
|
|
}
|
|
|
|
const FADE_ANIMATION_ENABLED = true;
|
|
|
|
// Context to allow parent components (like VirtualMessageList) to disable animations
|
|
// for items entering the viewport due to scrolling rather than new content
|
|
const FadeInDisabledContext = React.createContext(false);
|
|
|
|
export const FadeInDisabledProvider: React.FC<{ disabled: boolean; children: React.ReactNode }> = ({ disabled, children }) => (
|
|
<FadeInDisabledContext.Provider value={disabled}>
|
|
{children}
|
|
</FadeInDisabledContext.Provider>
|
|
);
|
|
|
|
export const FadeInOnReveal: React.FC<FadeInOnRevealProps> = ({ children, className, skipAnimation }) => {
|
|
const contextDisabled = React.useContext(FadeInDisabledContext);
|
|
const shouldSkip = skipAnimation || contextDisabled;
|
|
const [visible, setVisible] = React.useState(shouldSkip);
|
|
|
|
React.useEffect(() => {
|
|
if (!FADE_ANIMATION_ENABLED || shouldSkip) {
|
|
return;
|
|
}
|
|
|
|
let frame: number | null = null;
|
|
|
|
const enable = () => setVisible(true);
|
|
|
|
if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
|
|
frame = window.requestAnimationFrame(enable);
|
|
} else {
|
|
enable();
|
|
}
|
|
|
|
return () => {
|
|
if (
|
|
frame !== null &&
|
|
typeof window !== 'undefined' &&
|
|
typeof window.cancelAnimationFrame === 'function'
|
|
) {
|
|
window.cancelAnimationFrame(frame);
|
|
}
|
|
};
|
|
}, [shouldSkip]);
|
|
|
|
if (!FADE_ANIMATION_ENABLED || shouldSkip) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'w-full transition-all duration-300 ease-out',
|
|
visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2',
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|