Improve the model selector and select menu

[Misjohns]

Goal

Improve the styling of the model selection menus to aid the user in selecting the appropriate model.

• Provide some visual affordance to help to distinguish between different model types/stages
  – Base/Foundational (Implemented/Deployed)
  – Fine-tuned/Customized (Post SDG)
  – Pre-trained/Seed (RAG only, Chat with documents, Actively contributing, Data collection phase)
• Provide timestamps of when a model was created/modified
• Show recent category in menu list that shows last top 5 models accessed
• Include ability to filter the models menu

Definition of Done

• Review and validate requirements
• Create wireframe/lo-fi designs
• Brainstorm & collaborate during IxD meetings
• Review with stakeholders at PM sync
• Share during UI community meeting
• Share on the appropriate Slack/Discord channels
• Resolve all comments in the GitHub
• Participate in grooming with Eng team

Open items

• We need to settle to on the right terms for the different model types/stages
• Icons to represent the model types/stages
  -- Utilizing FPO icons in mock-ups
  -- RH branding to produce final resources

Related issues

Improve design of Chat with Model #438
Improve design of Custom Model Endpoint #460

Resources

Figma
UXD Presentation

[Misjohns]

Model selector default state

Model item includes:

• Model icon
• Model name
• Model type (Base or Fine-tuned)

Model menu list

Menu groups:

• Recent (Last 5)
• Fine-tuned
• Base
• Model list items
• Menu action (Manage models)
  -- This link could navigate the user to a page or modal where user could add/remove access to models

Model list item includes:

• Model icon
• Model name
• Model type (Base or Fine-tuned)
• Timestamp (Created or Updated)
• Selected option mark (blue check)

[Misjohns]

@beaumorley @Mdenisco @vishnoianil @nerdalert Please review the design and verify the requirements.