duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add AgentsConfirmDialog component and integrate it into AgentsPage for agent deletion confirmation

Browse Source 
- Implemented AgentsConfirmDialog for confirming agent deletions.
- Updated AgentsPage to manage agent deletion state and feedback messages.
- Refactored provider account loading logic to include channel groups.
- Enhanced feedback mechanism for user actions such as agent creation and deletion.
This commit is contained in:
duanshuwen
2026-04-19 22:10:01 +08:00
parent 3a86539537
commit 3de3629d12
6 changed files with 1079 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/Agents/components/AgentCard.tsx
View File

@@ -1,4 +1,4 @@
import { Bot, Check, SlidersHorizontal } from 'lucide-react';
import { Bot, Check, Settings2, Trash2 } from 'lucide-react';
import type { AgentSummary } from '@runtime/lib/agents';
type AgentCardProps = {
@@ -9,8 +9,10 @@ type AgentCardProps = {
channelsLabel: string;
channelsValue: string;
settingsLabel: string;
deleteLabel: string;
disabled?: boolean;
onOpenSettings: (agent: AgentSummary) => void;
onDelete?: (agent: AgentSummary) => void;
};
export default function AgentCard({
@@ -21,11 +23,13 @@ export default function AgentCard({
channelsLabel,
channelsValue,
settingsLabel,
deleteLabel,
disabled = false,
onOpenSettings,
onDelete,
}: AgentCardProps) {
return (
<article className="rounded-2xl bg-[#F5F7FA] px-7 py-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.5)] dark:bg-[#1f1f22]">
<article className="group rounded-2xl bg-[#F5F7FA] px-7 py-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.5)] dark:bg-[#1f1f22]">
<div className="flex items-center gap-5">
<div className="flex h-20.5 w-20.5 shrink-0 items-center justify-center rounded-full bg-[#E3E0D9] text-[#2E67F8] shadow-[0_6px_18px_rgba(15,23,42,0.08)] dark:bg-[#26262a]">
<Bot className="h-9 w-9 stroke-[1.8]" />
@@ -50,15 +54,29 @@ export default function AgentCard({
</div>
</div>
<button
type="button"
disabled={disabled}
className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-[#6B7CA5] transition-colors hover:bg-white/65 hover:text-[#2E67F8] disabled:cursor-not-allowed disabled:opacity-60 dark:text-gray-400 dark:hover:bg-[#2a2a2d] dark:hover:text-[#8ab4ff]"
aria-label={`${settingsLabel} ${agent.name}`}
onClick={() => onOpenSettings(agent)}
>
<SlidersHorizontal className="h-5 w-5" />
</button>
<div className="flex shrink-0 items-center gap-1">
{!agent.isDefault && onDelete ? (
<button
type="button"
disabled={disabled}
className="flex h-11 w-11 items-center justify-center rounded-full text-[#6B7CA5] opacity-0 transition-all hover:bg-red-50 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-60 group-hover:opacity-100 dark:text-gray-400 dark:hover:bg-red-500/10 dark:hover:text-red-300"
aria-label={`${deleteLabel} ${agent.name}`}
onClick={() => onDelete(agent)}
>
<Trash2 className="h-4.5 w-4.5" />
</button>
) : null}
<button
type="button"
disabled={disabled}
className="flex h-12 w-12 items-center justify-center rounded-full text-[#6B7CA5] transition-colors hover:bg-white/65 hover:text-[#2E67F8] disabled:cursor-not-allowed disabled:opacity-60 dark:text-gray-400 dark:hover:bg-[#2a2a2d] dark:hover:text-[#8ab4ff]"
aria-label={`${settingsLabel} ${agent.name}`}
onClick={() => onOpenSettings(agent)}
>
<Settings2 className="h-5 w-5" />
</button>
</div>
</div>
</article>
);

954
src/pages/Agents/components/AgentSettingsDialog.tsx
View File

File diff suppressed because it is too large Load Diff

81
src/pages/Agents/components/AgentsConfirmDialog.tsx Normal file
View File

@@ -0,0 +1,81 @@
import * as Dialog from '@radix-ui/react-dialog';
type AgentsConfirmDialogProps = {
open: boolean;
busy?: boolean;
title: string;
message: string;
cancelLabel: string;
confirmLabel: string;
onClose: () => void;
onConfirm: () => void;
};
export default function AgentsConfirmDialog({
open,
busy = false,
title,
message,
cancelLabel,
confirmLabel,
onClose,
onConfirm,
}: AgentsConfirmDialogProps) {
function handleOpenChange(nextOpen: boolean) {
if (!nextOpen && !busy) {
onClose();
}
}
return (
<Dialog.Root open={open} onOpenChange={handleOpenChange}>
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-60 bg-black/45 backdrop-blur-[2px]" />
<Dialog.Content
className="fixed left-1/2 top-1/2 z-70 w-[calc(100vw-32px)] max-w-126 -translate-x-1/2 -translate-y-1/2 rounded-3xl bg-[#F4F3EB] p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
onEscapeKeyDown={(event) => {
if (busy) {
event.preventDefault();
}
}}
onPointerDownOutside={(event) => {
if (busy) {
event.preventDefault();
}
}}
>
<div className="border-b border-black/6 px-6 py-5 dark:border-white/6">
<Dialog.Title
className="text-[26px] font-normal leading-none tracking-tight text-[#171717] dark:text-[#f3f4f6]"
style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
>
{title}
</Dialog.Title>
<Dialog.Description className="mt-3 text-[14px] leading-6 text-[#525866] dark:text-gray-400">
{message}
</Dialog.Description>
</div>
<div className="flex items-center justify-end gap-3 px-6 py-5">
<button
type="button"
className="inline-flex h-10 items-center rounded-full border border-black/10 px-4 text-[13px] font-medium text-[#171717]/80 transition-colors hover:bg-black/5 hover:text-[#171717] disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-[#f3f4f6]"
onClick={onClose}
disabled={busy}
>
{cancelLabel}
</button>
<button
type="button"
className="inline-flex h-10 items-center rounded-full bg-[#7E9DF5] px-4 text-[13px] font-medium text-white transition-colors hover:bg-[#6E90F3] disabled:cursor-not-allowed disabled:opacity-60"
onClick={onConfirm}
disabled={busy}
>
{confirmLabel}
</button>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
}

293
src/pages/Agents/index.tsx
View File

@@ -1,15 +1,17 @@
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { AlertCircle, Plus, RefreshCw } from 'lucide-react';
import type { AgentSummary } from '@runtime/lib/agents';
import type { ProviderAccount } from '@runtime/lib/providers';
import { useNavigate } from 'react-router-dom';
import { useI18n } from '../../i18n';
import { onGatewayEvent } from '../../lib/gateway-client';
import { hostApiFetch } from '../../lib/host-api';
import type { ChannelAccountCatalogGroup, ChannelAccountsCatalogResponse } from '../../lib/channel-types';
import type { ProviderVendorInfo, ProviderWithKeyInfo } from '../../lib/providers';
import { isRuntimeChangedGatewayEvent, runtimeEventHasTopic } from '../../lib/runtime-events';
import { agentsStore, useAgentsStore } from '../../stores';
import AddAgentDialog from './components/AddAgentDialog';
import AgentCard from './components/AgentCard';
import AgentsConfirmDialog from './components/AgentsConfirmDialog';
import AgentSettingsDialog from './components/AgentSettingsDialog';
function interpolateFallback(template: string, params?: Record<string, string | number>): string {
@@ -34,10 +36,6 @@ function formatChannelLabel(channelType: string): string {
.join(' ');
}
function countAccountBindings(agentId: string, channelAccountOwners: Record<string, string>): number {
return Object.values(channelAccountOwners).filter((ownerId) => ownerId === agentId).length;
}
function getAgentModelValue(
agent: AgentSummary,
defaultModelRef: string | null,
@@ -67,8 +65,14 @@ function Spinner() {
);
}
type FeedbackTone = 'success' | 'error' | 'info';
type FeedbackState = {
id: number;
tone: FeedbackTone;
message: string;
} | null;
export default function AgentsPage() {
const navigate = useNavigate();
const { t, hasMessage } = useI18n();
const initialized = useAgentsStore((state) => state.initialized);
const loading = useAgentsStore((state) => state.loading);
@@ -77,14 +81,20 @@ export default function AgentsPage() {
const agents = useAgentsStore((state) => state.agents);
const defaultProviderAccountId = useAgentsStore((state) => state.defaultProviderAccountId);
const defaultModelRef = useAgentsStore((state) => state.defaultModelRef);
const channelAccountOwners = useAgentsStore((state) => state.channelAccountOwners);
const feedbackTimerRef = useRef<number | null>(null);
const [feedback, setFeedback] = useState<FeedbackState>(null);
const [busyAction, setBusyAction] = useState<string | null>(null);
const [addDialogOpen, setAddDialogOpen] = useState(false);
const [settingsAgentId, setSettingsAgentId] = useState<string | null>(null);
const [agentToDelete, setAgentToDelete] = useState<AgentSummary | null>(null);
const [providerAccounts, setProviderAccounts] = useState<ProviderAccount[]>([]);
const [providerStatuses, setProviderStatuses] = useState<ProviderWithKeyInfo[]>([]);
const [providerVendors, setProviderVendors] = useState<ProviderVendorInfo[]>([]);
const [providerLoading, setProviderLoading] = useState(false);
const [providerError, setProviderError] = useState<string | null>(null);
const [channelGroups, setChannelGroups] = useState<ChannelAccountCatalogGroup[]>([]);
const [channelLoading, setChannelLoading] = useState(false);
const message = (path: string, fallback: string, params?: Record<string, string | number>) => (
hasMessage(path)
@@ -92,19 +102,47 @@ export default function AgentsPage() {
: interpolateFallback(fallback, params)
);
function pushFeedback(nextMessage: string, tone: FeedbackTone = 'info') {
const nextFeedback = { id: Date.now(), tone, message: nextMessage };
setFeedback(nextFeedback);
if (feedbackTimerRef.current) {
window.clearTimeout(feedbackTimerRef.current);
}
feedbackTimerRef.current = window.setTimeout(() => {
setFeedback((current) => (current?.id === nextFeedback.id ? null : current));
}, 3600);
}
useEffect(() => {
return () => {
if (feedbackTimerRef.current) {
window.clearTimeout(feedbackTimerRef.current);
}
};
}, []);
useEffect(() => {
void agentsStore.init();
}, []);
useEffect(() => {
void loadProviderAccounts();
void Promise.allSettled([
loadProviderCatalog(),
loadChannelGroups(),
]);
}, []);
useEffect(() => (
onGatewayEvent((event) => {
if (!isRuntimeChangedGatewayEvent(event)) return;
if (!runtimeEventHasTopic(event, 'providers', 'models', 'agents')) return;
void loadProviderAccounts(false);
if (!runtimeEventHasTopic(event, 'providers', 'models', 'agents', 'channels')) return;
void Promise.allSettled([
loadProviderCatalog(false),
loadChannelGroups(false),
]);
})
), []);
@@ -122,25 +160,29 @@ export default function AgentsPage() {
[settingsAgentId, sortedAgents],
);
const mainAgent = useMemo(
() => sortedAgents.find((agent) => agent.isDefault) ?? null,
[sortedAgents],
);
const isBusy = busyAction !== null;
const isInitialLoading = loading && !initialized;
async function loadProviderAccounts(showLoading = true): Promise<void> {
async function loadProviderCatalog(showLoading = true): Promise<void> {
if (showLoading) {
setProviderLoading(true);
}
setProviderError(null);
try {
const accounts = await hostApiFetch<ProviderAccount[]>('/api/provider-accounts');
const [accounts, statuses, vendors] = await Promise.all([
hostApiFetch<ProviderAccount[]>('/api/provider-accounts'),
hostApiFetch<ProviderWithKeyInfo[]>('/api/providers'),
hostApiFetch<ProviderVendorInfo[]>('/api/provider-vendors'),
]);
setProviderAccounts(Array.isArray(accounts) ? accounts.filter((account) => account?.enabled !== false) : []);
setProviderStatuses(Array.isArray(statuses) ? statuses : []);
setProviderVendors(Array.isArray(vendors) ? vendors : []);
} catch (requestError) {
setProviderAccounts([]);
setProviderStatuses([]);
setProviderVendors([]);
setProviderError(requestError instanceof Error ? requestError.message : String(requestError));
} finally {
if (showLoading) {
@@ -149,10 +191,30 @@ export default function AgentsPage() {
}
}
async function loadChannelGroups(showLoading = true): Promise<void> {
if (showLoading) {
setChannelLoading(true);
}
try {
const response = await hostApiFetch<ChannelAccountsCatalogResponse>('/api/channels/accounts');
setChannelGroups(Array.isArray(response.channels) ? response.channels : []);
} catch {
if (showLoading) {
setChannelGroups([]);
}
} finally {
if (showLoading) {
setChannelLoading(false);
}
}
}
async function handleRefresh(): Promise<void> {
await Promise.allSettled([
agentsStore.refresh(),
loadProviderAccounts(),
loadProviderCatalog(),
loadChannelGroups(),
]);
}
@@ -161,52 +223,36 @@ export default function AgentsPage() {
try {
await agentsStore.createAgent(input.name, { inheritWorkspace: input.inheritWorkspace });
setAddDialogOpen(false);
pushFeedback(message('agents.feedback.created', 'Agent 已创建。'), 'success');
} catch (createError) {
pushFeedback(
message('agents.feedback.createFailed', '创建 Agent 失败：{error}', {
error: createError instanceof Error ? createError.message : String(createError),
}),
'error',
);
} finally {
setBusyAction(null);
}
}
async function handleSaveSettings(input: { name: string; providerAccountId: string | null; modelRef: string | null }): Promise<void> {
if (!settingsAgent || settingsAgent.isDefault) {
setSettingsAgentId(null);
return;
}
async function handleConfirmDeleteAgent(): Promise<void> {
if (!agentToDelete) return;
setBusyAction(`save:${settingsAgent.id}`);
const deletingAgent = agentToDelete;
setBusyAction(`delete:${deletingAgent.id}`);
try {
if (input.name.trim() && input.name.trim() !== settingsAgent.name) {
await agentsStore.updateAgent(settingsAgent.id, input.name.trim());
}
if (
input.providerAccountId !== (settingsAgent.providerAccountId ?? null)
|| input.modelRef !== (settingsAgent.overrideModelRef ?? null)
) {
await agentsStore.updateAgentModel(settingsAgent.id, input.modelRef, {
providerAccountId: input.providerAccountId,
});
}
setSettingsAgentId(null);
} finally {
setBusyAction(null);
}
}
async function handleDeleteAgent(agent: AgentSummary): Promise<void> {
const confirmed = window.confirm(
message(
'agents.prompts.deleteConfirm',
'确定删除 Agent “{name}”吗？已有会话记录会保留在磁盘上，但它会从 Agents 控制台中移除。',
{ name: agent.name },
),
);
if (!confirmed) return;
setBusyAction(`delete:${agent.id}`);
try {
await agentsStore.deleteAgent(agent.id);
setSettingsAgentId((current) => (current === agent.id ? null : current));
await agentsStore.deleteAgent(deletingAgent.id);
setSettingsAgentId((current) => (current === deletingAgent.id ? null : current));
setAgentToDelete(null);
pushFeedback(message('agents.feedback.deleted', 'Agent 已删除。'), 'success');
} catch (deleteError) {
pushFeedback(
message('agents.feedback.deleteFailed', '删除 Agent 失败：{error}', {
error: deleteError instanceof Error ? deleteError.message : String(deleteError),
}),
'error',
);
} finally {
setBusyAction(null);
}
@@ -232,6 +278,7 @@ export default function AgentsPage() {
modelLabel: message('agents.card.modelLabel', 'Model'),
channelsLabel: message('agents.fields.channels', '频道'),
settingsLabel: message('agents.actions.settings', '设置'),
deleteLabel: message('agents.actions.delete', '删除'),
emptyTitle: message('agents.emptyTitle', '暂无 Agent'),
emptyDescription: message('agents.emptyDescription', '创建新的 Agent 后，这里会显示对应的卡片摘要。'),
notConfigured: message('agents.card.missingModel', 'Not configured'),
@@ -247,39 +294,50 @@ export default function AgentsPage() {
savingLabel: message('agents.createDialog.savingLabel', '保存中...'),
},
settingsDialog: {
title: message('agents.settings.title', 'Agent 设置'),
subtitle: settingsAgent
? message('agents.settings.description', '查看并调整 {name} 的基础信息、模型路由和频道归属摘要。', { name: settingsAgent.name })
: '',
identityTitle: message('agents.settings.identityTitle', '基础信息'),
title: settingsAgent
? message('agents.settings.titleWithName', '{name} 设置', { name: settingsAgent.name })
: message('agents.settings.title', 'Agent 设置'),
description: message('agents.settings.description', '更新 Agent 名称，并管理哪些频道归属于这个 Agent。'),
nameLabel: message('agents.settings.nameLabel', 'Agent 名称'),
agentIdLabel: message('agents.settings.agentIdLabel', 'Agent ID'),
workspaceTitle: message('agents.settings.workspaceTitle', '工作区'),
workspaceDescription: message('agents.settings.workspaceDescription', '查看当前 Agent 的工作区路径，以及是否继承主 Agent 工作区。'),
workspaceLabel: message('agents.fields.workspace', '工作区'),
inheritedWorkspaceLabel: message('agents.settings.inheritedWorkspaceLabel', '继承主 Agent 工作区'),
inheritedWorkspaceYes: message('agents.settings.inheritedWorkspaceYes', '是'),
inheritedWorkspaceNo: message('agents.settings.inheritedWorkspaceNo', '否'),
modelTitle: message('agents.settings.modelTitle', '模型'),
providerAccountLabel: message('agents.settings.providerAccountLabel', 'Provider 账号'),
useDefaultProvider: message('agents.settings.useDefaultProvider', '使用工作区默认 Provider'),
modelRefLabel: message('agents.settings.modelRefLabel', '模型覆盖'),
modelRefPlaceholder: message('agents.settings.modelRefPlaceholder', 'provider/model-id'),
effectiveProviderLabel: message('agents.settings.effectiveProviderLabel', '生效中的 Provider'),
effectiveModelLabel: message('agents.settings.effectiveModelLabel', '生效中的模型'),
modelHelp: message('agents.settings.modelHelp', '留空后会跟随所选 Provider 的模型；如果没有固定 Provider，则继续继承工作区默认模型。'),
managedFromModels: message('agents.settings.managedFromModels', 'Main Agent 使用 Models 页面里配置的 Provider 和默认模型。'),
openModelsLabel: message('agents.settings.openModels', '前往 Models'),
channelsTitle: message('agents.settings.bindingTitle', '频道归属'),
channelSummaryLabel: message('agents.settings.channelSummaryLabel', '频道路由摘要'),
accountBindingsLabel: message('agents.settings.accountBindingsLabel', '账号绑定数'),
noChannels: message('agents.card.noChannels', '无'),
openChannelsLabel: message('agents.settings.manageBindings', '前往 Channels'),
providerLoadErrorPrefix: message('agents.settings.providerLoadErrorPrefix', '加载 Provider 账号失败：'),
cancelLabel: message('dialog.cancel', '取消'),
saveLabel: message('agents.settings.save', '保存'),
savingLabel: message('agents.settings.saving', '保存中...'),
deleteLabel: message('agents.actions.delete', '删除'),
closeLabel: message('agents.settings.closeLabel', '关闭弹窗'),
agentIdLabel: message('agents.settings.agentIdLabel', 'Agent ID'),
modelLabel: message('agents.settings.modelLabel', 'Model'),
notConfigured: message('agents.settings.notConfigured', 'Not configured'),
inherited: message('agents.inherited', 'Inherited'),
channelsTitle: message('agents.settings.channelsTitle', '频道'),
channelsDescription: message('agents.settings.channelsDescription', '该列表为只读。频道账号与绑定关系请在 Channels 页面管理。'),
noChannels: message('agents.settings.noChannels', '这个 Agent 还没有分配任何频道。'),
channelsManagedInChannels: message('agents.settings.channelsManagedInChannels', '该 Agent 当前没有显式账号归属。频道级归属请前往 Channels 页面查看。'),
mainAccount: message('agents.settings.mainAccount', '主账号'),
cancelLabel: message('dialog.cancel', '取消'),
unsavedChangesTitle: message('agents.settings.unsavedChangesTitle', '放弃未保存的更改？'),
unsavedChangesMessage: message('agents.settings.unsavedChangesMessage', '当前有尚未保存的修改。关闭后这些修改将丢失。'),
closeWithoutSaving: message('agents.settings.closeWithoutSaving', '直接关闭'),
modelOverrideDescription: message('agents.settings.modelOverrideDescription', '更新这个 Agent 的模型覆盖设置。当前默认模型：{defaultModel}'),
modelProviderLabel: message('agents.settings.modelProviderLabel', '模型 Provider'),
modelProviderPlaceholder: message('agents.settings.modelProviderPlaceholder', '请选择 Provider'),
modelIdLabel: message('agents.settings.modelIdLabel', '模型 ID'),
modelIdPlaceholder: message('agents.settings.modelIdPlaceholder', 'gpt-5.4'),
modelPreview: message('agents.settings.modelPreview', '模型预览'),
modelProviderEmpty: message('agents.settings.modelProviderEmpty', '当前没有可用于模型配置的 Provider。请先在 Models 页面完成账号配置。'),
useDefaultModel: message('agents.settings.useDefaultModel', '使用默认模型'),
modelProviderRequired: message('agents.settings.modelProviderRequired', '请选择一个 Provider。'),
modelIdRequired: message('agents.settings.modelIdRequired', '请输入模型 ID。'),
modelInvalid: message('agents.settings.modelInvalid', '模型配置格式不正确。'),
nameSaved: message('agents.feedback.agentUpdated', 'Agent 名称已更新。'),
nameSaveFailedPrefix: message('agents.feedback.agentUpdateFailedPrefix', '更新 Agent 名称失败：'),
modelSaved: message('agents.feedback.agentModelUpdated', 'Agent 模型已更新。'),
modelReset: message('agents.feedback.agentModelReset', 'Agent 已恢复默认模型。'),
modelSaveFailedPrefix: message('agents.feedback.agentModelUpdateFailedPrefix', '更新 Agent 模型失败：'),
},
deleteDialog: {
title: message('agents.deleteDialog.title', '删除 Agent'),
message: agentToDelete
? message('agents.deleteDialog.message', '确定删除 Agent “{name}”吗？现有聊天记录仍会保留在磁盘中。', { name: agentToDelete.name })
: '',
confirmLabel: busyAction && agentToDelete ? message('agents.deleteDialog.deleting', '删除中...') : message('agents.deleteDialog.confirm', '确认删除'),
},
};
@@ -303,19 +361,19 @@ export default function AgentsPage() {
<button
type="button"
disabled={isBusy}
className="inline-flex px-4 py-2 items-center gap-3 rounded-full border border-black/12 bg-white/50 text-[18px] font-medium text-[#2E3445] transition-colors hover:bg-white/80 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#222225] dark:text-gray-200 dark:hover:bg-[#2a2a2d]"
className="inline-flex items-center gap-3 rounded-full border border-black/12 bg-white/50 px-4 py-2 text-[18px] font-medium text-[#2E3445] transition-colors hover:bg-white/80 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#222225] dark:text-gray-200 dark:hover:bg-[#2a2a2d]"
onClick={() => {
void handleRefresh();
}}
>
<RefreshCw className={['h-5 w-5', (loading || providerLoading) ? 'animate-spin' : ''].join(' ')} />
<RefreshCw className={['h-5 w-5', (loading || providerLoading || channelLoading) ? 'animate-spin' : ''].join(' ')} />
{pageCopy.refresh}
</button>
<button
type="button"
disabled={isBusy}
className="inline-flex px-4 py-2 items-center gap-3 rounded-full bg-[#2E67F8] text-[18px] font-semibold text-white transition-colors hover:bg-[#2458E0] disabled:cursor-not-allowed disabled:opacity-60"
className="inline-flex items-center gap-3 rounded-full bg-[#2E67F8] px-4 py-2 text-[18px] font-semibold text-white transition-colors hover:bg-[#2458E0] disabled:cursor-not-allowed disabled:opacity-60"
onClick={() => {
setAddDialogOpen(true);
}}
@@ -327,6 +385,19 @@ export default function AgentsPage() {
</div>
<div className="mt-10 space-y-4">
{feedback ? (
<div
className={[
'rounded-3xl border px-5 py-4 text-[15px]',
feedback.tone === 'success' ? 'border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300' : '',
feedback.tone === 'error' ? 'border-red-500/25 bg-red-500/10 text-red-700 dark:text-red-300' : '',
feedback.tone === 'info' ? 'border-black/10 bg-white text-[#525866] dark:border-gray-700 dark:bg-[#222225] dark:text-gray-300' : '',
].join(' ')}
>
{feedback.message}
</div>
) : null}
{warning ? (
<div className="rounded-3xl border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
<div className="flex items-start gap-3">
@@ -349,7 +420,7 @@ export default function AgentsPage() {
<div className="rounded-3xl border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
<div className="flex items-start gap-3">
<AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
<span>{`${pageCopy.settingsDialog.providerLoadErrorPrefix}${providerError}`}</span>
<span>{`${message('agents.settings.providerLoadErrorPrefix', '加载 Provider 账号失败：')}${providerError}`}</span>
</div>
</div>
) : null}
@@ -376,8 +447,10 @@ export default function AgentsPage() {
channelsLabel={pageCopy.channelsLabel}
channelsValue={getAgentChannelsValue(agent, pageCopy.none)}
settingsLabel={pageCopy.settingsLabel}
deleteLabel={pageCopy.deleteLabel}
disabled={isBusy}
onOpenSettings={(targetAgent) => setSettingsAgentId(targetAgent.id)}
onDelete={agent.isDefault ? undefined : (targetAgent) => setAgentToDelete(targetAgent)}
/>
))
)}
@@ -399,26 +472,34 @@ export default function AgentsPage() {
<AgentSettingsDialog
open={Boolean(settingsAgent)}
agent={settingsAgent}
channelGroups={channelGroups}
providerAccounts={providerAccounts}
providerLoading={providerLoading}
providerError={providerError}
defaultProviderAccountId={defaultProviderAccountId}
providerStatuses={providerStatuses}
providerVendors={providerVendors}
providerDefaultAccountId={defaultProviderAccountId}
defaultModelRef={defaultModelRef}
mainWorkspacePath={mainAgent?.workspace ?? null}
channelSummary={settingsAgent ? getAgentChannelsValue(settingsAgent, pageCopy.none) : pageCopy.none}
accountBindingCount={settingsAgent ? countAccountBindings(settingsAgent.id, channelAccountOwners) : 0}
saving={Boolean(settingsAgent && busyAction === `save:${settingsAgent.id}`)}
deleting={Boolean(settingsAgent && busyAction === `delete:${settingsAgent.id}`)}
copy={pageCopy.settingsDialog}
onClose={() => setSettingsAgentId(null)}
onUpdateName={(agentId, name) => agentsStore.updateAgent(agentId, name)}
onUpdateModel={(agentId, modelRef) => agentsStore.updateAgentModel(agentId, modelRef)}
onFeedback={pushFeedback}
/>
<AgentsConfirmDialog
open={!!agentToDelete}
busy={Boolean(agentToDelete && busyAction === `delete:${agentToDelete.id}`)}
title={pageCopy.deleteDialog.title}
message={pageCopy.deleteDialog.message}
cancelLabel={message('dialog.cancel', '取消')}
confirmLabel={pageCopy.deleteDialog.confirmLabel}
onClose={() => {
if (!isBusy) {
setSettingsAgentId(null);
if (!busyAction) {
setAgentToDelete(null);
}
}}
onSave={handleSaveSettings}
onDelete={handleDeleteAgent}
onOpenChannels={() => navigate('/channels')}
onOpenModels={() => navigate('/models')}
onConfirm={() => {
void handleConfirmDeleteAgent();
}}
/>
</section>
);