Move runtime config panel to right

This commit is contained in:
Xin Wang
2026-02-09 10:29:55 +08:00
parent d841c59f45
commit ab8e3a82d9

View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { Plus, Search, Play, Copy, Trash2, Edit2, Mic, MessageSquare, Save, Video, PhoneOff, Camera, ArrowLeftRight, Send, Phone, MoreHorizontal, Rocket, AlertTriangle, PhoneCall, CameraOff, Image, Images, CloudSun, Calendar, TrendingUp, Coins, Wrench, Globe, Terminal, X, ClipboardCheck, Sparkles, Volume2, Timer, ChevronDown, Link as LinkIcon, Database, Server, Zap, ExternalLink, Key, BrainCircuit, Ear, Book, Filter } from 'lucide-react';
import { Plus, Search, Play, Copy, Trash2, Edit2, Mic, MessageSquare, Save, Video, PhoneOff, Camera, ArrowLeftRight, Send, Phone, MoreHorizontal, Rocket, AlertTriangle, PhoneCall, CameraOff, Image, Images, CloudSun, Calendar, TrendingUp, Coins, Wrench, Globe, Terminal, X, ClipboardCheck, Sparkles, Volume2, Timer, ChevronDown, ChevronLeft, ChevronRight, Link as LinkIcon, Database, Server, Zap, ExternalLink, Key, BrainCircuit, Ear, Book, Filter } from 'lucide-react';
import { Button, Input, Card, Badge, Drawer, Dialog } from '../components/UI';
import { ASRModel, Assistant, KnowledgeBase, LLMModel, TabValue, Voice } from '../types';
import { createAssistant, deleteAssistant, fetchASRModels, fetchAssistantRuntimeConfig, fetchAssistants, fetchKnowledgeBases, fetchLLMModels, fetchVoices, updateAssistant as updateAssistantApi } from '../services/backendApi';
@@ -1605,26 +1605,8 @@ export const DebugDrawer: React.FC<{
))}
</div>
<div className="shrink-0 mb-3 rounded-md border border-white/10 bg-black/20">
<button
className="w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground flex items-center justify-between"
onClick={() => setResolvedConfigOpen((v) => !v)}
>
<span>Resolved Runtime Config (read-only)</span>
<div className="flex items-center gap-2">
<span className="text-[10px] uppercase tracking-wider opacity-70">
{resolvedConfigOpen ? 'Collapse' : 'Expand'}
</span>
<ChevronDown className={`h-3.5 w-3.5 transition-transform ${resolvedConfigOpen ? 'rotate-180' : ''}`} />
</div>
</button>
{resolvedConfigOpen && (
<pre className="px-3 pb-3 text-[11px] leading-5 text-cyan-100/90 whitespace-pre-wrap break-all max-h-52 overflow-auto">
{resolvedConfigView || 'Connect to load resolved config...'}
</pre>
)}
</div>
<div className="flex-1 min-h-0 flex">
<div className="flex-1 min-w-0 flex flex-col">
<div className="flex-1 overflow-hidden flex flex-col min-h-0 mb-4">
{mode === 'text' ? (
textSessionStarted ? (
@@ -1744,6 +1726,30 @@ export const DebugDrawer: React.FC<{
</div>
)}
</div>
<div className="shrink-0 flex items-center px-1">
<button
className="h-10 w-7 rounded-md border border-white/10 bg-white/5 hover:bg-white/10 text-muted-foreground hover:text-foreground transition-colors flex items-center justify-center"
onClick={() => setResolvedConfigOpen((v) => !v)}
title={resolvedConfigOpen ? '收起运行时配置' : '展开运行时配置'}
>
{resolvedConfigOpen ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
</button>
</div>
<div className={`shrink-0 overflow-hidden transition-all duration-300 ease-out ${resolvedConfigOpen ? 'w-80 opacity-100 ml-2' : 'w-0 opacity-0 ml-0'}`}>
<div className="h-full rounded-xl border border-white/10 bg-black/20 flex flex-col">
<div className="px-3 py-2 border-b border-white/10 flex items-center justify-between">
<span className="text-xs text-muted-foreground uppercase tracking-wider">Resolved Runtime Config</span>
<Badge variant="outline" className="text-[10px]">read-only</Badge>
</div>
<pre className="flex-1 p-3 text-[11px] leading-5 text-cyan-100/90 whitespace-pre-wrap break-all overflow-auto">
{resolvedConfigView || 'Connect to load resolved config...'}
</pre>
</div>
</div>
</div>
</div>
</Drawer>
);
};