feat: Fix SEO agent behavior and add z.ai API validation
- Add "SEO-First" mode to prevent unwanted agent switching - SEO agent now stays locked and answers queries through SEO lens - Add [SUGGEST_AGENT:xxx] marker for smart agent suggestions - Add suggestion banner UI with Switch/Dismiss buttons - Prevent auto-switching mid-response - Add validateConnection() method to ZaiPlanService - Add debounced API key validation (500ms) in Settings - Add inline status indicators (valid/validating/error) - Add persistent validation cache (5min) in localStorage - Add "Test Connection" button for manual re-validation - Add clear error messages for auth failures - Add ApiValidationStatus interface - Add apiValidationStatus state for tracking connection states - Add setApiValidationStatus action - Real-time API key validation in Settings panel - Visual status indicators (✓/✗/🔄) - Agent suggestion banner with Switch/Dismiss actions Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
@@ -1,20 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import useStore from "@/lib/store";
|
||||
import modelAdapter from "@/lib/services/adapter-instance";
|
||||
import { Save, Key, Server, Eye, EyeOff } from "lucide-react";
|
||||
import { Save, Key, Server, Eye, EyeOff, CheckCircle, XCircle, Loader2, RefreshCw } from "lucide-react";
|
||||
import { translations } from "@/lib/i18n/translations";
|
||||
|
||||
export default function SettingsPanel() {
|
||||
const { language, apiKeys, setApiKey, selectedProvider, setSelectedProvider, qwenTokens, setQwenTokens } = useStore();
|
||||
const {
|
||||
language,
|
||||
apiKeys,
|
||||
setApiKey,
|
||||
selectedProvider,
|
||||
setSelectedProvider,
|
||||
qwenTokens,
|
||||
setQwenTokens,
|
||||
apiValidationStatus,
|
||||
setApiValidationStatus,
|
||||
} = useStore();
|
||||
const t = translations[language].settings;
|
||||
const common = translations[language].common;
|
||||
|
||||
const [showApiKey, setShowApiKey] = useState<Record<string, boolean>>({});
|
||||
const [isAuthLoading, setIsAuthLoading] = useState(false);
|
||||
const [validating, setValidating] = useState<Record<string, boolean>>({});
|
||||
const validationDebounceRef = useRef<Record<string, NodeJS.Timeout>>({});
|
||||
|
||||
const handleSave = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
@@ -49,12 +62,83 @@ export default function SettingsPanel() {
|
||||
if (storedTokens) {
|
||||
setQwenTokens(storedTokens);
|
||||
}
|
||||
|
||||
// Load validation status
|
||||
const storedValidation = localStorage.getItem("promptarch-api-validation");
|
||||
if (storedValidation) {
|
||||
try {
|
||||
const validation = JSON.parse(storedValidation);
|
||||
// Only use cached validation if it's less than 5 minutes old
|
||||
const now = Date.now();
|
||||
const fiveMinutes = 5 * 60 * 1000;
|
||||
const entries = Object.entries(validation) as Array<[string, any]>;
|
||||
for (const [provider, status] of entries) {
|
||||
if (status.lastValidated && (now - status.lastValidated) < fiveMinutes) {
|
||||
setApiValidationStatus(provider as any, status);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to load validation status:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const validateApiKey = async (provider: "qwen" | "ollama" | "zai") => {
|
||||
const key = apiKeys[provider];
|
||||
if (!key || key.trim().length === 0) {
|
||||
setApiValidationStatus(provider, { valid: false, error: "API key is required" });
|
||||
return;
|
||||
}
|
||||
|
||||
setValidating((prev) => ({ ...prev, [provider]: true }));
|
||||
|
||||
try {
|
||||
const result = await modelAdapter.validateConnection(provider);
|
||||
|
||||
if (result.success && result.data?.valid) {
|
||||
const status = {
|
||||
valid: true,
|
||||
lastValidated: Date.now(),
|
||||
models: result.data.models,
|
||||
};
|
||||
setApiValidationStatus(provider, status);
|
||||
|
||||
// Save to localStorage
|
||||
if (typeof window !== "undefined") {
|
||||
const storedValidation = localStorage.getItem("promptarch-api-validation");
|
||||
const allValidation = storedValidation ? JSON.parse(storedValidation) : {};
|
||||
allValidation[provider] = status;
|
||||
localStorage.setItem("promptarch-api-validation", JSON.stringify(allValidation));
|
||||
}
|
||||
} else {
|
||||
const status = {
|
||||
valid: false,
|
||||
error: result.error || "Connection failed",
|
||||
lastValidated: Date.now(),
|
||||
};
|
||||
setApiValidationStatus(provider, status);
|
||||
}
|
||||
} catch (error) {
|
||||
setApiValidationStatus(provider, {
|
||||
valid: false,
|
||||
error: error instanceof Error ? error.message : "Validation failed",
|
||||
lastValidated: Date.now(),
|
||||
});
|
||||
} finally {
|
||||
setValidating((prev) => ({ ...prev, [provider]: false }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleApiKeyChange = (provider: string, value: string) => {
|
||||
setApiKey(provider as "qwen" | "ollama" | "zai", value);
|
||||
|
||||
// Clear existing timeout
|
||||
if (validationDebounceRef.current[provider]) {
|
||||
clearTimeout(validationDebounceRef.current[provider]);
|
||||
}
|
||||
|
||||
// Update the service immediately
|
||||
switch (provider) {
|
||||
case "qwen":
|
||||
modelAdapter.updateQwenApiKey(value);
|
||||
@@ -66,6 +150,15 @@ export default function SettingsPanel() {
|
||||
modelAdapter.updateZaiApiKey(value);
|
||||
break;
|
||||
}
|
||||
|
||||
// Debounce validation (500ms)
|
||||
if (value.trim().length > 0) {
|
||||
validationDebounceRef.current[provider] = setTimeout(() => {
|
||||
validateApiKey(provider as "qwen" | "ollama" | "zai");
|
||||
}, 500);
|
||||
} else {
|
||||
setApiValidationStatus(provider as any, { valid: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleQwenAuth = async () => {
|
||||
@@ -73,6 +166,7 @@ export default function SettingsPanel() {
|
||||
setQwenTokens(null);
|
||||
modelAdapter.updateQwenTokens();
|
||||
modelAdapter.updateQwenApiKey(apiKeys.qwen || "");
|
||||
setApiValidationStatus("qwen", { valid: false });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -81,6 +175,8 @@ export default function SettingsPanel() {
|
||||
const token = await modelAdapter.startQwenOAuth();
|
||||
setQwenTokens(token);
|
||||
modelAdapter.updateQwenTokens(token);
|
||||
// Validate after OAuth
|
||||
await validateApiKey("qwen");
|
||||
} catch (error) {
|
||||
console.error("Qwen OAuth failed", error);
|
||||
window.alert(
|
||||
@@ -91,8 +187,52 @@ export default function SettingsPanel() {
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIndicator = (provider: "qwen" | "ollama" | "zai") => {
|
||||
const status = apiValidationStatus[provider];
|
||||
|
||||
if (validating[provider]) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 text-blue-500">
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
<span className="text-[9px] font-medium">Validating...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status?.valid) {
|
||||
const timeAgo = status.lastValidated
|
||||
? `Validated ${Math.round((Date.now() - status.lastValidated) / 60000)}m ago`
|
||||
: "Connected";
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 text-green-600 dark:text-green-400">
|
||||
<CheckCircle className="h-3.5 w-3.5" />
|
||||
<span className="text-[9px] font-medium">{timeAgo}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status?.error && apiKeys[provider]?.trim().length > 0) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 text-red-500">
|
||||
<XCircle className="h-3.5 w-3.5" />
|
||||
<span className="text-[9px] font-medium truncate max-w-[150px]" title={status.error}>
|
||||
{status.error}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad();
|
||||
return () => {
|
||||
// Clear all debounce timeouts on unmount
|
||||
Object.values(validationDebounceRef.current).forEach(timeout => {
|
||||
if (timeout) clearTimeout(timeout);
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@@ -119,34 +259,51 @@ export default function SettingsPanel() {
|
||||
placeholder={t.enterKey("Qwen")}
|
||||
value={apiKeys.qwen || ""}
|
||||
onChange={(e) => handleApiKeyChange("qwen", e.target.value)}
|
||||
className="font-mono text-xs lg:text-sm pr-10"
|
||||
className="font-mono text-xs lg:text-sm pr-24"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full w-9 lg:w-10"
|
||||
onClick={() => setShowApiKey((prev) => ({ ...prev, qwen: !prev.qwen }))}
|
||||
>
|
||||
{showApiKey.qwen ? (
|
||||
<EyeOff className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
|
||||
) : (
|
||||
<Eye className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-2 lg:gap-4">
|
||||
<p className="text-[10px] lg:text-xs text-muted-foreground flex-1">
|
||||
{t.getApiKey}{" "}
|
||||
<a
|
||||
href="https://help.aliyun.com/zh/dashscope/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
<div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
|
||||
{getStatusIndicator("qwen")}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => setShowApiKey((prev) => ({ ...prev, qwen: !prev.qwen }))}
|
||||
>
|
||||
Alibaba DashScope
|
||||
</a>
|
||||
</p>
|
||||
{showApiKey.qwen ? (
|
||||
<EyeOff className="h-3 w-3" />
|
||||
) : (
|
||||
<Eye className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 lg:gap-4">
|
||||
<div className="flex-1 flex flex-col sm:flex-row sm:items-center gap-2">
|
||||
<p className="text-[10px] lg:text-xs text-muted-foreground">
|
||||
{t.getApiKey}{" "}
|
||||
<a
|
||||
href="https://help.aliyun.com/zh/dashscope/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Alibaba DashScope
|
||||
</a>
|
||||
</p>
|
||||
{apiKeys.qwen && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-[9px] lg:text-[10px] w-fit"
|
||||
onClick={() => validateApiKey("qwen")}
|
||||
disabled={validating.qwen}
|
||||
>
|
||||
<RefreshCw className={`h-2.5 w-2.5 mr-1 ${validating.qwen ? "animate-spin" : ""}`} />
|
||||
Test
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant={qwenTokens ? "secondary" : "outline"}
|
||||
size="sm"
|
||||
@@ -179,33 +336,50 @@ export default function SettingsPanel() {
|
||||
placeholder={t.enterKey("Ollama")}
|
||||
value={apiKeys.ollama || ""}
|
||||
onChange={(e) => handleApiKeyChange("ollama", e.target.value)}
|
||||
className="font-mono text-xs lg:text-sm pr-10"
|
||||
className="font-mono text-xs lg:text-sm pr-24"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full w-9 lg:w-10"
|
||||
onClick={() => setShowApiKey((prev) => ({ ...prev, ollama: !prev.ollama }))}
|
||||
>
|
||||
{showApiKey.ollama ? (
|
||||
<EyeOff className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
|
||||
) : (
|
||||
<Eye className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
|
||||
{getStatusIndicator("ollama")}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => setShowApiKey((prev) => ({ ...prev, ollama: !prev.ollama }))}
|
||||
>
|
||||
{showApiKey.ollama ? (
|
||||
<EyeOff className="h-3 w-3" />
|
||||
) : (
|
||||
<Eye className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<p className="text-[10px] lg:text-xs text-muted-foreground">
|
||||
{t.getApiKey}{" "}
|
||||
<a
|
||||
href="https://ollama.com/cloud"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
ollama.com/cloud
|
||||
</a>
|
||||
</p>
|
||||
{apiKeys.ollama && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-[9px] lg:text-[10px] w-fit"
|
||||
onClick={() => validateApiKey("ollama")}
|
||||
disabled={validating.ollama}
|
||||
>
|
||||
<RefreshCw className={`h-2.5 w-2.5 mr-1 ${validating.ollama ? "animate-spin" : ""}`} />
|
||||
Test
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[10px] lg:text-xs text-muted-foreground">
|
||||
{t.getApiKey}{" "}
|
||||
<a
|
||||
href="https://ollama.com/cloud"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
ollama.com/cloud
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-start">
|
||||
@@ -219,33 +393,50 @@ export default function SettingsPanel() {
|
||||
placeholder={t.enterKey("Z.AI")}
|
||||
value={apiKeys.zai || ""}
|
||||
onChange={(e) => handleApiKeyChange("zai", e.target.value)}
|
||||
className="font-mono text-xs lg:text-sm pr-10"
|
||||
className="font-mono text-xs lg:text-sm pr-24"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full w-9 lg:w-10"
|
||||
onClick={() => setShowApiKey((prev) => ({ ...prev, zai: !prev.zai }))}
|
||||
>
|
||||
{showApiKey.zai ? (
|
||||
<EyeOff className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
|
||||
) : (
|
||||
<Eye className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
|
||||
{getStatusIndicator("zai")}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => setShowApiKey((prev) => ({ ...prev, zai: !prev.zai }))}
|
||||
>
|
||||
{showApiKey.zai ? (
|
||||
<EyeOff className="h-3 w-3" />
|
||||
) : (
|
||||
<Eye className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<p className="text-[10px] lg:text-xs text-muted-foreground">
|
||||
{t.getApiKey}{" "}
|
||||
<a
|
||||
href="https://docs.z.ai"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
docs.z.ai
|
||||
</a>
|
||||
</p>
|
||||
{apiKeys.zai && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-[9px] lg:text-[10px] w-fit"
|
||||
onClick={() => validateApiKey("zai")}
|
||||
disabled={validating.zai}
|
||||
>
|
||||
<RefreshCw className={`h-2.5 w-2.5 mr-1 ${validating.zai ? "animate-spin" : ""}`} />
|
||||
Test
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[10px] lg:text-xs text-muted-foreground">
|
||||
{t.getApiKey}{" "}
|
||||
<a
|
||||
href="https://docs.z.ai"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
docs.z.ai
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button onClick={handleSave} className="w-full h-9 lg:h-10 text-xs lg:text-sm">
|
||||
|
||||
Reference in New Issue
Block a user