chat-ui
ff4e765e - Simplify reasoning/tool blocks and refresh nav, models, badge styling (#2259)

Commit
75 days ago
Simplify reasoning/tool blocks and refresh nav, models, badge styling (#2259) * style: simplify reasoning and tool call blocks Drop the icon column, badge, and connector line from BlockWrapper, and replace the 2-line preview on reasoning blocks with a chevron-disclosure header matching the tool call pattern. Tool detail panels now use plain labels with tinted code-block backgrounds instead of bordered containers. * style: tune block typography and extend neutral gray palette Bump label size to text-smd, lighten the closed-state color, and add hover/expanded color states scoped via a named group to avoid bleeding across blocks. Bottom margin between consecutive blocks is mb-1.5, expanded to mb-3 when a prose element follows. Extend the gray palette down to 50-500 with true-neutral values so shades referenced via dark:text-gray-* fit the same hue-free ramp as the existing 600-950 overrides. Re-theme the typography plugin's prose/prose-invert variables through the project's gray scale so hr, table borders, bullets, and code surfaces no longer pull from stock Tailwind's slate-tinged defaults. * style: drop stray blank line in ToolUpdate script block * style: shimmer active labels and tighten tool detail visuals Promote .router-shimmer (light + dark + keyframe) from ChatWindow to global main.css and apply it to the Thinking and tool labels while they're in flight. Drops the animate-pulse fallback and the active purple state. Bump label closed-state contrast (gray-500/400), strip tracking-wider from the Input/Output/Error captions, and switch the tinted code blocks from rounded-md to rounded-lg. * style: neutralize capability badges and tighten chrome across nav and models Drop colored backgrounds from the model capability badges in the models grid and settings nav (tools/multimodal/fastest/cheapest) — all now use bg-gray-100 with a soft gray icon. Pull the tool name <code> chip out of the shimmer span so it stays legible while the label gradient animates. Edit/Copy actions on user messages lose their borders in favor of a hover-only gray bg, and the inline Send button picks up a lighter base with a hover state. Footer rows in NavMenu (User, Models, MCP, Settings, theme) match the conversation-row height pattern (h-[2.08rem] / max-sm:h-10) and the gap drops to gap-px so vertical spacing is uniform with the conversation list. Models grid removes the bordered container; each row is now a rounded-xl card with a hover bg, no separator borders. Reasoning labels go back to text-sm. * style: prettier formatting for ToolUpdate and models page * style: halve h2/h3 top margins in prose * style: tint tool name chip blue and drop MCP badge border * style: shrink nav row heights and tighten typography NavConversationItem and NavMenu footer rows drop to h-8 (was 2.08rem) on sm+, group label moves to text-xs, and BlockWrapper bottom margin when followed by prose drops from mb-3 to mb-2. * style: nav rows text-base on mobile, sm:text-sm on desktop
Author
Parents
Loading