Design thing on the assistant ui. When i send a message , there is this jump as it adds this big spacer like "<div data-slot="aui_assistant-message-root" data-role="assistant" class="fade-in slide-in-from-bottom-1 relative animate-in duration-150" data-message-id="__optimistic__bY2bIzd" style="min-height: 434px; flex-shrink: 0; transition: min-height;"><div data-slot="aui_assistant-message-content" class="wrap-break-word px-2 text-foreground leading-relaxed"><div data-status="running" class="aui-md"></div></div><div data-slot="aui_assistant-message-footer" class="ml-2 flex items-center -mb-7.5 min-h-7.5 pt-1.5"></div></div>" that disappears after it gets a response. i dont like it. Please fix.
Based on a real day; names and selected personal details have been changed or omitted.
Design thing on the assistant ui. When i send a message , there is this jump as it adds this big spacer like "<div data-slot="aui_assistant-message-root" data-role="assistant" class="fade-in slide-in-from-bottom-1 relative animate-in duration-150" data-message-id="__optimistic__bY2bIzd" style="min-height: 434px; flex-shrink: 0; transition: min-heig
I’ll trace where aui_assistant-message-root is rendered and how the optimistic assistant message height is calculated, then patch the UI behavior and run the relevant checks.
I found the assistant message component and existing dashboard-specific CSS. There are already unrelated modified files in the worktree, so I’ll keep this narrowly scoped and avoid touching those.
The spacer is coming from @assistant-ui/react’s viewport slack behavior on the last assistant message when turnAnchor="top" is active. I’m going to disable that reserved height for our assistant message root by passing the primitive’s clamp props, instead of fighting the inline style with CSS.
That change leaves the rest of the scroll anchoring setup intact but makes the assistant message’s computed slack collapse to zero, so the empty optimistic response should no longer reserve hundreds of pixels. I’m running the project checks now.
pnpm build passes. Vite still reports the existing large chunk warning, but the build completed successfully; I’m continuing with the repo’s standard test and dashboard QA commands.
The build, harness test, and dashboard smoke QA all pass. Per the repo instruction, I’m checking the available deployment script and then I’ll commit/push only this assistant UI change.
This repo has a cf:deploy target, and the instruction says to deploy after completed changes when one exists. I’m running that now; if Cloudflare credentials are already present it should publish the Worker.
Deployment succeeded to the configured Cloudflare Worker. I’m staging just src/components/assistant-ui/thread.tsx, then committing and pushing the current branch.
Fixed the assistant UI jump in thread.tsx. The optimistic assistant message now collapses the @assistant-ui viewport slack instead of reserving a large temporary min-height.
Verified:
pnpm buildpnpm testpnpm run qa:dashboardpnpm run cf:deploy
Committed and pushed:
dd86370 Fix assistant optimistic message spacer- Deployed Cloudflare version:
example-id-0035
::git-stage{cwd="/Users/example/Documents/Projects/alpha-research"} ::git-commit{cwd="/Users/example/Documents/Projects/alpha-research"} ::git-push{cwd="/Users/example/Documents/Projects/alpha-research" branch="codex/run-lifecycle-reconciliation"}