fix: 修复 AI 回复无法送达发送者 + 重复消息 + action角色泄露 + OS环境支持
广播逻辑重构: - AI 回复 (stream_start/response/stream_segments/multi_message/stream_end) 改用 broadcastToUser 发送给所有客户端 - 用户消息回显保持 broadcastToUserExcept 排除发送者 消息去重与角色修复: - CacheMessage(user) 移至回复生成后，避免本轮 LLM 调用出现重复用户消息 - action 角色消息在 DB 存储时映射为 assistant，DeepSeek 等模型不支持自定义角色 - stream_end defer 机制确保错误路径也会终止客户端思考指示器 OS 完整环境支持: - host 包重构为 HostBackend 接口 + Direct/WSL/Docker 三种后端 - 新增 os_exec/os_file/os_system 工具供 AI 在完整 Linux 环境中自由操作 其他: - 视觉模型注入 + 图片预处理后清空 Images 避免传给 Chat 模型 - 图片 URL 相对路径→绝对 URL 转换 - DevTools 链路追踪页面 + 重启修复 - 记忆搜索模糊匹配增强 - 后台思考定时调度支持 - 管理后台页面 (模型配置/用户管理等) - docs/api 更新广播机制说明 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -7,8 +7,12 @@ import { useAuth } from '@/hooks/useAuth';
|
||||
import { useChat } from '@/hooks/useChat';
|
||||
import { useSessionStore, isAdminUser } from '@/store/sessionStore';
|
||||
import { useChatStore } from '@/store/chatStore';
|
||||
import { usePageStore } from '@/store/pageStore';
|
||||
import { fetchMessages } from '@/api/sessions';
|
||||
import { registerServiceWorker } from '@/hooks/usePWA';
|
||||
import { ModelsAdminPage } from '@/components/admin/ModelsAdminPage';
|
||||
import { AdminDashboard } from '@/components/admin/AdminDashboard';
|
||||
import { ProfilePage } from '@/components/profile/ProfilePage';
|
||||
|
||||
/** URL Hash 工具 */
|
||||
const SESSION_HASH_PREFIX = 'session=';
|
||||
@@ -326,15 +330,42 @@ export default function App() {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<AppLayout>
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<ChatContainer />
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<ChatInput onSend={send} />
|
||||
</div>
|
||||
</div>
|
||||
<PageRouter onSend={send} />
|
||||
</AppLayout>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
type SendFn = (content: string, mode?: import('@/types/chat').ChatMode, attachments?: import('@/types/chat').MessageAttachment[]) => void;
|
||||
|
||||
function PageRouter({ onSend }: { onSend: SendFn }) {
|
||||
const currentPage = usePageStore((s) => s.currentPage);
|
||||
const isAdmin = isAdminUser(localStorage.getItem('user_id') || '');
|
||||
|
||||
switch (currentPage) {
|
||||
case 'admin-models':
|
||||
if (!isAdmin) return <ChatPage onSend={onSend} />;
|
||||
return <ModelsAdminPage />;
|
||||
case 'admin-dashboard':
|
||||
if (!isAdmin) return <ChatPage onSend={onSend} />;
|
||||
return <AdminDashboard />;
|
||||
case 'profile':
|
||||
return <ProfilePage />;
|
||||
case 'chat':
|
||||
default:
|
||||
return <ChatPage onSend={onSend} />;
|
||||
}
|
||||
}
|
||||
|
||||
function ChatPage({ onSend }: { onSend: SendFn }) {
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<ChatContainer />
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<ChatInput onSend={onSend} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
// Admin API — /admin/models/*, /admin/sessions/*, /admin/clients/*
|
||||
|
||||
import { request, type ApiResponse } from './client';
|
||||
import type {
|
||||
ModelProvider,
|
||||
ModelConfig,
|
||||
RoutingRule,
|
||||
SessionState,
|
||||
ClientInfo,
|
||||
HealthCheckResult,
|
||||
ModelListResponse,
|
||||
ProviderListResponse,
|
||||
AdminSessionsResponse,
|
||||
ActiveSessionsResponse,
|
||||
ClientListResponse,
|
||||
} from '@/types/admin';
|
||||
|
||||
// ========== Providers ==========
|
||||
|
||||
export function listProviders(): Promise<ApiResponse<ProviderListResponse>> {
|
||||
return request<ProviderListResponse>('/admin/models/providers');
|
||||
}
|
||||
|
||||
export function saveProvider(name: string, baseUrl: string, apiKey: string): Promise<ApiResponse<{ status: string; name: string }>> {
|
||||
return request(`/admin/models/providers/${encodeURIComponent(name)}`, {
|
||||
method: 'POST',
|
||||
body: { name, base_url: baseUrl, api_key: apiKey },
|
||||
});
|
||||
}
|
||||
|
||||
export function deleteProvider(name: string): Promise<ApiResponse<{ status: string; name: string }>> {
|
||||
return request(`/admin/models/providers/${encodeURIComponent(name)}`, { method: 'DELETE' });
|
||||
}
|
||||
|
||||
export function healthCheckProvider(provider: string): Promise<ApiResponse<HealthCheckResult>> {
|
||||
return request('/admin/models/health-check', { method: 'POST', body: { provider } });
|
||||
}
|
||||
|
||||
export function fetchProviderModels(name: string, url?: string): Promise<ApiResponse<{ models: Array<{ id: string; name?: string }> }>> {
|
||||
const query = url ? `?url=${encodeURIComponent(url)}` : '';
|
||||
return request(`/admin/models/fetch-models/${encodeURIComponent(name)}${query}`);
|
||||
}
|
||||
|
||||
// ========== Models ==========
|
||||
|
||||
export function listModels(): Promise<ApiResponse<ModelListResponse>> {
|
||||
return request<ModelListResponse>('/admin/models/models');
|
||||
}
|
||||
|
||||
export function saveModel(id: string, config: Partial<ModelConfig>): Promise<ApiResponse<{ status: string; id: string }>> {
|
||||
return request(`/admin/models/models/${encodeURIComponent(id)}`, {
|
||||
method: 'POST',
|
||||
body: { id, ...config },
|
||||
});
|
||||
}
|
||||
|
||||
export function deleteModel(id: string): Promise<ApiResponse<{ status: string; id: string }>> {
|
||||
return request(`/admin/models/models/${encodeURIComponent(id)}`, { method: 'DELETE' });
|
||||
}
|
||||
|
||||
// ========== Routing ==========
|
||||
|
||||
export function listRouting(): Promise<ApiResponse<{ rules: RoutingRule[] }>> {
|
||||
return request('/admin/models/routing');
|
||||
}
|
||||
|
||||
export function saveRouting(purpose: string, fallbackChain: string[], required?: boolean): Promise<ApiResponse<{ status: string; purpose: string }>> {
|
||||
return request(`/admin/models/routing/${encodeURIComponent(purpose)}`, {
|
||||
method: 'POST',
|
||||
body: { purpose, fallback_chain: fallbackChain, required },
|
||||
});
|
||||
}
|
||||
|
||||
export function deleteRouting(purpose: string): Promise<ApiResponse<{ status: string; purpose: string }>> {
|
||||
return request(`/admin/models/routing/${encodeURIComponent(purpose)}`, { method: 'DELETE' });
|
||||
}
|
||||
|
||||
// ========== Sessions ==========
|
||||
|
||||
export function listAdminSessions(): Promise<ApiResponse<AdminSessionsResponse>> {
|
||||
return request<AdminSessionsResponse>('/admin/sessions');
|
||||
}
|
||||
|
||||
export function listActiveSessions(): Promise<ApiResponse<ActiveSessionsResponse>> {
|
||||
return request<ActiveSessionsResponse>('/admin/sessions/active');
|
||||
}
|
||||
|
||||
export function getAdminSession(id: string): Promise<ApiResponse<SessionState>> {
|
||||
return request<SessionState>(`/admin/sessions/${encodeURIComponent(id)}`);
|
||||
}
|
||||
|
||||
// ========== Clients ==========
|
||||
|
||||
export function listClients(userId?: string): Promise<ApiResponse<ClientListResponse>> {
|
||||
const query = userId ? `?user_id=${encodeURIComponent(userId)}` : '';
|
||||
return request<ClientListResponse>(`/admin/clients${query}`);
|
||||
}
|
||||
|
||||
export function setClientNote(clientId: string, note: string): Promise<ApiResponse<{ status: string; client_id: string; note: string }>> {
|
||||
return request(`/admin/clients/${encodeURIComponent(clientId)}/note`, {
|
||||
method: 'PUT',
|
||||
body: { note },
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { listAdminSessions, listActiveSessions, listClients, setClientNote } from '@/api/admin';
|
||||
import type { SessionState, ClientInfo } from '@/types/admin';
|
||||
|
||||
type TabId = 'sessions' | 'clients';
|
||||
|
||||
export function AdminDashboard() {
|
||||
const [tab, setTab] = useState<TabId>('sessions');
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-[#FFFAF5] dark:bg-[#1a1a2e]">
|
||||
<div className="flex-shrink-0 px-6 py-4 border-b border-pink-100 dark:border-pink-900">
|
||||
<h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200">管理仪表盘</h2>
|
||||
<p className="text-xs text-gray-400 mt-1">会话与客户端概览</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 flex border-b border-pink-100 dark:border-pink-900 px-6">
|
||||
{([
|
||||
['sessions', '活跃会话'],
|
||||
['clients', '已知客户端'],
|
||||
] as [TabId, string][]).map(([id, label]) => (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => setTab(id)}
|
||||
className={`px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px ${
|
||||
tab === id
|
||||
? 'text-pink-500 border-pink-500'
|
||||
: 'text-gray-400 border-transparent hover:text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{tab === 'sessions' && <SessionsTab />}
|
||||
{tab === 'clients' && <ClientsTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ========== Sessions Tab ==========
|
||||
|
||||
function SessionsTab() {
|
||||
const [sessions, setSessions] = useState<SessionState[]>([]);
|
||||
const [activeUsers, setActiveUsers] = useState<Record<string, SessionState[]>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
const [allRes, activeRes] = await Promise.all([listAdminSessions(), listActiveSessions()]);
|
||||
if (allRes.data?.sessions) setSessions(allRes.data.sessions);
|
||||
else if (allRes.error) setError(allRes.error);
|
||||
if (activeRes.data?.users) setActiveUsers(activeRes.data.users);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
if (loading) return <div className="text-sm text-gray-400">加载中...</div>;
|
||||
|
||||
const totalMessages = sessions.reduce((sum, s) => sum + (s.message_count || 0), 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-500">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900 text-center">
|
||||
<p className="text-2xl font-bold text-pink-500">{sessions.length}</p>
|
||||
<p className="text-xs text-gray-400 mt-1">总会话</p>
|
||||
</div>
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900 text-center">
|
||||
<p className="text-2xl font-bold text-green-500">{Object.keys(activeUsers).length}</p>
|
||||
<p className="text-xs text-gray-400 mt-1">活跃用户</p>
|
||||
</div>
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900 text-center">
|
||||
<p className="text-2xl font-bold text-blue-500">{totalMessages}</p>
|
||||
<p className="text-xs text-gray-400 mt-1">总消息</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* All Sessions */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">所有会话 ({sessions.length})</h4>
|
||||
<div className="space-y-2">
|
||||
{sessions.slice(0, 50).map((s) => (
|
||||
<div key={s.session_id} className="p-3 bg-white dark:bg-gray-800 rounded-lg border border-pink-100 dark:border-pink-900 flex items-center justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 truncate">
|
||||
{s.is_main ? '🏠 ' : ''}{s.title || '未命名'}
|
||||
</span>
|
||||
{s.is_main && <span className="px-1.5 py-0.5 text-[10px] bg-amber-100 text-amber-600 rounded">主对话</span>}
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-0.5">
|
||||
{s.user_id} · {s.message_count || 0} 条消息
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-400 ml-2 flex-shrink-0">
|
||||
{new Date(s.updated_at).toLocaleString('zh-CN')}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ========== Clients Tab ==========
|
||||
|
||||
function ClientsTab() {
|
||||
const [clients, setClients] = useState<ClientInfo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [editingNote, setEditingNote] = useState<{ id: string; note: string } | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
const res = await listClients();
|
||||
if (res.data?.clients) setClients(res.data.clients);
|
||||
else if (res.error) setError(res.error);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const handleSaveNote = async () => {
|
||||
if (!editingNote) return;
|
||||
const res = await setClientNote(editingNote.id, editingNote.note);
|
||||
if (res.error) setError(res.error);
|
||||
else { setEditingNote(null); await load(); }
|
||||
};
|
||||
|
||||
if (loading) return <div className="text-sm text-gray-400">加载中...</div>;
|
||||
|
||||
const onlineCount = clients.filter((c) => c.online).length;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-500">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-gray-400">{clients.length} 个客户端 ({onlineCount} 在线)</span>
|
||||
<button onClick={load} className="text-xs text-pink-500 hover:text-pink-600">刷新</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{clients.map((c) => (
|
||||
<div key={c.client_id} className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<span className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${c.online ? 'bg-green-400' : 'bg-gray-300'}`} />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300 truncate">
|
||||
{c.device_name || c.client_id}
|
||||
</p>
|
||||
<p className="text-xs text-gray-400 mt-0.5 font-mono">{c.client_id}</p>
|
||||
{c.user_agent && (
|
||||
<p className="text-xs text-gray-400 truncate mt-0.5">{c.user_agent}</p>
|
||||
)}
|
||||
{c.note && (
|
||||
<p className="text-xs text-amber-500 mt-0.5">备注: {c.note}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 ml-3">
|
||||
{c.last_seen && (
|
||||
<span className="text-[10px] text-gray-400">{new Date(c.last_seen).toLocaleString('zh-CN')}</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setEditingNote({ id: c.client_id, note: c.note || '' })}
|
||||
className="px-2 py-1 text-xs text-amber-500 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded transition-colors"
|
||||
>
|
||||
备注
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Note Edit Modal */}
|
||||
{editingNote && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 m-4 max-w-sm w-full border border-pink-100 dark:border-pink-700">
|
||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">设置备注</h3>
|
||||
<p className="text-xs text-gray-400 mb-3 font-mono">{editingNote.id}</p>
|
||||
<input
|
||||
type="text" value={editingNote.note}
|
||||
onChange={(e) => setEditingNote({ ...editingNote, note: e.target.value })}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm"
|
||||
placeholder="输入备注..."
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSaveNote()}
|
||||
/>
|
||||
<div className="flex justify-end gap-3 mt-4">
|
||||
<button onClick={() => setEditingNote(null)}
|
||||
className="px-4 py-2 rounded-lg text-sm text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700">取消</button>
|
||||
<button onClick={handleSaveNote}
|
||||
className="px-4 py-2 rounded-lg text-sm bg-pink-400 hover:bg-pink-500 text-white font-medium">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,484 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
listProviders, saveProvider, deleteProvider, healthCheckProvider, fetchProviderModels,
|
||||
listModels, saveModel, deleteModel,
|
||||
listRouting, saveRouting, deleteRouting,
|
||||
} from '@/api/admin';
|
||||
import type { ModelProvider, ModelConfig, RoutingRule } from '@/types/admin';
|
||||
|
||||
type TabId = 'providers' | 'models' | 'routing';
|
||||
|
||||
export function ModelsAdminPage() {
|
||||
const [tab, setTab] = useState<TabId>('providers');
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-[#FFFAF5] dark:bg-[#1a1a2e]">
|
||||
{/* Header */}
|
||||
<div className="flex-shrink-0 px-6 py-4 border-b border-pink-100 dark:border-pink-900">
|
||||
<h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200">模型配置管理</h2>
|
||||
<p className="text-xs text-gray-400 mt-1">管理 LLM 供应商、模型和路由规则</p>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex-shrink-0 flex border-b border-pink-100 dark:border-pink-900 px-6">
|
||||
{([
|
||||
['providers', '供应商'],
|
||||
['models', '模型'],
|
||||
['routing', '路由规则'],
|
||||
] as [TabId, string][]).map(([id, label]) => (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => setTab(id)}
|
||||
className={`px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px ${
|
||||
tab === id
|
||||
? 'text-pink-500 border-pink-500'
|
||||
: 'text-gray-400 border-transparent hover:text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{tab === 'providers' && <ProvidersTab />}
|
||||
{tab === 'models' && <ModelsTab />}
|
||||
{tab === 'routing' && <RoutingTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ========== Providers Tab ==========
|
||||
|
||||
function ProvidersTab() {
|
||||
const [providers, setProviders] = useState<ModelProvider[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [editing, setEditing] = useState<{ name: string; base_url: string; api_key: string } | null>(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [formName, setFormName] = useState('');
|
||||
const [formUrl, setFormUrl] = useState('');
|
||||
const [formKey, setFormKey] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [healthMsg, setHealthMsg] = useState<Record<string, string>>({});
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
const res = await listProviders();
|
||||
if (res.data?.providers) setProviders(res.data.providers);
|
||||
else if (res.error) setError(res.error);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formName) return;
|
||||
setSaving(true);
|
||||
const res = await saveProvider(formName, formUrl, formKey);
|
||||
if (res.error) setError(res.error);
|
||||
else {
|
||||
setShowForm(false);
|
||||
setFormName(''); setFormUrl(''); setFormKey('');
|
||||
await load();
|
||||
}
|
||||
setSaving(false);
|
||||
};
|
||||
|
||||
const handleDelete = async (name: string) => {
|
||||
if (!confirm(`确定要删除供应商 "${name}" 吗？`)) return;
|
||||
const res = await deleteProvider(name);
|
||||
if (res.error) setError(res.error);
|
||||
else await load();
|
||||
};
|
||||
|
||||
const handleHealth = async (provider: string) => {
|
||||
setHealthMsg((p) => ({ ...p, [provider]: '检测中...' }));
|
||||
const res = await healthCheckProvider(provider);
|
||||
setHealthMsg((p) => ({ ...p, [provider]: res.data?.message || res.error || '未知结果' }));
|
||||
};
|
||||
|
||||
const handleFetchModels = async (name: string, baseUrl: string) => {
|
||||
try {
|
||||
const res = await fetchProviderModels(name, baseUrl.replace(/\/+$/, '') + '/models');
|
||||
if (res.data) {
|
||||
alert(`获取到模型列表:\n${JSON.stringify(res.data, null, 2)}`);
|
||||
} else {
|
||||
alert('获取失败: ' + (res.error || '未知错误'));
|
||||
}
|
||||
} catch (err) {
|
||||
alert('获取失败: ' + (err instanceof Error ? err.message : '未知错误'));
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div className="text-sm text-gray-400">加载中...</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-500">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 text-red-400 hover:text-red-600">x</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-400">{providers.length} 个供应商</span>
|
||||
<button
|
||||
onClick={() => { setShowForm(true); setEditing(null); setFormName(''); setFormUrl(''); setFormKey(''); }}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-pink-400 hover:bg-pink-500 text-white rounded-lg transition-colors"
|
||||
>
|
||||
+ 添加供应商
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Add/Edit Form */}
|
||||
{(showForm || editing) && (
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-200 dark:border-pink-800 space-y-3">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{editing ? `编辑 ${editing.name}` : '新供应商'}
|
||||
</h4>
|
||||
<input
|
||||
type="text" placeholder="名称 (如 openai)" value={formName}
|
||||
onChange={(e) => setFormName(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm"
|
||||
disabled={!!editing}
|
||||
/>
|
||||
<input
|
||||
type="text" placeholder="Base URL (如 https://api.openai.com/v1)" value={formUrl}
|
||||
onChange={(e) => setFormUrl(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm"
|
||||
/>
|
||||
<input
|
||||
type="password" placeholder="API Key" value={formKey}
|
||||
onChange={(e) => setFormKey(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm"
|
||||
/>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button onClick={() => { setShowForm(false); setEditing(null); }}
|
||||
className="px-3 py-1.5 text-xs text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
|
||||
取消
|
||||
</button>
|
||||
<button onClick={handleSave} disabled={saving || !formName}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-pink-400 hover:bg-pink-500 disabled:bg-pink-300 text-white rounded-lg">
|
||||
{saving ? '保存中...' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Provider List */}
|
||||
<div className="space-y-2">
|
||||
{providers.map((p) => (
|
||||
<div key={p.name} className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h5 className="text-sm font-medium text-gray-800 dark:text-gray-200">{p.name}</h5>
|
||||
<p className="text-xs text-gray-400 mt-0.5">{p.base_url}</p>
|
||||
<p className="text-xs text-gray-400">Key: {p.api_key ? p.api_key.slice(0, 8) + '...' : '(未设置)'}</p>
|
||||
</div>
|
||||
<div className="flex gap-1.5">
|
||||
<button onClick={() => handleFetchModels(p.name, p.base_url)}
|
||||
className="px-2 py-1 text-xs text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors">
|
||||
获取模型
|
||||
</button>
|
||||
<button onClick={() => handleHealth(p.name)}
|
||||
className="px-2 py-1 text-xs text-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 rounded transition-colors">
|
||||
检测
|
||||
</button>
|
||||
<button onClick={() => { setEditing({ name: p.name, base_url: p.base_url, api_key: p.api_key }); setFormName(p.name); setFormUrl(p.base_url); setFormKey(p.api_key); }}
|
||||
className="px-2 py-1 text-xs text-amber-500 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded transition-colors">
|
||||
编辑
|
||||
</button>
|
||||
<button onClick={() => handleDelete(p.name)}
|
||||
className="px-2 py-1 text-xs text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors">
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{healthMsg[p.name] && (
|
||||
<p className="mt-2 text-xs text-gray-500 bg-gray-50 dark:bg-gray-900 rounded p-2">{healthMsg[p.name]}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ========== Models Tab ==========
|
||||
|
||||
function ModelsTab() {
|
||||
const [models, setModels] = useState<ModelConfig[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editId, setEditId] = useState('');
|
||||
const [form, setForm] = useState({ id: '', name: '', provider: '', description: '', paramsJson: '{}' });
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
const res = await listModels();
|
||||
if (res.data?.models) setModels(res.data.models);
|
||||
else if (res.error) setError(res.error);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!form.id || !form.provider) return;
|
||||
setSaving(true);
|
||||
let params: Record<string, unknown> | undefined;
|
||||
try { params = JSON.parse(form.paramsJson); } catch { params = undefined; }
|
||||
const res = await saveModel(form.id, {
|
||||
name: form.name, provider: form.provider, description: form.description, params,
|
||||
});
|
||||
if (res.error) setError(res.error);
|
||||
else { setShowForm(false); await load(); }
|
||||
setSaving(false);
|
||||
};
|
||||
|
||||
const handleEdit = (m: ModelConfig) => {
|
||||
setEditId(m.id);
|
||||
setForm({ id: m.id, name: m.name, provider: m.provider, description: m.description || '', paramsJson: JSON.stringify(m.params || {}, null, 2) });
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm(`确定要删除模型 "${id}" 吗？`)) return;
|
||||
const res = await deleteModel(id);
|
||||
if (res.error) setError(res.error);
|
||||
else await load();
|
||||
};
|
||||
|
||||
if (loading) return <div className="text-sm text-gray-400">加载中...</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-500">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 text-red-400 hover:text-red-600">x</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-400">{models.length} 个模型</span>
|
||||
<button
|
||||
onClick={() => { setEditId(''); setForm({ id: '', name: '', provider: '', description: '', paramsJson: '{}' }); setShowForm(true); }}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-pink-400 hover:bg-pink-500 text-white rounded-lg transition-colors"
|
||||
>
|
||||
+ 添加模型
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-200 dark:border-pink-800 space-y-3">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">{editId ? `编辑 ${editId}` : '新模型'}</h4>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400">ID</label>
|
||||
<input type="text" placeholder="如 gpt-4o" value={form.id}
|
||||
onChange={(e) => setForm({ ...form, id: e.target.value })}
|
||||
disabled={!!editId}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400">名称</label>
|
||||
<input type="text" placeholder="显示名称" value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400">供应商</label>
|
||||
<input type="text" placeholder="如 openai" value={form.provider}
|
||||
onChange={(e) => setForm({ ...form, provider: e.target.value })}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400">描述</label>
|
||||
<input type="text" value={form.description}
|
||||
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400">参数 (JSON)</label>
|
||||
<textarea rows={4} value={form.paramsJson}
|
||||
onChange={(e) => setForm({ ...form, paramsJson: e.target.value })}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm mt-1 font-mono" />
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button onClick={() => setShowForm(false)}
|
||||
className="px-3 py-1.5 text-xs text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">取消</button>
|
||||
<button onClick={handleSave} disabled={saving || !form.id}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-pink-400 hover:bg-pink-500 disabled:bg-pink-300 text-white rounded-lg">
|
||||
{saving ? '保存中...' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{models.map((m) => (
|
||||
<div key={m.id} className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h5 className="text-sm font-medium text-gray-800 dark:text-gray-200">{m.id}</h5>
|
||||
{m.enabled === false && (
|
||||
<span className="px-1.5 py-0.5 text-[10px] bg-red-100 text-red-500 rounded">禁用</span>
|
||||
)}
|
||||
{m.tags && m.tags.length > 0 && m.tags.map((t) => (
|
||||
<span key={t} className="px-1.5 py-0.5 text-[10px] bg-blue-100 text-blue-500 rounded">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-0.5">
|
||||
{m.name} · {m.provider} · 优先级 {m.priority ?? '-'}
|
||||
{m.description ? ` · ${m.description}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-1.5 ml-3">
|
||||
<button onClick={() => handleEdit(m)}
|
||||
className="px-2 py-1 text-xs text-amber-500 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded transition-colors">编辑</button>
|
||||
<button onClick={() => handleDelete(m.id)}
|
||||
className="px-2 py-1 text-xs text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ========== Routing Tab ==========
|
||||
|
||||
function RoutingTab() {
|
||||
const [rules, setRules] = useState<RoutingRule[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [formPurpose, setFormPurpose] = useState('');
|
||||
const [formChain, setFormChain] = useState('');
|
||||
const [formRequired, setFormRequired] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
const res = await listRouting();
|
||||
if (res.data) {
|
||||
// Response may wrap rules in an object or be the array directly
|
||||
const data = res.data as unknown as { rules?: RoutingRule[] } | RoutingRule[];
|
||||
if (Array.isArray(data)) setRules(data);
|
||||
else if (data?.rules) setRules(data.rules);
|
||||
} else if (res.error) setError(res.error);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formPurpose || !formChain.trim()) return;
|
||||
setSaving(true);
|
||||
const chain = formChain.split(',').map((s) => s.trim()).filter(Boolean);
|
||||
const res = await saveRouting(formPurpose, chain, formRequired);
|
||||
if (res.error) setError(res.error);
|
||||
else { setShowForm(false); setFormPurpose(''); setFormChain(''); await load(); }
|
||||
setSaving(false);
|
||||
};
|
||||
|
||||
const handleDelete = async (purpose: string) => {
|
||||
if (!confirm(`确定要删除路由规则 "${purpose}" 吗？`)) return;
|
||||
const res = await deleteRouting(purpose);
|
||||
if (res.error) setError(res.error);
|
||||
else await load();
|
||||
};
|
||||
|
||||
if (loading) return <div className="text-sm text-gray-400">加载中...</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-500">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 text-red-400 hover:text-red-600">x</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-400">{rules.length} 条规则</span>
|
||||
<button
|
||||
onClick={() => { setShowForm(true); setFormPurpose(''); setFormChain(''); setFormRequired(false); }}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-pink-400 hover:bg-pink-500 text-white rounded-lg transition-colors"
|
||||
>
|
||||
+ 添加规则
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-200 dark:border-pink-800 space-y-3">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">新路由规则</h4>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400">Purpose</label>
|
||||
<input type="text" placeholder="如 chat, deep_thinking, vision..." value={formPurpose}
|
||||
onChange={(e) => setFormPurpose(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400">Fallback Chain (逗号分隔)</label>
|
||||
<input type="text" placeholder="如 gpt-4o, gpt-4o-mini, claude-sonnet-4-6" value={formChain}
|
||||
onChange={(e) => setFormChain(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-pink-200 dark:border-pink-700 bg-white dark:bg-gray-700 text-sm mt-1" />
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<input type="checkbox" checked={formRequired} onChange={(e) => setFormRequired(e.target.checked)}
|
||||
className="rounded border-pink-300 text-pink-500 focus:ring-pink-400" />
|
||||
必须匹配
|
||||
</label>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button onClick={() => setShowForm(false)}
|
||||
className="px-3 py-1.5 text-xs text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">取消</button>
|
||||
<button onClick={handleSave} disabled={saving || !formPurpose}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-pink-400 hover:bg-pink-500 disabled:bg-pink-300 text-white rounded-lg">
|
||||
{saving ? '保存中...' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{rules.map((r) => (
|
||||
<div key={r.purpose} className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h5 className="text-sm font-medium text-gray-800 dark:text-gray-200 font-mono">{r.purpose}</h5>
|
||||
{r.required && (
|
||||
<span className="px-1.5 py-0.5 text-[10px] bg-amber-100 text-amber-600 rounded">必须</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-1.5">
|
||||
{r.fallback_chain.map((m, i) => (
|
||||
<span key={m} className="px-2 py-0.5 text-[10px] bg-pink-50 dark:bg-pink-900/20 text-pink-600 dark:text-pink-400 rounded-full">
|
||||
{i === 0 ? '★ ' : ''}{m}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => handleDelete(r.purpose)}
|
||||
className="px-2 py-1 text-xs text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors ml-3">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -191,6 +191,51 @@ export function ChatInput({ onSend, disabled }: ChatInputProps) {
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 拖拽上传
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
const dragCounterRef = useRef(0);
|
||||
|
||||
const handleDragEnter = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current++;
|
||||
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
|
||||
setIsDragOver(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current--;
|
||||
if (dragCounterRef.current <= 0) {
|
||||
dragCounterRef.current = 0;
|
||||
setIsDragOver(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragOver(false);
|
||||
dragCounterRef.current = 0;
|
||||
|
||||
const files = e.dataTransfer?.files;
|
||||
if (files) {
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
if (file.type.startsWith('image/')) {
|
||||
addImageFile(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [addImageFile]);
|
||||
|
||||
// 文件选择
|
||||
const handleFileSelect = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -222,7 +267,22 @@ export function ChatInput({ onSend, disabled }: ChatInputProps) {
|
||||
}, [isListening, startListening, stopListening]);
|
||||
|
||||
return (
|
||||
<div className="border-t border-pink-100 dark:border-pink-900 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm px-4 py-3">
|
||||
<div
|
||||
className={`relative border-t border-pink-100 dark:border-pink-900 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm px-4 py-3 transition-colors ${isDragOver ? 'bg-pink-50/80 dark:bg-pink-900/20' : ''}`}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
{/* 拖拽上传覆盖层 */}
|
||||
{isDragOver && (
|
||||
<div className="absolute inset-0 z-10 bg-pink-100/60 dark:bg-pink-900/40 border-2 border-dashed border-pink-400 rounded-lg flex items-center justify-center pointer-events-none">
|
||||
<div className="text-center">
|
||||
<span className="text-3xl">📷</span>
|
||||
<p className="text-sm text-pink-500 font-medium mt-1">释放以添加图片</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-2 max-w-3xl mx-auto">
|
||||
{/* 昔涟正在输入指示器 */}
|
||||
{isTyping && (
|
||||
|
||||
@@ -3,7 +3,7 @@ import { CyreneAvatar } from '@/components/persona/CyreneAvatar';
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
import { useChatStore } from '@/store/chatStore';
|
||||
import { useSpeechSynthesis } from '@/hooks/useSpeechSynthesis';
|
||||
import type { MessageAttachment, MultiMessageItem, StreamSegment, MessageDisplayType } from '@/types/chat';
|
||||
import type { MessageAttachment, MultiMessageItem, StreamSegment, MessageDisplayType, ToolProgressInfo, ToolCall } from '@/types/chat';
|
||||
import { ImageLightbox } from './ImageLightbox';
|
||||
import { MarkdownRenderer } from './MarkdownRenderer';
|
||||
|
||||
@@ -18,6 +18,7 @@ interface MessageBubbleProps {
|
||||
streamSegments?: StreamSegment[];
|
||||
msgType?: MessageDisplayType;
|
||||
metadata?: Record<string, unknown>;
|
||||
audioUrl?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -155,6 +156,7 @@ export function MessageBubble({
|
||||
streamSegments,
|
||||
msgType,
|
||||
metadata,
|
||||
audioUrl,
|
||||
}: MessageBubbleProps) {
|
||||
const isUser = role === 'user';
|
||||
const isAction = role === 'action' || msgType === 'action';
|
||||
@@ -179,12 +181,32 @@ export function MessageBubble({
|
||||
);
|
||||
}
|
||||
|
||||
// 工具进度 — 紧凑进度行
|
||||
// 工具进度 — 带进度条的紧凑行
|
||||
if (isToolProgress) {
|
||||
const tp: ToolProgressInfo | undefined = metadata?.tool_progress as ToolProgressInfo | undefined;
|
||||
const progress = tp?.progress ?? 0;
|
||||
const toolName = tp?.tool_name ?? '';
|
||||
const status = tp?.status ?? 'running';
|
||||
const statusColor =
|
||||
status === 'completed' ? 'bg-green-400' :
|
||||
status === 'failed' ? 'bg-red-400' :
|
||||
status === 'started' ? 'bg-blue-400' :
|
||||
'bg-blue-400 animate-pulse';
|
||||
const progressText = status === 'completed' ? '完成' :
|
||||
status === 'failed' ? '失败' :
|
||||
`${Math.round(progress * 100)}%`;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 mx-4 my-1 px-3 py-1 text-xs text-gray-400 dark:text-gray-500">
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-blue-400 animate-pulse" />
|
||||
<span>{content}</span>
|
||||
<div className="flex items-center gap-2 mx-4 my-1 px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-100 dark:border-gray-800">
|
||||
{toolName && <span className="font-medium text-gray-600 dark:text-gray-300 flex-shrink-0">{toolName}</span>}
|
||||
<div className="flex-1 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden min-w-[60px]">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-300 ${statusColor}`}
|
||||
style={{ width: `${Math.max(progress * 100, 2)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="flex-shrink-0 text-[10px]">{progressText}</span>
|
||||
{content && <span className="text-gray-400 truncate hidden sm:inline">{content}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -239,6 +261,7 @@ export function MessageBubble({
|
||||
);
|
||||
}
|
||||
|
||||
const toolCalls = (metadata?.tool_calls as ToolCall[] | undefined) ?? [];
|
||||
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
||||
const time = new Date(timestamp).toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
@@ -330,6 +353,20 @@ export function MessageBubble({
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 音频播放器 */}
|
||||
{!isStreaming && audioUrl && (
|
||||
<div className="mt-2">
|
||||
<audio controls className="w-full max-w-[300px] h-8" src={audioUrl}>
|
||||
您的浏览器不支持音频播放
|
||||
</audio>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 工具调用信息 */}
|
||||
{!isStreaming && toolCalls.length > 0 && (
|
||||
<ToolCallsInfo toolCalls={toolCalls} />
|
||||
)}
|
||||
|
||||
{/* 图片附件网格 */}
|
||||
{!isStreaming && imageAttachments.length > 0 && (
|
||||
<div
|
||||
@@ -452,6 +489,48 @@ function ImageThumbnail({
|
||||
);
|
||||
}
|
||||
|
||||
/** 工具调用信息展示 */
|
||||
function ToolCallsInfo({ toolCalls }: { toolCalls: ToolCall[] }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
if (!toolCalls || toolCalls.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-2 pt-2 border-t border-pink-100 dark:border-pink-800">
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="flex items-center gap-1 text-[10px] text-gray-400 hover:text-pink-500 transition-colors"
|
||||
>
|
||||
<span>{expanded ? '▼' : '▶'}</span>
|
||||
<span>工具调用 ({toolCalls.length})</span>
|
||||
</button>
|
||||
{expanded && (
|
||||
<div className="mt-1.5 space-y-1.5">
|
||||
{toolCalls.map((tc, i) => (
|
||||
<div key={i} className="bg-gray-50 dark:bg-gray-900 rounded-lg p-2 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-pink-500">{tc.name}</span>
|
||||
{tc.result !== undefined && (
|
||||
<span className="text-[10px] text-green-500">
|
||||
{typeof tc.result === 'string' && tc.result.length > 60
|
||||
? tc.result.slice(0, 60) + '...'
|
||||
: JSON.stringify(tc.result).slice(0, 60)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{tc.arguments && Object.keys(tc.arguments).length > 0 && (
|
||||
<div className="mt-1 text-gray-400 font-mono break-all">
|
||||
{JSON.stringify(tc.arguments, null, 0).slice(0, 120)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 用户头像组件：管理员使用 Admin_Avatar.jpg，普通用户使用 Default_Avatar.png */
|
||||
function UserAvatar() {
|
||||
const [imgError, setImgError] = useState(false);
|
||||
|
||||
@@ -74,6 +74,7 @@ export function MessageList({
|
||||
attachments={msg.attachments}
|
||||
msgType={msg.msgType}
|
||||
metadata={msg.metadata}
|
||||
audioUrl={msg.audioUrl}
|
||||
/>
|
||||
))}
|
||||
<div ref={bottomRef} />
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { useRef, useEffect, useState, useCallback } from 'react';
|
||||
import { CyreneAvatar } from '@/components/persona/CyreneAvatar';
|
||||
import { MoodIndicator } from '@/components/persona/MoodIndicator';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { usePWA } from '@/hooks/usePWA';
|
||||
import { useNotificationStore } from '@/store/notificationStore';
|
||||
import { useSessionStore } from '@/store/sessionStore';
|
||||
import { getToken } from '@/api/client';
|
||||
import { ReminderPanel } from '@/components/layout/ReminderPanel';
|
||||
import { BriefingPanel } from '@/components/layout/BriefingPanel';
|
||||
import { AutomationPanel } from '@/components/layout/AutomationPanel';
|
||||
@@ -60,12 +61,31 @@ export function Header({ onMenuClick, onSearchClick }: HeaderProps) {
|
||||
// PWA Hook
|
||||
const { isInstallable, isInstalled, hasUpdate, install, update } = usePWA();
|
||||
|
||||
// 下拉面板标签页切换：通知 / 提醒 / 简报
|
||||
// 下拉面板标签页切换
|
||||
const [dropdownTab, setDropdownTab] = useState<'notifications' | 'reminders' | 'briefing' | 'automation' | 'files' | 'knowledge'>('notifications');
|
||||
|
||||
// 获取当前用户 ID
|
||||
const userId = localStorage.getItem('user_id') || '';
|
||||
|
||||
// 健康检查指示器
|
||||
const [apiOnline, setApiOnline] = useState<boolean | null>(null);
|
||||
const checkHealth = useCallback(async () => {
|
||||
try {
|
||||
const API_BASE = import.meta.env.VITE_API_URL || '/api/v1';
|
||||
const resp = await fetch(`${API_BASE}/health`);
|
||||
const data = await resp.json();
|
||||
setApiOnline(data?.status === 'ok');
|
||||
} catch {
|
||||
setApiOnline(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
checkHealth();
|
||||
const interval = setInterval(checkHealth, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, [checkHealth]);
|
||||
|
||||
// 点击外部关闭下拉
|
||||
useEffect(() => {
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
@@ -102,9 +122,19 @@ export function Header({ onMenuClick, onSearchClick }: HeaderProps) {
|
||||
|
||||
<CyreneAvatar size="sm" />
|
||||
<div>
|
||||
<h1 className="text-base font-semibold text-pink-600 dark:text-pink-400">
|
||||
昔涟
|
||||
</h1>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<h1 className="text-base font-semibold text-pink-600 dark:text-pink-400">
|
||||
昔涟
|
||||
</h1>
|
||||
{apiOnline !== null && (
|
||||
<span
|
||||
className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
|
||||
apiOnline ? 'bg-green-400' : 'bg-red-400 animate-pulse'
|
||||
}`}
|
||||
title={apiOnline ? 'API 在线' : 'API 离线'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<MoodIndicator />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useSession } from '@/hooks/useSession';
|
||||
import { useSessionStore } from '@/store/sessionStore';
|
||||
import { usePageStore } from '@/store/pageStore';
|
||||
import { CyreneAvatar } from '@/components/persona/CyreneAvatar';
|
||||
import { exportSession, type ExportFormat } from '@/api/sessions';
|
||||
import type { Session } from '@/types/session';
|
||||
@@ -60,14 +61,15 @@ export function Sidebar({ onClose, onMemoryClick }: SidebarProps) {
|
||||
|
||||
const handleSelectSession = (id: string) => {
|
||||
setCurrentSession(id);
|
||||
usePageStore.getState().goToChat();
|
||||
if (onClose) onClose();
|
||||
};
|
||||
|
||||
const handleMainSession = async () => {
|
||||
// 找到主对话
|
||||
const mainSession = displaySessions.find((s) => s.is_main);
|
||||
if (mainSession) {
|
||||
setCurrentSession(mainSession.id);
|
||||
usePageStore.getState().goToChat();
|
||||
if (onClose) onClose();
|
||||
}
|
||||
};
|
||||
@@ -278,8 +280,25 @@ export function Sidebar({ onClose, onMemoryClick }: SidebarProps) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Admin 管理导航 */}
|
||||
{isAdmin && (
|
||||
<div className="px-3 pt-2 border-t border-pink-100 dark:border-pink-900 space-y-1">
|
||||
<p className="px-1 text-[10px] text-gray-400 uppercase tracking-wider">管理</p>
|
||||
<AdminNavButton page="admin-models" icon="🤖" label="模型配置" />
|
||||
<AdminNavButton page="admin-dashboard" icon="📊" label="仪表盘" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 底部：记忆管理 + 一键清空所有对话 */}
|
||||
<div className="p-3 border-t border-pink-100 dark:border-pink-900 space-y-2">
|
||||
{/* 个人资料 */}
|
||||
<button
|
||||
onClick={() => usePageStore.getState().setPage('profile')}
|
||||
className="w-full flex items-center justify-center gap-1.5 px-3 py-2 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/20 dark:hover:bg-blue-900/30 text-blue-500 hover:text-blue-600 rounded-xl text-xs font-medium transition-colors border border-blue-200 dark:border-blue-800"
|
||||
>
|
||||
<span>👤</span>
|
||||
<span>个人资料</span>
|
||||
</button>
|
||||
{onMemoryClick && (
|
||||
<button
|
||||
onClick={onMemoryClick}
|
||||
@@ -343,3 +362,24 @@ export function Sidebar({ onClose, onMemoryClick }: SidebarProps) {
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
/** Admin 导航按钮 */
|
||||
function AdminNavButton({ page, icon, label }: { page: string; icon: string; label: string }) {
|
||||
const currentPage = usePageStore((s) => s.currentPage);
|
||||
const setPage = usePageStore((s) => s.setPage);
|
||||
const isActive = currentPage === page;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setPage(page as 'admin-models' | 'admin-dashboard')}
|
||||
className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-colors ${
|
||||
isActive
|
||||
? 'bg-pink-50 dark:bg-pink-900/30 text-pink-600'
|
||||
: 'text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span>{icon}</span>
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { request } from '@/api/client';
|
||||
import type { ProfileInfo } from '@/types/admin';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { usePageStore } from '@/store/pageStore';
|
||||
|
||||
export function ProfilePage() {
|
||||
const { logout } = useAuth();
|
||||
const goToChat = usePageStore((s) => s.goToChat);
|
||||
const [profile, setProfile] = useState<ProfileInfo | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
setLoading(true);
|
||||
const res = await request<ProfileInfo>('/profile');
|
||||
if (res.data) setProfile(res.data);
|
||||
else if (res.error) setError(res.error);
|
||||
setLoading(false);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center bg-[#FFFAF5] dark:bg-[#1a1a2e]">
|
||||
<p className="text-sm text-gray-400">加载中...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-[#FFFAF5] dark:bg-[#1a1a2e]">
|
||||
<div className="flex-shrink-0 px-6 py-4 border-b border-pink-100 dark:border-pink-900">
|
||||
<h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200">个人资料</h2>
|
||||
<p className="text-xs text-gray-400 mt-1">账号信息与设置</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{error && (
|
||||
<div className="p-3 mb-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-500">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{profile && (
|
||||
<div className="max-w-md space-y-4">
|
||||
{/* Avatar */}
|
||||
<div className="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900">
|
||||
<div className="w-16 h-16 rounded-full bg-pink-100 dark:bg-pink-900/30 flex items-center justify-center text-2xl">
|
||||
🌸
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
|
||||
{profile.nickname || profile.username}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400">@{profile.username}</p>
|
||||
{profile.is_admin && (
|
||||
<span className="inline-block mt-1 px-2 py-0.5 text-[10px] bg-pink-100 dark:bg-pink-900/30 text-pink-500 rounded-full">
|
||||
管理员
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl border border-pink-100 dark:border-pink-900 space-y-3">
|
||||
<DetailRow label="用户 ID" value={profile.user_id} />
|
||||
<DetailRow label="用户名" value={profile.username} />
|
||||
<DetailRow label="昵称" value={profile.nickname || '-'} />
|
||||
<DetailRow label="账号类型" value={profile.is_admin ? '管理员' : '普通用户'} />
|
||||
<DetailRow label="注册时间" value={new Date(profile.created_at).toLocaleString('zh-CN')} />
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={goToChat}
|
||||
className="flex-1 px-4 py-2.5 bg-pink-50 dark:bg-pink-900/20 hover:bg-pink-100 dark:hover:bg-pink-900/30 text-pink-500 rounded-xl text-sm font-medium transition-colors border border-pink-200 dark:border-pink-800"
|
||||
>
|
||||
返回聊天
|
||||
</button>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="px-4 py-2.5 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 text-red-400 rounded-xl text-sm font-medium transition-colors border border-red-200 dark:border-red-800"
|
||||
>
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-400">{label}</span>
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 font-mono">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -252,6 +252,9 @@ function handleServerMessage(msg: WSServerMessage) {
|
||||
timestamp: msg.timestamp,
|
||||
msgType: (msg.msg_type as MessageDisplayType) || undefined,
|
||||
client_info: msg.client_info,
|
||||
audioUrl: msg.full_audio_url,
|
||||
segments: msg.segments,
|
||||
metadata: msg.tool_calls ? { tool_calls: msg.tool_calls } : undefined,
|
||||
});
|
||||
}
|
||||
setTyping(false);
|
||||
@@ -349,8 +352,19 @@ function handleServerMessage(msg: WSServerMessage) {
|
||||
break;
|
||||
|
||||
case 'stream_segments':
|
||||
// 流式片段 — 语音合成辅助数据，不创建新消息气泡
|
||||
// response/multi_message 已负责创建聊天消息
|
||||
// 流式片段 — 更新最后一条助手消息的 segments 和 full_audio_url
|
||||
if (msg.segments || msg.full_audio_url) {
|
||||
const { messages: currentMsgs } = useChatStore.getState();
|
||||
if (currentMsgs.length > 0) {
|
||||
const lastMsg = currentMsgs[currentMsgs.length - 1];
|
||||
if (lastMsg.role === 'assistant') {
|
||||
const updated = { ...lastMsg };
|
||||
if (msg.segments) updated.segments = msg.segments;
|
||||
if (msg.full_audio_url) updated.audioUrl = msg.full_audio_url;
|
||||
useChatStore.getState().updateMessage(lastMsg.id, updated);
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'device_update':
|
||||
@@ -430,6 +444,7 @@ function handleServerMessage(msg: WSServerMessage) {
|
||||
timestamp: msg.timestamp || Date.now(),
|
||||
msgType: 'tool_progress',
|
||||
isStreaming: false,
|
||||
metadata: { tool_progress: msg.tool_progress },
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
@@ -31,6 +31,7 @@ interface ChatStore {
|
||||
enqueueMessage: (message: Message) => void;
|
||||
/** 当前气泡逐字动画完成后调用：关闭 isStreaming，出队下一个 */
|
||||
onTypewriterDone: (messageId: string) => void;
|
||||
updateMessage: (id: string, updates: Partial<Message>) => void;
|
||||
setMessages: (messages: Message[]) => void;
|
||||
setTyping: (typing: boolean) => void;
|
||||
clearMessages: () => void;
|
||||
@@ -129,6 +130,11 @@ export const useChatStore = create<ChatStore>((set) => ({
|
||||
return { messages: msgs, isTyping: false, messageQueue: queue };
|
||||
}),
|
||||
|
||||
updateMessage: (id, updates) =>
|
||||
set((state) => ({
|
||||
messages: state.messages.map((m) => (m.id === id ? { ...m, ...updates } : m)),
|
||||
})),
|
||||
|
||||
setMessages: (messages) => set({ messages, isTyping: false }),
|
||||
|
||||
setTyping: (typing) => set({ isTyping: typing }),
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
// Admin 相关类型定义
|
||||
|
||||
/** 模型供应商 */
|
||||
export interface ModelProvider {
|
||||
name: string;
|
||||
base_url: string;
|
||||
api_key: string;
|
||||
}
|
||||
|
||||
/** 模型配置 */
|
||||
export interface ModelConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
provider: string;
|
||||
description?: string;
|
||||
priority?: number;
|
||||
tags?: string[];
|
||||
params?: Record<string, unknown>;
|
||||
enabled?: boolean;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
/** 路由规则 */
|
||||
export interface RoutingRule {
|
||||
purpose: string;
|
||||
fallback_chain: string[];
|
||||
required?: boolean;
|
||||
}
|
||||
|
||||
/** 会话状态 */
|
||||
export interface SessionState {
|
||||
session_id: string;
|
||||
user_id: string;
|
||||
title: string;
|
||||
is_main: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
message_count: number;
|
||||
}
|
||||
|
||||
/** 客户端信息 */
|
||||
export interface ClientInfo {
|
||||
client_id: string;
|
||||
device_name?: string;
|
||||
user_agent?: string;
|
||||
note?: string;
|
||||
last_seen?: string;
|
||||
online?: boolean;
|
||||
}
|
||||
|
||||
/** 健康检查结果 */
|
||||
export interface HealthCheckResult {
|
||||
provider: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
/** Profile 信息 */
|
||||
export interface ProfileInfo {
|
||||
user_id: string;
|
||||
username: string;
|
||||
nickname?: string;
|
||||
is_admin: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
/** 模型列表响应 */
|
||||
export interface ModelListResponse {
|
||||
models: ModelConfig[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** 供应商列表响应 */
|
||||
export interface ProviderListResponse {
|
||||
providers: ModelProvider[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** 会话列表响应 (admin) */
|
||||
export interface AdminSessionsResponse {
|
||||
sessions: SessionState[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** 按用户分组的活跃会话 */
|
||||
export interface ActiveSessionsResponse {
|
||||
users: Record<string, SessionState[]>;
|
||||
}
|
||||
|
||||
/** 客户端列表响应 */
|
||||
export interface ClientListResponse {
|
||||
clients: ClientInfo[];
|
||||
total: number;
|
||||
}
|
||||
Reference in New Issue
Block a user