fix(room): show model name instead of UID in settings panel

- Load model list on settings panel mount so names are always available.
- SelectValue now displays the selected model's name by looking up
  availableModels, falling back to UID if name not found.
- Existing AI configs list also shows model name instead of raw UID.
This commit is contained in:
ZhenYi 2026-04-17 23:17:56 +08:00
parent 5ff45770ec
commit 6431709669

View File

@ -1,5 +1,5 @@
import { memo, useState, useEffect, useCallback } from 'react'; import { memo, useState, useEffect, useCallback } from 'react';
import type { RoomResponse } from '@/client'; import type { ModelResponse, RoomResponse } from '@/client';
import { aiList, aiUpsert, aiDelete, modelList } from '@/client'; import { aiList, aiUpsert, aiDelete, modelList } from '@/client';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
@ -79,6 +79,7 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
useEffect(() => { useEffect(() => {
loadAiConfigs(); loadAiConfigs();
loadModels();
}, [loadAiConfigs]); }, [loadAiConfigs]);
// Load available models // Load available models
@ -215,8 +216,8 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
> >
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2 min-w-0">
<Bot className="h-4 w-4 text-muted-foreground shrink-0" /> <Bot className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="text-sm truncate font-mono text-foreground"> <span className="text-sm truncate text-foreground">
{config.model} {availableModels.find((m) => m.id === config.model)?.name ?? config.model}
</span> </span>
{config.stream && ( {config.stream && (
<span className="rounded bg-green-500/10 px-1 py-0.5 text-[10px] text-green-600 dark:text-green-400 shrink-0"> <span className="rounded bg-green-500/10 px-1 py-0.5 text-[10px] text-green-600 dark:text-green-400 shrink-0">
@ -266,7 +267,11 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
) : ( ) : (
<Select value={selectedModelId} onValueChange={(v) => { if (v !== null) setSelectedModelId(v); }}> <Select value={selectedModelId} onValueChange={(v) => { if (v !== null) setSelectedModelId(v); }}>
<SelectTrigger className="w-full"> <SelectTrigger className="w-full">
<SelectValue placeholder="Select a model..." /> <SelectValue placeholder="Select a model...">
{selectedModelId
? availableModels.find((m) => m.id === selectedModelId)?.name ?? selectedModelId
: null}
</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{availableModels.map((model) => ( {availableModels.map((model) => (