Skip to content

Commit d4af5fa

Browse files
ammar-agentammar-agent
committed
refactor: simplify gateway API with clearer naming
Rename useGatewayModels → useGateway with cleaner interface: - isActive: gateway configured AND enabled (ready to use) - isConfigured: coupon code set - isEnabled: global master switch on - canToggleModel(id): whether to show gateway toggle for model - modelUsesGateway(id): model is toggled for gateway - isModelRoutingThroughGateway(id): active + uses (for display) - toggleEnabled(): toggle global switch - toggleModelGateway(id): toggle per-model Consolidates scattered checks like: gatewayGloballyEnabled && gatewayAvailable && isGatewaySupported(model) Into single semantic calls: gateway.canToggleModel(model) Also renames isGatewaySupported → isProviderSupported for clarity.
1 parent 805fdca commit d4af5fa

File tree

4 files changed

+152
-154
lines changed

4 files changed

+152
-154
lines changed

‎src/browser/components/ModelSelector.tsx‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Settings, Star } from "lucide-react";
1111
import { GatewayIcon } from "./icons/GatewayIcon";
1212
import { TooltipWrapper, Tooltip } from "./Tooltip";
1313
import { useSettings } from "@/browser/contexts/SettingsContext";
14-
import { useGatewayModels, isGatewaySupported } from "@/browser/hooks/useGatewayModels";
14+
import { useGateway, isProviderSupported } from "@/browser/hooks/useGatewayModels";
1515

