Skip to content

Commit 971bd30

Browse files
rexdotshrexdotsh
authored
fix(app): fallback to synthetic icon for unknown provider IDs (anomalyco#15295)
1 parent 2a20822 commit 971bd30

8 files changed

Lines changed: 16 additions & 33 deletions

File tree

‎packages/app/src/components/dialog-connect-provider.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
44
import { Dialog } from "@opencode-ai/ui/dialog"
55
import { Icon } from "@opencode-ai/ui/icon"
66
import { IconButton } from "@opencode-ai/ui/icon-button"
7-
import type { IconName } from "@opencode-ai/ui/icons/provider"
87
import { List, type ListRef } from "@opencode-ai/ui/list"
98
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
109
import { Spinner } from "@opencode-ai/ui/spinner"
@@ -447,7 +446,7 @@ export function DialogConnectProvider(props: { provider: string }) {
447446
>
448447
<div class="flex flex-col gap-6 px-2.5 pb-3">
449448
<div class="px-2.5 flex gap-4 items-center">
450-
<ProviderIcon id={props.provider as IconName} class="size-5 shrink-0 icon-strong-base" />
449+
<ProviderIcon id={props.provider} class="size-5 shrink-0 icon-strong-base" />
451450
<div class="text-16-medium text-text-strong">
452451
<Switch>
453452
<Match when={props.provider === "anthropic" && method()?.label?.toLowerCase().includes("max")}>

‎packages/app/src/components/dialog-select-model-unpaid.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Button } from "@opencode-ai/ui/button"
22
import { useDialog } from "@opencode-ai/ui/context/dialog"
33
import { Dialog } from "@opencode-ai/ui/dialog"
4-
import type { IconName } from "@opencode-ai/ui/icons/provider"
54
import { List, type ListRef } from "@opencode-ai/ui/list"
65
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
76
import { Tag } from "@opencode-ai/ui/tag"
@@ -95,7 +94,7 @@ export const DialogSelectModelUnpaid: Component = () => {
9594
>
9695
{(i) => (
9796
<div class="w-full flex items-center gap-x-3">
98-
<ProviderIcon data-slot="list-item-extra-icon" id={i.id as IconName} />
97+
<ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
9998
<span>{i.name}</span>
10099
<Show when={i.id === "opencode"}>
101100
<div class="text-14-regular text-text-weak">{language.t("dialog.provider.opencode.tagline")}</div>

‎packages/app/src/components/dialog-select-provider.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,12 @@ import { Dialog } from "@opencode-ai/ui/dialog"
55
import { List } from "@opencode-ai/ui/list"
66
import { Tag } from "@opencode-ai/ui/tag"
77
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
8-
import { iconNames, type IconName } from "@opencode-ai/ui/icons/provider"
98
import { DialogConnectProvider } from "./dialog-connect-provider"
109
import { useLanguage } from "@/context/language"
1110
import { DialogCustomProvider } from "./dialog-custom-provider"
1211

1312
const CUSTOM_ID = "_custom"
1413

15-
function icon(id: string): IconName {
16-
if (iconNames.includes(id as IconName)) return id as IconName
17-
return "synthetic"
18-
}
19-
2014
export const DialogSelectProvider: Component = () => {
2115
const dialog = useDialog()
2216
const providers = useProviders()
@@ -69,7 +63,7 @@ export const DialogSelectProvider: Component = () => {
6963
>
7064
{(i) => (
7165
<div class="px-1.25 w-full flex items-center gap-x-3">
72-
<ProviderIcon data-slot="list-item-extra-icon" id={icon(i.id)} />
66+
<ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
7367
<span>{i.name}</span>
7468
<Show when={i.id === "opencode"}>
7569
<div class="text-14-regular text-text-weak">{language.t("dialog.provider.opencode.tagline")}</div>

‎packages/app/src/components/prompt-input.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import { Button } from "@opencode-ai/ui/button"
2323
import { DockShellForm, DockTray } from "@opencode-ai/ui/dock-surface"
2424
import { Icon } from "@opencode-ai/ui/icon"
2525
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
26-
import type { IconName } from "@opencode-ai/ui/icons/provider"
2726
import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
2827
import { IconButton } from "@opencode-ai/ui/icon-button"
2928
import { Select } from "@opencode-ai/ui/select"
@@ -1398,7 +1397,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
13981397
>
13991398
<Show when={local.model.current()?.provider?.id}>
14001399
<ProviderIcon
1401-
id={local.model.current()!.provider.id as IconName}
1400+
id={local.model.current()!.provider.id}
14021401
class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
14031402
style={{ "will-change": "opacity", transform: "translateZ(0)" }}
14041403
/>
@@ -1428,7 +1427,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
14281427
>
14291428
<Show when={local.model.current()?.provider?.id}>
14301429
<ProviderIcon
1431-
id={local.model.current()!.provider.id as IconName}
1430+
id={local.model.current()!.provider.id}
14321431
class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
14331432
style={{ "will-change": "opacity", transform: "translateZ(0)" }}
14341433
/>

‎packages/app/src/components/settings-models.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Switch } from "@opencode-ai/ui/switch"
44
import { Icon } from "@opencode-ai/ui/icon"
55
import { IconButton } from "@opencode-ai/ui/icon-button"
66
import { TextField } from "@opencode-ai/ui/text-field"
7-
import type { IconName } from "@opencode-ai/ui/icons/provider"
87
import { type Component, For, Show } from "solid-js"
98
import { useLanguage } from "@/context/language"
109
import { useModels } from "@/context/models"
@@ -98,7 +97,7 @@ export const SettingsModels: Component = () => {
9897
{(group) => (
9998
<div class="flex flex-col gap-1">
10099
<div class="flex items-center gap-2 pb-2">
101-
<ProviderIcon id={group.category as IconName} class="size-5 shrink-0 icon-strong-base" />
100+
<ProviderIcon id={group.category} class="size-5 shrink-0 icon-strong-base" />
102101
<span class="text-14-medium text-text-strong">{group.items[0].provider.name}</span>
103102
</div>
104103
<div class="bg-surface-raised-base px-4 rounded-lg">

‎packages/app/src/components/settings-providers.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
33
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
44
import { Tag } from "@opencode-ai/ui/tag"
55
import { showToast } from "@opencode-ai/ui/toast"
6-
import { iconNames, type IconName } from "@opencode-ai/ui/icons/provider"
76
import { popularProviders, useProviders } from "@/hooks/use-providers"
87
import { createMemo, type Component, For, Show } from "solid-js"
98
import { useLanguage } from "@/context/language"
@@ -33,11 +32,6 @@ export const SettingsProviders: Component = () => {
3332
const globalSync = useGlobalSync()
3433
const providers = useProviders()
3534

36-
const icon = (id: string): IconName => {
37-
if (iconNames.includes(id as IconName)) return id as IconName
38-
return "synthetic"
39-
}
40-
4135
const connected = createMemo(() => {
4236
return providers
4337
.connected()
@@ -154,7 +148,7 @@ export const SettingsProviders: Component = () => {
154148
{(item) => (
155149
<div class="group flex flex-wrap items-center justify-between gap-4 min-h-16 py-3 border-b border-border-weak-base last:border-none">
156150
<div class="flex items-center gap-3 min-w-0">
157-
<ProviderIcon id={icon(item.id)} class="size-5 shrink-0 icon-strong-base" />
151+
<ProviderIcon id={item.id} class="size-5 shrink-0 icon-strong-base" />
158152
<span class="text-14-medium text-text-strong truncate">{item.name}</span>
159153
<Tag>{type(item)}</Tag>
160154
</div>
@@ -185,7 +179,7 @@ export const SettingsProviders: Component = () => {
185179
<div class="flex flex-wrap items-center justify-between gap-4 min-h-16 py-3 border-b border-border-weak-base last:border-none">
186180
<div class="flex flex-col min-w-0">
187181
<div class="flex items-center gap-x-3">
188-
<ProviderIcon id={icon(item.id)} class="size-5 shrink-0 icon-strong-base" />
182+
<ProviderIcon id={item.id} class="size-5 shrink-0 icon-strong-base" />
189183
<span class="text-14-medium text-text-strong">{item.name}</span>
190184
<Show when={item.id === "opencode"}>
191185
<span class="text-14-regular text-text-weak">
@@ -228,7 +222,7 @@ export const SettingsProviders: Component = () => {
228222
>
229223
<div class="flex flex-col min-w-0">
230224
<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
231-
<ProviderIcon id={icon("synthetic")} class="size-5 shrink-0 icon-strong-base" />
225+
<ProviderIcon id="synthetic" class="size-5 shrink-0 icon-strong-base" />
232226
<span class="text-14-medium text-text-strong">{language.t("provider.custom.title")}</span>
233227
<Tag>{language.t("settings.providers.tag.custom")}</Tag>
234228
</div>

‎packages/enterprise/src/routes/share/[shareID].tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import { MessageNav } from "@opencode-ai/ui/message-nav"
2323
import { preloadMultiFileDiff, PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
2424
import { FileSSR } from "@opencode-ai/ui/file-ssr"
2525
import { clientOnly } from "@solidjs/start"
26-
import { type IconName } from "@opencode-ai/ui/icons/provider"
2726
import { Meta, Title } from "@solidjs/meta"
2827
import { Base64 } from "js-base64"
2928

@@ -268,10 +267,9 @@ export default function () {
268267
</div>
269268
<div class="flex gap-4 items-center">
270269
<div class="flex gap-2 items-center">
271-
<ProviderIcon
272-
id={provider() as IconName}
273-
class="size-3.5 shrink-0 text-icon-strong-base"
274-
/>
270+
<Show when={provider()}>
271+
<ProviderIcon id={provider()!} class="size-3.5 shrink-0 text-icon-strong-base" />
272+
</Show>
275273
<div class="text-12-regular text-text-base">{model()?.name ?? modelID()}</div>
276274
</div>
277275
<div class="text-12-regular text-text-weaker">

‎packages/ui/src/components/provider-icon.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import type { Component, JSX } from "solid-js"
22
import { splitProps } from "solid-js"
33
import sprite from "./provider-icons/sprite.svg"
4-
import type { IconName } from "./provider-icons/types"
4+
import { iconNames, type IconName } from "./provider-icons/types"
55

66
export type ProviderIconProps = JSX.SVGElementTags["svg"] & {
7-
id: IconName
7+
id: string
88
}
99

1010
export const ProviderIcon: Component<ProviderIconProps> = (props) => {
1111
const [local, rest] = splitProps(props, ["id", "class", "classList"])
12+
const resolved = iconNames.includes(local.id as IconName) ? local.id : "synthetic"
1213
return (
1314
<svg
1415
data-component="provider-icon"
@@ -18,7 +19,7 @@ export const ProviderIcon: Component<ProviderIconProps> = (props) => {
1819
[local.class ?? ""]: !!local.class,
1920
}}
2021
>
21-
<use href={`${sprite}#${local.id}`} />
22+
<use href={`${sprite}#${resolved}`} />
2223
</svg>
2324
)
2425
}

0 commit comments

Comments
 (0)