CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-08-04 14:57:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

style(client): directional motion on the subagent prompt reveal

Browse source 
The preview only faded while the full prompt popped in with the height
expand. The preview now slides down as it fades toward the incoming
text, and the expanded prompt slides down into place from under the
header, so the disclosure reads as one continuous movement. Both
transforms sit behind motion-reduce.
This commit is contained in:
Marco Beretta 2026-07-31 05:03:40 +02:00
parent 35df2669c0
commit 86d8582535
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
1 changed files with 8 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
client/src/components/Chat/Messages/Content/Parts/SubagentBody.tsx
View file

@ -225,8 +225,8 @@ export function SubagentPrompt({ prompt }: { prompt: string }): JSX.Element {
</span>
<span
className={cn(
'min-w-0 flex-1 truncate text-xs text-text-secondary transition-opacity duration-200',
expanded ? 'opacity-0' : 'opacity-100',
'min-w-0 flex-1 truncate text-xs text-text-secondary transition-[transform,opacity] duration-200 ease-out motion-reduce:transition-none',
expanded ? 'translate-y-2 opacity-0' : 'translate-y-0 opacity-100',
)}
>
{preview}
@ -242,7 +242,12 @@ export function SubagentPrompt({ prompt }: { prompt: string }): JSX.Element {
</button>
<div id={contentId} style={expandStyle} aria-hidden={!expanded || undefined}>
<div className="overflow-hidden" ref={expandRef}>
<div className="max-h-64 overflow-y-auto px-4 pb-4 pt-0.5">
<div
className={cn(
'max-h-64 overflow-y-auto px-4 pb-4 pt-0.5 transition-transform duration-300 ease-out motion-reduce:transition-none',
expanded ? 'translate-y-0' : '-translate-y-2',
)}
>
<div className="markdown prose prose-sm message-content light dark:prose-invert w-full max-w-none break-words text-text-primary dark:text-gray-100">
<MarkdownLite content={prompt} codeExecution={false} />
</div>