1616
interface ModelSelectorProps {
1717
value: string;
@@ -29,12 +29,7 @@ export interface ModelSelectorRef {
2929
export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
3030
({ value, onChange, recentModels, onComplete, defaultModel, onSetDefaultModel }, ref) => {
3131
const { open: openSettings } = useSettings();
32-
const {
33-
isEnabled: isGatewayEnabled,
34-
toggle: toggleGateway,
35-
gatewayAvailable,
36-
gatewayGloballyEnabled,
37-
} = useGatewayModels();
32+
const gateway = useGateway();
3833
const [isEditing, setIsEditing] = useState(false);
3934
const [inputValue, setInputValue] = useState(value);
4035
const [error, setError] = useState<string | null>(null);
@@ -198,14 +193,10 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
198193
}, [highlightedIndex]);
199194

200195
if (!isEditing) {
201-
const gatewayEnabled =
202-
gatewayGloballyEnabled &&
203-
isGatewayEnabled(value) &&
204-
gatewayAvailable &&
205-
isGatewaySupported(value);
196+
const gatewayActive = gateway.isModelRoutingThroughGateway(value);
206197
return (
207198
<div ref={containerRef} className="relative flex items-center gap-1">
208-
{gatewayEnabled && (
199+
{gatewayActive && (
209200
<TooltipWrapper inline>
210201
<GatewayIcon className="text-accent h-3 w-3 shrink-0 fill-current" />
211202
<Tooltip className="tooltip" align="center">
@@ -274,33 +265,40 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
274265
<div className="grid w-full grid-cols-[1fr_auto] items-center gap-2">
275266
<span className="min-w-0 truncate">{model}</span>
276267
<div className="flex items-center gap-0.5">
277-
{/* Gateway toggle - only show when gateway is globally enabled, configured, and model's provider is supported */}
278-
{gatewayGloballyEnabled && gatewayAvailable && isGatewaySupported(model) && (
268+
{/* Gateway toggle */}
269+
{gateway.canToggleModel(model) && (
279270
<TooltipWrapper inline>
280271
<button
281272
type="button"
282273
onMouseDown={(e) => e.preventDefault()}
283274
onClick={(e) => {
284275
e.preventDefault();
285276
e.stopPropagation();
286-
toggleGateway(model);
277+
gateway.toggleModelGateway(model);
287278
}}
288279
className={cn(
289280
"flex items-center justify-center rounded-sm border px-1 py-0.5 transition-colors duration-150",
290-
isGatewayEnabled(model)
281+
gateway.modelUsesGateway(model)
291282
? "text-accent border-accent/40"
292283
: "text-muted-light border-border-light/40 hover:border-foreground/60 hover:text-foreground"
293284
)}
294285
aria-label={
295-
isGatewayEnabled(model) ? "Disable Mux Gateway" : "Enable Mux Gateway"
286+
gateway.modelUsesGateway(model)
287+
? "Disable Mux Gateway"
288+
: "Enable Mux Gateway"
296289
}
297290
>
298291
<GatewayIcon
299-
className={cn("h-3 w-3", isGatewayEnabled(model) && "fill-current")}
292+
className={cn(
293+
"h-3 w-3",
294+
gateway.modelUsesGateway(model) && "fill-current"
295+
)}
300296
/>
301297
</button>
302298
<Tooltip className="tooltip" align="center">
303-
{isGatewayEnabled(model) ? "Using Mux Gateway" : "Use Mux Gateway"}
299+
{gateway.modelUsesGateway(model)
300+
? "Using Mux Gateway"
301+
: "Use Mux Gateway"}
304302
</Tooltip>
305303
</TooltipWrapper>
306304
)}

‎src/browser/components/Settings/sections/ModelsSection.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Plus, Loader2 } from "lucide-react";
33
import { SUPPORTED_PROVIDERS, PROVIDER_DISPLAY_NAMES } from "@/common/constants/providers";
44
import { KNOWN_MODELS } from "@/common/constants/knownModels";
55
import { useModelLRU } from "@/browser/hooks/useModelLRU";
6-
import { useGatewayModels, isGatewaySupported } from "@/browser/hooks/useGatewayModels";
6+
import { useGateway } from "@/browser/hooks/useGatewayModels";
77
import { ModelRow } from "./ModelRow";
88
import { useAPI } from "@/browser/contexts/API";
99
import { useProvidersConfig } from "@/browser/hooks/useProvidersConfig";
@@ -29,12 +29,7 @@ export function ModelsSection() {
2929
const [editing, setEditing] = useState<EditingState | null>(null);
3030
const [error, setError] = useState<string | null>(null);
3131
const { defaultModel, setDefaultModel } = useModelLRU();
32-
const {
33-
isEnabled: isGatewayEnabled,
34-
toggle: toggleGateway,
35-
gatewayAvailable,
36-
gatewayGloballyEnabled,
37-
} = useGatewayModels();
32+
const gateway = useGateway();
3833

3934
// Check if a model already exists (for duplicate prevention)
4035
const modelExists = useCallback(
@@ -225,7 +220,7 @@ export function ModelsSection() {
225220
editError={isModelEditing ? error : undefined}
226221
saving={false}
227222
hasActiveEdit={editing !== null}
228-
isGatewayEnabled={isGatewayEnabled(model.fullId)}
223+
isGatewayEnabled={gateway.modelUsesGateway(model.fullId)}
229224
onSetDefault={() => setDefaultModel(model.fullId)}
230225
onStartEdit={() => handleStartEdit(model.provider, model.modelId)}
231226
onSaveEdit={handleSaveEdit}
@@ -235,8 +230,8 @@ export function ModelsSection() {
235230
}
236231
onRemove={() => handleRemoveModel(model.provider, model.modelId)}
237232
onToggleGateway={
238-
gatewayGloballyEnabled && gatewayAvailable && isGatewaySupported(model.fullId)
239-
? () => toggleGateway(model.fullId)
233+
gateway.canToggleModel(model.fullId)
234+
? () => gateway.toggleModelGateway(model.fullId)
240235
: undefined
241236
}
242237
/>
@@ -259,11 +254,11 @@ export function ModelsSection() {
259254
isCustom={false}
260255
isDefault={defaultModel === model.fullId}
261256
isEditing={false}
262-
isGatewayEnabled={isGatewayEnabled(model.fullId)}
257+
isGatewayEnabled={gateway.modelUsesGateway(model.fullId)}
263258
onSetDefault={() => setDefaultModel(model.fullId)}
264259
onToggleGateway={
265-
gatewayGloballyEnabled && gatewayAvailable && isGatewaySupported(model.fullId)
266-
? () => toggleGateway(model.fullId)
260+
gateway.canToggleModel(model.fullId)
261+
? () => gateway.toggleModelGateway(model.fullId)
267262
: undefined
268263
}
269264
/>

‎src/browser/components/Settings/sections/ProvidersSection.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { ProviderName } from "@/common/constants/providers";
55
import { ProviderWithIcon } from "@/browser/components/ProviderIcon";
66
import { useAPI } from "@/browser/contexts/API";
77
import { useProvidersConfig } from "@/browser/hooks/useProvidersConfig";
8-
import { useGatewayModels } from "@/browser/hooks/useGatewayModels";
8+
import { useGateway } from "@/browser/hooks/useGatewayModels";
99

1010
interface FieldConfig {
1111
key: string;
@@ -70,7 +70,7 @@ function getProviderFields(provider: ProviderName): FieldConfig[] {
7070
export function ProvidersSection() {
7171
const { api } = useAPI();
7272
const { config, updateOptimistically } = useProvidersConfig();
73-
const { gatewayAvailable, gatewayGloballyEnabled, toggleGloballyEnabled } = useGatewayModels();
73+
const gateway = useGateway();
7474
const [expandedProvider, setExpandedProvider] = useState<string | null>(null);
7575
const [editingField, setEditingField] = useState<{
7676
provider: string;
@@ -319,24 +319,24 @@ export function ProvidersSection() {
319319
})}
320320

321321
{/* Gateway enabled toggle - only for mux-gateway when configured */}
322-
{provider === "mux-gateway" && gatewayAvailable && (
322+
{provider === "mux-gateway" && gateway.isConfigured && (
323323
<div className="border-border-light flex items-center justify-between border-t pt-3">
324324
<div>
325325
<label className="text-foreground block text-xs font-medium">Enabled</label>
326326
<span className="text-muted text-xs">Route requests through Mux Gateway</span>
327327
</div>
328328
<button
329329
type="button"
330-
onClick={toggleGloballyEnabled}
330+
onClick={gateway.toggleEnabled}
331331
className={`relative h-5 w-9 rounded-full transition-colors ${
332-
gatewayGloballyEnabled ? "bg-accent" : "bg-border-medium"
332+
gateway.isEnabled ? "bg-accent" : "bg-border-medium"
333333
}`}
334334
role="switch"
335-
aria-checked={gatewayGloballyEnabled}
335+
aria-checked={gateway.isEnabled}
336336
>
337337
<span
338338
className={`absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
339-
gatewayGloballyEnabled ? "translate-x-4" : "translate-x-0"
339+
gateway.isEnabled ? "translate-x-4" : "translate-x-0"
340340
}`}
341341
/>
342342
</button>

0 commit comments

Comments
 (0)