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

fix(chat): smooth draft session transition

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-08-22 01:10:19 +03:00
parent 23928d342c
commit 64006cf2cd
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatContainer.tsx
+3 -3
View File
@@ -65,8 +65,8 @@ const EMPTY_MESSAGES: Array<{ info: Message; parts: Part[] }> = [];
const IDLE_SESSION_STATUS = { type: 'idle' as const }; const IDLE_SESSION_STATUS = { type: 'idle' as const };
const CHAT_FORCE_SCROLL_BOTTOM_EVENT = 'openchamber:chat-force-scroll-bottom'; const CHAT_FORCE_SCROLL_BOTTOM_EVENT = 'openchamber:chat-force-scroll-bottom';
const DEFAULT_RETRY_MESSAGE = 'Quota limit reached. Retrying automatically.'; const DEFAULT_RETRY_MESSAGE = 'Quota limit reached. Retrying automatically.';
const DRAFT_EXIT_DURATION_MS = 100; const DRAFT_EXIT_DURATION_MS = 120;
const COMPOSER_MOVE_DURATION_MS = 120; const COMPOSER_MOVE_DURATION_MS = 180;
const CHAT_SCROLL_STYLE = { const CHAT_SCROLL_STYLE = {
overflowAnchor: 'none', overflowAnchor: 'none',
overscrollBehavior: 'contain', overscrollBehavior: 'contain',
@@ -519,7 +519,7 @@ const DraftWelcome: React.FC<{ exiting?: boolean }> = ({ exiting = false }) => {
return ( return (
<div className={cn( <div className={cn(
'oc-draft-center flex min-h-0 flex-1 flex-col items-center justify-center px-6 text-center transition-opacity duration-100 ease-out motion-reduce:transition-none', 'oc-draft-center flex min-h-0 flex-1 flex-col items-center justify-center px-6 text-center transition-opacity duration-[120ms] ease-out motion-reduce:transition-none',
exiting && 'pointer-events-none opacity-0', exiting && 'pointer-events-none opacity-0',
)}> )}>
<h1 className="text-balance text-3xl font-normal tracking-tight text-foreground"> <h1 className="text-balance text-3xl font-normal tracking-tight text-foreground">
packages/ui/src/components/chat/ChatInput.tsx
+1 -1
View File
@@ -2387,7 +2387,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
&& !isVSCode && !isVSCode
&& !isMiniChatSurface; && !isMiniChatSurface;
const draftPresentationClassName = cn( const draftPresentationClassName = cn(
'transition-opacity duration-100 ease-out motion-reduce:transition-none', 'transition-opacity duration-[120ms] ease-out motion-reduce:transition-none',
draftPresentationExiting && 'pointer-events-none opacity-0', draftPresentationExiting && 'pointer-events-none opacity-0',
); );
packages/ui/src/components/chat/composer/DOCUMENTATION.md
+2 -2
View File
@@ -8,9 +8,9 @@ own state and wires these modules together; it should not grow logic that
belongs to one of them. belongs to one of them.
`ChatContainer.tsx` keeps one `ChatInput` mounted while a new-session draft `ChatContainer.tsx` keeps one `ChatInput` mounted while a new-session draft
becomes its first session. Draft-only UI first fades for 100ms while the editor becomes its first session. Draft-only UI first fades for 120ms while the editor
stays in place. The parent then moves the editor to its final session position stays in place. The parent then moves the editor to its final session position
with a 120ms transform-only FLIP animation. Reduced-motion mode skips these with a 180ms transform-only FLIP animation. Reduced-motion mode skips these
transitions. Do not restore separate draft and session composer branches: transitions. Do not restore separate draft and session composer branches:
remounting the editor loses focus and interrupts the transition. Keep the remounting the editor loses focus and interrupts the transition. Keep the
existing mobile fixed-position rules unchanged. existing mobile fixed-position rules unchanged.