Skip to content

feat(ui): new model picker combobox #7904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 54 commits into from
Apr 23, 2025
Merged

feat(ui): new model picker combobox #7904

merged 54 commits into from
Apr 23, 2025

Conversation

psychedelicious
Copy link
Collaborator

Summary

  • Add a button to go to the model manager next to every model combobox.
  • Add onClickGoToModelManager prop to override what the button does. If this is provided, the button will render, even if the model manager is set as a disabled tab (the tab will not render).
  • Abstract out the workflow editor's model input field component. Previously every model field copied the same combobox components and there were subtle inconsistencies across them - now they are all identical (and have the model manager button).

Well, it turns out that is a crapload of added buttons. Too many? Maybe. Demo:

Screen.Recording.2025-04-09.at.4.33.00.pm.mov

Related Issues / Discussions

Offline discussion

QA Instructions

n/a

Merge Plan

n/a

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

@github-actions github-actions bot added the frontend PRs that change frontend files label Apr 9, 2025
@psychedelicious psychedelicious force-pushed the psyche/feat/ui/go-to-mm-buttons-everywhere branch from 15b2cf7 to 09021df Compare April 14, 2025 10:07
@github-actions github-actions bot added the frontend-deps PRs that change frontend dependencies label Apr 14, 2025
@psychedelicious psychedelicious force-pushed the psyche/feat/ui/go-to-mm-buttons-everywhere branch from 3b33984 to 60d8dfd Compare April 17, 2025 10:18
@psychedelicious
Copy link
Collaborator Author

This PR has turned into a new-combobox-component PR. The most important one is the model picker, which is fully customized and functional now:

Screen.Recording.2025-04-17.at.10.27.50.pm.mov

TODO:

  • User the picker for other model comboboxes.
  • Clean up the model manager buttons I had added everywhere.
  • Use the generic combobox in other places where it makes sense to use it. Hopefully we can totally remove the one based on chakra-react-select.

@psychedelicious
feat(ui): accept callback to override navigate to model manager funct…
d83b9cf 
…ionality

If provided, `<NavigateToModelManagerButton />` will render, even if `disabledTabs` includes "models". If provided, `<NavigateToModelManagerButton />` will run the callback instead of switching tabs within the studio.

The button's tooltip is now just "Manage Models" and its icon is the same as the model manager tab's icon ([CUBE!](https://www.youtube.com/watch?v=4aGDCE6Nrz0)).
@psychedelicious
fix(ui): useModelCombobox should use null for no value instead of `…
4e3f13b 
…undefined`

This fixes an issue where the refiner combobox doesn't clear itself visually when clicking the little X icon to clear the selection.
@psychedelicious
feat(ui): abstract out workflow editor model combobox, ensure consist…
7136402 
…ent ui for all model fields
@psychedelicious
feat(ui): add <NavigateToModelManagerButton /> to model comboboxes …
5ec2421 
…everywhere
@psychedelicious
feat(ui): remove go to mm button from node fields
89ca92c
@psychedelicious
chore(ui): bump cmdk to latest
c47d312
@psychedelicious
feat(ui): reworked model selection ui (WIP)
86bab0f
@psychedelicious
feat(ui): reworked model selection ui (WIP)
ad8f0e1
@psychedelicious
feat(ui): reworked model selection ui (WIP)
51bc5a6
@psychedelicious
feat(ui): just make the damn thing myself
8de93ef
@psychedelicious
feat(ui): just make the damn thing myself
94b6ffe
@psychedelicious
feat(ui): toast on select for demo purposes
26680e6
@psychedelicious
feat(ui): iterate on model combobox (wip)
f059ff0
@psychedelicious
feat(ui): add useStateImperative
39555f0
@psychedelicious
feat(ui): iterate on model combobox (wip)
af467b6
@psychedelicious
feat(ui): iterate on model combobox (wip)
24cb13e
@psychedelicious
feat(ui): simplify ScrollableContent
102b177
@psychedelicious
feat(ui): iterate on model combobox (wip)
ad42dd8
@psychedelicious
feat(ui): iterate on model combobox (wip)
461a725
@psychedelicious
feat(ui): iterate on model combobox (wip)
c5642ab
@psychedelicious
feat(ui): iterate on model combobox (wip)
8a66140
@psychedelicious
feat(ui): iterate on model combobox (wip)
8530dc1
@psychedelicious
feat(ui): onSelectId -> onSelectById
1c9d632
@psychedelicious
feat(ui): genericizing picker
be0367c
@psychedelicious
feat(ui): wip model picker
b7da879
@psychedelicious
feat(ui): wip model picker
fd90745
@psychedelicious
feat(ui): wip model picker
99aa36e
@psychedelicious
chore(ui): bump react-resizable-panels to latest
84e6f61 
This resolves a bug where SVG elements were ignored when checking when cursor is over a resize handle
@psychedelicious
tweak(ui): remove bg on ModelImage fallback
bfa8849
@psychedelicious
feat(ui): wip model picker
9563d1c
@psychedelicious
feat(ui): model picker filter buttons
be96c61
@psychedelicious
feat(ui): remove description from model pciker for now
e35bfbc
@psychedelicious
chore(ui): lint
0f198a8
@psychedelicious
feat(ui): when no model bases selected, show all models
5a62ccc
@psychedelicious
feat(ui): add clear search button to model combobox
102f911
@psychedelicious
feat(ui): split out mainmodelpicker component
4dadbd3
@psychedelicious
fix(ui): flash of "select a model" when changing model
1b21978
@psychedelicious
feat(ui): tooltip for compact/full model picker view
da619ec
@psychedelicious psychedelicious force-pushed the psyche/feat/ui/go-to-mm-buttons-everywhere branch from a12e696 to da619ec Compare April 22, 2025 09:41
@psychedelicious
Copy link
Collaborator Author

psychedelicious commented Apr 22, 2025 •
edited
Loading

I've finalized the main model picker:

  • When no model bases are selected, show everything instead of nothing.
  • When no models are installed, fallback links to the model manager's starter models tab.
  • Highlight red when no model selected.

Screen.Recording.2025-04-22.at.8.15.19.pm.mov

Looks like this when no models are installed:

Screen.Recording.2025-04-22.at.8.13.49.pm.mov

Still some items to finish up in future PR, but lets get this merged for now:

  • Use the picker for other model comboboxes.
  • Partially done: remove excessive go-to-mm buttons I had added everywhere.
  • Use the generic combobox in other places where it makes sense to use it. Hopefully we can totally remove the one based on chakra-react-select.
  • Support overriding the fallback component w/ studio prop.

@psychedelicious psychedelicious changed the title feat(ui): add button to go to model manager next to all model combobox feat(ui): new model picker combobox Apr 22, 2025
@psychedelicious psychedelicious merged commit 19a63ab into main Apr 23, 2025
12 checks passed
@psychedelicious psychedelicious deleted the psyche/feat/ui/go-to-mm-buttons-everywhere branch April 23, 2025 07:45
@keturn keturn mentioned this pull request Apr 26, 2025
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@hipsterusername hipsterusername hipsterusername approved these changes

@blessedcoolant blessedcoolant Awaiting requested review from blessedcoolant blessedcoolant is a code owner

@maryhipp maryhipp Awaiting requested review from maryhipp maryhipp is a code owner

Assignees
No one assigned
Labels
frontend PRs that change frontend files frontend-deps PRs that change frontend dependencies
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@psychedelicious @hipsterusername