feat(ui): 集成 Provider 管理到 web 和 desktop 应用

- 新增 ProviderEditor 组件用于编辑提供商配置
- ProvidersPanel 添加编辑按钮集成 ProviderEditor
- ChatPage 添加 onOpenProviders 工具栏按钮
- web/desktop App.tsx 集成 ProvidersPanel 面板
This commit is contained in:
2025-12-13 02:01:09 +08:00
parent 6ec6fe2f9f
commit 26e8646518
7 changed files with 627 additions and 4 deletions
+17 -2
View File
@@ -3,7 +3,7 @@
*/
import { useEffect, useRef } from 'react';
import { WifiOff, MessageSquare, Settings, FolderOpen, Terminal, Plug, Zap, Bot, History } from 'lucide-react';
import { WifiOff, MessageSquare, Settings, FolderOpen, Terminal, Plug, Zap, Bot, History, Server } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import {
useChat,
@@ -28,6 +28,7 @@ interface ChatPageProps {
onOpenHooks?: () => void;
onOpenAgents?: () => void;
onOpenCheckpoints?: () => void;
onOpenProviders?: () => void;
}
export function ChatPage({
@@ -43,6 +44,7 @@ export function ChatPage({
onOpenHooks,
onOpenAgents,
onOpenCheckpoints,
onOpenProviders,
}: ChatPageProps) {
const {
messages,
@@ -140,7 +142,7 @@ export function ChatPage({
<ConnectionStatus />
{/* 工具栏按钮 */}
{(onOpenConfig || onToggleFileBrowser || onOpenCommands || onOpenMCP || onOpenHooks || onOpenAgents || onOpenCheckpoints) && (
{(onOpenConfig || onToggleFileBrowser || onOpenCommands || onOpenMCP || onOpenHooks || onOpenAgents || onOpenCheckpoints || onOpenProviders) && (
<div className="flex items-center gap-1.5 border-l border-gray-600 pl-3">
{/* Checkpoints 按钮 */}
{onOpenCheckpoints && (
@@ -155,6 +157,19 @@ export function ChatPage({
</motion.button>
)}
{/* Providers 按钮 */}
{onOpenProviders && (
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
onClick={onOpenProviders}
className="p-1.5 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-700 transition-colors"
title="Model Providers"
>
<Server size={20} />
</motion.button>
)}
{/* Agents 按钮 */}
{onOpenAgents && (
<motion.button