RFE: New Component - Version Selector Card

[asuwebdesign]

RFE: New Component - Version Selector Card

Problem Statement

A common task in technical, conversational workflows is asking a user to select a specific software version for deployment or configuration. Presenting a long, unstructured list of versions in a chat message is overwhelming and error-prone. The user may not know which version is appropriate, and the AI may struggle to parse their free-form text response accurately.

This selection process is often complicated by factors like CPU architecture (e.g., x86 vs. ARM), release channels (e.g., stable, preview), and support levels. Without a structured and guided selection process, the user is likely to be confused or choose an inappropriate version, leading to workflow failures and frustration.

Proposed Solution

We propose the creation of a new "Version Selector Card" component. This is a UI component embedded within the chat interface that enables users to make a clear, informed software version selection.

The card organizes versions into logical groups (e.g., by architecture) using tabs. It displays a curated list of recommended versions by default and allows users to progressively disclose older or less common options if needed. By providing rich metadata for each version and enabling the confirmation button only after a selection is made, the card guides the user to a valid choice and prevents errors.

Key Features:

• Tabbed Interface: An optional set of tabs to categorize versions, for example by "Single Arch" and "Multi Arch".

• Selectable Tiles: A list of versions where each item is a distinct, selectable tile, making the user's choice unambiguous.

• Rich Version Metadata: Each tile clearly displays the version number, a description of its use case, and status labels (e.g., "Latest," "Preview," "Recommended").

• Progressive Disclosure: A "Show/Hide older versions" toggle that reveals an expanded list of options, preventing information overload while maintaining access to a comprehensive list.

• Guarded Confirmation: The primary action button ("Continue with selection") is disabled until a valid version is selected, ensuring a selection is passed back to the AI.

• Clear Interaction States: Defined hover and selection states for all interactive elements, including tabs, tiles, and buttons.

Design Specifications & Data Model

Here are the design specifications and the proposed data model for the component.

Screenshots

Component States (Default, Expanded, Tabs, Selection):

Component Data Model Breakdown:

Component Elements:

• Optional Tab Bar: A container for 2-3 tabs to filter the list.

• Tile Cards List: A container for the list of selectable version tiles.

• Tile Card: An individual list item with a title, description, and optional metadata label.

• Toggle Button: A button to show/hide overflow or less-common list items.

• Selection Confirmation Button: A primary button that is disabled by default and enabled upon selection.

[asuwebdesign]

@kaylachumley, dropping the Figma concept file here for easy reference.