opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): align models table style with providers table (#23531)

Browse Source
This commit is contained in:
Danielle Maywood
2026-03-24 21:36:38 +00:00
committed by GitHub
parent 4f571f8fff
commit 4bc79d7413
1 changed files with 45 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx
+45 -42
View File
@@ -15,8 +15,8 @@ import {
import {
ChevronDownIcon,
ChevronRightIcon,
PinIcon,
PlusIcon,
StarIcon,
TriangleAlertIcon,
} from "lucide-react";
import type { FC, ReactNode } from "react";
@@ -248,8 +248,8 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
)}
</div>
) : (
<div className="divide-y divide-border/50">
{modelConfigs.map((modelConfig) => {
<div>
{modelConfigs.map((modelConfig, i) => {
const showPricingWarning = !hasCustomPricing(
modelConfig.model_config,
);
@@ -257,44 +257,11 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
return (
<div
key={modelConfig.id}
className="flex items-center gap-3.5 px-3 py-3"
className={cn(
"flex items-center gap-3.5 px-3 py-3 transition-colors hover:bg-surface-secondary/30",
i > 0 && "border-0 border-t border-solid border-border/50",
)}
>
{/* Star for default */}
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleSetDefault(modelConfig);
}}
aria-disabled={isUpdating || modelConfig.is_default}
aria-label={
modelConfig.is_default
? "Default model"
: "Set as default model"
}
className={cn(
"flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-transparent border-0 p-0 transition-colors",
modelConfig.is_default
? "text-yellow-400"
: "cursor-pointer text-content-secondary/30 hover:text-content-secondary",
)}
>
<StarIcon
className={cn(
"h-4 w-4",
modelConfig.is_default && "fill-current",
)}
/>
</button>
</TooltipTrigger>
<TooltipContent side="right">
{modelConfig.is_default
? "Default model for new chats"
: "Set as default for new chats"}
</TooltipContent>
</Tooltip>
{/* Clickable row content */}
<button
type="button"
@@ -304,7 +271,7 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
{ state: { pushed: true } },
)
}
className="flex min-w-0 flex-1 cursor-pointer items-center gap-3.5 bg-transparent border-0 p-0 text-left transition-colors hover:opacity-80"
className="flex min-w-0 flex-1 cursor-pointer items-center gap-3.5 bg-transparent border-0 p-0 text-left"
>
<ProviderIcon
provider={modelConfig.provider}
@@ -333,8 +300,44 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
disabled
</Badge>
)}
<ChevronRightIcon className="h-5 w-5 shrink-0 text-content-secondary" />
</button>
{/* Pin for default */}
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleSetDefault(modelConfig);
}}
aria-disabled={isUpdating || modelConfig.is_default}
aria-label={
modelConfig.is_default
? "Default model"
: "Set as default model"
}
className={cn(
"flex shrink-0 items-center justify-center bg-transparent border-0 p-0 transition-colors",
modelConfig.is_default
? "text-content-primary"
: "cursor-pointer text-content-secondary/30 hover:text-content-secondary",
)}
>
<PinIcon
className={cn(
"h-4 w-4",
modelConfig.is_default && "fill-current",
)}
/>
</button>
</TooltipTrigger>
<TooltipContent side="left">
{modelConfig.is_default
? "Pinned as default for new chats"
: "Pin as default for new chats"}
</TooltipContent>
</Tooltip>
<ChevronRightIcon className="h-5 w-5 shrink-0 text-content-secondary" />
</div>
);
})}