[Blazor] Components.AI — UI shells, theming, and CSS

[javiercn]

Part of the overall Components.AI design: #66178

Builds on #66183

---

Default UI Shells, Theming, and CSS

Summary

Provide ready-to-use chat layouts (ChatPage, ChatBubble, ChatDrawer) and a CSS design token system so applications can drop in a full chat UI with a single component and customize its appearance entirely through CSS custom properties. Also adds SuggestionList for quick-reply chip buttons.

Motivation

The core components (AgentBoundary, MessageList, MessageInput) are composable but require manual assembly. Most applications want one of three standard chat layouts:

• Full-page chat — the entire page is the conversation (like ChatGPT).
• Floating bubble — a small floating button that opens a chat panel (like customer support widgets).
• Side drawer — a panel that slides in from the left or right (like Copilot in VS Code).

Each layout composes the same core components but with different HTML structure, positioning, and interaction patterns.

Goals

• Provide ChatPage, ChatBubble, and ChatDrawer shell components that compose core components into ready-to-use layouts.
• Provide SuggestionList for quick-reply chip buttons.
• Provide a CSS design token system using custom properties on .sc-ai-root.
• Namespace all CSS classes with sc-ai- to avoid collisions.
• Support both interactive and SSR render modes for approval buttons.

Non-goals

• Dark mode theme (applications override CSS custom properties for dark mode).
• Responsive breakpoints (applications control responsive behavior via their own CSS).
• Component parameter-based styling (CSS custom properties are the styling mechanism).

Detailed design

Shell composition

All three shells compose the same core components:

• ChatPage: Full-page layout with header slot, MessageList, SuggestionList, and MessageInput.
• ChatBubble: Toggle button + dialog panel with MessageList and MessageInput.
• ChatDrawer: Sliding panel (left/right) with header, close button, MessageList, and MessageInput. Supports @bind-Open.

SuggestionList

Quick-reply chips shown when the conversation is idle. Each Suggestion has a Label, Prompt, and optional Icon. Chips are disabled during Streaming status. On click, sends suggestion.Prompt as a message.

CSS design token system

All visual properties driven by CSS custom properties on .sc-ai-root:

• Typography: --sc-ai-font-family, --sc-ai-font-size
• Colors: --sc-ai-color-bg, --sc-ai-color-text, --sc-ai-color-accent, --sc-ai-color-error
• Spacing: --sc-ai-spacing-xs/sm/md/lg
• Radius: --sc-ai-radius-sm/md/lg
• Shadows: --sc-ai-shadow-sm/md/lg
• Transitions: --sc-ai-transition-speed

SSR dual-mode approval buttons

Approval buttons render both <button type="submit"> (SSR) and onclick handlers (interactive). In SSR, onclick is a no-op. In interactive mode, onclick fires first.

Risks

• CSS specificity conflicts: Mitigated by the sc-ai- namespace prefix.
• Bubble z-index conflicts: Mitigated by making the z-index a CSS custom property.

Drawbacks

• Three shell components mean three similar implementations. However, their HTML structures are genuinely different.
• CSS custom properties require a modern browser (matches Blazor's requirements).

Test coverage

242 tests (cumulative) covering:

• ChatBubble open/close toggle, panel rendering, trigger icon switching.
• ChatDrawer open/close binding, position classes, header actions.
• ChatPage header rendering, welcome content, input configuration passthrough.
• SuggestionList chip rendering, click-to-send, disable during streaming.
• SSR approval button rendering (dual-mode submit + onclick).