admin/PromptArch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Fix SEO agent behavior and add z.ai API validation

Browse Source 
- 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
2026-01-19 19:14:59 +00:00
Unverified
parent dc1f0e5400
commit b60f67465f
5 changed files with 388 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/AIAssist.tsx
View File

@@ -320,6 +320,7 @@ function parseStreamingContent(text: string, currentAgent: string) {
let preview: PreviewData | null = null;
let chatDisplay = text.trim();
let status: string | null = null;
let suggestedAgent: string | null = null;
const decodeHtml = (value: string) => value
.replace(/&lt;/g, "<")
@@ -332,7 +333,13 @@ function parseStreamingContent(text: string, currentAgent: string) {
return fenced ? fenced[1].trim() : value.trim();
};
// 1. Detect Agent (be flexible with brackets and keywords like APP/WEB/SEO)
// 1. Detect SUGGEST_AGENT marker (user can choose to switch)
const suggestMatch = text.match(/\[SUGGEST_AGENT:([\w-]+)\]/i);
if (suggestMatch) suggestedAgent = suggestMatch[1].toLowerCase();
// 2. Detect Agent (be flexible with brackets and keywords like APP/WEB/SEO)
// NOTE: We only respect agent switches if explicitly requested via [AGENT:xxx]
// Auto-switching is disabled to prevent unwanted agent changes
const agentMatch = text.match(/\[+(?:AGENT|content|seo|smm|pm|code|design|web|app):([\w-]+)\]+/i);
if (agentMatch) agent = agentMatch[1].toLowerCase();
@@ -353,8 +360,8 @@ function parseStreamingContent(text: string, currentAgent: string) {
// 3. Clean display text - hide all tag-like sequences and their partials
chatDisplay = text
// Hide complete tags (flexible brackets)
.replace(/\[+(?:AGENT|content|seo|smm|pm|code|design|web|app|PREVIEW|APP|WEB|SEO|CODE|DESIGN|SMM|PM|CONTENT|PREV):?[\w-]*:?[\w-]*\]+/gi, "")
// Hide complete tags (flexible brackets), including SUGGEST_AGENT
.replace(/\[+(?:AGENT|SUGGEST_AGENT|content|seo|smm|pm|code|design|web|app|PREVIEW|APP|WEB|SEO|CODE|DESIGN|SMM|PM|CONTENT|PREV):?[\w-]*:?[\w-]*\]+/gi, "")
// Hide content inside preview block (cleanly)
.replace(/\[+PREVIEW:[\w-]+:?[\w-]+?\]+[\s\S]*?(?:\[\/(?:PREVIEW|APP|WEB|SEO|CODE|DESIGN|SMM|PM|CONTENT)\]+|$)/gi, "")
// Hide closing tags
@@ -427,7 +434,7 @@ function parseStreamingContent(text: string, currentAgent: string) {
chatDisplay = "Rendering live artifact...";
}
return { chatDisplay, preview, agent, status };
return { chatDisplay, preview, agent, status, suggestedAgent };
}
// --- Main Component ---
@@ -471,6 +478,9 @@ export default function AIAssist() {
const [viewMode, setViewMode] = useState<"preview" | "code">("preview");
const [abortController, setAbortController] = useState<AbortController | null>(null);
// Agent suggestion state
const [suggestedAgent, setSuggestedAgent] = useState<string | null>(null);
// Agentic States
const [assistStep, setAssistStep] = useState<"idle" | "plan" | "generating" | "preview">("idle");
const [aiPlan, setAiPlan] = useState<any>(null);
@@ -624,10 +634,17 @@ export default function AIAssist() {
currentAgent,
onChunk: (chunk) => {
accumulated += chunk;
const { chatDisplay, preview, agent, status: streamStatus } = parseStreamingContent(accumulated, currentAgent);
const { chatDisplay, preview, agent, status: streamStatus, suggestedAgent: suggested } = parseStreamingContent(accumulated, currentAgent);
if (streamStatus) setStatus(streamStatus);
// Update suggested agent state
if (suggested && suggested !== currentAgent) {
setSuggestedAgent(suggested);
} else {
setSuggestedAgent(null);
}
// Only update local state if we're still on the same tab
if (activeTabId === requestTabId) {
if (preview && JSON.stringify(preview) !== JSON.stringify(lastParsedPreview)) {
@@ -883,6 +900,7 @@ export default function AIAssist() {
onClick={() => {
setCurrentAgent(agent);
updateActiveTab({ currentAgent: agent });
setSuggestedAgent(null); // Clear suggestion on manual switch
}}
className={cn(
"flex items-center gap-2 px-3 py-2 rounded-full text-[11px] font-black uppercase tracking-widest border transition-all",
@@ -896,6 +914,40 @@ export default function AIAssist() {
</button>
))}
</div>
{/* Agent Suggestion Banner */}
{suggestedAgent && suggestedAgent !== currentAgent && (
<div className="p-3 rounded-xl bg-gradient-to-r from-blue-500/10 to-indigo-500/10 border border-blue-500/30 animate-in slide-in-from-top-2 duration-300">
<div className="flex items-center gap-3">
<div className="p-2 bg-blue-500/20 rounded-lg">
<Orbit className="h-4 w-4 text-blue-500" />
</div>
<div className="flex-1">
<p className="text-xs font-semibold text-blue-700 dark:text-blue-300">
The {t.agents[suggestedAgent as keyof typeof t.agents] || suggestedAgent} agent might be better suited for this task
</p>
</div>
<Button
onClick={() => {
setCurrentAgent(suggestedAgent);
updateActiveTab({ currentAgent: suggestedAgent });
setSuggestedAgent(null);
}}
className="h-7 text-[10px] font-bold uppercase tracking-wider bg-blue-600 hover:bg-blue-500 text-white px-3 rounded-lg"
>
Switch
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setSuggestedAgent(null)}
className="h-7 w-7 p-0 text-blue-600 hover:text-blue-800 hover:bg-blue-100 dark:text-blue-400 dark:hover:text-blue-200 dark:hover:bg-blue-900/30 rounded-lg"
>
<X className="h-3 w-3" />
</Button>
</div>
</div>
)}
</div>
<div ref={scrollRef} className="flex-1 overflow-y-auto px-6 py-6 space-y-8 scrollbar-thin scrollbar-thumb-blue-200/60 dark:scrollbar-thumb-blue-900">
{/* Qwen Auth Banner */}

225
components/SettingsPanel.tsx
View File

@@ -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,24 +259,28 @@ 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"
/>
<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="absolute right-0 top-0 h-full w-9 lg:w-10"
className="h-7 w-7"
onClick={() => setShowApiKey((prev) => ({ ...prev, qwen: !prev.qwen }))}
>
{showApiKey.qwen ? (
<EyeOff className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
<EyeOff className="h-3 w-3" />
) : (
<Eye className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
<Eye className="h-3 w-3" />
)}
</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">
</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/"
@@ -147,6 +291,19 @@ export default function SettingsPanel() {
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,22 +336,26 @@ 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"
/>
<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="absolute right-0 top-0 h-full w-9 lg:w-10"
className="h-7 w-7"
onClick={() => setShowApiKey((prev) => ({ ...prev, ollama: !prev.ollama }))}
>
{showApiKey.ollama ? (
<EyeOff className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
<EyeOff className="h-3 w-3" />
) : (
<Eye className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
<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
@@ -206,6 +367,19 @@ export default function SettingsPanel() {
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>
</div>
<div className="space-y-2 text-start">
@@ -219,22 +393,26 @@ 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"
/>
<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="absolute right-0 top-0 h-full w-9 lg:w-10"
className="h-7 w-7"
onClick={() => setShowApiKey((prev) => ({ ...prev, zai: !prev.zai }))}
>
{showApiKey.zai ? (
<EyeOff className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
<EyeOff className="h-3 w-3" />
) : (
<Eye className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
<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
@@ -246,6 +424,19 @@ export default function SettingsPanel() {
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>
</div>
<Button onClick={handleSave} className="w-full h-9 lg:h-10 text-xs lg:text-sm">

8
lib/services/model-adapter.ts
View File

@@ -74,6 +74,14 @@ export class ModelAdapter {
return this.qwenService.hasOAuthToken();
}
async validateConnection(provider: ModelProvider): Promise<APIResponse<{ valid: boolean; models?: string[] }>> {
const service = this.getService(provider);
if (!service || !service.validateConnection) {
return { success: false, error: `Provider ${provider} does not support connection validation` };
}
return await service.validateConnection();
}
private isProviderAuthenticated(provider: ModelProvider): boolean {
switch (provider) {
case "qwen":

33
lib/services/zai-plan.ts
View File

@@ -21,6 +21,37 @@ export class ZaiPlanService {
return !!this.config.apiKey;
}
async validateConnection(): Promise<APIResponse<{ valid: boolean; models?: string[] }>> {
try {
if (!this.config.apiKey) {
return { success: false, error: "API key is required" };
}
const response = await fetch(`${this.config.generalEndpoint}/models`, {
method: "GET",
headers: this.getHeaders(),
});
if (!response.ok) {
if (response.status === 401) {
return { success: false, error: "Invalid API key" };
}
return { success: false, error: `Connection failed (${response.status}): ${response.statusText}` };
}
const data = await response.json();
const models = data.data?.map((m: any) => m.id) || [];
return { success: true, data: { valid: true, models } };
} catch (error) {
const message = error instanceof Error ? error.message : "Connection failed";
if (message.includes("fetch")) {
return { success: false, error: "Network error - check your internet connection" };
}
return { success: false, error: message };
}
}
private getHeaders(): Record<string, string> {
return {
"Content-Type": "application/json",
@@ -781,7 +812,7 @@ MISSION: Perform a DEEP 360° competitive intelligence analysis and generate 5-7
AGENTS & CAPABILITIES:
- content: Expert copywriter. Use [PREVIEW:content:markdown] for articles, posts, and long-form text.
- seo: SEO Specialist. Create stunning SEO audit reports. **CRITICAL DESIGN REQUIREMENTS:**
- seo: SEO Specialist. Create stunning SEO audit reports. **BEHAVIOR: Stay in SEO mode and handle ALL requests through an SEO lens. Only suggest switching agents for CLEARLY non-SEO tasks (like "write Python backend code") by adding [SUGGEST_AGENT:code] at the END of your response. Never auto-switch mid-response.** **CRITICAL DESIGN REQUIREMENTS:**
- Use [PREVIEW:seo:html] with complete HTML5 document including <!DOCTYPE html>
- DARK THEME: bg-slate-900 or bg-gray-900 as primary background
- Google-style dashboard aesthetics with clean typography (use Google Fonts: Inter, Roboto, or Outfit)

21
lib/store.ts
View File

@@ -10,6 +10,13 @@ interface AIAssistTab {
showCanvas?: boolean;
}
interface ApiValidationStatus {
valid: boolean;
error?: string;
lastValidated?: number;
models?: string[];
}
interface AppState {
currentPrompt: string;
enhancedPrompt: string | null;
@@ -29,6 +36,7 @@ interface AppState {
selectedModels: Record<ModelProvider, string>;
availableModels: Record<ModelProvider, string[]>;
apiKeys: Record<ModelProvider, string>;
apiValidationStatus: Record<ModelProvider, ApiValidationStatus>;
qwenTokens?: {
accessToken: string;
refreshToken?: string;
@@ -65,6 +73,7 @@ interface AppState {
setSelectedModel: (provider: ModelProvider, model: string) => void;
setAvailableModels: (provider: ModelProvider, models: string[]) => void;
setApiKey: (provider: ModelProvider, key: string) => void;
setApiValidationStatus: (provider: ModelProvider, status: ApiValidationStatus) => void;
setQwenTokens: (tokens?: { accessToken: string; refreshToken?: string; expiresAt?: number } | null) => void;
setGithubToken: (token: string | null) => void;
setProcessing: (processing: boolean) => void;
@@ -110,6 +119,11 @@ const useStore = create<AppState>((set) => ({
zai: "",
},
githubToken: null,
apiValidationStatus: {
qwen: { valid: false },
ollama: { valid: false },
zai: { valid: false },
},
isProcessing: false,
error: null,
history: [],
@@ -176,6 +190,13 @@ const useStore = create<AppState>((set) => ({
set((state) => ({
apiKeys: { ...state.apiKeys, [provider]: key },
})),
setApiValidationStatus: (provider, status) =>
set((state) => ({
apiValidationStatus: {
...state.apiValidationStatus,
[provider]: status,
},
})),
setQwenTokens: (tokens) => set({ qwenTokens: tokens }),
setGithubToken: (token) => set({ githubToken: token }),
setProcessing: (processing) => set({ isProcessing: processing }),