Update model setting buttons (#1843)

* Add grok 4 fast openrouter

* Update model setting buttons
This commit is contained in:
Logan Yang 2025-09-22 20:13:03 -07:00 committed by GitHub
parent 7bed022d8a
commit 97f3b5d2c4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 43 additions and 20 deletions

View file

@ -154,6 +154,7 @@ export enum ChatModels {
OPENROUTER_GEMINI_2_5_FLASH_LITE = "google/gemini-2.5-flash-lite",
OPENROUTER_GPT_41 = "openai/gpt-4.1",
OPENROUTER_GPT_41_MINI = "openai/gpt-4.1-mini",
OPENROUTER_GROK_4_FAST_FREE = "x-ai/grok-4-fast:free",
}
// Model Providers
@ -242,6 +243,14 @@ export const BUILTIN_CHAT_MODELS: CustomModel[] = [
projectEnabled: true,
capabilities: [ModelCapability.VISION],
},
{
name: ChatModels.OPENROUTER_GROK_4_FAST_FREE,
provider: ChatModelProviders.OPENROUTERAI,
enabled: true,
isBuiltIn: true,
core: false,
projectEnabled: true,
},
{
name: ChatModels.GPT_5,
provider: ChatModelProviders.OPENAI,

View file

@ -143,7 +143,6 @@ export const ModelSettings: React.FC = () => {
return (
<div className="tw-space-y-4">
<section>
<div className="tw-mb-3 tw-text-xl tw-font-bold">Chat Models</div>
<ModelTable
models={settings.activeModels}
onEdit={(model) => handleEditModel(model)}
@ -153,7 +152,7 @@ export const ModelSettings: React.FC = () => {
onUpdateModel={handleTableUpdate}
onReorderModels={(newModels) => handleModelReorder(newModels)}
onRefresh={handleRefreshChatModels}
title="Chat Model"
title="Chat Models"
/>
{/* model add dialog */}
@ -184,7 +183,6 @@ export const ModelSettings: React.FC = () => {
</section>
<section>
<div className="tw-mb-3 tw-text-xl tw-font-bold">Embedding Models</div>
<ModelTable
models={settings.activeEmbeddingModels}
onEdit={(model) => handleEditModel(model, true)}
@ -194,7 +192,7 @@ export const ModelSettings: React.FC = () => {
onUpdateModel={handleEmbeddingModelUpdate}
onReorderModels={(newModels) => handleModelReorder(newModels, true)}
onRefresh={handleRefreshEmbeddingModels}
title="Embedding Model"
title="Embedding Models"
/>
{/* Embedding model add dialog */}

View file

@ -86,6 +86,37 @@ const CAPABILITY_ORDER = [
ModelCapability.WEB_SEARCH,
] as const;
interface ModelTableHeaderProps {
title: string;
onRefresh?: () => void;
onAdd: () => void;
}
/**
* Renders the model table header with a title and aligned action buttons.
*/
const ModelTableHeader: React.FC<ModelTableHeaderProps> = ({ title, onRefresh, onAdd }) => (
<div className="tw-mb-3 tw-flex tw-flex-col tw-gap-2 md:tw-flex-row md:tw-items-center md:tw-justify-between">
<h3 className="tw-text-xl tw-font-bold">{title}</h3>
<div className="tw-flex tw-flex-col tw-gap-2 sm:tw-flex-row sm:tw-items-center sm:tw-justify-end">
{onRefresh && (
<Button
onClick={onRefresh}
variant="secondary"
className="tw-flex tw-items-center tw-gap-2"
>
<RefreshCw className="tw-size-2 md:tw-size-4" />
Refresh Built-ins
</Button>
)}
<Button onClick={onAdd} variant="default" className="tw-flex tw-items-center tw-gap-2">
<Plus className="tw-size-2 md:tw-size-4" />
Add Model
</Button>
</div>
</div>
);
const renderCapabilities = (model: CustomModel) => {
return (
<div className="tw-mx-auto tw-grid tw-w-16 tw-grid-cols-3 tw-gap-1">
@ -471,22 +502,7 @@ export const ModelTable: React.FC<ModelTableProps> = ({
return (
<div ref={containerRef} className="tw-mb-4">
<div className="tw-mt-4 tw-flex tw-justify-between tw-gap-2 md:tw-justify-end">
{onRefresh && (
<Button
onClick={onRefresh}
variant="secondary"
className="tw-flex tw-items-center tw-gap-2"
>
<RefreshCw className="tw-size-2 md:tw-size-4" />
Refresh Built-ins
</Button>
)}
<Button onClick={onAdd} variant="default" className="tw-flex tw-items-center tw-gap-2">
<Plus className="tw-size-2 md:tw-size-4" />
Add Model
</Button>
</div>
<ModelTableHeader title={title} onRefresh={onRefresh} onAdd={onAdd} />
{/* Desktop view */}
<div className="tw-hidden md:tw-block">
<DndContext