From 6431709669929cfa6d0e25be9395b1096dc69df6 Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Fri, 17 Apr 2026 23:17:56 +0800
Subject: [PATCH] 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.
---
 src/components/room/RoomSettingsPanel.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/room/RoomSettingsPanel.tsx b/src/components/room/RoomSettingsPanel.tsx
index 8363532..9008cb6 100644
--- a/src/components/room/RoomSettingsPanel.tsx
+++ b/src/components/room/RoomSettingsPanel.tsx
@@ -1,5 +1,5 @@
 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 { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -79,6 +79,7 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
 
   useEffect(() => {
     loadAiConfigs();
+    loadModels();
   }, [loadAiConfigs]);
 
   // Load available models
@@ -215,8 +216,8 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
                 >
                   <div className="flex items-center gap-2 min-w-0">
                     <Bot className="h-4 w-4 text-muted-foreground shrink-0" />
-                    <span className="text-sm truncate font-mono text-foreground">
-                      {config.model}
+                    <span className="text-sm truncate text-foreground">
+                      {availableModels.find((m) => m.id === config.model)?.name ?? config.model}
                     </span>
                     {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">
@@ -266,7 +267,11 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
               ) : (
                 <Select value={selectedModelId} onValueChange={(v) => { if (v !== null) setSelectedModelId(v); }}>
                   <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>
                   <SelectContent>
                     {availableModels.map((model) => (