feat(openui-cloud): model selector UI revamp + persist selection across refresh - #832
Merged
Conversation
…switcher component Introduced new SVG logos for Anthropic (dark and light), Google (dark and light), and OpenAI (dark and light). Updated the ModelSwitcher component to utilize these logos, enhancing the visual representation of model providers. Removed outdated styles from globals.css to streamline the codebase.
…Chat component Enhanced the CloudChat component to persist the selected model in localStorage, ensuring it remains consistent across page refreshes and tabs. Utilized useSyncExternalStore for hydration-safe state management, preventing UI flashes during initial render. Updated the ModelSwitcher component to handle model selection changes and display a neutral skeleton while loading the persisted model.
ankit-thesys
force-pushed
the
fix/model_selector
branch
from
July 24, 2026 08:06
7634367 to
47356b8
Compare
ankit-thesys
changed the title
…dular files - Deleted the original ModelSwitcher implementation and replaced it with a modular structure. - Introduced new files: ModelRow, ModelBadge, ProviderLogo, TriggerContent, and utils for better organization and maintainability. - Enhanced the ModelSwitcher to utilize these components, improving readability and separation of concerns. - Implemented a neutral skeleton loading state for improved user experience during hydration.
abhithesys
approved these changes
Jul 24, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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.
Summary
Reworks the openui-cloud model selector and makes the selected model survive a page refresh. All changes live in the CLI template (
packages/openui-cli/src/templates/openui-cloud) — the only surface with a model switcher.Model selector UI
Reworked the selector to match the composition-console design and converted it fully to Tailwind (removed all
.openui-cloud-model-switcher*rules fromglobals.css).max-height+ overflow) — the original ask.Persist model across refresh
The selected model is now stored in
localStorage(openui-cloud:selected-model) and restored on load, so it no longer resets to the default.useSyncExternalStore— hydration-safe (SSR → default, client → stored) and synced across tabs, with nosetState-in-effect.localStorage, the trigger briefly showed the default model. It now shows a neutral skeleton until the stored value loads, then the real model — no wrong-model flash.Changes
openui-cloud/src/components/model-switcher.tsx— Tailwind rewrite, provider logos, grouping, skeleton flash fixopenui-cloud/src/components/cloud-chat.tsx— localStorage persistence storeopenui-cloud/src/app/globals.css— removed the old model-switcher CSSopenui-cloud/public/logos/*— provider marks (anthropic/openai/google × dark/light)Testing
tsc --noEmitandeslintclean.storageevent, stale-id fallback, dropdown scroll/grouping/badges — all pass.