Skip to content

Commit 97e8999

Browse files
PhineasePhinease
authored
Merge pull request #2103 from ModelEngine-Group/xyc/frontend_ui
2 parents 4d848f4 + c08e0dc commit 97e8999

26 files changed

+308
-228
lines changed

‎frontend/app/[locale]/agents/components/McpConfigModal.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ import {
1515
App,
1616
} from "antd";
1717
import {
18-
DeleteOutlined,
19-
EyeOutlined,
20-
PlusOutlined,
21-
LoadingOutlined,
22-
ExpandAltOutlined,
23-
CompressOutlined,
24-
RedoOutlined,
25-
} from "@ant-design/icons";
18+
Trash,
19+
Eye,
20+
Plus,
21+
LoaderCircle,
22+
Maximize,
23+
Minimize,
24+
RefreshCw,
25+
} from "lucide-react";
2626

2727
import { McpConfigModalProps, AgentRefreshEvent } from "@/types/agentConfig";
2828
import {
@@ -299,8 +299,9 @@ export default function McpConfigModal({
299299
}}
300300
>
301301
{healthCheckLoading[key] ? (
302-
<LoadingOutlined
303-
style={{ color: record.status ? "#52c41a" : "#ff4d4f" }}
302+
<LoaderCircle
303+
className="animate-spin"
304+
style={{ color: record.status ? "#52c41a" : "#ff4d4f", width: 16, height: 16 }}
304305
/>
305306
) : null}
306307
</div>
@@ -328,7 +329,7 @@ export default function McpConfigModal({
328329
<Space size="small">
329330
<Button
330331
type="link"
331-
icon={<RedoOutlined />}
332+
icon={<RefreshCw size={16} className={healthCheckLoading[key] ? "animate-spin" : ""} />}
332333
onClick={() => handleCheckHealth(record)}
333334
size="small"
334335
loading={healthCheckLoading[key]}
@@ -339,7 +340,7 @@ export default function McpConfigModal({
339340
{record.status ? (
340341
<Button
341342
type="link"
342-
icon={<EyeOutlined />}
343+
icon={<Eye size={16} />}
343344
onClick={() => handleViewTools(record)}
344345
size="small"
345346
disabled={updatingTools}
@@ -353,7 +354,7 @@ export default function McpConfigModal({
353354
>
354355
<Button
355356
type="link"
356-
icon={<EyeOutlined />}
357+
icon={<Eye size={16} />}
357358
size="small"
358359
disabled
359360
>
@@ -364,7 +365,7 @@ export default function McpConfigModal({
364365
<Button
365366
type="link"
366367
danger
367-
icon={<DeleteOutlined />}
368+
icon={<Trash size={16} />}
368369
onClick={() => handleDeleteServer(record)}
369370
size="small"
370371
disabled={updatingTools}
@@ -406,7 +407,7 @@ export default function McpConfigModal({
406407
<Button
407408
type="link"
408409
size="small"
409-
icon={isExpanded ? <CompressOutlined /> : <ExpandAltOutlined />}
410+
icon={isExpanded ? <Minimize size={16} /> : <Maximize size={16} />}
410411
onClick={() => toggleDescription(record.name)}
411412
style={{ padding: 0, height: "auto" }}
412413
>
@@ -459,7 +460,7 @@ export default function McpConfigModal({
459460
alignItems: "center",
460461
}}
461462
>
462-
<LoadingOutlined style={{ marginRight: 8, color: "#52c41a" }} />
463+
<LoaderCircle className="animate-spin" style={{ marginRight: 8, color: "#52c41a", width: 16, height: 16 }} />
463464
<Text style={{ color: "#52c41a" }}>
464465
{t("mcpConfig.status.updatingToolsHint")}
465466
</Text>
@@ -468,7 +469,6 @@ export default function McpConfigModal({
468469
{/* Add server section */}
469470
<Card size="small" style={{ marginBottom: 16 }}>
470471
<Title level={5} style={{ margin: "0 0 12px 0" }}>
471-
<PlusOutlined style={{ marginRight: 8 }} />
472472
{t("mcpConfig.addServer.title")}
473473
</Title>
474474
<Space direction="vertical" style={{ width: "100%" }}>
@@ -494,9 +494,9 @@ export default function McpConfigModal({
494494
loading={addingServer || updatingTools}
495495
icon={
496496
addingServer || updatingTools ? (
497-
<LoadingOutlined />
497+
<LoaderCircle className="animate-spin" style={{ width: 16, height: 16 }} />
498498
) : (
499-
<PlusOutlined />
499+
<Plus style={{ width: 16, height: 16 }} />
500500
)
501501
}
502502
disabled={updatingTools}
@@ -555,7 +555,7 @@ export default function McpConfigModal({
555555
<div style={{ padding: "0 0 16px 0" }}>
556556
{loadingTools ? (
557557
<div style={{ textAlign: "center", padding: "40px 0" }}>
558-
<LoadingOutlined style={{ fontSize: 24, marginRight: 8 }} />
558+
<LoaderCircle className="animate-spin" style={{ width: 16, height: 16, marginRight: 8, display: "inline-block" }} />
559559
<Text>{t("mcpConfig.toolsList.loading")}</Text>
560560
</div>
561561
) : (

‎frontend/app/[locale]/agents/components/PromptManager.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@
33
import { useState, useRef, useEffect } from "react";
44
import { useTranslation } from "react-i18next";
55
import { Modal, Badge, Input, App, Select } from "antd";
6-
import {
7-
LoadingOutlined,
8-
InfoCircleOutlined,
9-
} from "@ant-design/icons";
10-
import { Zap } from "lucide-react";
6+
import { Zap, LoaderCircle, Info } from "lucide-react";
117

128
import {
139
SimplePromptEditorProps,
@@ -540,16 +536,19 @@ export default function PromptManager({
540536
{/* Non-editing mode overlay */}
541537
{!isEditingMode && (
542538
<div className="absolute inset-0 bg-white bg-opacity-95 flex items-center justify-center z-50 transition-all duration-300 ease-out animate-in fade-in-0">
543-
<div className="text-center space-y-4 animate-in fade-in-50 duration-400 delay-50">
544-
<InfoCircleOutlined className="text-6xl text-gray-400 transition-all duration-300 animate-in zoom-in-75 delay-100" />
545-
<div className="animate-in slide-in-from-bottom-2 duration-300 delay-150">
546-
<h3 className="text-lg font-medium text-gray-700 mb-2 transition-all duration-300">
539+
<div className="space-y-3 animate-in fade-in-50 duration-400 delay-50 text-center">
540+
<div className="flex items-center justify-center gap-3 animate-in slide-in-from-bottom-2 duration-300 delay-150">
541+
<Info
542+
className="text-gray-400 transition-all duration-300 animate-in zoom-in-75 delay-100"
543+
size={48}
544+
/>
545+
<h3 className="text-lg font-medium text-gray-700 transition-all duration-300">
547546
{t("systemPrompt.nonEditing.title")}
548547
</h3>
549-
<p className="text-sm text-gray-500 transition-all duration-300">
550-
{t("systemPrompt.nonEditing.subtitle")}
551-
</p>
552548
</div>
549+
<p className="text-sm text-gray-500 transition-all duration-300">
550+
{t("systemPrompt.nonEditing.subtitle")}
551+
</p>
553552
</div>
554553
</div>
555554
)}
@@ -637,7 +636,7 @@ export default function PromptManager({
637636
className="px-3 py-1.5 rounded-md flex items-center justify-center text-sm bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
638637
style={{ border: "none" }}
639638
>
640-
<LoadingOutlined spin className="mr-1" />
639+
<LoaderCircle className="mr-1 animate-spin" size={16}/>
641640
{t("businessLogic.config.button.generating")}
642641
</button>
643642
) : (
@@ -648,7 +647,7 @@ export default function PromptManager({
648647
style={{ border: "none" }}
649648
>
650649
{loadingModels ? (
651-
<LoadingOutlined className="mr-1" />
650+
<LoaderCircle className="mr-1 animate-spin" size={16}/>
652651
) : (
653652
<Zap size={16} className="mr-1" />
654653
)}

‎frontend/app/[locale]/agents/components/agent/AgentCallRelationshipModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import React, { useState, useEffect, useCallback, useRef } from "react";
44
import { Modal, Spin, message, Typography } from "antd";
5-
import { RobotOutlined, ToolOutlined } from "@ant-design/icons";
5+
import { Bot, Wrench } from "lucide-react";
66
import { useTranslation } from "react-i18next";
77
import Tree from "react-d3-tree";
88

@@ -71,7 +71,7 @@ const CustomNode = ({ nodeDatum }: any) => {
7171
nodeDatum.type === AGENT_CALL_RELATIONSHIP_NODE_TYPES.MAIN ||
7272
nodeDatum.type === AGENT_CALL_RELATIONSHIP_NODE_TYPES.SUB;
7373
const color = getNodeColor(nodeDatum.type, nodeDatum.depth);
74-
const icon = isAgent ? <RobotOutlined /> : <ToolOutlined />;
74+
const icon = isAgent ? <Bot size={16} /> : <Wrench size={16} />;
7575

7676
// Truncate tool names by maximum character count (avoid too long)
7777
const rawName: string = nodeDatum.name || "";

‎frontend/app/[locale]/agents/components/agent/AgentConfigModal.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@
33
import { useState, useEffect, useCallback } from "react";
44
import { useTranslation } from "react-i18next";
55
import { Button, Modal, Spin, Input, Select, InputNumber } from "antd";
6-
import {
7-
LoadingOutlined,
8-
} from "@ant-design/icons";
9-
import { Bug, Save, Maximize2 } from "lucide-react";
6+
import { Bug, Save, Maximize2, LoaderCircle } from "lucide-react";
107

118
import log from "@/lib/logger";
129
import { ModelOption } from "@/types/modelConfig";
@@ -843,7 +840,7 @@ export default function AgentConfigModal({
843840
>
844841
{t("systemPrompt.card.duty.title")}
845842
{isGeneratingAgent && activeSegment === "duty" && (
846-
<LoadingOutlined className="ml-2 text-white" />
843+
<LoaderCircle className="ml-2 text-white animate-spin" size={16} />
847844
)}
848845
</button>
849846
<button
@@ -858,7 +855,7 @@ export default function AgentConfigModal({
858855
>
859856
{t("systemPrompt.card.constraint.title")}
860857
{isGeneratingAgent && activeSegment === "constraint" && (
861-
<LoadingOutlined className="ml-2 text-white" />
858+
<LoaderCircle className="ml-2 text-white animate-spin" size={16} />
862859
)}
863860
</button>
864861
<button
@@ -873,7 +870,7 @@ export default function AgentConfigModal({
873870
>
874871
{t("systemPrompt.card.fewShots.title")}
875872
{isGeneratingAgent && activeSegment === "few-shots" && (
876-
<LoadingOutlined className="ml-2 text-white" />
873+
<LoaderCircle className="ml-2 text-white animate-spin" size={16} />
877874
)}
878875
</button>
879876
</div>

‎frontend/app/[locale]/agents/components/agent/CollaborativeAgentDisplay.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useState, useEffect } from "react";
44
import { useTranslation } from "react-i18next";
55
import { Tag, App } from "antd";
6-
import { PlusOutlined, CloseOutlined } from "@ant-design/icons";
6+
import { Plus, X } from "lucide-react";
77

88
import { CollaborativeAgentDisplayProps } from "@/types/agentConfig";
99

@@ -174,7 +174,7 @@ export default function CollaborativeAgentDisplay({
174174
}`}
175175
title={isEditingMode ? t("collaborativeAgent.button.add") : ""}
176176
>
177-
<PlusOutlined className="text-sm" />
177+
<Plus size={16} />
178178
</button>
179179
{/* Dropdown only renders in editing mode */}
180180
{isEditingMode && renderDropdown()}
@@ -186,7 +186,7 @@ export default function CollaborativeAgentDisplay({
186186
className="flex items-center h-8"
187187
closable={isEditingMode && !isGeneratingAgent}
188188
onClose={() => handleRemoveCollaborativeAgent(Number(agent.id))}
189-
closeIcon={<CloseOutlined className="text-xs" />}
189+
closeIcon={<X size={16} />}
190190
style={{
191191
maxWidth: "200px",
192192
}}

‎frontend/app/[locale]/agents/components/agent/SubAgentPool.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,16 @@ import { useState } from "react";
44
import { useTranslation } from "react-i18next";
55

66
import { Button, Row, Col } from "antd";
7-
import { ExclamationCircleOutlined } from "@ant-design/icons";
8-
import { Copy, FileOutput, Network, FileInput, Trash2, Plus, X } from "lucide-react";
7+
import {
8+
AlertCircle,
9+
Copy,
10+
FileOutput,
11+
Network,
12+
FileInput,
13+
Trash2,
14+
Plus,
15+
X,
16+
} from "lucide-react";
917

1018
import { ScrollArea } from "@/components/ui/scrollArea";
1119
import {
@@ -333,7 +341,7 @@ export default function SubAgentPool({
333341
>
334342
<div className="flex items-center gap-1.5 max-w-full pr-1">
335343
{!isAvailable && (
336-
<ExclamationCircleOutlined className="text-amber-500 text-sm flex-shrink-0" />
344+
<AlertCircle size={16} className="text-amber-500 text-sm flex-shrink-0" />
337345
)}
338346
{displayName && (
339347
<span className="text-base leading-normal max-w-[220px] truncate break-all">

‎frontend/app/[locale]/agents/components/tool/ToolPool.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { useState, useEffect, useMemo, useCallback, memo } from "react";
44
import { useTranslation } from "react-i18next";
55

66
import { Button, App, Tabs, Collapse, Tooltip } from "antd";
7-
import {
8-
SettingOutlined,
9-
LoadingOutlined,
10-
ApiOutlined,
11-
ReloadOutlined,
12-
BulbOutlined,
13-
} from "@ant-design/icons";
7+
import {
8+
LoaderCircle,
9+
Settings,
10+
RefreshCw,
11+
Lightbulb,
12+
Plug,
13+
} from "lucide-react";
1414

1515
import { TOOL_SOURCE_TYPES } from "@/const/agentConfig";
1616
import log from "@/lib/logger";
@@ -524,7 +524,7 @@ function ToolPool({
524524
}`}
525525
style={{ border: "none", padding: "4px" }}
526526
>
527-
<SettingOutlined style={{ fontSize: "16px" }} />
527+
<Settings size={16} />
528528
</button>
529529
</div>
530530
</div>
@@ -658,17 +658,23 @@ function ToolPool({
658658
},
659659
}}
660660
>
661-
<BulbOutlined className="ml-2 text-yellow-500" />
661+
<Lightbulb className="ml-2 text-yellow-500" size={16} />
662662
</Tooltip>
663663
</div>
664664
<div className="flex items-center gap-2">
665665
<Button
666666
type="text"
667667
size="small"
668-
icon={isRefreshing ? <LoadingOutlined /> : <ReloadOutlined />}
668+
icon={
669+
isRefreshing ? (
670+
<LoaderCircle className="animate-spin" size={16} />
671+
) : (
672+
<RefreshCw size={16} />
673+
)
674+
}
669675
onClick={handleRefreshTools}
670676
disabled={localIsGenerating || isRefreshing || isGeneratingAgent}
671-
className="text-green-500 hover:text-green-600 hover:bg-green-50"
677+
className="text-green-500 hover:!text-green-600 hover:!bg-green-50"
672678
title={t("toolManagement.refresh.title")}
673679
>
674680
{isRefreshing
@@ -678,10 +684,10 @@ function ToolPool({
678684
<Button
679685
type="text"
680686
size="small"
681-
icon={<ApiOutlined />}
687+
icon={<Plug size={16} />}
682688
onClick={() => setIsMcpModalOpen(true)}
683689
disabled={localIsGenerating || isGeneratingAgent}
684-
className="text-blue-500 hover:text-blue-600 hover:bg-blue-50"
690+
className="text-blue-500 hover:!text-blue-600 hover:!bg-blue-50"
685691
title={t("toolManagement.mcp.title")}
686692
>
687693
{t("toolManagement.mcp.button")}

‎frontend/app/[locale]/agents/components/tool/ToolTestPanel.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import {
1111
Tooltip,
1212
} from "antd";
1313
import {
14-
CloseOutlined,
15-
SettingOutlined,
16-
EditOutlined,
17-
} from "@ant-design/icons";
14+
Settings,
15+
PenLine,
16+
X,
17+
} from "lucide-react";
1818

1919
import { ToolParam, Tool } from "@/types/agentConfig";
2020
import {
@@ -325,7 +325,7 @@ export default function ToolTestPanel({
325325
</div>
326326
<Button
327327
type="text"
328-
icon={<CloseOutlined />}
328+
icon={< X size={16} />}
329329
onClick={handleClose}
330330
size="small"
331331
/>
@@ -408,9 +408,9 @@ export default function ToolTestPanel({
408408
size="small"
409409
icon={
410410
isManualInputMode ? (
411-
<SettingOutlined />
411+
<Settings size={16} />
412412
) : (
413-
<EditOutlined />
413+
<PenLine size={16} />
414414
)
415415
}
416416
onClick={() => {

0 commit comments

Comments
 (0)