Scaling UI Flexibility: Enhancing Model Selection in Dyad

Enhancing User Control

In the dyad project, we recently focused on improving how users interact with our model selection interface. As our ecosystem of language models grows, the traditional one-size-fits-all approach to model discovery became a bottleneck. We needed a more nuanced way to categorize and highlight specific model tiers, such as our new "Super Value" pro-tier, while maintaining a clean UI.

The Implementation

To achieve this, we moved toward a more declarative structure for our model definitions. By extending our core LanguageModel type, we introduced optional properties to handle visual metadata like tagColor directly within the configuration.

interface ModelOption {
  id: string;
  name: string;
  tag?: 'Budget' | 'Fast' | 'Pro';
  tagColor?: string;
}

const renderModelTag = (option: ModelOption) => {
  return (
    <span style={{ backgroundColor: option.tagColor }}>
      {option.tag}
    </span>
  );
};

This refactoring allows our React components to dynamically style badges based on the model's metadata rather than hardcoding logic for every new model added to the system.

Refined Discovery Logic

Beyond visual styling, we updated the Model Picker filtering logic. We implemented a visibility toggle that respects the user's subscription tier. By filtering out "Pro" models for non-premium users and vice-versa, we simplify the cognitive load on the user. We also automated the removal of redundant "Pro" badges when the display name already conveys that status, creating a more professional and uncluttered aesthetic.

Takeaways

1. Data-Driven UI: Move visual configuration into the data model to reduce hardcoded UI logic.
2. Contextual Filtering: Use system state (like user roles) to prune interface options early, improving UX.
3. Visual Consistency: Centralize utility functions (like cn for class merging) to ensure tags and badges remain consistent across the app.

Generated with Gitvlg.com