Merge branch 'main' into fix/609-refresh-home-after-end-project

src/components/AddWorker/index.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
-	DialogClose,
 	DialogContent,
 	DialogContentSection,
 	DialogFooter,
@@ -11,12 +10,10 @@ import {
 import { Input } from "@/components/ui/input";
 import {
 	Bot,
-	CircleAlert,
 	Plus,
-	RefreshCw,
-	ChevronLeft,
-	ArrowRight,
 	Edit,
+	Eye,
+	EyeOff,
 } from "lucide-react";
 import ToolSelect from "./ToolSelect";
 import { Textarea } from "@/components/ui/textarea";
@@ -25,7 +22,6 @@ import githubIcon from "@/assets/github.svg";
 import { fetchPost } from "@/api/http";
 import { useAuthStore, useWorkerList } from "@/store/authStore";
 import { useTranslation } from "react-i18next";
-import { TooltipSimple } from "../ui/tooltip";
 import useChatStoreAdapter from "@/hooks/useChatStoreAdapter";
 
 interface EnvValue {
@@ -68,6 +64,7 @@ export function AddWorker({
 	const [showEnvConfig, setShowEnvConfig] = useState(false);
 	const [activeMcp, setActiveMcp] = useState<McpItem | null>(null);
 	const [envValues, setEnvValues] = useState<{ [key: string]: EnvValue }>({});
+	const [secretVisible, setSecretVisible] = useState<{ [key: string]: boolean }>({});
 	const toolSelectRef = useRef<{
 		installMcp: (id: number, env?: any, activeMcp?: any) => Promise<void>;
 	} | null>(null);
@@ -86,6 +83,7 @@ export function AddWorker({
 		console.log(mcp);
 		if (mcp?.install_command?.env) {
 			const initialValues: { [key: string]: EnvValue } = {};
+			const initialVisibility: { [key: string]: boolean } = {};
 			for(const key of Object.keys(mcp.install_command.env)) {
 				initialValues[key] = {
 					value: "",
@@ -95,8 +93,10 @@ export function AddWorker({
 							?.replace(/{{/g, "")
 							?.replace(/}}/g, "") || "",
 				};
+				initialVisibility[key] = false;
 			}
 			setEnvValues(initialValues);
+			setSecretVisible(initialVisibility);
 		}
 	};
 
@@ -136,12 +136,14 @@ export function AddWorker({
 		// clean status
 		setActiveMcp(null);
 		setEnvValues({});
+		setSecretVisible({});
 	};
 
 	const handleCloseMcpEnvSetting = () => {
 		setShowEnvConfig(false);
 		setActiveMcp(null);
 		setEnvValues({});
+		setSecretVisible({});
 	};
 
 	const handleShowEnvConfig = (mcp: McpItem) => {
@@ -150,6 +152,11 @@ export function AddWorker({
 		setShowEnvConfig(true);
 	};
 
+	const isSensitiveKey = (key: string) => /token|key|secret|password|id/i.test(key);
+	const toggleSecretVisibility = (key: string) => {
+		setSecretVisible((prev) => ({ ...prev, [key]: !prev[key] }));
+	};
+
 	const handleSelectedToolsChange = (tools: McpItem[]) => {
 		setSelectedTools(tools);
 	};
@@ -161,6 +168,7 @@ export function AddWorker({
 		setShowEnvConfig(false);
 		setActiveMcp(null);
 		setEnvValues({});
+		setSecretVisible({});
 		setNameError("");
 	};
 
@@ -204,9 +212,11 @@ export function AddWorker({
 			}
 		});
 		console.log("mcpLocal.mcpServers", mcpLocal.mcpServers);
-		for(const key of Object.keys(mcpLocal.mcpServers)) {
-			if (!mcpList.includes(key)) {
-				delete mcpLocal.mcpServers[key];
+		if (mcpLocal.mcpServers && typeof mcpLocal.mcpServers === 'object') {
+			for(const key of Object.keys(mcpLocal.mcpServers)) {
+				if (!mcpList.includes(key)) {
+					delete mcpLocal.mcpServers[key];
+				}
 			}
 		}
 		if (edit) {
@@ -364,18 +374,24 @@ export function AddWorker({
 									{Object.keys(activeMcp?.install_command?.env || {}).map(
 										(key) => (
 											<div key={key}>
-												<div className="text-text-body text-sm leading-normal font-bold">
-													{key}*
-												</div>
 												<Input
-													placeholder=""
-													className="h-7 rounded-sm border border-solid border-input-border-default bg-input-bg-default !shadow-none text-sm leading-normal !ring-0 !ring-offset-0 resize-none"
+													size="default"
+													title={key}
+													required
+													placeholder={envValues[key]?.tip || `Enter ${key}`}
+													type={isSensitiveKey(key) && !secretVisible[key] ? "password" : "text"}
 													value={envValues[key]?.value || ""}
 													onChange={(e) => updateEnvValue(key, e.target.value)}
+													note={envValues[key]?.tip}
+													backIcon={isSensitiveKey(key) ? (
+														secretVisible[key] ? (
+															<EyeOff size={16} className="text-button-transparent-icon-disabled" />
+														) : (
+															<Eye size={16} className="text-button-transparent-icon-disabled" />
+														)
+													) : undefined}
+													onBackIconClick={isSensitiveKey(key) ? () => toggleSecretVisibility(key) : undefined}
 												/>
-												<div className="text-input-label-default text-xs leading-normal">
-													{envValues[key]?.tip}
-												</div>
 											</div>
 										)
 									)}
@@ -392,7 +408,6 @@ export function AddWorker({
 								cancelButtonVariant="ghost"
 								confirmButtonVariant="primary"
 							>
-								<ArrowRight size={16} />
 							</DialogFooter>
 							{/* hidden but keep rendering ToolSelect component */}
 							<div style={{ display: "none" }}>
@@ -425,11 +440,6 @@ export function AddWorker({
 											}}
 											state={nameError ? "error" : "default"}
 											note={nameError || ""}
-											backIcon={<RefreshCw size={16} className="text-button-transparent-icon-disabled" />}
-											onBackIconClick={() => {
-												// Handle refresh/regenerate logic here
-												console.log("Refresh agent name");
-											}}
 											required
 										/>
 									</div>