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:
parent
96f5e5c92a
commit
3e694a383f
3 changed files with 70 additions and 20 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue