ginnoir/famapp
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(agent): move route selector to settings

Browse Source
This commit is contained in:
ginnoir
2026-07-08 19:58:48 -05:00
parent ec3f96dab1
commit 49732b02f3
6 changed files with 89 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
-4
View File
@@ -104,7 +104,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
let signedIn = false;
let assistantEnabled = false;
let assistantName = DEFAULT_ASSISTANT_NAME;
let assistantModelRoute: string | null = null;
let assistantModel: string | null = null;
const session = await auth();
@@ -119,7 +118,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
themeNavStyle: users.themeNavStyle,
assistantEnabled: users.assistantEnabled,
assistantName: users.assistantName,
assistantModelRoute: users.assistantModelRoute,
assistantModel: users.assistantModel,
})
.from(users)
@@ -133,7 +131,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
navStyle = row.themeNavStyle as NavStyle;
assistantEnabled = row.assistantEnabled;
assistantName = row.assistantName?.trim() || DEFAULT_ASSISTANT_NAME;
assistantModelRoute = row.assistantModelRoute?.trim() || null;
assistantModel = row.assistantModel?.trim() || null;
}
userDashboards = await db
@@ -192,7 +189,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
configured={isLlmConfigured()}
userId={session.user.id}
assistantName={assistantName}
assistantModelRoute={assistantModelRoute}
assistantModel={assistantModel}
/>
) : null}
src/app/settings/page.tsx
+2
View File
@@ -324,6 +324,7 @@ function AppearanceSection({
themeNavStyle: string;
assistantEnabled: boolean;
assistantName: string;
assistantModelRoute: string | null;
assistantSystemPrompt: string | null;
};
}) {
@@ -361,6 +362,7 @@ function AppearanceSection({
<AssistantSettings
enabled={user.assistantEnabled}
name={user.assistantName}
modelRoute={user.assistantModelRoute}
systemPrompt={user.assistantSystemPrompt}
defaultSystemPrompt={AGENT_SYSTEM_PROMPT}
/>
src/components/assistant-settings.tsx
+50 -1
View File
@@ -7,9 +7,11 @@ import {
resetAssistantSystemPrompt,
setAssistantEnabled,
setAssistantName,
setAssistantModelRoute,
setAssistantSystemPrompt,
} from "@/app/settings/assistant-actions";
import { DEFAULT_ASSISTANT_NAME, MAX_ASSISTANT_NAME_LENGTH } from "@/lib/assistant-config";
import type { AssistantModelRoute } from "@/lib/llm/models";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
@@ -17,15 +19,29 @@ import { Switch } from "@/components/ui/switch";
type Props = {
enabled: boolean;
name: string;
modelRoute: string | null;
systemPrompt: string | null;
defaultSystemPrompt: string;
};
export function AssistantSettings({ enabled, name, systemPrompt, defaultSystemPrompt }: Props) {
function normalizeAssistantModelRoute(value: string | null): AssistantModelRoute {
return value === "uncensored" ? "uncensored" : "auto";
}
export function AssistantSettings({
enabled,
name,
modelRoute,
systemPrompt,
defaultSystemPrompt,
}: Props) {
const [isPending, startTransition] = useTransition();
const router = useRouter();
const effectivePrompt = systemPrompt ?? defaultSystemPrompt;
const [selectedRoute, setSelectedRoute] = useState<AssistantModelRoute>(() =>
normalizeAssistantModelRoute(modelRoute),
);
const [savedName, setSavedName] = useState(name);
const [draftName, setDraftName] = useState(name);
const [savedPrompt, setSavedPrompt] = useState(systemPrompt);
@@ -45,6 +61,16 @@ export function AssistantSettings({ enabled, name, systemPrompt, defaultSystemPr
});
}
function changeModelRoute(nextRoute: string) {
const route = normalizeAssistantModelRoute(nextRoute);
setSelectedRoute(route);
startTransition(async () => {
await setAssistantModelRoute(route);
router.refresh();
});
}
function saveName() {
const next = draftName.trim();
if (!next) return;
@@ -105,6 +131,29 @@ export function AssistantSettings({ enabled, name, systemPrompt, defaultSystemPr
/>
</label>
<div className="flex flex-col gap-2">
<div className="min-w-0">
<label htmlFor="assistant-model-route" className="text-sm font-medium">
Model route
</label>
<p className="muted text-[12px] mt-0.5">
Choose the default router family for your assistant. Individual models can still be
picked from the chat panel.
</p>
</div>
<select
id="assistant-model-route"
aria-label="Assistant model route"
value={selectedRoute}
disabled={isPending}
onChange={(event) => changeModelRoute(event.target.value)}
className="input h-10"
>
<option value="auto">Auto</option>
<option value="uncensored">Uncensored</option>
</select>
</div>
<div className="flex flex-col gap-2">
<div className="flex items-end justify-between gap-3">
<div className="min-w-0 flex-1">
src/modules/agent/components/assistant-bubble.tsx
+1 -9
View File
@@ -8,17 +8,10 @@ type Props = {
configured: boolean;
userId: string;
assistantName: string;
assistantModelRoute: string | null;
assistantModel: string | null;
};
export function AssistantBubble({
configured,
userId,
assistantName,
assistantModelRoute,
assistantModel,
}: Props) {
export function AssistantBubble({ configured, userId, assistantName, assistantModel }: Props) {
const [open, setOpen] = useState(false);
return (
@@ -49,7 +42,6 @@ export function AssistantBubble({
configured={configured}
userId={userId}
assistantName={assistantName}
assistantModelRoute={assistantModelRoute}
assistantModel={assistantModel}
/>
</div>
src/modules/agent/components/assistant-panel.tsx
+31 -88
View File
@@ -2,10 +2,9 @@
import { useCallback, useEffect, useRef, useState, useTransition } from "react";
import { ChevronDown, ImagePlus, Loader2, Mic, RefreshCw, Send, Square } from "lucide-react";
import { setAssistantModel, setAssistantModelRoute } from "@/app/settings/assistant-actions";
import { setAssistantModel } from "@/app/settings/assistant-actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import type { AssistantModelRoute } from "@/lib/llm/models";
import { consumeAgentChatStream } from "../assistant-chat-stream";
import {
clearAssistantChat,
@@ -20,7 +19,6 @@ type Props = {
configured: boolean;
userId: string;
assistantName: string;
assistantModelRoute: string | null;
assistantModel: string | null;
};
@@ -37,7 +35,6 @@ type ModelsResponse = {
models: LlmModelOption[];
selectedModel: string;
fallbackModel: string;
route: AssistantModelRoute;
degraded: boolean;
};
@@ -53,17 +50,7 @@ async function uploadAssistantImage(file: File): Promise<string> {
return payload.url;
}
function normalizeAssistantModelRoute(value: string | null): AssistantModelRoute {
return value === "uncensored" ? "uncensored" : "auto";
}
export function AssistantPanel({
configured,
userId,
assistantName,
assistantModelRoute,
assistantModel,
}: Props) {
export function AssistantPanel({ configured, userId, assistantName, assistantModel }: Props) {
const [messages, setMessages] = useState<AssistantChatMessage[]>(() => loadAssistantChat(userId));
const [input, setInput] = useState("");
const [pendingImage, setPendingImage] = useState<PendingImage | null>(null);
@@ -72,9 +59,6 @@ export function AssistantPanel({
const [isPending, setIsPending] = useState(false);
const [activityLabel, setActivityLabel] = useState<string | null>(null);
const [modelOptions, setModelOptions] = useState<LlmModelOption[]>([]);
const [selectedRoute, setSelectedRoute] = useState<AssistantModelRoute>(() =>
normalizeAssistantModelRoute(assistantModelRoute),
);
const [selectedModel, setSelectedModel] = useState(assistantModel ?? "");
const [fallbackModel, setFallbackModel] = useState("");
const [modelsDegraded, setModelsDegraded] = useState(false);
@@ -103,40 +87,35 @@ export function AssistantPanel({
};
}, []);
const loadModels = useCallback(
async (options?: { refresh?: boolean; route?: AssistantModelRoute; signal?: AbortSignal }) => {
const loadModels = useCallback(async (options?: { refresh?: boolean; signal?: AbortSignal }) => {
if (options?.signal?.aborted) return;
setModelsLoading(true);
try {
const params = new URLSearchParams();
if (options?.refresh) params.set("refresh", "1");
const query = params.size > 0 ? `?${params.toString()}` : "";
const response = await fetch(`/api/agent/models${query}`, {
cache: "no-store",
signal: options?.signal,
});
if (!response.ok) throw new Error("Model discovery unavailable");
const payload = (await response.json()) as ModelsResponse;
if (options?.signal?.aborted) return;
setModelsLoading(true);
try {
const params = new URLSearchParams();
if (options?.refresh) params.set("refresh", "1");
if (options?.route) params.set("route", options.route);
const query = params.size > 0 ? `?${params.toString()}` : "";
const response = await fetch(`/api/agent/models${query}`, {
cache: "no-store",
signal: options?.signal,
});
if (!response.ok) throw new Error("Model discovery unavailable");
const payload = (await response.json()) as ModelsResponse;
if (options?.signal?.aborted) return;
setModelOptions(payload.models);
setSelectedRoute(payload.route);
setSelectedModel(payload.selectedModel);
setFallbackModel(payload.fallbackModel);
setModelsDegraded(payload.degraded);
setError(null);
} catch (err) {
if (err instanceof Error && err.name === "AbortError") return;
setModelsDegraded(true);
setError("Model discovery unavailable");
} finally {
if (!options?.signal?.aborted) setModelsLoading(false);
}
},
[],
);
setModelOptions(payload.models);
setSelectedModel(payload.selectedModel);
setFallbackModel(payload.fallbackModel);
setModelsDegraded(payload.degraded);
setError(null);
} catch (err) {
if (err instanceof Error && err.name === "AbortError") return;
setModelsDegraded(true);
setError("Model discovery unavailable");
} finally {
if (!options?.signal?.aborted) setModelsLoading(false);
}
}, []);
useEffect(() => {
const controller = new AbortController();
@@ -200,26 +179,6 @@ export function AssistantPanel({
});
}
function changeModelRoute(nextRoute: string) {
const route = normalizeAssistantModelRoute(nextRoute);
setSelectedRoute(route);
setSelectedModel(route);
setFallbackModel(route);
setModelOptions([]);
setModelsDegraded(false);
setError(null);
startTransition(async () => {
try {
await setAssistantModelRoute(route);
await loadModels({ route, refresh: true });
} catch (err) {
setError(err instanceof Error ? err.message : "Could not save assistant route");
}
});
}
async function sendMessage() {
const text = input.trim();
const hasImage = pendingImage !== null;
@@ -306,22 +265,6 @@ export function AssistantPanel({
) : null}
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="relative max-w-32">
<select
aria-label="Assistant model route"
value={selectedRoute}
onChange={(event) => changeModelRoute(event.target.value)}
disabled={modelsLoading || savingModel || isPending}
className="h-9 w-full max-w-32 appearance-none truncate rounded-[min(var(--radius-md),10px)] border border-input bg-[var(--card)] py-0 pr-8 pl-3 text-[13px] leading-9 text-[var(--ink)] outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
>
<option value="auto">Auto</option>
<option value="uncensored">Uncensored</option>
</select>
<ChevronDown
className="pointer-events-none absolute top-1/2 right-2 size-4 -translate-y-1/2 text-muted-foreground"
aria-hidden="true"
/>
</div>
{modelOptions.length > 0 ? (
<div className="relative max-w-36">
<select
@@ -349,7 +292,7 @@ export function AssistantPanel({
variant="outline"
aria-label="Refresh assistant models"
disabled={modelsLoading || savingModel || isPending}
onClick={() => void loadModels({ route: selectedRoute, refresh: true })}
onClick={() => void loadModels({ refresh: true })}
>
{modelsLoading ? (
<Loader2 className="size-4 animate-spin" />
tests/e2e/assistant.spec.ts
+5 -4
View File
@@ -22,10 +22,6 @@ test("assistant chat smoke after opt-in", async ({ page }) => {
await assistantSwitch.click();
}
await expect(assistantSwitch).toBeChecked();
await page.goto("/");
await page.getByRole("button", { name: "Open assistant" }).click();
await expect(page.getByRole("dialog", { name: "Assistant" })).toBeVisible();
const routeSelector = page.getByRole("combobox", { name: "Assistant model route" });
await expect(routeSelector).toBeVisible();
await routeSelector.selectOption("auto");
@@ -34,6 +30,11 @@ test("assistant chat smoke after opt-in", async ({ page }) => {
await routeSelector.selectOption("uncensored");
await expect(routeSelector).toHaveValue("uncensored");
await expect(routeSelector).toBeEnabled();
await page.goto("/");
await page.getByRole("button", { name: "Open assistant" }).click();
await expect(page.getByRole("dialog", { name: "Assistant" })).toBeVisible();
await expect(page.getByRole("combobox", { name: "Assistant model route" })).toHaveCount(0);
const modelSelector = page.getByRole("combobox", { name: "Assistant model", exact: true });
await expect(modelSelector).toBeVisible();
const refreshModels = page.getByRole("button", { name: "Refresh assistant models" });