🤖 Add branded model display with provider icons #210
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Create ModelDisplay component to show provider icons with model names - Add Anthropic SVG logo (from Downloads) - Replace plain text model display in AssistantMessage with ModelDisplay - Configure vite-plugin-svgr to handle SVG imports as React components - Icon inherits text color via currentColor for consistent theming The component parses model strings like 'anthropic:claude-sonnet-4-5' and displays the provider icon alongside the model name.
- Add OpenAI SVG logo (from Downloads) - Update ModelDisplay to support OpenAI provider icon - Refactor icon selection to use switch statement for cleaner extensibility - Update CSS to handle generic SVG fill attributes via currentColor Now supports: - anthropic:claude-sonnet-4-5 → [Anthropic Icon] claude-sonnet-4-5 - openai:gpt-4 → [OpenAI Icon] gpt-4
- Wrap ModelDisplay in TooltipWrapper component - Show full raw model string (e.g., 'anthropic:claude-sonnet-4-5') on hover - Centered tooltip alignment for better UX Users can now hover over the model name to see the full provider:model format, even when the icon and name are displayed separately.
- Create formatModelDisplayName() utility for human-readable model names - Transform technical names to readable format: - 'claude-sonnet-4-5' -> 'Sonnet 4.5' - 'gpt-5-pro' -> 'GPT-5 Pro' - 'gemini-2-0-flash-exp' -> 'Gemini 2.0 Flash Exp' - Support Claude, GPT, and Gemini model families - Remove text-transform: lowercase from ModelContainer - Update AGENTS.md to avoid testing simple mapping operations
Add text-transform: none to ModelContainer to override the parent MessageTypeLabel's uppercase transform. This ensures formatted model names like 'Sonnet 4.5' and 'GPT-5 Pro' display correctly instead of being forced to 'SONNET 4.5' and 'GPT-5 PRO'.
- Remove 'ASSISTANT' text from AssistantMessage label - Update ModelDisplay to match MessageHeader styling: - font-size: 11px (was 10px) - font-weight: 500 (was normal) - color: #cccccc (was text-secondary) - Increase icon size from 12px to 14px for better visibility - Increase gap from 4px to 6px for better spacing ModelDisplay now stands alone as the message type indicator, making the UI cleaner and the model information more prominent.
Add vertical-align: middle to ModelContainer to ensure proper alignment with the timestamp text in the message header.
Replace hardcoded #cccccc with --color-message-header CSS variable: - Add --color-message-header: hsl(0 0% 80%) to colors.tsx - Update MessageWindow MessageHeader to use variable - Update ModelDisplay to use variable Follows project color guidelines: all colors defined centrally.
Add !important to fill: currentColor rule to override inline fill attributes in SVGs. The OpenAI SVG has fill="#000000" hardcoded, which was causing it to render black instead of matching the theme color.
Remove fill="#000000" from OpenAI SVG and simplify CSS to apply currentColor to all SVG elements (path, circle, rect) rather than only those with fill attributes. This ensures both icons inherit the theme color properly.
Show model icon and name in workspace streaming tooltip instead of generic 'Assistant is responding': - Update StatusIndicator to accept ReactNode for title (not just string) - Import and use ModelDisplay in ProjectSidebar streaming tooltip - Display as '[Icon] Model Name is responding' when streaming Example: '[A] Sonnet 4.5 is responding' instead of 'Assistant is responding'
Add fontSize, iconSize, and gap props to ModelDisplay with sensible defaults: - Default: 11px font, 14px icon, 6px gap (for message headers) - Tooltip: 10px font, 10px icon, 4px gap (smaller for inline use) ModelDisplay now inherits color and font-weight from parent, making it adapt to any context. Updated ProjectSidebar tooltip to use smaller sizing.
Make vertical-align configurable via prop: - Default: "middle" for message headers (aligns with timestamp) - Tooltip: "baseline" for inline text (aligns with surrounding text) This fixes misalignment between ModelDisplay and "is responding" text in the streaming tooltip.
Add showTooltip prop to ModelDisplay (default: true): - When false, renders just the ModelContainer without TooltipWrapper - Fixes alignment issues when used within another tooltip Use default sizing (11px) in streaming tooltip to match surrounding text, eliminating the inline-block wrapper that caused misalignment.
Replace absolute pixel sizing with em-based relative units: - Icon size: 1.2em (scales with parent font-size) - Gap: 0.4em (scales with parent font-size) - Font size: inherit (uses parent's font-size) This follows better design principles: - Component adapts to any context automatically - No need to specify sizes for different contexts - Maintains consistent proportions at any scale - Simpler API with fewer props
Set verticalAlign="baseline" for ModelDisplay in streaming tooltip to align with surrounding text. The default "middle" is for message headers where it aligns with timestamps, not inline text.
- Remove verticalAlign prop from ModelDisplay (incompatible with flex) - Add display: inline-flex to MessageTypeLabel for proper flex participation - Let flexbox align-items: center handle all alignment naturally
- Change icon from 1.2em to 1em (matches font-size exactly) - Reduce gap from 0.4em to 0.3em for tighter spacing - Ensures icon doesn't exceed text height and throw off alignment
- data-model-display, data-model-icon, data-model-display-tooltip, data-model-tooltip-text - Makes it easy to find and inspect elements in DevTools
Replace flex layout with simple inline/inline-block model: - ModelContainer: display: inline (not flex) - IconWrapper: inline-block with vertical-align: middle - Icon size: 1em (matches text height exactly) No more fighting flex contexts - uses CSS baseline alignment as designed.
- Increase icon from 1em to 1.1em (more visible) - Use vertical-align: -0.125em instead of middle (lifts icon for better visual centering)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Replaces generic "ASSISTANT" label with branded model names and provider icons.
Changes
Assistant messages now show [Icon] Model Name instead of "ASSISTANT":
Smart formatting:
claude-sonnet-4-5→ "Sonnet 4.5"gpt-5-pro→ "GPT-5 Pro"gemini-2-0-flash-exp→ "Gemini 2.0 Flash Exp"Tooltip: Hover shows full technical model string (e.g., "anthropic:claude-sonnet-4-5")
Implementation
ModelDisplaycomponent with provider icon support (Anthropic, OpenAI)formatModelDisplayName()utility for human-readable namesGenerated with
cmux