BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: smooth tool expansion animation

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-05-27 00:41:04 +03:00
parent 52ffe9daef
commit e8e4df5ea9
2 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
+14 -12
View File
@@ -34,8 +34,8 @@ const cleanReasoningText = (text: string): string => {
};
const SUMMARY_MAX_CHARS = 80;
const EXPANDED_CONTENT_UNMOUNT_DELAY_MS = 350;
const EXPANDED_CONTENT_SPRING = { type: 'spring' as const, visualDuration: 0.35, bounce: 0 };
const EXPANDED_CONTENT_UNMOUNT_DELAY_MS = 200;
const EXPANDED_CONTENT_TRANSITION = { duration: 0.2, ease: 'easeOut' as const };
/** Strip common markdown syntax so the header preview reads as plain text. */
const stripMarkdown = (text: string): string =>
@@ -202,19 +202,17 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
contentMountedRef.current = true;
if (!isExpanded) {
element.style.height = '0px';
element.style.opacity = '0';
element.style.overflow = 'hidden';
return;
}
element.style.height = '0px';
element.style.opacity = '0';
element.style.overflow = 'hidden';
const animation = animate(
element,
{ height: 'auto', opacity: 1 },
EXPANDED_CONTENT_SPRING,
{ height: 'auto' },
EXPANDED_CONTENT_TRANSITION,
);
contentAnimationRef.current = animation;
@@ -239,16 +237,14 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
if (isExpanded) {
element.style.height = '0px';
element.style.opacity = '0';
} else {
element.style.height = `${element.scrollHeight}px`;
element.style.opacity = '1';
}
const animation = animate(
element,
{ height: isExpanded ? 'auto' : '0px', opacity: isExpanded ? 1 : 0 },
EXPANDED_CONTENT_SPRING,
{ height: isExpanded ? 'auto' : '0px' },
EXPANDED_CONTENT_TRANSITION,
);
contentAnimationRef.current = animation;
@@ -366,12 +362,18 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
aria-hidden={!isExpanded}
style={{
height: isExpanded ? 'auto' : '0px',
opacity: isExpanded ? 1 : 0,
overflow: isExpanded ? 'visible' : 'hidden',
overflowAnchor: 'none',
}}
>
<div className="relative ml-2 pl-3 pb-1 pt-0.5">
<div
className="relative ml-2 pl-3 pb-1 pt-0.5"
style={{
opacity: isExpanded ? 1 : 0,
transform: isExpanded ? 'translateY(0)' : 'translateY(-4px)',
transition: 'opacity 180ms ease-out, transform 180ms ease-out',
}}
>
<span
aria-hidden="true"
className="pointer-events-none absolute left-0 top-0 bottom-0 w-px"
packages/ui/src/components/chat/message/parts/ToolPart.tsx
+12 -9
View File
@@ -197,8 +197,8 @@ const LiveDuration: React.FC<{ start: number; end?: number; active: boolean }> =
return <>{formatDuration(start, end, now)}</>;
};
const EXPANDED_CONTENT_TRANSITION_MS = 350;
const EXPANDED_CONTENT_SPRING = { type: 'spring' as const, visualDuration: 0.35, bounce: 0 };
const EXPANDED_CONTENT_TRANSITION_MS = 200;
const EXPANDED_CONTENT_TRANSITION = { duration: 0.2, ease: 'easeOut' as const };
const useAnimatedExpandedContent = (isExpanded: boolean) => {
const [shouldRender, setShouldRender] = React.useState(isExpanded);
@@ -1876,7 +1876,6 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
if (!expandedContentMountedRef.current) {
expandedContentMountedRef.current = true;
element.style.height = isExpanded ? 'auto' : '0px';
element.style.opacity = isExpanded ? '1' : '0';
element.style.overflow = isExpanded ? 'visible' : 'hidden';
return;
}
@@ -1885,16 +1884,14 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
if (isExpanded) {
element.style.height = '0px';
element.style.opacity = '0';
} else {
element.style.height = `${element.scrollHeight}px`;
element.style.opacity = '1';
}
const animation = animate(
element,
{ height: isExpanded ? 'auto' : '0px', opacity: isExpanded ? 1 : 0 },
EXPANDED_CONTENT_SPRING,
{ height: isExpanded ? 'auto' : '0px' },
EXPANDED_CONTENT_TRANSITION,
);
expandedContentAnimationRef.current = animation;
@@ -2725,13 +2722,19 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
aria-hidden={!isExpanded}
style={{
height: isExpanded ? 'auto' : '0px',
opacity: isExpanded ? 1 : 0,
overflow: isExpanded ? 'visible' : 'hidden',
overflowAnchor: 'none',
}}
>
{shouldRenderExpandedContent ? (
<div className="relative ml-2 pl-3">
<div
className="relative ml-2 pl-3"
style={{
opacity: isExpanded ? 1 : 0,
transform: isExpanded ? 'translateY(0)' : 'translateY(-4px)',
transition: 'opacity 180ms ease-out, transform 180ms ease-out',
}}
>
<span
aria-hidden="true"
className="pointer-events-none absolute left-0 top-px bottom-0 w-px"