Skip to content

Commit ef88e11

Browse files
PhineasePhinease
authored
Merge pull request #2004 from ModelEngine-Group/csr-1204
2 parents 8988b80 + 219880b commit ef88e11

File tree

11 files changed

+417
-70
lines changed

11 files changed

+417
-70
lines changed

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

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@ export default function SubAgentPool({
288288
const isCurrentlyEditing =
289289
editingAgent &&
290290
String(editingAgent.id) === String(agent.id); // Ensure type matching
291+
const displayName = agent.display_name || agent.name;
291292

292293
const agentItem = (
293294
<div
@@ -322,24 +323,15 @@ export default function SubAgentPool({
322323
!isAvailable ? "text-gray-500" : ""
323324
}`}
324325
>
325-
<div className="flex items-center gap-1.5">
326+
<div className="flex items-center gap-1.5 max-w-full pr-1">
326327
{!isAvailable && (
327328
<ExclamationCircleOutlined className="text-amber-500 text-sm flex-shrink-0" />
328329
)}
329-
{agent.display_name && (
330-
<span className="text-base leading-normal">
331-
{agent.display_name}
330+
{displayName && (
331+
<span className="text-base leading-normal max-w-[220px] truncate break-all">
332+
{displayName}
332333
</span>
333334
)}
334-
<span
335-
className={`leading-normal ${
336-
agent.display_name
337-
? "ml-2 text-sm"
338-
: "text-base"
339-
}`}
340-
>
341-
{agent.name}
342-
</span>
343335
{unsavedAgentId !== null &&
344336
String(unsavedAgentId) === String(agent.id) && (
345337
<span
@@ -351,7 +343,7 @@ export default function SubAgentPool({
351343
</div>
352344
</div>
353345
<div
354-
className={`text-xs transition-colors duration-300 leading-[1.25] agent-description ${
346+
className={`text-xs transition-colors duration-300 leading-[1.25] agent-description break-words ${
355347
!isAvailable ? "text-gray-400" : "text-gray-500"
356348
}`}
357349
>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -722,7 +722,7 @@ export default function ToolConfigModal({
722722
<Tooltip
723723
title={param.description}
724724
placement="topLeft"
725-
overlayStyle={{ maxWidth: 400 }}
725+
styles={{ root: { maxWidth: 400 } }}
726726
>
727727
<Input
728728
placeholder={param.description || param.name}
@@ -895,7 +895,7 @@ export default function ToolConfigModal({
895895
<Tooltip
896896
title={description}
897897
placement="topLeft"
898-
overlayStyle={{ maxWidth: 400 }}
898+
styles={{ root: { maxWidth: 400 } }}
899899
>
900900
<Input
901901
placeholder={description}

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

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -584,36 +584,34 @@ function ToolPool({
584584
ghost
585585
size="small"
586586
className="tool-categories-collapse mt-1"
587-
>
588-
{group.subGroups.map((subGroup, index) => (
589-
<Collapse.Panel
590-
key={subGroup.key}
591-
header={
592-
<span
593-
className="text-gray-700 font-medium"
594-
style={{
595-
paddingTop: "8px",
596-
paddingBottom: "8px",
597-
display: "block",
598-
minHeight: "36px",
599-
lineHeight: "20px",
600-
}}
601-
>
602-
{subGroup.label}
603-
</span>
604-
}
605-
className={`tool-category-panel ${
606-
index === 0 ? "mt-1" : "mt-3"
607-
}`}
608-
>
587+
items={group.subGroups.map((subGroup, index) => ({
588+
key: subGroup.key,
589+
label: (
590+
<span
591+
className="text-gray-700 font-medium"
592+
style={{
593+
paddingTop: "8px",
594+
paddingBottom: "8px",
595+
display: "block",
596+
minHeight: "36px",
597+
lineHeight: "20px",
598+
}}
599+
>
600+
{subGroup.label}
601+
</span>
602+
),
603+
className: `tool-category-panel ${
604+
index === 0 ? "mt-1" : "mt-3"
605+
}`,
606+
children: (
609607
<div className="space-y-3 pt-3">
610608
{subGroup.tools.map((tool) => (
611609
<ToolItem key={tool.id} tool={tool} />
612610
))}
613611
</div>
614-
</Collapse.Panel>
615-
))}
616-
</Collapse>
612+
),
613+
}))}
614+
/>
617615
</div>
618616
</>
619617
) : (

‎frontend/app/[locale]/mcp-tools/McpToolsContent.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
"use client";
2+
3+
import React from "react";
4+
import { motion } from "framer-motion";
5+
import { useTranslation } from "react-i18next";
6+
import { Puzzle } from "lucide-react";
7+
8+
import { useSetupFlow } from "@/hooks/useSetupFlow";
9+
import { ConnectionStatus } from "@/const/modelConfig";
10+
11+
interface McpToolsContentProps {
12+
/** Connection status */
13+
connectionStatus?: ConnectionStatus;
14+
/** Is checking connection */
15+
isCheckingConnection?: boolean;
16+
/** Check connection callback */
17+
onCheckConnection?: () => void;
18+
/** Callback to expose connection status */
19+
onConnectionStatusChange?: (status: ConnectionStatus) => void;
20+
}
21+
22+
/**
23+
* McpToolsContent - MCP tools management coming soon page
24+
* This will allow admins to manage MCP servers and tools
25+
*/
26+
export default function McpToolsContent({
27+
connectionStatus: externalConnectionStatus,
28+
isCheckingConnection: externalIsCheckingConnection,
29+
onCheckConnection: externalOnCheckConnection,
30+
onConnectionStatusChange,
31+
}: McpToolsContentProps) {
32+
const { t } = useTranslation("common");
33+
34+
// Use custom hook for common setup flow logic
35+
const { canAccessProtectedData, pageVariants, pageTransition } = useSetupFlow({
36+
requireAdmin: true,
37+
externalConnectionStatus,
38+
externalIsCheckingConnection,
39+
onCheckConnection: externalOnCheckConnection,
40+
onConnectionStatusChange,
41+
});
42+
43+
return (
44+
<>
45+
{canAccessProtectedData ? (
46+
<motion.div
47+
initial="initial"
48+
animate="in"
49+
exit="out"
50+
variants={pageVariants}
51+
transition={pageTransition}
52+
className="w-full h-full flex items-center justify-center"
53+
>
54+
<div className="flex flex-col items-center justify-center space-y-6 p-8 max-w-md text-center">
55+
{/* Icon */}
56+
<motion.div
57+
initial={{ scale: 0 }}
58+
animate={{ scale: 1 }}
59+
transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
60+
className="w-24 h-24 rounded-full bg-gradient-to-br from-sky-500 to-indigo-600 flex items-center justify-center shadow-lg"
61+
>
62+
<Puzzle className="h-12 w-12 text-white" />
63+
</motion.div>
64+
65+
{/* Title */}
66+
<motion.h1
67+
initial={{ opacity: 0, y: 20 }}
68+
animate={{ opacity: 1, y: 0 }}
69+
transition={{ delay: 0.3 }}
70+
className="text-3xl font-bold text-slate-800 dark:text-slate-100"
71+
>
72+
{t("mcpTools.comingSoon.title")}
73+
</motion.h1>
74+
75+
{/* Description */}
76+
<motion.p
77+
initial={{ opacity: 0, y: 20 }}
78+
animate={{ opacity: 1, y: 0 }}
79+
transition={{ delay: 0.4 }}
80+
className="text-lg text-slate-600 dark:text-slate-400"
81+
>
82+
{t("mcpTools.comingSoon.description")}
83+
</motion.p>
84+
85+
{/* Feature list */}
86+
<motion.ul
87+
initial={{ opacity: 0, y: 20 }}
88+
animate={{ opacity: 1, y: 0 }}
89+
transition={{ delay: 0.5 }}
90+
className="text-left space-y-2 w-full"
91+
>
92+
<li className="flex items-start space-x-2">
93+
<span className="text-sky-500 mt-1">✓</span>
94+
<span className="text-slate-600 dark:text-slate-400">
95+
{t("mcpTools.comingSoon.feature1")}
96+
</span>
97+
</li>
98+
<li className="flex items-start space-x-2">
99+
<span className="text-sky-500 mt-1">✓</span>
100+
<span className="text-slate-600 dark:text-slate-400">
101+
{t("mcpTools.comingSoon.feature2")}
102+
</span>
103+
</li>
104+
<li className="flex items-start space-x-2">
105+
<span className="text-sky-500 mt-1">✓</span>
106+
<span className="text-slate-600 dark:text-slate-400">
107+
{t("mcpTools.comingSoon.feature3")}
108+
</span>
109+
</li>
110+
</motion.ul>
111+
112+
{/* Coming soon badge */}
113+
<motion.div
114+
initial={{ opacity: 0, scale: 0.8 }}
115+
animate={{ opacity: 1, scale: 1 }}
116+
transition={{ delay: 0.6 }}
117+
className="px-4 py-2 bg-gradient-to-r from-sky-500 to-indigo-600 text-white rounded-full text-sm font-medium shadow-md"
118+
>
119+
{t("mcpTools.comingSoon.badge")}
120+
</motion.div>
121+
</div>
122+
</motion.div>
123+
) : null}
124+
</>
125+
);
126+
}
127+
128+

‎frontend/app/[locale]/monitoring/MonitoringContent.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
"use client";
2+
3+
import React from "react";
4+
import { motion } from "framer-motion";
5+
import { useTranslation } from "react-i18next";
6+
import { Activity } from "lucide-react";
7+
8+
import { useSetupFlow } from "@/hooks/useSetupFlow";
9+
import { ConnectionStatus } from "@/const/modelConfig";
10+
11+
interface MonitoringContentProps {
12+
/** Connection status */
13+
connectionStatus?: ConnectionStatus;
14+
/** Is checking connection */
15+
isCheckingConnection?: boolean;
16+
/** Check connection callback */
17+
onCheckConnection?: () => void;
18+
/** Callback to expose connection status */
19+
onConnectionStatusChange?: (status: ConnectionStatus) => void;
20+
}
21+
22+
/**
23+
* MonitoringContent - Agent monitoring and operations coming soon page
24+
* This will allow admins to monitor and operate agents (health, logs, alerts)
25+
*/
26+
export default function MonitoringContent({
27+
connectionStatus: externalConnectionStatus,
28+
isCheckingConnection: externalIsCheckingConnection,
29+
onCheckConnection: externalOnCheckConnection,
30+
onConnectionStatusChange,
31+
}: MonitoringContentProps) {
32+
const { t } = useTranslation("common");
33+
34+
// Use custom hook for common setup flow logic
35+
const { canAccessProtectedData, pageVariants, pageTransition } = useSetupFlow({
36+
requireAdmin: true,
37+
externalConnectionStatus,
38+
externalIsCheckingConnection,
39+
onCheckConnection: externalOnCheckConnection,
40+
onConnectionStatusChange,
41+
});
42+
43+
return (
44+
<>
45+
{canAccessProtectedData ? (
46+
<motion.div
47+
initial="initial"
48+
animate="in"
49+
exit="out"
50+
variants={pageVariants}
51+
transition={pageTransition}
52+
className="w-full h-full flex items-center justify-center"
53+
>
54+
<div className="flex flex-col items-center justify-center space-y-6 p-8 max-w-md text-center">
55+
{/* Icon */}
56+
<motion.div
57+
initial={{ scale: 0 }}
58+
animate={{ scale: 1 }}
59+
transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
60+
className="w-24 h-24 rounded-full bg-gradient-to-br from-emerald-500 to-sky-600 flex items-center justify-center shadow-lg"
61+
>
62+
<Activity className="h-12 w-12 text-white" />
63+
</motion.div>
64+
65+
{/* Title */}
66+
<motion.h1
67+
initial={{ opacity: 0, y: 20 }}
68+
animate={{ opacity: 1, y: 0 }}
69+
transition={{ delay: 0.3 }}
70+
className="text-3xl font-bold text-slate-800 dark:text-slate-100"
71+
>
72+
{t("monitoring.comingSoon.title")}
73+
</motion.h1>
74+
75+
{/* Description */}
76+
<motion.p
77+
initial={{ opacity: 0, y: 20 }}
78+
animate={{ opacity: 1, y: 0 }}
79+
transition={{ delay: 0.4 }}
80+
className="text-lg text-slate-600 dark:text-slate-400"
81+
>
82+
{t("monitoring.comingSoon.description")}
83+
</motion.p>
84+
85+
{/* Feature list */}
86+
<motion.ul
87+
initial={{ opacity: 0, y: 20 }}
88+
animate={{ opacity: 1, y: 0 }}
89+
transition={{ delay: 0.5 }}
90+
className="text-left space-y-2 w-full"
91+
>
92+
<li className="flex items-start space-x-2">
93+
<span className="text-emerald-500 mt-1">✓</span>
94+
<span className="text-slate-600 dark:text-slate-400">
95+
{t("monitoring.comingSoon.feature1")}
96+
</span>
97+
</li>
98+
<li className="flex items-start space-x-2">
99+
<span className="text-emerald-500 mt-1">✓</span>
100+
<span className="text-slate-600 dark:text-slate-400">
101+
{t("monitoring.comingSoon.feature2")}
102+
</span>
103+
</li>
104+
<li className="flex items-start space-x-2">
105+
<span className="text-emerald-500 mt-1">✓</span>
106+
<span className="text-slate-600 dark:text-slate-400">
107+
{t("monitoring.comingSoon.feature3")}
108+
</span>
109+
</li>
110+
</motion.ul>
111+
112+
{/* Coming soon badge */}
113+
<motion.div
114+
initial={{ opacity: 0, scale: 0.8 }}
115+
animate={{ opacity: 1, scale: 1 }}
116+
transition={{ delay: 0.6 }}
117+
className="px-4 py-2 bg-gradient-to-r from-emerald-500 to-sky-600 text-white rounded-full text-sm font-medium shadow-md"
118+
>
119+
{t("monitoring.comingSoon.badge")}
120+
</motion.div>
121+
</div>
122+
</motion.div>
123+
) : null}
124+
</>
125+
);
126+
}
127+
128+

0 commit comments

Comments
 (0)