feat(desktop): Add a generic sparkles icon to provider-icon#12517
feat(desktop): Add a generic sparkles icon to provider-icon#12517ARLBR10 wants to merge 2 commits intoanomalyco:devfrom
Conversation
Vibecoded with Opus 4.6 100x times better than an blank space on Opencode Desktop
|
Thanks for your contribution! This PR doesn't have a linked issue. All PRs must reference an existing issue. Please:
See CONTRIBUTING.md for details. |
ARLBR10
changed the title
|
The following comment was made by an LLM, it may be inaccurate: No duplicate PRs found |
There was a problem hiding this comment.
Pull request overview
This PR adds a “generic” provider icon (sparkles) and updates the ProviderIcon component to fall back to that icon when an unknown provider id is passed, avoiding blank icons for custom/unknown providers.
Changes:
- Add a new
"generic"icon name to the provider icon set. - Add a new
genericsymbol to the provider icon sprite. - Update
ProviderIconto acceptstringids and resolve unknown ids to"generic". - Add
src/assets/icons/provider/generic.svg.
Reviewed changes
Copilot reviewed 2 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
packages/ui/src/components/provider-icons/types.ts |
Adds "generic" to the icon name list (but this file is generated output). |
packages/ui/src/components/provider-icons/sprite.svg |
Adds a generic symbol to the sprite (also generated output). |
packages/ui/src/components/provider-icon.tsx |
Adds runtime resolution to fall back to "generic" for unknown ids. |
packages/ui/src/assets/icons/provider/generic.svg |
Adds the new SVG asset intended to become the generated generic symbol. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export type ProviderIconProps = JSX.SVGElementTags["svg"] & { | ||
| id: IconName | ||
| id: IconName | string | ||
| } | ||
|
|
||
| export const ProviderIcon: Component<ProviderIconProps> = (props) => { | ||
| const [local, rest] = splitProps(props, ["id", "class", "classList"]) | ||
| const resolved = () => ((iconNames as readonly string[]).includes(local.id) ? local.id : "generic") | ||
| return ( | ||
| <svg | ||
| data-component="provider-icon" | ||
| {...rest} | ||
| classList={{ | ||
| ...(local.classList ?? {}), | ||
| [local.class ?? ""]: !!local.class, | ||
| }} | ||
| > | ||
| <use href={`${sprite}#${local.id}`} /> | ||
| <use href={`${sprite}#${resolved()}`} /> |
There was a problem hiding this comment.
The new runtime fallback uses "generic", but generic.svg is identical to the existing synthetic.svg (same paths). Consider reusing "synthetic" as the fallback (or aliasing generic -> synthetic) to avoid adding another generated icon name/symbol and increasing the sprite/types surface area for no visual change.
| "alibaba-cn", | ||
| "aihubmix", | ||
| "abacus", | ||
| "generic", | ||
| ] as const |
There was a problem hiding this comment.
types.ts is marked as generated, but this PR hand-edits the generated iconNames list (and appends "generic" out of the existing sort order). Since vite.config.ts generates src/components/provider-icons from src/assets/icons/provider, this change is likely to be overwritten the next time the spritesheet generator runs. Prefer adding generic.svg to the input dir and re-running the generator so types.ts stays fully generated/deterministic, or otherwise move generic to the true source of generation.
Vibecoded with Opus 4.6
100x times better than an blank space on Opencode Desktop
What does this PR do?
This PR just adds the generic sparkles to the
packages/ui/src/components/provider-icons/sprite.svgso in case an custom provider is added by the user isn't just a blank space in the UIFixes #12518
How did you verify your code works?
Used
bun devin packages/app, also the code doesn't mess with critical code.