feat(combos): add per-combo round-robin strategy

Add ability to configure round-robin strategy for individual combos,
similar to per-provider strategy overrides.

Changes:
- Add comboStrategies setting to store per-combo strategy overrides
- Add Round Robin toggle to each combo card in combos page
- Update chat handler to check combo-specific strategy before global
- Combo-specific strategy takes precedence over global comboStrategy

When enabled, each request to that combo will cycle through providers
instead of always starting with the first one.

Made-with: Cursor
This commit is contained in:
decolua 2026-03-23 10:08:24 +07:00
parent 96f5e5c92a
commit 3e694a383f
3 changed files with 70 additions and 20 deletions

View file

@ -1,7 +1,7 @@
"use client"; "use client";
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { Card, Button, Modal, Input, CardSkeleton, ModelSelectModal } from "@/shared/components"; import { Card, Button, Modal, Input, CardSkeleton, ModelSelectModal, Toggle } from "@/shared/components";
import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard"; import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers"; import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers";
@ -14,6 +14,7 @@ export default function CombosPage() {
const [showCreateModal, setShowCreateModal] = useState(false); const [showCreateModal, setShowCreateModal] = useState(false);
const [editingCombo, setEditingCombo] = useState(null); const [editingCombo, setEditingCombo] = useState(null);
const [activeProviders, setActiveProviders] = useState([]); const [activeProviders, setActiveProviders] = useState([]);
const [comboStrategies, setComboStrategies] = useState({});
const { copied, copy } = useCopyToClipboard(); const { copied, copy } = useCopyToClipboard();
useEffect(() => { useEffect(() => {
@ -22,17 +23,20 @@ export default function CombosPage() {
const fetchData = async () => { const fetchData = async () => {
try { try {
const [combosRes, providersRes] = await Promise.all([ const [combosRes, providersRes, settingsRes] = await Promise.all([
fetch("/api/combos"), fetch("/api/combos"),
fetch("/api/providers"), fetch("/api/providers"),
fetch("/api/settings"),
]); ]);
const combosData = await combosRes.json(); const combosData = await combosRes.json();
const providersData = await providersRes.json(); const providersData = await providersRes.json();
const settingsData = settingsRes.ok ? await settingsRes.json() : {};
if (combosRes.ok) setCombos(combosData.combos || []); if (combosRes.ok) setCombos(combosData.combos || []);
if (providersRes.ok) { if (providersRes.ok) {
setActiveProviders(providersData.connections || []); setActiveProviders(providersData.connections || []);
} }
setComboStrategies(settingsData.comboStrategies || {});
} catch (error) { } catch (error) {
console.log("Error fetching data:", error); console.log("Error fetching data:", error);
} finally { } finally {
@ -90,6 +94,27 @@ export default function CombosPage() {
} }
}; };
const handleToggleRoundRobin = async (comboName, enabled) => {
try {
const updated = { ...comboStrategies };
if (enabled) {
updated[comboName] = { fallbackStrategy: "round-robin" };
} else {
delete updated[comboName];
}
await fetch("/api/settings", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ comboStrategies: updated }),
});
setComboStrategies(updated);
} catch (error) {
console.log("Error updating combo strategy:", error);
}
};
if (loading) { if (loading) {
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
@ -138,6 +163,8 @@ export default function CombosPage() {
onCopy={copy} onCopy={copy}
onEdit={() => setEditingCombo(combo)} onEdit={() => setEditingCombo(combo)}
onDelete={() => handleDelete(combo.id)} onDelete={() => handleDelete(combo.id)}
roundRobinEnabled={comboStrategies[combo.name]?.fallbackStrategy === "round-robin"}
onToggleRoundRobin={(enabled) => handleToggleRoundRobin(combo.name, enabled)}
/> />
))} ))}
</div> </div>
@ -165,7 +192,7 @@ export default function CombosPage() {
); );
} }
function ComboCard({ combo, copied, onCopy, onEdit, onDelete }) { function ComboCard({ combo, copied, onCopy, onEdit, onDelete, roundRobinEnabled, onToggleRoundRobin }) {
return ( return (
<Card padding="sm" className="group"> <Card padding="sm" className="group">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -204,21 +231,33 @@ function ComboCard({ combo, copied, onCopy, onEdit, onDelete }) {
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"> <div className="flex items-center gap-2 shrink-0">
<button {/* Round Robin Toggle */}
onClick={onEdit} <div className="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
className="p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors" <span className="text-xs text-text-muted font-medium">Round Robin</span>
title="Edit" <Toggle
> size="sm"
<span className="material-symbols-outlined text-[16px]">edit</span> checked={roundRobinEnabled}
</button> onChange={onToggleRoundRobin}
<button />
onClick={onDelete} </div>
className="p-1.5 hover:bg-red-500/10 rounded text-red-500 transition-colors"
title="Delete" <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
> <button
<span className="material-symbols-outlined text-[16px]">delete</span> onClick={onEdit}
</button> className="p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors"
title="Edit"
>
<span className="material-symbols-outlined text-[16px]">edit</span>
</button>
<button
onClick={onDelete}
className="p-1.5 hover:bg-red-500/10 rounded text-red-500 transition-colors"
title="Delete"
>
<span className="material-symbols-outlined text-[16px]">delete</span>
</button>
</div>
</div> </div>
</div> </div>
</Card> </Card>

View file

@ -55,6 +55,7 @@ const defaultData = {
stickyRoundRobinLimit: 3, stickyRoundRobinLimit: 3,
providerStrategies: {}, providerStrategies: {},
comboStrategy: "fallback", comboStrategy: "fallback",
comboStrategies: {},
requireLogin: true, requireLogin: true,
observabilityEnabled: true, observabilityEnabled: true,
observabilityMaxRecords: 1000, observabilityMaxRecords: 1000,
@ -83,6 +84,8 @@ function cloneDefaultData() {
tunnelUrl: "", tunnelUrl: "",
stickyRoundRobinLimit: 3, stickyRoundRobinLimit: 3,
providerStrategies: {}, providerStrategies: {},
comboStrategy: "fallback",
comboStrategies: {},
requireLogin: true, requireLogin: true,
observabilityEnabled: true, observabilityEnabled: true,
observabilityMaxRecords: 1000, observabilityMaxRecords: 1000,

View file

@ -84,7 +84,11 @@ export async function handleChat(request, clientRawRequest = null) {
// Check if model is a combo (has multiple models with fallback) // Check if model is a combo (has multiple models with fallback)
const comboModels = await getComboModels(modelStr); const comboModels = await getComboModels(modelStr);
if (comboModels) { if (comboModels) {
const comboStrategy = settings.comboStrategy || "fallback"; // Check for combo-specific strategy first, fallback to global
const comboStrategies = settings.comboStrategies || {};
const comboSpecificStrategy = comboStrategies[modelStr]?.fallbackStrategy;
const comboStrategy = comboSpecificStrategy || settings.comboStrategy || "fallback";
log.info("CHAT", `Combo "${modelStr}" with ${comboModels.length} models (strategy: ${comboStrategy})`); log.info("CHAT", `Combo "${modelStr}" with ${comboModels.length} models (strategy: ${comboStrategy})`);
return handleComboChat({ return handleComboChat({
body, body,
@ -111,7 +115,11 @@ async function handleSingleModelChat(body, modelStr, clientRawRequest = null, re
const comboModels = await getComboModels(modelStr); const comboModels = await getComboModels(modelStr);
if (comboModels) { if (comboModels) {
const chatSettings = await getSettings(); const chatSettings = await getSettings();
const comboStrategy = chatSettings.comboStrategy || "fallback"; // Check for combo-specific strategy first, fallback to global
const comboStrategies = chatSettings.comboStrategies || {};
const comboSpecificStrategy = comboStrategies[modelStr]?.fallbackStrategy;
const comboStrategy = comboSpecificStrategy || chatSettings.comboStrategy || "fallback";
log.info("CHAT", `Combo "${modelStr}" with ${comboModels.length} models (strategy: ${comboStrategy})`); log.info("CHAT", `Combo "${modelStr}" with ${comboModels.length} models (strategy: ${comboStrategy})`);
return handleComboChat({ return handleComboChat({
body, body,