fix(webui): simplify unconfigured model badge

This commit is contained in:
Xubin Ren
2026-09-02 16:25:07 +08:00
parent 9a4781982e
commit 138bf3c0b8
2 changed files with 13 additions and 20 deletions
@@ -548,14 +548,15 @@ function PresetPill({
zIndex: Math.round(scale * 100), zIndex: Math.round(scale * 100),
}} }}
> >
<PresetProviderIcon {!needsSetup ? (
label={label} <PresetProviderIcon
modelDetail={modelDetail} label={label}
provider={inferredProvider} modelDetail={modelDetail}
needsSetup={needsSetup} provider={inferredProvider}
testId={needsSetup ? "composer-model-setup-icon" : `composer-model-logo${inferredProvider ? `-${inferredProvider}` : ""}`} testId={`composer-model-logo${inferredProvider ? `-${inferredProvider}` : ""}`}
isHero={isHero} isHero={isHero}
/> />
) : null}
<span <span
ref={labelRef} ref={labelRef}
className={cn( className={cn(
@@ -573,20 +574,16 @@ function PresetProviderIcon({
label, label,
modelDetail, modelDetail,
provider, provider,
needsSetup = false,
testId, testId,
isHero, isHero,
}: { }: {
label: string; label: string;
modelDetail?: string | null; modelDetail?: string | null;
provider?: string | null; provider?: string | null;
needsSetup?: boolean;
testId?: string; testId?: string;
isHero: boolean; isHero: boolean;
}) { }) {
const inferredProvider = needsSetup const inferredProvider = provider || inferProviderFromModelName(modelDetail || label);
? null
: provider || inferProviderFromModelName(modelDetail || label);
const brand = providerBrand(inferredProvider); const brand = providerBrand(inferredProvider);
const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(brand?.logoUrls); const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(brand?.logoUrls);
return ( return (
@@ -594,14 +591,11 @@ function PresetProviderIcon({
data-testid={testId} data-testid={testId}
className={cn( className={cn(
"grid shrink-0 place-items-center", "grid shrink-0 place-items-center",
needsSetup && "text-muted-foreground",
isHero ? "h-4 w-4" : "h-[18px] w-[18px]", isHero ? "h-4 w-4" : "h-[18px] w-[18px]",
)} )}
aria-hidden aria-hidden
> >
{needsSetup ? ( {logoUrl ? (
<Sparkles className={cn(isHero ? "h-3 w-3" : "h-3.5 w-3.5")} strokeWidth={1.8} />
) : logoUrl ? (
<img <img
src={logoUrl} src={logoUrl}
alt="" alt=""
+2 -3
View File
@@ -875,9 +875,8 @@ describe("ThreadShell", () => {
); );
const badge = await screen.findByRole("button", { name: "Choose your AI" }); const badge = await screen.findByRole("button", { name: "Choose your AI" });
const setupIcon = screen.getByTestId("composer-model-setup-icon"); expect(screen.queryByTestId("composer-model-setup-icon")).not.toBeInTheDocument();
expect(setupIcon).toBeInTheDocument(); expect(badge).not.toHaveClass("border-amber-500/35");
expect(setupIcon.parentElement).not.toHaveClass("border-amber-500/35");
expect(screen.queryByTestId("composer-model-logo-openai_codex")).not.toBeInTheDocument(); expect(screen.queryByTestId("composer-model-logo-openai_codex")).not.toBeInTheDocument();
fireEvent.click(badge); fireEvent.click(badge);
expect(await screen.findByRole("dialog", { name: "Choose your AI" })).toBeInTheDocument(); expect(await screen.findByRole("dialog", { name: "Choose your AI" })).toBeInTheDocument();