chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
+1665
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1757750114641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1475" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M202.112 678.656l200.64-112.64 3.392-9.792-3.392-5.44h-9.792l-33.6-2.048-114.624-3.072-99.456-4.224-96.384-5.12-24.192-5.12-22.72-29.952 2.304-14.976 20.48-13.696 29.12 2.56 64.576 4.416 96.832 6.72 70.208 4.096 104.064 10.88h16.576l2.304-6.72-5.696-4.16-4.352-4.096-100.224-67.968-108.48-71.744-56.768-41.344-30.72-20.928-15.488-19.584-6.72-42.88 27.84-30.72 37.504 2.56 9.536 2.56 37.952 29.184 81.088 62.784 105.856 77.952 15.488 12.928 6.208-4.352 0.768-3.136L395.264 360l-57.6-104.064-61.44-105.92-27.392-43.904-7.168-26.304c-2.56-10.88-4.48-19.904-4.48-30.976l31.808-43.136L286.592 0l42.304 5.696 17.856 15.488 26.304 60.16 42.624 94.72 66.112 128.896 19.392 38.208 10.24 35.392 3.904 10.88h6.72v-6.208l5.44-72.576 10.048-89.088 9.856-114.688 3.328-32.256 16-38.72 31.808-20.928 24.768 11.904 20.416 29.184-2.88 18.816-12.16 78.72-23.68 123.52-15.552 82.56h9.088l10.304-10.24 41.856-55.552 70.208-87.808 30.976-34.88 36.16-38.464 23.232-18.368h43.904l32.32 48.064-14.464 49.6-45.184 57.28-37.44 48.576-53.76 72.32-33.536 57.856 3.072 4.608 8-0.768 121.408-25.792 65.6-11.904 78.208-13.44 35.392 16.512 3.84 16.832-13.952 34.304-83.648 20.672-98.112 19.648-146.176 34.56-1.792 1.28 2.048 2.56 65.92 6.272 28.096 1.536h68.928l128.384 9.6 33.536 22.144 20.16 27.136-3.392 20.672-51.648 26.304-69.696-16.512-162.688-38.72-55.744-13.952h-7.744v4.672l46.464 45.44 85.184 76.928 106.688 99.2 5.376 24.512-13.632 19.328-14.464-2.048-93.76-70.464-36.16-31.808-81.856-68.928h-5.44v7.232l18.88 27.648 99.648 149.76 5.184 45.952-7.232 14.976-25.856 9.024-28.352-5.12L673.408 856l-60.16-92.16-48.576-82.624-5.952 3.392-28.672 308.544-13.44 15.744-30.976 11.904-25.792-19.648-13.696-31.744 13.696-62.72 16.512-81.92 13.44-65.024 12.16-80.832 7.232-26.88-0.512-1.792-5.952 0.768-60.928 83.648-92.736 125.248-73.344 78.528-17.536 6.976-30.464-15.808 2.816-28.16 17.024-24.96 101.504-129.152 61.184-80 39.552-46.272-0.256-6.72h-2.368L177.6 789.44l-48 6.144-20.736-19.328 2.56-31.744 9.856-10.368 81.088-55.744-0.256 0.256z" p-id="1476" fill="#bfbfbf"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,130 @@
|
||||
import type { AppId } from "@/lib/api";
|
||||
import type { VisibleApps } from "@/types";
|
||||
import { ProviderIcon } from "@/components/ProviderIcon";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Monitor, Terminal } from "lucide-react";
|
||||
|
||||
const APP_BADGE_ICON: Partial<
|
||||
Record<AppId, { icon: typeof Terminal; offsetY?: number }>
|
||||
> = {
|
||||
claude: { icon: Terminal },
|
||||
"claude-desktop": { icon: Monitor, offsetY: 0.5 },
|
||||
};
|
||||
|
||||
interface AppSwitcherProps {
|
||||
activeApp: AppId;
|
||||
onSwitch: (app: AppId) => void;
|
||||
visibleApps?: VisibleApps;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const ALL_APPS: AppId[] = [
|
||||
"claude",
|
||||
"claude-desktop",
|
||||
"codex",
|
||||
"gemini",
|
||||
"opencode",
|
||||
"openclaw",
|
||||
"hermes",
|
||||
];
|
||||
const STORAGE_KEY = "cc-switch-last-app";
|
||||
|
||||
export function AppSwitcher({
|
||||
activeApp,
|
||||
onSwitch,
|
||||
visibleApps,
|
||||
compact,
|
||||
}: AppSwitcherProps) {
|
||||
const handleSwitch = (app: AppId) => {
|
||||
if (app === activeApp) return;
|
||||
localStorage.setItem(STORAGE_KEY, app);
|
||||
onSwitch(app);
|
||||
};
|
||||
const iconSize = 20;
|
||||
const appIconName: Record<AppId, string> = {
|
||||
claude: "claude",
|
||||
"claude-desktop": "claude",
|
||||
codex: "openai",
|
||||
gemini: "gemini",
|
||||
opencode: "opencode",
|
||||
openclaw: "openclaw",
|
||||
hermes: "hermes",
|
||||
};
|
||||
const appDisplayName: Record<AppId, string> = {
|
||||
claude: "Claude Code",
|
||||
"claude-desktop": "Claude Desktop",
|
||||
codex: "Codex",
|
||||
gemini: "Gemini",
|
||||
opencode: "OpenCode",
|
||||
openclaw: "OpenClaw",
|
||||
hermes: "Hermes",
|
||||
};
|
||||
|
||||
// Filter apps based on visibility settings (default all visible)
|
||||
const appsToShow = ALL_APPS.filter((app) => {
|
||||
if (!visibleApps) return true;
|
||||
return visibleApps[app];
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="inline-flex bg-muted rounded-xl p-1 gap-1">
|
||||
{appsToShow.map((app) => {
|
||||
const badgeConfig = APP_BADGE_ICON[app];
|
||||
const BadgeIcon = badgeConfig?.icon;
|
||||
const isActive = activeApp === app;
|
||||
return (
|
||||
<button
|
||||
key={app}
|
||||
type="button"
|
||||
onClick={() => handleSwitch(app)}
|
||||
className={cn(
|
||||
"group inline-flex items-center px-3 h-8 rounded-md text-sm font-medium transition-all duration-200",
|
||||
isActive
|
||||
? "bg-background text-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-background/50",
|
||||
)}
|
||||
>
|
||||
<span className="relative inline-flex shrink-0">
|
||||
<ProviderIcon
|
||||
icon={appIconName[app]}
|
||||
name={appDisplayName[app]}
|
||||
size={iconSize}
|
||||
/>
|
||||
{BadgeIcon && (
|
||||
<span
|
||||
className={cn(
|
||||
"absolute -bottom-0.5 -right-0.5 flex items-center justify-center rounded-[3px] border h-[11px] w-[11px]",
|
||||
isActive
|
||||
? "bg-background border-border text-foreground"
|
||||
: "bg-muted border-background text-muted-foreground group-hover:bg-background group-hover:text-foreground",
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<BadgeIcon
|
||||
className="h-[8px] w-[8px]"
|
||||
strokeWidth={2.5}
|
||||
style={
|
||||
badgeConfig?.offsetY
|
||||
? { transform: `translateY(${badgeConfig.offsetY}px)` }
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"transition-all duration-200 whitespace-nowrap overflow-hidden",
|
||||
compact
|
||||
? "max-w-0 opacity-0 ml-0"
|
||||
: "max-w-[120px] opacity-100 ml-2",
|
||||
)}
|
||||
>
|
||||
{appDisplayName[app]}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
interface IconProps {
|
||||
size?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// 导入本地 SVG 图标
|
||||
import ClaudeSvg from "@/icons/extracted/claude.svg?url";
|
||||
import OpenAISvg from "@/icons/extracted/openai.svg?url";
|
||||
import GeminiSvg from "@/icons/extracted/gemini.svg?url";
|
||||
import OpenClawSvg from "@/icons/extracted/claw.svg?url";
|
||||
|
||||
export function ClaudeIcon({ size = 16, className = "" }: IconProps) {
|
||||
return (
|
||||
<img
|
||||
src={ClaudeSvg}
|
||||
width={size}
|
||||
height={size}
|
||||
className={className}
|
||||
alt="Claude"
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CodexIcon({ size = 16, className = "" }: IconProps) {
|
||||
return (
|
||||
<img
|
||||
src={OpenAISvg}
|
||||
width={size}
|
||||
height={size}
|
||||
className={`dark:brightness-0 dark:invert ${className}`}
|
||||
alt="Codex"
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function GeminiIcon({ size = 16, className = "" }: IconProps) {
|
||||
return (
|
||||
<img
|
||||
src={GeminiSvg}
|
||||
width={size}
|
||||
height={size}
|
||||
className={className}
|
||||
alt="Gemini"
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function OpenClawIcon({ size = 16, className = "" }: IconProps) {
|
||||
return (
|
||||
<img
|
||||
src={OpenClawSvg}
|
||||
width={size}
|
||||
height={size}
|
||||
className={className}
|
||||
alt="OpenClaw"
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// MCP icon uses inline SVG to support currentColor for hover effects
|
||||
export function McpIcon({ size = 16, className = "" }: IconProps) {
|
||||
return (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
height={size}
|
||||
width={size}
|
||||
className={className}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z" />
|
||||
<path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import type { ProviderMeta } from "@/types";
|
||||
import { useCodexOauthQuota } from "@/lib/query/subscription";
|
||||
import { SubscriptionQuotaView } from "@/components/SubscriptionQuotaFooter";
|
||||
|
||||
interface CodexOauthQuotaFooterProps {
|
||||
meta?: ProviderMeta;
|
||||
inline?: boolean;
|
||||
/** 是否为当前激活的供应商 */
|
||||
isCurrent?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Codex OAuth (ChatGPT Plus/Pro 反代) 订阅额度 footer
|
||||
*
|
||||
* 复用 SubscriptionQuotaView 的全部渲染逻辑（5 状态 × inline/expanded）。
|
||||
* 数据源切换为 cc-switch 自管的 OAuth token 而非 Codex CLI 凭据。
|
||||
*/
|
||||
const CodexOauthQuotaFooter: React.FC<CodexOauthQuotaFooterProps> = ({
|
||||
meta,
|
||||
inline = false,
|
||||
isCurrent = false,
|
||||
}) => {
|
||||
const {
|
||||
data: quota,
|
||||
isFetching: loading,
|
||||
refetch,
|
||||
} = useCodexOauthQuota(meta, { enabled: true, autoQuery: isCurrent });
|
||||
|
||||
return (
|
||||
<SubscriptionQuotaView
|
||||
quota={quota}
|
||||
loading={loading}
|
||||
refetch={refetch}
|
||||
appIdForExpiredHint="codex_oauth"
|
||||
inline={inline}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodexOauthQuotaFooter;
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface ColorPickerProps {
|
||||
value?: string;
|
||||
onValueChange: (color: string) => void;
|
||||
label?: string;
|
||||
presets?: string[];
|
||||
}
|
||||
|
||||
const DEFAULT_PRESETS = [
|
||||
"#00A67E",
|
||||
"#D4915D",
|
||||
"#4285F4",
|
||||
"#FF6A00",
|
||||
"#00A4FF",
|
||||
"#FF9900",
|
||||
"#0078D4",
|
||||
"#FF0000",
|
||||
"#1E88E5",
|
||||
"#6366F1",
|
||||
"#0F62FE",
|
||||
"#2932E1",
|
||||
];
|
||||
|
||||
export const ColorPicker: React.FC<ColorPickerProps> = ({
|
||||
value = "#4285F4",
|
||||
onValueChange,
|
||||
label,
|
||||
presets = DEFAULT_PRESETS,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const displayLabel = label ?? t("providerIcon.color", "图标颜色");
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Label>{displayLabel}</Label>
|
||||
|
||||
{/* 颜色预设 */}
|
||||
<div className="grid grid-cols-6 gap-2">
|
||||
{presets.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
type="button"
|
||||
onClick={() => onValueChange(color)}
|
||||
className={cn(
|
||||
"w-full aspect-square rounded-lg border-2 transition-all",
|
||||
"hover:scale-110 hover:shadow-lg",
|
||||
value === color
|
||||
? "border-primary ring-2 ring-primary/20"
|
||||
: "border-border",
|
||||
)}
|
||||
style={{ backgroundColor: color }}
|
||||
title={color}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 自定义颜色输入 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="color"
|
||||
value={value}
|
||||
onChange={(e) => onValueChange(e.target.value)}
|
||||
className="w-16 h-10 p-1 cursor-pointer"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onValueChange(e.target.value)}
|
||||
placeholder="#4285F4"
|
||||
className="flex-1 font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,104 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { AlertTriangle, Info } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface ConfirmDialogProps {
|
||||
isOpen: boolean;
|
||||
title: string;
|
||||
message: string;
|
||||
confirmText?: string;
|
||||
cancelText?: string;
|
||||
variant?: "destructive" | "info";
|
||||
zIndex?: "base" | "nested" | "alert" | "top";
|
||||
/** 可选勾选项：提供 label 即显示，勾选状态经 onConfirm 参数回传 */
|
||||
checkboxLabel?: string;
|
||||
checkboxDefaultChecked?: boolean;
|
||||
onConfirm: (checkboxChecked: boolean) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function ConfirmDialog({
|
||||
isOpen,
|
||||
title,
|
||||
message,
|
||||
confirmText,
|
||||
cancelText,
|
||||
variant = "destructive",
|
||||
zIndex = "alert",
|
||||
checkboxLabel,
|
||||
checkboxDefaultChecked = false,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: ConfirmDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
const [checkboxChecked, setCheckboxChecked] = useState(
|
||||
checkboxDefaultChecked,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setCheckboxChecked(checkboxDefaultChecked);
|
||||
}
|
||||
}, [isOpen, checkboxDefaultChecked]);
|
||||
|
||||
const IconComponent = variant === "info" ? Info : AlertTriangle;
|
||||
const iconClass =
|
||||
variant === "info" ? "h-5 w-5 text-blue-500" : "h-5 w-5 text-destructive";
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
onCancel();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-sm" zIndex={zIndex}>
|
||||
<DialogHeader className="space-y-3 border-b-0 bg-transparent pb-0">
|
||||
<DialogTitle className="flex items-center gap-2 text-lg font-semibold">
|
||||
<IconComponent className={iconClass} />
|
||||
{title}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="whitespace-pre-line text-sm leading-relaxed">
|
||||
{message}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{checkboxLabel ? (
|
||||
<label className="flex cursor-pointer select-none items-start gap-2 px-6 pt-3">
|
||||
<Checkbox
|
||||
checked={checkboxChecked}
|
||||
onCheckedChange={(value) => setCheckboxChecked(value === true)}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<span className="text-sm leading-relaxed">{checkboxLabel}</span>
|
||||
</label>
|
||||
) : null}
|
||||
<DialogFooter className="flex gap-2 border-t-0 bg-transparent pt-2 sm:justify-end">
|
||||
<Button variant="outline" onClick={onCancel}>
|
||||
{cancelText || t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
variant={variant === "info" ? "default" : "destructive"}
|
||||
onClick={() =>
|
||||
// 未渲染勾选框时不得回传 defaultChecked 残留值
|
||||
onConfirm(checkboxLabel ? checkboxChecked : false)
|
||||
}
|
||||
>
|
||||
{confirmText || t("common.confirm")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
import React from "react";
|
||||
import { RefreshCw, AlertCircle, Clock } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { ProviderMeta } from "@/types";
|
||||
import { useCopilotQuota } from "@/lib/query/copilot";
|
||||
import { resolveManagedAccountId } from "@/lib/authBinding";
|
||||
import { PROVIDER_TYPES } from "@/config/constants";
|
||||
import {
|
||||
TierBadge,
|
||||
utilizationColor,
|
||||
} from "@/components/SubscriptionQuotaFooter";
|
||||
|
||||
interface CopilotQuotaFooterProps {
|
||||
meta?: ProviderMeta;
|
||||
inline?: boolean;
|
||||
/** 是否为当前激活的供应商 */
|
||||
isCurrent?: boolean;
|
||||
}
|
||||
|
||||
/** 格式化相对时间 */
|
||||
function formatRelativeTime(
|
||||
timestamp: number,
|
||||
now: number,
|
||||
t: (key: string, options?: { count?: number }) => string,
|
||||
): string {
|
||||
const diff = Math.floor((now - timestamp) / 1000);
|
||||
if (diff < 60) return t("usage.justNow");
|
||||
if (diff < 3600)
|
||||
return t("usage.minutesAgo", { count: Math.floor(diff / 60) });
|
||||
if (diff < 86400)
|
||||
return t("usage.hoursAgo", { count: Math.floor(diff / 3600) });
|
||||
return t("usage.daysAgo", { count: Math.floor(diff / 86400) });
|
||||
}
|
||||
|
||||
const CopilotQuotaFooter: React.FC<CopilotQuotaFooterProps> = ({
|
||||
meta,
|
||||
inline = false,
|
||||
isCurrent = false,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const accountId = resolveManagedAccountId(
|
||||
meta,
|
||||
PROVIDER_TYPES.GITHUB_COPILOT,
|
||||
);
|
||||
|
||||
const {
|
||||
data: quota,
|
||||
isFetching: loading,
|
||||
refetch,
|
||||
} = useCopilotQuota(accountId, { enabled: true, autoQuery: isCurrent });
|
||||
|
||||
const [now, setNow] = React.useState(Date.now());
|
||||
React.useEffect(() => {
|
||||
if (!quota?.queriedAt) return;
|
||||
const interval = setInterval(() => setNow(Date.now()), 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, [quota?.queriedAt]);
|
||||
|
||||
if (!quota) return null;
|
||||
|
||||
// API 调用失败
|
||||
if (!quota.success) {
|
||||
if (inline) {
|
||||
return (
|
||||
<div className="inline-flex items-center gap-2 text-xs rounded-lg border border-border-default bg-card px-3 py-2 shadow-sm">
|
||||
<div className="flex items-center gap-1.5 text-red-500 dark:text-red-400">
|
||||
<AlertCircle size={12} />
|
||||
<span>{quota.error || t("subscription.queryFailed")}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0"
|
||||
title={t("subscription.refresh")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const tiers = quota.tiers;
|
||||
if (tiers.length === 0) return null;
|
||||
|
||||
if (inline) {
|
||||
return (
|
||||
<div className="flex flex-col items-end gap-1 text-xs whitespace-nowrap flex-shrink-0">
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
{quota.plan && (
|
||||
<span className="text-[10px] text-muted-foreground/70">
|
||||
{quota.plan}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
|
||||
<Clock size={10} />
|
||||
{quota.queriedAt
|
||||
? formatRelativeTime(quota.queriedAt, now, t)
|
||||
: t("usage.never", { defaultValue: "Never" })}
|
||||
</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
refetch();
|
||||
}}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0 text-muted-foreground"
|
||||
title={t("subscription.refresh")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{tiers.map((tier) => (
|
||||
<TierBadge key={tier.name} tier={tier} t={t} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 展开模式
|
||||
return (
|
||||
<div className="mt-3 rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
|
||||
{quota.plan || t("subscription.title")}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{quota.queriedAt && (
|
||||
<span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
|
||||
<Clock size={10} />
|
||||
{formatRelativeTime(quota.queriedAt, now, t)}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50"
|
||||
title={t("subscription.refresh")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{tiers.map((tier) => {
|
||||
const label = t("subscription.copilotPremium", {
|
||||
defaultValue: "Premium",
|
||||
});
|
||||
return (
|
||||
<div key={tier.name} className="flex items-center gap-3 text-xs">
|
||||
<span
|
||||
className="text-gray-500 dark:text-gray-400 min-w-0 font-medium"
|
||||
style={{ width: "25%" }}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
<div className="flex-1 h-2 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all ${
|
||||
tier.utilization >= 90
|
||||
? "bg-red-500"
|
||||
: tier.utilization >= 70
|
||||
? "bg-orange-500"
|
||||
: "bg-green-500"
|
||||
}`}
|
||||
style={{
|
||||
width: `${Math.min(tier.utilization, 100)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className={`font-semibold tabular-nums ${utilizationColor(tier.utilization)}`}
|
||||
>
|
||||
{Math.round(tier.utilization)}%
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CopilotQuotaFooter;
|
||||
@@ -0,0 +1,303 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { exit } from "@tauri-apps/plugin-process";
|
||||
import {
|
||||
Database,
|
||||
Download,
|
||||
RefreshCw,
|
||||
ExternalLink,
|
||||
FolderOpen,
|
||||
Loader2,
|
||||
AlertTriangle,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const RELEASES_URL = "https://github.com/farion1231/cc-switch/releases";
|
||||
|
||||
interface DatabaseUpgradeProps {
|
||||
payload: {
|
||||
path?: string;
|
||||
error?: string;
|
||||
kind?: string;
|
||||
db_version?: number;
|
||||
supported_version?: number;
|
||||
};
|
||||
}
|
||||
|
||||
// checking: 启动时检查是否有可用更新
|
||||
// upgradable: 有可用更新，升级应用即可解决
|
||||
// incompatible: 已是最新版本但数据库仍过新（可能来自第三方客户端），升级无法解决
|
||||
// updating: 正在下载/安装更新
|
||||
// error: 升级过程出错
|
||||
type Phase = "checking" | "upgradable" | "incompatible" | "updating" | "error";
|
||||
|
||||
interface DownloadProgress {
|
||||
downloaded: number;
|
||||
total: number | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据库版本过新（应用过旧）时的应用内恢复界面。
|
||||
*
|
||||
* 启动时先检查是否有可用更新：
|
||||
* - 有 → 提供「升级应用」一键下载+安装+重启，并展示下载进度条。
|
||||
* - 无 → 说明当前已是最新版本但数据库仍不兼容（通常由第三方客户端或更高版本创建），
|
||||
* 升级无法解决，及时提醒用户备份后改用兼容客户端或等待官方支持。
|
||||
*/
|
||||
export function DatabaseUpgrade({ payload }: DatabaseUpgradeProps) {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<Phase>("checking");
|
||||
const [availableVersion, setAvailableVersion] = useState<string | null>(null);
|
||||
const [progress, setProgress] = useState<DownloadProgress | null>(null);
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
const unlistenRef = useRef<(() => void) | null>(null);
|
||||
|
||||
const dbVersion = payload.db_version;
|
||||
const supportedVersion = payload.supported_version;
|
||||
|
||||
// 启动时检查可用更新，决定 upgradable / incompatible
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const version = await invoke<string | null>(
|
||||
"check_app_update_available",
|
||||
);
|
||||
if (cancelled) return;
|
||||
if (version) {
|
||||
setAvailableVersion(version);
|
||||
setPhase("upgradable");
|
||||
} else {
|
||||
setPhase("incompatible");
|
||||
}
|
||||
} catch {
|
||||
// 检查失败（如离线）：仍允许尝试升级，避免完全卡死
|
||||
if (!cancelled) setPhase("upgradable");
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
unlistenRef.current?.();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const startUpgrade = useCallback(async () => {
|
||||
setPhase("updating");
|
||||
setProgress(null);
|
||||
setErrorMsg(null);
|
||||
try {
|
||||
unlistenRef.current?.();
|
||||
unlistenRef.current = await listen<DownloadProgress>(
|
||||
"update-download-progress",
|
||||
(e) => setProgress(e.payload),
|
||||
);
|
||||
// 成功时后端会下载+安装+重启，不会返回；返回 false 表示无可用更新。
|
||||
const updating = await invoke<boolean>("install_update_and_restart");
|
||||
unlistenRef.current?.();
|
||||
unlistenRef.current = null;
|
||||
if (!updating) {
|
||||
// 竞态：检查时有更新、安装时已无 → 按不兼容处理
|
||||
setPhase("incompatible");
|
||||
}
|
||||
// updating === true：应用即将重启，保持 updating 态直到进程退出。
|
||||
} catch (e) {
|
||||
unlistenRef.current?.();
|
||||
unlistenRef.current = null;
|
||||
setErrorMsg(e instanceof Error ? e.message : String(e));
|
||||
setPhase("error");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const percent =
|
||||
progress && progress.total && progress.total > 0
|
||||
? Math.min(100, Math.round((progress.downloaded / progress.total) * 100))
|
||||
: null;
|
||||
const fmtMB = (n: number) => (n / 1024 / 1024).toFixed(1);
|
||||
|
||||
const isIncompatible = phase === "incompatible";
|
||||
const accent = isIncompatible
|
||||
? {
|
||||
chip: "bg-red-100 text-red-600 dark:bg-red-950/50 dark:text-red-400",
|
||||
Icon: AlertTriangle,
|
||||
}
|
||||
: {
|
||||
chip: "bg-amber-100 text-amber-600 dark:bg-amber-950/50 dark:text-amber-400",
|
||||
Icon: Database,
|
||||
};
|
||||
const AccentIcon = accent.Icon;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background p-6 text-foreground">
|
||||
<div className="w-full max-w-lg space-y-5 rounded-2xl border border-border/60 bg-card/80 p-7 shadow-xl">
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl ${accent.chip}`}
|
||||
>
|
||||
<AccentIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h1 className="text-lg font-semibold">
|
||||
{t("dbUpgrade.title", "数据库版本过新")}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t(
|
||||
"dbUpgrade.description",
|
||||
"当前数据库由更新版本的 CC Switch 创建，需要升级应用后才能继续使用。升级不会删除你的数据。",
|
||||
)}
|
||||
</p>
|
||||
{dbVersion != null && supportedVersion != null && (
|
||||
<p className="pt-0.5 text-xs text-muted-foreground tabular-nums">
|
||||
{t("dbUpgrade.versionInfo", {
|
||||
db: dbVersion,
|
||||
supported: supportedVersion,
|
||||
defaultValue: "数据库版本 v{{db}} · 应用支持 v{{supported}}",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 错误详情 / 数据库路径 */}
|
||||
<div className="space-y-1 rounded-lg border border-border/50 bg-muted/40 p-3 text-xs text-muted-foreground">
|
||||
{payload.error && (
|
||||
<p className="break-words font-mono">{payload.error}</p>
|
||||
)}
|
||||
{payload.path && (
|
||||
<p className="break-all">
|
||||
{t("dbUpgrade.dbPath", "数据库文件")}：{payload.path}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{phase === "checking" && (
|
||||
<p className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
{t("dbUpgrade.checking", "正在检查可用更新…")}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{phase === "upgradable" && availableVersion && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("dbUpgrade.updateAvailable", {
|
||||
version: availableVersion,
|
||||
defaultValue: "发现新版本 v{{version}}，升级后即可继续使用。",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{phase === "incompatible" && (
|
||||
<div className="space-y-2 rounded-lg border border-red-300/60 bg-red-50 p-3 text-sm text-red-700 dark:border-red-500/40 dark:bg-red-950/40 dark:text-red-300">
|
||||
<p className="font-medium">
|
||||
{t("dbUpgrade.incompatibleTitle", "升级也无法解决")}
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
{t("dbUpgrade.incompatibleDescription", {
|
||||
db: dbVersion,
|
||||
supported: supportedVersion,
|
||||
defaultValue:
|
||||
"你已是最新版本，但数据库版本（v{{db}}）仍高于本应用支持的版本（v{{supported}}）。该数据库可能由第三方客户端或更高版本创建，升级当前官方应用也无法兼容。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === "updating" && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="flex items-center gap-2 text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
{percent === null
|
||||
? t("dbUpgrade.preparing", "正在准备更新…")
|
||||
: t("dbUpgrade.downloading", "正在下载更新…")}
|
||||
</span>
|
||||
{percent !== null && (
|
||||
<span className="tabular-nums text-muted-foreground">
|
||||
{percent}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-muted">
|
||||
<div
|
||||
className={`h-full rounded-full bg-amber-500 transition-all duration-200 ${
|
||||
percent === null ? "w-1/3 animate-pulse" : ""
|
||||
}`}
|
||||
style={percent === null ? undefined : { width: `${percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
{progress && (
|
||||
<p className="text-right text-xs tabular-nums text-muted-foreground">
|
||||
{fmtMB(progress.downloaded)} MB
|
||||
{progress.total ? ` / ${fmtMB(progress.total)} MB` : ""}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === "error" && errorMsg && (
|
||||
<p className="rounded-lg border border-red-300/60 bg-red-50 p-3 text-sm text-red-700 dark:border-red-500/40 dark:bg-red-950/40 dark:text-red-300">
|
||||
{errorMsg}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{(phase === "upgradable" || phase === "error") && (
|
||||
<Button
|
||||
onClick={startUpgrade}
|
||||
className="gap-2 bg-amber-500 text-white hover:bg-amber-600"
|
||||
>
|
||||
{phase === "error" ? (
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
) : (
|
||||
<Download className="h-4 w-4" />
|
||||
)}
|
||||
{phase === "error"
|
||||
? t("dbUpgrade.retry", "重试升级")
|
||||
: t("dbUpgrade.upgradeNow", "升级应用")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{(phase === "incompatible" || phase === "error") && (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
onClick={() =>
|
||||
void invoke("open_external", { url: RELEASES_URL })
|
||||
}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
{t("dbUpgrade.openReleases", "打开发布页")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
onClick={() => void invoke("open_app_config_folder")}
|
||||
disabled={phase === "updating"}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
{t("dbUpgrade.openConfigDir", "打开配置目录")}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="ml-auto text-muted-foreground"
|
||||
onClick={() => void exit(0)}
|
||||
disabled={phase === "updating"}
|
||||
>
|
||||
{t("dbUpgrade.quit", "退出")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DatabaseUpgrade;
|
||||
@@ -0,0 +1,730 @@
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { DeepLinkImportRequest, deeplinkApi } from "@/lib/api/deeplink";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast } from "sonner";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { PromptConfirmation } from "./deeplink/PromptConfirmation";
|
||||
import { McpConfirmation } from "./deeplink/McpConfirmation";
|
||||
import { SkillConfirmation } from "./deeplink/SkillConfirmation";
|
||||
import { ProviderIcon } from "./ProviderIcon";
|
||||
|
||||
interface DeeplinkError {
|
||||
url: string;
|
||||
error: string;
|
||||
}
|
||||
|
||||
export function DeepLinkImportDialog() {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const [request, setRequest] = useState<DeepLinkImportRequest | null>(null);
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
// 容错判断：MCP 导入结果可能缺少 type 字段
|
||||
const isMcpImportResult = (
|
||||
value: unknown,
|
||||
): value is {
|
||||
importedCount: number;
|
||||
importedIds: string[];
|
||||
failed: Array<{ id: string; error: string }>;
|
||||
type?: "mcp";
|
||||
} => {
|
||||
if (!value || typeof value !== "object") return false;
|
||||
const v = value as Record<string, unknown>;
|
||||
return (
|
||||
typeof v.importedCount === "number" &&
|
||||
Array.isArray(v.importedIds) &&
|
||||
Array.isArray(v.failed)
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Listen for deep link import events
|
||||
const unlistenImport = listen<DeepLinkImportRequest>(
|
||||
"deeplink-import",
|
||||
async (event) => {
|
||||
// If config is present, merge it to get the complete configuration
|
||||
if (event.payload.config || event.payload.configUrl) {
|
||||
try {
|
||||
const mergedRequest = await deeplinkApi.mergeDeeplinkConfig(
|
||||
event.payload,
|
||||
);
|
||||
setRequest(mergedRequest);
|
||||
} catch (error) {
|
||||
console.error("Failed to merge config:", error);
|
||||
toast.error(t("deeplink.configMergeError"), {
|
||||
description:
|
||||
error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
// Fall back to original request
|
||||
setRequest(event.payload);
|
||||
}
|
||||
} else {
|
||||
setRequest(event.payload);
|
||||
}
|
||||
|
||||
setIsOpen(true);
|
||||
},
|
||||
);
|
||||
|
||||
// Listen for deep link error events
|
||||
const unlistenError = listen<DeeplinkError>("deeplink-error", (event) => {
|
||||
console.error("Deep link error:", event.payload);
|
||||
toast.error(t("deeplink.parseError"), {
|
||||
description: event.payload.error,
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
unlistenImport.then((fn) => fn());
|
||||
unlistenError.then((fn) => fn());
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
const handleImport = async () => {
|
||||
if (!request) return;
|
||||
|
||||
setIsImporting(true);
|
||||
|
||||
try {
|
||||
const result = await deeplinkApi.importFromDeeplink(request);
|
||||
const refreshMcp = async (summary: {
|
||||
importedCount: number;
|
||||
importedIds: string[];
|
||||
failed: Array<{ id: string; error: string }>;
|
||||
}) => {
|
||||
// 强制刷新 MCP 相关缓存，确保管理页重新从数据库加载
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["mcp", "all"],
|
||||
refetchType: "all",
|
||||
});
|
||||
await queryClient.refetchQueries({
|
||||
queryKey: ["mcp", "all"],
|
||||
type: "all",
|
||||
});
|
||||
|
||||
if (summary.failed.length > 0) {
|
||||
toast.warning(t("deeplink.mcpPartialSuccess"), {
|
||||
description: t("deeplink.mcpPartialSuccessDescription", {
|
||||
success: summary.importedCount,
|
||||
failed: summary.failed.length,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
toast.success(t("deeplink.mcpImportSuccess"), {
|
||||
description: t("deeplink.mcpImportSuccessDescription", {
|
||||
count: summary.importedCount,
|
||||
}),
|
||||
closeButton: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Handle different result types
|
||||
if ("type" in result) {
|
||||
if (result.type === "provider") {
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["providers", request.app],
|
||||
});
|
||||
toast.success(t("deeplink.importSuccess"), {
|
||||
description: t("deeplink.importSuccessDescription", {
|
||||
name: request.name,
|
||||
}),
|
||||
closeButton: true,
|
||||
});
|
||||
} else if (result.type === "prompt") {
|
||||
// Prompts don't use React Query, trigger a custom event for refresh
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("prompt-imported", {
|
||||
detail: { app: request.app },
|
||||
}),
|
||||
);
|
||||
toast.success(t("deeplink.promptImportSuccess"), {
|
||||
description: t("deeplink.promptImportSuccessDescription", {
|
||||
name: request.name,
|
||||
}),
|
||||
closeButton: true,
|
||||
});
|
||||
} else if (result.type === "mcp") {
|
||||
await refreshMcp(result);
|
||||
} else if (result.type === "skill") {
|
||||
// Refresh Skills with aggressive strategy
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["skills"],
|
||||
refetchType: "all",
|
||||
});
|
||||
await queryClient.refetchQueries({
|
||||
queryKey: ["skills"],
|
||||
type: "all",
|
||||
});
|
||||
toast.success(t("deeplink.skillImportSuccess"), {
|
||||
description: t("deeplink.skillImportSuccessDescription", {
|
||||
repo: request.repo,
|
||||
}),
|
||||
closeButton: true,
|
||||
});
|
||||
}
|
||||
} else if (isMcpImportResult(result)) {
|
||||
// 兜底处理：旧版本后端可能未返回 type 字段
|
||||
await refreshMcp(result);
|
||||
} else {
|
||||
// Legacy return type (string ID) - assume provider
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["providers", request.app],
|
||||
});
|
||||
toast.success(t("deeplink.importSuccess"), {
|
||||
description: t("deeplink.importSuccessDescription", {
|
||||
name: request.name,
|
||||
}),
|
||||
closeButton: true,
|
||||
});
|
||||
}
|
||||
|
||||
// Close dialog after all refreshes complete
|
||||
setIsOpen(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to import from deep link:", error);
|
||||
toast.error(t("deeplink.importError"), {
|
||||
description: error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
// Mask API key for display (show first 4 chars + ***)
|
||||
const maskedApiKey =
|
||||
request?.apiKey && request.apiKey.length > 4
|
||||
? `${request.apiKey.substring(0, 4)}${"*".repeat(20)}`
|
||||
: "****";
|
||||
|
||||
// Check if config file is present
|
||||
const hasConfigFile = !!(request?.config || request?.configUrl);
|
||||
const configSource = request?.config
|
||||
? "base64"
|
||||
: request?.configUrl
|
||||
? "url"
|
||||
: null;
|
||||
|
||||
// Parse config file content for display
|
||||
interface ParsedConfig {
|
||||
type: "claude" | "codex" | "gemini";
|
||||
env?: Record<string, string>;
|
||||
auth?: Record<string, string>;
|
||||
tomlConfig?: string;
|
||||
raw: Record<string, unknown>;
|
||||
}
|
||||
|
||||
// Helper to decode base64 with UTF-8 support
|
||||
const b64ToUtf8 = (str: string): string => {
|
||||
try {
|
||||
const binString = atob(str);
|
||||
const bytes = Uint8Array.from(binString, (m) => m.codePointAt(0) || 0);
|
||||
return new TextDecoder().decode(bytes);
|
||||
} catch (e) {
|
||||
console.error("Failed to decode base64:", e);
|
||||
return atob(str);
|
||||
}
|
||||
};
|
||||
|
||||
const parsedConfig = useMemo((): ParsedConfig | null => {
|
||||
if (!request?.config) return null;
|
||||
try {
|
||||
const decoded = b64ToUtf8(request.config);
|
||||
const parsed = JSON.parse(decoded) as Record<string, unknown>;
|
||||
|
||||
if (request.app === "claude") {
|
||||
// Claude 格式: { env: { ANTHROPIC_AUTH_TOKEN: ..., ... } }
|
||||
return {
|
||||
type: "claude",
|
||||
env: (parsed.env as Record<string, string>) || {},
|
||||
raw: parsed,
|
||||
};
|
||||
} else if (request.app === "codex") {
|
||||
// Codex 格式: { auth: { OPENAI_API_KEY: ... }, config: "TOML string" }
|
||||
return {
|
||||
type: "codex",
|
||||
auth: (parsed.auth as Record<string, string>) || {},
|
||||
tomlConfig: (parsed.config as string) || "",
|
||||
raw: parsed,
|
||||
};
|
||||
} else if (request.app === "gemini") {
|
||||
// Gemini 格式: 扁平结构 { GEMINI_API_KEY: ..., GEMINI_BASE_URL: ... }
|
||||
return {
|
||||
type: "gemini",
|
||||
env: parsed as Record<string, string>,
|
||||
raw: parsed,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
} catch (e) {
|
||||
console.error("Failed to parse config:", e);
|
||||
return null;
|
||||
}
|
||||
}, [request?.config, request?.app]);
|
||||
|
||||
// Helper to mask sensitive values
|
||||
const maskValue = (key: string, value: string): string => {
|
||||
const sensitiveKeys = ["TOKEN", "KEY", "SECRET", "PASSWORD"];
|
||||
const isSensitive = sensitiveKeys.some((k) =>
|
||||
key.toUpperCase().includes(k),
|
||||
);
|
||||
if (isSensitive && value.length > 8) {
|
||||
return `${value.substring(0, 8)}${"*".repeat(12)}`;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
const getTitle = () => {
|
||||
if (!request) return t("deeplink.confirmImport");
|
||||
switch (request.resource) {
|
||||
case "prompt":
|
||||
return t("deeplink.importPrompt");
|
||||
case "mcp":
|
||||
return t("deeplink.importMcp");
|
||||
case "skill":
|
||||
return t("deeplink.importSkill");
|
||||
default:
|
||||
return t("deeplink.confirmImport");
|
||||
}
|
||||
};
|
||||
|
||||
const getDescription = () => {
|
||||
if (!request) return t("deeplink.confirmImportDescription");
|
||||
switch (request.resource) {
|
||||
case "prompt":
|
||||
return t("deeplink.importPromptDescription");
|
||||
case "mcp":
|
||||
return t("deeplink.importMcpDescription");
|
||||
case "skill":
|
||||
return t("deeplink.importSkillDescription");
|
||||
default:
|
||||
return t("deeplink.confirmImportDescription");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen && !!request} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="sm:max-w-[500px]" zIndex="top">
|
||||
{request && (
|
||||
<>
|
||||
{/* 标题显式左对齐，避免默认居中样式影响 */}
|
||||
<DialogHeader className="text-left sm:text-left">
|
||||
<DialogTitle>{getTitle()}</DialogTitle>
|
||||
<DialogDescription>{getDescription()}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 主体内容整体右移，略大于标题内边距，让内容看起来不贴边 */}
|
||||
<div className="space-y-4 px-8 py-4 max-h-[60vh] overflow-y-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:block [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-700">
|
||||
{request.resource === "prompt" && (
|
||||
<PromptConfirmation request={request} />
|
||||
)}
|
||||
{request.resource === "mcp" && (
|
||||
<McpConfirmation request={request} />
|
||||
)}
|
||||
{request.resource === "skill" && (
|
||||
<SkillConfirmation request={request} />
|
||||
)}
|
||||
|
||||
{/* Legacy Provider View */}
|
||||
{(request.resource === "provider" || !request.resource) && (
|
||||
<>
|
||||
{/* Provider Icon - enlarge and center near the top */}
|
||||
{request.icon && (
|
||||
<div className="flex justify-center pt-2 pb-1">
|
||||
<ProviderIcon
|
||||
icon={request.icon}
|
||||
name={request.name || request.icon}
|
||||
size={80}
|
||||
className="drop-shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* App Type */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.app")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-medium capitalize">
|
||||
{request.app}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Provider Name */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.providerName")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-medium">
|
||||
{request.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Homepage */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.homepage")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm break-all text-blue-600 dark:text-blue-400">
|
||||
{request.homepage}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Endpoint */}
|
||||
<div className="grid grid-cols-3 items-start gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground pt-0.5">
|
||||
{t("deeplink.endpoint")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm break-all space-y-1">
|
||||
{request.endpoint?.split(",").map((ep, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={
|
||||
idx === 0 ? "font-medium" : "text-muted-foreground"
|
||||
}
|
||||
>
|
||||
{idx === 0 ? "🔹 " : "└ "}
|
||||
{ep.trim()}
|
||||
{idx === 0 && request.endpoint?.includes(",") && (
|
||||
<span className="text-xs text-muted-foreground ml-2">
|
||||
({t("deeplink.primaryEndpoint")})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Key (masked) */}
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.apiKey")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono text-muted-foreground">
|
||||
{maskedApiKey}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model Fields - 根据应用类型显示不同的模型字段 */}
|
||||
{request.app === "claude" ? (
|
||||
<>
|
||||
{/* Claude 四种模型字段 */}
|
||||
{request.haikuModel && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.haikuModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.haikuModel}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{request.sonnetModel && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.sonnetModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.sonnetModel}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{request.opusModel && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.opusModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.opusModel}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{request.model && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.multiModel")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.model}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Codex 和 Gemini 使用通用 model 字段 */}
|
||||
{request.model && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.model")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono">
|
||||
{request.model}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Notes (if present) */}
|
||||
{request.notes && (
|
||||
<div className="grid grid-cols-3 items-start gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.notes")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm text-muted-foreground">
|
||||
{request.notes}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Config File Details (v3.8+) */}
|
||||
{hasConfigFile && (
|
||||
<div className="space-y-3 pt-2 border-t border-border-default">
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.configSource")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-md bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium">
|
||||
{configSource === "base64"
|
||||
? t("deeplink.configEmbedded")
|
||||
: t("deeplink.configRemote")}
|
||||
</span>
|
||||
{request.configFormat && (
|
||||
<span className="ml-2 text-xs text-muted-foreground uppercase">
|
||||
{request.configFormat}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Parsed Config Details */}
|
||||
{parsedConfig && (
|
||||
<div className="rounded-lg bg-muted/50 p-3 space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{t("deeplink.configDetails")}
|
||||
</div>
|
||||
|
||||
{/* Claude config */}
|
||||
{parsedConfig.type === "claude" &&
|
||||
parsedConfig.env && (
|
||||
<div className="space-y-1.5">
|
||||
{Object.entries(parsedConfig.env).map(
|
||||
([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="grid grid-cols-2 gap-2 text-xs"
|
||||
>
|
||||
<span className="font-mono text-muted-foreground truncate">
|
||||
{key}
|
||||
</span>
|
||||
<span className="font-mono truncate">
|
||||
{maskValue(key, String(value))}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Codex config */}
|
||||
{parsedConfig.type === "codex" && (
|
||||
<div className="space-y-2">
|
||||
{parsedConfig.auth &&
|
||||
Object.keys(parsedConfig.auth).length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Auth:
|
||||
</div>
|
||||
{Object.entries(parsedConfig.auth).map(
|
||||
([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="grid grid-cols-2 gap-2 text-xs pl-2"
|
||||
>
|
||||
<span className="font-mono text-muted-foreground truncate">
|
||||
{key}
|
||||
</span>
|
||||
<span className="font-mono truncate">
|
||||
{maskValue(key, String(value))}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{parsedConfig.tomlConfig && (
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
TOML Config:
|
||||
</div>
|
||||
<pre className="text-xs font-mono bg-background p-2 rounded overflow-x-auto max-h-24 whitespace-pre-wrap">
|
||||
{parsedConfig.tomlConfig.substring(0, 300)}
|
||||
{parsedConfig.tomlConfig.length > 300 &&
|
||||
"..."}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gemini config */}
|
||||
{parsedConfig.type === "gemini" &&
|
||||
parsedConfig.env && (
|
||||
<div className="space-y-1.5">
|
||||
{Object.entries(parsedConfig.env).map(
|
||||
([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="grid grid-cols-2 gap-2 text-xs"
|
||||
>
|
||||
<span className="font-mono text-muted-foreground truncate">
|
||||
{key}
|
||||
</span>
|
||||
<span className="font-mono truncate">
|
||||
{maskValue(key, String(value))}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Config URL (if remote) */}
|
||||
{request.configUrl && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.configUrl")}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono text-muted-foreground break-all">
|
||||
{request.configUrl}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Usage Script Configuration (v3.9+) */}
|
||||
{request.usageScript && (
|
||||
<div className="space-y-3 pt-2 border-t border-border-default">
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.usageScript", {
|
||||
defaultValue: "用量查询",
|
||||
})}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium ${
|
||||
request.usageEnabled !== false
|
||||
? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300"
|
||||
: "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{request.usageEnabled !== false
|
||||
? t("deeplink.usageScriptEnabled", {
|
||||
defaultValue: "已启用",
|
||||
})
|
||||
: t("deeplink.usageScriptDisabled", {
|
||||
defaultValue: "未启用",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Usage API Key (if different from provider) */}
|
||||
{request.usageApiKey &&
|
||||
request.usageApiKey !== request.apiKey && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.usageApiKey", {
|
||||
defaultValue: "用量 API Key",
|
||||
})}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-mono text-muted-foreground">
|
||||
{request.usageApiKey.length > 4
|
||||
? `${request.usageApiKey.substring(0, 4)}${"*".repeat(12)}`
|
||||
: "****"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Usage Base URL (if different from provider) */}
|
||||
{request.usageBaseUrl &&
|
||||
request.usageBaseUrl !== request.endpoint && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.usageBaseUrl", {
|
||||
defaultValue: "用量查询地址",
|
||||
})}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm break-all">
|
||||
{request.usageBaseUrl}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Auto Query Interval */}
|
||||
{request.usageAutoInterval &&
|
||||
request.usageAutoInterval > 0 && (
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<div className="font-medium text-sm text-muted-foreground">
|
||||
{t("deeplink.usageAutoInterval", {
|
||||
defaultValue: "自动查询",
|
||||
})}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm">
|
||||
{t("deeplink.usageAutoIntervalValue", {
|
||||
defaultValue: "每 {{minutes}} 分钟",
|
||||
minutes: request.usageAutoInterval,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Warning */}
|
||||
<div className="rounded-lg bg-yellow-50 dark:bg-yellow-900/20 p-3 text-sm text-yellow-800 dark:text-yellow-200">
|
||||
{t("deeplink.warning")}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancel}
|
||||
disabled={isImporting}
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button onClick={handleImport} disabled={isImporting}>
|
||||
{isImporting ? t("deeplink.importing") : t("deeplink.import")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { Sparkles } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useSettingsQuery } from "@/lib/query";
|
||||
import { settingsApi } from "@/lib/api";
|
||||
|
||||
/** 首次运行欢迎提示：仅当后端启动阶段保留 firstRunNoticeConfirmed 为空时弹出。 */
|
||||
export function FirstRunNoticeDialog() {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const { data: settings } = useSettingsQuery();
|
||||
|
||||
// 后端启动时已经决定好要不要弹：条件不满足的话字段会立即被写成 true，
|
||||
// 所以前端这里只需要判空即可——完全对齐 streamCheckConfirmed 等既有 flag 的模式。
|
||||
const isOpen = settings != null && settings.firstRunNoticeConfirmed !== true;
|
||||
|
||||
const handleAcknowledge = async () => {
|
||||
if (!settings) return;
|
||||
try {
|
||||
const { webdavSync: _, ...rest } = settings;
|
||||
await settingsApi.save({ ...rest, firstRunNoticeConfirmed: true });
|
||||
await queryClient.invalidateQueries({ queryKey: ["settings"] });
|
||||
} catch (error) {
|
||||
console.error("Failed to save firstRunNoticeConfirmed:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) void handleAcknowledge();
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-md" zIndex="top">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-blue-500" />
|
||||
{t("firstRunNotice.title")}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-3 px-6 py-5">
|
||||
<DialogDescription className="whitespace-pre-line leading-relaxed">
|
||||
{t("firstRunNotice.bodyDefault")}
|
||||
</DialogDescription>
|
||||
<DialogDescription className="whitespace-pre-line leading-relaxed">
|
||||
{t("firstRunNotice.bodyOfficial")}
|
||||
</DialogDescription>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button onClick={handleAcknowledge}>
|
||||
{t("firstRunNotice.confirm")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { ProviderIcon } from "./ProviderIcon";
|
||||
import { iconList } from "@/icons/extracted";
|
||||
import { searchIcons, getIconMetadata } from "@/icons/extracted/metadata";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface IconPickerProps {
|
||||
value?: string; // 当前选中的图标
|
||||
onValueChange: (icon: string) => void; // 选择回调
|
||||
color?: string; // 预览颜色
|
||||
}
|
||||
|
||||
export const IconPicker: React.FC<IconPickerProps> = ({
|
||||
value,
|
||||
onValueChange,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
// 过滤图标列表
|
||||
const filteredIcons = useMemo(() => {
|
||||
if (!searchQuery) return iconList;
|
||||
return searchIcons(searchQuery);
|
||||
}, [searchQuery]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="icon-search">
|
||||
{t("iconPicker.search", { defaultValue: "搜索图标" })}
|
||||
</Label>
|
||||
<Input
|
||||
id="icon-search"
|
||||
type="text"
|
||||
placeholder={t("iconPicker.searchPlaceholder", {
|
||||
defaultValue: "输入图标名称...",
|
||||
})}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[65vh] overflow-y-auto pr-1">
|
||||
<div className="grid grid-cols-6 sm:grid-cols-8 lg:grid-cols-10 gap-2">
|
||||
{filteredIcons.map((iconName) => {
|
||||
const meta = getIconMetadata(iconName);
|
||||
const isSelected = value === iconName;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={iconName}
|
||||
type="button"
|
||||
onClick={() => onValueChange(iconName)}
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-1 p-3 rounded-lg",
|
||||
"border-2 transition-all duration-200",
|
||||
"hover:bg-accent hover:border-primary/50",
|
||||
isSelected
|
||||
? "border-primary bg-primary/10"
|
||||
: "border-transparent",
|
||||
)}
|
||||
title={meta?.displayName || iconName}
|
||||
>
|
||||
<ProviderIcon icon={iconName} name={iconName} size={32} />
|
||||
<span className="text-xs text-muted-foreground truncate w-full text-center">
|
||||
{meta?.displayName || iconName}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredIcons.length === 0 && (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
{t("iconPicker.noResults", { defaultValue: "未找到匹配的图标" })}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,278 @@
|
||||
import React, { useRef, useEffect, useMemo } from "react";
|
||||
import { EditorView, basicSetup } from "codemirror";
|
||||
import { json } from "@codemirror/lang-json";
|
||||
import { javascript } from "@codemirror/lang-javascript";
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
import { EditorState } from "@codemirror/state";
|
||||
import { placeholder } from "@codemirror/view";
|
||||
import { linter, Diagnostic } from "@codemirror/lint";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Wand2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { formatJSON } from "@/utils/formatters";
|
||||
|
||||
interface JsonEditorProps {
|
||||
id?: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
darkMode?: boolean;
|
||||
rows?: number;
|
||||
showValidation?: boolean;
|
||||
language?: "json" | "javascript";
|
||||
height?: string | number;
|
||||
showMinimap?: boolean; // 添加此属性以防未来使用
|
||||
}
|
||||
|
||||
const JsonEditor: React.FC<JsonEditorProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
placeholder: placeholderText = "",
|
||||
darkMode = false,
|
||||
rows = 12,
|
||||
showValidation = true,
|
||||
language = "json",
|
||||
height,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const editorRef = useRef<HTMLDivElement>(null);
|
||||
const viewRef = useRef<EditorView | null>(null);
|
||||
|
||||
// JSON linter 函数
|
||||
const jsonLinter = useMemo(
|
||||
() =>
|
||||
linter((view) => {
|
||||
const diagnostics: Diagnostic[] = [];
|
||||
if (!showValidation || language !== "json") return diagnostics;
|
||||
|
||||
const doc = view.state.doc.toString();
|
||||
if (!doc.trim()) return diagnostics;
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(doc);
|
||||
// 检查是否是JSON对象
|
||||
if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
|
||||
// 格式正确
|
||||
} else {
|
||||
diagnostics.push({
|
||||
from: 0,
|
||||
to: doc.length,
|
||||
severity: "error",
|
||||
message: t("jsonEditor.mustBeObject"),
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
// 简单处理JSON解析错误
|
||||
const message =
|
||||
e instanceof SyntaxError ? e.message : t("jsonEditor.invalidJson");
|
||||
diagnostics.push({
|
||||
from: 0,
|
||||
to: doc.length,
|
||||
severity: "error",
|
||||
message,
|
||||
});
|
||||
}
|
||||
|
||||
return diagnostics;
|
||||
}),
|
||||
[showValidation, language, t],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editorRef.current) return;
|
||||
|
||||
// 创建编辑器扩展
|
||||
const minHeightPx = height ? undefined : Math.max(1, rows) * 18;
|
||||
|
||||
// 使用 baseTheme 定义基础样式，优先级低于 oneDark，但可以正确响应主题
|
||||
const baseTheme = EditorView.baseTheme({
|
||||
".cm-editor": {
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "0.5rem",
|
||||
background: "transparent",
|
||||
},
|
||||
".cm-editor.cm-focused": {
|
||||
outline: "none",
|
||||
borderColor: "hsl(var(--primary))",
|
||||
},
|
||||
".cm-scroller": {
|
||||
background: "transparent",
|
||||
},
|
||||
".cm-gutters": {
|
||||
background: "transparent",
|
||||
borderRight: "1px solid hsl(var(--border))",
|
||||
color: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
".cm-selectionBackground, .cm-content ::selection": {
|
||||
background: "hsl(var(--primary) / 0.18)",
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
background: "hsl(var(--primary) / 0.12)",
|
||||
},
|
||||
".cm-activeLine": {
|
||||
background: "hsl(var(--primary) / 0.08)",
|
||||
},
|
||||
".cm-activeLineGutter": {
|
||||
background: "hsl(var(--primary) / 0.08)",
|
||||
},
|
||||
});
|
||||
|
||||
// 使用 theme 定义尺寸和字体样式
|
||||
const heightValue = height
|
||||
? typeof height === "number"
|
||||
? `${height}px`
|
||||
: height
|
||||
: undefined;
|
||||
const sizingTheme = EditorView.theme({
|
||||
"&": heightValue
|
||||
? { height: heightValue }
|
||||
: { minHeight: `${minHeightPx}px` },
|
||||
".cm-scroller": { overflow: "auto" },
|
||||
".cm-content": {
|
||||
fontFamily:
|
||||
"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
|
||||
fontSize: "14px",
|
||||
},
|
||||
});
|
||||
|
||||
const extensions = [
|
||||
basicSetup,
|
||||
language === "javascript" ? javascript() : json(),
|
||||
placeholder(placeholderText || ""),
|
||||
baseTheme,
|
||||
sizingTheme,
|
||||
jsonLinter,
|
||||
EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged) {
|
||||
const newValue = update.state.doc.toString();
|
||||
onChange(newValue);
|
||||
}
|
||||
}),
|
||||
];
|
||||
|
||||
// 如果启用深色模式，添加深色主题
|
||||
if (darkMode) {
|
||||
extensions.push(oneDark);
|
||||
// 在 oneDark 之后强制覆盖边框样式
|
||||
extensions.push(
|
||||
EditorView.theme({
|
||||
".cm-editor": {
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "0.5rem",
|
||||
background: "transparent",
|
||||
},
|
||||
".cm-editor.cm-focused": {
|
||||
outline: "none",
|
||||
borderColor: "hsl(var(--primary))",
|
||||
},
|
||||
".cm-scroller": {
|
||||
background: "transparent",
|
||||
},
|
||||
".cm-gutters": {
|
||||
background: "transparent",
|
||||
borderRight: "1px solid hsl(var(--border))",
|
||||
color: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
".cm-selectionBackground, .cm-content ::selection": {
|
||||
background: "hsl(var(--primary) / 0.18)",
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
background: "hsl(var(--primary) / 0.12)",
|
||||
},
|
||||
".cm-activeLine": {
|
||||
background: "hsl(var(--primary) / 0.08)",
|
||||
},
|
||||
".cm-activeLineGutter": {
|
||||
background: "hsl(var(--primary) / 0.08)",
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
// 创建初始状态
|
||||
const state = EditorState.create({
|
||||
doc: value,
|
||||
extensions,
|
||||
});
|
||||
|
||||
// 创建编辑器视图
|
||||
const view = new EditorView({
|
||||
state,
|
||||
parent: editorRef.current,
|
||||
});
|
||||
|
||||
viewRef.current = view;
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
view.destroy();
|
||||
viewRef.current = null;
|
||||
};
|
||||
}, [darkMode, rows, height, language, jsonLinter]); // 依赖项中不包含 onChange 和 placeholder，避免不必要的重建
|
||||
|
||||
// 当 value 从外部改变时更新编辑器内容
|
||||
useEffect(() => {
|
||||
if (viewRef.current && viewRef.current.state.doc.toString() !== value) {
|
||||
const transaction = viewRef.current.state.update({
|
||||
changes: {
|
||||
from: 0,
|
||||
to: viewRef.current.state.doc.length,
|
||||
insert: value,
|
||||
},
|
||||
});
|
||||
viewRef.current.dispatch(transaction);
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
// 格式化处理函数
|
||||
const handleFormat = () => {
|
||||
if (!viewRef.current) return;
|
||||
|
||||
const currentValue = viewRef.current.state.doc.toString();
|
||||
if (!currentValue.trim()) return;
|
||||
|
||||
try {
|
||||
const formatted = formatJSON(currentValue);
|
||||
onChange(formatted);
|
||||
toast.success(t("common.formatSuccess", { defaultValue: "格式化成功" }), {
|
||||
closeButton: true,
|
||||
});
|
||||
} catch (error) {
|
||||
const errorMessage =
|
||||
error instanceof Error ? error.message : String(error);
|
||||
toast.error(
|
||||
t("common.formatError", {
|
||||
defaultValue: "格式化失败：{{error}}",
|
||||
error: errorMessage,
|
||||
}),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const isFullHeight = height === "100%";
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ width: "100%", height: isFullHeight ? "100%" : "auto" }}
|
||||
className={isFullHeight ? "flex flex-col" : ""}
|
||||
>
|
||||
<div
|
||||
ref={editorRef}
|
||||
style={{ width: "100%", height: isFullHeight ? undefined : "auto" }}
|
||||
className={isFullHeight ? "flex-1 min-h-0" : ""}
|
||||
/>
|
||||
{language === "json" && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFormat}
|
||||
className={`${isFullHeight ? "mt-2 flex-shrink-0" : "mt-2"} inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors`}
|
||||
>
|
||||
<Wand2 className="w-3.5 h-3.5" />
|
||||
{t("common.format", { defaultValue: "格式化" })}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JsonEditor;
|
||||
@@ -0,0 +1,159 @@
|
||||
import React, { useRef, useEffect } from "react";
|
||||
import { EditorView, basicSetup } from "codemirror";
|
||||
import { markdown } from "@codemirror/lang-markdown";
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
import { EditorState } from "@codemirror/state";
|
||||
import { placeholder as placeholderExt } from "@codemirror/view";
|
||||
|
||||
interface MarkdownEditorProps {
|
||||
value: string;
|
||||
onChange?: (value: string) => void;
|
||||
placeholder?: string;
|
||||
darkMode?: boolean;
|
||||
readOnly?: boolean;
|
||||
className?: string;
|
||||
minHeight?: string;
|
||||
maxHeight?: string;
|
||||
}
|
||||
|
||||
const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
placeholder: placeholderText = "",
|
||||
darkMode = false,
|
||||
readOnly = false,
|
||||
className = "",
|
||||
minHeight = "300px",
|
||||
maxHeight,
|
||||
}) => {
|
||||
const editorRef = useRef<HTMLDivElement>(null);
|
||||
const viewRef = useRef<EditorView | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editorRef.current) return;
|
||||
|
||||
// 定义基础主题
|
||||
const baseTheme = EditorView.baseTheme({
|
||||
"&": {
|
||||
height: "100%",
|
||||
minHeight,
|
||||
maxHeight: maxHeight || "none",
|
||||
},
|
||||
".cm-scroller": {
|
||||
overflow: "auto",
|
||||
fontFamily:
|
||||
"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
|
||||
fontSize: "14px",
|
||||
},
|
||||
"&light .cm-content, &dark .cm-content": {
|
||||
padding: "12px 0",
|
||||
},
|
||||
"&light .cm-editor, &dark .cm-editor": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
"&.cm-focused": {
|
||||
outline: "none",
|
||||
},
|
||||
});
|
||||
|
||||
const extensions = [
|
||||
basicSetup,
|
||||
markdown(),
|
||||
baseTheme,
|
||||
EditorView.lineWrapping,
|
||||
EditorState.readOnly.of(readOnly),
|
||||
];
|
||||
|
||||
if (!readOnly) {
|
||||
extensions.push(
|
||||
placeholderExt(placeholderText),
|
||||
EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged && onChange) {
|
||||
onChange(update.state.doc.toString());
|
||||
}
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
// 只读模式下隐藏光标和高亮行
|
||||
extensions.push(
|
||||
EditorView.theme({
|
||||
".cm-cursor, .cm-dropCursor": { border: "none" },
|
||||
".cm-activeLine": { backgroundColor: "transparent !important" },
|
||||
".cm-activeLineGutter": { backgroundColor: "transparent !important" },
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
// 如果启用深色模式，添加深色主题
|
||||
if (darkMode) {
|
||||
extensions.push(oneDark);
|
||||
} else {
|
||||
// 浅色模式下的简单样式调整，使其更融入 UI
|
||||
extensions.push(
|
||||
EditorView.theme(
|
||||
{
|
||||
"&": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
".cm-content": {
|
||||
color: "#374151", // text-gray-700
|
||||
},
|
||||
".cm-gutters": {
|
||||
backgroundColor: "#f9fafb", // bg-gray-50
|
||||
color: "#9ca3af", // text-gray-400
|
||||
borderRight: "1px solid #e5e7eb", // border-gray-200
|
||||
},
|
||||
".cm-activeLineGutter": {
|
||||
backgroundColor: "#e5e7eb",
|
||||
},
|
||||
},
|
||||
{ dark: false },
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// 创建初始状态
|
||||
const state = EditorState.create({
|
||||
doc: value,
|
||||
extensions,
|
||||
});
|
||||
|
||||
// 创建编辑器视图
|
||||
const view = new EditorView({
|
||||
state,
|
||||
parent: editorRef.current,
|
||||
});
|
||||
|
||||
viewRef.current = view;
|
||||
|
||||
return () => {
|
||||
view.destroy();
|
||||
viewRef.current = null;
|
||||
};
|
||||
}, [darkMode, readOnly, minHeight, maxHeight, placeholderText]); // 添加 placeholderText 依赖以支持国际化切换
|
||||
|
||||
// 当 value 从外部改变时更新编辑器内容
|
||||
useEffect(() => {
|
||||
if (viewRef.current && viewRef.current.state.doc.toString() !== value) {
|
||||
const transaction = viewRef.current.state.update({
|
||||
changes: {
|
||||
from: 0,
|
||||
to: viewRef.current.state.doc.length,
|
||||
insert: value,
|
||||
},
|
||||
});
|
||||
viewRef.current.dispatch(transaction);
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={editorRef}
|
||||
className={`border rounded-md overflow-hidden ${
|
||||
darkMode ? "border-gray-800" : "border-gray-200"
|
||||
} ${className}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarkdownEditor;
|
||||
@@ -0,0 +1,133 @@
|
||||
import React, { useMemo } from "react";
|
||||
import {
|
||||
getIcon,
|
||||
hasIcon,
|
||||
getIconMetadata,
|
||||
getIconUrl,
|
||||
isUrlIcon,
|
||||
} from "@/icons/extracted";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ProviderIconProps {
|
||||
icon?: string; // 图标名称
|
||||
name: string; // 供应商名称（用于 fallback）
|
||||
color?: string; // 自定义颜色 (Deprecated, kept for compatibility but ignored for SVG)
|
||||
size?: number | string; // 尺寸
|
||||
className?: string;
|
||||
showFallback?: boolean; // 是否显示 fallback
|
||||
}
|
||||
|
||||
export const ProviderIcon: React.FC<ProviderIconProps> = ({
|
||||
icon,
|
||||
name,
|
||||
color,
|
||||
size = 32,
|
||||
className,
|
||||
showFallback = true,
|
||||
}) => {
|
||||
// 获取内联 SVG 字符串
|
||||
const iconSvg = useMemo(() => {
|
||||
if (icon && !isUrlIcon(icon) && hasIcon(icon)) {
|
||||
return getIcon(icon);
|
||||
}
|
||||
return "";
|
||||
}, [icon]);
|
||||
|
||||
// 获取图标 URL（URL_ICONS 列表中的 SVG / 光栅图片）
|
||||
const iconUrl = useMemo(() => {
|
||||
if (icon && isUrlIcon(icon)) {
|
||||
return getIconUrl(icon);
|
||||
}
|
||||
return "";
|
||||
}, [icon]);
|
||||
|
||||
// 计算尺寸样式
|
||||
const sizeStyle = useMemo(() => {
|
||||
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
||||
return {
|
||||
width: sizeValue,
|
||||
height: sizeValue,
|
||||
fontSize: sizeValue,
|
||||
lineHeight: 1,
|
||||
};
|
||||
}, [size]);
|
||||
|
||||
// 获取有效颜色：优先使用传入的有效 color，否则从元数据获取 defaultColor
|
||||
const effectiveColor = useMemo(() => {
|
||||
if (color && typeof color === "string" && color.trim() !== "") {
|
||||
return color;
|
||||
}
|
||||
if (icon) {
|
||||
const metadata = getIconMetadata(icon);
|
||||
if (metadata?.defaultColor && metadata.defaultColor !== "currentColor") {
|
||||
return metadata.defaultColor;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}, [color, icon]);
|
||||
|
||||
// 内联 SVG 渲染（支持 CSS currentColor 着色）
|
||||
if (iconSvg) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center flex-shrink-0",
|
||||
className,
|
||||
)}
|
||||
title={name}
|
||||
style={{ ...sizeStyle, color: effectiveColor }}
|
||||
dangerouslySetInnerHTML={{ __html: iconSvg }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// URL-based 图标（大型 SVG / 光栅图片）：以 <img> 渲染
|
||||
if (iconUrl) {
|
||||
return (
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt={name}
|
||||
title={name}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center flex-shrink-0 object-contain",
|
||||
className,
|
||||
)}
|
||||
style={{ width: sizeStyle.width, height: sizeStyle.height }}
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Fallback：显示首字母
|
||||
if (showFallback) {
|
||||
const initials = name
|
||||
.split(" ")
|
||||
.map((word) => word[0])
|
||||
.join("")
|
||||
.toUpperCase()
|
||||
.slice(0, 2);
|
||||
const fallbackFontSize =
|
||||
typeof size === "number" ? `${Math.max(size * 0.5, 12)}px` : "0.5em";
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center flex-shrink-0 rounded-lg",
|
||||
"bg-muted text-muted-foreground font-semibold",
|
||||
className,
|
||||
)}
|
||||
title={name}
|
||||
style={sizeStyle}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: fallbackFontSize,
|
||||
}}
|
||||
>
|
||||
{initials}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
@@ -0,0 +1,431 @@
|
||||
import React from "react";
|
||||
import { RefreshCw, AlertCircle, Clock } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { AppId } from "@/lib/api";
|
||||
import { useSubscriptionQuota } from "@/lib/query/subscription";
|
||||
import type { QuotaTier, SubscriptionQuota } from "@/types/subscription";
|
||||
|
||||
interface SubscriptionQuotaFooterProps {
|
||||
appId: AppId;
|
||||
inline?: boolean;
|
||||
isCurrent?: boolean;
|
||||
autoQueryInterval?: number;
|
||||
}
|
||||
|
||||
interface SubscriptionQuotaViewProps {
|
||||
quota: SubscriptionQuota | undefined;
|
||||
loading: boolean;
|
||||
refetch: () => void;
|
||||
/** 用于 `subscription.expiredHint` 的 {tool} 插值；解耦了 hook 的 appId */
|
||||
appIdForExpiredHint: string;
|
||||
inline?: boolean;
|
||||
}
|
||||
|
||||
/** 已知 tier 名称的显示映射（官方订阅 + Token Plan 共用） */
|
||||
export const TIER_I18N_KEYS: Record<string, string> = {
|
||||
five_hour: "subscription.fiveHour",
|
||||
seven_day: "subscription.sevenDay",
|
||||
seven_day_opus: "subscription.sevenDayOpus",
|
||||
seven_day_sonnet: "subscription.sevenDaySonnet",
|
||||
// Codex 免费方案的次要窗口是 30 天（付费方案为 7 天）
|
||||
"30_day": "subscription.thirtyDay",
|
||||
// Gemini 模型分类
|
||||
gemini_pro: "subscription.geminiPro",
|
||||
gemini_flash: "subscription.geminiFlash",
|
||||
gemini_flash_lite: "subscription.geminiFlashLite",
|
||||
// Token Plan（five_hour 已在上方官方映射中）
|
||||
weekly_limit: "subscription.sevenDay",
|
||||
// 火山方舟 Agent Plan / Coding Plan 的月窗口
|
||||
monthly: "subscription.monthly",
|
||||
// GitHub Copilot
|
||||
premium: "subscription.copilotPremium",
|
||||
};
|
||||
|
||||
/** 根据使用百分比返回颜色 class */
|
||||
export function utilizationColor(utilization: number): string {
|
||||
if (utilization >= 90) return "text-red-500 dark:text-red-400";
|
||||
if (utilization >= 70) return "text-orange-500 dark:text-orange-400";
|
||||
return "text-green-600 dark:text-green-400";
|
||||
}
|
||||
|
||||
/** 计算倒计时的纯时间字符串，如 "2h30m"、"3d12h" */
|
||||
export function countdownStr(resetsAt: string | null): string | null {
|
||||
if (!resetsAt) return null;
|
||||
const diffMs = new Date(resetsAt).getTime() - Date.now();
|
||||
if (diffMs <= 0) return null;
|
||||
|
||||
const hours = Math.floor(diffMs / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
|
||||
|
||||
if (hours > 24) {
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d${hours % 24}h`;
|
||||
}
|
||||
if (hours > 0) return `${hours}h${minutes}m`;
|
||||
return `${minutes}m`;
|
||||
}
|
||||
|
||||
/** 格式化重置时间为倒计时文本（带 i18n 模板） */
|
||||
function formatResetTime(
|
||||
resetsAt: string | null,
|
||||
t: (key: string, options?: Record<string, string>) => string,
|
||||
): string | null {
|
||||
const time = countdownStr(resetsAt);
|
||||
if (!time) return null;
|
||||
return t("subscription.resetsIn", { time });
|
||||
}
|
||||
|
||||
/** 不需要在 inline 模式显示的 tier */
|
||||
const HIDDEN_INLINE_TIERS = new Set(["seven_day_sonnet"]);
|
||||
|
||||
/** 格式化相对时间（与 UsageFooter 一致） */
|
||||
function formatRelativeTime(
|
||||
timestamp: number,
|
||||
now: number,
|
||||
t: (key: string, options?: { count?: number }) => string,
|
||||
): string {
|
||||
const diff = Math.floor((now - timestamp) / 1000);
|
||||
if (diff < 60) return t("usage.justNow");
|
||||
if (diff < 3600)
|
||||
return t("usage.minutesAgo", { count: Math.floor(diff / 60) });
|
||||
if (diff < 86400)
|
||||
return t("usage.hoursAgo", { count: Math.floor(diff / 3600) });
|
||||
return t("usage.daysAgo", { count: Math.floor(diff / 86400) });
|
||||
}
|
||||
|
||||
/**
|
||||
* 纯展示组件：渲染 SubscriptionQuota 的 5 种状态（not_found / parse_error /
|
||||
* expired / API 失败 / 成功），支持 inline / expanded 两种布局。
|
||||
*
|
||||
* 数据源由调用方 hook 注入，方便不同的额度后端复用同一套渲染逻辑：
|
||||
* - `SubscriptionQuotaFooter`（CLI 凭据路径，by appId）
|
||||
* - `CodexOauthQuotaFooter`（cc-switch 自管 OAuth 路径，by ChatGPT account）
|
||||
*/
|
||||
export const SubscriptionQuotaView: React.FC<SubscriptionQuotaViewProps> = ({
|
||||
quota,
|
||||
loading,
|
||||
refetch,
|
||||
appIdForExpiredHint,
|
||||
inline = false,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// 定期更新相对时间显示
|
||||
const [now, setNow] = React.useState(Date.now());
|
||||
React.useEffect(() => {
|
||||
if (!quota?.queriedAt) return;
|
||||
const interval = setInterval(() => setNow(Date.now()), 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, [quota?.queriedAt]);
|
||||
|
||||
// 无凭据 → 不显示
|
||||
if (!quota || quota.credentialStatus === "not_found") return null;
|
||||
|
||||
// 凭据解析错误 → 不显示（静默）
|
||||
if (quota.credentialStatus === "parse_error") return null;
|
||||
|
||||
// 凭据过期
|
||||
if (quota.credentialStatus === "expired" && !quota.success) {
|
||||
if (inline) {
|
||||
return (
|
||||
<div className="inline-flex items-center gap-2 text-xs rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 px-3 py-2 shadow-sm">
|
||||
<div className="flex items-center gap-1.5 text-amber-600 dark:text-amber-400">
|
||||
<AlertCircle size={12} />
|
||||
<span>{t("subscription.expired")}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0"
|
||||
title={t("subscription.refresh")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="mt-3 rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 px-4 py-3 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-2 text-xs">
|
||||
<div className="flex items-center gap-2 text-amber-600 dark:text-amber-400">
|
||||
<AlertCircle size={14} />
|
||||
<div>
|
||||
<span className="font-medium">{t("subscription.expired")}</span>
|
||||
<span className="ml-2 text-amber-500/70 dark:text-amber-400/70">
|
||||
{t("subscription.expiredHint", { tool: appIdForExpiredHint })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-amber-100 dark:hover:bg-amber-800/30 transition-colors disabled:opacity-50 flex-shrink-0"
|
||||
title={t("subscription.refresh")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// API 调用失败
|
||||
if (!quota.success) {
|
||||
if (inline) {
|
||||
return (
|
||||
<div className="inline-flex items-center gap-2 text-xs rounded-lg border border-border-default bg-card px-3 py-2 shadow-sm">
|
||||
<div className="flex items-center gap-1.5 text-red-500 dark:text-red-400">
|
||||
<AlertCircle size={12} />
|
||||
<span>{t("subscription.queryFailed")}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0"
|
||||
title={t("subscription.refresh")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="mt-3 rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-2 text-xs">
|
||||
<div className="flex items-center gap-2 text-red-500 dark:text-red-400">
|
||||
<AlertCircle size={14} />
|
||||
<span>{quota.error || t("subscription.queryFailed")}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50 flex-shrink-0"
|
||||
title={t("subscription.refresh")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 成功获取数据
|
||||
const tiers = (quota.tiers || []).filter(
|
||||
(tier) => tier.name in TIER_I18N_KEYS,
|
||||
);
|
||||
if (tiers.length === 0) return null;
|
||||
|
||||
// ── inline 模式：紧凑两行显示 ──
|
||||
if (inline) {
|
||||
return (
|
||||
<div className="flex flex-col items-end gap-1 text-xs whitespace-nowrap flex-shrink-0">
|
||||
{/* 第一行：查询时间 + 刷新 */}
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
|
||||
<Clock size={10} />
|
||||
{quota.queriedAt
|
||||
? formatRelativeTime(quota.queriedAt, now, t)
|
||||
: t("usage.never", { defaultValue: "从未更新" })}
|
||||
</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
refetch();
|
||||
}}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0 text-muted-foreground"
|
||||
title={t("subscription.refresh")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 第二行：各 tier 使用百分比 */}
|
||||
<div className="flex items-center gap-2">
|
||||
{tiers
|
||||
.filter((tier) => !HIDDEN_INLINE_TIERS.has(tier.name))
|
||||
.map((tier) => (
|
||||
<TierBadge key={tier.name} tier={tier} t={t} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── 展开模式：详细信息 ──
|
||||
return (
|
||||
<div className="mt-3 rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
|
||||
{t("subscription.title", { defaultValue: "Subscription Quota" })}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{quota.queriedAt && (
|
||||
<span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
|
||||
<Clock size={10} />
|
||||
{formatRelativeTime(quota.queriedAt, now, t)}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50"
|
||||
title={t("subscription.refresh")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{tiers.map((tier) => (
|
||||
<TierBar key={tier.name} tier={tier} t={t} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 超额使用 */}
|
||||
{quota.extraUsage?.isEnabled && (
|
||||
<div className="mt-2 pt-2 border-t border-border-default text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="font-medium">{t("subscription.extraUsage")}: </span>
|
||||
<span className="tabular-nums">
|
||||
{quota.extraUsage.currency === "USD" ? "$" : ""}
|
||||
{(quota.extraUsage.usedCredits ?? 0).toFixed(2)}
|
||||
{quota.extraUsage.monthlyLimit != null && (
|
||||
<>
|
||||
{" "}
|
||||
/ {quota.extraUsage.currency === "USD" ? "$" : ""}
|
||||
{quota.extraUsage.monthlyLimit.toFixed(2)}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/** inline 模式下的单个 tier 显示 */
|
||||
export const TierBadge: React.FC<{
|
||||
tier: QuotaTier;
|
||||
t: (key: string, options?: Record<string, unknown>) => string;
|
||||
}> = ({ tier, t }) => {
|
||||
const label = TIER_I18N_KEYS[tier.name]
|
||||
? t(TIER_I18N_KEYS[tier.name])
|
||||
: tier.name;
|
||||
const countdown = countdownStr(tier.resetsAt);
|
||||
|
||||
const hasUsd = tier.usedValueUsd != null && tier.maxValueUsd != null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-0.5">
|
||||
<span className="text-gray-500 dark:text-gray-400">{label}:</span>
|
||||
<span
|
||||
className={`font-semibold tabular-nums ${utilizationColor(tier.utilization)}`}
|
||||
>
|
||||
{t("subscription.utilization", { value: Math.round(tier.utilization) })}
|
||||
</span>
|
||||
{hasUsd && (
|
||||
<span className="text-muted-foreground/60">
|
||||
(${tier.usedValueUsd!.toFixed(2)}/${tier.maxValueUsd!.toFixed(2)})
|
||||
</span>
|
||||
)}
|
||||
{countdown && (
|
||||
<span className="text-muted-foreground/60 ml-0.5 flex items-center gap-px">
|
||||
<Clock size={10} />
|
||||
{countdown}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/** 展开模式下的单个 tier 进度条 */
|
||||
const TierBar: React.FC<{
|
||||
tier: QuotaTier;
|
||||
t: (key: string, options?: Record<string, unknown>) => string;
|
||||
}> = ({ tier, t }) => {
|
||||
const label = TIER_I18N_KEYS[tier.name]
|
||||
? t(TIER_I18N_KEYS[tier.name])
|
||||
: tier.name;
|
||||
const resetText = formatResetTime(tier.resetsAt, t);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 text-xs">
|
||||
<span
|
||||
className="text-gray-500 dark:text-gray-400 min-w-0 font-medium"
|
||||
style={{ width: "25%" }}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
|
||||
{/* 进度条 */}
|
||||
<div className="flex-1 h-2 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all ${
|
||||
tier.utilization >= 90
|
||||
? "bg-red-500"
|
||||
: tier.utilization >= 70
|
||||
? "bg-orange-500"
|
||||
: "bg-green-500"
|
||||
}`}
|
||||
style={{ width: `${Math.min(tier.utilization, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex items-center gap-2 flex-shrink-0"
|
||||
style={{ width: "30%" }}
|
||||
>
|
||||
<span
|
||||
className={`font-semibold tabular-nums ${utilizationColor(tier.utilization)}`}
|
||||
>
|
||||
{Math.round(tier.utilization)}%
|
||||
</span>
|
||||
{resetText && (
|
||||
<span
|
||||
className="text-[10px] text-muted-foreground/70 truncate"
|
||||
title={resetText}
|
||||
>
|
||||
{resetText}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* CLI 凭据路径下的薄 wrapper：通过 useSubscriptionQuota(appId) 自取数据
|
||||
* 后转发到 SubscriptionQuotaView。对外 props/行为与重构前完全一致。
|
||||
*/
|
||||
const SubscriptionQuotaFooter: React.FC<SubscriptionQuotaFooterProps> = ({
|
||||
appId,
|
||||
inline = false,
|
||||
isCurrent = false,
|
||||
autoQueryInterval = 5,
|
||||
}) => {
|
||||
const {
|
||||
data: quota,
|
||||
isFetching: loading,
|
||||
refetch,
|
||||
} = useSubscriptionQuota(
|
||||
appId,
|
||||
isCurrent,
|
||||
isCurrent && autoQueryInterval > 0,
|
||||
autoQueryInterval,
|
||||
);
|
||||
|
||||
if (!isCurrent) return null;
|
||||
|
||||
return (
|
||||
<SubscriptionQuotaView
|
||||
quota={quota}
|
||||
loading={loading}
|
||||
refetch={refetch}
|
||||
appIdForExpiredHint={appId}
|
||||
inline={inline}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubscriptionQuotaFooter;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { useUpdate } from "@/contexts/UpdateContext";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowUpCircle } from "lucide-react";
|
||||
|
||||
interface UpdateBadgeProps {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export function UpdateBadge({ className = "", onClick }: UpdateBadgeProps) {
|
||||
const { hasUpdate, updateInfo } = useUpdate();
|
||||
const { t } = useTranslation();
|
||||
const isActive = hasUpdate && updateInfo;
|
||||
const title = isActive
|
||||
? t("settings.updateAvailable", {
|
||||
version: updateInfo?.availableVersion ?? "",
|
||||
})
|
||||
: t("settings.checkForUpdates");
|
||||
|
||||
if (!isActive) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title={title}
|
||||
aria-label={title}
|
||||
onClick={onClick}
|
||||
className={`
|
||||
relative h-8 w-8 rounded-full
|
||||
${isActive ? "text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-500/10" : "text-muted-foreground hover:bg-muted/60"}
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
<ArrowUpCircle className="h-5 w-5" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,452 @@
|
||||
import React from "react";
|
||||
import { RefreshCw, AlertCircle, Clock } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { type AppId } from "@/lib/api";
|
||||
import { useUsageQuery } from "@/lib/query/queries";
|
||||
import { UsageData, Provider } from "@/types";
|
||||
import { TierBadge } from "@/components/SubscriptionQuotaFooter";
|
||||
import type { QuotaTier } from "@/types/subscription";
|
||||
|
||||
interface UsageFooterProps {
|
||||
provider: Provider;
|
||||
providerId: string;
|
||||
appId: AppId;
|
||||
usageEnabled: boolean; // 是否启用了用量查询
|
||||
isCurrent: boolean; // 是否为当前激活的供应商
|
||||
isInConfig?: boolean; // OpenCode: 是否已添加到配置
|
||||
inline?: boolean; // 是否内联显示（在按钮左侧）
|
||||
}
|
||||
|
||||
/** UsageData → QuotaTier 转换（Token Plan 使用） */
|
||||
function toQuotaTier(data: UsageData): QuotaTier {
|
||||
const extra = data.extra;
|
||||
if (extra && extra.startsWith("{")) {
|
||||
try {
|
||||
const parsed = JSON.parse(extra);
|
||||
return {
|
||||
name: data.planName || "",
|
||||
utilization: data.used || 0,
|
||||
resetsAt: parsed.resetsAt || null,
|
||||
usedValueUsd: parsed.usedValueUsd ?? null,
|
||||
maxValueUsd: parsed.maxValueUsd ?? null,
|
||||
planLabel: parsed.planLabel ?? null,
|
||||
};
|
||||
} catch {
|
||||
// fall through to plain string
|
||||
}
|
||||
}
|
||||
return {
|
||||
name: data.planName || "",
|
||||
utilization: data.used || 0,
|
||||
resetsAt: extra || null,
|
||||
};
|
||||
}
|
||||
|
||||
const UsageFooter: React.FC<UsageFooterProps> = ({
|
||||
provider,
|
||||
providerId,
|
||||
appId,
|
||||
usageEnabled,
|
||||
isCurrent,
|
||||
isInConfig = false,
|
||||
inline = false,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const isTokenPlan =
|
||||
provider.meta?.usage_script?.templateType === "token_plan";
|
||||
|
||||
// 统一的用量查询（自动查询仅对当前激活的供应商启用）
|
||||
// OpenCode（累加模式）：使用 isInConfig 代替 isCurrent
|
||||
const shouldAutoQuery = appId === "opencode" ? isInConfig : isCurrent;
|
||||
const autoQueryInterval = shouldAutoQuery
|
||||
? provider.meta?.usage_script?.autoQueryInterval || 0
|
||||
: 0;
|
||||
|
||||
const {
|
||||
data: usage,
|
||||
isFetching: loading,
|
||||
isError,
|
||||
lastQueriedAt,
|
||||
refetch,
|
||||
} = useUsageQuery(providerId, appId, {
|
||||
enabled: usageEnabled,
|
||||
autoQueryInterval,
|
||||
});
|
||||
|
||||
// 🆕 定期更新当前时间，用于刷新相对时间显示
|
||||
const [now, setNow] = React.useState(Date.now());
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!lastQueriedAt) return;
|
||||
|
||||
// 每30秒更新一次当前时间，触发相对时间显示的刷新
|
||||
const interval = setInterval(() => {
|
||||
setNow(Date.now());
|
||||
}, 30000); // 30秒
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [lastQueriedAt]);
|
||||
|
||||
// 只在启用用量查询且有数据时显示。后端把瞬时传输失败转成了 reject：有缓存
|
||||
// 成功值时 react-query 保留 data 照常展示；首次查询就失败则 data 为空——
|
||||
// 此时（isError）仍要渲染失败态给出重试入口，否则 footer 整体消失、无从重查。
|
||||
if (!usageEnabled || (!usage && !isError)) return null;
|
||||
|
||||
// 错误状态（业务失败，或无缓存成功值的 reject）
|
||||
if (!usage || !usage.success) {
|
||||
if (inline) {
|
||||
return (
|
||||
<div className="inline-flex items-center gap-2 text-xs rounded-lg border border-border-default bg-card px-3 py-2 shadow-sm">
|
||||
<div className="flex items-center gap-1.5 text-red-500 dark:text-red-400">
|
||||
<AlertCircle size={12} />
|
||||
<span>{t("usage.queryFailed")}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0"
|
||||
title={t("usage.refreshUsage")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-3 rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-2 text-xs">
|
||||
<div className="flex items-center gap-2 text-red-500 dark:text-red-400">
|
||||
<AlertCircle size={14} />
|
||||
<span>{usage?.error || t("usage.queryFailed")}</span>
|
||||
</div>
|
||||
|
||||
{/* 刷新按钮 */}
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50 flex-shrink-0"
|
||||
title={t("usage.refreshUsage")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const usageDataList = usage.data || [];
|
||||
|
||||
// 无数据时不显示
|
||||
if (usageDataList.length === 0) return null;
|
||||
|
||||
// ── Token Plan：订阅风格内联渲染（百分比徽章 + 倒计时） ──
|
||||
if (isTokenPlan && inline) {
|
||||
return (
|
||||
<div className="flex flex-col items-end gap-1 text-xs whitespace-nowrap flex-shrink-0">
|
||||
{/* 第一行：查询时间 + 刷新 */}
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
|
||||
<Clock size={10} />
|
||||
{lastQueriedAt
|
||||
? formatRelativeTime(lastQueriedAt, now, t)
|
||||
: t("usage.never", { defaultValue: "从未更新" })}
|
||||
</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
refetch();
|
||||
}}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0 text-muted-foreground"
|
||||
title={t("usage.refreshUsage")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
{/* 第二行：tier 徽章（复用官方订阅的 TierBadge） */}
|
||||
<div className="flex items-center gap-2">
|
||||
{(() => {
|
||||
const tiers = usageDataList.map((d) => toQuotaTier(d));
|
||||
const planLabel = tiers[0]?.planLabel;
|
||||
return (
|
||||
<>
|
||||
{planLabel && (
|
||||
<span className="font-semibold text-muted-foreground">
|
||||
💰 {planLabel}
|
||||
</span>
|
||||
)}
|
||||
{tiers.map((tier, index) => (
|
||||
<TierBadge key={index} tier={tier} t={t} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── 通用用量：内联模式（原有逻辑） ──
|
||||
if (inline) {
|
||||
const firstUsage = usageDataList[0];
|
||||
const isExpired = firstUsage.isValid === false;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-end gap-1 text-xs whitespace-nowrap flex-shrink-0">
|
||||
{/* 第一行：更新时间和刷新按钮 */}
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
{/* 上次查询时间 */}
|
||||
<span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
|
||||
<Clock size={10} />
|
||||
{lastQueriedAt
|
||||
? formatRelativeTime(lastQueriedAt, now, t)
|
||||
: t("usage.never", { defaultValue: "从未更新" })}
|
||||
</span>
|
||||
|
||||
{/* 刷新按钮 */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
refetch();
|
||||
}}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0 text-muted-foreground"
|
||||
title={t("usage.refreshUsage")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 第二行：用量和剩余 */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 已用 */}
|
||||
{firstUsage.used !== undefined && (
|
||||
<div className="flex items-center gap-0.5">
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{t("usage.used")}
|
||||
</span>
|
||||
<span className="tabular-nums text-gray-600 dark:text-gray-400 font-medium">
|
||||
{firstUsage.used.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 剩余 */}
|
||||
{firstUsage.remaining !== undefined && (
|
||||
<div className="flex items-center gap-0.5">
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{t("usage.remaining")}
|
||||
</span>
|
||||
<span
|
||||
className={`font-semibold tabular-nums ${
|
||||
isExpired
|
||||
? "text-red-500 dark:text-red-400"
|
||||
: firstUsage.remaining <
|
||||
(firstUsage.total || firstUsage.remaining) * 0.1
|
||||
? "text-orange-500 dark:text-orange-400"
|
||||
: "text-green-600 dark:text-green-400"
|
||||
}`}
|
||||
>
|
||||
{firstUsage.remaining.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 单位 */}
|
||||
{firstUsage.unit && (
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{firstUsage.unit}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* 扩展字段 extra */}
|
||||
{firstUsage.extra && (
|
||||
<span
|
||||
className="text-gray-500 dark:text-gray-400 truncate max-w-[150px]"
|
||||
title={firstUsage.extra}
|
||||
>
|
||||
{firstUsage.extra}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-3 rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm">
|
||||
{/* 标题行：包含刷新按钮和自动查询时间 */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
|
||||
{t("usage.planUsage")}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 自动查询时间提示 */}
|
||||
{lastQueriedAt && (
|
||||
<span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
|
||||
<Clock size={10} />
|
||||
{formatRelativeTime(lastQueriedAt, now, t)}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={loading}
|
||||
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50"
|
||||
title={t("usage.refreshUsage")}
|
||||
>
|
||||
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 套餐列表 */}
|
||||
<div className="flex flex-col gap-3">
|
||||
{usageDataList.map((usageData, index) => (
|
||||
<UsagePlanItem key={index} data={usageData} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ── 通用用量组件 ────────────────────────────────────────────
|
||||
|
||||
// 单个套餐数据展示组件
|
||||
const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
planName,
|
||||
extra,
|
||||
isValid,
|
||||
invalidMessage,
|
||||
total,
|
||||
used,
|
||||
remaining,
|
||||
unit,
|
||||
} = data;
|
||||
|
||||
// 判断套餐是否失效（isValid 为 false 或未定义时视为有效）
|
||||
const isExpired = isValid === false;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 标题部分：25% */}
|
||||
<div
|
||||
className="text-xs text-gray-500 dark:text-gray-400 min-w-0"
|
||||
style={{ width: "25%" }}
|
||||
>
|
||||
{planName ? (
|
||||
<span
|
||||
className={`font-medium truncate block ${isExpired ? "text-red-500 dark:text-red-400" : ""}`}
|
||||
title={planName}
|
||||
>
|
||||
💰 {planName}
|
||||
</span>
|
||||
) : (
|
||||
<span className="opacity-50">—</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 扩展字段：30% */}
|
||||
<div
|
||||
className="text-xs text-gray-500 dark:text-gray-400 min-w-0 flex items-center gap-2"
|
||||
style={{ width: "30%" }}
|
||||
>
|
||||
{extra && (
|
||||
<span
|
||||
className={`truncate ${isExpired ? "text-red-500 dark:text-red-400" : ""}`}
|
||||
title={extra}
|
||||
>
|
||||
{extra}
|
||||
</span>
|
||||
)}
|
||||
{isExpired && (
|
||||
<span className="text-red-500 dark:text-red-400 font-medium text-[10px] px-1.5 py-0.5 bg-red-50 dark:bg-red-900/20 rounded flex-shrink-0">
|
||||
{invalidMessage || t("usage.invalid")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 用量信息：45% */}
|
||||
<div
|
||||
className="flex items-center justify-end gap-2 text-xs flex-shrink-0"
|
||||
style={{ width: "45%" }}
|
||||
>
|
||||
{/* 总额度 */}
|
||||
{total !== undefined && (
|
||||
<>
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{t("usage.total")}
|
||||
</span>
|
||||
<span className="tabular-nums text-gray-600 dark:text-gray-400">
|
||||
{total === -1 ? "∞" : total.toFixed(2)}
|
||||
</span>
|
||||
<span className="text-gray-400 dark:text-gray-600">|</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 已用额度 */}
|
||||
{used !== undefined && (
|
||||
<>
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{t("usage.used")}
|
||||
</span>
|
||||
<span className="tabular-nums text-gray-600 dark:text-gray-400">
|
||||
{used.toFixed(2)}
|
||||
</span>
|
||||
<span className="text-gray-400 dark:text-gray-600">|</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 剩余额度 - 突出显示 */}
|
||||
{remaining !== undefined && (
|
||||
<>
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{t("usage.remaining")}
|
||||
</span>
|
||||
<span
|
||||
className={`font-semibold tabular-nums ${
|
||||
isExpired
|
||||
? "text-red-500 dark:text-red-400"
|
||||
: remaining < (total || remaining) * 0.1
|
||||
? "text-orange-500 dark:text-orange-400"
|
||||
: "text-green-600 dark:text-green-400"
|
||||
}`}
|
||||
>
|
||||
{remaining.toFixed(2)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{unit && (
|
||||
<span className="text-gray-500 dark:text-gray-400">{unit}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 格式化相对时间
|
||||
function formatRelativeTime(
|
||||
timestamp: number,
|
||||
now: number,
|
||||
t: (key: string, options?: { count?: number }) => string,
|
||||
): string {
|
||||
const diff = Math.floor((now - timestamp) / 1000); // 秒
|
||||
|
||||
if (diff < 60) {
|
||||
return t("usage.justNow");
|
||||
} else if (diff < 3600) {
|
||||
const minutes = Math.floor(diff / 60);
|
||||
return t("usage.minutesAgo", { count: minutes });
|
||||
} else if (diff < 86400) {
|
||||
const hours = Math.floor(diff / 3600);
|
||||
return t("usage.hoursAgo", { count: hours });
|
||||
} else {
|
||||
const days = Math.floor(diff / 86400);
|
||||
return t("usage.daysAgo", { count: days });
|
||||
}
|
||||
}
|
||||
|
||||
export default UsageFooter;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
||||
import { Bot } from "lucide-react";
|
||||
|
||||
interface AgentsPanelProps {
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function AgentsPanel({}: AgentsPanelProps) {
|
||||
return (
|
||||
<div className="px-6 flex flex-col flex-1 min-h-0">
|
||||
<div className="flex-1 glass-card rounded-xl p-8 flex flex-col items-center justify-center text-center space-y-4">
|
||||
<div className="w-20 h-20 rounded-full bg-white/5 flex items-center justify-center mb-4 animate-pulse-slow">
|
||||
<Bot className="w-10 h-10 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Coming Soon</h3>
|
||||
<p className="text-muted-foreground max-w-md">
|
||||
The Agents management feature is currently under development. Stay
|
||||
tuned for powerful autonomous capabilities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { AppId } from "@/lib/api/types";
|
||||
import { APP_IDS, APP_ICON_MAP } from "@/config/appConfig";
|
||||
|
||||
interface AppCountBarProps {
|
||||
totalLabel: string;
|
||||
counts: Partial<Record<AppId, number>>;
|
||||
appIds?: AppId[];
|
||||
}
|
||||
|
||||
export const AppCountBar: React.FC<AppCountBarProps> = ({
|
||||
totalLabel,
|
||||
counts,
|
||||
appIds = APP_IDS,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex-shrink-0 py-4 glass rounded-xl border border-white/10 mb-4 px-6 flex items-center justify-between gap-4">
|
||||
<Badge variant="outline" className="bg-background/50 h-7 px-3">
|
||||
{totalLabel}
|
||||
</Badge>
|
||||
<div className="flex items-center gap-2 overflow-x-auto no-scrollbar">
|
||||
{appIds.map((app) => (
|
||||
<Badge
|
||||
key={app}
|
||||
variant="secondary"
|
||||
className={APP_ICON_MAP[app].badgeClass}
|
||||
>
|
||||
<span className="opacity-75">{APP_ICON_MAP[app].label}:</span>
|
||||
<span className="font-bold ml-1">{counts[app] ?? 0}</span>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import type { AppId } from "@/lib/api/types";
|
||||
import { APP_IDS, APP_ICON_MAP } from "@/config/appConfig";
|
||||
|
||||
interface AppToggleGroupProps {
|
||||
apps: Partial<Record<AppId, boolean>>;
|
||||
onToggle: (app: AppId, enabled: boolean) => void;
|
||||
appIds?: AppId[];
|
||||
}
|
||||
|
||||
export const AppToggleGroup: React.FC<AppToggleGroupProps> = ({
|
||||
apps,
|
||||
onToggle,
|
||||
appIds = APP_IDS,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||
{appIds.map((app) => {
|
||||
const { label, icon, activeClass } = APP_ICON_MAP[app];
|
||||
const enabled = apps[app];
|
||||
return (
|
||||
<Tooltip key={app}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggle(app, !enabled)}
|
||||
className={`w-7 h-7 rounded-lg flex items-center justify-center transition-all ${
|
||||
enabled ? activeClass : "opacity-35 hover:opacity-70"
|
||||
}`}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
<p>
|
||||
{label}
|
||||
{enabled ? " ✓" : ""}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,167 @@
|
||||
import React from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
isWindows,
|
||||
isLinux,
|
||||
DRAG_REGION_ATTR,
|
||||
DRAG_REGION_STYLE,
|
||||
} from "@/lib/platform";
|
||||
import { isTextEditableTarget } from "@/utils/domUtils";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface FullScreenPanelProps {
|
||||
isOpen: boolean;
|
||||
title: string;
|
||||
onClose: () => void;
|
||||
children: React.ReactNode;
|
||||
footer?: React.ReactNode;
|
||||
/**
|
||||
* 覆盖内容区滚动容器的内边距/间距类。默认 `px-6 py-6 space-y-6`。
|
||||
* 通过 `cn`(twMerge) 合并，传入如 `pt-3` 只覆盖顶部内边距，其余保持默认。
|
||||
*/
|
||||
contentClassName?: string;
|
||||
}
|
||||
|
||||
const DRAG_BAR_HEIGHT = isWindows() || isLinux() ? 0 : 28; // px - match App.tsx
|
||||
const HEADER_HEIGHT = 64; // px - match App.tsx
|
||||
|
||||
/**
|
||||
* Reusable full-screen panel component
|
||||
* Handles portal rendering, header with back button, and footer
|
||||
* Uses solid theme colors without transparency
|
||||
*/
|
||||
export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
|
||||
isOpen,
|
||||
title,
|
||||
onClose,
|
||||
children,
|
||||
footer,
|
||||
contentClassName,
|
||||
}) => {
|
||||
React.useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = "";
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
// ESC 键关闭面板
|
||||
const onCloseRef = React.useRef(onClose);
|
||||
|
||||
React.useEffect(() => {
|
||||
onCloseRef.current = onClose;
|
||||
}, [onClose]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
// 子组件（例如 Radix 的 Select/Dialog/Dropdown）如果已经消费了 ESC，就不要再关闭整个面板
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isTextEditableTarget(event.target)) {
|
||||
return; // 让输入框自己处理 ESC（比如清空、失焦等）
|
||||
}
|
||||
|
||||
event.stopPropagation(); // 阻止事件继续冒泡到 window，避免触发 App.tsx 的全局监听
|
||||
onCloseRef.current();
|
||||
}
|
||||
};
|
||||
|
||||
// 使用冒泡阶段监听，让子组件（如 Radix UI）优先处理 ESC
|
||||
window.addEventListener("keydown", handleKeyDown, false);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown, false);
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
return createPortal(
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 z-[60] flex flex-col"
|
||||
style={{ backgroundColor: "hsl(var(--background))" }}
|
||||
>
|
||||
{/* Drag region - match App.tsx. Linux 上 DRAG_BAR_HEIGHT=0，
|
||||
直接跳过整个元素；macOS 保留 28px 拖拽占位。 */}
|
||||
{DRAG_BAR_HEIGHT > 0 && (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
style={
|
||||
{
|
||||
WebkitAppRegion: "drag",
|
||||
height: DRAG_BAR_HEIGHT,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Header - match App.tsx */}
|
||||
<div
|
||||
className="flex-shrink-0 flex items-center"
|
||||
{...DRAG_REGION_ATTR}
|
||||
style={
|
||||
{
|
||||
...DRAG_REGION_STYLE,
|
||||
backgroundColor: "hsl(var(--background))",
|
||||
height: HEADER_HEIGHT,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="px-6 w-full flex items-center gap-4"
|
||||
{...DRAG_REGION_ATTR}
|
||||
style={{ ...DRAG_REGION_STYLE } as React.CSSProperties}
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onClose}
|
||||
className="rounded-lg select-none"
|
||||
style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<h2 className="text-lg font-semibold text-foreground select-none">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto scroll-overlay">
|
||||
<div className={cn("px-6 py-6 space-y-6 w-full", contentClassName)}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{footer && (
|
||||
<div
|
||||
className="flex-shrink-0 py-4 border-t border-border-default"
|
||||
style={{ backgroundColor: "hsl(var(--background))" }}
|
||||
>
|
||||
<div className="px-6 flex items-center justify-end gap-3">
|
||||
{footer}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body,
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
|
||||
interface ListItemRowProps {
|
||||
isLast?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ListItemRow: React.FC<ListItemRowProps> = ({
|
||||
isLast,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`group flex items-center gap-3 px-4 py-2.5 hover:bg-muted/50 transition-colors ${
|
||||
!isLast ? "border-b border-border-default" : ""
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
import { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DeepLinkImportRequest } from "../../lib/api/deeplink";
|
||||
import { decodeBase64Utf8 } from "../../lib/utils/base64";
|
||||
|
||||
export function McpConfirmation({
|
||||
request,
|
||||
}: {
|
||||
request: DeepLinkImportRequest;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const mcpServers = useMemo(() => {
|
||||
if (!request.config) return null;
|
||||
try {
|
||||
const decoded = decodeBase64Utf8(request.config);
|
||||
const parsed = JSON.parse(decoded);
|
||||
return parsed.mcpServers || {};
|
||||
} catch (e) {
|
||||
console.error("Failed to parse MCP config:", e);
|
||||
return null;
|
||||
}
|
||||
}, [request.config]);
|
||||
|
||||
const targetApps = request.apps?.split(",") || [];
|
||||
const serverCount = Object.keys(mcpServers || {}).length;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">{t("deeplink.mcp.title")}</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground">
|
||||
{t("deeplink.mcp.targetApps")}
|
||||
</label>
|
||||
<div className="mt-1 flex gap-2 flex-wrap">
|
||||
{targetApps.map((app) => (
|
||||
<span
|
||||
key={app}
|
||||
className="px-2 py-1 bg-primary/10 text-primary text-xs rounded capitalize"
|
||||
>
|
||||
{app.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground">
|
||||
{t("deeplink.mcp.serverCount", { count: serverCount })}
|
||||
</label>
|
||||
<div className="mt-1 space-y-2 max-h-64 overflow-auto border rounded p-2 bg-muted/30">
|
||||
{mcpServers &&
|
||||
Object.entries(mcpServers).map(([id, spec]: [string, any]) => (
|
||||
<div key={id} className="p-2 bg-background rounded border">
|
||||
<div className="font-semibold text-sm">{id}</div>
|
||||
<div className="text-xs text-muted-foreground mt-1 font-mono truncate">
|
||||
{spec.command
|
||||
? `Command: ${spec.command} `
|
||||
: `URL: ${spec.url} `}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{request.enabled && (
|
||||
<div className="text-yellow-600 dark:text-yellow-500 text-sm flex items-center gap-2">
|
||||
<span>⚠️</span>
|
||||
<span>{t("deeplink.mcp.enabledWarning")}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DeepLinkImportRequest } from "../../lib/api/deeplink";
|
||||
import { decodeBase64Utf8 } from "../../lib/utils/base64";
|
||||
|
||||
export function PromptConfirmation({
|
||||
request,
|
||||
}: {
|
||||
request: DeepLinkImportRequest;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const decodedContent = useMemo(() => {
|
||||
if (!request.content) return "";
|
||||
return decodeBase64Utf8(request.content);
|
||||
}, [request.content]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">{t("deeplink.prompt.title")}</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground">
|
||||
{t("deeplink.prompt.app")}
|
||||
</label>
|
||||
<div className="mt-1 text-sm capitalize">{request.app}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground">
|
||||
{t("deeplink.prompt.name")}
|
||||
</label>
|
||||
<div className="mt-1 text-sm">{request.name}</div>
|
||||
</div>
|
||||
|
||||
{request.description && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground">
|
||||
{t("deeplink.prompt.description")}
|
||||
</label>
|
||||
<div className="mt-1 text-sm">{request.description}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground">
|
||||
{t("deeplink.prompt.contentPreview")}
|
||||
</label>
|
||||
<pre className="mt-1 max-h-48 overflow-auto bg-muted/50 p-2 rounded text-xs whitespace-pre-wrap border">
|
||||
{decodedContent.substring(0, 500)}
|
||||
{decodedContent.length > 500 && "..."}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{request.enabled && (
|
||||
<div className="text-yellow-600 dark:text-yellow-500 text-sm flex items-center gap-2">
|
||||
<span>⚠️</span>
|
||||
<span>{t("deeplink.prompt.enabledWarning")}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DeepLinkImportRequest } from "../../lib/api/deeplink";
|
||||
|
||||
export function SkillConfirmation({
|
||||
request,
|
||||
}: {
|
||||
request: DeepLinkImportRequest;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">{t("deeplink.skill.title")}</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground">
|
||||
{t("deeplink.skill.repo")}
|
||||
</label>
|
||||
<div className="mt-1 text-sm font-mono bg-muted/50 p-2 rounded border">
|
||||
{request.repo}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground">
|
||||
{t("deeplink.skill.directory")}
|
||||
</label>
|
||||
<div className="mt-1 text-sm font-mono bg-muted/50 p-2 rounded border">
|
||||
{request.directory}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground">
|
||||
{t("deeplink.skill.branch")}
|
||||
</label>
|
||||
<div className="mt-1 text-sm">{request.branch || "main"}</div>
|
||||
</div>
|
||||
|
||||
<div className="text-blue-600 dark:text-blue-400 text-sm bg-blue-50 dark:bg-blue-950/30 p-3 rounded border border-blue-200 dark:border-blue-800">
|
||||
<p>ℹ️ {t("deeplink.skill.hint")}</p>
|
||||
<p className="mt-1">{t("deeplink.skill.hintDetail")}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+275
@@ -0,0 +1,275 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { AlertTriangle, ChevronDown, ChevronUp, X, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import type { EnvConflict } from "@/types/env";
|
||||
import { deleteEnvVars } from "@/lib/api/env";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
interface EnvWarningBannerProps {
|
||||
conflicts: EnvConflict[];
|
||||
onDismiss: () => void;
|
||||
onDeleted: () => void;
|
||||
}
|
||||
|
||||
export function EnvWarningBanner({
|
||||
conflicts,
|
||||
onDismiss,
|
||||
onDeleted,
|
||||
}: EnvWarningBannerProps) {
|
||||
const { t } = useTranslation();
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [selectedConflicts, setSelectedConflicts] = useState<Set<string>>(
|
||||
new Set(),
|
||||
);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
||||
|
||||
if (conflicts.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const toggleSelection = (key: string) => {
|
||||
const newSelection = new Set(selectedConflicts);
|
||||
if (newSelection.has(key)) {
|
||||
newSelection.delete(key);
|
||||
} else {
|
||||
newSelection.add(key);
|
||||
}
|
||||
setSelectedConflicts(newSelection);
|
||||
};
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedConflicts.size === conflicts.length) {
|
||||
setSelectedConflicts(new Set());
|
||||
} else {
|
||||
setSelectedConflicts(
|
||||
new Set(conflicts.map((c) => `${c.varName}:${c.sourcePath}`)),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
setShowConfirmDialog(false);
|
||||
setIsDeleting(true);
|
||||
|
||||
try {
|
||||
const conflictsToDelete = conflicts.filter((c) =>
|
||||
selectedConflicts.has(`${c.varName}:${c.sourcePath}`),
|
||||
);
|
||||
|
||||
if (conflictsToDelete.length === 0) {
|
||||
toast.warning(t("env.error.noSelection"));
|
||||
return;
|
||||
}
|
||||
|
||||
const backupInfo = await deleteEnvVars(conflictsToDelete);
|
||||
|
||||
toast.success(t("env.delete.success"), {
|
||||
description: t("env.backup.location", {
|
||||
path: backupInfo.backupPath,
|
||||
}),
|
||||
duration: 5000,
|
||||
closeButton: true,
|
||||
});
|
||||
|
||||
// 清空选择并通知父组件
|
||||
setSelectedConflicts(new Set());
|
||||
onDeleted();
|
||||
} catch (error) {
|
||||
console.error("删除环境变量失败:", error);
|
||||
toast.error(t("env.delete.error"), {
|
||||
description: String(error),
|
||||
});
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getSourceDescription = (conflict: EnvConflict): string => {
|
||||
if (conflict.sourceType === "system") {
|
||||
if (conflict.sourcePath.includes("HKEY_CURRENT_USER")) {
|
||||
return t("env.source.userRegistry");
|
||||
} else if (conflict.sourcePath.includes("HKEY_LOCAL_MACHINE")) {
|
||||
return t("env.source.systemRegistry");
|
||||
} else {
|
||||
return t("env.source.systemEnv");
|
||||
}
|
||||
} else {
|
||||
return conflict.sourcePath;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed top-0 left-0 right-0 z-[100] bg-yellow-50 dark:bg-yellow-950 border-b border-yellow-200 dark:border-yellow-900 shadow-lg animate-slide-down">
|
||||
<div className="container mx-auto px-4 py-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-500 flex-shrink-0 mt-0.5" />
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-yellow-900 dark:text-yellow-100">
|
||||
{t("env.warning.title")}
|
||||
</h3>
|
||||
<p className="text-sm text-yellow-800 dark:text-yellow-200 mt-0.5">
|
||||
{t("env.warning.description", { count: conflicts.length })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="text-yellow-900 dark:text-yellow-100 hover:bg-yellow-100 dark:hover:bg-yellow-900/50"
|
||||
>
|
||||
{isExpanded ? (
|
||||
<>
|
||||
{t("env.actions.collapse")}
|
||||
<ChevronUp className="h-4 w-4 ml-1" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{t("env.actions.expand")}
|
||||
<ChevronDown className="h-4 w-4 ml-1" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onDismiss}
|
||||
className="text-yellow-900 dark:text-yellow-100 hover:bg-yellow-100 dark:hover:bg-yellow-900/50"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="mt-4 space-y-3">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-yellow-200 dark:border-yellow-900/50">
|
||||
<Checkbox
|
||||
id="select-all"
|
||||
checked={selectedConflicts.size === conflicts.length}
|
||||
onCheckedChange={toggleSelectAll}
|
||||
/>
|
||||
<label
|
||||
htmlFor="select-all"
|
||||
className="text-sm font-medium text-yellow-900 dark:text-yellow-100 cursor-pointer"
|
||||
>
|
||||
{t("env.actions.selectAll")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="max-h-96 overflow-y-auto space-y-2">
|
||||
{conflicts.map((conflict) => {
|
||||
const key = `${conflict.varName}:${conflict.sourcePath}`;
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className="flex items-start gap-3 p-3 bg-white dark:bg-gray-900 rounded-md border border-yellow-200 dark:border-yellow-900/50"
|
||||
>
|
||||
<Checkbox
|
||||
id={key}
|
||||
checked={selectedConflicts.has(key)}
|
||||
onCheckedChange={() => toggleSelection(key)}
|
||||
/>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<label
|
||||
htmlFor={key}
|
||||
className="block text-sm font-medium text-foreground cursor-pointer"
|
||||
>
|
||||
{conflict.varName}
|
||||
</label>
|
||||
<p className="text-xs text-muted-foreground mt-1 break-all">
|
||||
{t("env.field.value")}: {conflict.varValue}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{t("env.field.source")}:{" "}
|
||||
{getSourceDescription(conflict)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-2 pt-2 border-t border-yellow-200 dark:border-yellow-900/50">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setSelectedConflicts(new Set())}
|
||||
disabled={selectedConflicts.size === 0}
|
||||
className="text-yellow-900 dark:text-yellow-100 border-yellow-300 dark:border-yellow-800"
|
||||
>
|
||||
{t("env.actions.clearSelection")}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setShowConfirmDialog(true)}
|
||||
disabled={selectedConflicts.size === 0 || isDeleting}
|
||||
className="gap-1"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
{isDeleting
|
||||
? t("env.actions.deleting")
|
||||
: t("env.actions.deleteSelected", {
|
||||
count: selectedConflicts.size,
|
||||
})}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
|
||||
<DialogContent className="max-w-md" zIndex="top">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-5 w-5 text-destructive" />
|
||||
{t("env.confirm.title")}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="space-y-2">
|
||||
<p>
|
||||
{t("env.confirm.message", { count: selectedConflicts.size })}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("env.confirm.backupNotice")}
|
||||
</p>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowConfirmDialog(false)}
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
{t("env.confirm.confirm")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import { ExternalLink } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import MarkdownEditor from "@/components/MarkdownEditor";
|
||||
import {
|
||||
useHermesMemory,
|
||||
useHermesMemoryLimits,
|
||||
useOpenHermesWebUI,
|
||||
useSaveHermesMemory,
|
||||
useToggleHermesMemoryEnabled,
|
||||
} from "@/hooks/useHermes";
|
||||
import { useDarkMode } from "@/hooks/useDarkMode";
|
||||
import type { HermesMemoryKind } from "@/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface MemoryTabPaneProps {
|
||||
kind: HermesMemoryKind;
|
||||
limit: number;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
const MemoryTabPane: React.FC<MemoryTabPaneProps> = ({
|
||||
kind,
|
||||
limit,
|
||||
enabled,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const darkMode = useDarkMode();
|
||||
const { data, isLoading } = useHermesMemory(kind, true);
|
||||
const saveMutation = useSaveHermesMemory();
|
||||
const toggleMutation = useToggleHermesMemoryEnabled();
|
||||
const [content, setContent] = useState("");
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
// Hydrate local dirty buffer from query data only on first load. Later
|
||||
// refetches (e.g. after a successful save) must not clobber in-flight user
|
||||
// edits — the caller owns `content` until they click Save again.
|
||||
useEffect(() => {
|
||||
if (!loaded && data !== undefined) {
|
||||
setContent(data);
|
||||
setLoaded(true);
|
||||
}
|
||||
}, [data, loaded]);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await saveMutation.mutateAsync({ kind, content });
|
||||
toast.success(t("hermes.memory.saveSuccess"));
|
||||
} catch {
|
||||
// useSaveHermesMemory already surfaces a localized error toast.
|
||||
}
|
||||
};
|
||||
|
||||
const charCount = content.length;
|
||||
const isOver = charCount > limit;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-between px-3 py-2 rounded-md border",
|
||||
enabled ? "bg-muted/30" : "bg-amber-500/10 border-amber-500/30",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={enabled}
|
||||
disabled={toggleMutation.isPending}
|
||||
onCheckedChange={(next) =>
|
||||
toggleMutation.mutate({ kind, enabled: next })
|
||||
}
|
||||
/>
|
||||
<span className="text-sm">
|
||||
{enabled
|
||||
? t("hermes.memory.enableOn")
|
||||
: t("hermes.memory.enableOff")}
|
||||
</span>
|
||||
</div>
|
||||
{!enabled && (
|
||||
<span className="text-xs text-amber-700 dark:text-amber-400">
|
||||
{t("hermes.memory.disabledHint")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isLoading && !loaded ? (
|
||||
<div className="flex items-center justify-center h-64 text-muted-foreground">
|
||||
{t("prompts.loading")}
|
||||
</div>
|
||||
) : (
|
||||
<MarkdownEditor
|
||||
value={content}
|
||||
onChange={setContent}
|
||||
darkMode={darkMode}
|
||||
minHeight="calc(100vh - 320px)"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between gap-3 text-sm">
|
||||
<span
|
||||
className={cn(
|
||||
"text-muted-foreground",
|
||||
isOver && "text-red-600 dark:text-red-400 font-medium",
|
||||
)}
|
||||
>
|
||||
{t("hermes.memory.usage", { current: charCount, limit })}
|
||||
{isOver ? ` — ${t("hermes.memory.overLimit")}` : ""}
|
||||
</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="hidden md:inline text-xs text-muted-foreground">
|
||||
{t("hermes.memory.runtimeNote")}
|
||||
</span>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={saveMutation.isPending || !loaded}
|
||||
>
|
||||
{saveMutation.isPending ? t("common.saving") : t("common.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const HermesMemoryPanel: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [activeTab, setActiveTab] = useState<HermesMemoryKind>("memory");
|
||||
const openHermesWebUI = useOpenHermesWebUI();
|
||||
const { data: limits } = useHermesMemoryLimits(true);
|
||||
|
||||
const memoryLimit = limits?.memory ?? 2200;
|
||||
const userLimit = limits?.user ?? 1375;
|
||||
const memoryEnabled = limits?.memoryEnabled ?? true;
|
||||
const userEnabled = limits?.userEnabled ?? true;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(v) => setActiveTab(v as HermesMemoryKind)}
|
||||
className="flex-1 flex flex-col"
|
||||
>
|
||||
<div className="px-6 pt-4 flex items-center justify-between gap-3 flex-wrap">
|
||||
<TabsList>
|
||||
<TabsTrigger value="memory">
|
||||
{t("hermes.memory.agentTab")}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="user">{t("hermes.memory.userTab")}</TabsTrigger>
|
||||
</TabsList>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => void openHermesWebUI("/config")}
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5 mr-1" />
|
||||
{t("hermes.memory.openConfig")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<TabsContent value="memory" className="flex-1 px-6 pb-4 mt-4">
|
||||
<MemoryTabPane
|
||||
kind="memory"
|
||||
limit={memoryLimit}
|
||||
enabled={memoryEnabled}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="user" className="flex-1 px-6 pb-4 mt-4">
|
||||
<MemoryTabPane kind="user" limit={userLimit} enabled={userEnabled} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HermesMemoryPanel;
|
||||
@@ -0,0 +1,190 @@
|
||||
import { SVGProps } from "react";
|
||||
|
||||
export function ITermIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<title>iTerm2</title>
|
||||
<path d="M24 5.359v13.282A5.36 5.36 0 0 1 18.641 24H5.359A5.36 5.36 0 0 1 0 18.641V5.359A5.36 5.36 0 0 1 5.359 0h13.282A5.36 5.36 0 0 1 24 5.359m-.932-.233A4.196 4.196 0 0 0 18.874.932H5.126A4.196 4.196 0 0 0 .932 5.126v13.748a4.196 4.196 0 0 0 4.194 4.194h13.748a4.196 4.196 0 0 0 4.194-4.194zm-.816.233v13.282a3.613 3.613 0 0 1-3.611 3.611H5.359a3.613 3.613 0 0 1-3.611-3.611V5.359a3.613 3.613 0 0 1 3.611-3.611h13.282a3.613 3.613 0 0 1 3.611 3.611M8.854 4.194v6.495h.962V4.194zM5.483 9.493v1.085h.597V9.48q.283-.037.508-.133.373-.165.575-.448.208-.284.208-.649a.9.9 0 0 0-.171-.568 1.4 1.4 0 0 0-.426-.388 3 3 0 0 0-.544-.261 32 32 0 0 0-.545-.209 1.8 1.8 0 0 1-.426-.216q-.164-.12-.164-.284 0-.223.179-.351.18-.126.485-.127.344 0 .575.105.239.105.5.298l.433-.5a2.3 2.3 0 0 0-.605-.433 1.6 1.6 0 0 0-.582-.159v-.968h-.597v.978a2 2 0 0 0-.477.127 1.2 1.2 0 0 0-.545.411q-.194.268-.194.634 0 .335.164.56.164.224.418.38a4 4 0 0 0 .552.262q.291.104.545.209.261.104.425.238a.39.39 0 0 1 .165.321q0 .225-.187.359-.18.134-.537.134-.381 0-.717-.134a4.4 4.4 0 0 1-.649-.351l-.388.589q.209.173.477.306.276.135.575.217.191.046.373.064" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function AlacrittyIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<title>Alacritty</title>
|
||||
<path d="m10.065 0-8.57 21.269h3.595l6.91-16.244 6.91 16.244h3.594l-8.57-21.269zm1.935 9.935c-0.76666 1.8547-1.5334 3.7094-2.298 5.565 1.475 4.54 1.475 4.54 2.298 8.5 0.823-3.96 0.823-3.96 2.297-8.5-0.76637-1.8547-1.5315-3.7099-2.297-5.565z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function WezTermIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<title>WezTerm</title>
|
||||
<path d="M3.27 8.524c0-.623.62-1.007 2.123-1.007l-.5 2.757c-.931-.623-1.624-1.199-1.624-1.75zm4.008 6.807c0 .647-.644 1.079-2.123 1.15l.524-2.924c.931.624 1.6 1.175 1.6 1.774zm-2.625 5.992.454-2.708c3.603-.336 5.01-1.798 5.01-3.404 0-1.653-2.004-2.948-3.841-4.074l.668-3.548c.764.072 1.67.216 2.744.432l.31-2.469c-.81-.12-1.575-.168-2.29-.216L8.257 2.7l-2.363-.024-.453 2.684C1.838 5.648.43 7.158.43 8.764c0 1.63 2.004 2.876 3.841 3.954l-.668 3.716c-.859-.048-1.908-.192-3.125-.408L0 18.495c1.026.12 1.98.192 2.84.216l-.525 2.588zm15.553-1.894h2.673c.334-2.804.81-8.46 1.121-14.86h-2.553c-.071 1.51-.334 10.498-.43 11.241h-.071c-.644-2.42-1.169-4.386-1.813-6.782h-1.456c-.62 2.396-1.05 4.194-1.694 6.782h-.096c-.071-.743-.477-9.73-.525-11.24h-2.648c.31 6.399.763 12.055 1.097 14.86h2.625l1.838-7.12z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function GhosttyIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<title>Ghostty</title>
|
||||
<path d="M12 0C6.7 0 2.4 4.3 2.4 9.6v11.146c0 1.772 1.45 3.267 3.222 3.254a3.18 3.18 0 0 0 1.955-.686 1.96 1.96 0 0 1 2.444 0 3.18 3.18 0 0 0 1.976.686c.75 0 1.436-.257 1.98-.686.715-.563 1.71-.587 2.419-.018.59.476 1.355.743 2.182.699 1.705-.094 3.022-1.537 3.022-3.244V9.601C21.6 4.3 17.302 0 12 0M6.069 6.562a1 1 0 0 1 .46.131l3.578 2.065v.002a.974.974 0 0 1 0 1.687L6.53 12.512a.975.975 0 0 1-.976-1.687L7.67 9.602 5.553 8.38a.975.975 0 0 1 .515-1.818m7.438 2.063h4.7a.975.975 0 1 1 0 1.95h-4.7a.975.975 0 0 1 0-1.95" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function KittyIcon(props: SVGProps<SVGSVGElement>) {
|
||||
// Official icon is complex and has fixed width/height/viewBox in original.
|
||||
// Simplifying viewBox to 0 0 256 256 effectively as original was 240x240 but translated.
|
||||
// Original viewBox="0 0 240 240" with g transform="translate(0 -812.362)" and elements around y=850.
|
||||
// 850 - 812 = 38. So it's confusing.
|
||||
// Let's copy the raw SVG content but adapt it to be a component.
|
||||
// To make it behave like an icon, we should probably set viewBox="0 0 240 240" and keep the transform.
|
||||
// It relies on fill colors. If we want it to be monochrome (currentColor), we should remove fills or set them to currentColor.
|
||||
// However, official icons often have brand colors. The user said "official icon", which implies color.
|
||||
// But usually in a dropdown we might want monochrome or original color.
|
||||
// simple-icons are usually monochrome.
|
||||
// Let's keep Kitty as original color since it's complex, OR mono if it works?
|
||||
// The kitty icon has multiple paths with different colors. I'll preserve them for now as it's "official".
|
||||
// If it looks weird in dark mode/light mode, we might need to adjust.
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 240 240"
|
||||
{...props} // Allow overriding width/height
|
||||
>
|
||||
<g transform="translate(0 -812.362)">
|
||||
<rect
|
||||
width="100.446"
|
||||
height="161.551"
|
||||
x="72.824"
|
||||
y="850.13"
|
||||
ry="0"
|
||||
style={{
|
||||
fill: "#ddd",
|
||||
fillOpacity: 1,
|
||||
fillRule: "evenodd",
|
||||
stroke: "none",
|
||||
strokeWidth: 5.86876726,
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeMiterlimit: 4,
|
||||
strokeDasharray: "none",
|
||||
strokeOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M67.896 1029.71h104.208a7.065 7.065 0 0 0 7.065-7.066V918.436a7.065 7.065 0 0 0-7.065-7.065H67.896a7.065 7.065 0 0 0-7.065 7.065v104.208a7.065 7.065 0 0 0 7.065 7.065m55.813-38.35h37.444a4.239 4.239 0 0 1 0 8.479H123.71a4.239 4.239 0 0 1 0-8.478m-45.032-45.71a4.239 4.239 0 0 1 5.991-5.99l26.48 26.464a4.24 4.24 0 0 1 0 5.992l-26.48 26.48a4.239 4.239 0 0 1-5.991-5.992l23.484-23.484z"
|
||||
style={{ strokeWidth: 1.41299629 }}
|
||||
/>
|
||||
<path
|
||||
d="M96.085 898.143c1.881 0 3.386-3.574 3.386-8.17 0-4.595-1.505-8.169-3.386-8.169-1.88 0-3.385 3.574-3.385 8.17 0 4.595 1.504 8.17 3.385 8.17"
|
||||
style={{
|
||||
clipRule: "evenodd",
|
||||
fill: "#c0c81f",
|
||||
fillOpacity: 1,
|
||||
fillRule: "evenodd",
|
||||
strokeWidth: 3.09913683,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M193.128 836.886c-4.596-4.85-25.53 1.022-38.295 8.936-9.957-5.106-21.956-8.17-34.721-8.17-13.02 0-25.02 3.064-34.977 8.17-12.765-7.914-33.955-14.042-38.295-8.936-4.595 5.106 3.32 26.296 12.765 38.04-.766 3.064-1.276 6.128-1.276 9.446 0 10.212 4.34 19.659 11.744 27.318h42.124c-1.276-2.553.511-4.085 8.17-4.085 7.659.255 9.19 1.532 8.17 4.085h42.124c7.404-7.66 11.744-17.36 11.744-27.318 0-3.318-.51-6.382-1.276-9.446 8.935-11.744 16.594-33.189 11.999-38.04m-97.015 67.4c-8.935 0-16.339-7.404-16.339-16.34s7.404-16.339 16.34-16.339 16.339 7.404 16.339 16.34-7.404 16.339-16.34 16.339m47.997 0c-8.936 0-16.34-7.404-16.34-16.34s7.404-16.339 16.34-16.339 16.34 7.404 16.34 16.34-7.15 16.339-16.34 16.339"
|
||||
style={{
|
||||
clipRule: "evenodd",
|
||||
fill: "#784421",
|
||||
fillOpacity: 1,
|
||||
fillRule: "evenodd",
|
||||
strokeWidth: 2.55301046,
|
||||
}}
|
||||
/>
|
||||
<g style={{ fill: "#2b1100", fillOpacity: 1 }}>
|
||||
<path
|
||||
d="M168.507 903.265c15.318-19.148 46.72-28.339 67.655-15.063-24.509-3.83-46.72 2.553-67.655 15.063"
|
||||
style={{
|
||||
clipRule: "evenodd",
|
||||
fillRule: "evenodd",
|
||||
strokeWidth: 2.55301046,
|
||||
fill: "#2b1100",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M167.486 898.67c8.68-20.425 34.466-33.7 55.145-26.552-21.7 2.808-39.316 11.233-55.145 26.551m-.256 9.957c15.83-15.063 50.806-20.169 61.528-4.34-21.7-6.893-40.593-3.83-61.527 4.34"
|
||||
style={{
|
||||
clipRule: "evenodd",
|
||||
fillRule: "evenodd",
|
||||
strokeWidth: 2.55301046,
|
||||
fill: "#2b1100",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
</g>
|
||||
<g style={{ fill: "#2b1100", fillOpacity: 1 }}>
|
||||
<path
|
||||
d="M71.493 903.265c-15.318-19.148-46.72-28.339-67.655-15.063 24.509-3.83 46.72 2.553 67.655 15.063"
|
||||
style={{
|
||||
clipRule: "evenodd",
|
||||
fillRule: "evenodd",
|
||||
strokeWidth: 2.55301046,
|
||||
fill: "#2b1100",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M72.514 898.67c-8.68-20.425-34.466-33.7-55.145-26.552 21.7 2.808 39.316 11.233 55.145 26.551m.256 9.957c-15.83-15.063-50.806-20.169-61.528-4.34 21.7-6.893 40.593-3.83 61.527 4.34"
|
||||
style={{
|
||||
clipRule: "evenodd",
|
||||
fillRule: "evenodd",
|
||||
strokeWidth: 2.55301046,
|
||||
fill: "#2b1100",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M52.6 893.563c-6.382 0-11.743 3.32-14.296 8.425h-.766c-6.893 0-12.765 5.106-12.765 11.489 0 8.935 9.19 13.786 17.615 10.722 5.106 7.404 16.084 7.915 20.17 0 6.126-.255 16.083-1.276 17.615-10.722 1.021-6.383-5.617-11.489-12.765-11.489h-.766c-2.042-5.106-7.659-8.425-14.041-8.425m134.8 0c6.382 0 11.743 3.32 14.296 8.425h.766c3.574 0 12.765 5.106 12.765 11.489 0 8.935-9.19 13.786-17.615 10.722-5.107 7.404-16.084 7.915-20.17 0-6.126-.255-16.083-1.276-17.615-10.722-1.021-6.383 9.19-11.489 12.765-11.489h.766c2.042-5.106 7.659-8.425 14.041-8.425"
|
||||
style={{
|
||||
clipRule: "evenodd",
|
||||
fill: "#483737",
|
||||
fillOpacity: 1,
|
||||
fillRule: "evenodd",
|
||||
strokeWidth: 2.55301046,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M143.542 898.143c1.881 0 3.386-3.574 3.386-8.17 0-4.595-1.505-8.169-3.386-8.169-1.88 0-3.386 3.574-3.386 8.17 0 4.595 1.505 8.17 3.386 8.17"
|
||||
style={{
|
||||
clipRule: "evenodd",
|
||||
fill: "#c0c81f",
|
||||
fillOpacity: 1,
|
||||
fillRule: "evenodd",
|
||||
strokeWidth: 3.09913683,
|
||||
}}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,729 @@
|
||||
import React, { useMemo, useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import { Save, Plus, AlertCircle, ChevronDown, ChevronUp } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import JsonEditor from "@/components/JsonEditor";
|
||||
import type { AppId } from "@/lib/api/types";
|
||||
import { McpServer, McpServerSpec } from "@/types";
|
||||
import { mcpPresets, getMcpPresetWithDescription } from "@/config/mcpPresets";
|
||||
import McpWizardModal from "./McpWizardModal";
|
||||
import {
|
||||
extractErrorMessage,
|
||||
translateMcpBackendError,
|
||||
} from "@/utils/errorUtils";
|
||||
import {
|
||||
tomlToMcpServer,
|
||||
extractIdFromToml,
|
||||
mcpServerToToml,
|
||||
} from "@/utils/tomlUtils";
|
||||
import { normalizeTomlText } from "@/utils/textNormalization";
|
||||
import { parseSmartMcpJson } from "@/utils/formatters";
|
||||
import { useMcpValidation } from "./useMcpValidation";
|
||||
import { useUpsertMcpServer } from "@/hooks/useMcp";
|
||||
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
|
||||
|
||||
interface McpFormModalProps {
|
||||
editingId?: string;
|
||||
initialData?: McpServer;
|
||||
onSave: () => Promise<void>;
|
||||
onClose: () => void;
|
||||
existingIds?: string[];
|
||||
defaultFormat?: "json" | "toml";
|
||||
defaultEnabledApps?: AppId[];
|
||||
}
|
||||
|
||||
const McpFormModal: React.FC<McpFormModalProps> = ({
|
||||
editingId,
|
||||
initialData,
|
||||
onSave,
|
||||
onClose,
|
||||
existingIds = [],
|
||||
defaultFormat = "json",
|
||||
defaultEnabledApps = ["claude", "codex", "gemini"],
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { formatTomlError, validateTomlConfig, validateJsonConfig } =
|
||||
useMcpValidation();
|
||||
|
||||
const upsertMutation = useUpsertMcpServer();
|
||||
|
||||
const [formId, setFormId] = useState(
|
||||
() => editingId || initialData?.id || "",
|
||||
);
|
||||
const [formName, setFormName] = useState(initialData?.name || "");
|
||||
const [formDescription, setFormDescription] = useState(
|
||||
initialData?.description || "",
|
||||
);
|
||||
const [formHomepage, setFormHomepage] = useState(initialData?.homepage || "");
|
||||
const [formDocs, setFormDocs] = useState(initialData?.docs || "");
|
||||
const [formTags, setFormTags] = useState(initialData?.tags?.join(", ") || "");
|
||||
|
||||
const [enabledApps, setEnabledApps] = useState<{
|
||||
claude: boolean;
|
||||
codex: boolean;
|
||||
gemini: boolean;
|
||||
opencode: boolean;
|
||||
openclaw: boolean;
|
||||
hermes: boolean;
|
||||
}>(() => {
|
||||
if (initialData?.apps) {
|
||||
return { ...initialData.apps };
|
||||
}
|
||||
return {
|
||||
claude: defaultEnabledApps.includes("claude"),
|
||||
codex: defaultEnabledApps.includes("codex"),
|
||||
gemini: defaultEnabledApps.includes("gemini"),
|
||||
opencode: defaultEnabledApps.includes("opencode"),
|
||||
openclaw: defaultEnabledApps.includes("openclaw"),
|
||||
hermes: defaultEnabledApps.includes("hermes"),
|
||||
};
|
||||
});
|
||||
|
||||
const isEditing = !!editingId;
|
||||
|
||||
const hasAdditionalInfo = !!(
|
||||
initialData?.description ||
|
||||
initialData?.tags?.length ||
|
||||
initialData?.homepage ||
|
||||
initialData?.docs
|
||||
);
|
||||
|
||||
const [showMetadata, setShowMetadata] = useState(
|
||||
isEditing ? hasAdditionalInfo : false,
|
||||
);
|
||||
|
||||
const useTomlFormat = useMemo(() => {
|
||||
if (initialData?.server) {
|
||||
return defaultFormat === "toml";
|
||||
}
|
||||
return defaultFormat === "toml";
|
||||
}, [defaultFormat, initialData]);
|
||||
|
||||
const [formConfig, setFormConfig] = useState(() => {
|
||||
const spec = initialData?.server;
|
||||
if (!spec) return "";
|
||||
if (useTomlFormat) {
|
||||
return mcpServerToToml(spec);
|
||||
}
|
||||
return JSON.stringify(spec, null, 2);
|
||||
});
|
||||
|
||||
const [configError, setConfigError] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [isWizardOpen, setIsWizardOpen] = useState(false);
|
||||
const [idError, setIdError] = useState("");
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const useToml = useTomlFormat;
|
||||
|
||||
const wizardInitialSpec = useMemo(() => {
|
||||
const fallback = initialData?.server;
|
||||
if (!formConfig.trim()) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
if (useToml) {
|
||||
try {
|
||||
return tomlToMcpServer(formConfig);
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(formConfig);
|
||||
if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
|
||||
return parsed as McpServerSpec;
|
||||
}
|
||||
return fallback;
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}, [formConfig, initialData, useToml]);
|
||||
|
||||
const [selectedPreset, setSelectedPreset] = useState<number | null>(
|
||||
isEditing ? null : -1,
|
||||
);
|
||||
|
||||
const handleIdChange = (value: string) => {
|
||||
setFormId(value);
|
||||
if (!isEditing) {
|
||||
const exists = existingIds.includes(value.trim());
|
||||
setIdError(exists ? t("mcp.error.idExists") : "");
|
||||
}
|
||||
};
|
||||
|
||||
const ensureUniqueId = (base: string): string => {
|
||||
let candidate = base.trim();
|
||||
if (!candidate) candidate = "mcp-server";
|
||||
if (!existingIds.includes(candidate)) return candidate;
|
||||
let i = 1;
|
||||
while (existingIds.includes(`${candidate}-${i}`)) i++;
|
||||
return `${candidate}-${i}`;
|
||||
};
|
||||
|
||||
const applyPreset = (index: number) => {
|
||||
if (index < 0 || index >= mcpPresets.length) return;
|
||||
const preset = mcpPresets[index];
|
||||
const presetWithDesc = getMcpPresetWithDescription(preset, t);
|
||||
|
||||
const id = ensureUniqueId(presetWithDesc.id);
|
||||
setFormId(id);
|
||||
setFormName(presetWithDesc.name || presetWithDesc.id);
|
||||
setFormDescription(presetWithDesc.description || "");
|
||||
setFormHomepage(presetWithDesc.homepage || "");
|
||||
setFormDocs(presetWithDesc.docs || "");
|
||||
setFormTags(presetWithDesc.tags?.join(", ") || "");
|
||||
|
||||
if (useToml) {
|
||||
const toml = mcpServerToToml(presetWithDesc.server);
|
||||
setFormConfig(toml);
|
||||
setConfigError(validateTomlConfig(toml));
|
||||
} else {
|
||||
const json = JSON.stringify(presetWithDesc.server, null, 2);
|
||||
setFormConfig(json);
|
||||
setConfigError(validateJsonConfig(json));
|
||||
}
|
||||
setSelectedPreset(index);
|
||||
};
|
||||
|
||||
const applyCustom = () => {
|
||||
setSelectedPreset(-1);
|
||||
setFormId("");
|
||||
setFormName("");
|
||||
setFormDescription("");
|
||||
setFormHomepage("");
|
||||
setFormDocs("");
|
||||
setFormTags("");
|
||||
setFormConfig("");
|
||||
setConfigError("");
|
||||
};
|
||||
|
||||
const handleConfigChange = (value: string) => {
|
||||
const nextValue = useToml ? normalizeTomlText(value) : value;
|
||||
setFormConfig(nextValue);
|
||||
|
||||
if (useToml) {
|
||||
const err = validateTomlConfig(nextValue);
|
||||
if (err) {
|
||||
setConfigError(err);
|
||||
return;
|
||||
}
|
||||
|
||||
if (nextValue.trim() && !formId.trim()) {
|
||||
const extractedId = extractIdFromToml(nextValue);
|
||||
if (extractedId) {
|
||||
setFormId(extractedId);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const result = parseSmartMcpJson(value);
|
||||
const configJson = JSON.stringify(result.config);
|
||||
const validationErr = validateJsonConfig(configJson);
|
||||
|
||||
if (validationErr) {
|
||||
setConfigError(validationErr);
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.id && !formId.trim() && !isEditing) {
|
||||
const uniqueId = ensureUniqueId(result.id);
|
||||
setFormId(uniqueId);
|
||||
|
||||
if (!formName.trim()) {
|
||||
setFormName(result.id);
|
||||
}
|
||||
}
|
||||
|
||||
setConfigError("");
|
||||
} catch (err: any) {
|
||||
const errorMessage = err?.message || String(err);
|
||||
setConfigError(t("mcp.error.jsonInvalid") + ": " + errorMessage);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleWizardApply = (title: string, json: string) => {
|
||||
setFormId(title);
|
||||
if (!formName.trim()) {
|
||||
setFormName(title);
|
||||
}
|
||||
if (useToml) {
|
||||
try {
|
||||
const server = JSON.parse(json) as McpServerSpec;
|
||||
const toml = mcpServerToToml(server);
|
||||
setFormConfig(toml);
|
||||
setConfigError(validateTomlConfig(toml));
|
||||
} catch (e: any) {
|
||||
setConfigError(t("mcp.error.jsonInvalid"));
|
||||
}
|
||||
} else {
|
||||
setFormConfig(json);
|
||||
setConfigError(validateJsonConfig(json));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const trimmedId = formId.trim();
|
||||
if (!trimmedId) {
|
||||
toast.error(t("mcp.error.idRequired"), { duration: 3000 });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isEditing && existingIds.includes(trimmedId)) {
|
||||
setIdError(t("mcp.error.idExists"));
|
||||
return;
|
||||
}
|
||||
|
||||
let serverSpec: McpServerSpec;
|
||||
|
||||
if (useToml) {
|
||||
const tomlError = validateTomlConfig(formConfig);
|
||||
setConfigError(tomlError);
|
||||
if (tomlError) {
|
||||
toast.error(t("mcp.error.tomlInvalid"), { duration: 3000 });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formConfig.trim()) {
|
||||
serverSpec = {
|
||||
type: "stdio",
|
||||
command: "",
|
||||
args: [],
|
||||
};
|
||||
} else {
|
||||
try {
|
||||
serverSpec = tomlToMcpServer(formConfig);
|
||||
} catch (e: any) {
|
||||
const msg = e?.message || String(e);
|
||||
setConfigError(formatTomlError(msg));
|
||||
toast.error(t("mcp.error.tomlInvalid"), { duration: 4000 });
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (!formConfig.trim()) {
|
||||
serverSpec = {
|
||||
type: "stdio",
|
||||
command: "",
|
||||
args: [],
|
||||
};
|
||||
} else {
|
||||
try {
|
||||
const result = parseSmartMcpJson(formConfig);
|
||||
serverSpec = result.config as McpServerSpec;
|
||||
} catch (e: any) {
|
||||
const errorMessage = e?.message || String(e);
|
||||
setConfigError(t("mcp.error.jsonInvalid") + ": " + errorMessage);
|
||||
toast.error(t("mcp.error.jsonInvalid"), { duration: 4000 });
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (serverSpec?.type === "stdio" && !serverSpec?.command?.trim()) {
|
||||
toast.error(t("mcp.error.commandRequired"), { duration: 3000 });
|
||||
return;
|
||||
}
|
||||
if (
|
||||
(serverSpec?.type === "http" || serverSpec?.type === "sse") &&
|
||||
!serverSpec?.url?.trim()
|
||||
) {
|
||||
toast.error(t("mcp.wizard.urlRequired"), { duration: 3000 });
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const nameTrimmed = (formName || trimmedId).trim();
|
||||
const finalName = nameTrimmed || trimmedId;
|
||||
|
||||
const entry: McpServer = {
|
||||
...(initialData ? { ...initialData } : {}),
|
||||
id: trimmedId,
|
||||
name: finalName,
|
||||
server: serverSpec,
|
||||
apps: enabledApps,
|
||||
};
|
||||
|
||||
const descriptionTrimmed = formDescription.trim();
|
||||
if (descriptionTrimmed) {
|
||||
entry.description = descriptionTrimmed;
|
||||
} else {
|
||||
delete entry.description;
|
||||
}
|
||||
|
||||
const homepageTrimmed = formHomepage.trim();
|
||||
if (homepageTrimmed) {
|
||||
entry.homepage = homepageTrimmed;
|
||||
} else {
|
||||
delete entry.homepage;
|
||||
}
|
||||
|
||||
const docsTrimmed = formDocs.trim();
|
||||
if (docsTrimmed) {
|
||||
entry.docs = docsTrimmed;
|
||||
} else {
|
||||
delete entry.docs;
|
||||
}
|
||||
|
||||
const parsedTags = formTags
|
||||
.split(",")
|
||||
.map((tag) => tag.trim())
|
||||
.filter((tag) => tag.length > 0);
|
||||
if (parsedTags.length > 0) {
|
||||
entry.tags = parsedTags;
|
||||
} else {
|
||||
delete entry.tags;
|
||||
}
|
||||
|
||||
await upsertMutation.mutateAsync(entry);
|
||||
toast.success(t("common.success"), { closeButton: true });
|
||||
await onSave();
|
||||
} catch (error: any) {
|
||||
const detail = extractErrorMessage(error);
|
||||
const mapped = translateMcpBackendError(detail, t);
|
||||
const msg = mapped || detail || t("mcp.error.saveFailed");
|
||||
toast.error(msg, { duration: mapped || detail ? 6000 : 4000 });
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getFormTitle = () => {
|
||||
return isEditing ? t("mcp.editServer") : t("mcp.addServer");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FullScreenPanel
|
||||
isOpen={true}
|
||||
title={getFormTitle()}
|
||||
onClose={onClose}
|
||||
footer={
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={saving || (!isEditing && !!idError)}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isEditing ? <Save size={16} /> : <Plus size={16} />}
|
||||
{saving
|
||||
? t("common.saving")
|
||||
: isEditing
|
||||
? t("common.save")
|
||||
: t("common.add")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col h-full gap-6">
|
||||
{/* 上半部分：表单字段 */}
|
||||
<div className="glass rounded-xl p-6 border border-white/10 space-y-6 flex-shrink-0">
|
||||
{/* 预设选择（仅新增时展示） */}
|
||||
{!isEditing && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-3">
|
||||
{t("mcp.presets.title")}
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={applyCustom}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
selectedPreset === -1
|
||||
? "bg-emerald-500 text-white dark:bg-emerald-600"
|
||||
: "bg-accent text-muted-foreground hover:bg-accent/80"
|
||||
}`}
|
||||
>
|
||||
{t("presetSelector.custom")}
|
||||
</button>
|
||||
{mcpPresets.map((preset, idx) => {
|
||||
const descriptionKey = `mcp.presets.${preset.id}.description`;
|
||||
return (
|
||||
<button
|
||||
key={preset.id}
|
||||
type="button"
|
||||
onClick={() => applyPreset(idx)}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
selectedPreset === idx
|
||||
? "bg-emerald-500 text-white dark:bg-emerald-600"
|
||||
: "bg-accent text-muted-foreground hover:bg-accent/80"
|
||||
}`}
|
||||
title={t(descriptionKey)}
|
||||
>
|
||||
{preset.id}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ID (标题) */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
{t("mcp.form.title")} <span className="text-red-500">*</span>
|
||||
</label>
|
||||
{!isEditing && idError && (
|
||||
<span className="text-xs text-red-500 dark:text-red-400">
|
||||
{idError}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t("mcp.form.titlePlaceholder")}
|
||||
value={formId}
|
||||
onChange={(e) => handleIdChange(e.target.value)}
|
||||
disabled={isEditing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
{t("mcp.form.name")}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t("mcp.form.namePlaceholder")}
|
||||
value={formName}
|
||||
onChange={(e) => setFormName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 启用到哪些应用 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-3">
|
||||
{t("mcp.form.enabledApps")}
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="enable-claude"
|
||||
checked={enabledApps.claude}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
setEnabledApps({ ...enabledApps, claude: checked })
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="enable-claude"
|
||||
className="text-sm text-foreground cursor-pointer select-none"
|
||||
>
|
||||
{t("mcp.unifiedPanel.apps.claude")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="enable-codex"
|
||||
checked={enabledApps.codex}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
setEnabledApps({ ...enabledApps, codex: checked })
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="enable-codex"
|
||||
className="text-sm text-foreground cursor-pointer select-none"
|
||||
>
|
||||
{t("mcp.unifiedPanel.apps.codex")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="enable-gemini"
|
||||
checked={enabledApps.gemini}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
setEnabledApps({ ...enabledApps, gemini: checked })
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="enable-gemini"
|
||||
className="text-sm text-foreground cursor-pointer select-none"
|
||||
>
|
||||
{t("mcp.unifiedPanel.apps.gemini")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="enable-opencode"
|
||||
checked={enabledApps.opencode}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
setEnabledApps({ ...enabledApps, opencode: checked })
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="enable-opencode"
|
||||
className="text-sm text-foreground cursor-pointer select-none"
|
||||
>
|
||||
{t("mcp.unifiedPanel.apps.opencode")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="enable-hermes"
|
||||
checked={enabledApps.hermes}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
setEnabledApps({ ...enabledApps, hermes: checked })
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="enable-hermes"
|
||||
className="text-sm text-foreground cursor-pointer select-none"
|
||||
>
|
||||
{t("mcp.unifiedPanel.apps.hermes")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 可折叠的附加信息按钮 */}
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowMetadata(!showMetadata)}
|
||||
className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{showMetadata ? (
|
||||
<ChevronUp size={16} />
|
||||
) : (
|
||||
<ChevronDown size={16} />
|
||||
)}
|
||||
{t("mcp.form.additionalInfo")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 附加信息区域（可折叠） */}
|
||||
{showMetadata && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
{t("mcp.form.description")}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t("mcp.form.descriptionPlaceholder")}
|
||||
value={formDescription}
|
||||
onChange={(e) => setFormDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
{t("mcp.form.tags")}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t("mcp.form.tagsPlaceholder")}
|
||||
value={formTags}
|
||||
onChange={(e) => setFormTags(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
{t("mcp.form.homepage")}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t("mcp.form.homepagePlaceholder")}
|
||||
value={formHomepage}
|
||||
onChange={(e) => setFormHomepage(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
{t("mcp.form.docs")}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t("mcp.form.docsPlaceholder")}
|
||||
value={formDocs}
|
||||
onChange={(e) => setFormDocs(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 下半部分：JSON 配置编辑器 - 自适应剩余高度 */}
|
||||
<div className="glass rounded-xl p-6 border border-white/10 flex flex-col flex-1 min-h-0">
|
||||
<div className="flex items-center justify-between mb-4 flex-shrink-0">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{useToml ? t("mcp.form.tomlConfig") : t("mcp.form.jsonConfig")}
|
||||
</label>
|
||||
{(isEditing || selectedPreset === -1) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsWizardOpen(true)}
|
||||
className="text-sm text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors"
|
||||
>
|
||||
{t("mcp.form.useWizard")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 flex flex-col">
|
||||
<div className="flex-1 min-h-0">
|
||||
<JsonEditor
|
||||
value={formConfig}
|
||||
onChange={handleConfigChange}
|
||||
placeholder={
|
||||
useToml
|
||||
? t("mcp.form.tomlPlaceholder")
|
||||
: t("mcp.form.jsonPlaceholder")
|
||||
}
|
||||
darkMode={isDarkMode}
|
||||
rows={12}
|
||||
showValidation={!useToml}
|
||||
language={useToml ? "javascript" : "json"}
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
{configError && (
|
||||
<div className="flex items-center gap-2 mt-2 text-red-500 dark:text-red-400 text-sm flex-shrink-0">
|
||||
<AlertCircle size={16} />
|
||||
<span>{configError}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FullScreenPanel>
|
||||
|
||||
{/* Wizard Modal */}
|
||||
<McpWizardModal
|
||||
isOpen={isWizardOpen}
|
||||
onClose={() => setIsWizardOpen(false)}
|
||||
onApply={handleWizardApply}
|
||||
initialTitle={formId}
|
||||
initialServer={wizardInitialSpec}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default McpFormModal;
|
||||
@@ -0,0 +1,432 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import { Save } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { McpServerSpec } from "@/types";
|
||||
|
||||
interface McpWizardModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onApply: (title: string, json: string) => void;
|
||||
initialTitle?: string;
|
||||
initialServer?: McpServerSpec;
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析环境变量文本为对象
|
||||
*/
|
||||
const parseEnvText = (text: string): Record<string, string> => {
|
||||
const lines = text
|
||||
.split("\n")
|
||||
.map((l) => l.trim())
|
||||
.filter((l) => l.length > 0);
|
||||
const env: Record<string, string> = {};
|
||||
for (const l of lines) {
|
||||
const idx = l.indexOf("=");
|
||||
if (idx > 0) {
|
||||
const k = l.slice(0, idx).trim();
|
||||
const v = l.slice(idx + 1).trim();
|
||||
if (k) env[k] = v;
|
||||
}
|
||||
}
|
||||
return env;
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析headers文本为对象（支持 KEY: VALUE 或 KEY=VALUE）
|
||||
*/
|
||||
const parseHeadersText = (text: string): Record<string, string> => {
|
||||
const lines = text
|
||||
.split("\n")
|
||||
.map((l) => l.trim())
|
||||
.filter((l) => l.length > 0);
|
||||
const headers: Record<string, string> = {};
|
||||
for (const l of lines) {
|
||||
// 支持 KEY: VALUE 或 KEY=VALUE
|
||||
const colonIdx = l.indexOf(":");
|
||||
const equalIdx = l.indexOf("=");
|
||||
let idx = -1;
|
||||
if (colonIdx > 0 && (equalIdx === -1 || colonIdx < equalIdx)) {
|
||||
idx = colonIdx;
|
||||
} else if (equalIdx > 0) {
|
||||
idx = equalIdx;
|
||||
}
|
||||
if (idx > 0) {
|
||||
const k = l.slice(0, idx).trim();
|
||||
const v = l.slice(idx + 1).trim();
|
||||
if (k) headers[k] = v;
|
||||
}
|
||||
}
|
||||
return headers;
|
||||
};
|
||||
|
||||
/**
|
||||
* MCP 配置向导模态框
|
||||
* 帮助用户快速生成 MCP JSON 配置
|
||||
*/
|
||||
const McpWizardModal: React.FC<McpWizardModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onApply,
|
||||
initialTitle,
|
||||
initialServer,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [wizardType, setWizardType] = useState<"stdio" | "http" | "sse">(
|
||||
"stdio",
|
||||
);
|
||||
const [wizardTitle, setWizardTitle] = useState("");
|
||||
// stdio 字段
|
||||
const [wizardCommand, setWizardCommand] = useState("");
|
||||
const [wizardArgs, setWizardArgs] = useState("");
|
||||
const [wizardEnv, setWizardEnv] = useState("");
|
||||
// http 和 sse 字段
|
||||
const [wizardUrl, setWizardUrl] = useState("");
|
||||
const [wizardHeaders, setWizardHeaders] = useState("");
|
||||
|
||||
// 生成预览 JSON
|
||||
const generatePreview = (): string => {
|
||||
const config: McpServerSpec = {
|
||||
type: wizardType,
|
||||
};
|
||||
|
||||
if (wizardType === "stdio") {
|
||||
// stdio 类型必需字段
|
||||
config.command = wizardCommand.trim();
|
||||
|
||||
// 可选字段
|
||||
if (wizardArgs.trim()) {
|
||||
config.args = wizardArgs
|
||||
.split("\n")
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s.length > 0);
|
||||
}
|
||||
|
||||
if (wizardEnv.trim()) {
|
||||
const env = parseEnvText(wizardEnv);
|
||||
if (Object.keys(env).length > 0) {
|
||||
config.env = env;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// http 和 sse 类型必需字段
|
||||
config.url = wizardUrl.trim();
|
||||
|
||||
// 可选字段
|
||||
if (wizardHeaders.trim()) {
|
||||
const headers = parseHeadersText(wizardHeaders);
|
||||
if (Object.keys(headers).length > 0) {
|
||||
config.headers = headers;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return JSON.stringify(config, null, 2);
|
||||
};
|
||||
|
||||
const handleApply = () => {
|
||||
if (!wizardTitle.trim()) {
|
||||
toast.error(t("mcp.error.idRequired"), { duration: 3000 });
|
||||
return;
|
||||
}
|
||||
if (wizardType === "stdio" && !wizardCommand.trim()) {
|
||||
toast.error(t("mcp.error.commandRequired"), { duration: 3000 });
|
||||
return;
|
||||
}
|
||||
if ((wizardType === "http" || wizardType === "sse") && !wizardUrl.trim()) {
|
||||
toast.error(t("mcp.wizard.urlRequired"), { duration: 3000 });
|
||||
return;
|
||||
}
|
||||
|
||||
const json = generatePreview();
|
||||
onApply(wizardTitle.trim(), json);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
// 重置表单
|
||||
setWizardType("stdio");
|
||||
setWizardTitle("");
|
||||
setWizardCommand("");
|
||||
setWizardArgs("");
|
||||
setWizardEnv("");
|
||||
setWizardUrl("");
|
||||
setWizardHeaders("");
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" && e.metaKey) {
|
||||
e.preventDefault();
|
||||
handleApply();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const title = initialTitle ?? "";
|
||||
setWizardTitle(title);
|
||||
|
||||
const resolvedType =
|
||||
initialServer?.type ?? (initialServer?.url ? "http" : "stdio");
|
||||
|
||||
setWizardType(resolvedType);
|
||||
|
||||
if (resolvedType === "http" || resolvedType === "sse") {
|
||||
setWizardUrl(initialServer?.url ?? "");
|
||||
const headersCandidate = initialServer?.headers;
|
||||
const headers =
|
||||
headersCandidate && typeof headersCandidate === "object"
|
||||
? headersCandidate
|
||||
: undefined;
|
||||
setWizardHeaders(
|
||||
headers
|
||||
? Object.entries(headers)
|
||||
.map(([k, v]) => `${k}: ${v ?? ""}`)
|
||||
.join("\n")
|
||||
: "",
|
||||
);
|
||||
setWizardCommand("");
|
||||
setWizardArgs("");
|
||||
setWizardEnv("");
|
||||
return;
|
||||
}
|
||||
|
||||
setWizardCommand(initialServer?.command ?? "");
|
||||
const argsValue = initialServer?.args;
|
||||
setWizardArgs(Array.isArray(argsValue) ? argsValue.join("\n") : "");
|
||||
const envCandidate = initialServer?.env;
|
||||
const env =
|
||||
envCandidate && typeof envCandidate === "object"
|
||||
? envCandidate
|
||||
: undefined;
|
||||
setWizardEnv(
|
||||
env
|
||||
? Object.entries(env)
|
||||
.map(([k, v]) => `${k}=${v ?? ""}`)
|
||||
.join("\n")
|
||||
: "",
|
||||
);
|
||||
setWizardUrl("");
|
||||
setWizardHeaders("");
|
||||
}, [isOpen]);
|
||||
|
||||
const preview = generatePreview();
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
|
||||
<DialogContent
|
||||
className="max-w-2xl max-h-[90vh] flex flex-col"
|
||||
zIndex="alert"
|
||||
>
|
||||
<DialogHeader className="space-y-3 border-b-0 bg-transparent pb-0">
|
||||
<DialogTitle className="text-lg font-semibold">
|
||||
{t("mcp.wizard.title")}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
|
||||
{/* Hint */}
|
||||
<div className="rounded-lg border border-border-default bg-gray-100/50 dark:bg-gray-800/50 p-3">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("mcp.wizard.hint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form Fields */}
|
||||
<div className="space-y-4 min-h-[400px]">
|
||||
{/* Type */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-foreground">
|
||||
{t("mcp.wizard.type")} <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="flex gap-4">
|
||||
<label className="inline-flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value="stdio"
|
||||
checked={wizardType === "stdio"}
|
||||
onChange={(e) =>
|
||||
setWizardType(e.target.value as "stdio" | "http" | "sse")
|
||||
}
|
||||
className="w-4 h-4 accent-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-foreground">
|
||||
{t("mcp.wizard.typeStdio")}
|
||||
</span>
|
||||
</label>
|
||||
<label className="inline-flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value="http"
|
||||
checked={wizardType === "http"}
|
||||
onChange={(e) =>
|
||||
setWizardType(e.target.value as "stdio" | "http" | "sse")
|
||||
}
|
||||
className="w-4 h-4 accent-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-foreground">
|
||||
{t("mcp.wizard.typeHttp")}
|
||||
</span>
|
||||
</label>
|
||||
<label className="inline-flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value="sse"
|
||||
checked={wizardType === "sse"}
|
||||
onChange={(e) =>
|
||||
setWizardType(e.target.value as "stdio" | "http" | "sse")
|
||||
}
|
||||
className="w-4 h-4 accent-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-foreground">
|
||||
{t("mcp.wizard.typeSse")}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-foreground">
|
||||
{t("mcp.form.title")} <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={wizardTitle}
|
||||
onChange={(e) => setWizardTitle(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={t("mcp.form.titlePlaceholder")}
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Stdio 类型字段 */}
|
||||
{wizardType === "stdio" && (
|
||||
<>
|
||||
{/* Command */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-foreground">
|
||||
{t("mcp.wizard.command")}{" "}
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={wizardCommand}
|
||||
onChange={(e) => setWizardCommand(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={t("mcp.wizard.commandPlaceholder")}
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Args */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-foreground">
|
||||
{t("mcp.wizard.args")}
|
||||
</label>
|
||||
<textarea
|
||||
value={wizardArgs}
|
||||
onChange={(e) => setWizardArgs(e.target.value)}
|
||||
placeholder={t("mcp.wizard.argsPlaceholder")}
|
||||
rows={3}
|
||||
className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Env */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-foreground">
|
||||
{t("mcp.wizard.env")}
|
||||
</label>
|
||||
<textarea
|
||||
value={wizardEnv}
|
||||
onChange={(e) => setWizardEnv(e.target.value)}
|
||||
placeholder={t("mcp.wizard.envPlaceholder")}
|
||||
rows={3}
|
||||
className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* HTTP 和 SSE 类型字段 */}
|
||||
{(wizardType === "http" || wizardType === "sse") && (
|
||||
<>
|
||||
{/* URL */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-foreground">
|
||||
{t("mcp.wizard.url")}{" "}
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={wizardUrl}
|
||||
onChange={(e) => setWizardUrl(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={t("mcp.wizard.urlPlaceholder")}
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Headers */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-foreground">
|
||||
{t("mcp.wizard.headers")}
|
||||
</label>
|
||||
<textarea
|
||||
value={wizardHeaders}
|
||||
onChange={(e) => setWizardHeaders(e.target.value)}
|
||||
placeholder={t("mcp.wizard.headersPlaceholder")}
|
||||
rows={3}
|
||||
className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{(wizardCommand ||
|
||||
wizardArgs ||
|
||||
wizardEnv ||
|
||||
wizardUrl ||
|
||||
wizardHeaders) && (
|
||||
<div className="space-y-2 border-t border-border-default pt-4">
|
||||
<h3 className="text-sm font-medium text-foreground">
|
||||
{t("mcp.wizard.preview")}
|
||||
</h3>
|
||||
<pre className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800 p-3 text-xs font-mono text-gray-700 dark:text-gray-300">
|
||||
{preview}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<DialogFooter className="flex gap-2 border-t-0 bg-transparent pt-2 sm:justify-end">
|
||||
<Button variant="outline" onClick={handleClose}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button variant="mcp" onClick={handleApply}>
|
||||
<Save className="h-4 w-4" />
|
||||
{t("mcp.wizard.apply")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default McpWizardModal;
|
||||
@@ -0,0 +1,318 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Server } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import {
|
||||
useAllMcpServers,
|
||||
useToggleMcpApp,
|
||||
useDeleteMcpServer,
|
||||
useImportMcpFromApps,
|
||||
} from "@/hooks/useMcp";
|
||||
import type { McpServer } from "@/types";
|
||||
import type { AppId } from "@/lib/api/types";
|
||||
import McpFormModal from "./McpFormModal";
|
||||
import { ConfirmDialog } from "../ConfirmDialog";
|
||||
import { Edit3, Trash2, ExternalLink } from "lucide-react";
|
||||
import { settingsApi } from "@/lib/api";
|
||||
import { mcpPresets } from "@/config/mcpPresets";
|
||||
import { toast } from "sonner";
|
||||
import { MCP_APP_IDS } from "@/config/appConfig";
|
||||
import { AppCountBar } from "@/components/common/AppCountBar";
|
||||
import { AppToggleGroup } from "@/components/common/AppToggleGroup";
|
||||
import { ListItemRow } from "@/components/common/ListItemRow";
|
||||
|
||||
interface UnifiedMcpPanelProps {
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export interface UnifiedMcpPanelHandle {
|
||||
openAdd: () => void;
|
||||
openImport: () => void;
|
||||
}
|
||||
|
||||
const UnifiedMcpPanel = React.forwardRef<
|
||||
UnifiedMcpPanelHandle,
|
||||
UnifiedMcpPanelProps
|
||||
>(({ onOpenChange: _onOpenChange }, ref) => {
|
||||
const { t } = useTranslation();
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [confirmDialog, setConfirmDialog] = useState<{
|
||||
isOpen: boolean;
|
||||
title: string;
|
||||
message: string;
|
||||
onConfirm: () => void;
|
||||
} | null>(null);
|
||||
|
||||
const { data: serversMap, isLoading } = useAllMcpServers();
|
||||
const toggleAppMutation = useToggleMcpApp();
|
||||
const deleteServerMutation = useDeleteMcpServer();
|
||||
const importMutation = useImportMcpFromApps();
|
||||
|
||||
const serverEntries = useMemo((): Array<[string, McpServer]> => {
|
||||
if (!serversMap) return [];
|
||||
return Object.entries(serversMap);
|
||||
}, [serversMap]);
|
||||
|
||||
const enabledCounts = useMemo(() => {
|
||||
const counts = {
|
||||
claude: 0,
|
||||
"claude-desktop": 0,
|
||||
codex: 0,
|
||||
gemini: 0,
|
||||
opencode: 0,
|
||||
openclaw: 0,
|
||||
hermes: 0,
|
||||
};
|
||||
serverEntries.forEach(([_, server]) => {
|
||||
for (const app of MCP_APP_IDS) {
|
||||
if (server.apps[app]) counts[app]++;
|
||||
}
|
||||
});
|
||||
return counts;
|
||||
}, [serverEntries]);
|
||||
|
||||
const handleToggleApp = async (
|
||||
serverId: string,
|
||||
app: AppId,
|
||||
enabled: boolean,
|
||||
) => {
|
||||
try {
|
||||
await toggleAppMutation.mutateAsync({ serverId, app, enabled });
|
||||
} catch (error) {
|
||||
toast.error(t("common.error"), { description: String(error) });
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (id: string) => {
|
||||
setEditingId(id);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingId(null);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleImport = async () => {
|
||||
try {
|
||||
const count = await importMutation.mutateAsync();
|
||||
if (count === 0) {
|
||||
toast.success(t("mcp.unifiedPanel.noImportFound"), {
|
||||
closeButton: true,
|
||||
});
|
||||
} else {
|
||||
toast.success(t("mcp.unifiedPanel.importSuccess", { count }), {
|
||||
closeButton: true,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(t("common.error"), { description: String(error) });
|
||||
}
|
||||
};
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
openAdd: handleAdd,
|
||||
openImport: handleImport,
|
||||
}));
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
setConfirmDialog({
|
||||
isOpen: true,
|
||||
title: t("mcp.unifiedPanel.deleteServer"),
|
||||
message: t("mcp.unifiedPanel.deleteConfirm", { id }),
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
await deleteServerMutation.mutateAsync(id);
|
||||
setConfirmDialog(null);
|
||||
toast.success(t("common.success"), { closeButton: true });
|
||||
} catch (error) {
|
||||
toast.error(t("common.error"), { description: String(error) });
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleCloseForm = () => {
|
||||
setIsFormOpen(false);
|
||||
setEditingId(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="px-6 flex flex-col flex-1 min-h-0 overflow-hidden">
|
||||
<AppCountBar
|
||||
totalLabel={t("mcp.serverCount", { count: serverEntries.length })}
|
||||
counts={enabledCounts}
|
||||
appIds={MCP_APP_IDS}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden pb-24">
|
||||
{isLoading ? (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
{t("mcp.loading")}
|
||||
</div>
|
||||
) : serverEntries.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
|
||||
<Server size={24} className="text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-foreground mb-2">
|
||||
{t("mcp.unifiedPanel.noServers")}
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("mcp.emptyDescription")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<div className="rounded-xl border border-border-default overflow-hidden">
|
||||
{serverEntries.map(([id, server], index) => (
|
||||
<UnifiedMcpListItem
|
||||
key={id}
|
||||
id={id}
|
||||
server={server}
|
||||
onToggleApp={handleToggleApp}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
isLast={index === serverEntries.length - 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isFormOpen && (
|
||||
<McpFormModal
|
||||
editingId={editingId || undefined}
|
||||
initialData={
|
||||
editingId && serversMap ? serversMap[editingId] : undefined
|
||||
}
|
||||
existingIds={serversMap ? Object.keys(serversMap) : []}
|
||||
defaultFormat="json"
|
||||
onSave={async () => {
|
||||
setIsFormOpen(false);
|
||||
setEditingId(null);
|
||||
}}
|
||||
onClose={handleCloseForm}
|
||||
/>
|
||||
)}
|
||||
|
||||
{confirmDialog && (
|
||||
<ConfirmDialog
|
||||
isOpen={confirmDialog.isOpen}
|
||||
title={confirmDialog.title}
|
||||
message={confirmDialog.message}
|
||||
onConfirm={confirmDialog.onConfirm}
|
||||
onCancel={() => setConfirmDialog(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
UnifiedMcpPanel.displayName = "UnifiedMcpPanel";
|
||||
|
||||
interface UnifiedMcpListItemProps {
|
||||
id: string;
|
||||
server: McpServer;
|
||||
onToggleApp: (serverId: string, app: AppId, enabled: boolean) => void;
|
||||
onEdit: (id: string) => void;
|
||||
onDelete: (id: string) => void;
|
||||
isLast?: boolean;
|
||||
}
|
||||
|
||||
const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
|
||||
id,
|
||||
server,
|
||||
onToggleApp,
|
||||
onEdit,
|
||||
onDelete,
|
||||
isLast,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const name = server.name || id;
|
||||
const description = server.description || "";
|
||||
|
||||
const meta = mcpPresets.find((p) => p.id === id);
|
||||
const docsUrl = server.docs || meta?.docs;
|
||||
const homepageUrl = server.homepage || meta?.homepage;
|
||||
const tags = server.tags || meta?.tags;
|
||||
|
||||
const openDocs = async () => {
|
||||
const url = docsUrl || homepageUrl;
|
||||
if (!url) return;
|
||||
try {
|
||||
await settingsApi.openExternal(url);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ListItemRow isLast={isLast}>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-medium text-sm text-foreground truncate">
|
||||
{name}
|
||||
</span>
|
||||
{docsUrl && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={openDocs}
|
||||
className="text-muted-foreground/60 hover:text-foreground flex-shrink-0"
|
||||
title={t("mcp.presets.docs")}
|
||||
>
|
||||
<ExternalLink size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{description && (
|
||||
<p
|
||||
className="text-xs text-muted-foreground truncate"
|
||||
title={description}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
{!description && tags && tags.length > 0 && (
|
||||
<p className="text-xs text-muted-foreground/60 truncate">
|
||||
{tags.join(", ")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AppToggleGroup
|
||||
apps={server.apps}
|
||||
onToggle={(app, enabled) => onToggleApp(id, app, enabled)}
|
||||
appIds={MCP_APP_IDS}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => onEdit(id)}
|
||||
title={t("common.edit")}
|
||||
>
|
||||
<Edit3 size={14} />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
|
||||
onClick={() => onDelete(id)}
|
||||
title={t("common.delete")}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
</ListItemRow>
|
||||
);
|
||||
};
|
||||
|
||||
export default UnifiedMcpPanel;
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { validateToml, tomlToMcpServer } from "@/utils/tomlUtils";
|
||||
|
||||
export function useMcpValidation() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// JSON basic validation (returns i18n text)
|
||||
const validateJson = (text: string): string => {
|
||||
if (!text.trim()) return "";
|
||||
try {
|
||||
const parsed = JSON.parse(text);
|
||||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
|
||||
return t("mcp.error.jsonInvalid");
|
||||
}
|
||||
return "";
|
||||
} catch {
|
||||
return t("mcp.error.jsonInvalid");
|
||||
}
|
||||
};
|
||||
|
||||
// Unified TOML error formatting (localization + details)
|
||||
const formatTomlError = (err: string): string => {
|
||||
if (!err) return "";
|
||||
if (err === "mustBeObject" || err === "parseError") {
|
||||
return t("mcp.error.tomlInvalid");
|
||||
}
|
||||
return `${t("mcp.error.tomlInvalid")}: ${err}`;
|
||||
};
|
||||
|
||||
// Full TOML validation (including required field checks)
|
||||
const validateTomlConfig = (value: string): string => {
|
||||
const err = validateToml(value);
|
||||
if (err) {
|
||||
return formatTomlError(err);
|
||||
}
|
||||
|
||||
// Try to parse and check required fields
|
||||
if (value.trim()) {
|
||||
try {
|
||||
const server = tomlToMcpServer(value);
|
||||
if (server.type === "stdio" && !server.command?.trim()) {
|
||||
return t("mcp.error.commandRequired");
|
||||
}
|
||||
if (
|
||||
(server.type === "http" || server.type === "sse") &&
|
||||
!server.url?.trim()
|
||||
) {
|
||||
return t("mcp.wizard.urlRequired");
|
||||
}
|
||||
} catch (e: any) {
|
||||
const msg = e?.message || String(e);
|
||||
return formatTomlError(msg);
|
||||
}
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
// Full JSON validation (including structure checks)
|
||||
const validateJsonConfig = (value: string): string => {
|
||||
const baseErr = validateJson(value);
|
||||
if (baseErr) {
|
||||
return baseErr;
|
||||
}
|
||||
|
||||
// Further structure validation
|
||||
if (value.trim()) {
|
||||
try {
|
||||
const obj = JSON.parse(value);
|
||||
if (obj && typeof obj === "object") {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, "mcpServers")) {
|
||||
return t("mcp.error.singleServerObjectRequired");
|
||||
}
|
||||
|
||||
const typ = (obj as any)?.type;
|
||||
if (typ === "stdio" && !(obj as any)?.command?.trim()) {
|
||||
return t("mcp.error.commandRequired");
|
||||
}
|
||||
if ((typ === "http" || typ === "sse") && !(obj as any)?.url?.trim()) {
|
||||
return t("mcp.wizard.urlRequired");
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Parse errors already covered by base validation
|
||||
}
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
return {
|
||||
validateJson,
|
||||
formatTomlError,
|
||||
validateTomlConfig,
|
||||
validateJsonConfig,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useTheme } from "@/components/theme-provider";
|
||||
|
||||
export function ModeToggle() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const toggleTheme = () => {
|
||||
if (theme === "dark") {
|
||||
setTheme("light");
|
||||
} else {
|
||||
setTheme("dark");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Button variant="outline" size="icon" onClick={toggleTheme}>
|
||||
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">{t("common.toggleTheme")}</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,413 @@
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Save, Plus, Trash2, TriangleAlert } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
useOpenClawAgentsDefaults,
|
||||
useSaveOpenClawAgentsDefaults,
|
||||
} from "@/hooks/useOpenClaw";
|
||||
import { extractErrorMessage } from "@/utils/errorUtils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import type { OpenClawAgentsDefaults } from "@/types";
|
||||
import { useOpenClawModelOptions } from "./hooks/useOpenClawModelOptions";
|
||||
import { getOpenClawTimeoutInputValue } from "./utils";
|
||||
|
||||
const UNSET_SENTINEL = "__unset__";
|
||||
|
||||
const AgentsDefaultsPanel: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { data: agentsData, isLoading } = useOpenClawAgentsDefaults();
|
||||
const saveAgentsMutation = useSaveOpenClawAgentsDefaults();
|
||||
const { options: modelOptions, isLoading: modelsLoading } =
|
||||
useOpenClawModelOptions();
|
||||
|
||||
const [defaults, setDefaults] = useState<OpenClawAgentsDefaults | null>(null);
|
||||
const [primaryModel, setPrimaryModel] = useState("");
|
||||
const [fallbacks, setFallbacks] = useState<string[]>([]);
|
||||
|
||||
// Extra known fields from agents.defaults
|
||||
const [workspace, setWorkspace] = useState("");
|
||||
const [timeout, setTimeout_] = useState("");
|
||||
const [contextTokens, setContextTokens] = useState("");
|
||||
const [maxConcurrent, setMaxConcurrent] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// agentsData is undefined while loading, null when config section is absent
|
||||
if (agentsData === undefined) return;
|
||||
setDefaults(agentsData);
|
||||
|
||||
if (agentsData) {
|
||||
setPrimaryModel(agentsData.model?.primary ?? "");
|
||||
setFallbacks(agentsData.model?.fallbacks ?? []);
|
||||
|
||||
// Extract known extra fields
|
||||
setWorkspace(String(agentsData.workspace ?? ""));
|
||||
setTimeout_(getOpenClawTimeoutInputValue(agentsData));
|
||||
setContextTokens(String(agentsData.contextTokens ?? ""));
|
||||
setMaxConcurrent(String(agentsData.maxConcurrent ?? ""));
|
||||
} else {
|
||||
setPrimaryModel("");
|
||||
setFallbacks([]);
|
||||
setWorkspace("");
|
||||
setTimeout_("");
|
||||
setContextTokens("");
|
||||
setMaxConcurrent("");
|
||||
}
|
||||
}, [agentsData]);
|
||||
|
||||
// Build primary options, including a "not in list" entry if current value is missing
|
||||
const primaryOptions = useMemo(() => {
|
||||
const result = [...modelOptions];
|
||||
if (
|
||||
primaryModel &&
|
||||
!modelOptions.some((opt) => opt.value === primaryModel)
|
||||
) {
|
||||
result.unshift({
|
||||
value: primaryModel,
|
||||
label: t("openclaw.agents.notInList", {
|
||||
value: primaryModel,
|
||||
defaultValue: "{{value}} (not configured)",
|
||||
}),
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}, [modelOptions, primaryModel, t]);
|
||||
|
||||
// For each fallback row, compute available options (exclude primary + other fallbacks)
|
||||
const getFallbackOptions = (currentIndex: number) => {
|
||||
const usedValues = new Set<string>();
|
||||
if (primaryModel) usedValues.add(primaryModel);
|
||||
fallbacks.forEach((fb, idx) => {
|
||||
if (idx !== currentIndex && fb) usedValues.add(fb);
|
||||
});
|
||||
|
||||
const filtered = modelOptions.filter((opt) => !usedValues.has(opt.value));
|
||||
|
||||
// If current fallback value is not in modelOptions, add a "not in list" entry
|
||||
const currentValue = fallbacks[currentIndex];
|
||||
if (
|
||||
currentValue &&
|
||||
!modelOptions.some((opt) => opt.value === currentValue)
|
||||
) {
|
||||
filtered.unshift({
|
||||
value: currentValue,
|
||||
label: t("openclaw.agents.notInList", {
|
||||
value: currentValue,
|
||||
defaultValue: "{{value}} (not configured)",
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
return filtered;
|
||||
};
|
||||
|
||||
const handleAddFallback = () => {
|
||||
setFallbacks((prev) => [...prev, ""]);
|
||||
};
|
||||
|
||||
const handleRemoveFallback = (index: number) => {
|
||||
setFallbacks((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleFallbackChange = (index: number, value: string) => {
|
||||
setFallbacks((prev) => {
|
||||
const next = [...prev];
|
||||
next[index] = value;
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// Preserve all unknown fields from original data
|
||||
const updated: OpenClawAgentsDefaults = { ...defaults };
|
||||
|
||||
// Model configuration
|
||||
const fallbackList = fallbacks.filter(Boolean);
|
||||
|
||||
if (primaryModel) {
|
||||
updated.model = {
|
||||
primary: primaryModel,
|
||||
...(fallbackList.length > 0 ? { fallbacks: fallbackList } : {}),
|
||||
};
|
||||
} else if (fallbackList.length > 0) {
|
||||
updated.model = { primary: "", fallbacks: fallbackList };
|
||||
}
|
||||
|
||||
// Optional fields
|
||||
if (workspace.trim()) updated.workspace = workspace.trim();
|
||||
else delete updated.workspace;
|
||||
|
||||
// Numeric fields: validate before saving to avoid NaN
|
||||
const parseNum = (v: string) => {
|
||||
const n = Number(v);
|
||||
return !isNaN(n) && isFinite(n) ? n : undefined;
|
||||
};
|
||||
|
||||
const timeoutNum = timeout.trim() ? parseNum(timeout) : undefined;
|
||||
if (timeoutNum !== undefined) updated.timeoutSeconds = timeoutNum;
|
||||
else delete updated.timeoutSeconds;
|
||||
delete updated.timeout;
|
||||
|
||||
const ctxNum = contextTokens.trim() ? parseNum(contextTokens) : undefined;
|
||||
if (ctxNum !== undefined) updated.contextTokens = ctxNum;
|
||||
else delete updated.contextTokens;
|
||||
|
||||
const concNum = maxConcurrent.trim()
|
||||
? parseNum(maxConcurrent)
|
||||
: undefined;
|
||||
if (concNum !== undefined) updated.maxConcurrent = concNum;
|
||||
else delete updated.maxConcurrent;
|
||||
|
||||
await saveAgentsMutation.mutateAsync(updated);
|
||||
toast.success(t("openclaw.agents.saveSuccess"));
|
||||
} catch (error) {
|
||||
const detail = extractErrorMessage(error);
|
||||
toast.error(t("openclaw.agents.saveFailed"), {
|
||||
description: detail || undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="px-6 pt-4 pb-8 flex items-center justify-center min-h-[200px]">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{t("common.loading")}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const noModels = modelOptions.length === 0 && !modelsLoading;
|
||||
const hasLegacyTimeout =
|
||||
agentsData !== undefined &&
|
||||
agentsData !== null &&
|
||||
typeof agentsData.timeout === "number" &&
|
||||
typeof agentsData.timeoutSeconds !== "number";
|
||||
|
||||
return (
|
||||
<div className="px-6 pt-4 pb-8">
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
{t("openclaw.agents.description")}
|
||||
</p>
|
||||
|
||||
{hasLegacyTimeout && (
|
||||
<Alert className="mb-4 border-amber-500/30 bg-amber-500/5">
|
||||
<TriangleAlert className="h-4 w-4" />
|
||||
<AlertTitle>
|
||||
{t("openclaw.agents.legacyTimeoutTitle", {
|
||||
defaultValue: "Legacy timeout detected",
|
||||
})}
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
{t("openclaw.agents.legacyTimeoutDescription", {
|
||||
defaultValue:
|
||||
"This config still uses agents.defaults.timeout. Saving here will migrate it to timeoutSeconds.",
|
||||
})}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Model Configuration Card */}
|
||||
<div className="rounded-xl border border-border bg-card p-5 mb-4">
|
||||
<h3 className="text-sm font-medium mb-4">
|
||||
{t("openclaw.agents.modelSection")}
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Primary Model */}
|
||||
<div>
|
||||
<Label className="mb-1.5 block">
|
||||
{t("openclaw.agents.primaryModel")}
|
||||
</Label>
|
||||
{noModels ? (
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
{t("openclaw.agents.noModels", {
|
||||
defaultValue:
|
||||
"No configured provider models. Please add an OpenClaw provider first.",
|
||||
})}
|
||||
</p>
|
||||
) : (
|
||||
<Select
|
||||
value={primaryModel || UNSET_SENTINEL}
|
||||
onValueChange={(v) =>
|
||||
setPrimaryModel(v === UNSET_SENTINEL ? "" : v)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="font-mono text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={UNSET_SENTINEL}>
|
||||
{t("openclaw.agents.notSet")}
|
||||
</SelectItem>
|
||||
{primaryOptions.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{t("openclaw.agents.primaryModelHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Fallback Models */}
|
||||
<div>
|
||||
<Label className="mb-1.5 block">
|
||||
{t("openclaw.agents.fallbackModels")}
|
||||
</Label>
|
||||
|
||||
{fallbacks.length === 0 && !noModels && (
|
||||
<p className="text-xs text-muted-foreground italic mb-2">
|
||||
{t("openclaw.agents.fallbackModelsHint")}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{fallbacks.map((fb, index) => {
|
||||
const opts = getFallbackOptions(index);
|
||||
return (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<Select
|
||||
value={fb || UNSET_SENTINEL}
|
||||
onValueChange={(v) =>
|
||||
handleFallbackChange(
|
||||
index,
|
||||
v === UNSET_SENTINEL ? "" : v,
|
||||
)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="font-mono text-xs flex-1">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={UNSET_SENTINEL}>
|
||||
{t("openclaw.agents.notSet")}
|
||||
</SelectItem>
|
||||
{opts.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 shrink-0 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => handleRemoveFallback(index)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{!noModels && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-2"
|
||||
onClick={handleAddFallback}
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
{t("openclaw.agents.addFallback", {
|
||||
defaultValue: "Add fallback model",
|
||||
})}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Runtime Parameters Card */}
|
||||
<div className="rounded-xl border border-border bg-card p-5 mb-4">
|
||||
<h3 className="text-sm font-medium mb-4">
|
||||
{t("openclaw.agents.runtimeSection")}
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="mb-1.5 block">
|
||||
{t("openclaw.agents.workspace")}
|
||||
</Label>
|
||||
<Input
|
||||
value={workspace}
|
||||
onChange={(e) => setWorkspace(e.target.value)}
|
||||
placeholder="~/projects"
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="mb-1.5 block">
|
||||
{t("openclaw.agents.timeout")}
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={timeout}
|
||||
onChange={(e) => setTimeout_(e.target.value)}
|
||||
placeholder="300"
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="mb-1.5 block">
|
||||
{t("openclaw.agents.contextTokens")}
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={contextTokens}
|
||||
onChange={(e) => setContextTokens(e.target.value)}
|
||||
placeholder="200000"
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="mb-1.5 block">
|
||||
{t("openclaw.agents.maxConcurrent")}
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={maxConcurrent}
|
||||
onChange={(e) => setMaxConcurrent(e.target.value)}
|
||||
placeholder="4"
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save button */}
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSave}
|
||||
disabled={saveAgentsMutation.isPending}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-1" />
|
||||
{saveAgentsMutation.isPending ? t("common.saving") : t("common.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AgentsDefaultsPanel;
|
||||
@@ -0,0 +1,114 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Save } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useOpenClawEnv, useSaveOpenClawEnv } from "@/hooks/useOpenClaw";
|
||||
import { extractErrorMessage } from "@/utils/errorUtils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import JsonEditor from "@/components/JsonEditor";
|
||||
import { parseOpenClawEnvEditorValue } from "./utils";
|
||||
|
||||
const EnvPanel: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { data: envData, isLoading } = useOpenClawEnv();
|
||||
const saveEnvMutation = useSaveOpenClawEnv();
|
||||
const [editorValue, setEditorValue] = useState("{}");
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const nextValue =
|
||||
envData && Object.keys(envData).length > 0
|
||||
? JSON.stringify(envData, null, 2)
|
||||
: "{}";
|
||||
setEditorValue(nextValue);
|
||||
}, [envData]);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const env = parseOpenClawEnvEditorValue(editorValue);
|
||||
await saveEnvMutation.mutateAsync(env);
|
||||
toast.success(t("openclaw.env.saveSuccess"));
|
||||
} catch (error) {
|
||||
const detail = extractErrorMessage(error);
|
||||
let description = detail || undefined;
|
||||
if (detail === "OPENCLAW_ENV_EMPTY") {
|
||||
description = t("openclaw.env.empty", {
|
||||
defaultValue:
|
||||
"OpenClaw env cannot be empty. Use {} for an empty object.",
|
||||
});
|
||||
} else if (detail === "OPENCLAW_ENV_INVALID_JSON") {
|
||||
description = t("openclaw.env.invalidJson", {
|
||||
defaultValue: "OpenClaw env must be valid JSON.",
|
||||
});
|
||||
} else if (detail === "OPENCLAW_ENV_OBJECT_REQUIRED") {
|
||||
description = t("openclaw.env.objectRequired", {
|
||||
defaultValue: "OpenClaw env must be a JSON object.",
|
||||
});
|
||||
}
|
||||
toast.error(t("openclaw.env.saveFailed"), {
|
||||
description,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="px-6 pt-4 pb-8 flex items-center justify-center min-h-[200px]">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{t("common.loading")}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-6 pt-4 pb-8">
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
{t("openclaw.env.description")}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mb-4">
|
||||
{t("openclaw.env.editorHint", {
|
||||
defaultValue:
|
||||
"Edit the full env section as JSON. Nested objects such as env.vars and env.shellEnv are supported.",
|
||||
})}
|
||||
</p>
|
||||
|
||||
<JsonEditor
|
||||
value={editorValue}
|
||||
onChange={setEditorValue}
|
||||
darkMode={isDarkMode}
|
||||
rows={18}
|
||||
showValidation={true}
|
||||
language="json"
|
||||
/>
|
||||
|
||||
<div className="flex justify-end mt-4">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSave}
|
||||
disabled={saveEnvMutation.isPending}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-1" />
|
||||
{saveEnvMutation.isPending ? t("common.saving") : t("common.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnvPanel;
|
||||
@@ -0,0 +1,89 @@
|
||||
import React, { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { TriangleAlert } from "lucide-react";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import type { OpenClawHealthWarning } from "@/types";
|
||||
|
||||
interface OpenClawHealthBannerProps {
|
||||
warnings: OpenClawHealthWarning[];
|
||||
}
|
||||
|
||||
function getWarningText(
|
||||
code: string,
|
||||
fallback: string,
|
||||
t: ReturnType<typeof useTranslation>["t"],
|
||||
) {
|
||||
switch (code) {
|
||||
case "invalid_tools_profile":
|
||||
return t("openclaw.health.invalidToolsProfile", {
|
||||
defaultValue:
|
||||
"tools.profile contains an unsupported value. OpenClaw currently expects minimal, coding, messaging, or full.",
|
||||
});
|
||||
case "legacy_agents_timeout":
|
||||
return t("openclaw.health.legacyTimeout", {
|
||||
defaultValue:
|
||||
"agents.defaults.timeout is deprecated. Save the Agents panel to migrate it to timeoutSeconds.",
|
||||
});
|
||||
case "stringified_env_vars":
|
||||
return t("openclaw.health.stringifiedEnvVars", {
|
||||
defaultValue:
|
||||
"env.vars should be an object, but the current value looks stringified or malformed.",
|
||||
});
|
||||
case "stringified_env_shell_env":
|
||||
return t("openclaw.health.stringifiedShellEnv", {
|
||||
defaultValue:
|
||||
"env.shellEnv should be an object, but the current value looks stringified or malformed.",
|
||||
});
|
||||
case "config_parse_failed":
|
||||
return t("openclaw.health.parseFailed", {
|
||||
defaultValue:
|
||||
"openclaw.json could not be parsed as valid JSON5. Fix the file before editing it here.",
|
||||
});
|
||||
default:
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
const OpenClawHealthBanner: React.FC<OpenClawHealthBannerProps> = ({
|
||||
warnings,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const items = useMemo(
|
||||
() =>
|
||||
warnings.map((warning) => ({
|
||||
...warning,
|
||||
text: getWarningText(warning.code, warning.message, t),
|
||||
})),
|
||||
[t, warnings],
|
||||
);
|
||||
|
||||
if (warnings.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-6 pt-4">
|
||||
<Alert className="border-amber-500/30 bg-amber-500/5">
|
||||
<TriangleAlert className="h-4 w-4" />
|
||||
<AlertTitle>
|
||||
{t("openclaw.health.title", {
|
||||
defaultValue: "OpenClaw config warnings detected",
|
||||
})}
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
<ul className="list-disc space-y-1 pl-5">
|
||||
{items.map((warning) => (
|
||||
<li key={`${warning.code}:${warning.path ?? warning.message}`}>
|
||||
{warning.text}
|
||||
{warning.path ? ` (${warning.path})` : ""}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OpenClawHealthBanner;
|
||||
@@ -0,0 +1,283 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Plus, Trash2, Save, TriangleAlert } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useOpenClawTools, useSaveOpenClawTools } from "@/hooks/useOpenClaw";
|
||||
import { extractErrorMessage } from "@/utils/errorUtils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import type { OpenClawToolsConfig, OpenClawToolsProfile } from "@/types";
|
||||
import {
|
||||
getOpenClawToolsProfileSelectValue,
|
||||
getOpenClawUnsupportedProfile,
|
||||
OPENCLAW_TOOL_PROFILES,
|
||||
OPENCLAW_UNSET_PROFILE,
|
||||
OPENCLAW_UNSUPPORTED_PROFILE,
|
||||
} from "./utils";
|
||||
|
||||
interface ListItem {
|
||||
id: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const ToolsPanel: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { data: toolsData, isLoading } = useOpenClawTools();
|
||||
const saveToolsMutation = useSaveOpenClawTools();
|
||||
const [config, setConfig] = useState<OpenClawToolsConfig>({});
|
||||
const [allowList, setAllowList] = useState<ListItem[]>([]);
|
||||
const [denyList, setDenyList] = useState<ListItem[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (toolsData) {
|
||||
setConfig(toolsData);
|
||||
setAllowList(
|
||||
(toolsData.allow ?? []).map((value) => ({
|
||||
id: crypto.randomUUID(),
|
||||
value,
|
||||
})),
|
||||
);
|
||||
setDenyList(
|
||||
(toolsData.deny ?? []).map((value) => ({
|
||||
id: crypto.randomUUID(),
|
||||
value,
|
||||
})),
|
||||
);
|
||||
}
|
||||
}, [toolsData]);
|
||||
|
||||
const unsupportedProfile = getOpenClawUnsupportedProfile(config.profile);
|
||||
|
||||
const profileLabels = useMemo<Record<OpenClawToolsProfile, string>>(
|
||||
() => ({
|
||||
minimal: t("openclaw.tools.profileMinimal", {
|
||||
defaultValue: "Minimal",
|
||||
}),
|
||||
coding: t("openclaw.tools.profileCoding", {
|
||||
defaultValue: "Coding",
|
||||
}),
|
||||
messaging: t("openclaw.tools.profileMessaging", {
|
||||
defaultValue: "Messaging",
|
||||
}),
|
||||
full: t("openclaw.tools.profileFull", {
|
||||
defaultValue: "Full",
|
||||
}),
|
||||
}),
|
||||
[t],
|
||||
);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const { profile, allow, deny, ...other } = config;
|
||||
const newConfig: OpenClawToolsConfig = {
|
||||
...other,
|
||||
profile,
|
||||
allow: allowList.map((item) => item.value).filter((s) => s.trim()),
|
||||
deny: denyList.map((item) => item.value).filter((s) => s.trim()),
|
||||
};
|
||||
|
||||
await saveToolsMutation.mutateAsync(newConfig);
|
||||
toast.success(t("openclaw.tools.saveSuccess"));
|
||||
} catch (error) {
|
||||
const detail = extractErrorMessage(error);
|
||||
toast.error(t("openclaw.tools.saveFailed"), {
|
||||
description: detail || undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const updateListItem = (
|
||||
setList: React.Dispatch<React.SetStateAction<ListItem[]>>,
|
||||
index: number,
|
||||
value: string,
|
||||
) => {
|
||||
setList((prev) =>
|
||||
prev.map((item, i) => (i === index ? { ...item, value } : item)),
|
||||
);
|
||||
};
|
||||
|
||||
const removeListItem = (
|
||||
setList: React.Dispatch<React.SetStateAction<ListItem[]>>,
|
||||
index: number,
|
||||
) => {
|
||||
setList((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="px-6 pt-4 pb-8 flex items-center justify-center min-h-[200px]">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{t("common.loading")}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-6 pt-4 pb-8">
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
{t("openclaw.tools.description")}
|
||||
</p>
|
||||
|
||||
{unsupportedProfile && (
|
||||
<Alert className="mb-6 border-amber-500/30 bg-amber-500/5">
|
||||
<TriangleAlert className="h-4 w-4" />
|
||||
<AlertTitle>
|
||||
{t("openclaw.tools.unsupportedProfileTitle", {
|
||||
defaultValue: "Unsupported tools profile",
|
||||
})}
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
{t("openclaw.tools.unsupportedProfileDescription", {
|
||||
value: unsupportedProfile,
|
||||
defaultValue:
|
||||
"The current tools.profile value '{{value}}' is not in the supported OpenClaw list. It will be preserved until you choose a new value.",
|
||||
})}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="mb-6">
|
||||
<Label className="mb-2 block">{t("openclaw.tools.profile")}</Label>
|
||||
<Select
|
||||
value={getOpenClawToolsProfileSelectValue(config.profile)}
|
||||
onValueChange={(value) => {
|
||||
if (value === OPENCLAW_UNSUPPORTED_PROFILE) return;
|
||||
if (value === OPENCLAW_UNSET_PROFILE) {
|
||||
setConfig((prev) => ({ ...prev, profile: undefined }));
|
||||
return;
|
||||
}
|
||||
setConfig((prev) => ({ ...prev, profile: value }));
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[220px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={OPENCLAW_UNSET_PROFILE}>
|
||||
{t("openclaw.tools.profileUnset", {
|
||||
defaultValue: "Not set",
|
||||
})}
|
||||
</SelectItem>
|
||||
{unsupportedProfile && (
|
||||
<SelectItem
|
||||
value={OPENCLAW_UNSUPPORTED_PROFILE}
|
||||
disabled={true}
|
||||
>{`${unsupportedProfile} (${t(
|
||||
"openclaw.tools.unsupportedProfileLabel",
|
||||
{
|
||||
defaultValue: "unsupported",
|
||||
},
|
||||
)})`}</SelectItem>
|
||||
)}
|
||||
{OPENCLAW_TOOL_PROFILES.map((profile) => (
|
||||
<SelectItem key={profile} value={profile}>
|
||||
{profileLabels[profile]}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<Label className="mb-2 block">{t("openclaw.tools.allowList")}</Label>
|
||||
<div className="space-y-2">
|
||||
{allowList.map((item, index) => (
|
||||
<div key={item.id} className="flex items-center gap-2">
|
||||
<Input
|
||||
value={item.value}
|
||||
onChange={(e) =>
|
||||
updateListItem(setAllowList, index, e.target.value)
|
||||
}
|
||||
placeholder={t("openclaw.tools.patternPlaceholder")}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="flex-shrink-0 h-9 w-9 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => removeListItem(setAllowList, index)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setAllowList((prev) => [
|
||||
...prev,
|
||||
{ id: crypto.randomUUID(), value: "" },
|
||||
])
|
||||
}
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
{t("openclaw.tools.addAllow")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<Label className="mb-2 block">{t("openclaw.tools.denyList")}</Label>
|
||||
<div className="space-y-2">
|
||||
{denyList.map((item, index) => (
|
||||
<div key={item.id} className="flex items-center gap-2">
|
||||
<Input
|
||||
value={item.value}
|
||||
onChange={(e) =>
|
||||
updateListItem(setDenyList, index, e.target.value)
|
||||
}
|
||||
placeholder={t("openclaw.tools.patternPlaceholder")}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="flex-shrink-0 h-9 w-9 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => removeListItem(setDenyList, index)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setDenyList((prev) => [
|
||||
...prev,
|
||||
{ id: crypto.randomUUID(), value: "" },
|
||||
])
|
||||
}
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
{t("openclaw.tools.addDeny")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSave}
|
||||
disabled={saveToolsMutation.isPending}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-1" />
|
||||
{saveToolsMutation.isPending ? t("common.saving") : t("common.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ToolsPanel;
|
||||
@@ -0,0 +1,62 @@
|
||||
import { useMemo } from "react";
|
||||
import { useProvidersQuery } from "@/lib/query/queries";
|
||||
import type { OpenClawProviderConfig } from "@/types";
|
||||
|
||||
export interface ModelOption {
|
||||
value: string; // "providerId/modelId"
|
||||
label: string; // "Provider Name / Model Name"
|
||||
}
|
||||
|
||||
export function useOpenClawModelOptions(): {
|
||||
options: ModelOption[];
|
||||
isLoading: boolean;
|
||||
} {
|
||||
const { data: providersData, isLoading } = useProvidersQuery("openclaw");
|
||||
|
||||
const options = useMemo<ModelOption[]>(() => {
|
||||
const allProviders = providersData?.providers;
|
||||
if (!allProviders) return [];
|
||||
|
||||
const dedupedOptions = new Map<string, string>();
|
||||
|
||||
for (const [providerKey, provider] of Object.entries(allProviders)) {
|
||||
let config: OpenClawProviderConfig;
|
||||
try {
|
||||
config =
|
||||
typeof provider.settingsConfig === "string"
|
||||
? (JSON.parse(provider.settingsConfig) as OpenClawProviderConfig)
|
||||
: (provider.settingsConfig as OpenClawProviderConfig);
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
|
||||
const models = config.models;
|
||||
if (!Array.isArray(models)) continue;
|
||||
|
||||
const providerDisplayName =
|
||||
typeof provider.name === "string" && provider.name.trim()
|
||||
? provider.name
|
||||
: providerKey;
|
||||
|
||||
for (const model of models) {
|
||||
if (!model.id) continue;
|
||||
const value = `${providerKey}/${model.id}`;
|
||||
const modelDisplayName =
|
||||
typeof model.name === "string" && model.name.trim()
|
||||
? model.name
|
||||
: model.id;
|
||||
const label = `${providerDisplayName} / ${modelDisplayName}`;
|
||||
|
||||
if (!dedupedOptions.has(value)) {
|
||||
dedupedOptions.set(value, label);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(dedupedOptions.entries())
|
||||
.map(([value, label]) => ({ value, label }))
|
||||
.sort((a, b) => a.label.localeCompare(b.label, "zh-CN"));
|
||||
}, [providersData?.providers]);
|
||||
|
||||
return { options, isLoading };
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import type {
|
||||
OpenClawAgentsDefaults,
|
||||
OpenClawEnvConfig,
|
||||
OpenClawToolsProfile,
|
||||
} from "@/types";
|
||||
|
||||
export const OPENCLAW_TOOL_PROFILES: OpenClawToolsProfile[] = [
|
||||
"minimal",
|
||||
"coding",
|
||||
"messaging",
|
||||
"full",
|
||||
];
|
||||
|
||||
export const OPENCLAW_UNSUPPORTED_PROFILE = "__unsupported_profile__";
|
||||
export const OPENCLAW_UNSET_PROFILE = "__unset_profile__";
|
||||
|
||||
export function parseOpenClawEnvEditorValue(raw: string): OpenClawEnvConfig {
|
||||
if (!raw.trim()) {
|
||||
throw new Error("OPENCLAW_ENV_EMPTY");
|
||||
}
|
||||
|
||||
let parsed: unknown;
|
||||
try {
|
||||
parsed = JSON.parse(raw);
|
||||
} catch {
|
||||
throw new Error("OPENCLAW_ENV_INVALID_JSON");
|
||||
}
|
||||
|
||||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
|
||||
throw new Error("OPENCLAW_ENV_OBJECT_REQUIRED");
|
||||
}
|
||||
return parsed as OpenClawEnvConfig;
|
||||
}
|
||||
|
||||
export function isOpenClawToolsProfile(
|
||||
profile?: string,
|
||||
): profile is OpenClawToolsProfile {
|
||||
return (
|
||||
typeof profile === "string" &&
|
||||
OPENCLAW_TOOL_PROFILES.includes(profile as OpenClawToolsProfile)
|
||||
);
|
||||
}
|
||||
|
||||
export function getOpenClawToolsProfileSelectValue(profile?: string): string {
|
||||
if (!profile) {
|
||||
return OPENCLAW_UNSET_PROFILE;
|
||||
}
|
||||
return isOpenClawToolsProfile(profile)
|
||||
? profile
|
||||
: OPENCLAW_UNSUPPORTED_PROFILE;
|
||||
}
|
||||
|
||||
export function getOpenClawUnsupportedProfile(profile?: string): string | null {
|
||||
if (!profile || isOpenClawToolsProfile(profile)) {
|
||||
return null;
|
||||
}
|
||||
return profile;
|
||||
}
|
||||
|
||||
export function getOpenClawTimeoutInputValue(
|
||||
defaults?: OpenClawAgentsDefaults | null,
|
||||
): string {
|
||||
const timeoutSeconds =
|
||||
typeof defaults?.timeoutSeconds === "number"
|
||||
? defaults.timeoutSeconds
|
||||
: undefined;
|
||||
const legacyTimeout =
|
||||
typeof defaults?.timeout === "number" ? defaults.timeout : undefined;
|
||||
const value = timeoutSeconds ?? legacyTimeout;
|
||||
return value === undefined ? "" : String(value);
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Check, Pencil, Trash2, X } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ConfirmDialog } from "@/components/ConfirmDialog";
|
||||
import {
|
||||
useDeleteProfileMutation,
|
||||
useProfilesQuery,
|
||||
useUpdateProfileMutation,
|
||||
} from "@/lib/query/profiles";
|
||||
|
||||
interface ProfileManageDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
type PendingConfirm = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* 项目管理对话框（纯快照式）
|
||||
*
|
||||
* 项目列表全应用共享，重命名/删除作用于共享实体。
|
||||
* 快照内容由切换时的自动保存维护，不提供手动重拍入口。
|
||||
*/
|
||||
export function ProfileManageDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: ProfileManageDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
const { data } = useProfilesQuery();
|
||||
const updateMutation = useUpdateProfileMutation();
|
||||
const deleteMutation = useDeleteProfileMutation();
|
||||
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editingName, setEditingName] = useState("");
|
||||
const [confirm, setConfirm] = useState<PendingConfirm | null>(null);
|
||||
|
||||
const profiles = data?.profiles ?? [];
|
||||
|
||||
const startRename = (id: string, name: string) => {
|
||||
setEditingId(id);
|
||||
setEditingName(name);
|
||||
};
|
||||
|
||||
const cancelRename = () => {
|
||||
setEditingId(null);
|
||||
setEditingName("");
|
||||
};
|
||||
|
||||
const saveRename = () => {
|
||||
const name = editingName.trim();
|
||||
if (!name || !editingId) return;
|
||||
updateMutation.mutate({ id: editingId, name }, { onSuccess: cancelRename });
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (!confirm) return;
|
||||
deleteMutation.mutate(confirm.id);
|
||||
setConfirm(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
cancelRename();
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader className="space-y-3 border-b-0 bg-transparent pb-0">
|
||||
<DialogTitle>{t("profiles.manageTitle")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t("profiles.manageDescription")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="max-h-[50vh] space-y-1 overflow-y-auto px-6 pb-4 pt-3">
|
||||
{profiles.length === 0 && (
|
||||
<div className="py-4 text-center text-sm text-muted-foreground">
|
||||
{t("profiles.empty")}
|
||||
</div>
|
||||
)}
|
||||
{profiles.map((profile) => (
|
||||
<div
|
||||
key={profile.id}
|
||||
className="flex items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-muted/50"
|
||||
>
|
||||
{editingId === profile.id ? (
|
||||
<>
|
||||
<Input
|
||||
value={editingName}
|
||||
onChange={(e) => setEditingName(e.target.value)}
|
||||
className="h-7 flex-1"
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") saveRename();
|
||||
if (e.key === "Escape") cancelRename();
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
title={t("common.confirm")}
|
||||
onClick={saveRename}
|
||||
disabled={!editingName.trim() || updateMutation.isPending}
|
||||
>
|
||||
<Check className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
title={t("common.cancel")}
|
||||
onClick={cancelRename}
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="flex-1 truncate text-sm">
|
||||
{profile.name}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
title={t("profiles.rename")}
|
||||
onClick={() => startRename(profile.id, profile.name)}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
title={t("profiles.delete")}
|
||||
onClick={() =>
|
||||
setConfirm({
|
||||
id: profile.id,
|
||||
name: profile.name,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-destructive" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
cancelRename();
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
{t("common.close")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{confirm && (
|
||||
<ConfirmDialog
|
||||
isOpen
|
||||
title={t("profiles.deleteConfirmTitle")}
|
||||
message={t("profiles.deleteConfirmMessage", { name: confirm.name })}
|
||||
variant="destructive"
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={() => setConfirm(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Check,
|
||||
ChevronsUpDown,
|
||||
FolderCog,
|
||||
FolderOpen,
|
||||
Plus,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { AppId } from "@/lib/api/types";
|
||||
import {
|
||||
useApplyProfileMutation,
|
||||
useClearProfileMutation,
|
||||
useCreateProfileMutation,
|
||||
useProfilesQuery,
|
||||
} from "@/lib/query/profiles";
|
||||
import { ProfileManageDialog } from "./ProfileManageDialog";
|
||||
import { APP_PROFILE_SCOPE, hasScopeSnapshot } from "./scope";
|
||||
import type { CurrentProfileIds, ProfileScope } from "@/lib/api/profiles";
|
||||
|
||||
const CURRENT_ID_KEY: Record<ProfileScope, keyof CurrentProfileIds> = {
|
||||
claude: "claude",
|
||||
"claude-desktop": "claudeDesktop",
|
||||
codex: "codex",
|
||||
};
|
||||
|
||||
interface ProfileSwitcherProps {
|
||||
activeApp: AppId;
|
||||
}
|
||||
|
||||
/**
|
||||
* 项目 Profile 切换器（header 左侧入口）
|
||||
*
|
||||
* 项目列表全应用共享（用户拥有的项目就那几个），但切换按分组进行：
|
||||
* Claude 组（Claude Code 的供应商/MCP/Skills/记忆文件 + Claude Desktop
|
||||
* 的供应商）与 Codex 组各自指向自己的当前项目、只应用组内快照。
|
||||
* 与右侧 AppSwitcher（仅切换查看的应用）语义不同。
|
||||
*/
|
||||
export function ProfileSwitcher({ activeApp }: ProfileSwitcherProps) {
|
||||
const { t } = useTranslation();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
const [isManageOpen, setIsManageOpen] = useState(false);
|
||||
const [newName, setNewName] = useState("");
|
||||
|
||||
const { data } = useProfilesQuery();
|
||||
const applyMutation = useApplyProfileMutation();
|
||||
const clearMutation = useClearProfileMutation();
|
||||
const createMutation = useCreateProfileMutation();
|
||||
|
||||
// Profile 仅作用于受支持的应用——在其他应用的标签页展示会误导用户
|
||||
// 以为当前应用也被切换了，因此只在有所属分组的应用页面渲染
|
||||
const scope = APP_PROFILE_SCOPE[activeApp];
|
||||
if (!scope) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const profiles = data?.profiles ?? [];
|
||||
const currentId = data?.currentIds?.[CURRENT_ID_KEY[scope]] ?? null;
|
||||
const currentProfile = profiles.find((p) => p.id === currentId);
|
||||
|
||||
const handleApply = (id: string) => {
|
||||
setOpen(false);
|
||||
if (id !== currentId) {
|
||||
applyMutation.mutate({ id, scope });
|
||||
}
|
||||
};
|
||||
|
||||
const closeCreateDialog = () => {
|
||||
setIsCreateOpen(false);
|
||||
setNewName("");
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
const name = newName.trim();
|
||||
if (!name) return;
|
||||
createMutation.mutate({ name, scope }, { onSuccess: closeCreateDialog });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
title={t(`profiles.switcherTooltip.${scope}`)}
|
||||
className={cn(
|
||||
"inline-flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium transition-colors",
|
||||
"hover:bg-black/5 dark:hover:bg-white/5",
|
||||
currentProfile ? "text-foreground" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4 shrink-0 opacity-70" />
|
||||
<span className="max-w-[9rem] truncate">
|
||||
{currentProfile?.name ?? t("profiles.none")}
|
||||
</span>
|
||||
<ChevronsUpDown className="h-3.5 w-3.5 shrink-0 opacity-50" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="bottom"
|
||||
align="start"
|
||||
sideOffset={6}
|
||||
className="z-[100] w-64 p-0"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder={t("profiles.searchPlaceholder")} />
|
||||
<CommandList>
|
||||
<CommandEmpty>{t("profiles.empty")}</CommandEmpty>
|
||||
{profiles.length > 0 && (
|
||||
<CommandGroup>
|
||||
{profiles.map((profile) => (
|
||||
<CommandItem
|
||||
key={profile.id}
|
||||
value={profile.id}
|
||||
keywords={[profile.name]}
|
||||
onSelect={() => handleApply(profile.id)}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4 shrink-0",
|
||||
currentId === profile.id
|
||||
? "opacity-100"
|
||||
: "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<span className="truncate">{profile.name}</span>
|
||||
{!hasScopeSnapshot(profile, scope) && (
|
||||
<span className="ml-auto shrink-0 pl-2 text-xs text-muted-foreground">
|
||||
{t("profiles.noSnapshotForScope")}
|
||||
</span>
|
||||
)}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
)}
|
||||
<div className="mx-1 my-1 h-px bg-border" />
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
value="__create__"
|
||||
keywords={[t("profiles.createFromCurrent")]}
|
||||
onSelect={() => {
|
||||
setOpen(false);
|
||||
setIsCreateOpen(true);
|
||||
}}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4 shrink-0" />
|
||||
{t("profiles.createFromCurrent")}
|
||||
</CommandItem>
|
||||
{currentId && (
|
||||
<CommandItem
|
||||
value="__clear__"
|
||||
keywords={[t("profiles.none")]}
|
||||
onSelect={() => {
|
||||
setOpen(false);
|
||||
clearMutation.mutate(scope);
|
||||
}}
|
||||
>
|
||||
<X className="mr-2 h-4 w-4 shrink-0" />
|
||||
{t("profiles.none")}
|
||||
</CommandItem>
|
||||
)}
|
||||
{profiles.length > 0 && (
|
||||
<CommandItem
|
||||
value="__manage__"
|
||||
keywords={[t("profiles.manage")]}
|
||||
onSelect={() => {
|
||||
setOpen(false);
|
||||
setIsManageOpen(true);
|
||||
}}
|
||||
>
|
||||
<FolderCog className="mr-2 h-4 w-4 shrink-0" />
|
||||
{t("profiles.manage")}
|
||||
</CommandItem>
|
||||
)}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Dialog
|
||||
open={isCreateOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) closeCreateDialog();
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-sm" zIndex="alert">
|
||||
<DialogHeader className="space-y-3 border-b-0 bg-transparent pb-0">
|
||||
<DialogTitle>{t("profiles.createFromCurrent")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t(`profiles.createDescription.${scope}`)}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="px-6 pt-3">
|
||||
<Input
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder={t("profiles.namePlaceholder")}
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleCreate();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter className="flex gap-2 border-t-0 bg-transparent pt-2 sm:justify-end">
|
||||
<Button variant="outline" onClick={closeCreateDialog}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreate}
|
||||
disabled={!newName.trim() || createMutation.isPending}
|
||||
>
|
||||
{t("common.confirm")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<ProfileManageDialog
|
||||
isOpen={isManageOpen}
|
||||
onClose={() => setIsManageOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import type { AppId } from "@/lib/api/types";
|
||||
import type { PerApp, Profile, ProfileScope } from "@/lib/api/profiles";
|
||||
|
||||
/**
|
||||
* 应用页 → 所属项目分组（后端 ProfileScope::for_app 的前端镜像，两处同步）
|
||||
*
|
||||
* 不在映射里的应用不支持 Profile，其标签页不渲染切换器。
|
||||
*/
|
||||
export const APP_PROFILE_SCOPE: Partial<Record<AppId, ProfileScope>> = {
|
||||
claude: "claude",
|
||||
"claude-desktop": "claude-desktop",
|
||||
codex: "codex",
|
||||
};
|
||||
|
||||
/** 分组内的 payload 槽位 key（后端 ProfileScope::apps 的前端镜像） */
|
||||
const SCOPE_SLOT_KEYS: Record<ProfileScope, (keyof PerApp<unknown>)[]> = {
|
||||
claude: ["claude"],
|
||||
"claude-desktop": ["claude-desktop"],
|
||||
codex: ["codex"],
|
||||
};
|
||||
|
||||
/**
|
||||
* 项目在某分组是否拍过快照（任一槽位非 null 即视为拍过）
|
||||
*
|
||||
* 未拍过的项目在该分组应用时不改动配置，只绑定 current 标记。
|
||||
*/
|
||||
export function hasScopeSnapshot(profile: Profile, scope: ProfileScope) {
|
||||
const { providers, mcp, skills, prompts } = profile.payload;
|
||||
return SCOPE_SLOT_KEYS[scope].some(
|
||||
(app) =>
|
||||
providers[app] !== null ||
|
||||
mcp[app] !== null ||
|
||||
skills[app] !== null ||
|
||||
prompts[app] !== null,
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import MarkdownEditor from "@/components/MarkdownEditor";
|
||||
import type { Prompt, AppId } from "@/lib/api";
|
||||
|
||||
interface PromptFormModalProps {
|
||||
appId: AppId;
|
||||
editingId?: string;
|
||||
initialData?: Prompt;
|
||||
onSave: (id: string, prompt: Prompt) => Promise<void>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const PromptFormModal: React.FC<PromptFormModalProps> = ({
|
||||
appId,
|
||||
editingId,
|
||||
initialData,
|
||||
onSave,
|
||||
onClose,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const appName = t(`apps.${appId}`);
|
||||
const filenameMap: Record<Exclude<AppId, "openclaw">, string> = {
|
||||
claude: "CLAUDE.md",
|
||||
"claude-desktop": "CLAUDE.md",
|
||||
codex: "AGENTS.md",
|
||||
gemini: "GEMINI.md",
|
||||
opencode: "AGENTS.md",
|
||||
hermes: "AGENTS.md",
|
||||
};
|
||||
const filename = filenameMap[appId as Exclude<AppId, "openclaw">];
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [content, setContent] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// 检测初始暗色模式状态
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
// 监听 html 元素的 class 变化以实时响应主题切换
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setName(initialData.name);
|
||||
setDescription(initialData.description || "");
|
||||
setContent(initialData.content);
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!name.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const id = editingId || `prompt-${Date.now()}`;
|
||||
const timestamp = Math.floor(Date.now() / 1000);
|
||||
const prompt: Prompt = {
|
||||
id,
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
content: content.trim(),
|
||||
enabled: initialData?.enabled || false,
|
||||
createdAt: initialData?.createdAt || timestamp,
|
||||
updatedAt: timestamp,
|
||||
};
|
||||
await onSave(id, prompt);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
// Error handled by hook
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-2xl max-h-[85vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editingId
|
||||
? t("prompts.editTitle", { appName })
|
||||
: t("prompts.addTitle", { appName })}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto space-y-4 px-6 py-4">
|
||||
<div>
|
||||
<Label htmlFor="name">{t("prompts.name")}</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={t("prompts.namePlaceholder")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description">{t("prompts.description")}</Label>
|
||||
<Input
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder={t("prompts.descriptionPlaceholder")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="content" className="mb-2 block">
|
||||
{t("prompts.content")}
|
||||
</Label>
|
||||
<MarkdownEditor
|
||||
value={content}
|
||||
onChange={setContent}
|
||||
placeholder={t("prompts.contentPlaceholder", { filename })}
|
||||
darkMode={isDarkMode}
|
||||
minHeight="300px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={!name.trim() || saving}
|
||||
>
|
||||
{saving ? t("common.saving") : t("common.save")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptFormModal;
|
||||
@@ -0,0 +1,157 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import MarkdownEditor from "@/components/MarkdownEditor";
|
||||
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
|
||||
import type { Prompt, AppId } from "@/lib/api";
|
||||
|
||||
interface PromptFormPanelProps {
|
||||
appId: AppId;
|
||||
editingId?: string;
|
||||
initialData?: Prompt;
|
||||
onSave: (id: string, prompt: Prompt) => Promise<void>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const PromptFormPanel: React.FC<PromptFormPanelProps> = ({
|
||||
appId,
|
||||
editingId,
|
||||
initialData,
|
||||
onSave,
|
||||
onClose,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const appName = t(`apps.${appId}`);
|
||||
const filenameMap: Record<AppId, string> = {
|
||||
claude: "CLAUDE.md",
|
||||
"claude-desktop": "CLAUDE.md",
|
||||
codex: "AGENTS.md",
|
||||
gemini: "GEMINI.md",
|
||||
opencode: "AGENTS.md",
|
||||
openclaw: "AGENTS.md",
|
||||
hermes: "AGENTS.md",
|
||||
};
|
||||
const filename = filenameMap[appId];
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [content, setContent] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setName(initialData.name);
|
||||
setDescription(initialData.description || "");
|
||||
setContent(initialData.content);
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!name.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const id = editingId || `prompt-${Date.now()}`;
|
||||
const timestamp = Math.floor(Date.now() / 1000);
|
||||
const prompt: Prompt = {
|
||||
id,
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
content: content.trim(),
|
||||
enabled: initialData?.enabled || false,
|
||||
createdAt: initialData?.createdAt || timestamp,
|
||||
updatedAt: timestamp,
|
||||
};
|
||||
await onSave(id, prompt);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
// Error handled by hook
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const title = editingId
|
||||
? t("prompts.editTitle", { appName })
|
||||
: t("prompts.addTitle", { appName });
|
||||
|
||||
return (
|
||||
<FullScreenPanel
|
||||
isOpen={true}
|
||||
title={title}
|
||||
onClose={onClose}
|
||||
footer={
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={!name.trim() || saving}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{saving ? t("common.saving") : t("common.save")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="glass rounded-xl p-6 border border-white/10 space-y-6">
|
||||
<div>
|
||||
<Label htmlFor="name" className="text-foreground">
|
||||
{t("prompts.name")}
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={t("prompts.namePlaceholder")}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description" className="text-foreground">
|
||||
{t("prompts.description")}
|
||||
</Label>
|
||||
<Input
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder={t("prompts.descriptionPlaceholder")}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="content" className="block mb-2 text-foreground">
|
||||
{t("prompts.content")}
|
||||
</Label>
|
||||
<MarkdownEditor
|
||||
value={content}
|
||||
onChange={setContent}
|
||||
placeholder={t("prompts.contentPlaceholder", { filename })}
|
||||
darkMode={isDarkMode}
|
||||
minHeight="167px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FullScreenPanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptFormPanel;
|
||||
@@ -0,0 +1,73 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Edit3, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { Prompt } from "@/lib/api";
|
||||
import PromptToggle from "./PromptToggle";
|
||||
|
||||
interface PromptListItemProps {
|
||||
id: string;
|
||||
prompt: Prompt;
|
||||
onToggle: (id: string, enabled: boolean) => void;
|
||||
onEdit: (id: string) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
const PromptListItem: React.FC<PromptListItemProps> = ({
|
||||
id,
|
||||
prompt,
|
||||
onToggle,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const enabled = prompt.enabled === true;
|
||||
|
||||
return (
|
||||
<div className="group relative h-16 rounded-xl border border-border-default bg-muted/50 p-4 transition-all duration-300 hover:bg-muted hover:border-border-default/80 hover:shadow-sm">
|
||||
<div className="flex items-center gap-4 h-full">
|
||||
{/* Toggle 开关 */}
|
||||
<div className="flex-shrink-0">
|
||||
<PromptToggle
|
||||
enabled={enabled}
|
||||
onChange={(newEnabled) => onToggle(id, newEnabled)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium text-foreground mb-1">{prompt.name}</h3>
|
||||
{prompt.description && (
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{prompt.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onEdit(id)}
|
||||
title={t("common.edit")}
|
||||
>
|
||||
<Edit3 size={16} />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onDelete(id)}
|
||||
className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
|
||||
title={t("common.delete")}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptListItem;
|
||||
@@ -0,0 +1,172 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FileText } from "lucide-react";
|
||||
import { type AppId } from "@/lib/api";
|
||||
import { usePromptActions } from "@/hooks/usePromptActions";
|
||||
import { useTauriEvent } from "@/hooks/useTauriEvent";
|
||||
import PromptListItem from "./PromptListItem";
|
||||
import PromptFormPanel from "./PromptFormPanel";
|
||||
import { ConfirmDialog } from "../ConfirmDialog";
|
||||
|
||||
interface PromptPanelProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
appId: AppId;
|
||||
}
|
||||
|
||||
export interface PromptPanelHandle {
|
||||
openAdd: () => void;
|
||||
}
|
||||
|
||||
const PromptPanel = React.forwardRef<PromptPanelHandle, PromptPanelProps>(
|
||||
({ open, appId }, ref) => {
|
||||
const { t } = useTranslation();
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [confirmDialog, setConfirmDialog] = useState<{
|
||||
isOpen: boolean;
|
||||
titleKey: string;
|
||||
messageKey: string;
|
||||
messageParams?: Record<string, unknown>;
|
||||
onConfirm: () => void;
|
||||
} | null>(null);
|
||||
|
||||
const {
|
||||
prompts,
|
||||
loading,
|
||||
reload,
|
||||
savePrompt,
|
||||
deletePrompt,
|
||||
toggleEnabled,
|
||||
} = usePromptActions(appId);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) reload();
|
||||
}, [open, reload]);
|
||||
|
||||
// Listen for prompt import events from deep link
|
||||
useEffect(() => {
|
||||
const handlePromptImported = (event: Event) => {
|
||||
const customEvent = event as CustomEvent;
|
||||
// Reload if the import is for this app
|
||||
if (customEvent.detail?.app === appId) {
|
||||
reload();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("prompt-imported", handlePromptImported);
|
||||
return () => {
|
||||
window.removeEventListener("prompt-imported", handlePromptImported);
|
||||
};
|
||||
}, [appId, reload]);
|
||||
|
||||
// 应用项目 Profile 会切换激活的 prompt（prompts 非 react-query，需主动 reload）
|
||||
useTauriEvent("profile-applied", reload);
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingId(null);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
openAdd: handleAdd,
|
||||
}));
|
||||
|
||||
const handleEdit = (id: string) => {
|
||||
setEditingId(id);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
const prompt = prompts[id];
|
||||
setConfirmDialog({
|
||||
isOpen: true,
|
||||
titleKey: "prompts.confirm.deleteTitle",
|
||||
messageKey: "prompts.confirm.deleteMessage",
|
||||
messageParams: { name: prompt?.name },
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
await deletePrompt(id);
|
||||
setConfirmDialog(null);
|
||||
} catch (e) {
|
||||
// Error handled by hook
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const promptEntries = useMemo(() => Object.entries(prompts), [prompts]);
|
||||
|
||||
const enabledPrompt = promptEntries.find(([_, p]) => p.enabled);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 min-h-0 px-6">
|
||||
<div className="flex-shrink-0 py-4 glass rounded-xl border border-white/10 mb-4 px-6">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{t("prompts.count", { count: promptEntries.length })} ·{" "}
|
||||
{enabledPrompt
|
||||
? t("prompts.enabledName", { name: enabledPrompt[1].name })
|
||||
: t("prompts.noneEnabled")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto pb-16">
|
||||
{loading ? (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
{t("prompts.loading")}
|
||||
</div>
|
||||
) : promptEntries.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
|
||||
<FileText size={24} className="text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-foreground mb-2">
|
||||
{t("prompts.empty")}
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("prompts.emptyDescription")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{promptEntries.map(([id, prompt]) => (
|
||||
<PromptListItem
|
||||
key={id}
|
||||
id={id}
|
||||
prompt={prompt}
|
||||
onToggle={toggleEnabled}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isFormOpen && (
|
||||
<PromptFormPanel
|
||||
appId={appId}
|
||||
editingId={editingId || undefined}
|
||||
initialData={editingId ? prompts[editingId] : undefined}
|
||||
onSave={savePrompt}
|
||||
onClose={() => setIsFormOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{confirmDialog && (
|
||||
<ConfirmDialog
|
||||
isOpen={confirmDialog.isOpen}
|
||||
title={t(confirmDialog.titleKey)}
|
||||
message={t(confirmDialog.messageKey, confirmDialog.messageParams)}
|
||||
onConfirm={confirmDialog.onConfirm}
|
||||
onCancel={() => setConfirmDialog(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
PromptPanel.displayName = "PromptPanel";
|
||||
|
||||
export default PromptPanel;
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
|
||||
interface PromptToggleProps {
|
||||
enabled: boolean;
|
||||
onChange: (enabled: boolean) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle 开关组件（提示词专用）
|
||||
* 启用时为绿色，禁用时为灰色
|
||||
*/
|
||||
const PromptToggle: React.FC<PromptToggleProps> = ({
|
||||
enabled,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={enabled}
|
||||
disabled={disabled}
|
||||
onClick={() => onChange(!enabled)}
|
||||
className={`
|
||||
relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500/20
|
||||
${enabled ? "bg-emerald-500 dark:bg-emerald-600" : "bg-gray-300 dark:bg-gray-600"}
|
||||
${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
|
||||
`}
|
||||
>
|
||||
<span
|
||||
className={`
|
||||
inline-block h-4 w-4 transform rounded-full bg-white transition-transform
|
||||
${enabled ? "translate-x-6" : "translate-x-1"}
|
||||
`}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptToggle;
|
||||
@@ -0,0 +1,397 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Plus } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
|
||||
import type { Provider, CustomEndpoint, UniversalProvider } from "@/types";
|
||||
import type { AppId } from "@/lib/api";
|
||||
import { universalProvidersApi } from "@/lib/api";
|
||||
import {
|
||||
ProviderForm,
|
||||
type ProviderFormValues,
|
||||
} from "@/components/providers/forms/ProviderForm";
|
||||
import { UniversalProviderFormModal } from "@/components/universal/UniversalProviderFormModal";
|
||||
import { UniversalProviderPanel } from "@/components/universal";
|
||||
import { providerPresets } from "@/config/claudeProviderPresets";
|
||||
import { codexProviderPresets } from "@/config/codexProviderPresets";
|
||||
import { geminiProviderPresets } from "@/config/geminiProviderPresets";
|
||||
import { claudeDesktopProviderPresets } from "@/config/claudeDesktopProviderPresets";
|
||||
import { extractCodexBaseUrl } from "@/utils/providerConfigUtils";
|
||||
import type { OpenClawSuggestedDefaults } from "@/config/openclawProviderPresets";
|
||||
import type { UniversalProviderPreset } from "@/config/universalProviderPresets";
|
||||
|
||||
interface AddProviderDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
appId: AppId;
|
||||
onSubmit: (
|
||||
provider: Omit<Provider, "id"> & {
|
||||
providerKey?: string;
|
||||
suggestedDefaults?: OpenClawSuggestedDefaults;
|
||||
ensureClaudeDesktopOfficialSeed?: boolean;
|
||||
},
|
||||
) => Promise<void> | void;
|
||||
}
|
||||
|
||||
export function AddProviderDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
appId,
|
||||
onSubmit,
|
||||
}: AddProviderDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
// OpenCode and OpenClaw don't support universal providers
|
||||
const showUniversalTab =
|
||||
appId !== "opencode" &&
|
||||
appId !== "openclaw" &&
|
||||
appId !== "hermes" &&
|
||||
appId !== "claude-desktop";
|
||||
const [activeTab, setActiveTab] = useState<"app-specific" | "universal">(
|
||||
"app-specific",
|
||||
);
|
||||
const [universalFormOpen, setUniversalFormOpen] = useState(false);
|
||||
const [selectedUniversalPreset, setSelectedUniversalPreset] =
|
||||
useState<UniversalProviderPreset | null>(null);
|
||||
const [isFormSubmitting, setIsFormSubmitting] = useState(false);
|
||||
|
||||
const handleUniversalProviderSave = useCallback(
|
||||
async (provider: UniversalProvider) => {
|
||||
try {
|
||||
await universalProvidersApi.upsert(provider);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[AddProviderDialog] Failed to save universal provider",
|
||||
error,
|
||||
);
|
||||
toast.error(
|
||||
t("universalProvider.addFailed", {
|
||||
defaultValue: "统一供应商添加失败",
|
||||
}),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await universalProvidersApi.sync(provider.id);
|
||||
toast.success(
|
||||
t("universalProvider.addedAndSynced", {
|
||||
defaultValue: "统一供应商已添加并同步",
|
||||
}),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[AddProviderDialog] Provider saved but sync failed",
|
||||
error,
|
||||
);
|
||||
toast.warning(
|
||||
t("universalProvider.addedButSyncFailed", {
|
||||
defaultValue: "统一供应商已添加，但同步失败",
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
setUniversalFormOpen(false);
|
||||
setSelectedUniversalPreset(null);
|
||||
onOpenChange(false);
|
||||
},
|
||||
[t, onOpenChange],
|
||||
);
|
||||
|
||||
const handleUniversalFormClose = useCallback(() => {
|
||||
setUniversalFormOpen(false);
|
||||
setSelectedUniversalPreset(null);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: ProviderFormValues) => {
|
||||
const parsedConfig = JSON.parse(values.settingsConfig) as Record<
|
||||
string,
|
||||
unknown
|
||||
>;
|
||||
|
||||
// 构造基础提交数据
|
||||
const providerData: Omit<Provider, "id"> & {
|
||||
providerKey?: string;
|
||||
suggestedDefaults?: OpenClawSuggestedDefaults;
|
||||
ensureClaudeDesktopOfficialSeed?: boolean;
|
||||
} = {
|
||||
name: values.name.trim(),
|
||||
notes: values.notes?.trim() || undefined,
|
||||
websiteUrl: values.websiteUrl?.trim() || undefined,
|
||||
settingsConfig: parsedConfig,
|
||||
icon: values.icon?.trim() || undefined,
|
||||
iconColor: values.iconColor?.trim() || undefined,
|
||||
...(values.presetCategory ? { category: values.presetCategory } : {}),
|
||||
...(values.meta ? { meta: values.meta } : {}),
|
||||
};
|
||||
|
||||
if (appId === "claude-desktop" && values.presetId) {
|
||||
const presetIndex = parseInt(
|
||||
values.presetId.replace("claude-desktop-", ""),
|
||||
);
|
||||
const preset = claudeDesktopProviderPresets[presetIndex];
|
||||
providerData.ensureClaudeDesktopOfficialSeed =
|
||||
values.presetCategory === "official" &&
|
||||
preset?.category === "official";
|
||||
}
|
||||
|
||||
// OpenCode/OpenClaw: pass providerKey for ID generation
|
||||
if (
|
||||
(appId === "opencode" || appId === "openclaw" || appId === "hermes") &&
|
||||
values.providerKey
|
||||
) {
|
||||
providerData.providerKey = values.providerKey;
|
||||
}
|
||||
|
||||
const hasCustomEndpoints =
|
||||
providerData.meta?.custom_endpoints &&
|
||||
Object.keys(providerData.meta.custom_endpoints).length > 0;
|
||||
|
||||
if (!hasCustomEndpoints && values.presetCategory !== "omo") {
|
||||
const urlSet = new Set<string>();
|
||||
|
||||
const addUrl = (rawUrl?: string) => {
|
||||
const url = (rawUrl || "").trim().replace(/\/+$/, "");
|
||||
if (url && url.startsWith("http")) {
|
||||
urlSet.add(url);
|
||||
}
|
||||
};
|
||||
|
||||
if (values.presetId) {
|
||||
if (appId === "claude") {
|
||||
const presets = providerPresets;
|
||||
const presetIndex = parseInt(
|
||||
values.presetId.replace("claude-", ""),
|
||||
);
|
||||
if (
|
||||
!isNaN(presetIndex) &&
|
||||
presetIndex >= 0 &&
|
||||
presetIndex < presets.length
|
||||
) {
|
||||
const preset = presets[presetIndex];
|
||||
if (preset?.endpointCandidates) {
|
||||
preset.endpointCandidates.forEach(addUrl);
|
||||
}
|
||||
}
|
||||
} else if (appId === "codex") {
|
||||
const presets = codexProviderPresets;
|
||||
const presetIndex = parseInt(values.presetId.replace("codex-", ""));
|
||||
if (
|
||||
!isNaN(presetIndex) &&
|
||||
presetIndex >= 0 &&
|
||||
presetIndex < presets.length
|
||||
) {
|
||||
const preset = presets[presetIndex];
|
||||
if (Array.isArray(preset.endpointCandidates)) {
|
||||
preset.endpointCandidates.forEach(addUrl);
|
||||
}
|
||||
}
|
||||
} else if (appId === "gemini") {
|
||||
const presets = geminiProviderPresets;
|
||||
const presetIndex = parseInt(
|
||||
values.presetId.replace("gemini-", ""),
|
||||
);
|
||||
if (
|
||||
!isNaN(presetIndex) &&
|
||||
presetIndex >= 0 &&
|
||||
presetIndex < presets.length
|
||||
) {
|
||||
const preset = presets[presetIndex];
|
||||
if (Array.isArray(preset.endpointCandidates)) {
|
||||
preset.endpointCandidates.forEach(addUrl);
|
||||
}
|
||||
}
|
||||
} else if (appId === "claude-desktop") {
|
||||
const presets = claudeDesktopProviderPresets;
|
||||
const presetIndex = parseInt(
|
||||
values.presetId.replace("claude-desktop-", ""),
|
||||
);
|
||||
if (
|
||||
!isNaN(presetIndex) &&
|
||||
presetIndex >= 0 &&
|
||||
presetIndex < presets.length
|
||||
) {
|
||||
const preset = presets[presetIndex];
|
||||
if (Array.isArray(preset.endpointCandidates)) {
|
||||
preset.endpointCandidates.forEach(addUrl);
|
||||
}
|
||||
addUrl(preset.baseUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (appId === "claude") {
|
||||
const env = parsedConfig.env as Record<string, any> | undefined;
|
||||
if (env?.ANTHROPIC_BASE_URL) {
|
||||
addUrl(env.ANTHROPIC_BASE_URL);
|
||||
}
|
||||
} else if (appId === "claude-desktop") {
|
||||
const env = parsedConfig.env as Record<string, any> | undefined;
|
||||
if (env?.ANTHROPIC_BASE_URL) {
|
||||
addUrl(env.ANTHROPIC_BASE_URL);
|
||||
}
|
||||
} else if (appId === "codex") {
|
||||
const config = parsedConfig.config as string | undefined;
|
||||
if (config) {
|
||||
const extractedBaseUrl = extractCodexBaseUrl(config);
|
||||
if (extractedBaseUrl) {
|
||||
addUrl(extractedBaseUrl);
|
||||
}
|
||||
}
|
||||
} else if (appId === "gemini") {
|
||||
const env = parsedConfig.env as Record<string, any> | undefined;
|
||||
if (env?.GOOGLE_GEMINI_BASE_URL) {
|
||||
addUrl(env.GOOGLE_GEMINI_BASE_URL);
|
||||
}
|
||||
} else if (appId === "opencode") {
|
||||
const options = parsedConfig.options as
|
||||
| Record<string, any>
|
||||
| undefined;
|
||||
if (options?.baseURL) {
|
||||
addUrl(options.baseURL);
|
||||
}
|
||||
} else if (appId === "openclaw") {
|
||||
// OpenClaw uses baseUrl directly
|
||||
if (parsedConfig.baseUrl) {
|
||||
addUrl(parsedConfig.baseUrl as string);
|
||||
}
|
||||
} else if (appId === "hermes") {
|
||||
if (parsedConfig.base_url) {
|
||||
addUrl(parsedConfig.base_url as string);
|
||||
}
|
||||
}
|
||||
|
||||
const urls = Array.from(urlSet);
|
||||
if (urls.length > 0) {
|
||||
const now = Date.now();
|
||||
const customEndpoints: Record<string, CustomEndpoint> = {};
|
||||
urls.forEach((url) => {
|
||||
customEndpoints[url] = {
|
||||
url,
|
||||
addedAt: now,
|
||||
lastUsed: undefined,
|
||||
};
|
||||
});
|
||||
|
||||
providerData.meta = {
|
||||
...(providerData.meta ?? {}),
|
||||
custom_endpoints: customEndpoints,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// OpenClaw: pass suggestedDefaults for model registration
|
||||
if (appId === "openclaw" && values.suggestedDefaults) {
|
||||
providerData.suggestedDefaults = values.suggestedDefaults;
|
||||
}
|
||||
|
||||
await onSubmit(providerData);
|
||||
onOpenChange(false);
|
||||
},
|
||||
[appId, onSubmit, onOpenChange],
|
||||
);
|
||||
|
||||
const footer =
|
||||
!showUniversalTab || activeTab === "app-specific" ? (
|
||||
<>
|
||||
<span className="mr-auto min-w-0 text-xs text-muted-foreground truncate">
|
||||
{t("provider.addFooterHint")}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="border-border/20 hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
form="provider-form"
|
||||
disabled={isFormSubmitting}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{t("common.add")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="border-border/20 hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setUniversalFormOpen(true)}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{t("universalProvider.add")}
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<FullScreenPanel
|
||||
isOpen={open}
|
||||
title={t("provider.addNewProvider")}
|
||||
onClose={() => onOpenChange(false)}
|
||||
footer={footer}
|
||||
contentClassName="pt-3"
|
||||
>
|
||||
{showUniversalTab ? (
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(v) => setActiveTab(v as "app-specific" | "universal")}
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-2 mb-6">
|
||||
<TabsTrigger value="app-specific">
|
||||
{t(`apps.${appId}`)} {t("provider.tabProvider")}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="universal">
|
||||
{t("provider.tabUniversal")}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="app-specific" className="mt-0">
|
||||
<ProviderForm
|
||||
appId={appId}
|
||||
submitLabel={t("common.add")}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => onOpenChange(false)}
|
||||
onSubmittingChange={setIsFormSubmitting}
|
||||
showButtons={false}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="universal" className="mt-0">
|
||||
<UniversalProviderPanel />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
) : (
|
||||
// OpenCode/OpenClaw: directly show form without tabs
|
||||
<ProviderForm
|
||||
appId={appId}
|
||||
submitLabel={t("common.add")}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => onOpenChange(false)}
|
||||
onSubmittingChange={setIsFormSubmitting}
|
||||
showButtons={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showUniversalTab && (
|
||||
<UniversalProviderFormModal
|
||||
isOpen={universalFormOpen}
|
||||
onClose={handleUniversalFormClose}
|
||||
onSave={handleUniversalProviderSave}
|
||||
initialPreset={selectedUniversalPreset}
|
||||
/>
|
||||
)}
|
||||
</FullScreenPanel>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,254 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Save } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
|
||||
import type { Provider } from "@/types";
|
||||
import {
|
||||
ProviderForm,
|
||||
type ProviderFormValues,
|
||||
} from "@/components/providers/forms/ProviderForm";
|
||||
import { openclawApi, providersApi, vscodeApi, type AppId } from "@/lib/api";
|
||||
|
||||
interface EditProviderDialogProps {
|
||||
open: boolean;
|
||||
provider: Provider | null;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSubmit: (payload: {
|
||||
provider: Provider;
|
||||
originalId?: string;
|
||||
}) => Promise<void> | void;
|
||||
appId: AppId;
|
||||
isProxyTakeover?: boolean; // 代理接管模式下不读取 live（避免显示被接管后的代理配置）
|
||||
}
|
||||
|
||||
export function EditProviderDialog({
|
||||
open,
|
||||
provider,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
appId,
|
||||
isProxyTakeover = false,
|
||||
}: EditProviderDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
const [isFormSubmitting, setIsFormSubmitting] = useState(false);
|
||||
|
||||
// 默认使用传入的 provider.settingsConfig，若当前编辑对象是"当前生效供应商"，则尝试读取实时配置替换初始值
|
||||
const [liveSettings, setLiveSettings] = useState<Record<
|
||||
string,
|
||||
unknown
|
||||
> | null>(null);
|
||||
|
||||
// 使用 ref 标记是否已经加载过，防止重复读取覆盖用户编辑
|
||||
const [hasLoadedLive, setHasLoadedLive] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const load = async () => {
|
||||
if (!open || !provider) {
|
||||
setLiveSettings(null);
|
||||
setHasLoadedLive(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 关键修复：只在首次打开时加载一次
|
||||
if (hasLoadedLive) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 代理接管模式：Live 配置已被代理改写，读取 live 会导致编辑界面展示代理地址/占位符等内容
|
||||
// 因此直接回退到 SSOT（数据库）配置，避免用户困惑与误保存
|
||||
if (isProxyTakeover) {
|
||||
if (!cancelled) {
|
||||
setLiveSettings(null);
|
||||
setHasLoadedLive(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// OpenCode uses additive mode - each provider's config is stored independently in DB
|
||||
// Reading live config would return the full opencode.json (with $schema, provider, mcp etc.)
|
||||
// instead of just the provider fragment, causing incorrect nested structure on save
|
||||
if (appId === "opencode") {
|
||||
if (!cancelled) {
|
||||
setLiveSettings(null);
|
||||
setHasLoadedLive(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (appId === "openclaw") {
|
||||
try {
|
||||
const live = await openclawApi.getLiveProvider(provider.id);
|
||||
if (!cancelled && live && typeof live === "object") {
|
||||
setLiveSettings(live);
|
||||
} else if (!cancelled) {
|
||||
setLiveSettings(null);
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) {
|
||||
setLiveSettings(null);
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) {
|
||||
setHasLoadedLive(true);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const currentId = await providersApi.getCurrent(appId);
|
||||
if (currentId && provider.id === currentId) {
|
||||
try {
|
||||
const live = (await vscodeApi.getLiveProviderSettings(
|
||||
appId,
|
||||
)) as Record<string, unknown>;
|
||||
if (!cancelled && live && typeof live === "object") {
|
||||
setLiveSettings(live);
|
||||
setHasLoadedLive(true);
|
||||
}
|
||||
} catch {
|
||||
// 读取实时配置失败则回退到 SSOT（不打断编辑流程）
|
||||
if (!cancelled) {
|
||||
setLiveSettings(null);
|
||||
setHasLoadedLive(true);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (!cancelled) {
|
||||
setLiveSettings(null);
|
||||
setHasLoadedLive(true);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
// no-op
|
||||
}
|
||||
};
|
||||
void load();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [open, provider?.id, appId, hasLoadedLive, isProxyTakeover]); // 只依赖 provider.id，不依赖整个 provider 对象
|
||||
|
||||
const initialSettingsConfig = useMemo(() => {
|
||||
const base = (liveSettings ?? provider?.settingsConfig ?? {}) as Record<
|
||||
string,
|
||||
unknown
|
||||
>;
|
||||
|
||||
// Codex 的 modelCatalog 是 cc-switch 私有字段，SSOT 在数据库。Live 的 config.toml
|
||||
// 仅在写入时投影出 model_catalog_json 指针；Codex.app 改写配置、代理接管/恢复周期、
|
||||
// 来回切换供应商都可能让 Live 丢失该投影，从而 read_live_settings 反解为空。
|
||||
// 若放任 Live 覆盖，编辑界面会显示空映射表，保存后连同数据库里的映射一起清空（数据丢失）。
|
||||
// 因此始终以数据库 SSOT 的 modelCatalog 为准，仅在数据库确实没有时才回退到 Live 反解结果。
|
||||
if (
|
||||
appId === "codex" &&
|
||||
liveSettings &&
|
||||
provider?.settingsConfig &&
|
||||
typeof provider.settingsConfig === "object"
|
||||
) {
|
||||
const dbCatalog = (provider.settingsConfig as Record<string, unknown>)
|
||||
.modelCatalog;
|
||||
if (dbCatalog !== undefined) {
|
||||
return { ...base, modelCatalog: dbCatalog };
|
||||
}
|
||||
}
|
||||
|
||||
return base;
|
||||
}, [liveSettings, provider?.settingsConfig, appId]); // 只依赖 settingsConfig，不依赖整个 provider
|
||||
|
||||
// 固定 initialData，防止 provider 对象更新时重置表单
|
||||
const initialData = useMemo(() => {
|
||||
if (!provider) return null;
|
||||
return {
|
||||
name: provider.name,
|
||||
notes: provider.notes,
|
||||
websiteUrl: provider.websiteUrl,
|
||||
settingsConfig: initialSettingsConfig,
|
||||
category: provider.category,
|
||||
meta: provider.meta,
|
||||
icon: provider.icon,
|
||||
iconColor: provider.iconColor,
|
||||
};
|
||||
}, [
|
||||
open, // 修复：编辑保存后再次打开显示旧数据，依赖 open 确保每次打开时重新读取最新 provider 数据
|
||||
provider?.id, // 只依赖 ID，provider 对象更新不会触发重新计算
|
||||
provider?.meta, // 需要依赖 meta 以便正确初始化 testConfig
|
||||
initialSettingsConfig,
|
||||
]);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: ProviderFormValues) => {
|
||||
if (!provider) return;
|
||||
|
||||
// 注意：values.settingsConfig 已经是最终的配置字符串
|
||||
// ProviderForm 已经为不同的 app 类型（Claude/Codex/Gemini）正确组装了配置
|
||||
const parsedConfig = JSON.parse(values.settingsConfig) as Record<
|
||||
string,
|
||||
unknown
|
||||
>;
|
||||
const nextProviderId =
|
||||
(appId === "opencode" || appId === "openclaw") &&
|
||||
values.providerKey?.trim()
|
||||
? values.providerKey.trim()
|
||||
: provider.id;
|
||||
|
||||
const updatedProvider: Provider = {
|
||||
...provider,
|
||||
id: nextProviderId,
|
||||
name: values.name.trim(),
|
||||
notes: values.notes?.trim() || undefined,
|
||||
websiteUrl: values.websiteUrl?.trim() || undefined,
|
||||
settingsConfig: parsedConfig,
|
||||
icon: values.icon?.trim() || undefined,
|
||||
iconColor: values.iconColor?.trim() || undefined,
|
||||
...(values.presetCategory ? { category: values.presetCategory } : {}),
|
||||
// 保留或更新 meta 字段
|
||||
...(values.meta ? { meta: values.meta } : {}),
|
||||
};
|
||||
|
||||
await onSubmit({
|
||||
provider: updatedProvider,
|
||||
originalId: provider.id,
|
||||
});
|
||||
onOpenChange(false);
|
||||
},
|
||||
[appId, onSubmit, onOpenChange, provider],
|
||||
);
|
||||
|
||||
if (!provider || !initialData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<FullScreenPanel
|
||||
isOpen={open}
|
||||
title={t("provider.editProvider")}
|
||||
onClose={() => onOpenChange(false)}
|
||||
footer={
|
||||
<Button
|
||||
type="submit"
|
||||
form="provider-form"
|
||||
disabled={isFormSubmitting}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{t("common.save")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<ProviderForm
|
||||
appId={appId}
|
||||
providerId={provider.id}
|
||||
submitLabel={t("common.save")}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => onOpenChange(false)}
|
||||
onSubmittingChange={setIsFormSubmitting}
|
||||
initialData={initialData}
|
||||
showButtons={false}
|
||||
isProxyTakeover={isProxyTakeover}
|
||||
/>
|
||||
</FullScreenPanel>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface FailoverPriorityBadgeProps {
|
||||
priority: number; // 1, 2, 3, ...
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 故障转移优先级徽章
|
||||
* 显示供应商在故障转移队列中的优先级顺序
|
||||
*/
|
||||
export function FailoverPriorityBadge({
|
||||
priority,
|
||||
className,
|
||||
}: FailoverPriorityBadgeProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold",
|
||||
"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
||||
className,
|
||||
)}
|
||||
title={t("failover.priority.tooltip", {
|
||||
priority,
|
||||
defaultValue: `故障转移优先级 ${priority}`,
|
||||
})}
|
||||
>
|
||||
P{priority}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { HealthStatus } from "@/lib/api/model-test";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface HealthStatusIndicatorProps {
|
||||
status: HealthStatus;
|
||||
responseTimeMs?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const statusConfig = {
|
||||
operational: {
|
||||
color: "bg-emerald-500",
|
||||
labelKey: "health.operational",
|
||||
labelFallback: "正常",
|
||||
textColor: "text-emerald-600 dark:text-emerald-400",
|
||||
},
|
||||
degraded: {
|
||||
color: "bg-yellow-500",
|
||||
labelKey: "health.degraded",
|
||||
labelFallback: "降级",
|
||||
textColor: "text-yellow-600 dark:text-yellow-400",
|
||||
},
|
||||
failed: {
|
||||
color: "bg-red-500",
|
||||
labelKey: "health.failed",
|
||||
labelFallback: "失败",
|
||||
textColor: "text-red-600 dark:text-red-400",
|
||||
},
|
||||
};
|
||||
|
||||
export const HealthStatusIndicator: React.FC<HealthStatusIndicatorProps> = ({
|
||||
status,
|
||||
responseTimeMs,
|
||||
className,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const config = statusConfig[status];
|
||||
const label = t(config.labelKey, { defaultValue: config.labelFallback });
|
||||
|
||||
return (
|
||||
<div className={cn("flex items-center gap-2", className)}>
|
||||
<div className={cn("w-2 h-2 rounded-full", config.color)} />
|
||||
<span className={cn("text-xs font-medium", config.textColor)}>
|
||||
{label}
|
||||
{responseTimeMs !== undefined && ` (${responseTimeMs}ms)`}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,371 @@
|
||||
import {
|
||||
Activity,
|
||||
BarChart3,
|
||||
Check,
|
||||
Copy,
|
||||
Edit,
|
||||
Loader2,
|
||||
Minus,
|
||||
Play,
|
||||
Plus,
|
||||
Terminal,
|
||||
Trash2,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { AppId } from "@/lib/api";
|
||||
|
||||
interface ProviderActionsProps {
|
||||
appId?: AppId;
|
||||
isCurrent: boolean;
|
||||
isInConfig?: boolean;
|
||||
isTesting?: boolean;
|
||||
isProxyTakeover?: boolean;
|
||||
isOmo?: boolean;
|
||||
onSwitch: () => void;
|
||||
onEdit: () => void;
|
||||
onDuplicate: () => void;
|
||||
onTest?: () => void;
|
||||
onConfigureUsage?: () => void;
|
||||
onDelete: () => void;
|
||||
onRemoveFromConfig?: () => void;
|
||||
onDisableOmo?: () => void;
|
||||
onOpenTerminal?: () => void;
|
||||
isAutoFailoverEnabled?: boolean;
|
||||
isInFailoverQueue?: boolean;
|
||||
onToggleFailover?: (enabled: boolean) => void;
|
||||
isOfficialBlockedByProxy?: boolean;
|
||||
// Hermes v12+ providers: dict overlay — edit/delete must go through Web UI
|
||||
isReadOnly?: boolean;
|
||||
// OpenClaw: default model
|
||||
isDefaultModel?: boolean;
|
||||
onSetAsDefault?: () => void;
|
||||
}
|
||||
|
||||
// 主按钮的呈现状态。title 用于 disabled 态向用户解释为何不可点击；
|
||||
// 因 Button 基类带 disabled:pointer-events-none，title 必须挂在外层非禁用
|
||||
// 的 wrapper 上才会在 hover 时显示（见下方 <span> 包裹）。
|
||||
interface MainButtonState {
|
||||
disabled: boolean;
|
||||
variant: "default" | "secondary";
|
||||
className: string;
|
||||
icon: JSX.Element;
|
||||
text: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export function ProviderActions({
|
||||
appId,
|
||||
isCurrent,
|
||||
isInConfig = false,
|
||||
isTesting,
|
||||
isProxyTakeover = false,
|
||||
isOmo = false,
|
||||
onSwitch,
|
||||
onEdit,
|
||||
onDuplicate,
|
||||
onTest,
|
||||
onConfigureUsage,
|
||||
onDelete,
|
||||
onRemoveFromConfig,
|
||||
onDisableOmo,
|
||||
onOpenTerminal,
|
||||
isAutoFailoverEnabled = false,
|
||||
isInFailoverQueue = false,
|
||||
onToggleFailover,
|
||||
isOfficialBlockedByProxy = false,
|
||||
isReadOnly = false,
|
||||
// OpenClaw: default model
|
||||
isDefaultModel = false,
|
||||
onSetAsDefault,
|
||||
}: ProviderActionsProps) {
|
||||
const { t } = useTranslation();
|
||||
const iconButtonClass = "h-8 w-8 p-1";
|
||||
|
||||
// 累加模式应用（OpenCode 非 OMO / OpenClaw / Hermes）
|
||||
const isAdditiveMode =
|
||||
(appId === "opencode" && !isOmo) ||
|
||||
appId === "openclaw" ||
|
||||
appId === "hermes";
|
||||
|
||||
// 故障转移模式下的按钮逻辑（累加模式和 OMO 应用不支持故障转移）
|
||||
const isFailoverMode =
|
||||
!isAdditiveMode && !isOmo && isAutoFailoverEnabled && onToggleFailover;
|
||||
|
||||
const handleMainButtonClick = () => {
|
||||
if (isOmo) {
|
||||
if (isCurrent) {
|
||||
onDisableOmo?.();
|
||||
} else {
|
||||
onSwitch();
|
||||
}
|
||||
} else if (isAdditiveMode) {
|
||||
// 累加模式：切换配置状态（添加/移除）
|
||||
if (isInConfig) {
|
||||
if (onRemoveFromConfig) {
|
||||
onRemoveFromConfig();
|
||||
} else {
|
||||
onDelete();
|
||||
}
|
||||
} else {
|
||||
onSwitch(); // 添加到配置
|
||||
}
|
||||
} else if (isFailoverMode) {
|
||||
onToggleFailover(!isInFailoverQueue);
|
||||
} else {
|
||||
onSwitch();
|
||||
}
|
||||
};
|
||||
|
||||
const getMainButtonState = (): MainButtonState => {
|
||||
if (isOmo) {
|
||||
if (isCurrent) {
|
||||
return {
|
||||
disabled: false,
|
||||
variant: "secondary" as const,
|
||||
className:
|
||||
"bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
|
||||
icon: <Check className="h-4 w-4" />,
|
||||
text: t("provider.inUse"),
|
||||
};
|
||||
}
|
||||
return {
|
||||
disabled: false,
|
||||
variant: "default" as const,
|
||||
className: "",
|
||||
icon: <Play className="h-4 w-4" />,
|
||||
text: t("provider.enable"),
|
||||
};
|
||||
}
|
||||
|
||||
// 累加模式（OpenCode 非 OMO / OpenClaw）
|
||||
if (isAdditiveMode) {
|
||||
if (isInConfig) {
|
||||
return {
|
||||
disabled: isDefaultModel === true,
|
||||
variant: "secondary" as const,
|
||||
className: cn(
|
||||
"bg-orange-100 text-orange-600 hover:bg-orange-200 dark:bg-orange-900/50 dark:text-orange-400 dark:hover:bg-orange-900/70",
|
||||
isDefaultModel && "opacity-40 cursor-not-allowed",
|
||||
),
|
||||
icon: <Minus className="h-4 w-4" />,
|
||||
text: t("provider.removeFromConfig", { defaultValue: "移除" }),
|
||||
};
|
||||
}
|
||||
return {
|
||||
disabled: false,
|
||||
variant: "default" as const,
|
||||
className:
|
||||
"bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700",
|
||||
icon: <Plus className="h-4 w-4" />,
|
||||
text: t("provider.addToConfig", { defaultValue: "添加" }),
|
||||
};
|
||||
}
|
||||
|
||||
if (isFailoverMode) {
|
||||
if (isInFailoverQueue) {
|
||||
return {
|
||||
disabled: false,
|
||||
variant: "secondary" as const,
|
||||
className:
|
||||
"bg-blue-100 text-blue-600 hover:bg-blue-200 dark:bg-blue-900/50 dark:text-blue-400 dark:hover:bg-blue-900/70",
|
||||
icon: <Check className="h-4 w-4" />,
|
||||
text: t("failover.inQueue", { defaultValue: "已加入" }),
|
||||
};
|
||||
}
|
||||
return {
|
||||
disabled: false,
|
||||
variant: "default" as const,
|
||||
className:
|
||||
"bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
|
||||
icon: <Plus className="h-4 w-4" />,
|
||||
text: t("failover.addQueue", { defaultValue: "加入" }),
|
||||
};
|
||||
}
|
||||
|
||||
if (isCurrent) {
|
||||
return {
|
||||
disabled: true,
|
||||
variant: "secondary" as const,
|
||||
className:
|
||||
"bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
|
||||
icon: <Check className="h-4 w-4" />,
|
||||
text: t("provider.inUse"),
|
||||
};
|
||||
}
|
||||
|
||||
if (isOfficialBlockedByProxy) {
|
||||
return {
|
||||
disabled: true,
|
||||
variant: "default" as const,
|
||||
className: "",
|
||||
icon: <Play className="h-4 w-4" />,
|
||||
text: t("provider.enable"),
|
||||
title: t("provider.blockedByProxyHint"),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
disabled: false,
|
||||
variant: "default" as const,
|
||||
className: isProxyTakeover
|
||||
? "bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
|
||||
: "",
|
||||
icon: <Play className="h-4 w-4" />,
|
||||
text: t("provider.enable"),
|
||||
};
|
||||
};
|
||||
|
||||
const buttonState = getMainButtonState();
|
||||
|
||||
const canDelete =
|
||||
!isReadOnly && (isOmo || isAdditiveMode ? true : !isCurrent);
|
||||
const readOnlyHint = t("provider.managedByHermesHint", {
|
||||
defaultValue: "由 Hermes 管理，请在 Hermes Web UI 中编辑",
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
{(appId === "openclaw" || appId === "hermes") &&
|
||||
isInConfig &&
|
||||
onSetAsDefault &&
|
||||
(() => {
|
||||
const activeLabel =
|
||||
appId === "hermes"
|
||||
? t("provider.inUse", { defaultValue: "已在用" })
|
||||
: t("provider.isDefault", { defaultValue: "当前默认" });
|
||||
const inactiveLabel =
|
||||
appId === "hermes"
|
||||
? t("provider.enable", { defaultValue: "启用" })
|
||||
: t("provider.setAsDefault", { defaultValue: "设为默认" });
|
||||
return (
|
||||
<Button
|
||||
size="sm"
|
||||
variant={isDefaultModel ? "secondary" : "default"}
|
||||
onClick={isDefaultModel ? undefined : onSetAsDefault}
|
||||
disabled={isDefaultModel}
|
||||
className={cn(
|
||||
"w-fit px-2.5",
|
||||
isDefaultModel
|
||||
? "bg-gray-200 text-muted-foreground dark:bg-gray-700 opacity-60 cursor-not-allowed"
|
||||
: "bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
|
||||
)}
|
||||
>
|
||||
<Zap className="h-4 w-4" />
|
||||
{isDefaultModel ? activeLabel : inactiveLabel}
|
||||
</Button>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* wrapper span 承接 hover：disabled 按钮自身 pointer-events:none，
|
||||
原生 title 与 cursor 都必须挂在未禁用的外层元素上才会生效 */}
|
||||
<span
|
||||
title={buttonState.title}
|
||||
className={cn(
|
||||
"inline-flex",
|
||||
buttonState.disabled && "cursor-not-allowed",
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={buttonState.variant}
|
||||
onClick={handleMainButtonClick}
|
||||
disabled={buttonState.disabled}
|
||||
className={cn("w-[4.5rem] px-2.5", buttonState.className)}
|
||||
>
|
||||
{buttonState.icon}
|
||||
{buttonState.text}
|
||||
</Button>
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={isReadOnly ? undefined : onEdit}
|
||||
disabled={isReadOnly}
|
||||
title={isReadOnly ? readOnlyHint : t("common.edit")}
|
||||
className={cn(
|
||||
iconButtonClass,
|
||||
isReadOnly && "opacity-40 cursor-not-allowed text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={onDuplicate}
|
||||
title={t("provider.duplicate")}
|
||||
className={iconButtonClass}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={onTest || undefined}
|
||||
disabled={isTesting}
|
||||
title={t("provider.connectivityCheck", "检测连通")}
|
||||
className={cn(
|
||||
iconButtonClass,
|
||||
!onTest && "opacity-40 cursor-not-allowed text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{isTesting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Activity className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={onConfigureUsage || undefined}
|
||||
title={t("provider.configureUsage")}
|
||||
className={cn(
|
||||
iconButtonClass,
|
||||
!onConfigureUsage &&
|
||||
"opacity-40 cursor-not-allowed text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{onOpenTerminal && (
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={onOpenTerminal}
|
||||
title={t("provider.openTerminal", "打开终端")}
|
||||
className={cn(
|
||||
iconButtonClass,
|
||||
"hover:text-emerald-600 dark:hover:text-emerald-400",
|
||||
)}
|
||||
>
|
||||
<Terminal className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={canDelete ? onDelete : undefined}
|
||||
title={isReadOnly ? readOnlyHint : t("common.delete")}
|
||||
className={cn(
|
||||
iconButtonClass,
|
||||
canDelete && "hover:text-red-500 dark:hover:text-red-400",
|
||||
!canDelete && "opacity-40 cursor-not-allowed text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,609 @@
|
||||
import { useMemo, useState, useEffect } from "react";
|
||||
import { GripVertical, ChevronDown, ChevronUp } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type {
|
||||
DraggableAttributes,
|
||||
DraggableSyntheticListeners,
|
||||
} from "@dnd-kit/core";
|
||||
import type { Provider } from "@/types";
|
||||
import type { AppId } from "@/lib/api";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ProviderActions } from "@/components/providers/ProviderActions";
|
||||
import { ProviderIcon } from "@/components/ProviderIcon";
|
||||
import UsageFooter from "@/components/UsageFooter";
|
||||
import SubscriptionQuotaFooter from "@/components/SubscriptionQuotaFooter";
|
||||
import CopilotQuotaFooter from "@/components/CopilotQuotaFooter";
|
||||
import CodexOauthQuotaFooter from "@/components/CodexOauthQuotaFooter";
|
||||
import { PROVIDER_TYPES, TEMPLATE_TYPES } from "@/config/constants";
|
||||
import { isHermesReadOnlyProvider } from "@/config/hermesProviderPresets";
|
||||
import { ProviderHealthBadge } from "@/components/providers/ProviderHealthBadge";
|
||||
import { FailoverPriorityBadge } from "@/components/providers/FailoverPriorityBadge";
|
||||
import {
|
||||
extractCodexBaseUrl,
|
||||
extractCodexExperimentalBearerToken,
|
||||
extractCodexWireApi,
|
||||
isCodexAnthropicWireApi,
|
||||
isCodexChatWireApi,
|
||||
} from "@/utils/providerConfigUtils";
|
||||
import { useProviderHealth } from "@/lib/query/failover";
|
||||
import { useUsageQuery } from "@/lib/query/queries";
|
||||
|
||||
interface DragHandleProps {
|
||||
attributes: DraggableAttributes;
|
||||
listeners: DraggableSyntheticListeners;
|
||||
isDragging: boolean;
|
||||
}
|
||||
|
||||
interface ProviderCardProps {
|
||||
provider: Provider;
|
||||
isCurrent: boolean;
|
||||
appId: AppId;
|
||||
isInConfig?: boolean; // OpenCode: 是否已添加到 opencode.json
|
||||
isOmo?: boolean;
|
||||
isOmoSlim?: boolean;
|
||||
onSwitch: (provider: Provider) => void;
|
||||
onEdit: (provider: Provider) => void;
|
||||
onDelete: (provider: Provider) => void;
|
||||
onRemoveFromConfig?: (provider: Provider) => void;
|
||||
onDisableOmo?: () => void;
|
||||
onDisableOmoSlim?: () => void;
|
||||
onConfigureUsage: (provider: Provider) => void;
|
||||
onOpenWebsite: (url: string) => void;
|
||||
onDuplicate: (provider: Provider) => void;
|
||||
onTest?: (provider: Provider) => void;
|
||||
onOpenTerminal?: (provider: Provider) => void;
|
||||
isTesting?: boolean;
|
||||
isProxyRunning: boolean;
|
||||
isProxyTakeover?: boolean; // 代理接管模式（Live配置已被接管，切换为热切换）
|
||||
dragHandleProps?: DragHandleProps;
|
||||
isAutoFailoverEnabled?: boolean; // 是否开启自动故障转移
|
||||
failoverPriority?: number; // 故障转移优先级（1 = P1, 2 = P2, ...）
|
||||
isInFailoverQueue?: boolean; // 是否在故障转移队列中
|
||||
onToggleFailover?: (enabled: boolean) => void; // 切换故障转移队列
|
||||
activeProviderId?: string; // 代理当前实际使用的供应商 ID（用于故障转移模式下标注绿色边框）
|
||||
// OpenClaw: default model
|
||||
isDefaultModel?: boolean;
|
||||
onSetAsDefault?: () => void;
|
||||
}
|
||||
|
||||
/** 判断是否为官方供应商（无自定义 base URL / API key，直连官方 API） */
|
||||
function isOfficialProvider(provider: Provider, appId: AppId): boolean {
|
||||
if (provider.category === "official") {
|
||||
return true;
|
||||
}
|
||||
|
||||
const config = provider.settingsConfig as Record<string, any>;
|
||||
if (appId === "claude") {
|
||||
const baseUrl = config?.env?.ANTHROPIC_BASE_URL;
|
||||
return !baseUrl || (typeof baseUrl === "string" && baseUrl.trim() === "");
|
||||
}
|
||||
if (appId === "codex") {
|
||||
// 无 OPENAI_API_KEY → 使用 Codex CLI 内置 OAuth（官方）
|
||||
const apiKey = config?.auth?.OPENAI_API_KEY;
|
||||
const bearerToken =
|
||||
typeof config?.config === "string"
|
||||
? extractCodexExperimentalBearerToken(config.config)
|
||||
: undefined;
|
||||
return (
|
||||
!bearerToken &&
|
||||
(!apiKey || (typeof apiKey === "string" && apiKey.trim() === ""))
|
||||
);
|
||||
}
|
||||
if (appId === "gemini") {
|
||||
// 无 GEMINI_API_KEY 且无 GOOGLE_GEMINI_BASE_URL → Google OAuth 官方模式
|
||||
const apiKey = config?.env?.GEMINI_API_KEY;
|
||||
const baseUrl = config?.env?.GOOGLE_GEMINI_BASE_URL;
|
||||
return (
|
||||
(!apiKey || (typeof apiKey === "string" && apiKey.trim() === "")) &&
|
||||
(!baseUrl || (typeof baseUrl === "string" && baseUrl.trim() === ""))
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
const extractApiUrl = (provider: Provider, fallbackText: string) => {
|
||||
if (provider.notes?.trim()) {
|
||||
return provider.notes.trim();
|
||||
}
|
||||
|
||||
if (provider.websiteUrl) {
|
||||
return provider.websiteUrl;
|
||||
}
|
||||
|
||||
const config = provider.settingsConfig;
|
||||
|
||||
if (config && typeof config === "object") {
|
||||
const envBase =
|
||||
(config as Record<string, any>)?.env?.ANTHROPIC_BASE_URL ||
|
||||
(config as Record<string, any>)?.env?.GOOGLE_GEMINI_BASE_URL;
|
||||
if (typeof envBase === "string" && envBase.trim()) {
|
||||
return envBase;
|
||||
}
|
||||
|
||||
const baseUrl = (config as Record<string, any>)?.config;
|
||||
|
||||
if (typeof baseUrl === "string" && baseUrl.includes("base_url")) {
|
||||
const extractedBaseUrl = extractCodexBaseUrl(baseUrl);
|
||||
if (extractedBaseUrl) {
|
||||
return extractedBaseUrl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return fallbackText;
|
||||
};
|
||||
|
||||
export function ProviderCard({
|
||||
provider,
|
||||
isCurrent,
|
||||
appId,
|
||||
isInConfig = true,
|
||||
isOmo = false,
|
||||
isOmoSlim = false,
|
||||
onSwitch,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onRemoveFromConfig,
|
||||
onDisableOmo,
|
||||
onDisableOmoSlim,
|
||||
onConfigureUsage,
|
||||
onOpenWebsite,
|
||||
onDuplicate,
|
||||
onTest,
|
||||
onOpenTerminal,
|
||||
isTesting,
|
||||
isProxyRunning,
|
||||
isProxyTakeover = false,
|
||||
dragHandleProps,
|
||||
isAutoFailoverEnabled = false,
|
||||
failoverPriority,
|
||||
isInFailoverQueue = false,
|
||||
onToggleFailover,
|
||||
activeProviderId,
|
||||
// OpenClaw: default model
|
||||
isDefaultModel,
|
||||
onSetAsDefault,
|
||||
}: ProviderCardProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// OMO and OMO Slim share the same card behavior
|
||||
const isAnyOmo = isOmo || isOmoSlim;
|
||||
const handleDisableAnyOmo = isOmoSlim ? onDisableOmoSlim : onDisableOmo;
|
||||
const isAdditiveMode = appId === "opencode" && !isAnyOmo;
|
||||
|
||||
const { data: health } = useProviderHealth(provider.id, appId);
|
||||
|
||||
const fallbackUrlText = t("provider.notConfigured", {
|
||||
defaultValue: "未配置接口地址",
|
||||
});
|
||||
|
||||
const displayUrl = useMemo(() => {
|
||||
return extractApiUrl(provider, fallbackUrlText);
|
||||
}, [provider, fallbackUrlText]);
|
||||
|
||||
const isClickableUrl = useMemo(() => {
|
||||
if (provider.notes?.trim()) {
|
||||
return false;
|
||||
}
|
||||
if (displayUrl === fallbackUrlText) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}, [provider.notes, displayUrl, fallbackUrlText]);
|
||||
|
||||
const usageEnabled = provider.meta?.usage_script?.enabled ?? false;
|
||||
const isOfficial = isOfficialProvider(provider, appId);
|
||||
const supportsOfficialSubscription =
|
||||
isOfficial && ["claude", "codex", "gemini"].includes(appId);
|
||||
const isOfficialSubscriptionUsage =
|
||||
provider.meta?.usage_script?.templateType ===
|
||||
TEMPLATE_TYPES.OFFICIAL_SUBSCRIPTION;
|
||||
const officialSubscriptionEnabled =
|
||||
supportsOfficialSubscription && usageEnabled && isOfficialSubscriptionUsage;
|
||||
// 官方判定只认显式 category === "official"（SSOT），不回退 isOfficial 的空字段启发式。
|
||||
// 理由（此判定曾在「纯 category ↔ category+isOfficial 回退」间反复，结论钉死于此）：
|
||||
// 1) 封号保护是高代价决策，不该建立在「base_url/key 缺失」这种脆弱信号上——它无法区分
|
||||
// 「想直连官方」与「自定义但还没填完」，两者都表现为字段为空，必然误伤后者。
|
||||
// 2) 启发式在 UI 多拦的部分，执行层 useProviderActions.ts 也只认 category === "official"、
|
||||
// 并不兑现（绕过 UI 即可切换）→ 属虚保护，却以误伤 category 缺失的自定义供应商为代价。
|
||||
// 3) 预设导入的官方一定带 category="official"，category 缺失的「真官方」现实中≈不存在。
|
||||
// 真官方就该有显式 category；手动新建官方应引导标注，而不是靠空字段猜。
|
||||
const isOfficialBlockedByProxy =
|
||||
isProxyTakeover && provider.category === "official";
|
||||
const isCopilot =
|
||||
provider.meta?.providerType === PROVIDER_TYPES.GITHUB_COPILOT ||
|
||||
provider.meta?.usage_script?.templateType === "github_copilot";
|
||||
// Hermes v12+ overlay entries live under the `providers:` dict and are
|
||||
// read-only here — writes have to go through Hermes Web UI.
|
||||
const isHermesReadOnly =
|
||||
appId === "hermes" && isHermesReadOnlyProvider(provider.settingsConfig);
|
||||
const isCodexOauth =
|
||||
provider.meta?.providerType === PROVIDER_TYPES.CODEX_OAUTH;
|
||||
const codexNeedsRouting = useMemo(() => {
|
||||
if (appId !== "codex" || provider.category === "official") return false;
|
||||
if (
|
||||
provider.meta?.apiFormat === "openai_chat" ||
|
||||
provider.meta?.apiFormat === "anthropic"
|
||||
)
|
||||
return true;
|
||||
const config = (provider.settingsConfig as Record<string, any>)?.config;
|
||||
return (
|
||||
typeof config === "string" &&
|
||||
(isCodexChatWireApi(extractCodexWireApi(config)) ||
|
||||
isCodexAnthropicWireApi(extractCodexWireApi(config)))
|
||||
);
|
||||
}, [
|
||||
appId,
|
||||
provider.category,
|
||||
provider.meta?.apiFormat,
|
||||
(provider.settingsConfig as Record<string, any>)?.config,
|
||||
]);
|
||||
// 获取用量数据以判断是否有多套餐
|
||||
// 累加模式应用（OpenCode/OpenClaw/Hermes）：使用 isInConfig 代替 isCurrent
|
||||
const shouldAutoQuery =
|
||||
appId === "opencode" || appId === "openclaw" || appId === "hermes"
|
||||
? isInConfig
|
||||
: isCurrent;
|
||||
const autoQueryInterval = shouldAutoQuery
|
||||
? provider.meta?.usage_script?.autoQueryInterval || 0
|
||||
: 0;
|
||||
|
||||
const { data: usage } = useUsageQuery(provider.id, appId, {
|
||||
enabled: usageEnabled && !isOfficial && !isOfficialSubscriptionUsage,
|
||||
autoQueryInterval,
|
||||
});
|
||||
|
||||
const isTokenPlan =
|
||||
provider.meta?.usage_script?.templateType === "token_plan";
|
||||
const hasMultiplePlans =
|
||||
usage?.success && usage.data && usage.data.length > 1 && !isTokenPlan;
|
||||
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (hasMultiplePlans) {
|
||||
setIsExpanded(true);
|
||||
}
|
||||
}, [hasMultiplePlans]);
|
||||
|
||||
const handleOpenWebsite = () => {
|
||||
if (!isClickableUrl) {
|
||||
return;
|
||||
}
|
||||
onOpenWebsite(displayUrl);
|
||||
};
|
||||
|
||||
// 判断是否是"当前使用中"的供应商
|
||||
// - OMO/OMO Slim 供应商：使用 isCurrent
|
||||
// - OpenClaw：使用默认模型归属的 provider 作为当前项（蓝色边框）
|
||||
// - OpenCode（非 OMO）：不存在"当前"概念，返回 false
|
||||
// - 故障转移模式：代理实际使用的供应商（activeProviderId）
|
||||
// - 普通模式：isCurrent
|
||||
const isActiveProvider = isAnyOmo
|
||||
? isCurrent
|
||||
: appId === "openclaw"
|
||||
? Boolean(isDefaultModel)
|
||||
: appId === "opencode"
|
||||
? false
|
||||
: isAutoFailoverEnabled
|
||||
? activeProviderId === provider.id
|
||||
: isCurrent;
|
||||
|
||||
const shouldUseGreen = !isAnyOmo && isProxyTakeover && isActiveProvider;
|
||||
const hasPersistentConfigHighlight = isAdditiveMode && isInConfig;
|
||||
const shouldUseBlue =
|
||||
(isAnyOmo && isActiveProvider) ||
|
||||
(!isAnyOmo &&
|
||||
!isProxyTakeover &&
|
||||
(isActiveProvider || hasPersistentConfigHighlight));
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative overflow-hidden rounded-xl border border-border p-4 transition-all duration-300",
|
||||
"bg-card text-card-foreground group",
|
||||
isAutoFailoverEnabled || isProxyTakeover
|
||||
? "hover:border-emerald-500/50"
|
||||
: "hover:border-border-active",
|
||||
shouldUseGreen &&
|
||||
"border-emerald-500/60 shadow-sm shadow-emerald-500/10",
|
||||
shouldUseBlue && "border-blue-500/60 shadow-sm shadow-blue-500/10",
|
||||
!(isActiveProvider || hasPersistentConfigHighlight) &&
|
||||
"hover:shadow-sm",
|
||||
dragHandleProps?.isDragging &&
|
||||
"cursor-grabbing border-primary shadow-lg scale-105 z-10",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-0 bg-gradient-to-r to-transparent transition-opacity duration-500 pointer-events-none",
|
||||
shouldUseGreen && "from-emerald-500/10",
|
||||
shouldUseBlue && "from-blue-500/10",
|
||||
!shouldUseGreen && !shouldUseBlue && "from-primary/10",
|
||||
isActiveProvider || hasPersistentConfigHighlight
|
||||
? "opacity-100"
|
||||
: "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"-ml-1.5 flex-shrink-0 cursor-grab active:cursor-grabbing p-1.5",
|
||||
"text-muted-foreground/50 hover:text-muted-foreground transition-colors",
|
||||
dragHandleProps?.isDragging && "cursor-grabbing",
|
||||
)}
|
||||
aria-label={t("provider.dragHandle")}
|
||||
{...(dragHandleProps?.attributes ?? {})}
|
||||
{...(dragHandleProps?.listeners ?? {})}
|
||||
>
|
||||
<GripVertical className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="h-8 w-8 flex-shrink-0 rounded-lg bg-muted flex items-center justify-center border border-border group-hover:scale-105 transition-transform duration-300">
|
||||
<ProviderIcon
|
||||
icon={provider.icon}
|
||||
name={provider.name}
|
||||
color={provider.iconColor}
|
||||
size={20}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<div className="flex flex-wrap items-center gap-2 min-h-7">
|
||||
<h3 className="text-base font-semibold leading-none">
|
||||
{provider.name}
|
||||
</h3>
|
||||
|
||||
{isOmo && (
|
||||
<span className="inline-flex items-center rounded-md bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold text-violet-700 dark:bg-violet-900/40 dark:text-violet-300">
|
||||
OMO
|
||||
</span>
|
||||
)}
|
||||
|
||||
{isOmoSlim && (
|
||||
<span className="inline-flex items-center rounded-md bg-indigo-100 px-1.5 py-0.5 text-[10px] font-semibold text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300">
|
||||
Slim
|
||||
</span>
|
||||
)}
|
||||
|
||||
{appId === "claude-desktop" &&
|
||||
provider.category !== "official" &&
|
||||
provider.meta?.claudeDesktopMode === "proxy" && (
|
||||
<span className="inline-flex items-center rounded-md bg-sky-100 px-1.5 py-0.5 text-[10px] font-semibold text-sky-700 dark:bg-sky-900/40 dark:text-sky-300">
|
||||
{t("claudeDesktop.modeProxy", {
|
||||
defaultValue: "需要路由",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{appId === "claude" &&
|
||||
provider.category !== "official" &&
|
||||
provider.meta?.apiFormat &&
|
||||
provider.meta.apiFormat !== "anthropic" && (
|
||||
<span className="inline-flex items-center rounded-md bg-sky-100 px-1.5 py-0.5 text-[10px] font-semibold text-sky-700 dark:bg-sky-900/40 dark:text-sky-300">
|
||||
{t("claudeCode.needsRouting", {
|
||||
defaultValue: "需要路由",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{codexNeedsRouting && (
|
||||
<span className="inline-flex items-center rounded-md bg-sky-100 px-1.5 py-0.5 text-[10px] font-semibold text-sky-700 dark:bg-sky-900/40 dark:text-sky-300">
|
||||
{t("codex.needsRouting", {
|
||||
defaultValue: "需要路由",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{appId === "claude" && provider.category === "official" && (
|
||||
<span className="inline-flex items-center rounded-md bg-slate-200 px-1.5 py-0.5 text-[10px] font-semibold text-slate-700 dark:bg-slate-700/60 dark:text-slate-200">
|
||||
{t("claudeCode.noRoutingSupport", {
|
||||
defaultValue: "不支持路由",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{appId === "codex" && provider.category === "official" && (
|
||||
<span className="inline-flex items-center rounded-md bg-slate-200 px-1.5 py-0.5 text-[10px] font-semibold text-slate-700 dark:bg-slate-700/60 dark:text-slate-200">
|
||||
{t("codex.noRoutingSupport", {
|
||||
defaultValue: "不支持路由",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{isProxyRunning && isInFailoverQueue && health && (
|
||||
<ProviderHealthBadge
|
||||
consecutiveFailures={health.consecutive_failures}
|
||||
isHealthy={health.is_healthy}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isAutoFailoverEnabled &&
|
||||
isInFailoverQueue &&
|
||||
failoverPriority && (
|
||||
<FailoverPriorityBadge priority={failoverPriority} />
|
||||
)}
|
||||
|
||||
{provider.category === "third_party" &&
|
||||
provider.meta?.isPartner && (
|
||||
<span
|
||||
className="text-yellow-500 dark:text-yellow-400"
|
||||
title={t("provider.officialPartner", {
|
||||
defaultValue: "官方合作伙伴",
|
||||
})}
|
||||
>
|
||||
⭐
|
||||
</span>
|
||||
)}
|
||||
|
||||
{isHermesReadOnly && (
|
||||
<span
|
||||
className="inline-flex items-center rounded-md bg-slate-200 px-1.5 py-0.5 text-[10px] font-semibold text-slate-700 dark:bg-slate-700/60 dark:text-slate-200"
|
||||
title={t("provider.managedByHermesHint", {
|
||||
defaultValue: "由 Hermes 管理，请在 Hermes Web UI 中编辑",
|
||||
})}
|
||||
>
|
||||
{t("provider.managedByHermes", {
|
||||
defaultValue: "Hermes Managed",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{displayUrl && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleOpenWebsite}
|
||||
className={cn(
|
||||
"inline-flex max-w-full items-center overflow-hidden text-left text-sm",
|
||||
isClickableUrl
|
||||
? "text-blue-500 transition-colors hover:underline dark:text-blue-400 cursor-pointer"
|
||||
: "text-muted-foreground cursor-default",
|
||||
)}
|
||||
title={displayUrl}
|
||||
disabled={!isClickableUrl}
|
||||
>
|
||||
<span className="min-w-0 truncate">{displayUrl}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center ml-auto min-w-0 gap-3">
|
||||
<div className="ml-auto">
|
||||
<div className="flex items-center gap-1">
|
||||
{isCopilot ? (
|
||||
<CopilotQuotaFooter
|
||||
meta={provider.meta}
|
||||
inline={true}
|
||||
isCurrent={isCurrent}
|
||||
/>
|
||||
) : isCodexOauth ? (
|
||||
<CodexOauthQuotaFooter
|
||||
meta={provider.meta}
|
||||
inline={true}
|
||||
isCurrent={isCurrent}
|
||||
/>
|
||||
) : isOfficial ? (
|
||||
officialSubscriptionEnabled ? (
|
||||
<SubscriptionQuotaFooter
|
||||
appId={appId}
|
||||
inline={true}
|
||||
isCurrent={isCurrent}
|
||||
autoQueryInterval={
|
||||
provider.meta?.usage_script?.autoQueryInterval ?? 0
|
||||
}
|
||||
/>
|
||||
) : null
|
||||
) : hasMultiplePlans ? (
|
||||
<div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
<span className="font-medium">
|
||||
{t("usage.multiplePlans", {
|
||||
count: usage?.data?.length || 0,
|
||||
defaultValue: `${usage?.data?.length || 0} 个套餐`,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<UsageFooter
|
||||
provider={provider}
|
||||
providerId={provider.id}
|
||||
appId={appId}
|
||||
usageEnabled={usageEnabled}
|
||||
isCurrent={isCurrent}
|
||||
isInConfig={isInConfig}
|
||||
inline={true}
|
||||
/>
|
||||
)}
|
||||
{hasMultiplePlans && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsExpanded(!isExpanded);
|
||||
}}
|
||||
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-500 dark:text-gray-400 flex-shrink-0"
|
||||
title={
|
||||
isExpanded
|
||||
? t("usage.collapse", { defaultValue: "收起" })
|
||||
: t("usage.expand", { defaultValue: "展开" })
|
||||
}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronUp size={14} />
|
||||
) : (
|
||||
<ChevronDown size={14} />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0 opacity-0 pointer-events-none group-hover:opacity-100 group-focus-within:opacity-100 group-hover:pointer-events-auto group-focus-within:pointer-events-auto transition-opacity duration-200">
|
||||
<ProviderActions
|
||||
appId={appId}
|
||||
isCurrent={isCurrent}
|
||||
isInConfig={isInConfig}
|
||||
isTesting={isTesting}
|
||||
isProxyTakeover={isProxyTakeover}
|
||||
isOfficialBlockedByProxy={isOfficialBlockedByProxy}
|
||||
isReadOnly={isHermesReadOnly}
|
||||
isOmo={isAnyOmo}
|
||||
onSwitch={() => onSwitch(provider)}
|
||||
onEdit={() => onEdit(provider)}
|
||||
onDuplicate={() => onDuplicate(provider)}
|
||||
onTest={
|
||||
// 连通检测对第三方/自定义/Copilot/Codex-OAuth 供应商开放（这些正是旧的
|
||||
// 真实请求探测会误报、而可达性探测能正确处理的对象）。官方供应商
|
||||
// (category === "official") 一律隐藏：它们 base_url 故意留空、走客户端
|
||||
// 默认/OAuth 端点，cc-switch 没有可靠的探测目标（尤其 Claude Desktop
|
||||
// 官方是原生 1P 模式，根本不在请求路径上）。
|
||||
onTest && provider.category !== "official"
|
||||
? () => onTest(provider)
|
||||
: undefined
|
||||
}
|
||||
onConfigureUsage={
|
||||
(isOfficial && !supportsOfficialSubscription) ||
|
||||
isCopilot ||
|
||||
isCodexOauth
|
||||
? undefined
|
||||
: () => onConfigureUsage(provider)
|
||||
}
|
||||
onDelete={() => onDelete(provider)}
|
||||
onRemoveFromConfig={
|
||||
onRemoveFromConfig
|
||||
? () => onRemoveFromConfig(provider)
|
||||
: undefined
|
||||
}
|
||||
onDisableOmo={handleDisableAnyOmo}
|
||||
onOpenTerminal={
|
||||
onOpenTerminal ? () => onOpenTerminal(provider) : undefined
|
||||
}
|
||||
isAutoFailoverEnabled={isAutoFailoverEnabled}
|
||||
isInFailoverQueue={isInFailoverQueue}
|
||||
onToggleFailover={onToggleFailover}
|
||||
// OpenClaw: default model
|
||||
isDefaultModel={isDefaultModel}
|
||||
onSetAsDefault={onSetAsDefault}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isExpanded && hasMultiplePlans && (
|
||||
<div className="mt-4 pt-4 border-t border-border-default">
|
||||
<UsageFooter
|
||||
provider={provider}
|
||||
providerId={provider.id}
|
||||
appId={appId}
|
||||
usageEnabled={usageEnabled}
|
||||
isCurrent={isCurrent}
|
||||
isInConfig={isInConfig}
|
||||
inline={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { Download, Users } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { AppId } from "@/lib/api/types";
|
||||
|
||||
interface ProviderEmptyStateProps {
|
||||
appId: AppId;
|
||||
onCreate?: () => void;
|
||||
onImport?: () => void;
|
||||
}
|
||||
|
||||
export function ProviderEmptyState({
|
||||
appId,
|
||||
onCreate,
|
||||
onImport,
|
||||
}: ProviderEmptyStateProps) {
|
||||
const { t } = useTranslation();
|
||||
const showSnippetHint =
|
||||
appId === "claude" || appId === "codex" || appId === "gemini";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border p-10 text-center">
|
||||
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
|
||||
<Users className="h-7 w-7 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold">{t("provider.noProviders")}</h3>
|
||||
<p className="mt-2 max-w-lg text-sm text-muted-foreground">
|
||||
{t("provider.noProvidersDescription")}
|
||||
</p>
|
||||
{showSnippetHint && (
|
||||
<p className="mt-1 max-w-lg text-sm text-muted-foreground">
|
||||
{t("provider.noProvidersDescriptionSnippet")}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-6 flex flex-col gap-2">
|
||||
{onImport && (
|
||||
<Button onClick={onImport}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{appId === "claude-desktop"
|
||||
? t("provider.importFromClaude", {
|
||||
defaultValue: "将 Claude Code 中已有的供应商导入",
|
||||
})
|
||||
: t("provider.importCurrent")}
|
||||
</Button>
|
||||
)}
|
||||
{onCreate && (
|
||||
<Button variant={onImport ? "outline" : "default"} onClick={onCreate}>
|
||||
{t("provider.addProvider")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ProviderHealthStatus } from "@/types/proxy";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface ProviderHealthBadgeProps {
|
||||
consecutiveFailures: number;
|
||||
isHealthy?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 供应商健康状态徽章
|
||||
* 根据连续失败次数显示不同颜色的状态指示器
|
||||
*/
|
||||
export function ProviderHealthBadge({
|
||||
consecutiveFailures,
|
||||
isHealthy,
|
||||
className,
|
||||
}: ProviderHealthBadgeProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// 根据失败次数计算状态
|
||||
const getStatus = () => {
|
||||
if (consecutiveFailures === 0) {
|
||||
return {
|
||||
labelKey: "health.operational",
|
||||
labelFallback: "正常",
|
||||
status: ProviderHealthStatus.Healthy,
|
||||
color: "bg-green-500",
|
||||
// 使用更深/柔和的背景色，去除可能的白色内容感
|
||||
bgColor: "bg-green-500/10",
|
||||
textColor: "text-green-600 dark:text-green-400",
|
||||
};
|
||||
} else if (isHealthy !== false) {
|
||||
return {
|
||||
labelKey: "health.degraded",
|
||||
labelFallback: "降级",
|
||||
status: ProviderHealthStatus.Degraded,
|
||||
color: "bg-yellow-500",
|
||||
bgColor: "bg-yellow-500/10",
|
||||
textColor: "text-yellow-600 dark:text-yellow-400",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
labelKey: "health.circuitOpen",
|
||||
labelFallback: "熔断",
|
||||
status: ProviderHealthStatus.Failed,
|
||||
color: "bg-red-500",
|
||||
bgColor: "bg-red-500/10",
|
||||
textColor: "text-red-600 dark:text-red-400",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const statusConfig = getStatus();
|
||||
const label = t(statusConfig.labelKey, {
|
||||
defaultValue: statusConfig.labelFallback,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium",
|
||||
statusConfig.bgColor,
|
||||
statusConfig.textColor,
|
||||
className,
|
||||
)}
|
||||
title={t("health.consecutiveFailures", {
|
||||
count: consecutiveFailures,
|
||||
defaultValue: `连续失败 ${consecutiveFailures} 次`,
|
||||
})}
|
||||
>
|
||||
<div className={cn("w-2 h-2 rounded-full", statusConfig.color)} />
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,654 @@
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { DndContext, closestCenter } from "@dnd-kit/core";
|
||||
import {
|
||||
SortableContext,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable";
|
||||
import {
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type CSSProperties,
|
||||
} from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { AlertTriangle, Search, X } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import type { Provider } from "@/types";
|
||||
import type { AppId } from "@/lib/api";
|
||||
import { providersApi } from "@/lib/api/providers";
|
||||
import { useDragSort } from "@/hooks/useDragSort";
|
||||
import {
|
||||
useOpenClawLiveProviderIds,
|
||||
useOpenClawDefaultModel,
|
||||
} from "@/hooks/useOpenClaw";
|
||||
import {
|
||||
useHermesLiveProviderIds,
|
||||
useHermesModelConfig,
|
||||
} from "@/hooks/useHermes";
|
||||
import { useStreamCheck } from "@/hooks/useStreamCheck";
|
||||
import { ProviderCard } from "@/components/providers/ProviderCard";
|
||||
import { ProviderEmptyState } from "@/components/providers/ProviderEmptyState";
|
||||
import {
|
||||
useAutoFailoverEnabled,
|
||||
useFailoverQueue,
|
||||
useAddToFailoverQueue,
|
||||
useRemoveFromFailoverQueue,
|
||||
} from "@/lib/query/failover";
|
||||
import {
|
||||
useCurrentOmoProviderId,
|
||||
useCurrentOmoSlimProviderId,
|
||||
} from "@/lib/query/omo";
|
||||
import { useCallback } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { isTextEditableTarget } from "@/utils/domUtils";
|
||||
|
||||
interface ProviderListProps {
|
||||
providers: Record<string, Provider>;
|
||||
currentProviderId: string;
|
||||
appId: AppId;
|
||||
onSwitch: (provider: Provider) => void;
|
||||
onEdit: (provider: Provider) => void;
|
||||
onDelete: (provider: Provider) => void;
|
||||
onRemoveFromConfig?: (provider: Provider) => void;
|
||||
onDisableOmo?: () => void;
|
||||
onDisableOmoSlim?: () => void;
|
||||
onDuplicate: (provider: Provider) => void;
|
||||
onConfigureUsage?: (provider: Provider) => void;
|
||||
onOpenWebsite: (url: string) => void;
|
||||
onOpenTerminal?: (provider: Provider) => void;
|
||||
onCreate?: () => void;
|
||||
isLoading?: boolean;
|
||||
isProxyRunning?: boolean; // 代理服务运行状态
|
||||
isProxyTakeover?: boolean; // 代理接管模式（Live配置已被接管）
|
||||
activeProviderId?: string; // 代理当前实际使用的供应商 ID（用于故障转移模式下标注绿色边框）
|
||||
onSetAsDefault?: (provider: Provider) => void; // OpenClaw: set as default model
|
||||
}
|
||||
|
||||
export function ProviderList({
|
||||
providers,
|
||||
currentProviderId,
|
||||
appId,
|
||||
onSwitch,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onRemoveFromConfig,
|
||||
onDisableOmo,
|
||||
onDisableOmoSlim,
|
||||
onDuplicate,
|
||||
onConfigureUsage,
|
||||
onOpenWebsite,
|
||||
onOpenTerminal,
|
||||
onCreate,
|
||||
isLoading = false,
|
||||
isProxyRunning = false,
|
||||
isProxyTakeover = false,
|
||||
activeProviderId,
|
||||
onSetAsDefault,
|
||||
}: ProviderListProps) {
|
||||
const { t } = useTranslation();
|
||||
const { checkProvider, isChecking } = useStreamCheck(appId);
|
||||
const { sortedProviders, sensors, handleDragEnd } = useDragSort(
|
||||
providers,
|
||||
appId,
|
||||
);
|
||||
|
||||
const { data: opencodeLiveIds } = useQuery({
|
||||
queryKey: ["opencodeLiveProviderIds"],
|
||||
queryFn: () => providersApi.getOpenCodeLiveProviderIds(),
|
||||
enabled: appId === "opencode",
|
||||
});
|
||||
|
||||
// OpenClaw: 查询 live 配置中的供应商 ID 列表，用于判断 isInConfig
|
||||
const { data: openclawLiveIds } = useOpenClawLiveProviderIds(
|
||||
appId === "openclaw",
|
||||
);
|
||||
|
||||
// Hermes: 查询 live 配置中的供应商 ID 列表，用于判断 isInConfig
|
||||
const { data: hermesLiveIds } = useHermesLiveProviderIds(appId === "hermes");
|
||||
|
||||
// Hermes: 读取当前 model.provider，用于判断哪个供应商是"当前激活"（高亮）
|
||||
const { data: hermesModelConfig } = useHermesModelConfig(appId === "hermes");
|
||||
const hermesCurrentProviderId = hermesModelConfig?.provider;
|
||||
|
||||
// 判断供应商是否已添加到配置（累加模式应用：OpenCode/OpenClaw/Hermes）
|
||||
const isProviderInConfig = useCallback(
|
||||
(providerId: string): boolean => {
|
||||
if (appId === "opencode") {
|
||||
return opencodeLiveIds?.includes(providerId) ?? false;
|
||||
}
|
||||
if (appId === "openclaw") {
|
||||
return openclawLiveIds?.includes(providerId) ?? false;
|
||||
}
|
||||
if (appId === "hermes") {
|
||||
return hermesLiveIds?.includes(providerId) ?? false;
|
||||
}
|
||||
return true; // 其他应用始终返回 true
|
||||
},
|
||||
[appId, opencodeLiveIds, openclawLiveIds, hermesLiveIds],
|
||||
);
|
||||
|
||||
// OpenClaw: query default model to determine which provider is default
|
||||
const { data: openclawDefaultModel } = useOpenClawDefaultModel(
|
||||
appId === "openclaw",
|
||||
);
|
||||
|
||||
const isProviderDefaultModel = useCallback(
|
||||
(providerId: string): boolean => {
|
||||
if (appId !== "openclaw" || !openclawDefaultModel?.primary) return false;
|
||||
return openclawDefaultModel.primary.startsWith(providerId + "/");
|
||||
},
|
||||
[appId, openclawDefaultModel],
|
||||
);
|
||||
|
||||
// 故障转移相关
|
||||
const { data: isAutoFailoverEnabled } = useAutoFailoverEnabled(appId);
|
||||
const { data: failoverQueue } = useFailoverQueue(appId);
|
||||
const addToQueue = useAddToFailoverQueue();
|
||||
const removeFromQueue = useRemoveFromFailoverQueue();
|
||||
|
||||
const isFailoverModeActive =
|
||||
isProxyTakeover === true && isAutoFailoverEnabled === true;
|
||||
|
||||
const isOpenCode = appId === "opencode";
|
||||
const { data: currentOmoId } = useCurrentOmoProviderId(isOpenCode);
|
||||
const { data: currentOmoSlimId } = useCurrentOmoSlimProviderId(isOpenCode);
|
||||
|
||||
const getFailoverPriority = useCallback(
|
||||
(providerId: string): number | undefined => {
|
||||
if (!isFailoverModeActive || !failoverQueue) return undefined;
|
||||
const index = failoverQueue.findIndex(
|
||||
(item) => item.providerId === providerId,
|
||||
);
|
||||
return index >= 0 ? index + 1 : undefined;
|
||||
},
|
||||
[isFailoverModeActive, failoverQueue],
|
||||
);
|
||||
|
||||
const isInFailoverQueue = useCallback(
|
||||
(providerId: string): boolean => {
|
||||
if (!isFailoverModeActive || !failoverQueue) return false;
|
||||
return failoverQueue.some((item) => item.providerId === providerId);
|
||||
},
|
||||
[isFailoverModeActive, failoverQueue],
|
||||
);
|
||||
|
||||
const handleToggleFailover = useCallback(
|
||||
(providerId: string, enabled: boolean) => {
|
||||
if (enabled) {
|
||||
addToQueue.mutate({ appType: appId, providerId });
|
||||
} else {
|
||||
removeFromQueue.mutate({ appType: appId, providerId });
|
||||
}
|
||||
},
|
||||
[appId, addToQueue, removeFromQueue],
|
||||
);
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
const { data: claudeDesktopStatus } = useQuery({
|
||||
queryKey: ["claudeDesktopStatus"],
|
||||
queryFn: () => providersApi.getClaudeDesktopStatus(),
|
||||
enabled: appId === "claude-desktop",
|
||||
refetchInterval: appId === "claude-desktop" ? 5000 : false,
|
||||
});
|
||||
|
||||
// 连通性检查不发真实请求、无封号/计费风险，直接执行（无需确认弹窗）。
|
||||
const handleTest = useCallback(
|
||||
(provider: Provider) => {
|
||||
checkProvider(provider.id, provider.name);
|
||||
},
|
||||
[checkProvider],
|
||||
);
|
||||
|
||||
// Import current live config as default provider
|
||||
const queryClient = useQueryClient();
|
||||
const importMutation = useMutation({
|
||||
mutationFn: async (): Promise<boolean> => {
|
||||
if (appId === "opencode") {
|
||||
const count = await providersApi.importOpenCodeFromLive();
|
||||
return count > 0;
|
||||
}
|
||||
if (appId === "openclaw") {
|
||||
const count = await providersApi.importOpenClawFromLive();
|
||||
return count > 0;
|
||||
}
|
||||
if (appId === "hermes") {
|
||||
const count = await providersApi.importHermesFromLive();
|
||||
return count > 0;
|
||||
}
|
||||
if (appId === "claude-desktop") {
|
||||
const count = await providersApi.importClaudeDesktopFromClaude();
|
||||
return count > 0;
|
||||
}
|
||||
return providersApi.importDefault(appId);
|
||||
},
|
||||
onSuccess: (imported) => {
|
||||
if (imported) {
|
||||
queryClient.invalidateQueries({ queryKey: ["providers", appId] });
|
||||
if (appId === "claude-desktop") {
|
||||
queryClient.invalidateQueries({ queryKey: ["claudeDesktopStatus"] });
|
||||
}
|
||||
toast.success(t("provider.importCurrentDescription"));
|
||||
} else {
|
||||
toast.info(t("provider.noProviders"));
|
||||
}
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast.error(error.message);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.defaultPrevented) return;
|
||||
|
||||
const key = event.key.toLowerCase();
|
||||
if ((event.metaKey || event.ctrlKey) && key === "f") {
|
||||
// 正在输入框/可编辑区域中时不抢占 Ctrl+F（例如添加供应商表单里
|
||||
// ProviderPresetSelector 的搜索框），避免与其同名快捷键冲突。
|
||||
if (isTextEditableTarget(document.activeElement)) return;
|
||||
event.preventDefault();
|
||||
setIsSearchOpen(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === "escape") {
|
||||
setIsSearchOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
globalThis.addEventListener("keydown", handleKeyDown);
|
||||
return () => globalThis.removeEventListener("keydown", handleKeyDown);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSearchOpen) {
|
||||
const frame = requestAnimationFrame(() => {
|
||||
searchInputRef.current?.focus();
|
||||
searchInputRef.current?.select();
|
||||
});
|
||||
return () => cancelAnimationFrame(frame);
|
||||
}
|
||||
}, [isSearchOpen]);
|
||||
|
||||
const filteredProviders = useMemo(() => {
|
||||
const keyword = searchTerm.trim().toLowerCase();
|
||||
if (!keyword) return sortedProviders;
|
||||
return sortedProviders.filter((provider) => {
|
||||
const fields = [provider.name, provider.notes, provider.websiteUrl];
|
||||
return fields.some((field) =>
|
||||
field?.toString().toLowerCase().includes(keyword),
|
||||
);
|
||||
});
|
||||
}, [searchTerm, sortedProviders]);
|
||||
|
||||
const claudeDesktopStatusMessages = useMemo(() => {
|
||||
if (appId !== "claude-desktop" || !claudeDesktopStatus) return [];
|
||||
|
||||
const messages: string[] = [];
|
||||
if (!claudeDesktopStatus.supported) {
|
||||
messages.push(
|
||||
t("claudeDesktop.statusUnsupported", {
|
||||
defaultValue: "当前平台暂不支持 Claude Desktop 3P 配置写入。",
|
||||
}),
|
||||
);
|
||||
return messages;
|
||||
}
|
||||
|
||||
if (claudeDesktopStatus.staleRawModels) {
|
||||
messages.push(
|
||||
t("claudeDesktop.statusStaleRawModels", {
|
||||
defaultValue:
|
||||
"Claude Desktop profile 中存在非 claude-* 模型名，新版 Claude Desktop 可能拒绝加载；重新切换当前供应商可修复。",
|
||||
}),
|
||||
);
|
||||
}
|
||||
if (claudeDesktopStatus.missingRouteMappings) {
|
||||
messages.push(
|
||||
t("claudeDesktop.statusMissingRouteMappings", {
|
||||
defaultValue:
|
||||
"当前供应商启用了模型映射，但没有有效路由；请编辑供应商并补全至少一个模型映射。",
|
||||
}),
|
||||
);
|
||||
}
|
||||
if (
|
||||
claudeDesktopStatus.mode === "proxy" &&
|
||||
!claudeDesktopStatus.gatewayTokenConfigured
|
||||
) {
|
||||
messages.push(
|
||||
t("claudeDesktop.statusGatewayTokenMissing", {
|
||||
defaultValue:
|
||||
"当前本地路由 token 尚未生成；重新切换该供应商会写入新的本地 token。",
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const expected = claudeDesktopStatus.expectedBaseUrl?.replace(/\/+$/, "");
|
||||
const actual = claudeDesktopStatus.actualBaseUrl?.replace(/\/+$/, "");
|
||||
if (expected && actual && expected !== actual) {
|
||||
messages.push(
|
||||
t("claudeDesktop.statusBaseUrlMismatch", {
|
||||
expected,
|
||||
actual,
|
||||
defaultValue:
|
||||
"Claude Desktop profile 指向的地址与当前供应商不一致；当前为 {{actual}}，应为 {{expected}}。重新切换当前供应商可修复。",
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
return messages;
|
||||
}, [appId, claudeDesktopStatus, t]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{[0, 1, 2].map((index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-full border border-dashed rounded-lg h-28 border-muted-foreground/40 bg-muted/40"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (sortedProviders.length === 0) {
|
||||
return (
|
||||
<ProviderEmptyState
|
||||
appId={appId}
|
||||
onCreate={onCreate}
|
||||
onImport={() => importMutation.mutate()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const renderProviderList = () => (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={filteredProviders.map((provider) => provider.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{filteredProviders.map((provider) => {
|
||||
const isOmo = provider.category === "omo";
|
||||
const isOmoSlim = provider.category === "omo-slim";
|
||||
const isOmoCurrent = isOmo && provider.id === (currentOmoId || "");
|
||||
const isOmoSlimCurrent =
|
||||
isOmoSlim && provider.id === (currentOmoSlimId || "");
|
||||
const isHermesCurrent =
|
||||
appId === "hermes" && hermesCurrentProviderId === provider.id;
|
||||
return (
|
||||
<SortableProviderCard
|
||||
key={provider.id}
|
||||
provider={provider}
|
||||
isCurrent={
|
||||
isOmo
|
||||
? isOmoCurrent
|
||||
: isOmoSlim
|
||||
? isOmoSlimCurrent
|
||||
: appId === "hermes"
|
||||
? isHermesCurrent
|
||||
: provider.id === currentProviderId
|
||||
}
|
||||
appId={appId}
|
||||
isInConfig={isProviderInConfig(provider.id)}
|
||||
isOmo={isOmo}
|
||||
isOmoSlim={isOmoSlim}
|
||||
onSwitch={onSwitch}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
onRemoveFromConfig={onRemoveFromConfig}
|
||||
onDisableOmo={onDisableOmo}
|
||||
onDisableOmoSlim={onDisableOmoSlim}
|
||||
onDuplicate={onDuplicate}
|
||||
onConfigureUsage={onConfigureUsage}
|
||||
onOpenWebsite={onOpenWebsite}
|
||||
onOpenTerminal={onOpenTerminal}
|
||||
onTest={handleTest}
|
||||
isTesting={isChecking(provider.id)}
|
||||
isProxyRunning={isProxyRunning}
|
||||
isProxyTakeover={isProxyTakeover}
|
||||
isAutoFailoverEnabled={isFailoverModeActive}
|
||||
failoverPriority={getFailoverPriority(provider.id)}
|
||||
isInFailoverQueue={isInFailoverQueue(provider.id)}
|
||||
onToggleFailover={(enabled) =>
|
||||
handleToggleFailover(provider.id, enabled)
|
||||
}
|
||||
activeProviderId={activeProviderId}
|
||||
// OpenClaw: default model / Hermes: model.provider === provider.id
|
||||
isDefaultModel={
|
||||
appId === "hermes"
|
||||
? isHermesCurrent
|
||||
: isProviderDefaultModel(provider.id)
|
||||
}
|
||||
onSetAsDefault={
|
||||
onSetAsDefault ? () => onSetAsDefault(provider) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mt-4 space-y-4">
|
||||
{claudeDesktopStatusMessages.length > 0 && (
|
||||
<div className="rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-900 dark:text-amber-200">
|
||||
<div className="flex items-center gap-2 font-medium">
|
||||
<AlertTriangle className="h-4 w-4 shrink-0" />
|
||||
{t("claudeDesktop.statusTitle", {
|
||||
defaultValue: "Claude Desktop 配置需要检查",
|
||||
})}
|
||||
</div>
|
||||
<ul className="mt-2 space-y-1 text-xs leading-relaxed">
|
||||
{claudeDesktopStatusMessages.map((message) => (
|
||||
<li key={message}>{message}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<AnimatePresence>
|
||||
{isSearchOpen && (
|
||||
<motion.div
|
||||
key="provider-search"
|
||||
initial={{ opacity: 0, y: -8, scale: 0.98 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: -8, scale: 0.98 }}
|
||||
transition={{ duration: 0.18, ease: "easeOut" }}
|
||||
className="fixed left-1/2 top-[6.5rem] z-40 w-[min(90vw,26rem)] -translate-x-1/2 sm:right-6 sm:left-auto sm:translate-x-0"
|
||||
>
|
||||
<div className="p-4 space-y-3 border shadow-md rounded-2xl border-white/10 bg-background/95 shadow-black/20 backdrop-blur-md">
|
||||
<div className="relative flex items-center gap-2">
|
||||
<Search className="absolute w-4 h-4 -translate-y-1/2 pointer-events-none left-3 top-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
ref={searchInputRef}
|
||||
value={searchTerm}
|
||||
onChange={(event) => setSearchTerm(event.target.value)}
|
||||
placeholder={t("provider.searchPlaceholder", {
|
||||
defaultValue: "Search name, notes, or URL...",
|
||||
})}
|
||||
aria-label={t("provider.searchAriaLabel", {
|
||||
defaultValue: "Search providers",
|
||||
})}
|
||||
className="pr-16 pl-9"
|
||||
/>
|
||||
{searchTerm && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute text-xs -translate-y-1/2 right-11 top-1/2"
|
||||
onClick={() => setSearchTerm("")}
|
||||
>
|
||||
{t("common.clear", { defaultValue: "Clear" })}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="ml-auto"
|
||||
onClick={() => setIsSearchOpen(false)}
|
||||
aria-label={t("provider.searchCloseAriaLabel", {
|
||||
defaultValue: "Close provider search",
|
||||
})}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 text-[11px] text-muted-foreground">
|
||||
<span>
|
||||
{t("provider.searchScopeHint", {
|
||||
defaultValue: "Matches provider name, notes, and URL.",
|
||||
})}
|
||||
</span>
|
||||
<span>
|
||||
{t("provider.searchCloseHint", {
|
||||
defaultValue: "Press Esc to close",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{filteredProviders.length === 0 ? (
|
||||
<div className="px-6 py-8 text-sm text-center border border-dashed rounded-lg border-border text-muted-foreground">
|
||||
{t("provider.noSearchResults", {
|
||||
defaultValue: "No providers match your search.",
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
renderProviderList()
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface SortableProviderCardProps {
|
||||
provider: Provider;
|
||||
isCurrent: boolean;
|
||||
appId: AppId;
|
||||
isInConfig: boolean;
|
||||
isOmo: boolean;
|
||||
isOmoSlim: boolean;
|
||||
onSwitch: (provider: Provider) => void;
|
||||
onEdit: (provider: Provider) => void;
|
||||
onDelete: (provider: Provider) => void;
|
||||
onRemoveFromConfig?: (provider: Provider) => void;
|
||||
onDisableOmo?: () => void;
|
||||
onDisableOmoSlim?: () => void;
|
||||
onDuplicate: (provider: Provider) => void;
|
||||
onConfigureUsage?: (provider: Provider) => void;
|
||||
onOpenWebsite: (url: string) => void;
|
||||
onOpenTerminal?: (provider: Provider) => void;
|
||||
onTest?: (provider: Provider) => void;
|
||||
isTesting: boolean;
|
||||
isProxyRunning: boolean;
|
||||
isProxyTakeover: boolean;
|
||||
isAutoFailoverEnabled: boolean;
|
||||
failoverPriority?: number;
|
||||
isInFailoverQueue: boolean;
|
||||
onToggleFailover: (enabled: boolean) => void;
|
||||
activeProviderId?: string;
|
||||
// OpenClaw: default model
|
||||
isDefaultModel?: boolean;
|
||||
onSetAsDefault?: () => void;
|
||||
}
|
||||
|
||||
function SortableProviderCard({
|
||||
provider,
|
||||
isCurrent,
|
||||
appId,
|
||||
isInConfig,
|
||||
isOmo,
|
||||
isOmoSlim,
|
||||
onSwitch,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onRemoveFromConfig,
|
||||
onDisableOmo,
|
||||
onDisableOmoSlim,
|
||||
onDuplicate,
|
||||
onConfigureUsage,
|
||||
onOpenWebsite,
|
||||
onOpenTerminal,
|
||||
onTest,
|
||||
isTesting,
|
||||
isProxyRunning,
|
||||
isProxyTakeover,
|
||||
isAutoFailoverEnabled,
|
||||
failoverPriority,
|
||||
isInFailoverQueue,
|
||||
onToggleFailover,
|
||||
activeProviderId,
|
||||
isDefaultModel,
|
||||
onSetAsDefault,
|
||||
}: SortableProviderCardProps) {
|
||||
const {
|
||||
setNodeRef,
|
||||
attributes,
|
||||
listeners,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: provider.id });
|
||||
|
||||
const style: CSSProperties = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} style={style}>
|
||||
<ProviderCard
|
||||
provider={provider}
|
||||
isCurrent={isCurrent}
|
||||
appId={appId}
|
||||
isInConfig={isInConfig}
|
||||
isOmo={isOmo}
|
||||
isOmoSlim={isOmoSlim}
|
||||
onSwitch={onSwitch}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
onRemoveFromConfig={onRemoveFromConfig}
|
||||
onDisableOmo={onDisableOmo}
|
||||
onDisableOmoSlim={onDisableOmoSlim}
|
||||
onDuplicate={onDuplicate}
|
||||
onConfigureUsage={
|
||||
onConfigureUsage ? (item) => onConfigureUsage(item) : () => undefined
|
||||
}
|
||||
onOpenWebsite={onOpenWebsite}
|
||||
onOpenTerminal={onOpenTerminal}
|
||||
onTest={onTest}
|
||||
isTesting={isTesting}
|
||||
isProxyRunning={isProxyRunning}
|
||||
isProxyTakeover={isProxyTakeover}
|
||||
dragHandleProps={{
|
||||
attributes,
|
||||
listeners,
|
||||
isDragging,
|
||||
}}
|
||||
isAutoFailoverEnabled={isAutoFailoverEnabled}
|
||||
failoverPriority={failoverPriority}
|
||||
isInFailoverQueue={isInFailoverQueue}
|
||||
onToggleFailover={onToggleFailover}
|
||||
activeProviderId={activeProviderId}
|
||||
// OpenClaw: default model
|
||||
isDefaultModel={isDefaultModel}
|
||||
onSetAsDefault={onSetAsDefault}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import React, { useState } from "react";
|
||||
import { Eye, EyeOff } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface ApiKeyInputProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
required?: boolean;
|
||||
label?: string;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
disabled = false,
|
||||
required = false,
|
||||
label = "API Key",
|
||||
id = "apiKey",
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
|
||||
const toggleShowKey = () => {
|
||||
setShowKey(!showKey);
|
||||
};
|
||||
|
||||
const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${
|
||||
disabled
|
||||
? "bg-muted border-border-default text-muted-foreground cursor-not-allowed"
|
||||
: "border-border-default bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20"
|
||||
}`;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<label htmlFor={id} className="block text-sm font-medium text-foreground">
|
||||
{label} {required && "*"}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showKey ? "text" : "password"}
|
||||
id={id}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder ?? t("apiKeyInput.placeholder")}
|
||||
disabled={disabled}
|
||||
required={required}
|
||||
autoComplete="off"
|
||||
className={inputClass}
|
||||
/>
|
||||
{!disabled && value && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleShowKey}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors"
|
||||
aria-label={showKey ? t("apiKeyInput.hide") : t("apiKeyInput.show")}
|
||||
>
|
||||
{showKey ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApiKeyInput;
|
||||
@@ -0,0 +1,176 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState } from "react";
|
||||
import type { ReactNode } from "react";
|
||||
import {
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ProviderIcon } from "@/components/ProviderIcon";
|
||||
import { IconPicker } from "@/components/IconPicker";
|
||||
import { getIconMetadata } from "@/icons/extracted/metadata";
|
||||
import type { UseFormReturn } from "react-hook-form";
|
||||
import type { ProviderFormData } from "@/lib/schemas/provider";
|
||||
|
||||
interface BasicFormFieldsProps {
|
||||
form: UseFormReturn<ProviderFormData>;
|
||||
/** Slot to render content between icon and name fields */
|
||||
beforeNameSlot?: ReactNode;
|
||||
}
|
||||
|
||||
export function BasicFormFields({
|
||||
form,
|
||||
beforeNameSlot,
|
||||
}: BasicFormFieldsProps) {
|
||||
const { t } = useTranslation();
|
||||
const [iconDialogOpen, setIconDialogOpen] = useState(false);
|
||||
|
||||
const currentIcon = form.watch("icon");
|
||||
const currentIconColor = form.watch("iconColor");
|
||||
const providerName = form.watch("name") || "Provider";
|
||||
const effectiveIconColor =
|
||||
currentIconColor ||
|
||||
(currentIcon ? getIconMetadata(currentIcon)?.defaultColor : undefined);
|
||||
|
||||
const handleIconSelect = (icon: string) => {
|
||||
const meta = getIconMetadata(icon);
|
||||
form.setValue("icon", icon);
|
||||
form.setValue("iconColor", meta?.defaultColor ?? "");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 图标选择区域 - 顶部居中，可选 */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<Dialog open={iconDialogOpen} onOpenChange={setIconDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="w-20 h-20 p-3 rounded-xl border-2 border-muted hover:border-primary transition-colors cursor-pointer bg-muted/30 hover:bg-muted/50 flex items-center justify-center"
|
||||
title={
|
||||
currentIcon
|
||||
? t("providerIcon.clickToChange", {
|
||||
defaultValue: "点击更换图标",
|
||||
})
|
||||
: t("providerIcon.clickToSelect", {
|
||||
defaultValue: "点击选择图标",
|
||||
})
|
||||
}
|
||||
>
|
||||
<ProviderIcon
|
||||
icon={currentIcon}
|
||||
name={providerName}
|
||||
color={effectiveIconColor}
|
||||
size={48}
|
||||
/>
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogContent
|
||||
variant="fullscreen"
|
||||
zIndex="top"
|
||||
overlayClassName="bg-[hsl(var(--background))] backdrop-blur-0"
|
||||
className="p-0 sm:rounded-none"
|
||||
>
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex-shrink-0 py-4 border-b border-border-default bg-muted/40">
|
||||
<div className="px-6 flex items-center gap-4">
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline" size="icon">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<p className="text-lg font-semibold leading-tight">
|
||||
{t("providerIcon.selectIcon", {
|
||||
defaultValue: "选择图标",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="space-y-2 px-6 py-6 w-full">
|
||||
<IconPicker
|
||||
value={currentIcon}
|
||||
onValueChange={handleIconSelect}
|
||||
color={effectiveIconColor}
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline">
|
||||
{t("common.done", { defaultValue: "完成" })}
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{/* Slot for additional fields between icon and name */}
|
||||
{beforeNameSlot}
|
||||
|
||||
{/* 基础信息 - 网格布局 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("provider.name")}</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder={t("provider.namePlaceholder")} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notes"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("provider.notes")}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder={t("provider.notesPlaceholder")}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="websiteUrl"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("provider.websiteUrl")}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder={t("providerForm.websiteUrlPlaceholder")}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,151 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Save, Download, Loader2, Package } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import JsonEditor from "@/components/JsonEditor";
|
||||
|
||||
interface CodexCommonConfigModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
value: string;
|
||||
onSave: (value: string) => boolean | Promise<boolean>;
|
||||
error?: string;
|
||||
onExtract?: () => void;
|
||||
isExtracting?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* CodexCommonConfigModal - Common Codex configuration editor modal
|
||||
* Allows editing of common TOML configuration shared across providers
|
||||
*/
|
||||
export const CodexCommonConfigModal: React.FC<CodexCommonConfigModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
value,
|
||||
onSave,
|
||||
error,
|
||||
onExtract,
|
||||
isExtracting,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
const [draftValue, setDraftValue] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setDraftValue(value);
|
||||
}
|
||||
}, [isOpen, value]);
|
||||
|
||||
const handleClose = () => {
|
||||
setDraftValue(value);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (await onSave(draftValue)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<FullScreenPanel
|
||||
isOpen={isOpen}
|
||||
title={t("codexConfig.editCommonConfigTitle")}
|
||||
onClose={handleClose}
|
||||
footer={
|
||||
<>
|
||||
{onExtract && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onExtract}
|
||||
disabled={isExtracting}
|
||||
className="gap-2"
|
||||
>
|
||||
{isExtracting ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Download className="w-4 h-4" />
|
||||
)}
|
||||
{t("codexConfig.extractFromCurrent", {
|
||||
defaultValue: "从编辑内容提取",
|
||||
})}
|
||||
</Button>
|
||||
)}
|
||||
<Button type="button" variant="outline" onClick={handleClose}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button type="button" onClick={handleSave} className="gap-2">
|
||||
<Save className="w-4 h-4" />
|
||||
{t("common.save")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/30 p-3 space-y-1.5">
|
||||
<p className="text-sm font-medium text-blue-800 dark:text-blue-300">
|
||||
{t("commonConfig.guideTitle")}
|
||||
</p>
|
||||
<p className="text-xs text-blue-700/80 dark:text-blue-400/80">
|
||||
{t("commonConfig.guidePurpose")}
|
||||
</p>
|
||||
<p className="text-xs text-blue-700/80 dark:text-blue-400/80">
|
||||
{t("commonConfig.guideUsage")}
|
||||
</p>
|
||||
<p className="text-xs text-blue-700/80 dark:text-blue-400/80">
|
||||
{t("commonConfig.guideReExtract")}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("commonConfig.guideReassurance")}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("codexConfig.commonConfigHint")}
|
||||
</p>
|
||||
{(!draftValue || draftValue.trim() === "") && (
|
||||
<div className="flex flex-col items-center justify-center py-6 text-center text-muted-foreground">
|
||||
<Package className="h-8 w-8 mb-2 opacity-40" />
|
||||
<p className="text-sm font-medium">
|
||||
{t("commonConfig.emptyTitle")}
|
||||
</p>
|
||||
<p className="text-xs mt-1">{t("commonConfig.emptyHint")}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<JsonEditor
|
||||
value={draftValue}
|
||||
onChange={setDraftValue}
|
||||
placeholder={`# Common Codex config
|
||||
|
||||
# Add your common TOML configuration here`}
|
||||
darkMode={isDarkMode}
|
||||
rows={16}
|
||||
showValidation={false}
|
||||
language="javascript"
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-red-500 dark:text-red-400">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
</FullScreenPanel>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,119 @@
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { CodexAuthSection, CodexConfigSection } from "./CodexConfigSections";
|
||||
import { CodexCommonConfigModal } from "./CodexCommonConfigModal";
|
||||
|
||||
interface CodexConfigEditorProps {
|
||||
authValue: string;
|
||||
|
||||
configValue: string;
|
||||
|
||||
providerName?: string;
|
||||
|
||||
showRemoteCompaction?: boolean;
|
||||
|
||||
isProxyTakeover?: boolean;
|
||||
|
||||
onAuthChange: (value: string) => void;
|
||||
|
||||
onConfigChange: (value: string) => void;
|
||||
|
||||
onAuthBlur?: () => void;
|
||||
|
||||
useCommonConfig: boolean;
|
||||
|
||||
onCommonConfigToggle: (checked: boolean) => void | Promise<void>;
|
||||
|
||||
commonConfigSnippet: string;
|
||||
|
||||
onCommonConfigSnippetChange: (value: string) => boolean | Promise<boolean>;
|
||||
|
||||
onCommonConfigErrorClear: () => void;
|
||||
|
||||
commonConfigError: string;
|
||||
|
||||
authError: string;
|
||||
|
||||
configError: string; // config.toml 错误提示
|
||||
|
||||
onExtract?: () => void;
|
||||
|
||||
isExtracting?: boolean;
|
||||
}
|
||||
|
||||
const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
|
||||
authValue,
|
||||
configValue,
|
||||
providerName,
|
||||
showRemoteCompaction,
|
||||
isProxyTakeover = false,
|
||||
onAuthChange,
|
||||
onConfigChange,
|
||||
onAuthBlur,
|
||||
useCommonConfig,
|
||||
onCommonConfigToggle,
|
||||
commonConfigSnippet,
|
||||
onCommonConfigSnippetChange,
|
||||
onCommonConfigErrorClear,
|
||||
commonConfigError,
|
||||
authError,
|
||||
configError,
|
||||
onExtract,
|
||||
isExtracting,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [isCommonConfigModalOpen, setIsCommonConfigModalOpen] = useState(false);
|
||||
|
||||
const handleCloseCommonConfigModal = () => {
|
||||
onCommonConfigErrorClear();
|
||||
setIsCommonConfigModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{isProxyTakeover && (
|
||||
<div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
|
||||
<p className="text-xs text-amber-600 dark:text-amber-400">
|
||||
{t("codexConfig.proxyTakeoverStorageNotice")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Auth JSON Section */}
|
||||
<CodexAuthSection
|
||||
value={authValue}
|
||||
onChange={onAuthChange}
|
||||
onBlur={onAuthBlur}
|
||||
error={authError}
|
||||
isProxyTakeover={isProxyTakeover}
|
||||
/>
|
||||
|
||||
{/* Config TOML Section */}
|
||||
<CodexConfigSection
|
||||
value={configValue}
|
||||
onChange={onConfigChange}
|
||||
providerName={providerName}
|
||||
showRemoteCompaction={showRemoteCompaction}
|
||||
useCommonConfig={useCommonConfig}
|
||||
onCommonConfigToggle={onCommonConfigToggle}
|
||||
onEditCommonConfig={() => setIsCommonConfigModalOpen(true)}
|
||||
commonConfigError={commonConfigError}
|
||||
configError={configError}
|
||||
isProxyTakeover={isProxyTakeover}
|
||||
/>
|
||||
|
||||
{/* Common Config Modal */}
|
||||
<CodexCommonConfigModal
|
||||
isOpen={isCommonConfigModalOpen}
|
||||
onClose={handleCloseCommonConfigModal}
|
||||
value={commonConfigSnippet}
|
||||
onSave={onCommonConfigSnippetChange}
|
||||
error={commonConfigError}
|
||||
onExtract={onExtract}
|
||||
isExtracting={isExtracting}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodexConfigEditor;
|
||||
@@ -0,0 +1,387 @@
|
||||
// NOTE: Codex 1M 上下文 UI 已暂时隐藏（详见下方 CodexConfigSection 内 JSX 注释）。
|
||||
// 如需恢复，请同时：
|
||||
// - 取消下面 `@/utils/providerConfigUtils` import 的注释
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import JsonEditor from "@/components/JsonEditor";
|
||||
import {
|
||||
isCodexGoalModeEnabled,
|
||||
isCodexRemoteCompactionEnabled,
|
||||
setCodexGoalMode,
|
||||
setCodexRemoteCompaction,
|
||||
} from "@/utils/providerConfigUtils";
|
||||
/*
|
||||
import {
|
||||
extractCodexTopLevelInt,
|
||||
setCodexTopLevelInt,
|
||||
removeCodexTopLevelField,
|
||||
} from "@/utils/providerConfigUtils";
|
||||
*/
|
||||
|
||||
interface CodexAuthSectionProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
onBlur?: () => void;
|
||||
error?: string;
|
||||
isProxyTakeover?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* CodexAuthSection - Auth JSON editor section
|
||||
*/
|
||||
export const CodexAuthSection: React.FC<CodexAuthSectionProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
onBlur,
|
||||
error,
|
||||
isProxyTakeover = false,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const handleChange = (newValue: string) => {
|
||||
onChange(newValue);
|
||||
if (onBlur) {
|
||||
onBlur();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="codexAuth"
|
||||
className="block text-sm font-medium text-foreground"
|
||||
>
|
||||
{t("codexConfig.authJson")}
|
||||
</label>
|
||||
|
||||
<JsonEditor
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
placeholder={t("codexConfig.authJsonPlaceholder")}
|
||||
darkMode={isDarkMode}
|
||||
rows={6}
|
||||
showValidation={true}
|
||||
language="json"
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-red-500 dark:text-red-400">{error}</p>
|
||||
)}
|
||||
|
||||
{!error && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t(
|
||||
isProxyTakeover
|
||||
? "codexConfig.authJsonStorageHint"
|
||||
: "codexConfig.authJsonHint",
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface CodexConfigSectionProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
providerName?: string;
|
||||
showRemoteCompaction?: boolean;
|
||||
useCommonConfig: boolean;
|
||||
onCommonConfigToggle: (checked: boolean) => void;
|
||||
onEditCommonConfig: () => void;
|
||||
commonConfigError?: string;
|
||||
configError?: string;
|
||||
isProxyTakeover?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* CodexConfigSection - Config TOML editor section
|
||||
*/
|
||||
export const CodexConfigSection: React.FC<CodexConfigSectionProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
providerName,
|
||||
showRemoteCompaction = true,
|
||||
useCommonConfig,
|
||||
onCommonConfigToggle,
|
||||
onEditCommonConfig,
|
||||
commonConfigError,
|
||||
configError,
|
||||
isProxyTakeover = false,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
// Mirror value prop to local state (same pattern as CommonConfigEditor)
|
||||
const [localValue, setLocalValue] = useState(value);
|
||||
const localValueRef = useRef(value);
|
||||
useEffect(() => {
|
||||
setLocalValue(value);
|
||||
localValueRef.current = value;
|
||||
}, [value]);
|
||||
|
||||
const handleLocalChange = useCallback(
|
||||
(newValue: string) => {
|
||||
if (newValue === localValueRef.current) return;
|
||||
localValueRef.current = newValue;
|
||||
setLocalValue(newValue);
|
||||
onChange(newValue);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
const goalModeEnabled = useMemo(
|
||||
() => isCodexGoalModeEnabled(localValue),
|
||||
[localValue],
|
||||
);
|
||||
const remoteCompactionEnabled = useMemo(
|
||||
() => isCodexRemoteCompactionEnabled(localValue),
|
||||
[localValue],
|
||||
);
|
||||
|
||||
const handleGoalModeToggle = useCallback(
|
||||
(checked: boolean) => {
|
||||
handleLocalChange(setCodexGoalMode(localValueRef.current || "", checked));
|
||||
},
|
||||
[handleLocalChange],
|
||||
);
|
||||
|
||||
const handleRemoteCompactionToggle = useCallback(
|
||||
(checked: boolean) => {
|
||||
handleLocalChange(
|
||||
setCodexRemoteCompaction(
|
||||
localValueRef.current || "",
|
||||
checked,
|
||||
providerName,
|
||||
),
|
||||
);
|
||||
},
|
||||
[handleLocalChange, providerName],
|
||||
);
|
||||
|
||||
// Codex 1M 上下文相关状态/回调暂时禁用——见同文件下方 JSX 注释处的恢复说明。
|
||||
/*
|
||||
// Parse toggle states from TOML text
|
||||
const toggleStates = useMemo(() => {
|
||||
const contextWindow = extractCodexTopLevelInt(
|
||||
localValue,
|
||||
"model_context_window",
|
||||
);
|
||||
const compactLimit = extractCodexTopLevelInt(
|
||||
localValue,
|
||||
"model_auto_compact_token_limit",
|
||||
);
|
||||
return {
|
||||
contextWindow1M: contextWindow === 1000000,
|
||||
compactLimit: compactLimit ?? 900000,
|
||||
};
|
||||
}, [localValue]);
|
||||
|
||||
// Debounce timer for compact limit input
|
||||
const compactTimerRef = useRef<ReturnType<typeof setTimeout>>();
|
||||
|
||||
const handleContextWindowToggle = useCallback(
|
||||
(checked: boolean) => {
|
||||
let toml = localValueRef.current || "";
|
||||
if (checked) {
|
||||
toml = setCodexTopLevelInt(toml, "model_context_window", 1000000);
|
||||
// Auto-set compact limit if not already present
|
||||
if (
|
||||
extractCodexTopLevelInt(toml, "model_auto_compact_token_limit") ===
|
||||
undefined
|
||||
) {
|
||||
toml = setCodexTopLevelInt(
|
||||
toml,
|
||||
"model_auto_compact_token_limit",
|
||||
900000,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
toml = removeCodexTopLevelField(toml, "model_context_window");
|
||||
toml = removeCodexTopLevelField(toml, "model_auto_compact_token_limit");
|
||||
}
|
||||
handleLocalChange(toml);
|
||||
},
|
||||
[handleLocalChange],
|
||||
);
|
||||
|
||||
const handleCompactLimitChange = useCallback(
|
||||
(inputValue: string) => {
|
||||
clearTimeout(compactTimerRef.current);
|
||||
compactTimerRef.current = setTimeout(() => {
|
||||
const num = parseInt(inputValue, 10);
|
||||
if (!Number.isNaN(num) && num > 0) {
|
||||
handleLocalChange(
|
||||
setCodexTopLevelInt(
|
||||
localValueRef.current || "",
|
||||
"model_auto_compact_token_limit",
|
||||
num,
|
||||
),
|
||||
);
|
||||
}
|
||||
}, 500);
|
||||
},
|
||||
[handleLocalChange],
|
||||
);
|
||||
|
||||
// Cleanup debounce timer
|
||||
useEffect(() => {
|
||||
return () => clearTimeout(compactTimerRef.current);
|
||||
}, []);
|
||||
*/
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<label
|
||||
htmlFor="codexConfig"
|
||||
className="block text-sm font-medium text-foreground"
|
||||
>
|
||||
{t("codexConfig.configToml")}
|
||||
</label>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-end gap-x-4 gap-y-1">
|
||||
<label className="inline-flex cursor-pointer items-center gap-2 text-sm text-muted-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={goalModeEnabled}
|
||||
onChange={(e) => handleGoalModeToggle(e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
{t("codexConfig.enableGoalMode")}
|
||||
</label>
|
||||
|
||||
{showRemoteCompaction && (
|
||||
<label
|
||||
className="inline-flex cursor-pointer items-center gap-2 text-sm text-muted-foreground"
|
||||
title={t("codexConfig.remoteCompactionHint")}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={remoteCompactionEnabled}
|
||||
onChange={(e) => handleRemoteCompactionToggle(e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
{t("codexConfig.enableRemoteCompaction")}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<label className="inline-flex cursor-pointer items-center gap-2 text-sm text-muted-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={useCommonConfig}
|
||||
onChange={(e) => onCommonConfigToggle(e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
{t("codexConfig.writeCommonConfig")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onEditCommonConfig}
|
||||
className="text-xs text-blue-500 dark:text-blue-400 hover:underline"
|
||||
>
|
||||
{t("codexConfig.editCommonConfig")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{commonConfigError && (
|
||||
<p className="text-xs text-red-500 dark:text-red-400 text-right">
|
||||
{commonConfigError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Codex 1M 上下文 UI 已隐藏：模型不再支持该字段。
|
||||
恢复方法：(1) 取消本段 JSX 注释；(2) 取消文件顶部 import 中 useMemo / extractCodexTopLevelInt / setCodexTopLevelInt / removeCodexTopLevelField 的注释；(3) 取消下方 toggleStates / compactTimerRef / handleContextWindowToggle / handleCompactLimitChange / cleanup useEffect 的注释。
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1">
|
||||
<label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={toggleStates.contextWindow1M}
|
||||
onChange={(e) => handleContextWindowToggle(e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
<span>{t("codexConfig.contextWindow1M")}</span>
|
||||
</label>
|
||||
<label className="inline-flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>{t("codexConfig.autoCompactLimit")}:</span>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
key={toggleStates.compactLimit}
|
||||
defaultValue={toggleStates.compactLimit}
|
||||
disabled={!toggleStates.contextWindow1M}
|
||||
onChange={(e) => handleCompactLimitChange(e.target.value)}
|
||||
className="w-28 h-7 px-2 text-sm rounded border border-border bg-background text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
*/}
|
||||
|
||||
<JsonEditor
|
||||
value={localValue}
|
||||
onChange={handleLocalChange}
|
||||
placeholder=""
|
||||
darkMode={isDarkMode}
|
||||
rows={8}
|
||||
showValidation={false}
|
||||
language="javascript"
|
||||
/>
|
||||
|
||||
{configError && (
|
||||
<p className="text-xs text-red-500 dark:text-red-400">{configError}</p>
|
||||
)}
|
||||
|
||||
{!configError && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t(
|
||||
isProxyTakeover
|
||||
? "codexConfig.configTomlStorageHint"
|
||||
: "codexConfig.configTomlHint",
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,849 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FormLabel } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Download,
|
||||
Loader2,
|
||||
Plus,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import EndpointSpeedTest from "./EndpointSpeedTest";
|
||||
import { ApiKeySection, EndpointField, ModelDropdown } from "./shared";
|
||||
import {
|
||||
fetchModelsForConfig,
|
||||
showFetchModelsError,
|
||||
type FetchedModel,
|
||||
} from "@/lib/api/model-fetch";
|
||||
import { CustomUserAgentField } from "./CustomUserAgentField";
|
||||
import { LocalProxyRequestOverridesField } from "./LocalProxyRequestOverridesField";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type {
|
||||
ClaudeApiKeyField,
|
||||
CodexApiFormat,
|
||||
CodexCatalogModel,
|
||||
CodexChatReasoning,
|
||||
ProviderCategory,
|
||||
} from "@/types";
|
||||
|
||||
interface EndpointCandidate {
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface CodexFormFieldsProps {
|
||||
providerId?: string;
|
||||
// API Key
|
||||
codexApiKey: string;
|
||||
onApiKeyChange: (key: string) => void;
|
||||
category?: ProviderCategory;
|
||||
shouldShowApiKeyLink: boolean;
|
||||
websiteUrl: string;
|
||||
isPartner?: boolean;
|
||||
partnerPromotionKey?: string;
|
||||
|
||||
// Base URL
|
||||
shouldShowSpeedTest: boolean;
|
||||
codexBaseUrl: string;
|
||||
onBaseUrlChange: (url: string) => void;
|
||||
isFullUrl: boolean;
|
||||
onFullUrlChange: (value: boolean) => void;
|
||||
isEndpointModalOpen: boolean;
|
||||
onEndpointModalToggle: (open: boolean) => void;
|
||||
onCustomEndpointsChange?: (endpoints: string[]) => void;
|
||||
autoSelect: boolean;
|
||||
onAutoSelectChange: (checked: boolean) => void;
|
||||
|
||||
// API Format
|
||||
// Note: wire_api is always "responses" for Codex; apiFormat controls proxy-layer conversion
|
||||
apiFormat: CodexApiFormat;
|
||||
onApiFormatChange: (format: CodexApiFormat) => void;
|
||||
// Auth field for the Anthropic Messages upstream (only used when apiFormat === "anthropic")
|
||||
anthropicAuthField: ClaudeApiKeyField;
|
||||
onAnthropicAuthFieldChange: (value: ClaudeApiKeyField) => void;
|
||||
// Anthropic path: whether to emulate the Claude Code client
|
||||
impersonateClaudeCode: boolean;
|
||||
onImpersonateClaudeCodeChange: (value: boolean) => void;
|
||||
// Anthropic path: output ceiling override (empty string = use default). Digits only.
|
||||
maxOutputTokens: string;
|
||||
onMaxOutputTokensChange: (value: string) => void;
|
||||
codexChatReasoning?: CodexChatReasoning;
|
||||
onCodexChatReasoningChange?: (value: CodexChatReasoning) => void;
|
||||
|
||||
// Model Catalog
|
||||
catalogModels?: CodexCatalogModel[];
|
||||
onCatalogModelsChange?: (models: CodexCatalogModel[]) => void;
|
||||
|
||||
// Speed Test Endpoints
|
||||
speedTestEndpoints: EndpointCandidate[];
|
||||
|
||||
// Local proxy User-Agent override
|
||||
customUserAgent: string;
|
||||
onCustomUserAgentChange: (value: string) => void;
|
||||
localProxyHeadersOverride: string;
|
||||
onLocalProxyHeadersOverrideChange: (value: string) => void;
|
||||
localProxyBodyOverride: string;
|
||||
onLocalProxyBodyOverrideChange: (value: string) => void;
|
||||
}
|
||||
|
||||
type CodexCatalogRow = CodexCatalogModel & { rowId: string };
|
||||
|
||||
function createCatalogRow(seed?: Partial<CodexCatalogModel>): CodexCatalogRow {
|
||||
return {
|
||||
rowId: crypto.randomUUID(),
|
||||
model: seed?.model ?? "",
|
||||
displayName: seed?.displayName ?? "",
|
||||
contextWindow: seed?.contextWindow ?? "",
|
||||
// Carry native-profile overrides verbatim (not user-editable in the row UI,
|
||||
// but must survive load->save so the official catalog fidelity is kept).
|
||||
...(seed?.supportsParallelToolCalls !== undefined
|
||||
? { supportsParallelToolCalls: seed.supportsParallelToolCalls }
|
||||
: {}),
|
||||
...(seed?.inputModalities ? { inputModalities: seed.inputModalities } : {}),
|
||||
...(seed?.baseInstructions
|
||||
? { baseInstructions: seed.baseInstructions }
|
||||
: {}),
|
||||
};
|
||||
}
|
||||
|
||||
// Compares rows (with rowId) to incoming models (without) by data fields only,
|
||||
// so both sync effects can use the same equality definition. Hidden native-profile
|
||||
// fields are included so switching between providers with identical visible fields
|
||||
// but different base_instructions / tools / modalities still rebuilds the rows.
|
||||
function catalogRowsMatchModels(
|
||||
rows: CodexCatalogModel[],
|
||||
models: CodexCatalogModel[],
|
||||
): boolean {
|
||||
if (rows.length !== models.length) return false;
|
||||
return rows.every((row, i) => {
|
||||
const incoming = models[i];
|
||||
return (
|
||||
row.model === (incoming.model ?? "") &&
|
||||
(row.displayName ?? "") === (incoming.displayName ?? "") &&
|
||||
String(row.contextWindow ?? "") ===
|
||||
String(incoming.contextWindow ?? "") &&
|
||||
(row.supportsParallelToolCalls ?? null) ===
|
||||
(incoming.supportsParallelToolCalls ?? null) &&
|
||||
(row.baseInstructions ?? "") === (incoming.baseInstructions ?? "") &&
|
||||
JSON.stringify(row.inputModalities ?? []) ===
|
||||
JSON.stringify(incoming.inputModalities ?? [])
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function CodexFormFields({
|
||||
providerId,
|
||||
codexApiKey,
|
||||
onApiKeyChange,
|
||||
category,
|
||||
shouldShowApiKeyLink,
|
||||
websiteUrl,
|
||||
isPartner,
|
||||
partnerPromotionKey,
|
||||
shouldShowSpeedTest,
|
||||
codexBaseUrl,
|
||||
onBaseUrlChange,
|
||||
isFullUrl,
|
||||
onFullUrlChange,
|
||||
isEndpointModalOpen,
|
||||
onEndpointModalToggle,
|
||||
onCustomEndpointsChange,
|
||||
autoSelect,
|
||||
onAutoSelectChange,
|
||||
apiFormat,
|
||||
onApiFormatChange,
|
||||
anthropicAuthField,
|
||||
onAnthropicAuthFieldChange,
|
||||
impersonateClaudeCode,
|
||||
onImpersonateClaudeCodeChange,
|
||||
maxOutputTokens,
|
||||
onMaxOutputTokensChange,
|
||||
codexChatReasoning = {},
|
||||
onCodexChatReasoningChange,
|
||||
catalogModels = [],
|
||||
onCatalogModelsChange,
|
||||
speedTestEndpoints,
|
||||
customUserAgent,
|
||||
onCustomUserAgentChange,
|
||||
localProxyHeadersOverride,
|
||||
onLocalProxyHeadersOverrideChange,
|
||||
localProxyBodyOverride,
|
||||
onLocalProxyBodyOverrideChange,
|
||||
}: CodexFormFieldsProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [fetchedModels, setFetchedModels] = useState<FetchedModel[]>([]);
|
||||
const [isFetchingModels, setIsFetchingModels] = useState(false);
|
||||
// 思考能力随 Chat 格式显示（仅 Chat Completions 转换路径用得上）；模型映射常驻
|
||||
//（填了才生成 catalog）。两者都已与「路由接管」概念解耦。
|
||||
const isChatFormat = apiFormat === "openai_chat";
|
||||
const isAnthropicFormat = apiFormat === "anthropic";
|
||||
const canEditCatalog = Boolean(onCatalogModelsChange);
|
||||
const canEditReasoning = Boolean(onCodexChatReasoningChange);
|
||||
const supportsThinking =
|
||||
codexChatReasoning.supportsThinking === true ||
|
||||
codexChatReasoning.supportsEffort === true;
|
||||
const supportsEffort = codexChatReasoning.supportsEffort === true;
|
||||
|
||||
// 高级区在有任何可见配置时自动展开（仅折叠→展开，不会自动折叠）：自定义 UA /
|
||||
// 请求覆盖 / 已填模型映射 / 原生 Responses（需维护 catalog）/ 已配置思考能力。
|
||||
const hasRequestOverrides = Boolean(
|
||||
localProxyHeadersOverride.trim() || localProxyBodyOverride.trim(),
|
||||
);
|
||||
const hasAnyAdvancedValue =
|
||||
!!customUserAgent ||
|
||||
hasRequestOverrides ||
|
||||
catalogModels.length > 0 ||
|
||||
apiFormat === "openai_responses" ||
|
||||
isAnthropicFormat ||
|
||||
supportsThinking ||
|
||||
supportsEffort ||
|
||||
!!maxOutputTokens;
|
||||
const [advancedExpanded, setAdvancedExpanded] = useState(hasAnyAdvancedValue);
|
||||
|
||||
// 预设/编辑加载填充高级值后自动展开（仅从折叠→展开，不会自动折叠）
|
||||
useEffect(() => {
|
||||
if (hasAnyAdvancedValue) {
|
||||
setAdvancedExpanded(true);
|
||||
}
|
||||
}, [hasAnyAdvancedValue]);
|
||||
|
||||
const [catalogRows, setCatalogRows] = useState<CodexCatalogRow[]>(() =>
|
||||
catalogModels.map((m) => createCatalogRow(m)),
|
||||
);
|
||||
|
||||
// 记录上次发送给父组件的数据，避免重复触发
|
||||
const lastSentModelsRef = useRef<CodexCatalogModel[]>(catalogModels);
|
||||
|
||||
// 父 → 子：仅当 prop 数据真的变化（预设切换 / 编辑加载）时才重建 rowId；
|
||||
// 同 shape 时保留现有 rowId，避免编辑过程中焦点丢失。
|
||||
useEffect(() => {
|
||||
setCatalogRows((current) => {
|
||||
if (catalogRowsMatchModels(current, catalogModels)) return current;
|
||||
return catalogModels.map((m) => createCatalogRow(m));
|
||||
});
|
||||
// 同步更新 ref，避免父组件传入新数据时子→父 effect 误判为本地修改
|
||||
lastSentModelsRef.current = catalogModels;
|
||||
}, [catalogModels]);
|
||||
|
||||
// 子 → 父：rowId 是视图层概念，不应进入持久化数据；剥离后再回传。
|
||||
// 注意：依赖数组不包含 catalogModels，避免父→子更新触发子→父回调形成循环。
|
||||
useEffect(() => {
|
||||
if (!onCatalogModelsChange) return;
|
||||
const next: CodexCatalogModel[] = catalogRows.map(
|
||||
({ rowId: _rowId, ...rest }) => rest,
|
||||
);
|
||||
// 只有当数据真的变化时才通知父组件
|
||||
if (catalogRowsMatchModels(catalogRows, lastSentModelsRef.current)) return;
|
||||
lastSentModelsRef.current = next;
|
||||
onCatalogModelsChange(next);
|
||||
}, [catalogRows, onCatalogModelsChange]);
|
||||
|
||||
const handleReasoningThinkingChange = useCallback(
|
||||
(checked: boolean) => {
|
||||
if (!onCodexChatReasoningChange) return;
|
||||
onCodexChatReasoningChange({
|
||||
...codexChatReasoning,
|
||||
supportsThinking: checked,
|
||||
supportsEffort: checked ? codexChatReasoning.supportsEffort : false,
|
||||
});
|
||||
},
|
||||
[codexChatReasoning, onCodexChatReasoningChange],
|
||||
);
|
||||
|
||||
const handleReasoningEffortChange = useCallback(
|
||||
(checked: boolean) => {
|
||||
if (!onCodexChatReasoningChange) return;
|
||||
onCodexChatReasoningChange({
|
||||
...codexChatReasoning,
|
||||
supportsThinking: checked ? true : codexChatReasoning.supportsThinking,
|
||||
supportsEffort: checked,
|
||||
effortParam: checked
|
||||
? (codexChatReasoning.effortParam ?? "reasoning_effort")
|
||||
: "none",
|
||||
});
|
||||
},
|
||||
[codexChatReasoning, onCodexChatReasoningChange],
|
||||
);
|
||||
|
||||
const handleFetchModels = useCallback(() => {
|
||||
if (!codexBaseUrl || !codexApiKey) {
|
||||
showFetchModelsError(null, t, {
|
||||
hasApiKey: !!codexApiKey,
|
||||
hasBaseUrl: !!codexBaseUrl,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setIsFetchingModels(true);
|
||||
fetchModelsForConfig(
|
||||
codexBaseUrl,
|
||||
codexApiKey,
|
||||
isFullUrl,
|
||||
undefined,
|
||||
customUserAgent,
|
||||
)
|
||||
.then((models) => {
|
||||
setFetchedModels(models);
|
||||
if (models.length === 0) {
|
||||
toast.info(t("providerForm.fetchModelsEmpty"));
|
||||
} else {
|
||||
toast.success(
|
||||
t("providerForm.fetchModelsSuccess", { count: models.length }),
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.warn("[ModelFetch] Failed:", err);
|
||||
showFetchModelsError(err, t);
|
||||
})
|
||||
.finally(() => setIsFetchingModels(false));
|
||||
}, [codexBaseUrl, codexApiKey, isFullUrl, customUserAgent, t]);
|
||||
|
||||
const handleAddCatalogRow = useCallback(() => {
|
||||
if (!onCatalogModelsChange) return;
|
||||
setCatalogRows((current) => [...current, createCatalogRow()]);
|
||||
}, [onCatalogModelsChange]);
|
||||
|
||||
const handleUpdateCatalogRow = useCallback(
|
||||
(index: number, patch: Partial<CodexCatalogModel>) => {
|
||||
setCatalogRows((current) =>
|
||||
current.map((row, i) => (i === index ? { ...row, ...patch } : row)),
|
||||
);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleRemoveCatalogRow = useCallback((index: number) => {
|
||||
setCatalogRows((current) => current.filter((_, i) => i !== index));
|
||||
}, []);
|
||||
|
||||
const renderCatalogActionButtons = (onAdd: () => void, addLabel: string) => (
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleFetchModels}
|
||||
disabled={isFetchingModels}
|
||||
className="h-7 gap-1"
|
||||
>
|
||||
{isFetchingModels ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{t("providerForm.fetchModels")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onAdd}
|
||||
className="h-7 gap-1"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
{addLabel}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Codex API Key 输入框 */}
|
||||
<ApiKeySection
|
||||
id="codexApiKey"
|
||||
label="API Key"
|
||||
value={codexApiKey}
|
||||
onChange={onApiKeyChange}
|
||||
category={category}
|
||||
shouldShowLink={shouldShowApiKeyLink}
|
||||
websiteUrl={websiteUrl}
|
||||
isPartner={isPartner}
|
||||
partnerPromotionKey={partnerPromotionKey}
|
||||
placeholder={{
|
||||
official: t("providerForm.codexOfficialNoApiKey", {
|
||||
defaultValue: "官方供应商无需 API Key",
|
||||
}),
|
||||
thirdParty: t("providerForm.codexApiKeyAutoFill", {
|
||||
defaultValue: "输入 API Key，将自动填充到配置",
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Codex Base URL 输入框 */}
|
||||
{shouldShowSpeedTest && (
|
||||
<EndpointField
|
||||
id="codexBaseUrl"
|
||||
label={t("codexConfig.apiUrlLabel")}
|
||||
value={codexBaseUrl}
|
||||
onChange={onBaseUrlChange}
|
||||
placeholder={t("providerForm.codexApiEndpointPlaceholder")}
|
||||
hint={t("providerForm.codexApiHint")}
|
||||
showFullUrlToggle
|
||||
isFullUrl={isFullUrl}
|
||||
onFullUrlChange={onFullUrlChange}
|
||||
onManageClick={() => onEndpointModalToggle(true)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 高级选项 —— 上游格式/模型映射/思考能力/自定义 UA；预设供应商通常无需展开 */}
|
||||
{category !== "official" && (
|
||||
<Collapsible
|
||||
open={advancedExpanded}
|
||||
onOpenChange={setAdvancedExpanded}
|
||||
className="rounded-lg border border-border-default p-4"
|
||||
>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant={null}
|
||||
size="sm"
|
||||
className="h-8 w-full justify-start gap-1.5 px-0 text-sm font-medium text-foreground hover:opacity-70"
|
||||
>
|
||||
{advancedExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
{t("providerForm.advancedOptionsToggle", {
|
||||
defaultValue: "高级选项",
|
||||
})}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
{!advancedExpanded && (
|
||||
<p className="mt-1 ml-1 text-xs text-muted-foreground">
|
||||
{t("codexConfig.advancedSectionHint", {
|
||||
defaultValue:
|
||||
"包含上游格式、模型映射、思考能力与自定义 User-Agent。使用 Chat Completions 协议的供应商需开启路由接管才能使用。",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
<CollapsibleContent className="space-y-3 pt-3">
|
||||
{/* 上游格式 —— Chat 需开启路由接管（走代理转换），Responses 原生直连。
|
||||
沿用 shouldShowSpeedTest 门控，cloud_provider 保持不可切换。 */}
|
||||
{shouldShowSpeedTest && (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<FormLabel htmlFor="codex-upstream-format">
|
||||
{t("codexConfig.upstreamFormatLabel", {
|
||||
defaultValue: "上游格式",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Select
|
||||
value={apiFormat}
|
||||
onValueChange={(value) =>
|
||||
onApiFormatChange(value as CodexApiFormat)
|
||||
}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="codex-upstream-format"
|
||||
className="w-full"
|
||||
>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="openai_chat">
|
||||
{t("codexConfig.upstreamFormatChat", {
|
||||
defaultValue: "Chat Completions（需开启路由）",
|
||||
})}
|
||||
</SelectItem>
|
||||
<SelectItem value="openai_responses">
|
||||
{t("codexConfig.upstreamFormatResponses", {
|
||||
defaultValue: "Responses（原生）",
|
||||
})}
|
||||
</SelectItem>
|
||||
<SelectItem value="anthropic">
|
||||
{t("codexConfig.upstreamFormatAnthropic", {
|
||||
defaultValue: "Anthropic Messages（需开启路由）",
|
||||
})}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs leading-relaxed text-muted-foreground">
|
||||
{t("codexConfig.upstreamFormatHint", {
|
||||
defaultValue:
|
||||
"供应商原生是 Responses API 就选 Responses（直连，不转换格式）；使用 Chat Completions 协议就选 Chat；供应商只提供原生 Anthropic Messages 协议就选 Anthropic Messages。Chat 与 Anthropic Messages 均需开启路由接管才能转换为 Responses。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{isAnthropicFormat && (
|
||||
<div className="space-y-1.5">
|
||||
<FormLabel htmlFor="codex-anthropic-auth-field">
|
||||
{t("codexConfig.anthropicAuthFieldLabel", {
|
||||
defaultValue: "认证字段",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Select
|
||||
value={anthropicAuthField}
|
||||
onValueChange={(value) =>
|
||||
onAnthropicAuthFieldChange(value as ClaudeApiKeyField)
|
||||
}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="codex-anthropic-auth-field"
|
||||
className="w-full"
|
||||
>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ANTHROPIC_AUTH_TOKEN">
|
||||
{t("codexConfig.anthropicAuthFieldAuthToken", {
|
||||
defaultValue:
|
||||
"ANTHROPIC_AUTH_TOKEN（Authorization）",
|
||||
})}
|
||||
</SelectItem>
|
||||
<SelectItem value="ANTHROPIC_API_KEY">
|
||||
{t("codexConfig.anthropicAuthFieldApiKey", {
|
||||
defaultValue: "ANTHROPIC_API_KEY（x-api-key）",
|
||||
})}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs leading-relaxed text-muted-foreground">
|
||||
{t("codexConfig.anthropicAuthFieldHint", {
|
||||
defaultValue:
|
||||
"选择网关接收 API Key 的请求头：ANTHROPIC_AUTH_TOKEN 发送 Authorization: Bearer；ANTHROPIC_API_KEY 发送 x-api-key。两者只发其一。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isAnthropicFormat && (
|
||||
<div className="flex items-center justify-between gap-4 border-t border-border-default pt-3">
|
||||
<div className="space-y-1">
|
||||
<FormLabel>
|
||||
{t("codexConfig.impersonateClaudeCodeLabel", {
|
||||
defaultValue: "模拟 Claude Code 客户端",
|
||||
})}
|
||||
</FormLabel>
|
||||
<p className="text-xs leading-relaxed text-muted-foreground">
|
||||
{t("codexConfig.impersonateClaudeCodeHint", {
|
||||
defaultValue:
|
||||
"网关或其上游限制只能通过 Claude Code 使用时开启：伪装 User-Agent、anthropic-beta、x-app 请求头，并在系统提示首行注入 Claude Code 身份。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={impersonateClaudeCode}
|
||||
onCheckedChange={onImpersonateClaudeCodeChange}
|
||||
aria-label={t("codexConfig.impersonateClaudeCodeLabel", {
|
||||
defaultValue: "模拟 Claude Code 客户端",
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isAnthropicFormat && (
|
||||
<div className="space-y-1.5 border-t border-border-default pt-3">
|
||||
<FormLabel htmlFor="codex-anthropic-max-output-tokens">
|
||||
{t("codexConfig.maxOutputTokensLabel", {
|
||||
defaultValue: "最大输出 tokens",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
id="codex-anthropic-max-output-tokens"
|
||||
type="number"
|
||||
min={1}
|
||||
inputMode="numeric"
|
||||
value={maxOutputTokens}
|
||||
onChange={(event) =>
|
||||
onMaxOutputTokensChange(
|
||||
event.target.value.replace(/[^\d]/g, ""),
|
||||
)
|
||||
}
|
||||
placeholder={t("codexConfig.maxOutputTokensPlaceholder", {
|
||||
defaultValue: "留空则使用默认 8192",
|
||||
})}
|
||||
/>
|
||||
<p className="text-xs leading-relaxed text-muted-foreground">
|
||||
{t("codexConfig.maxOutputTokensHint", {
|
||||
defaultValue:
|
||||
"Codex 不会把 model_max_output_tokens 写进请求体，默认上限 8192 容易在长回答或深度思考时被截断（stop_reason=max_tokens）。此处设置会作为 Anthropic 的 max_tokens 覆盖请求值。请勿超过该模型/网关的真实输出上限，否则可能 400。留空使用默认 8192。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isChatFormat && canEditReasoning && (
|
||||
<div
|
||||
className={cn(
|
||||
"space-y-3",
|
||||
shouldShowSpeedTest && "border-t border-border-default pt-3",
|
||||
)}
|
||||
>
|
||||
<div className="space-y-1">
|
||||
<FormLabel>
|
||||
{t("codexConfig.reasoningGroupTitle", {
|
||||
defaultValue: "思考能力",
|
||||
})}
|
||||
</FormLabel>
|
||||
<p className="text-xs leading-relaxed text-muted-foreground">
|
||||
{t("codexConfig.reasoningSectionHint", {
|
||||
defaultValue:
|
||||
"预设供应商已自动配置；自定义供应商会按名称/地址自动推断。仅当自动识别不准时才需手动覆盖。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="space-y-1">
|
||||
<FormLabel>
|
||||
{t("codexConfig.reasoningModeToggle", {
|
||||
defaultValue: "支持思考模式",
|
||||
})}
|
||||
</FormLabel>
|
||||
<p className="text-xs leading-relaxed text-muted-foreground">
|
||||
{t("codexConfig.reasoningModeHint", {
|
||||
defaultValue:
|
||||
"上游 Chat Completions 接口支持开启或关闭 thinking 时启用。Kimi、GLM、Qwen 等通常属于这一类。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={supportsThinking}
|
||||
onCheckedChange={handleReasoningThinkingChange}
|
||||
aria-label={t("codexConfig.reasoningModeToggle", {
|
||||
defaultValue: "支持思考模式",
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4 border-t border-border-default pt-3">
|
||||
<div className="space-y-1">
|
||||
<FormLabel>
|
||||
{t("codexConfig.reasoningEffortToggle", {
|
||||
defaultValue: "支持思考等级",
|
||||
})}
|
||||
</FormLabel>
|
||||
<p className="text-xs leading-relaxed text-muted-foreground">
|
||||
{t("codexConfig.reasoningEffortHint", {
|
||||
defaultValue:
|
||||
"上游支持 low/high/max 等思考深度控制时启用。启用后会自动启用思考模式，并把 Codex 的 reasoning.effort 转成上游 Chat 参数。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={supportsEffort}
|
||||
onCheckedChange={handleReasoningEffortChange}
|
||||
aria-label={t("codexConfig.reasoningEffortToggle", {
|
||||
defaultValue: "支持思考等级",
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 模型映射 / 模型目录 —— 与「路由接管」解耦，常驻显示（可编辑即渲染）。
|
||||
填了才生成 catalog：Chat 模式生成兼容路由、原生 Responses 生成
|
||||
model-catalogs.json；留空则不生成。排在自定义 UA 之前。 */}
|
||||
{canEditCatalog && (
|
||||
<div
|
||||
className={cn(
|
||||
"space-y-4",
|
||||
(shouldShowSpeedTest || (isChatFormat && canEditReasoning)) &&
|
||||
"border-t border-border-default pt-3",
|
||||
)}
|
||||
>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<FormLabel>
|
||||
{t("codexConfig.modelMappingTitle", {
|
||||
defaultValue: "模型映射",
|
||||
})}
|
||||
</FormLabel>
|
||||
{renderCatalogActionButtons(
|
||||
handleAddCatalogRow,
|
||||
t("codexConfig.addCatalogModel", {
|
||||
defaultValue: "添加模型",
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs leading-relaxed text-muted-foreground">
|
||||
{t("codexConfig.modelMappingHint", {
|
||||
defaultValue:
|
||||
"选择模型角色后，CC Switch 会自动生成 Codex 兼容路由；菜单显示名可以填 DeepSeek、Kimi 等品牌模型，实际请求模型按右侧填写内容发送。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{catalogRows.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{/* 列头：md+ 显示 */}
|
||||
<div className="hidden grid-cols-[1fr_1fr_140px_36px] gap-2 px-1 text-xs font-medium text-muted-foreground md:grid">
|
||||
<span>
|
||||
{t("codexConfig.catalogColumnDisplay", {
|
||||
defaultValue: "菜单显示名",
|
||||
})}
|
||||
</span>
|
||||
<span>
|
||||
{t("codexConfig.catalogColumnModel", {
|
||||
defaultValue: "实际请求模型",
|
||||
})}
|
||||
</span>
|
||||
<span>
|
||||
{t("codexConfig.catalogColumnContext", {
|
||||
defaultValue: "上下文窗口",
|
||||
})}
|
||||
</span>
|
||||
<span />
|
||||
</div>
|
||||
|
||||
{catalogRows.map((row, index) => (
|
||||
<div
|
||||
key={row.rowId}
|
||||
className="grid grid-cols-1 gap-2 md:grid-cols-[1fr_1fr_140px_36px]"
|
||||
>
|
||||
<Input
|
||||
value={row.displayName ?? ""}
|
||||
onChange={(event) =>
|
||||
handleUpdateCatalogRow(index, {
|
||||
displayName: event.target.value,
|
||||
})
|
||||
}
|
||||
placeholder={t(
|
||||
"codexConfig.catalogDisplayNamePlaceholder",
|
||||
{
|
||||
defaultValue: "例如: DeepSeek V4 Flash",
|
||||
},
|
||||
)}
|
||||
aria-label={t("codexConfig.catalogColumnDisplay", {
|
||||
defaultValue: "菜单显示名",
|
||||
})}
|
||||
/>
|
||||
<div className="flex gap-1">
|
||||
<Input
|
||||
value={row.model}
|
||||
onChange={(event) =>
|
||||
handleUpdateCatalogRow(index, {
|
||||
model: event.target.value,
|
||||
})
|
||||
}
|
||||
placeholder={t(
|
||||
"codexConfig.catalogModelPlaceholder",
|
||||
{
|
||||
defaultValue: "例如: deepseek-v4-flash",
|
||||
},
|
||||
)}
|
||||
aria-label={t("codexConfig.catalogColumnModel", {
|
||||
defaultValue: "实际请求模型",
|
||||
})}
|
||||
className="flex-1"
|
||||
/>
|
||||
{fetchedModels.length > 0 && (
|
||||
<ModelDropdown
|
||||
models={fetchedModels}
|
||||
onSelect={(id) =>
|
||||
handleUpdateCatalogRow(index, {
|
||||
model: id,
|
||||
displayName: row.displayName?.trim()
|
||||
? row.displayName
|
||||
: id,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
inputMode="numeric"
|
||||
value={row.contextWindow ?? ""}
|
||||
onChange={(event) =>
|
||||
handleUpdateCatalogRow(index, {
|
||||
contextWindow: event.target.value.replace(
|
||||
/[^\d]/g,
|
||||
"",
|
||||
),
|
||||
})
|
||||
}
|
||||
placeholder={t(
|
||||
"codexConfig.contextWindowPlaceholder",
|
||||
{
|
||||
defaultValue: "例如: 128000",
|
||||
},
|
||||
)}
|
||||
aria-label={t("codexConfig.catalogColumnContext", {
|
||||
defaultValue: "上下文窗口",
|
||||
})}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => handleRemoveCatalogRow(index)}
|
||||
title={t("common.delete", { defaultValue: "删除" })}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"space-y-3",
|
||||
(shouldShowSpeedTest ||
|
||||
(isChatFormat && canEditReasoning) ||
|
||||
canEditCatalog) &&
|
||||
"border-t border-border-default pt-3",
|
||||
)}
|
||||
>
|
||||
<CustomUserAgentField
|
||||
id="codex-custom-user-agent"
|
||||
value={customUserAgent}
|
||||
onChange={onCustomUserAgentChange}
|
||||
/>
|
||||
<div className="border-t border-border-default pt-3">
|
||||
<LocalProxyRequestOverridesField
|
||||
headersJson={localProxyHeadersOverride}
|
||||
bodyJson={localProxyBodyOverride}
|
||||
onHeadersJsonChange={onLocalProxyHeadersOverrideChange}
|
||||
onBodyJsonChange={onLocalProxyBodyOverrideChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
)}
|
||||
|
||||
{/* 端点测速弹窗 - Codex */}
|
||||
{shouldShowSpeedTest && isEndpointModalOpen && (
|
||||
<EndpointSpeedTest
|
||||
appId="codex"
|
||||
providerId={providerId}
|
||||
value={codexBaseUrl}
|
||||
onChange={onBaseUrlChange}
|
||||
initialEndpoints={speedTestEndpoints}
|
||||
visible={isEndpointModalOpen}
|
||||
onClose={() => onEndpointModalToggle(false)}
|
||||
autoSelect={autoSelect}
|
||||
onAutoSelectChange={onAutoSelectChange}
|
||||
onCustomEndpointsChange={onCustomEndpointsChange}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,353 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Loader2,
|
||||
LogOut,
|
||||
Copy,
|
||||
Check,
|
||||
ExternalLink,
|
||||
Plus,
|
||||
X,
|
||||
Sparkles,
|
||||
User,
|
||||
} from "lucide-react";
|
||||
import { useCodexOauth } from "./hooks/useCodexOauth";
|
||||
import { copyText } from "@/lib/clipboard";
|
||||
|
||||
interface CodexOAuthSectionProps {
|
||||
className?: string;
|
||||
/** 当前选中的 ChatGPT 账号 ID */
|
||||
selectedAccountId?: string | null;
|
||||
/** 账号选择回调 */
|
||||
onAccountSelect?: (accountId: string | null) => void;
|
||||
/** 是否开启 Codex FAST mode */
|
||||
fastModeEnabled?: boolean;
|
||||
/** FAST mode 切换回调 */
|
||||
onFastModeChange?: (enabled: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Codex OAuth 认证区块
|
||||
*
|
||||
* 通过 OpenAI Device Code 流程登录 ChatGPT Plus/Pro 账号，
|
||||
* 用于将 Claude Code 请求反代到 Codex 后端 API。
|
||||
*/
|
||||
export const CodexOAuthSection: React.FC<CodexOAuthSectionProps> = ({
|
||||
className,
|
||||
selectedAccountId,
|
||||
onAccountSelect,
|
||||
fastModeEnabled = false,
|
||||
onFastModeChange,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [copied, setCopied] = React.useState(false);
|
||||
|
||||
const {
|
||||
accounts,
|
||||
defaultAccountId,
|
||||
hasAnyAccount,
|
||||
pollingState,
|
||||
deviceCode,
|
||||
error,
|
||||
isPolling,
|
||||
isAddingAccount,
|
||||
isRemovingAccount,
|
||||
isSettingDefaultAccount,
|
||||
addAccount,
|
||||
removeAccount,
|
||||
setDefaultAccount,
|
||||
cancelAuth,
|
||||
logout,
|
||||
} = useCodexOauth();
|
||||
|
||||
const copyUserCode = async () => {
|
||||
if (deviceCode?.user_code) {
|
||||
await copyText(deviceCode.user_code);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccountSelect = (value: string) => {
|
||||
onAccountSelect?.(value === "none" ? null : value);
|
||||
};
|
||||
|
||||
const handleRemoveAccount = (accountId: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
removeAccount(accountId);
|
||||
if (selectedAccountId === accountId) {
|
||||
onAccountSelect?.(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`space-y-4 ${className || ""}`}>
|
||||
{/* 认证状态标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>{t("codexOauth.authStatus", "认证状态")}</Label>
|
||||
<Badge
|
||||
variant={hasAnyAccount ? "default" : "secondary"}
|
||||
className={hasAnyAccount ? "bg-green-500 hover:bg-green-600" : ""}
|
||||
>
|
||||
{hasAnyAccount
|
||||
? t("codexOauth.accountCount", {
|
||||
count: accounts.length,
|
||||
defaultValue: `${accounts.length} 个账号`,
|
||||
})
|
||||
: t("codexOauth.notAuthenticated", "未认证")}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* 账号选择器 */}
|
||||
{hasAnyAccount && onAccountSelect && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm text-muted-foreground">
|
||||
{t("codexOauth.selectAccount", "选择账号")}
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedAccountId || "none"}
|
||||
onValueChange={handleAccountSelect}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue
|
||||
placeholder={t(
|
||||
"codexOauth.selectAccountPlaceholder",
|
||||
"选择一个 ChatGPT 账号",
|
||||
)}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">
|
||||
<span className="text-muted-foreground">
|
||||
{t("codexOauth.useDefaultAccount", "使用默认账号")}
|
||||
</span>
|
||||
</SelectItem>
|
||||
{accounts.map((account) => (
|
||||
<SelectItem key={account.id} value={account.id}>
|
||||
<div className="flex items-center gap-2">
|
||||
<User className="h-4 w-4 text-muted-foreground" />
|
||||
<span>{account.login}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{onFastModeChange && (
|
||||
<div className="flex items-center justify-between rounded-md border bg-muted/30 p-3">
|
||||
<div className="space-y-1 pr-4">
|
||||
<Label className="text-sm font-medium">
|
||||
{t("codexOauth.fastMode", "FAST mode")}
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("codexOauth.fastModeDescription", {
|
||||
defaultValue:
|
||||
'Send service_tier="priority" for lower latency. Turn it off if the ChatGPT Codex backend rejects the parameter.',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={fastModeEnabled}
|
||||
onCheckedChange={onFastModeChange}
|
||||
aria-label={t("codexOauth.fastMode", "FAST mode")}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 已登录账号列表 */}
|
||||
{hasAnyAccount && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm text-muted-foreground">
|
||||
{t("codexOauth.loggedInAccounts", "已登录账号")}
|
||||
</Label>
|
||||
<div className="space-y-1">
|
||||
{accounts.map((account) => (
|
||||
<div
|
||||
key={account.id}
|
||||
className="flex items-center justify-between p-2 rounded-md border bg-muted/30"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<User className="h-5 w-5 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">{account.login}</span>
|
||||
{defaultAccountId === account.id && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{t("codexOauth.defaultAccount", "默认")}
|
||||
</Badge>
|
||||
)}
|
||||
{selectedAccountId === account.id && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{t("codexOauth.selected", "已选中")}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{defaultAccountId !== account.id && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-xs text-muted-foreground"
|
||||
onClick={() => setDefaultAccount(account.id)}
|
||||
disabled={isSettingDefaultAccount}
|
||||
>
|
||||
{t("codexOauth.setAsDefault", "设为默认")}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground hover:text-red-500"
|
||||
onClick={(e) => handleRemoveAccount(account.id, e)}
|
||||
disabled={isRemovingAccount}
|
||||
title={t("codexOauth.removeAccount", "移除账号")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 未认证 - 登录按钮 */}
|
||||
{!hasAnyAccount && pollingState === "idle" && (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={addAccount}
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
>
|
||||
<Sparkles className="mr-2 h-4 w-4" />
|
||||
{t("codexOauth.loginWithChatGPT", "使用 ChatGPT 登录")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 已有账号 - 添加更多按钮 */}
|
||||
{hasAnyAccount && pollingState === "idle" && (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={addAccount}
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
disabled={isAddingAccount}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{t("codexOauth.addAnotherAccount", "添加其他账号")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 轮询中状态 */}
|
||||
{isPolling && deviceCode && (
|
||||
<div className="space-y-3 p-4 rounded-lg border border-border bg-muted/50">
|
||||
<div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
{t("codexOauth.waitingForAuth", "等待授权中...")}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-xs text-muted-foreground mb-1">
|
||||
{t("codexOauth.enterCode", "在浏览器中输入以下代码：")}
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<code className="text-2xl font-mono font-bold tracking-wider bg-background px-4 py-2 rounded border">
|
||||
{deviceCode.user_code}
|
||||
</code>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={copyUserCode}
|
||||
title={t("codexOauth.copyCode", "复制代码")}
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4 text-green-500" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<a
|
||||
href={deviceCode.verification_uri}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-sm text-blue-500 hover:underline"
|
||||
>
|
||||
{deviceCode.verification_uri}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={cancelAuth}
|
||||
>
|
||||
{t("common.cancel", "取消")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 错误状态 */}
|
||||
{pollingState === "error" && error && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-red-500">{error}</p>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={addAccount}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
{t("codexOauth.retry", "重试")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={cancelAuth}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
>
|
||||
{t("common.cancel", "取消")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 注销所有账号 */}
|
||||
{hasAnyAccount && accounts.length > 1 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={logout}
|
||||
className="w-full text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950"
|
||||
>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
{t("codexOauth.logoutAll", "注销所有账号")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodexOAuthSection;
|
||||
@@ -0,0 +1,353 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Save, Download, Loader2, Package } from "lucide-react";
|
||||
import JsonEditor from "@/components/JsonEditor";
|
||||
|
||||
interface CommonConfigEditorProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
useCommonConfig: boolean;
|
||||
onCommonConfigToggle: (checked: boolean) => void;
|
||||
commonConfigSnippet: string;
|
||||
onCommonConfigSnippetChange: (value: string) => void;
|
||||
commonConfigError: string;
|
||||
onEditClick: () => void;
|
||||
isModalOpen: boolean;
|
||||
onModalClose: () => void;
|
||||
onExtract?: () => void;
|
||||
isExtracting?: boolean;
|
||||
}
|
||||
|
||||
export function CommonConfigEditor({
|
||||
value,
|
||||
onChange,
|
||||
useCommonConfig,
|
||||
onCommonConfigToggle,
|
||||
commonConfigSnippet,
|
||||
onCommonConfigSnippetChange,
|
||||
commonConfigError,
|
||||
onEditClick,
|
||||
isModalOpen,
|
||||
onModalClose,
|
||||
onExtract,
|
||||
isExtracting,
|
||||
}: CommonConfigEditorProps) {
|
||||
const { t } = useTranslation();
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
// Mirror value prop to local state so checkbox toggles and JsonEditor stay in sync
|
||||
// (parent uses form.getValues which doesn't trigger re-renders)
|
||||
const [localValue, setLocalValue] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalValue(value);
|
||||
}, [value]);
|
||||
|
||||
const handleLocalChange = useCallback(
|
||||
(newValue: string) => {
|
||||
setLocalValue(newValue);
|
||||
onChange(newValue);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
const toggleStates = useMemo(() => {
|
||||
try {
|
||||
const config = JSON.parse(localValue);
|
||||
return {
|
||||
hideAttribution:
|
||||
config?.attribution?.commit === "" && config?.attribution?.pr === "",
|
||||
teammates:
|
||||
config?.env?.CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS === "1" ||
|
||||
config?.env?.CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS === 1,
|
||||
enableToolSearch:
|
||||
config?.env?.ENABLE_TOOL_SEARCH === "true" ||
|
||||
config?.env?.ENABLE_TOOL_SEARCH === "1",
|
||||
effortMax: config?.env?.CLAUDE_CODE_EFFORT_LEVEL === "max",
|
||||
disableAutoUpgrade:
|
||||
config?.env?.DISABLE_AUTOUPDATER === "1" ||
|
||||
config?.env?.DISABLE_AUTOUPDATER === 1,
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
hideAttribution: false,
|
||||
teammates: false,
|
||||
enableToolSearch: false,
|
||||
effortMax: false,
|
||||
disableAutoUpgrade: false,
|
||||
};
|
||||
}
|
||||
}, [localValue]);
|
||||
|
||||
const handleToggle = useCallback(
|
||||
(toggleKey: string, checked: boolean) => {
|
||||
try {
|
||||
const config = JSON.parse(localValue || "{}");
|
||||
|
||||
switch (toggleKey) {
|
||||
case "hideAttribution":
|
||||
if (checked) {
|
||||
config.attribution = { commit: "", pr: "" };
|
||||
} else {
|
||||
delete config.attribution;
|
||||
}
|
||||
break;
|
||||
case "teammates":
|
||||
if (!config.env) config.env = {};
|
||||
if (checked) {
|
||||
config.env.CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS = "1";
|
||||
} else {
|
||||
delete config.env.CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS;
|
||||
if (Object.keys(config.env).length === 0) delete config.env;
|
||||
}
|
||||
break;
|
||||
case "enableToolSearch":
|
||||
if (!config.env) config.env = {};
|
||||
if (checked) {
|
||||
config.env.ENABLE_TOOL_SEARCH = "true";
|
||||
} else {
|
||||
delete config.env.ENABLE_TOOL_SEARCH;
|
||||
if (Object.keys(config.env).length === 0) delete config.env;
|
||||
}
|
||||
break;
|
||||
case "effortMax":
|
||||
if (!config.env) config.env = {};
|
||||
if (checked) {
|
||||
config.env.CLAUDE_CODE_EFFORT_LEVEL = "max";
|
||||
} else {
|
||||
delete config.env.CLAUDE_CODE_EFFORT_LEVEL;
|
||||
if (Object.keys(config.env).length === 0) delete config.env;
|
||||
}
|
||||
break;
|
||||
case "disableAutoUpgrade":
|
||||
if (!config.env) config.env = {};
|
||||
if (checked) {
|
||||
config.env.DISABLE_AUTOUPDATER = "1";
|
||||
} else {
|
||||
delete config.env.DISABLE_AUTOUPDATER;
|
||||
if (Object.keys(config.env).length === 0) delete config.env;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
handleLocalChange(JSON.stringify(config, null, 2));
|
||||
} catch {
|
||||
// Don't modify if JSON is invalid
|
||||
}
|
||||
},
|
||||
[localValue, handleLocalChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="settingsConfig">{t("provider.configJson")}</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="useCommonConfig"
|
||||
checked={useCommonConfig}
|
||||
onChange={(e) => onCommonConfigToggle(e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
<span>
|
||||
{t("claudeConfig.writeCommonConfig", {
|
||||
defaultValue: "应用通用配置",
|
||||
})}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onEditClick}
|
||||
className="text-xs text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
|
||||
>
|
||||
{t("claudeConfig.editCommonConfig", {
|
||||
defaultValue: "编辑通用配置",
|
||||
})}
|
||||
</button>
|
||||
</div>
|
||||
{commonConfigError && !isModalOpen && (
|
||||
<p className="text-xs text-red-500 dark:text-red-400 text-right">
|
||||
{commonConfigError}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1">
|
||||
<label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={toggleStates.hideAttribution}
|
||||
onChange={(e) =>
|
||||
handleToggle("hideAttribution", e.target.checked)
|
||||
}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
<span>{t("claudeConfig.hideAttribution")}</span>
|
||||
</label>
|
||||
<label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={toggleStates.teammates}
|
||||
onChange={(e) => handleToggle("teammates", e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
<span>{t("claudeConfig.enableTeammates")}</span>
|
||||
</label>
|
||||
<label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={toggleStates.enableToolSearch}
|
||||
onChange={(e) =>
|
||||
handleToggle("enableToolSearch", e.target.checked)
|
||||
}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
<span>{t("claudeConfig.enableToolSearch")}</span>
|
||||
</label>
|
||||
<label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={toggleStates.effortMax}
|
||||
onChange={(e) => handleToggle("effortMax", e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
<span>{t("claudeConfig.effortMax")}</span>
|
||||
</label>
|
||||
<label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={toggleStates.disableAutoUpgrade}
|
||||
onChange={(e) =>
|
||||
handleToggle("disableAutoUpgrade", e.target.checked)
|
||||
}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
<span>{t("claudeConfig.disableAutoUpgrade")}</span>
|
||||
</label>
|
||||
</div>
|
||||
<JsonEditor
|
||||
value={localValue}
|
||||
onChange={handleLocalChange}
|
||||
placeholder={`{
|
||||
"env": {
|
||||
"ANTHROPIC_BASE_URL": "https://your-api-endpoint.com",
|
||||
"ANTHROPIC_AUTH_TOKEN": "your-api-key-here"
|
||||
}
|
||||
}`}
|
||||
darkMode={isDarkMode}
|
||||
rows={14}
|
||||
showValidation={true}
|
||||
language="json"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FullScreenPanel
|
||||
isOpen={isModalOpen}
|
||||
title={t("claudeConfig.editCommonConfigTitle", {
|
||||
defaultValue: "编辑通用配置片段",
|
||||
})}
|
||||
onClose={onModalClose}
|
||||
footer={
|
||||
<>
|
||||
{onExtract && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onExtract}
|
||||
disabled={isExtracting}
|
||||
className="gap-2"
|
||||
>
|
||||
{isExtracting ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Download className="w-4 h-4" />
|
||||
)}
|
||||
{t("claudeConfig.extractFromCurrent", {
|
||||
defaultValue: "从编辑内容提取",
|
||||
})}
|
||||
</Button>
|
||||
)}
|
||||
<Button type="button" variant="outline" onClick={onModalClose}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button type="button" onClick={onModalClose} className="gap-2">
|
||||
<Save className="w-4 h-4" />
|
||||
{t("common.save")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/30 p-3 space-y-1.5">
|
||||
<p className="text-sm font-medium text-blue-800 dark:text-blue-300">
|
||||
{t("commonConfig.guideTitle")}
|
||||
</p>
|
||||
<p className="text-xs text-blue-700/80 dark:text-blue-400/80">
|
||||
{t("commonConfig.guidePurpose")}
|
||||
</p>
|
||||
<p className="text-xs text-blue-700/80 dark:text-blue-400/80">
|
||||
{t("commonConfig.guideUsage")}
|
||||
</p>
|
||||
<p className="text-xs text-blue-700/80 dark:text-blue-400/80">
|
||||
{t("commonConfig.guideReExtract")}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("commonConfig.guideReassurance")}
|
||||
</p>
|
||||
</div>
|
||||
{(!commonConfigSnippet ||
|
||||
commonConfigSnippet.trim() === "" ||
|
||||
commonConfigSnippet.trim() === "{}") && (
|
||||
<div className="flex flex-col items-center justify-center py-6 text-center text-muted-foreground">
|
||||
<Package className="h-8 w-8 mb-2 opacity-40" />
|
||||
<p className="text-sm font-medium">
|
||||
{t("commonConfig.emptyTitle")}
|
||||
</p>
|
||||
<p className="text-xs mt-1">{t("commonConfig.emptyHint")}</p>
|
||||
</div>
|
||||
)}
|
||||
<JsonEditor
|
||||
value={commonConfigSnippet}
|
||||
onChange={onCommonConfigSnippetChange}
|
||||
placeholder={`{
|
||||
"env": {
|
||||
"ANTHROPIC_BASE_URL": "https://your-api-endpoint.com"
|
||||
}
|
||||
}`}
|
||||
darkMode={isDarkMode}
|
||||
rows={16}
|
||||
showValidation={true}
|
||||
language="json"
|
||||
/>
|
||||
{commonConfigError && (
|
||||
<p className="text-sm text-red-500 dark:text-red-400">
|
||||
{commonConfigError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</FullScreenPanel>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,427 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Loader2,
|
||||
Github,
|
||||
LogOut,
|
||||
Copy,
|
||||
Check,
|
||||
ExternalLink,
|
||||
Plus,
|
||||
X,
|
||||
User,
|
||||
} from "lucide-react";
|
||||
import { useCopilotAuth } from "./hooks/useCopilotAuth";
|
||||
import { copyText } from "@/lib/clipboard";
|
||||
import type { GitHubAccount } from "@/lib/api";
|
||||
|
||||
interface CopilotAuthSectionProps {
|
||||
className?: string;
|
||||
/** 当前选中的 GitHub 账号 ID */
|
||||
selectedAccountId?: string | null;
|
||||
/** 账号选择回调 */
|
||||
onAccountSelect?: (accountId: string | null) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Copilot OAuth 认证区块
|
||||
*
|
||||
* 显示 GitHub Copilot 的认证状态，支持多账号管理和选择。
|
||||
*/
|
||||
export const CopilotAuthSection: React.FC<CopilotAuthSectionProps> = ({
|
||||
className,
|
||||
selectedAccountId,
|
||||
onAccountSelect,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [copied, setCopied] = React.useState(false);
|
||||
const [deploymentType, setDeploymentType] = React.useState<
|
||||
"github.com" | "enterprise"
|
||||
>("github.com");
|
||||
const [enterpriseDomain, setEnterpriseDomain] = React.useState("");
|
||||
|
||||
// 根据部署类型计算实际的 GitHub 域名
|
||||
const effectiveGithubDomain =
|
||||
deploymentType === "enterprise" && enterpriseDomain.trim()
|
||||
? enterpriseDomain
|
||||
.trim()
|
||||
.replace(/^https?:\/\//, "")
|
||||
.replace(/\/$/, "")
|
||||
: undefined;
|
||||
|
||||
const {
|
||||
accounts,
|
||||
defaultAccountId,
|
||||
migrationError,
|
||||
hasAnyAccount,
|
||||
pollingState,
|
||||
deviceCode,
|
||||
error,
|
||||
isPolling,
|
||||
isAddingAccount,
|
||||
isRemovingAccount,
|
||||
isSettingDefaultAccount,
|
||||
addAccount,
|
||||
removeAccount,
|
||||
setDefaultAccount,
|
||||
cancelAuth,
|
||||
logout,
|
||||
} = useCopilotAuth(effectiveGithubDomain);
|
||||
|
||||
// 复制用户码
|
||||
const copyUserCode = async () => {
|
||||
if (deviceCode?.user_code) {
|
||||
await copyText(deviceCode.user_code);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理账号选择
|
||||
const handleAccountSelect = (value: string) => {
|
||||
onAccountSelect?.(value === "none" ? null : value);
|
||||
};
|
||||
|
||||
// 处理移除账号
|
||||
const handleRemoveAccount = (accountId: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
removeAccount(accountId);
|
||||
// 如果移除的是当前选中的账号，清除选择
|
||||
if (selectedAccountId === accountId) {
|
||||
onAccountSelect?.(null);
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染账号头像
|
||||
const renderAvatar = (account: GitHubAccount) => {
|
||||
return <CopilotAccountAvatar account={account} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`space-y-4 ${className || ""}`}>
|
||||
{/* 认证状态标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>{t("copilot.authStatus", "GitHub Copilot 认证")}</Label>
|
||||
<Badge
|
||||
variant={hasAnyAccount ? "default" : "secondary"}
|
||||
className={hasAnyAccount ? "bg-green-500 hover:bg-green-600" : ""}
|
||||
>
|
||||
{hasAnyAccount
|
||||
? t("copilot.accountCount", {
|
||||
count: accounts.length,
|
||||
defaultValue: `${accounts.length} 个账号`,
|
||||
})
|
||||
: t("copilot.notAuthenticated", "未认证")}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* GitHub 部署类型选择 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm text-muted-foreground">
|
||||
{t("copilot.deploymentType", "GitHub 部署类型")}
|
||||
</Label>
|
||||
<Select
|
||||
value={deploymentType}
|
||||
onValueChange={(v) =>
|
||||
setDeploymentType(v as "github.com" | "enterprise")
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="github.com">
|
||||
{t("copilot.deploymentGitHubCom", "GitHub.com")}
|
||||
</SelectItem>
|
||||
<SelectItem value="enterprise">
|
||||
{t("copilot.deploymentEnterprise", "GitHub Enterprise Server")}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{deploymentType === "enterprise" && (
|
||||
<Input
|
||||
placeholder={t(
|
||||
"copilot.enterpriseDomainPlaceholder",
|
||||
"例如：company.ghe.com",
|
||||
)}
|
||||
value={enterpriseDomain}
|
||||
onChange={(e) => setEnterpriseDomain(e.target.value)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{migrationError && (
|
||||
<p className="text-sm text-amber-600 dark:text-amber-400">
|
||||
{t("copilot.migrationFailed", {
|
||||
error: migrationError,
|
||||
defaultValue: `旧认证数据迁移失败：${migrationError}`,
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 账号选择器（有账号时显示） */}
|
||||
{hasAnyAccount && onAccountSelect && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm text-muted-foreground">
|
||||
{t("copilot.selectAccount", "选择账号")}
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedAccountId || "none"}
|
||||
onValueChange={handleAccountSelect}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue
|
||||
placeholder={t(
|
||||
"copilot.selectAccountPlaceholder",
|
||||
"选择一个 GitHub 账号",
|
||||
)}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">
|
||||
<span className="text-muted-foreground">
|
||||
{t("copilot.useDefaultAccount", "使用默认账号")}
|
||||
</span>
|
||||
</SelectItem>
|
||||
{accounts.map((account) => (
|
||||
<SelectItem key={account.id} value={account.id}>
|
||||
<div className="flex items-center gap-2">
|
||||
{renderAvatar(account)}
|
||||
<span>{account.login}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 已登录账号列表 */}
|
||||
{hasAnyAccount && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm text-muted-foreground">
|
||||
{t("copilot.loggedInAccounts", "已登录账号")}
|
||||
</Label>
|
||||
<div className="space-y-1">
|
||||
{accounts.map((account) => (
|
||||
<div
|
||||
key={account.id}
|
||||
className="flex items-center justify-between p-2 rounded-md border bg-muted/30"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{renderAvatar(account)}
|
||||
<span className="text-sm font-medium">{account.login}</span>
|
||||
{defaultAccountId === account.id && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{t("copilot.defaultAccount", "默认")}
|
||||
</Badge>
|
||||
)}
|
||||
{account.github_domain &&
|
||||
account.github_domain !== "github.com" && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{account.github_domain}
|
||||
</Badge>
|
||||
)}
|
||||
{selectedAccountId === account.id && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{t("copilot.selected", "已选中")}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{defaultAccountId !== account.id && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-xs text-muted-foreground"
|
||||
onClick={() => setDefaultAccount(account.id)}
|
||||
disabled={isSettingDefaultAccount}
|
||||
>
|
||||
{t("copilot.setAsDefault", "设为默认")}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground hover:text-red-500"
|
||||
onClick={(e) => handleRemoveAccount(account.id, e)}
|
||||
disabled={isRemovingAccount}
|
||||
title={t("copilot.removeAccount", "移除账号")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 未认证状态 - 登录按钮 */}
|
||||
{!hasAnyAccount && pollingState === "idle" && (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={addAccount}
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
disabled={deploymentType === "enterprise" && !enterpriseDomain.trim()}
|
||||
>
|
||||
<Github className="mr-2 h-4 w-4" />
|
||||
{t("copilot.loginWithGitHub", "使用 GitHub 登录")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 已有账号 - 添加更多账号按钮 */}
|
||||
{hasAnyAccount && pollingState === "idle" && (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={addAccount}
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
disabled={
|
||||
isAddingAccount ||
|
||||
(deploymentType === "enterprise" && !enterpriseDomain.trim())
|
||||
}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{t("copilot.addAnotherAccount", "添加其他账号")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 轮询中状态 */}
|
||||
{isPolling && deviceCode && (
|
||||
<div className="space-y-3 p-4 rounded-lg border border-border bg-muted/50">
|
||||
<div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
{t("copilot.waitingForAuth", "等待授权中...")}
|
||||
</div>
|
||||
|
||||
{/* 用户码 */}
|
||||
<div className="text-center">
|
||||
<p className="text-xs text-muted-foreground mb-1">
|
||||
{t("copilot.enterCode", "在浏览器中输入以下代码：")}
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<code className="text-2xl font-mono font-bold tracking-wider bg-background px-4 py-2 rounded border">
|
||||
{deviceCode.user_code}
|
||||
</code>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={copyUserCode}
|
||||
title={t("copilot.copyCode", "复制代码")}
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4 text-green-500" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 验证链接 */}
|
||||
<div className="text-center">
|
||||
<a
|
||||
href={deviceCode.verification_uri}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-sm text-blue-500 hover:underline"
|
||||
>
|
||||
{deviceCode.verification_uri}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* 取消按钮 */}
|
||||
<div className="text-center">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={cancelAuth}
|
||||
>
|
||||
{t("common.cancel", "取消")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 错误状态 */}
|
||||
{pollingState === "error" && error && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-red-500">{error}</p>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={addAccount}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
{t("copilot.retry", "重试")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={cancelAuth}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
>
|
||||
{t("common.cancel", "取消")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 注销所有账号按钮 */}
|
||||
{hasAnyAccount && accounts.length > 1 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={logout}
|
||||
className="w-full text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950"
|
||||
>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
{t("copilot.logoutAll", "注销所有账号")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CopilotAccountAvatar: React.FC<{ account: GitHubAccount }> = ({
|
||||
account,
|
||||
}) => {
|
||||
const [failed, setFailed] = React.useState(false);
|
||||
|
||||
if (!account.avatar_url || failed) {
|
||||
return <User className="h-5 w-5 text-muted-foreground" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
src={account.avatar_url}
|
||||
alt={account.login}
|
||||
className="h-5 w-5 rounded-full"
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer"
|
||||
onError={() => setFailed(true)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default CopilotAuthSection;
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { FormLabel } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { isValidUserAgentHeader } from "@/lib/userAgent";
|
||||
import { USER_AGENT_PRESETS } from "@/config/userAgentPresets";
|
||||
|
||||
interface CustomUserAgentFieldProps {
|
||||
/** 输入框的 id（用于 label htmlFor）；两个表单需传入各自唯一值。 */
|
||||
id: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 供应商级自定义 User-Agent 字段（Claude / Codex 表单共用）。
|
||||
*
|
||||
* 含标签 + 输入框 + 右侧预设下拉菜单 + 实时合法性提示。校验口径与后端
|
||||
* `parse_custom_user_agent` 一致（见 `@/lib/userAgent`），非法时给非阻断红字提示
|
||||
* （运行时仍会静默忽略）。
|
||||
*/
|
||||
export function CustomUserAgentField({
|
||||
id,
|
||||
value,
|
||||
onChange,
|
||||
}: CustomUserAgentFieldProps) {
|
||||
const { t } = useTranslation();
|
||||
const valid = isValidUserAgentHeader(value);
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<FormLabel htmlFor={id}>
|
||||
{t("providerForm.customUserAgent", {
|
||||
defaultValue: "自定义 User-Agent",
|
||||
})}
|
||||
</FormLabel>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
id={id}
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder="Mozilla/5.0 ..."
|
||||
autoComplete="off"
|
||||
className="flex-1"
|
||||
/>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button type="button" variant="outline" className="shrink-0 gap-1">
|
||||
{t("providerForm.customUserAgentPresets", {
|
||||
defaultValue: "预设",
|
||||
})}
|
||||
<ChevronDown className="h-3.5 w-3.5 opacity-60" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="max-h-64 overflow-y-auto z-[200]"
|
||||
>
|
||||
{USER_AGENT_PRESETS.map((preset) => (
|
||||
<DropdownMenuItem
|
||||
key={preset}
|
||||
onSelect={() => onChange(preset)}
|
||||
className="font-mono text-xs"
|
||||
>
|
||||
{preset}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
{valid ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("providerForm.customUserAgentHint", {
|
||||
defaultValue:
|
||||
"仅在开启本地路由/代理接管后生效，会替换转发到供应商 API 请求中的 User-Agent。",
|
||||
})}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-destructive">
|
||||
{t("providerForm.customUserAgentInvalid", {
|
||||
defaultValue:
|
||||
"User-Agent 不能包含控制字符（如换行符），否则将被忽略。",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,656 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Zap, Loader2, Plus, X, AlertCircle, Save } from "lucide-react";
|
||||
import type { AppId } from "@/lib/api";
|
||||
import { vscodeApi } from "@/lib/api/vscode";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
|
||||
import type { CustomEndpoint, EndpointCandidate } from "@/types";
|
||||
|
||||
// 端点测速超时配置（秒）
|
||||
const ENDPOINT_TIMEOUT_SECS: Record<AppId, number> = {
|
||||
codex: 12,
|
||||
claude: 8,
|
||||
"claude-desktop": 8,
|
||||
gemini: 8,
|
||||
opencode: 8,
|
||||
openclaw: 8,
|
||||
hermes: 8,
|
||||
};
|
||||
|
||||
interface TestResult {
|
||||
url: string;
|
||||
latency: number | null;
|
||||
status?: number;
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
interface EndpointSpeedTestProps {
|
||||
appId: AppId;
|
||||
providerId?: string;
|
||||
value: string;
|
||||
onChange: (url: string) => void;
|
||||
initialEndpoints: EndpointCandidate[];
|
||||
visible?: boolean;
|
||||
onClose: () => void;
|
||||
autoSelect: boolean;
|
||||
onAutoSelectChange: (checked: boolean) => void;
|
||||
// 新建模式：当自定义端点列表变化时回传（仅包含 isCustom 的条目）
|
||||
// 编辑模式：不使用此回调，端点直接保存到后端
|
||||
onCustomEndpointsChange?: (urls: string[]) => void;
|
||||
}
|
||||
|
||||
interface EndpointEntry extends EndpointCandidate {
|
||||
id: string;
|
||||
latency: number | null;
|
||||
status?: number;
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
const randomId = () => `ep_${Math.random().toString(36).slice(2, 9)}`;
|
||||
|
||||
const normalizeEndpointUrl = (url: string): string =>
|
||||
url.trim().replace(/\/+$/, "");
|
||||
|
||||
const buildInitialEntries = (
|
||||
candidates: EndpointCandidate[],
|
||||
selected: string,
|
||||
): EndpointEntry[] => {
|
||||
const map = new Map<string, EndpointEntry>();
|
||||
const addCandidate = (candidate: EndpointCandidate) => {
|
||||
const sanitized = candidate.url ? normalizeEndpointUrl(candidate.url) : "";
|
||||
if (!sanitized) return;
|
||||
if (map.has(sanitized)) return;
|
||||
|
||||
map.set(sanitized, {
|
||||
id: candidate.id ?? randomId(),
|
||||
url: sanitized,
|
||||
isCustom: candidate.isCustom ?? false,
|
||||
latency: null,
|
||||
status: undefined,
|
||||
error: null,
|
||||
});
|
||||
};
|
||||
|
||||
candidates.forEach(addCandidate);
|
||||
|
||||
const selectedUrl = normalizeEndpointUrl(selected);
|
||||
if (selectedUrl && !map.has(selectedUrl)) {
|
||||
addCandidate({ url: selectedUrl, isCustom: true });
|
||||
}
|
||||
|
||||
return Array.from(map.values());
|
||||
};
|
||||
|
||||
const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
|
||||
appId,
|
||||
providerId,
|
||||
value,
|
||||
onChange,
|
||||
initialEndpoints,
|
||||
visible = true,
|
||||
onClose,
|
||||
autoSelect,
|
||||
onAutoSelectChange,
|
||||
onCustomEndpointsChange,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [entries, setEntries] = useState<EndpointEntry[]>(() =>
|
||||
buildInitialEntries(initialEndpoints, value),
|
||||
);
|
||||
const [customUrl, setCustomUrl] = useState("");
|
||||
const [addError, setAddError] = useState<string | null>(null);
|
||||
const [isTesting, setIsTesting] = useState(false);
|
||||
const [lastError, setLastError] = useState<string | null>(null);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// 记录初始的自定义端点，用于对比变化
|
||||
const [initialCustomUrls, setInitialCustomUrls] = useState<Set<string>>(
|
||||
new Set(),
|
||||
);
|
||||
|
||||
const normalizedSelected = normalizeEndpointUrl(value);
|
||||
|
||||
const hasEndpoints = entries.length > 0;
|
||||
const isEditMode = Boolean(providerId); // 编辑模式有 providerId
|
||||
|
||||
// 编辑模式：加载已保存的自定义端点
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const loadCustomEndpoints = async () => {
|
||||
try {
|
||||
if (!providerId) return; // 新建模式不加载
|
||||
|
||||
const customEndpoints = await vscodeApi.getCustomEndpoints(
|
||||
appId,
|
||||
providerId,
|
||||
);
|
||||
|
||||
if (cancelled) return;
|
||||
|
||||
const candidates: EndpointCandidate[] = customEndpoints.map(
|
||||
(ep: CustomEndpoint) => ({
|
||||
url: ep.url,
|
||||
isCustom: true,
|
||||
}),
|
||||
);
|
||||
|
||||
// 记录初始的自定义端点
|
||||
const customUrls = new Set(
|
||||
customEndpoints.map((ep) => normalizeEndpointUrl(ep.url)),
|
||||
);
|
||||
setInitialCustomUrls(customUrls);
|
||||
|
||||
// 合并自定义端点与初始端点
|
||||
setEntries((prev) => {
|
||||
const map = new Map<string, EndpointEntry>();
|
||||
|
||||
// 先添加现有端点（来自预设，isCustom 可能为 false）
|
||||
prev.forEach((entry) => {
|
||||
map.set(entry.url, entry);
|
||||
});
|
||||
|
||||
// 合并从后端加载的自定义端点
|
||||
// 关键：如果 URL 已存在（与预设重合），需要将 isCustom 更新为 true
|
||||
// 因为它存在于数据库中，需要在 handleSave 时被正确识别
|
||||
candidates.forEach((candidate) => {
|
||||
const sanitized = normalizeEndpointUrl(candidate.url);
|
||||
if (!sanitized) return;
|
||||
|
||||
const existing = map.get(sanitized);
|
||||
if (existing) {
|
||||
// URL 已存在，更新 isCustom 为 true（因为它在数据库中）
|
||||
existing.isCustom = true;
|
||||
} else {
|
||||
// URL 不存在，添加新条目
|
||||
map.set(sanitized, {
|
||||
id: randomId(),
|
||||
url: sanitized,
|
||||
isCustom: true,
|
||||
latency: null,
|
||||
status: undefined,
|
||||
error: null,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return Array.from(map.values());
|
||||
});
|
||||
} catch (error) {
|
||||
if (!cancelled) {
|
||||
console.error(t("endpointTest.loadEndpointsFailed"), error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 只在编辑模式下加载
|
||||
if (providerId) {
|
||||
loadCustomEndpoints();
|
||||
}
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [appId, providerId, t, initialEndpoints]);
|
||||
|
||||
// 新建模式：将自定义端点变化透传给父组件（仅限 isCustom）
|
||||
// 编辑模式：不使用此回调，端点已通过 API 直接保存
|
||||
useEffect(() => {
|
||||
if (!onCustomEndpointsChange || isEditMode) return; // 编辑模式不使用回调
|
||||
try {
|
||||
const customUrls = Array.from(
|
||||
new Set(
|
||||
entries
|
||||
.filter((e) => e.isCustom)
|
||||
.map((e) => (e.url ? normalizeEndpointUrl(e.url) : ""))
|
||||
.filter(Boolean),
|
||||
),
|
||||
);
|
||||
onCustomEndpointsChange(customUrls);
|
||||
} catch (err) {
|
||||
// ignore
|
||||
}
|
||||
}, [entries, onCustomEndpointsChange, isEditMode]);
|
||||
|
||||
const sortedEntries = useMemo(() => {
|
||||
return entries.slice().sort((a: TestResult, b: TestResult) => {
|
||||
const aLatency = a.latency ?? Number.POSITIVE_INFINITY;
|
||||
const bLatency = b.latency ?? Number.POSITIVE_INFINITY;
|
||||
if (aLatency === bLatency) {
|
||||
return a.url.localeCompare(b.url);
|
||||
}
|
||||
return aLatency - bLatency;
|
||||
});
|
||||
}, [entries]);
|
||||
|
||||
const handleAddEndpoint = useCallback(async () => {
|
||||
const candidate = customUrl.trim();
|
||||
let errorMsg: string | null = null;
|
||||
|
||||
if (!candidate) {
|
||||
errorMsg = t("endpointTest.enterValidUrl");
|
||||
}
|
||||
|
||||
let parsed: URL | null = null;
|
||||
if (!errorMsg) {
|
||||
try {
|
||||
parsed = new URL(candidate);
|
||||
} catch {
|
||||
errorMsg = t("endpointTest.invalidUrlFormat");
|
||||
}
|
||||
}
|
||||
|
||||
// 明确只允许 http: 和 https:
|
||||
const allowedProtocols = ["http:", "https:"];
|
||||
if (!errorMsg && parsed && !allowedProtocols.includes(parsed.protocol)) {
|
||||
errorMsg = t("endpointTest.onlyHttps");
|
||||
}
|
||||
|
||||
let sanitized = "";
|
||||
if (!errorMsg && parsed) {
|
||||
sanitized = normalizeEndpointUrl(parsed.toString());
|
||||
// 使用当前 entries 做去重校验
|
||||
const isDuplicate = entries.some((entry) => entry.url === sanitized);
|
||||
if (isDuplicate) {
|
||||
errorMsg = t("endpointTest.urlExists");
|
||||
}
|
||||
}
|
||||
|
||||
if (errorMsg) {
|
||||
setAddError(errorMsg);
|
||||
return;
|
||||
}
|
||||
|
||||
setAddError(null);
|
||||
setLastError(null);
|
||||
|
||||
// 更新本地状态（延迟保存，点击保存按钮时统一处理）
|
||||
setEntries((prev) => {
|
||||
if (prev.some((e) => e.url === sanitized)) return prev;
|
||||
return [
|
||||
...prev,
|
||||
{
|
||||
id: randomId(),
|
||||
url: sanitized,
|
||||
isCustom: true,
|
||||
latency: null,
|
||||
status: undefined,
|
||||
error: null,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
if (!normalizedSelected) {
|
||||
onChange(sanitized);
|
||||
}
|
||||
|
||||
setCustomUrl("");
|
||||
}, [customUrl, entries, normalizedSelected, onChange, t]);
|
||||
|
||||
const handleRemoveEndpoint = useCallback(
|
||||
(entry: EndpointEntry) => {
|
||||
// 清空之前的错误提示
|
||||
setLastError(null);
|
||||
|
||||
// 更新本地状态（延迟保存，点击保存按钮时统一处理）
|
||||
setEntries((prev) => {
|
||||
const next = prev.filter((item) => item.id !== entry.id);
|
||||
if (entry.url === normalizedSelected) {
|
||||
const fallback = next[0];
|
||||
onChange(fallback ? fallback.url : "");
|
||||
}
|
||||
return next;
|
||||
});
|
||||
},
|
||||
[normalizedSelected, onChange],
|
||||
);
|
||||
|
||||
const runSpeedTest = useCallback(async () => {
|
||||
const urls = entries.map((entry) => entry.url);
|
||||
if (urls.length === 0) {
|
||||
setLastError(t("endpointTest.pleaseAddEndpoint"));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsTesting(true);
|
||||
setLastError(null);
|
||||
|
||||
// 清空所有延迟数据，显示 loading 状态
|
||||
setEntries((prev) =>
|
||||
prev.map((entry) => ({
|
||||
...entry,
|
||||
latency: null,
|
||||
status: undefined,
|
||||
error: null,
|
||||
})),
|
||||
);
|
||||
|
||||
try {
|
||||
const results = await vscodeApi.testApiEndpoints(urls, {
|
||||
timeoutSecs: ENDPOINT_TIMEOUT_SECS[appId],
|
||||
});
|
||||
|
||||
const resultMap = new Map(
|
||||
results.map((item) => [normalizeEndpointUrl(item.url), item]),
|
||||
);
|
||||
|
||||
setEntries((prev) =>
|
||||
prev.map((entry) => {
|
||||
const match = resultMap.get(entry.url);
|
||||
if (!match) {
|
||||
return {
|
||||
...entry,
|
||||
latency: null,
|
||||
status: undefined,
|
||||
error: t("endpointTest.noResult"),
|
||||
};
|
||||
}
|
||||
return {
|
||||
...entry,
|
||||
latency:
|
||||
typeof match.latency === "number"
|
||||
? Math.round(match.latency)
|
||||
: null,
|
||||
status: match.status,
|
||||
error: match.error ?? null,
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
if (autoSelect) {
|
||||
const successful = results
|
||||
.filter(
|
||||
(item) => typeof item.latency === "number" && item.latency !== null,
|
||||
)
|
||||
.sort((a, b) => (a.latency! || 0) - (b.latency! || 0));
|
||||
const best = successful[0];
|
||||
if (best && best.url && best.url !== normalizedSelected) {
|
||||
onChange(best.url);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
const message =
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: `${t("endpointTest.testFailed", { error: String(error) })}`;
|
||||
setLastError(message);
|
||||
} finally {
|
||||
setIsTesting(false);
|
||||
}
|
||||
}, [entries, autoSelect, appId, normalizedSelected, onChange, t]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(url: string) => {
|
||||
if (!url || url === normalizedSelected) return;
|
||||
onChange(url);
|
||||
},
|
||||
[normalizedSelected, onChange],
|
||||
);
|
||||
|
||||
// 保存端点变更
|
||||
const handleSave = useCallback(async () => {
|
||||
// 编辑模式：对比初始端点和当前端点，批量保存变更
|
||||
if (isEditMode && providerId) {
|
||||
setIsSaving(true);
|
||||
setLastError(null);
|
||||
|
||||
try {
|
||||
// 获取当前的自定义端点
|
||||
const currentCustomUrls = new Set(
|
||||
entries
|
||||
.filter((e) => e.isCustom)
|
||||
.map((e) => normalizeEndpointUrl(e.url)),
|
||||
);
|
||||
|
||||
// 找出新增的端点
|
||||
const toAdd = Array.from(currentCustomUrls).filter(
|
||||
(url) => !initialCustomUrls.has(url),
|
||||
);
|
||||
|
||||
// 找出删除的端点
|
||||
const toRemove = Array.from(initialCustomUrls).filter(
|
||||
(url) => !currentCustomUrls.has(url),
|
||||
);
|
||||
|
||||
// 批量添加
|
||||
for (const url of toAdd) {
|
||||
await vscodeApi.addCustomEndpoint(appId, providerId, url);
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
for (const url of toRemove) {
|
||||
await vscodeApi.removeCustomEndpoint(appId, providerId, url);
|
||||
}
|
||||
|
||||
// 更新初始端点列表
|
||||
setInitialCustomUrls(currentCustomUrls);
|
||||
} catch (error) {
|
||||
const message =
|
||||
error instanceof Error ? error.message : t("endpointTest.saveFailed");
|
||||
setLastError(message);
|
||||
setIsSaving(false);
|
||||
return;
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
onClose();
|
||||
}, [isEditMode, providerId, entries, initialCustomUrls, appId, onClose, t]);
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
const footer = (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
}}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="gap-2"
|
||||
>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
{t("common.saving")}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="w-4 h-4" />
|
||||
{t("common.save")}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<FullScreenPanel
|
||||
isOpen={visible}
|
||||
title={t("endpointTest.title")}
|
||||
onClose={onClose}
|
||||
footer={footer}
|
||||
>
|
||||
<div className="glass rounded-xl p-6 border border-white/10 flex flex-col gap-6">
|
||||
{/* 测速控制栏 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{entries.length} {t("endpointTest.endpoints")}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoSelect}
|
||||
onChange={(event) => {
|
||||
onAutoSelectChange(event.target.checked);
|
||||
}}
|
||||
className="h-3.5 w-3.5 rounded border-border-default bg-background text-primary focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
{t("endpointTest.autoSelect")}
|
||||
</label>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={runSpeedTest}
|
||||
disabled={isTesting || !hasEndpoints}
|
||||
size="sm"
|
||||
className="h-7 w-24 gap-1.5 text-xs bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-60"
|
||||
>
|
||||
{isTesting ? (
|
||||
<>
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
{t("endpointTest.testing")}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Zap className="h-3.5 w-3.5" />
|
||||
{t("endpointTest.testSpeed")}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 添加输入 */}
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="text"
|
||||
value={customUrl}
|
||||
placeholder={t("endpointTest.addEndpointPlaceholder")}
|
||||
onChange={(event) => setCustomUrl(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
handleAddEndpoint();
|
||||
}
|
||||
}}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleAddEndpoint}
|
||||
variant="outline"
|
||||
size="icon"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{addError && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
{addError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 端点列表 */}
|
||||
{hasEndpoints ? (
|
||||
<div className="space-y-2">
|
||||
{sortedEntries.map((entry) => {
|
||||
const isSelected = normalizedSelected === entry.url;
|
||||
const latency = entry.latency;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={entry.id}
|
||||
onClick={() => handleSelect(entry.url)}
|
||||
className={`group flex cursor-pointer items-center justify-between px-3 py-2.5 rounded-lg border transition text-foreground ${
|
||||
isSelected
|
||||
? "border-primary/70 bg-primary/5 shadow-sm"
|
||||
: "border-border-default bg-background hover:bg-muted"
|
||||
}`}
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||||
{/* 选择指示器 */}
|
||||
<div
|
||||
className={`h-1.5 w-1.5 flex-shrink-0 rounded-full transition ${
|
||||
isSelected
|
||||
? "bg-blue-500 dark:bg-blue-400"
|
||||
: "bg-gray-300 dark:bg-gray-700"
|
||||
}`}
|
||||
/>
|
||||
|
||||
{/* 内容 */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm text-foreground">
|
||||
{entry.url}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧信息 */}
|
||||
<div className="flex items-center gap-2">
|
||||
{latency !== null ? (
|
||||
<div className="text-right">
|
||||
<div
|
||||
className={`font-mono text-sm font-medium ${
|
||||
latency < 300
|
||||
? "text-emerald-600 dark:text-emerald-400"
|
||||
: latency < 500
|
||||
? "text-yellow-600 dark:text-yellow-400"
|
||||
: latency < 800
|
||||
? "text-orange-600 dark:text-orange-400"
|
||||
: "text-red-600 dark:text-red-400"
|
||||
}`}
|
||||
>
|
||||
{latency}ms
|
||||
</div>
|
||||
</div>
|
||||
) : isTesting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin text-gray-400" />
|
||||
) : entry.error ? (
|
||||
<div className="text-xs text-gray-400">
|
||||
{t("endpointTest.failed")}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-gray-400">—</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
handleRemoveEndpoint(entry);
|
||||
}}
|
||||
className="opacity-0 transition hover:text-red-600 group-hover:opacity-100 dark:hover:text-red-400"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md border border-dashed border-border-default bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
{t("endpointTest.empty")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 错误提示 */}
|
||||
{lastError && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
{lastError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</FullScreenPanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default EndpointSpeedTest;
|
||||
@@ -0,0 +1,152 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Save, Download, Loader2, Package } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import JsonEditor from "@/components/JsonEditor";
|
||||
|
||||
interface GeminiCommonConfigModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
value: string;
|
||||
onSave: (value: string) => boolean;
|
||||
error?: string;
|
||||
onExtract?: () => void;
|
||||
isExtracting?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* GeminiCommonConfigModal - Common Gemini configuration editor modal
|
||||
* Allows editing of common env snippet shared across Gemini providers
|
||||
*/
|
||||
export const GeminiCommonConfigModal: React.FC<
|
||||
GeminiCommonConfigModalProps
|
||||
> = ({ isOpen, onClose, value, onSave, error, onExtract, isExtracting }) => {
|
||||
const { t } = useTranslation();
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
const [draftValue, setDraftValue] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setDraftValue(value);
|
||||
}
|
||||
}, [isOpen, value]);
|
||||
|
||||
const handleClose = () => {
|
||||
setDraftValue(value);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (onSave(draftValue)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<FullScreenPanel
|
||||
isOpen={isOpen}
|
||||
title={t("geminiConfig.editCommonConfigTitle", {
|
||||
defaultValue: "编辑 Gemini 通用配置片段",
|
||||
})}
|
||||
onClose={handleClose}
|
||||
footer={
|
||||
<>
|
||||
{onExtract && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onExtract}
|
||||
disabled={isExtracting}
|
||||
className="gap-2"
|
||||
>
|
||||
{isExtracting ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Download className="w-4 h-4" />
|
||||
)}
|
||||
{t("geminiConfig.extractFromCurrent", {
|
||||
defaultValue: "从编辑内容提取",
|
||||
})}
|
||||
</Button>
|
||||
)}
|
||||
<Button type="button" variant="outline" onClick={handleClose}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button type="button" onClick={handleSave} className="gap-2">
|
||||
<Save className="w-4 h-4" />
|
||||
{t("common.save")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/30 p-3 space-y-1.5">
|
||||
<p className="text-sm font-medium text-blue-800 dark:text-blue-300">
|
||||
{t("commonConfig.guideTitle")}
|
||||
</p>
|
||||
<p className="text-xs text-blue-700/80 dark:text-blue-400/80">
|
||||
{t("commonConfig.guidePurpose")}
|
||||
</p>
|
||||
<p className="text-xs text-blue-700/80 dark:text-blue-400/80">
|
||||
{t("commonConfig.guideUsage")}
|
||||
</p>
|
||||
<p className="text-xs text-blue-700/80 dark:text-blue-400/80">
|
||||
{t("commonConfig.guideReExtract")}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("commonConfig.guideReassurance")}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-amber-600 dark:text-amber-400">
|
||||
{t("geminiConfig.commonConfigHint", {
|
||||
defaultValue:
|
||||
"该片段会写入 Gemini 的 .env（不允许包含 GOOGLE_GEMINI_BASE_URL、GEMINI_API_KEY）",
|
||||
})}
|
||||
</p>
|
||||
{(!draftValue ||
|
||||
draftValue.trim() === "" ||
|
||||
draftValue.trim() === "{}") && (
|
||||
<div className="flex flex-col items-center justify-center py-6 text-center text-muted-foreground">
|
||||
<Package className="h-8 w-8 mb-2 opacity-40" />
|
||||
<p className="text-sm font-medium">
|
||||
{t("commonConfig.emptyTitle")}
|
||||
</p>
|
||||
<p className="text-xs mt-1">{t("commonConfig.emptyHint")}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<JsonEditor
|
||||
value={draftValue}
|
||||
onChange={setDraftValue}
|
||||
placeholder={`{
|
||||
"GEMINI_MODEL": "gemini-3.5-flash"
|
||||
}`}
|
||||
darkMode={isDarkMode}
|
||||
rows={16}
|
||||
showValidation={true}
|
||||
language="json"
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-red-500 dark:text-red-400">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
</FullScreenPanel>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,82 @@
|
||||
import React, { useState } from "react";
|
||||
import { GeminiEnvSection, GeminiConfigSection } from "./GeminiConfigSections";
|
||||
import { GeminiCommonConfigModal } from "./GeminiCommonConfigModal";
|
||||
|
||||
interface GeminiConfigEditorProps {
|
||||
envValue: string;
|
||||
configValue: string;
|
||||
onEnvChange: (value: string) => void;
|
||||
onConfigChange: (value: string) => void;
|
||||
onEnvBlur?: () => void;
|
||||
useCommonConfig: boolean;
|
||||
onCommonConfigToggle: (checked: boolean) => void;
|
||||
commonConfigSnippet: string;
|
||||
onCommonConfigSnippetChange: (value: string) => boolean;
|
||||
onCommonConfigErrorClear: () => void;
|
||||
commonConfigError: string;
|
||||
envError: string;
|
||||
configError: string;
|
||||
onExtract?: () => void;
|
||||
isExtracting?: boolean;
|
||||
}
|
||||
|
||||
const GeminiConfigEditor: React.FC<GeminiConfigEditorProps> = ({
|
||||
envValue,
|
||||
configValue,
|
||||
onEnvChange,
|
||||
onConfigChange,
|
||||
onEnvBlur,
|
||||
useCommonConfig,
|
||||
onCommonConfigToggle,
|
||||
commonConfigSnippet,
|
||||
onCommonConfigSnippetChange,
|
||||
onCommonConfigErrorClear,
|
||||
commonConfigError,
|
||||
envError,
|
||||
configError,
|
||||
onExtract,
|
||||
isExtracting,
|
||||
}) => {
|
||||
const [isCommonConfigModalOpen, setIsCommonConfigModalOpen] = useState(false);
|
||||
|
||||
const handleCloseCommonConfigModal = () => {
|
||||
onCommonConfigErrorClear();
|
||||
setIsCommonConfigModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Env Section */}
|
||||
<GeminiEnvSection
|
||||
value={envValue}
|
||||
onChange={onEnvChange}
|
||||
onBlur={onEnvBlur}
|
||||
error={envError}
|
||||
useCommonConfig={useCommonConfig}
|
||||
onCommonConfigToggle={onCommonConfigToggle}
|
||||
onEditCommonConfig={() => setIsCommonConfigModalOpen(true)}
|
||||
commonConfigError={commonConfigError}
|
||||
/>
|
||||
|
||||
{/* Config JSON Section */}
|
||||
<GeminiConfigSection
|
||||
value={configValue}
|
||||
onChange={onConfigChange}
|
||||
configError={configError}
|
||||
/>
|
||||
|
||||
{/* Common Config Modal */}
|
||||
<GeminiCommonConfigModal
|
||||
isOpen={isCommonConfigModalOpen}
|
||||
onClose={handleCloseCommonConfigModal}
|
||||
value={commonConfigSnippet}
|
||||
onSave={onCommonConfigSnippetChange}
|
||||
error={commonConfigError}
|
||||
onExtract={onExtract}
|
||||
isExtracting={isExtracting}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GeminiConfigEditor;
|
||||
@@ -0,0 +1,191 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import JsonEditor from "@/components/JsonEditor";
|
||||
|
||||
interface GeminiEnvSectionProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
onBlur?: () => void;
|
||||
error?: string;
|
||||
useCommonConfig: boolean;
|
||||
onCommonConfigToggle: (checked: boolean) => void;
|
||||
onEditCommonConfig: () => void;
|
||||
commonConfigError?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* GeminiEnvSection - .env editor section for Gemini environment variables
|
||||
*/
|
||||
export const GeminiEnvSection: React.FC<GeminiEnvSectionProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
onBlur,
|
||||
error,
|
||||
useCommonConfig,
|
||||
onCommonConfigToggle,
|
||||
onEditCommonConfig,
|
||||
commonConfigError,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const handleChange = (newValue: string) => {
|
||||
onChange(newValue);
|
||||
if (onBlur) {
|
||||
onBlur();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label
|
||||
htmlFor="geminiEnv"
|
||||
className="block text-sm font-medium text-foreground"
|
||||
>
|
||||
{t("geminiConfig.envFile", { defaultValue: "环境变量 (.env)" })}
|
||||
</label>
|
||||
|
||||
<label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={useCommonConfig}
|
||||
onChange={(e) => onCommonConfigToggle(e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
{t("geminiConfig.writeCommonConfig", {
|
||||
defaultValue: "应用通用配置",
|
||||
})}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onEditCommonConfig}
|
||||
className="text-xs text-blue-500 dark:text-blue-400 hover:underline"
|
||||
>
|
||||
{t("geminiConfig.editCommonConfig", {
|
||||
defaultValue: "编辑通用配置",
|
||||
})}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{commonConfigError && (
|
||||
<p className="text-xs text-red-500 dark:text-red-400 text-right">
|
||||
{commonConfigError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<JsonEditor
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
placeholder={`GOOGLE_GEMINI_BASE_URL=https://your-api-endpoint.com/
|
||||
GEMINI_API_KEY=sk-your-api-key-here
|
||||
GEMINI_MODEL=gemini-3.5-flash`}
|
||||
darkMode={isDarkMode}
|
||||
rows={6}
|
||||
showValidation={false}
|
||||
language="javascript"
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-red-500 dark:text-red-400">{error}</p>
|
||||
)}
|
||||
|
||||
{!error && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("geminiConfig.envFileHint", {
|
||||
defaultValue: "使用 .env 格式配置 Gemini 环境变量",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface GeminiConfigSectionProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
configError?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* GeminiConfigSection - Config JSON editor section with common config support
|
||||
*/
|
||||
export const GeminiConfigSection: React.FC<GeminiConfigSectionProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
configError,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="geminiConfig"
|
||||
className="block text-sm font-medium text-foreground"
|
||||
>
|
||||
{t("geminiConfig.configJson", {
|
||||
defaultValue: "配置文件 (config.json)",
|
||||
})}
|
||||
</label>
|
||||
|
||||
<JsonEditor
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={`{
|
||||
"timeout": 30000,
|
||||
"maxRetries": 3
|
||||
}`}
|
||||
darkMode={isDarkMode}
|
||||
rows={8}
|
||||
showValidation={true}
|
||||
language="json"
|
||||
/>
|
||||
|
||||
{configError && (
|
||||
<p className="text-xs text-red-500 dark:text-red-400">{configError}</p>
|
||||
)}
|
||||
|
||||
{!configError && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("geminiConfig.configJsonHint", {
|
||||
defaultValue: "使用 JSON 格式配置 Gemini 扩展参数（可选）",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,212 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FormLabel } from "@/components/ui/form";
|
||||
import { Download, Info, Loader2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast } from "sonner";
|
||||
import EndpointSpeedTest from "./EndpointSpeedTest";
|
||||
import { ApiKeySection, EndpointField, ModelInputWithFetch } from "./shared";
|
||||
import {
|
||||
fetchModelsForConfig,
|
||||
showFetchModelsError,
|
||||
type FetchedModel,
|
||||
} from "@/lib/api/model-fetch";
|
||||
import type { ProviderCategory } from "@/types";
|
||||
|
||||
interface EndpointCandidate {
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface GeminiFormFieldsProps {
|
||||
providerId?: string;
|
||||
// API Key
|
||||
shouldShowApiKey: boolean;
|
||||
apiKey: string;
|
||||
onApiKeyChange: (key: string) => void;
|
||||
category?: ProviderCategory;
|
||||
shouldShowApiKeyLink: boolean;
|
||||
websiteUrl: string;
|
||||
isPartner?: boolean;
|
||||
partnerPromotionKey?: string;
|
||||
|
||||
// Base URL
|
||||
shouldShowSpeedTest: boolean;
|
||||
baseUrl: string;
|
||||
onBaseUrlChange: (url: string) => void;
|
||||
isEndpointModalOpen: boolean;
|
||||
onEndpointModalToggle: (open: boolean) => void;
|
||||
onCustomEndpointsChange: (endpoints: string[]) => void;
|
||||
autoSelect: boolean;
|
||||
onAutoSelectChange: (checked: boolean) => void;
|
||||
|
||||
// Model
|
||||
shouldShowModelField: boolean;
|
||||
model: string;
|
||||
onModelChange: (value: string) => void;
|
||||
|
||||
// Speed Test Endpoints
|
||||
speedTestEndpoints: EndpointCandidate[];
|
||||
}
|
||||
|
||||
export function GeminiFormFields({
|
||||
providerId,
|
||||
shouldShowApiKey,
|
||||
apiKey,
|
||||
onApiKeyChange,
|
||||
category,
|
||||
shouldShowApiKeyLink,
|
||||
websiteUrl,
|
||||
isPartner,
|
||||
partnerPromotionKey,
|
||||
shouldShowSpeedTest,
|
||||
baseUrl,
|
||||
onBaseUrlChange,
|
||||
isEndpointModalOpen,
|
||||
onEndpointModalToggle,
|
||||
onCustomEndpointsChange,
|
||||
autoSelect,
|
||||
onAutoSelectChange,
|
||||
shouldShowModelField,
|
||||
model,
|
||||
onModelChange,
|
||||
speedTestEndpoints,
|
||||
}: GeminiFormFieldsProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [fetchedModels, setFetchedModels] = useState<FetchedModel[]>([]);
|
||||
const [isFetchingModels, setIsFetchingModels] = useState(false);
|
||||
|
||||
const handleFetchModels = useCallback(() => {
|
||||
if (!baseUrl || !apiKey) {
|
||||
showFetchModelsError(null, t, {
|
||||
hasApiKey: !!apiKey,
|
||||
hasBaseUrl: !!baseUrl,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setIsFetchingModels(true);
|
||||
fetchModelsForConfig(baseUrl, apiKey)
|
||||
.then((models) => {
|
||||
setFetchedModels(models);
|
||||
if (models.length === 0) {
|
||||
toast.info(t("providerForm.fetchModelsEmpty"));
|
||||
} else {
|
||||
toast.success(
|
||||
t("providerForm.fetchModelsSuccess", { count: models.length }),
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.warn("[ModelFetch] Failed:", err);
|
||||
showFetchModelsError(err, t);
|
||||
})
|
||||
.finally(() => setIsFetchingModels(false));
|
||||
}, [baseUrl, apiKey, t]);
|
||||
|
||||
// 检测是否为 Google 官方（使用 OAuth）
|
||||
const isGoogleOfficial =
|
||||
partnerPromotionKey?.toLowerCase() === "google-official";
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Google OAuth 提示 */}
|
||||
{isGoogleOfficial && (
|
||||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950">
|
||||
<div className="flex gap-3">
|
||||
<Info className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium text-blue-900 dark:text-blue-100">
|
||||
{t("provider.form.gemini.oauthTitle", {
|
||||
defaultValue: "OAuth 认证模式",
|
||||
})}
|
||||
</p>
|
||||
<p className="text-sm text-blue-700 dark:text-blue-300">
|
||||
{t("provider.form.gemini.oauthHint", {
|
||||
defaultValue:
|
||||
"Google 官方使用 OAuth 个人认证，无需填写 API Key。首次使用时会自动打开浏览器进行登录。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* API Key 输入框 */}
|
||||
{shouldShowApiKey && !isGoogleOfficial && (
|
||||
<ApiKeySection
|
||||
value={apiKey}
|
||||
onChange={onApiKeyChange}
|
||||
category={category}
|
||||
shouldShowLink={shouldShowApiKeyLink}
|
||||
websiteUrl={websiteUrl}
|
||||
isPartner={isPartner}
|
||||
partnerPromotionKey={partnerPromotionKey}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Base URL 输入框（统一使用与 Codex 相同的样式与交互） */}
|
||||
{shouldShowSpeedTest && (
|
||||
<EndpointField
|
||||
id="baseUrl"
|
||||
label={t("providerForm.apiEndpoint", { defaultValue: "API 端点" })}
|
||||
value={baseUrl}
|
||||
onChange={onBaseUrlChange}
|
||||
placeholder={t("providerForm.apiEndpointPlaceholder", {
|
||||
defaultValue: "https://your-api-endpoint.com/",
|
||||
})}
|
||||
onManageClick={() => onEndpointModalToggle(true)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Model 输入框 */}
|
||||
{shouldShowModelField && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<FormLabel htmlFor="gemini-model">
|
||||
{t("provider.form.gemini.model", { defaultValue: "模型" })}
|
||||
</FormLabel>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleFetchModels}
|
||||
disabled={isFetchingModels}
|
||||
className="h-7 gap-1"
|
||||
>
|
||||
{isFetchingModels ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{t("providerForm.fetchModels")}
|
||||
</Button>
|
||||
</div>
|
||||
<ModelInputWithFetch
|
||||
id="gemini-model"
|
||||
value={model}
|
||||
onChange={onModelChange}
|
||||
placeholder="gemini-3.5-flash"
|
||||
fetchedModels={fetchedModels}
|
||||
isLoading={isFetchingModels}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 端点测速弹窗 */}
|
||||
{shouldShowSpeedTest && isEndpointModalOpen && (
|
||||
<EndpointSpeedTest
|
||||
appId="gemini"
|
||||
providerId={providerId}
|
||||
value={baseUrl}
|
||||
onChange={onBaseUrlChange}
|
||||
initialEndpoints={speedTestEndpoints}
|
||||
visible={isEndpointModalOpen}
|
||||
onClose={() => onEndpointModalToggle(false)}
|
||||
autoSelect={autoSelect}
|
||||
onAutoSelectChange={onAutoSelectChange}
|
||||
onCustomEndpointsChange={onCustomEndpointsChange}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,568 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
useState,
|
||||
useRef,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useEffect,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import { FormLabel } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Download,
|
||||
Plus,
|
||||
Trash2,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { ApiKeySection } from "./shared";
|
||||
import {
|
||||
fetchModelsForConfig,
|
||||
showFetchModelsError,
|
||||
type FetchedModel,
|
||||
} from "@/lib/api/model-fetch";
|
||||
import {
|
||||
hermesApiModes,
|
||||
type HermesApiMode,
|
||||
type HermesModel,
|
||||
} from "@/config/hermesProviderPresets";
|
||||
import type { ProviderCategory } from "@/types";
|
||||
|
||||
interface HermesFormFieldsProps {
|
||||
baseUrl: string;
|
||||
onBaseUrlChange: (value: string) => void;
|
||||
apiKey: string;
|
||||
onApiKeyChange: (value: string) => void;
|
||||
category?: ProviderCategory;
|
||||
shouldShowApiKeyLink: boolean;
|
||||
websiteUrl: string;
|
||||
isPartner?: boolean;
|
||||
partnerPromotionKey?: string;
|
||||
apiMode: HermesApiMode;
|
||||
onApiModeChange: (mode: HermesApiMode) => void;
|
||||
models: HermesModel[];
|
||||
onModelsChange: (models: HermesModel[]) => void;
|
||||
rateLimitDelay: number | undefined;
|
||||
onRateLimitDelayChange: (delay: number | undefined) => void;
|
||||
}
|
||||
|
||||
type BaseUrlErrorCode = "empty" | "invalid" | "scheme";
|
||||
|
||||
const BASE_URL_ERROR_I18N_KEY: Record<BaseUrlErrorCode, string> = {
|
||||
empty: "hermes.form.baseUrlRequired",
|
||||
scheme: "hermes.form.baseUrlScheme",
|
||||
invalid: "hermes.form.baseUrlInvalid",
|
||||
};
|
||||
|
||||
const TEMPLATE_TOKEN_RE = /\$\{[^}]+\}/g;
|
||||
|
||||
/**
|
||||
* Hermes 0.10.0+ rejects `base_url` entries that don't parse as proper URLs
|
||||
* (commit 2cdae233). Validate client-side so the error surfaces before the
|
||||
* request ever reaches Hermes' startup.
|
||||
*/
|
||||
function validateBaseUrl(raw: string): BaseUrlErrorCode | null {
|
||||
const trimmed = raw.trim();
|
||||
if (!trimmed) return "empty";
|
||||
// Presets like KAT-Coder embed `${VAR}` tokens — swap them before URL parse.
|
||||
const candidate = trimmed.replace(TEMPLATE_TOKEN_RE, "placeholder");
|
||||
let u: URL;
|
||||
try {
|
||||
u = new URL(candidate);
|
||||
} catch {
|
||||
return "invalid";
|
||||
}
|
||||
if (!u.protocol.startsWith("http")) return "scheme";
|
||||
if (!u.hostname) return "invalid";
|
||||
return null;
|
||||
}
|
||||
|
||||
interface AdvancedSectionProps {
|
||||
open: boolean;
|
||||
onOpenChange: (next: boolean) => void;
|
||||
labelKey: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function AdvancedSection({
|
||||
open,
|
||||
onOpenChange,
|
||||
labelKey,
|
||||
children,
|
||||
}: AdvancedSectionProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Collapsible open={open} onOpenChange={onOpenChange}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 gap-1 text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{open ? (
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{t(labelKey)}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-3 pt-2">
|
||||
{children}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
export function HermesFormFields({
|
||||
baseUrl,
|
||||
onBaseUrlChange,
|
||||
apiKey,
|
||||
onApiKeyChange,
|
||||
category,
|
||||
shouldShowApiKeyLink,
|
||||
websiteUrl,
|
||||
isPartner,
|
||||
partnerPromotionKey,
|
||||
apiMode,
|
||||
onApiModeChange,
|
||||
models,
|
||||
onModelsChange,
|
||||
rateLimitDelay,
|
||||
onRateLimitDelayChange,
|
||||
}: HermesFormFieldsProps) {
|
||||
const { t } = useTranslation();
|
||||
const [expandedModels, setExpandedModels] = useState<Record<number, boolean>>(
|
||||
{},
|
||||
);
|
||||
const [fetchedModels, setFetchedModels] = useState<FetchedModel[]>([]);
|
||||
const [isFetchingModels, setIsFetchingModels] = useState(false);
|
||||
const [baseUrlTouched, setBaseUrlTouched] = useState(false);
|
||||
const [providerAdvancedOpen, setProviderAdvancedOpen] = useState(
|
||||
rateLimitDelay !== undefined,
|
||||
);
|
||||
|
||||
// Auto-expand when a preset switch brings in a value so the user sees it;
|
||||
// don't force-collapse on clear, to avoid yanking the panel shut mid-edit.
|
||||
useEffect(() => {
|
||||
if (rateLimitDelay !== undefined) {
|
||||
setProviderAdvancedOpen(true);
|
||||
}
|
||||
}, [rateLimitDelay]);
|
||||
|
||||
const baseUrlErrorCode = useMemo(() => validateBaseUrl(baseUrl), [baseUrl]);
|
||||
const showBaseUrlError = baseUrlTouched && baseUrlErrorCode !== null;
|
||||
const baseUrlErrorMessage = baseUrlErrorCode
|
||||
? t(BASE_URL_ERROR_I18N_KEY[baseUrlErrorCode])
|
||||
: "";
|
||||
|
||||
// Stable list keys: a manual ref rather than UUID-in-state so adding/removing
|
||||
// rows doesn't re-mount unrelated inputs (would drop focus mid-typing).
|
||||
const modelKeysRef = useRef<string[]>([]);
|
||||
while (modelKeysRef.current.length < models.length) {
|
||||
modelKeysRef.current.push(crypto.randomUUID());
|
||||
}
|
||||
if (modelKeysRef.current.length > models.length) {
|
||||
modelKeysRef.current.length = models.length;
|
||||
}
|
||||
const modelKeys = modelKeysRef.current;
|
||||
|
||||
// Group fetched models by vendor once — Radix DropdownMenuContent doesn't
|
||||
// lazy-mount, so computing this in JSX would re-run per model row per render.
|
||||
const groupedFetchedModels = useMemo(
|
||||
() =>
|
||||
Object.entries(
|
||||
fetchedModels.reduce(
|
||||
(acc, m) => {
|
||||
const v = m.ownedBy || "Other";
|
||||
if (!acc[v]) acc[v] = [];
|
||||
acc[v].push(m);
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, FetchedModel[]>,
|
||||
),
|
||||
).sort(([a], [b]) => a.localeCompare(b)),
|
||||
[fetchedModels],
|
||||
);
|
||||
|
||||
const toggleModelAdvanced = (index: number) => {
|
||||
setExpandedModels((prev) => ({ ...prev, [index]: !prev[index] }));
|
||||
};
|
||||
|
||||
const handleAddModel = () => {
|
||||
modelKeysRef.current.push(crypto.randomUUID());
|
||||
onModelsChange([
|
||||
...models,
|
||||
{ id: "", name: "", context_length: undefined },
|
||||
]);
|
||||
};
|
||||
|
||||
const handleFetchModels = useCallback(() => {
|
||||
if (!baseUrl || !apiKey) {
|
||||
showFetchModelsError(null, t, {
|
||||
hasApiKey: !!apiKey,
|
||||
hasBaseUrl: !!baseUrl,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setIsFetchingModels(true);
|
||||
fetchModelsForConfig(baseUrl, apiKey)
|
||||
.then((fetched) => {
|
||||
setFetchedModels(fetched);
|
||||
if (fetched.length === 0) {
|
||||
toast.info(t("providerForm.fetchModelsEmpty"));
|
||||
} else {
|
||||
toast.success(
|
||||
t("providerForm.fetchModelsSuccess", { count: fetched.length }),
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.warn("[ModelFetch] Failed:", err);
|
||||
showFetchModelsError(err, t);
|
||||
})
|
||||
.finally(() => setIsFetchingModels(false));
|
||||
}, [baseUrl, apiKey, t]);
|
||||
|
||||
const handleRemoveModel = (index: number) => {
|
||||
modelKeysRef.current.splice(index, 1);
|
||||
const next = [...models];
|
||||
next.splice(index, 1);
|
||||
onModelsChange(next);
|
||||
setExpandedModels((prev) => {
|
||||
const updated = { ...prev };
|
||||
delete updated[index];
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
const handleModelChange = (
|
||||
index: number,
|
||||
field: keyof HermesModel,
|
||||
value: unknown,
|
||||
) => {
|
||||
const next = [...models];
|
||||
next[index] = { ...next[index], [field]: value };
|
||||
onModelsChange(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<FormLabel htmlFor="hermes-api-mode">
|
||||
{t("hermes.form.apiMode", { defaultValue: "API 模式" })}
|
||||
</FormLabel>
|
||||
<Select
|
||||
value={apiMode}
|
||||
onValueChange={(v) => onApiModeChange(v as HermesApiMode)}
|
||||
>
|
||||
<SelectTrigger id="hermes-api-mode">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{hermesApiModes.map((mode) => (
|
||||
<SelectItem key={mode.value} value={mode.value}>
|
||||
{t(mode.labelKey)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("hermes.form.apiModeHint", {
|
||||
defaultValue: "供应商 API 协议。请根据端点选择正确的协议。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<FormLabel htmlFor="hermes-baseurl">
|
||||
{t("hermes.form.baseUrl", { defaultValue: "API 端点" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
id="hermes-baseurl"
|
||||
value={baseUrl}
|
||||
onChange={(e) => onBaseUrlChange(e.target.value)}
|
||||
onBlur={() => setBaseUrlTouched(true)}
|
||||
placeholder="https://api.example.com/v1"
|
||||
aria-invalid={showBaseUrlError}
|
||||
className={
|
||||
showBaseUrlError
|
||||
? "border-destructive focus-visible:ring-destructive"
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
{showBaseUrlError ? (
|
||||
<p className="text-xs text-destructive">{baseUrlErrorMessage}</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("hermes.form.baseUrlHint", {
|
||||
defaultValue: "供应商的 API 端点地址。",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ApiKeySection
|
||||
value={apiKey}
|
||||
onChange={onApiKeyChange}
|
||||
// Hermes 没有 OAuth-only 的免 key 官方供应商：即便是 official 预设
|
||||
// （如 Nous Research）也需用户自填 key，故不让 official 禁用输入框。
|
||||
category={category === "official" ? undefined : category}
|
||||
shouldShowLink={shouldShowApiKeyLink}
|
||||
websiteUrl={websiteUrl}
|
||||
isPartner={isPartner}
|
||||
partnerPromotionKey={partnerPromotionKey}
|
||||
/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<FormLabel>
|
||||
{t("hermes.form.models", { defaultValue: "模型列表" })}
|
||||
</FormLabel>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleFetchModels}
|
||||
disabled={isFetchingModels}
|
||||
className="h-7 gap-1"
|
||||
>
|
||||
{isFetchingModels ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{t("providerForm.fetchModels")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleAddModel}
|
||||
className="h-7 gap-1"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
{t("hermes.form.addModel", { defaultValue: "添加模型" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{models.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-2">
|
||||
{t("hermes.form.noModels", {
|
||||
defaultValue: "暂无模型配置。切换到此供应商时将无默认模型。",
|
||||
})}
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{models.map((model, index) => (
|
||||
<div
|
||||
key={modelKeys[index]}
|
||||
className="p-3 border border-border/50 rounded-lg space-y-3"
|
||||
>
|
||||
{/* Role badge — first entry is the default written to model.default on switch */}
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className={`text-[10px] font-medium px-1.5 py-0.5 rounded ${
|
||||
index === 0
|
||||
? "bg-blue-500/15 text-blue-600 dark:text-blue-400"
|
||||
: "bg-muted text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{index === 0
|
||||
? t("hermes.form.primaryModel", {
|
||||
defaultValue: "默认模型",
|
||||
})
|
||||
: t("hermes.form.fallbackModel", {
|
||||
defaultValue: "备选模型",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("hermes.form.modelId", { defaultValue: "模型 ID" })}
|
||||
</label>
|
||||
<div className="flex gap-1">
|
||||
<Input
|
||||
value={model.id}
|
||||
onChange={(e) =>
|
||||
handleModelChange(index, "id", e.target.value)
|
||||
}
|
||||
placeholder={t("hermes.form.modelIdPlaceholder", {
|
||||
defaultValue: "anthropic/claude-opus-4-8",
|
||||
})}
|
||||
className="flex-1"
|
||||
/>
|
||||
{fetchedModels.length > 0 && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="shrink-0"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="max-h-64 overflow-y-auto z-[200]"
|
||||
>
|
||||
{groupedFetchedModels.map(
|
||||
([vendor, vModels], vi) => (
|
||||
<div key={vendor}>
|
||||
{vi > 0 && <DropdownMenuSeparator />}
|
||||
<DropdownMenuLabel>
|
||||
{vendor}
|
||||
</DropdownMenuLabel>
|
||||
{vModels.map((m) => (
|
||||
<DropdownMenuItem
|
||||
key={m.id}
|
||||
onSelect={() =>
|
||||
handleModelChange(index, "id", m.id)
|
||||
}
|
||||
>
|
||||
{m.id}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("hermes.form.modelName", {
|
||||
defaultValue: "显示名称",
|
||||
})}
|
||||
</label>
|
||||
<Input
|
||||
value={model.name ?? ""}
|
||||
onChange={(e) =>
|
||||
handleModelChange(index, "name", e.target.value)
|
||||
}
|
||||
placeholder={t("hermes.form.modelNamePlaceholder", {
|
||||
defaultValue: "Claude Opus 4.8",
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleRemoveModel(index)}
|
||||
className="h-9 w-9 mt-5 text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<AdvancedSection
|
||||
open={expandedModels[index] ?? false}
|
||||
onOpenChange={() => toggleModelAdvanced(index)}
|
||||
labelKey="hermes.form.advancedOptions"
|
||||
>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("hermes.form.contextLength", {
|
||||
defaultValue: "上下文长度",
|
||||
})}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={model.context_length ?? ""}
|
||||
onChange={(e) =>
|
||||
handleModelChange(
|
||||
index,
|
||||
"context_length",
|
||||
e.target.value ? parseInt(e.target.value) : undefined,
|
||||
)
|
||||
}
|
||||
placeholder="200000"
|
||||
/>
|
||||
</div>
|
||||
</AdvancedSection>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("hermes.form.modelsHint", {
|
||||
defaultValue:
|
||||
"切换到此供应商时，第一个模型会写入顶层 model.default。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<AdvancedSection
|
||||
open={providerAdvancedOpen}
|
||||
onOpenChange={setProviderAdvancedOpen}
|
||||
labelKey="hermes.form.providerAdvanced"
|
||||
>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("hermes.form.rateLimitDelay", {
|
||||
defaultValue: "请求间隔（秒）",
|
||||
})}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0"
|
||||
value={rateLimitDelay ?? ""}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (v === "") {
|
||||
onRateLimitDelayChange(undefined);
|
||||
return;
|
||||
}
|
||||
const n = parseFloat(v);
|
||||
onRateLimitDelayChange(
|
||||
Number.isFinite(n) && n >= 0 ? n : undefined,
|
||||
);
|
||||
}}
|
||||
placeholder="0.5"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("hermes.form.rateLimitDelayHint", {
|
||||
defaultValue:
|
||||
"连续请求间的最小间隔秒数（可选）。留空表示无限制。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</AdvancedSection>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FormLabel } from "@/components/ui/form";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
parseBodyOverrideJson,
|
||||
parseHeaderOverrideJson,
|
||||
} from "@/lib/requestOverrides";
|
||||
|
||||
interface LocalProxyRequestOverridesFieldProps {
|
||||
headersJson: string;
|
||||
bodyJson: string;
|
||||
onHeadersJsonChange: (value: string) => void;
|
||||
onBodyJsonChange: (value: string) => void;
|
||||
}
|
||||
|
||||
export function LocalProxyRequestOverridesField({
|
||||
headersJson,
|
||||
bodyJson,
|
||||
onHeadersJsonChange,
|
||||
onBodyJsonChange,
|
||||
}: LocalProxyRequestOverridesFieldProps) {
|
||||
const { t } = useTranslation();
|
||||
const headerError = parseHeaderOverrideJson(headersJson).error;
|
||||
const bodyError = parseBodyOverrideJson(bodyJson).error;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<FormLabel>
|
||||
{t("providerForm.localProxyRequestOverrides", {
|
||||
defaultValue: "本地代理请求覆盖",
|
||||
})}
|
||||
</FormLabel>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("providerForm.localProxyRequestOverridesHint", {
|
||||
defaultValue:
|
||||
"仅在本地路由/代理接管后生效，应用于协议转换后的上游请求。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<FormLabel className="text-xs text-muted-foreground">
|
||||
{t("providerForm.localProxyHeaderOverrides", {
|
||||
defaultValue: "Header 覆盖",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
value={headersJson}
|
||||
onChange={(event) => onHeadersJsonChange(event.target.value)}
|
||||
placeholder={'{\n "X-Provider": "cc-switch"\n}'}
|
||||
className="min-h-[132px] resize-y font-mono text-xs"
|
||||
aria-invalid={Boolean(headerError)}
|
||||
/>
|
||||
{headerError && (
|
||||
<p className="text-xs text-destructive">
|
||||
{t("providerForm.localProxyHeaderOverridesInvalidDetail", {
|
||||
error: headerError,
|
||||
defaultValue: "Header 覆盖格式错误：{{error}}",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<FormLabel className="text-xs text-muted-foreground">
|
||||
{t("providerForm.localProxyBodyOverrides", {
|
||||
defaultValue: "Body 覆盖",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
value={bodyJson}
|
||||
onChange={(event) => onBodyJsonChange(event.target.value)}
|
||||
placeholder={'{\n "temperature": 0.2\n}'}
|
||||
className="min-h-[132px] resize-y font-mono text-xs"
|
||||
aria-invalid={Boolean(bodyError)}
|
||||
/>
|
||||
{bodyError && (
|
||||
<p className="text-xs text-destructive">
|
||||
{t("providerForm.localProxyBodyOverridesInvalidDetail", {
|
||||
error: bodyError,
|
||||
defaultValue: "Body 覆盖格式错误：{{error}}",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,672 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState, useRef, useCallback } from "react";
|
||||
import { FormLabel } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Download,
|
||||
Plus,
|
||||
Trash2,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { ApiKeySection } from "./shared";
|
||||
import {
|
||||
fetchModelsForConfig,
|
||||
showFetchModelsError,
|
||||
type FetchedModel,
|
||||
} from "@/lib/api/model-fetch";
|
||||
import { openclawApiProtocols } from "@/config/openclawProviderPresets";
|
||||
import type { ProviderCategory, OpenClawModel } from "@/types";
|
||||
|
||||
interface OpenClawFormFieldsProps {
|
||||
// Base URL
|
||||
baseUrl: string;
|
||||
onBaseUrlChange: (value: string) => void;
|
||||
|
||||
// API Key
|
||||
apiKey: string;
|
||||
onApiKeyChange: (value: string) => void;
|
||||
category?: ProviderCategory;
|
||||
shouldShowApiKeyLink: boolean;
|
||||
websiteUrl: string;
|
||||
isPartner?: boolean;
|
||||
partnerPromotionKey?: string;
|
||||
|
||||
// API Protocol
|
||||
api: string;
|
||||
onApiChange: (value: string) => void;
|
||||
|
||||
// Models
|
||||
models: OpenClawModel[];
|
||||
onModelsChange: (models: OpenClawModel[]) => void;
|
||||
|
||||
// User-Agent
|
||||
userAgent: boolean;
|
||||
onUserAgentChange: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
export function OpenClawFormFields({
|
||||
baseUrl,
|
||||
onBaseUrlChange,
|
||||
apiKey,
|
||||
onApiKeyChange,
|
||||
category,
|
||||
shouldShowApiKeyLink,
|
||||
websiteUrl,
|
||||
isPartner,
|
||||
partnerPromotionKey,
|
||||
api,
|
||||
onApiChange,
|
||||
models,
|
||||
onModelsChange,
|
||||
userAgent,
|
||||
onUserAgentChange,
|
||||
}: OpenClawFormFieldsProps) {
|
||||
const { t } = useTranslation();
|
||||
const [expandedModels, setExpandedModels] = useState<Record<number, boolean>>(
|
||||
{},
|
||||
);
|
||||
const [fetchedModels, setFetchedModels] = useState<FetchedModel[]>([]);
|
||||
const [isFetchingModels, setIsFetchingModels] = useState(false);
|
||||
|
||||
// Stable key tracking for models list
|
||||
const modelKeysRef = useRef<string[]>([]);
|
||||
const getModelKeys = useCallback(() => {
|
||||
// Grow keys array if models were added externally
|
||||
while (modelKeysRef.current.length < models.length) {
|
||||
modelKeysRef.current.push(crypto.randomUUID());
|
||||
}
|
||||
// Shrink if models were removed externally
|
||||
if (modelKeysRef.current.length > models.length) {
|
||||
modelKeysRef.current.length = models.length;
|
||||
}
|
||||
return modelKeysRef.current;
|
||||
}, [models.length]);
|
||||
const modelKeys = getModelKeys();
|
||||
|
||||
// Toggle advanced section for a model
|
||||
const toggleModelAdvanced = (index: number) => {
|
||||
setExpandedModels((prev) => ({ ...prev, [index]: !prev[index] }));
|
||||
};
|
||||
|
||||
// Add a new model entry
|
||||
const handleAddModel = () => {
|
||||
modelKeysRef.current.push(crypto.randomUUID());
|
||||
onModelsChange([
|
||||
...models,
|
||||
{
|
||||
id: "",
|
||||
name: "",
|
||||
contextWindow: undefined,
|
||||
maxTokens: undefined,
|
||||
cost: undefined,
|
||||
input: ["text"],
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
// Fetch models from API
|
||||
const handleFetchModels = useCallback(() => {
|
||||
if (!baseUrl || !apiKey) {
|
||||
showFetchModelsError(null, t, {
|
||||
hasApiKey: !!apiKey,
|
||||
hasBaseUrl: !!baseUrl,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setIsFetchingModels(true);
|
||||
fetchModelsForConfig(baseUrl, apiKey)
|
||||
.then((models) => {
|
||||
setFetchedModels(models);
|
||||
if (models.length === 0) {
|
||||
toast.info(t("providerForm.fetchModelsEmpty"));
|
||||
} else {
|
||||
toast.success(
|
||||
t("providerForm.fetchModelsSuccess", { count: models.length }),
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.warn("[ModelFetch] Failed:", err);
|
||||
showFetchModelsError(err, t);
|
||||
})
|
||||
.finally(() => setIsFetchingModels(false));
|
||||
}, [baseUrl, apiKey, t]);
|
||||
|
||||
// Remove a model entry
|
||||
const handleRemoveModel = (index: number) => {
|
||||
modelKeysRef.current.splice(index, 1);
|
||||
const newModels = [...models];
|
||||
newModels.splice(index, 1);
|
||||
onModelsChange(newModels);
|
||||
// Clean up expanded state
|
||||
setExpandedModels((prev) => {
|
||||
const updated = { ...prev };
|
||||
delete updated[index];
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
// Update model field
|
||||
const handleModelChange = (
|
||||
index: number,
|
||||
field: keyof OpenClawModel,
|
||||
value: unknown,
|
||||
) => {
|
||||
const newModels = [...models];
|
||||
newModels[index] = { ...newModels[index], [field]: value };
|
||||
onModelsChange(newModels);
|
||||
};
|
||||
|
||||
// Update model cost
|
||||
const handleCostChange = (
|
||||
index: number,
|
||||
costField: "input" | "output" | "cacheRead" | "cacheWrite",
|
||||
value: string,
|
||||
) => {
|
||||
const newModels = [...models];
|
||||
const numValue = parseFloat(value);
|
||||
const currentCost = newModels[index].cost || { input: 0, output: 0 };
|
||||
newModels[index] = {
|
||||
...newModels[index],
|
||||
cost: {
|
||||
...currentCost,
|
||||
[costField]: isNaN(numValue) ? undefined : numValue,
|
||||
},
|
||||
};
|
||||
onModelsChange(newModels);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* API Protocol Selector */}
|
||||
<div className="space-y-2">
|
||||
<FormLabel htmlFor="openclaw-api">
|
||||
{t("openclaw.apiProtocol", {
|
||||
defaultValue: "API 协议",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Select value={api} onValueChange={onApiChange}>
|
||||
<SelectTrigger id="openclaw-api">
|
||||
<SelectValue
|
||||
placeholder={t("openclaw.selectProtocol", {
|
||||
defaultValue: "选择 API 协议",
|
||||
})}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{openclawApiProtocols.map((protocol) => (
|
||||
<SelectItem key={protocol.value} value={protocol.value}>
|
||||
{protocol.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("openclaw.apiProtocolHint", {
|
||||
defaultValue:
|
||||
"选择与供应商 API 兼容的协议类型。大多数供应商使用 OpenAI Completions 格式。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Base URL */}
|
||||
<div className="space-y-2">
|
||||
<FormLabel htmlFor="openclaw-baseurl">
|
||||
{t("openclaw.baseUrl", { defaultValue: "API 端点" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
id="openclaw-baseurl"
|
||||
value={baseUrl}
|
||||
onChange={(e) => onBaseUrlChange(e.target.value)}
|
||||
placeholder="https://api.example.com/v1"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("openclaw.baseUrlHint", {
|
||||
defaultValue: "供应商的 API 端点地址。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* API Key */}
|
||||
<ApiKeySection
|
||||
value={apiKey}
|
||||
onChange={onApiKeyChange}
|
||||
// OpenClaw 的 API key 始终由用户自填，没有 OAuth-only 的免 key 官方供应商，
|
||||
// 故不让 official 禁用输入框（与 Hermes 对齐）。
|
||||
category={category === "official" ? undefined : category}
|
||||
shouldShowLink={shouldShowApiKeyLink}
|
||||
websiteUrl={websiteUrl}
|
||||
isPartner={isPartner}
|
||||
partnerPromotionKey={partnerPromotionKey}
|
||||
/>
|
||||
|
||||
{/* User-Agent */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>
|
||||
{t("openclaw.userAgent", { defaultValue: "发送 User-Agent" })}
|
||||
</FormLabel>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("openclaw.userAgentHint", {
|
||||
defaultValue: "部分供应商需要浏览器 User-Agent 才能正常访问。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<Switch checked={userAgent} onCheckedChange={onUserAgentChange} />
|
||||
</div>
|
||||
|
||||
{/* Models Editor */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<FormLabel>
|
||||
{t("openclaw.models", { defaultValue: "模型列表" })}
|
||||
</FormLabel>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleFetchModels}
|
||||
disabled={isFetchingModels}
|
||||
className="h-7 gap-1"
|
||||
>
|
||||
{isFetchingModels ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{t("providerForm.fetchModels")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleAddModel}
|
||||
className="h-7 gap-1"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
{t("openclaw.addModel", { defaultValue: "添加模型" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{models.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-2">
|
||||
{t("openclaw.noModels", {
|
||||
defaultValue: "暂无模型配置。点击添加模型来配置可用模型。",
|
||||
})}
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{models.map((model, index) => (
|
||||
<div
|
||||
key={modelKeys[index]}
|
||||
className="p-3 border border-border/50 rounded-lg space-y-3"
|
||||
>
|
||||
{/* Role badge */}
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className={`text-[10px] font-medium px-1.5 py-0.5 rounded ${
|
||||
index === 0
|
||||
? "bg-blue-500/15 text-blue-600 dark:text-blue-400"
|
||||
: "bg-muted text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{index === 0
|
||||
? t("openclaw.primaryModel", {
|
||||
defaultValue: "默认模型",
|
||||
})
|
||||
: t("openclaw.fallbackModel", {
|
||||
defaultValue: "回退模型",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
{/* Model ID and Name row */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("openclaw.modelId", { defaultValue: "模型 ID" })}
|
||||
</label>
|
||||
<div className="flex gap-1">
|
||||
<Input
|
||||
value={model.id}
|
||||
onChange={(e) =>
|
||||
handleModelChange(index, "id", e.target.value)
|
||||
}
|
||||
placeholder={t("openclaw.modelIdPlaceholder", {
|
||||
defaultValue: "claude-3-sonnet",
|
||||
})}
|
||||
className="flex-1"
|
||||
/>
|
||||
{fetchedModels.length > 0 && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="shrink-0"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="max-h-64 overflow-y-auto z-[200]"
|
||||
>
|
||||
{Object.entries(
|
||||
fetchedModels.reduce(
|
||||
(acc, m) => {
|
||||
const v = m.ownedBy || "Other";
|
||||
if (!acc[v]) acc[v] = [];
|
||||
acc[v].push(m);
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, FetchedModel[]>,
|
||||
),
|
||||
)
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([vendor, vModels], vi) => (
|
||||
<div key={vendor}>
|
||||
{vi > 0 && <DropdownMenuSeparator />}
|
||||
<DropdownMenuLabel>
|
||||
{vendor}
|
||||
</DropdownMenuLabel>
|
||||
{vModels.map((m) => (
|
||||
<DropdownMenuItem
|
||||
key={m.id}
|
||||
onSelect={() =>
|
||||
handleModelChange(index, "id", m.id)
|
||||
}
|
||||
>
|
||||
{m.id}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("openclaw.modelName", { defaultValue: "显示名称" })}
|
||||
</label>
|
||||
<Input
|
||||
value={model.name}
|
||||
onChange={(e) =>
|
||||
handleModelChange(index, "name", e.target.value)
|
||||
}
|
||||
placeholder={t("openclaw.modelNamePlaceholder", {
|
||||
defaultValue: "Claude 3 Sonnet",
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleRemoveModel(index)}
|
||||
className="h-9 w-9 mt-5 text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Advanced Options (Collapsible) */}
|
||||
<Collapsible
|
||||
open={expandedModels[index] ?? false}
|
||||
onOpenChange={() => toggleModelAdvanced(index)}
|
||||
>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 gap-1 text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{expandedModels[index] ? (
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{t("openclaw.advancedOptions", {
|
||||
defaultValue: "高级选项",
|
||||
})}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-3 pt-2">
|
||||
{/* Reasoning, Input Types row */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("openclaw.reasoning", {
|
||||
defaultValue: "推理模式",
|
||||
})}
|
||||
</label>
|
||||
<div className="flex items-center h-9 gap-2">
|
||||
<Switch
|
||||
checked={model.reasoning ?? false}
|
||||
onCheckedChange={(checked) =>
|
||||
handleModelChange(index, "reasoning", checked)
|
||||
}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{model.reasoning
|
||||
? t("openclaw.reasoningOn", {
|
||||
defaultValue: "启用",
|
||||
})
|
||||
: t("openclaw.reasoningOff", {
|
||||
defaultValue: "关闭",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("openclaw.inputTypes", {
|
||||
defaultValue: "输入类型",
|
||||
})}
|
||||
</label>
|
||||
{/* "text" is checked by default but can be unchecked —
|
||||
some models genuinely don't support text input, and
|
||||
OpenClaw works fine with an empty or image-only array. */}
|
||||
<div className="flex items-center gap-4 h-9">
|
||||
{(["text", "image"] as const).map((type) => (
|
||||
<label
|
||||
key={type}
|
||||
className="flex items-center gap-1.5 cursor-pointer select-none"
|
||||
>
|
||||
<Checkbox
|
||||
checked={(model.input ?? ["text"]).includes(
|
||||
type,
|
||||
)}
|
||||
onCheckedChange={(checked) => {
|
||||
const current = model.input ?? ["text"];
|
||||
const next = checked
|
||||
? [...new Set([...current, type])]
|
||||
: current.filter((v) => v !== type);
|
||||
handleModelChange(index, "input", next);
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs">{type}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1" />
|
||||
</div>
|
||||
|
||||
{/* Context Window and Max Tokens row */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("openclaw.contextWindow", {
|
||||
defaultValue: "上下文窗口",
|
||||
})}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={model.contextWindow ?? ""}
|
||||
onChange={(e) =>
|
||||
handleModelChange(
|
||||
index,
|
||||
"contextWindow",
|
||||
e.target.value
|
||||
? parseInt(e.target.value)
|
||||
: undefined,
|
||||
)
|
||||
}
|
||||
placeholder="200000"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("openclaw.maxTokens", {
|
||||
defaultValue: "最大输出 Tokens",
|
||||
})}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={model.maxTokens ?? ""}
|
||||
onChange={(e) =>
|
||||
handleModelChange(
|
||||
index,
|
||||
"maxTokens",
|
||||
e.target.value
|
||||
? parseInt(e.target.value)
|
||||
: undefined,
|
||||
)
|
||||
}
|
||||
placeholder="32000"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1" />
|
||||
</div>
|
||||
|
||||
{/* Cost row */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("openclaw.inputCost", {
|
||||
defaultValue: "输入价格 ($/M tokens)",
|
||||
})}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.001"
|
||||
value={model.cost?.input ?? ""}
|
||||
onChange={(e) =>
|
||||
handleCostChange(index, "input", e.target.value)
|
||||
}
|
||||
placeholder="3"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("openclaw.outputCost", {
|
||||
defaultValue: "输出价格 ($/M tokens)",
|
||||
})}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.001"
|
||||
value={model.cost?.output ?? ""}
|
||||
onChange={(e) =>
|
||||
handleCostChange(index, "output", e.target.value)
|
||||
}
|
||||
placeholder="15"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1" />
|
||||
</div>
|
||||
|
||||
{/* Cache Cost row */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("openclaw.cacheReadCost", {
|
||||
defaultValue: "缓存读取价格 ($/M tokens)",
|
||||
})}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.001"
|
||||
value={model.cost?.cacheRead ?? ""}
|
||||
onChange={(e) =>
|
||||
handleCostChange(index, "cacheRead", e.target.value)
|
||||
}
|
||||
placeholder="0.3"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-xs text-muted-foreground">
|
||||
{t("openclaw.cacheWriteCost", {
|
||||
defaultValue: "缓存写入价格 ($/M tokens)",
|
||||
})}
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.001"
|
||||
value={model.cost?.cacheWrite ?? ""}
|
||||
onChange={(e) =>
|
||||
handleCostChange(
|
||||
index,
|
||||
"cacheWrite",
|
||||
e.target.value,
|
||||
)
|
||||
}
|
||||
placeholder="3.75"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1" />
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("openclaw.cacheCostHint", {
|
||||
defaultValue:
|
||||
"缓存价格用于计算 Prompt Caching 的成本。如不使用缓存可留空。",
|
||||
})}
|
||||
</p>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("openclaw.modelsHint", {
|
||||
defaultValue:
|
||||
"配置该供应商支持的模型。第一个模型为默认模型（Primary），其余为回退模型（Fallback）。拖拽或调整顺序可更改默认模型。",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,329 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState, useEffect } from "react";
|
||||
import { ChevronDown, ChevronRight, FlaskConical, Coins } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ProviderTestConfig } from "@/types";
|
||||
|
||||
export type PricingModelSourceOption = "inherit" | "request" | "response";
|
||||
|
||||
interface ProviderPricingConfig {
|
||||
enabled: boolean;
|
||||
costMultiplier?: string;
|
||||
pricingModelSource: PricingModelSourceOption;
|
||||
}
|
||||
|
||||
interface ProviderAdvancedConfigProps {
|
||||
testConfig: ProviderTestConfig;
|
||||
pricingConfig: ProviderPricingConfig;
|
||||
onTestConfigChange: (config: ProviderTestConfig) => void;
|
||||
onPricingConfigChange: (config: ProviderPricingConfig) => void;
|
||||
}
|
||||
|
||||
export function ProviderAdvancedConfig({
|
||||
testConfig,
|
||||
pricingConfig,
|
||||
onTestConfigChange,
|
||||
onPricingConfigChange,
|
||||
}: ProviderAdvancedConfigProps) {
|
||||
const { t } = useTranslation();
|
||||
const [isTestConfigOpen, setIsTestConfigOpen] = useState(testConfig.enabled);
|
||||
const [isPricingConfigOpen, setIsPricingConfigOpen] = useState(
|
||||
pricingConfig.enabled,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setIsTestConfigOpen(testConfig.enabled);
|
||||
}, [testConfig.enabled]);
|
||||
|
||||
useEffect(() => {
|
||||
setIsPricingConfigOpen(pricingConfig.enabled);
|
||||
}, [pricingConfig.enabled]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border border-border/50 bg-muted/20">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between p-4 hover:bg-muted/30 transition-colors"
|
||||
onClick={() => setIsTestConfigOpen(!isTestConfigOpen)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<FlaskConical className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">
|
||||
{t("providerAdvanced.testConfig", {
|
||||
defaultValue: "连通检测配置",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="flex items-center gap-2"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Label
|
||||
htmlFor="test-config-enabled"
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
{t("providerAdvanced.useCustomConfig", {
|
||||
defaultValue: "使用单独配置",
|
||||
})}
|
||||
</Label>
|
||||
<Switch
|
||||
id="test-config-enabled"
|
||||
checked={testConfig.enabled}
|
||||
onCheckedChange={(checked) => {
|
||||
onTestConfigChange({ ...testConfig, enabled: checked });
|
||||
if (checked) setIsTestConfigOpen(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{isTestConfigOpen ? (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
className={cn(
|
||||
"overflow-hidden transition-all duration-200",
|
||||
isTestConfigOpen
|
||||
? "max-h-[500px] opacity-100"
|
||||
: "max-h-0 opacity-0",
|
||||
)}
|
||||
>
|
||||
<div className="border-t border-border/50 p-4 space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("providerAdvanced.testConfigDesc", {
|
||||
defaultValue:
|
||||
"为此供应商配置单独的连通检测参数（超时/阈值/重试），不启用时使用全局配置。",
|
||||
})}
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="test-timeout">
|
||||
{t("providerAdvanced.timeoutSecs", {
|
||||
defaultValue: "超时时间（秒）",
|
||||
})}
|
||||
</Label>
|
||||
<Input
|
||||
id="test-timeout"
|
||||
type="number"
|
||||
min={1}
|
||||
max={60}
|
||||
value={testConfig.timeoutSecs || ""}
|
||||
onChange={(e) =>
|
||||
onTestConfigChange({
|
||||
...testConfig,
|
||||
timeoutSecs: e.target.value
|
||||
? parseInt(e.target.value, 10)
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
placeholder="8"
|
||||
disabled={!testConfig.enabled}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="degraded-threshold">
|
||||
{t("providerAdvanced.degradedThreshold", {
|
||||
defaultValue: "降级阈值（毫秒）",
|
||||
})}
|
||||
</Label>
|
||||
<Input
|
||||
id="degraded-threshold"
|
||||
type="number"
|
||||
min={100}
|
||||
max={60000}
|
||||
value={testConfig.degradedThresholdMs || ""}
|
||||
onChange={(e) =>
|
||||
onTestConfigChange({
|
||||
...testConfig,
|
||||
degradedThresholdMs: e.target.value
|
||||
? parseInt(e.target.value, 10)
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
placeholder="6000"
|
||||
disabled={!testConfig.enabled}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-retries">
|
||||
{t("providerAdvanced.maxRetries", {
|
||||
defaultValue: "最大重试次数",
|
||||
})}
|
||||
</Label>
|
||||
<Input
|
||||
id="max-retries"
|
||||
type="number"
|
||||
min={0}
|
||||
max={5}
|
||||
value={testConfig.maxRetries ?? ""}
|
||||
onChange={(e) =>
|
||||
onTestConfigChange({
|
||||
...testConfig,
|
||||
maxRetries: e.target.value
|
||||
? parseInt(e.target.value, 10)
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
placeholder="1"
|
||||
disabled={!testConfig.enabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 计费配置 */}
|
||||
<div className="rounded-lg border border-border/50 bg-muted/20">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between p-4 hover:bg-muted/30 transition-colors"
|
||||
onClick={() => setIsPricingConfigOpen(!isPricingConfigOpen)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Coins className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">
|
||||
{t("providerAdvanced.pricingConfig", {
|
||||
defaultValue: "计费配置",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="flex items-center gap-2"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Label
|
||||
htmlFor="pricing-config-enabled"
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
{t("providerAdvanced.useCustomPricing", {
|
||||
defaultValue: "使用单独配置",
|
||||
})}
|
||||
</Label>
|
||||
<Switch
|
||||
id="pricing-config-enabled"
|
||||
checked={pricingConfig.enabled}
|
||||
onCheckedChange={(checked) => {
|
||||
onPricingConfigChange({ ...pricingConfig, enabled: checked });
|
||||
if (checked) setIsPricingConfigOpen(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{isPricingConfigOpen ? (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
className={cn(
|
||||
"overflow-hidden transition-all duration-200",
|
||||
isPricingConfigOpen
|
||||
? "max-h-[500px] opacity-100"
|
||||
: "max-h-0 opacity-0",
|
||||
)}
|
||||
>
|
||||
<div className="border-t border-border/50 p-4 space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("providerAdvanced.pricingConfigDesc", {
|
||||
defaultValue:
|
||||
"为此供应商配置单独的计费参数，不启用时使用全局默认配置。",
|
||||
})}
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cost-multiplier">
|
||||
{t("providerAdvanced.costMultiplier", {
|
||||
defaultValue: "成本倍率",
|
||||
})}
|
||||
</Label>
|
||||
<Input
|
||||
id="cost-multiplier"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
inputMode="decimal"
|
||||
value={pricingConfig.costMultiplier || ""}
|
||||
onChange={(e) =>
|
||||
onPricingConfigChange({
|
||||
...pricingConfig,
|
||||
costMultiplier: e.target.value || undefined,
|
||||
})
|
||||
}
|
||||
placeholder={t("providerAdvanced.costMultiplierPlaceholder", {
|
||||
defaultValue: "留空使用全局默认（1）",
|
||||
})}
|
||||
disabled={!pricingConfig.enabled}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("providerAdvanced.costMultiplierHint", {
|
||||
defaultValue: "实际成本 = 基础成本 × 倍率，支持小数如 1.5",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="pricing-model-source">
|
||||
{t("providerAdvanced.pricingModelSourceLabel", {
|
||||
defaultValue: "计费模式",
|
||||
})}
|
||||
</Label>
|
||||
<Select
|
||||
value={pricingConfig.pricingModelSource}
|
||||
onValueChange={(value) =>
|
||||
onPricingConfigChange({
|
||||
...pricingConfig,
|
||||
pricingModelSource: value as PricingModelSourceOption,
|
||||
})
|
||||
}
|
||||
disabled={!pricingConfig.enabled}
|
||||
>
|
||||
<SelectTrigger id="pricing-model-source">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="inherit">
|
||||
{t("providerAdvanced.pricingModelSourceInherit", {
|
||||
defaultValue: "继承全局默认",
|
||||
})}
|
||||
</SelectItem>
|
||||
<SelectItem value="request">
|
||||
{t("providerAdvanced.pricingModelSourceRequest", {
|
||||
defaultValue: "请求模型",
|
||||
})}
|
||||
</SelectItem>
|
||||
<SelectItem value="response">
|
||||
{t("providerAdvanced.pricingModelSourceResponse", {
|
||||
defaultValue: "返回模型",
|
||||
})}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("providerAdvanced.pricingModelSourceHint", {
|
||||
defaultValue: "选择按请求模型还是返回模型进行定价匹配",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,488 @@
|
||||
import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FormLabel } from "@/components/ui/form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ClaudeIcon, CodexIcon, GeminiIcon } from "@/components/BrandIcons";
|
||||
import {
|
||||
ArrowUpAZ,
|
||||
Search,
|
||||
Zap,
|
||||
Star,
|
||||
Heart,
|
||||
Layers,
|
||||
Settings2,
|
||||
} from "lucide-react";
|
||||
import type { ProviderPreset } from "@/config/claudeProviderPresets";
|
||||
import type { CodexProviderPreset } from "@/config/codexProviderPresets";
|
||||
import type { GeminiProviderPreset } from "@/config/geminiProviderPresets";
|
||||
import type { ClaudeDesktopProviderPreset } from "@/config/claudeDesktopProviderPresets";
|
||||
import type { OpenCodeProviderPreset } from "@/config/opencodeProviderPresets";
|
||||
import type { OpenClawProviderPreset } from "@/config/openclawProviderPresets";
|
||||
import type { HermesProviderPreset } from "@/config/hermesProviderPresets";
|
||||
import type { ProviderCategory } from "@/types";
|
||||
import {
|
||||
universalProviderPresets,
|
||||
type UniversalProviderPreset,
|
||||
} from "@/config/universalProviderPresets";
|
||||
import { ProviderIcon } from "@/components/ProviderIcon";
|
||||
|
||||
type PresetTranslator = (key: string) => unknown;
|
||||
|
||||
export const PresetSortMode = {
|
||||
Original: "original",
|
||||
NameAsc: "nameAsc",
|
||||
} as const;
|
||||
|
||||
export type PresetSortMode =
|
||||
(typeof PresetSortMode)[keyof typeof PresetSortMode];
|
||||
|
||||
export type AnyPreset =
|
||||
| ProviderPreset
|
||||
| CodexProviderPreset
|
||||
| GeminiProviderPreset
|
||||
| ClaudeDesktopProviderPreset
|
||||
| OpenCodeProviderPreset
|
||||
| OpenClawProviderPreset
|
||||
| HermesProviderPreset;
|
||||
|
||||
export type PresetEntry = {
|
||||
id: string;
|
||||
preset: AnyPreset;
|
||||
};
|
||||
|
||||
export function getPresetDisplayName(
|
||||
preset: AnyPreset,
|
||||
t: PresetTranslator,
|
||||
): string {
|
||||
return preset.nameKey ? String(t(preset.nameKey)) : preset.name;
|
||||
}
|
||||
|
||||
export function getPresetSearchText(
|
||||
entry: PresetEntry,
|
||||
t: PresetTranslator,
|
||||
): string {
|
||||
return [getPresetDisplayName(entry.preset, t), entry.preset.name]
|
||||
.join(" ")
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
export function filterPresetEntries(
|
||||
entries: PresetEntry[],
|
||||
query: string,
|
||||
t: PresetTranslator,
|
||||
): PresetEntry[] {
|
||||
const normalizedQuery = query.trim().toLowerCase();
|
||||
if (!normalizedQuery) {
|
||||
return entries;
|
||||
}
|
||||
|
||||
return entries.filter((entry) =>
|
||||
getPresetSearchText(entry, t).includes(normalizedQuery),
|
||||
);
|
||||
}
|
||||
|
||||
export function sortPresetEntries(
|
||||
entries: PresetEntry[],
|
||||
sortMode: PresetSortMode,
|
||||
t: PresetTranslator,
|
||||
): PresetEntry[] {
|
||||
if (sortMode === PresetSortMode.Original) {
|
||||
// 置顶优先级：官方分类 > 尊享合作伙伴（Kimi）> 其余原顺序。
|
||||
// 用分区拼接而非排序，确保每组内部各自的相对顺序都不变；
|
||||
// 排他条件保证「既是官方又是 prime」的预设只归入官方组、不被重复。
|
||||
const official = entries.filter(
|
||||
(entry) => entry.preset.category === "official",
|
||||
);
|
||||
const prime = entries.filter(
|
||||
(entry) =>
|
||||
entry.preset.category !== "official" && entry.preset.primePartner,
|
||||
);
|
||||
const rest = entries.filter(
|
||||
(entry) =>
|
||||
entry.preset.category !== "official" && !entry.preset.primePartner,
|
||||
);
|
||||
return [...official, ...prime, ...rest];
|
||||
}
|
||||
|
||||
return [...entries].sort((a, b) =>
|
||||
getPresetDisplayName(a.preset, t).localeCompare(
|
||||
getPresetDisplayName(b.preset, t),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
export interface PresetVisibilityOptions {
|
||||
query: string;
|
||||
sortMode: PresetSortMode;
|
||||
t: PresetTranslator;
|
||||
}
|
||||
|
||||
export function getVisiblePresetEntries(
|
||||
entries: PresetEntry[],
|
||||
options: PresetVisibilityOptions,
|
||||
): PresetEntry[] {
|
||||
const { query, sortMode, t } = options;
|
||||
|
||||
return sortPresetEntries(filterPresetEntries(entries, query, t), sortMode, t);
|
||||
}
|
||||
|
||||
interface ProviderPresetSelectorProps {
|
||||
selectedPresetId: string | null;
|
||||
presetEntries: PresetEntry[];
|
||||
presetCategoryLabels: Record<string, string>;
|
||||
onPresetChange: (value: string) => void;
|
||||
onUniversalPresetSelect?: (preset: UniversalProviderPreset) => void;
|
||||
onManageUniversalProviders?: () => void;
|
||||
category?: ProviderCategory; // 当前选中的分类
|
||||
}
|
||||
|
||||
export function ProviderPresetSelector({
|
||||
selectedPresetId,
|
||||
presetEntries,
|
||||
presetCategoryLabels,
|
||||
onPresetChange,
|
||||
onUniversalPresetSelect,
|
||||
onManageUniversalProviders,
|
||||
category,
|
||||
}: Readonly<ProviderPresetSelectorProps>) {
|
||||
const { t } = useTranslation();
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [sortMode, setSortMode] = useState<PresetSortMode>(
|
||||
PresetSortMode.Original,
|
||||
);
|
||||
const searchContainerRef = useRef<HTMLDivElement>(null);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// 点击搜索区域外时收起并清空,对齐旧 Popover 的「点击外部关闭」行为
|
||||
useEffect(() => {
|
||||
if (!searchOpen) return;
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
searchContainerRef.current &&
|
||||
!searchContainerRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setSearchOpen(false);
|
||||
setSearchQuery("");
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [searchOpen]);
|
||||
|
||||
// 键盘快捷键: Ctrl/Cmd+F 打开搜索并聚焦输入框。
|
||||
// 使用捕获阶段并阻止冒泡，避免背后 ProviderList 的同名快捷键被意外触发。
|
||||
// 首次打开靠 Input 的 autoFocus 聚焦；若搜索已打开（例如点击 preset 后焦点
|
||||
// 停在按钮上），setSearchOpen(true) 同值不会重渲染、autoFocus 不重触发，
|
||||
// 这里用 rAF 命令式地把焦点移回搜索框（不 select，避免吞掉随后输入的首字符）。
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "f") {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
setSearchOpen(true);
|
||||
requestAnimationFrame(() => searchInputRef.current?.focus());
|
||||
}
|
||||
};
|
||||
|
||||
globalThis.addEventListener("keydown", handleKeyDown, true);
|
||||
return () => globalThis.removeEventListener("keydown", handleKeyDown, true);
|
||||
}, []);
|
||||
|
||||
const visiblePresetEntries = useMemo(
|
||||
() =>
|
||||
getVisiblePresetEntries(presetEntries, {
|
||||
query: searchQuery,
|
||||
sortMode,
|
||||
t,
|
||||
}),
|
||||
[presetEntries, searchQuery, sortMode, t],
|
||||
);
|
||||
|
||||
const getCategoryHint = (): ReactNode => {
|
||||
switch (category) {
|
||||
case "official":
|
||||
return t("providerForm.officialHint", {
|
||||
defaultValue: "💡 官方供应商使用浏览器登录，无需配置 API Key",
|
||||
});
|
||||
case "cn_official":
|
||||
return t("providerForm.cnOfficialApiKeyHint", {
|
||||
defaultValue: "💡 国产官方供应商只需填写 API Key，请求地址已预设",
|
||||
});
|
||||
case "aggregator":
|
||||
return t("providerForm.aggregatorApiKeyHint", {
|
||||
defaultValue: "💡 聚合服务供应商只需填写 API Key 即可使用",
|
||||
});
|
||||
case "third_party":
|
||||
return t("providerForm.thirdPartyApiKeyHint", {
|
||||
defaultValue: "💡 第三方供应商需要填写 API Key 和请求地址",
|
||||
});
|
||||
case "custom":
|
||||
return t("providerForm.customApiKeyHint", {
|
||||
defaultValue: "💡 自定义配置需手动填写所有必要字段",
|
||||
});
|
||||
case "omo":
|
||||
return t("providerForm.omoHint", {
|
||||
defaultValue:
|
||||
"💡 OMO 配置管理 Agent 模型分配，兼容 oh-my-openagent.jsonc / oh-my-opencode.jsonc",
|
||||
});
|
||||
default:
|
||||
return t("providerPreset.hint", {
|
||||
defaultValue: "选择预设后可继续调整下方字段。",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSortMode = () => {
|
||||
setSortMode((current) =>
|
||||
current === PresetSortMode.Original
|
||||
? PresetSortMode.NameAsc
|
||||
: PresetSortMode.Original,
|
||||
);
|
||||
};
|
||||
|
||||
const renderPresetIcon = (preset: AnyPreset) => {
|
||||
if (preset.icon) {
|
||||
return (
|
||||
<ProviderIcon
|
||||
icon={preset.icon}
|
||||
name={preset.name}
|
||||
color={preset.iconColor}
|
||||
size={16}
|
||||
className="flex-shrink-0"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const iconType = preset.theme?.icon;
|
||||
if (iconType) {
|
||||
switch (iconType) {
|
||||
case "claude":
|
||||
return <ClaudeIcon size={14} />;
|
||||
case "codex":
|
||||
return <CodexIcon size={14} />;
|
||||
case "gemini":
|
||||
return <GeminiIcon size={14} />;
|
||||
case "generic":
|
||||
return <Zap size={14} />;
|
||||
}
|
||||
}
|
||||
|
||||
return <span className="inline-block w-4 h-4 flex-shrink-0" aria-hidden />;
|
||||
};
|
||||
|
||||
const getPresetButtonClass = (isSelected: boolean, preset: AnyPreset) => {
|
||||
const baseClass =
|
||||
"inline-flex items-center justify-start gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors w-full";
|
||||
|
||||
if (isSelected) {
|
||||
if (preset.theme?.backgroundColor) {
|
||||
return `${baseClass} text-white`;
|
||||
}
|
||||
return `${baseClass} bg-blue-500 text-white dark:bg-blue-600`;
|
||||
}
|
||||
|
||||
return `${baseClass} bg-accent text-muted-foreground hover:bg-accent/80`;
|
||||
};
|
||||
|
||||
const getPresetButtonStyle = (isSelected: boolean, preset: AnyPreset) => {
|
||||
if (!isSelected || !preset.theme?.backgroundColor) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return {
|
||||
backgroundColor: preset.theme.backgroundColor,
|
||||
color: preset.theme.textColor || "#FFFFFF",
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={searchContainerRef} className="space-y-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<FormLabel>{t("providerPreset.label")}</FormLabel>
|
||||
<div className="flex items-center gap-2">
|
||||
{searchOpen && (
|
||||
<Input
|
||||
ref={searchInputRef}
|
||||
value={searchQuery}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Escape") {
|
||||
setSearchQuery("");
|
||||
setSearchOpen(false);
|
||||
}
|
||||
}}
|
||||
placeholder={t("providerPreset.searchPlaceholder", {
|
||||
defaultValue: "Search presets...",
|
||||
})}
|
||||
aria-label={t("providerPreset.searchAriaLabel", {
|
||||
defaultValue: "Search provider presets",
|
||||
})}
|
||||
className="w-60 h-8"
|
||||
autoFocus
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label={t("providerPreset.searchAriaLabel", {
|
||||
defaultValue: "Search provider presets",
|
||||
})}
|
||||
aria-pressed={searchOpen}
|
||||
onClick={() => {
|
||||
setSearchOpen((v) => !v);
|
||||
if (searchOpen) setSearchQuery("");
|
||||
}}
|
||||
title={t("providerPreset.searchTooltip", {
|
||||
defaultValue: "Search presets",
|
||||
})}
|
||||
className={
|
||||
searchOpen || searchQuery.trim()
|
||||
? "size-8 bg-accent text-foreground"
|
||||
: "size-8"
|
||||
}
|
||||
>
|
||||
<Search className="size-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label={t("providerPreset.sortAriaLabel", {
|
||||
defaultValue: "Toggle preset sorting",
|
||||
})}
|
||||
aria-pressed={sortMode === PresetSortMode.NameAsc}
|
||||
onClick={toggleSortMode}
|
||||
title={
|
||||
sortMode === PresetSortMode.NameAsc
|
||||
? t("providerPreset.sortOriginalTooltip", {
|
||||
defaultValue: "Restore original order",
|
||||
})
|
||||
: t("providerPreset.sortNameAscTooltip", {
|
||||
defaultValue: "Sort A-Z",
|
||||
})
|
||||
}
|
||||
className={
|
||||
sortMode === PresetSortMode.NameAsc
|
||||
? "size-8 bg-accent text-foreground"
|
||||
: "size-8"
|
||||
}
|
||||
>
|
||||
<ArrowUpAZ className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onPresetChange("custom")}
|
||||
className={`inline-flex items-center justify-start gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors w-full ${
|
||||
selectedPresetId === "custom"
|
||||
? "bg-blue-500 text-white dark:bg-blue-600"
|
||||
: "bg-accent text-muted-foreground hover:bg-accent/80"
|
||||
}`}
|
||||
>
|
||||
<span className="inline-block w-4 h-4 flex-shrink-0" aria-hidden />
|
||||
<span className="truncate">{t("providerPreset.custom")}</span>
|
||||
</button>
|
||||
|
||||
{visiblePresetEntries.length === 0 && (
|
||||
<div className="col-span-full rounded-md border border-dashed border-border-default px-3 py-2 text-xs text-muted-foreground">
|
||||
{t("providerPreset.noSearchResults", {
|
||||
defaultValue: "No matching presets.",
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{visiblePresetEntries.map((entry) => {
|
||||
const isSelected = selectedPresetId === entry.id;
|
||||
const isPartner = entry.preset.isPartner;
|
||||
const isPrimePartner = entry.preset.primePartner;
|
||||
const presetCategory = entry.preset.category ?? "others";
|
||||
return (
|
||||
<button
|
||||
key={entry.id}
|
||||
type="button"
|
||||
onClick={() => onPresetChange(entry.id)}
|
||||
className={`${getPresetButtonClass(isSelected, entry.preset)} relative`}
|
||||
style={getPresetButtonStyle(isSelected, entry.preset)}
|
||||
title={
|
||||
presetCategoryLabels[presetCategory] ??
|
||||
t("providerPreset.other")
|
||||
}
|
||||
>
|
||||
{renderPresetIcon(entry.preset)}
|
||||
<span className="truncate">
|
||||
{getPresetDisplayName(entry.preset, t)}
|
||||
</span>
|
||||
{isPrimePartner ? (
|
||||
<Heart
|
||||
className="absolute -top-1 -right-1 h-5 w-5 fill-amber-500 text-amber-500 drop-shadow-sm"
|
||||
strokeWidth={0}
|
||||
aria-hidden
|
||||
/>
|
||||
) : (
|
||||
isPartner && (
|
||||
<span className="absolute -top-1 -right-1 flex items-center gap-0.5 rounded-full bg-gradient-to-r from-amber-500 to-yellow-500 px-1.5 py-0.5 text-[10px] font-bold text-white shadow-md">
|
||||
<Star className="h-2.5 w-2.5 fill-current" />
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{onUniversalPresetSelect && universalProviderPresets.length > 0 && (
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-2">
|
||||
{universalProviderPresets.map((preset) => (
|
||||
<button
|
||||
key={`universal-${preset.providerType}`}
|
||||
type="button"
|
||||
onClick={() => onUniversalPresetSelect(preset)}
|
||||
className="inline-flex items-center justify-start gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors bg-accent text-muted-foreground hover:bg-accent/80 relative w-full"
|
||||
title={t("universalProvider.hint", {
|
||||
defaultValue: "跨应用统一配置，自动同步到 Claude/Codex/Gemini",
|
||||
})}
|
||||
>
|
||||
<ProviderIcon
|
||||
icon={preset.icon}
|
||||
name={preset.name}
|
||||
size={14}
|
||||
className="flex-shrink-0"
|
||||
/>
|
||||
<span className="truncate">{preset.name}</span>
|
||||
<span className="absolute -top-1 -right-1 flex items-center gap-0.5 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 px-1.5 py-0.5 text-[10px] font-bold text-white shadow-md">
|
||||
<Layers className="h-2.5 w-2.5" />
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{onManageUniversalProviders && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onManageUniversalProviders}
|
||||
className="inline-flex items-center justify-start gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors bg-accent text-muted-foreground hover:bg-accent/80 w-full"
|
||||
title={t("universalProvider.manage", {
|
||||
defaultValue: "管理统一供应商",
|
||||
})}
|
||||
>
|
||||
<Settings2 className="h-4 w-4 flex-shrink-0" />
|
||||
<span className="truncate">
|
||||
{t("universalProvider.manage", {
|
||||
defaultValue: "管理",
|
||||
})}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted-foreground">{getCategoryHint()}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
import type { OpenCodeModel, OpenCodeProviderConfig } from "@/types";
|
||||
import type { PricingModelSourceOption } from "../ProviderAdvancedConfig";
|
||||
|
||||
// ── Default configs ──────────────────────────────────────────────────
|
||||
|
||||
export const CLAUDE_DEFAULT_CONFIG = JSON.stringify({ env: {} }, null, 2);
|
||||
export const CLAUDE_DESKTOP_DEFAULT_CONFIG = JSON.stringify(
|
||||
{
|
||||
env: {
|
||||
ANTHROPIC_BASE_URL: "",
|
||||
ANTHROPIC_AUTH_TOKEN: "",
|
||||
},
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
export const CODEX_DEFAULT_CONFIG = JSON.stringify(
|
||||
{ auth: {}, config: "" },
|
||||
null,
|
||||
2,
|
||||
);
|
||||
export const GEMINI_DEFAULT_CONFIG = JSON.stringify(
|
||||
{
|
||||
env: {
|
||||
GOOGLE_GEMINI_BASE_URL: "",
|
||||
GEMINI_API_KEY: "",
|
||||
GEMINI_MODEL: "gemini-3.5-flash",
|
||||
},
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
|
||||
export const OPENCODE_DEFAULT_NPM = "@ai-sdk/openai-compatible";
|
||||
export const OPENCODE_DEFAULT_CONFIG = JSON.stringify(
|
||||
{
|
||||
npm: OPENCODE_DEFAULT_NPM,
|
||||
options: {
|
||||
baseURL: "",
|
||||
apiKey: "",
|
||||
setCacheKey: true,
|
||||
},
|
||||
models: {},
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
export const OPENCODE_KNOWN_OPTION_KEYS = [
|
||||
"baseURL",
|
||||
"apiKey",
|
||||
"headers",
|
||||
] as const;
|
||||
|
||||
// Contains ":", which is not valid in an HTTP field name, so it cannot
|
||||
// collide with a legitimate custom header from an existing configuration.
|
||||
export const OPENCODE_HEADER_DRAFT_PREFIX = "draft-header:";
|
||||
export const OPENCODE_EXTRA_OPTION_DRAFT_PREFIX = "draft-option:";
|
||||
|
||||
export const OPENCLAW_DEFAULT_CONFIG = JSON.stringify(
|
||||
{
|
||||
baseUrl: "",
|
||||
apiKey: "",
|
||||
api: "openai-completions",
|
||||
models: [],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
|
||||
// ── Pure functions ───────────────────────────────────────────────────
|
||||
|
||||
export function isKnownOpencodeOptionKey(key: string): boolean {
|
||||
return OPENCODE_KNOWN_OPTION_KEYS.includes(
|
||||
key as (typeof OPENCODE_KNOWN_OPTION_KEYS)[number],
|
||||
);
|
||||
}
|
||||
|
||||
export function parseOpencodeConfig(
|
||||
settingsConfig?: Record<string, unknown>,
|
||||
): OpenCodeProviderConfig {
|
||||
const normalize = (
|
||||
parsed: Partial<OpenCodeProviderConfig>,
|
||||
): OpenCodeProviderConfig => ({
|
||||
npm: parsed.npm || OPENCODE_DEFAULT_NPM,
|
||||
options:
|
||||
parsed.options && typeof parsed.options === "object"
|
||||
? (parsed.options as OpenCodeProviderConfig["options"])
|
||||
: {},
|
||||
models:
|
||||
parsed.models && typeof parsed.models === "object"
|
||||
? (parsed.models as Record<string, OpenCodeModel>)
|
||||
: {},
|
||||
});
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(
|
||||
settingsConfig ? JSON.stringify(settingsConfig) : OPENCODE_DEFAULT_CONFIG,
|
||||
) as Partial<OpenCodeProviderConfig>;
|
||||
return normalize(parsed);
|
||||
} catch {
|
||||
return {
|
||||
npm: OPENCODE_DEFAULT_NPM,
|
||||
options: {},
|
||||
models: {},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export function parseOpencodeConfigStrict(
|
||||
settingsConfig?: Record<string, unknown>,
|
||||
): OpenCodeProviderConfig {
|
||||
const parsed = JSON.parse(
|
||||
settingsConfig ? JSON.stringify(settingsConfig) : OPENCODE_DEFAULT_CONFIG,
|
||||
) as Partial<OpenCodeProviderConfig>;
|
||||
return {
|
||||
npm: parsed.npm || OPENCODE_DEFAULT_NPM,
|
||||
options:
|
||||
parsed.options && typeof parsed.options === "object"
|
||||
? (parsed.options as OpenCodeProviderConfig["options"])
|
||||
: {},
|
||||
models:
|
||||
parsed.models && typeof parsed.models === "object"
|
||||
? (parsed.models as Record<string, OpenCodeModel>)
|
||||
: {},
|
||||
};
|
||||
}
|
||||
|
||||
export const OPENCODE_KNOWN_MODEL_KEYS = ["name", "limit", "options"] as const;
|
||||
|
||||
export function isKnownModelKey(key: string): boolean {
|
||||
return OPENCODE_KNOWN_MODEL_KEYS.includes(
|
||||
key as (typeof OPENCODE_KNOWN_MODEL_KEYS)[number],
|
||||
);
|
||||
}
|
||||
|
||||
export function getModelExtraFields(
|
||||
model: OpenCodeModel,
|
||||
): Record<string, string> {
|
||||
const extra: Record<string, string> = {};
|
||||
for (const [k, v] of Object.entries(model)) {
|
||||
if (!isKnownModelKey(k)) {
|
||||
extra[k] = typeof v === "string" ? v : JSON.stringify(v);
|
||||
}
|
||||
}
|
||||
return extra;
|
||||
}
|
||||
|
||||
export function toOpencodeExtraOptions(
|
||||
options: OpenCodeProviderConfig["options"],
|
||||
): Record<string, string> {
|
||||
const extra: Record<string, string> = {};
|
||||
for (const [k, v] of Object.entries(options || {})) {
|
||||
if (!isKnownOpencodeOptionKey(k)) {
|
||||
extra[k] = typeof v === "string" ? v : JSON.stringify(v);
|
||||
}
|
||||
}
|
||||
return extra;
|
||||
}
|
||||
|
||||
export { buildOmoProfilePreview } from "@/types/omo";
|
||||
|
||||
export const normalizePricingSource = (
|
||||
value?: string,
|
||||
): PricingModelSourceOption =>
|
||||
value === "request" || value === "response" ? value : "inherit";
|
||||
@@ -0,0 +1,22 @@
|
||||
export { useProviderCategory } from "./useProviderCategory";
|
||||
export { useApiKeyState } from "./useApiKeyState";
|
||||
export { useBaseUrlState } from "./useBaseUrlState";
|
||||
export { useModelState } from "./useModelState";
|
||||
export { useCodexConfigState } from "./useCodexConfigState";
|
||||
export { useApiKeyLink } from "./useApiKeyLink";
|
||||
export { useCustomEndpoints } from "./useCustomEndpoints";
|
||||
export { useTemplateValues } from "./useTemplateValues";
|
||||
export { useCommonConfigSnippet } from "./useCommonConfigSnippet";
|
||||
export { useCodexCommonConfig } from "./useCodexCommonConfig";
|
||||
export { useSpeedTestEndpoints } from "./useSpeedTestEndpoints";
|
||||
export { useCodexTomlValidation } from "./useCodexTomlValidation";
|
||||
export { useGeminiConfigState } from "./useGeminiConfigState";
|
||||
export { useManagedAuth } from "./useManagedAuth";
|
||||
export { useGeminiCommonConfig } from "./useGeminiCommonConfig";
|
||||
export { useOmoModelSource } from "./useOmoModelSource";
|
||||
export { useOpencodeFormState } from "./useOpencodeFormState";
|
||||
export { useOmoDraftState } from "./useOmoDraftState";
|
||||
export { useOpenclawFormState } from "./useOpenclawFormState";
|
||||
export { useHermesFormState } from "./useHermesFormState";
|
||||
export { useCopilotAuth } from "./useCopilotAuth";
|
||||
export { useCodexOauth } from "./useCodexOauth";
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useMemo } from "react";
|
||||
import type { AppId } from "@/lib/api";
|
||||
import type { ProviderCategory } from "@/types";
|
||||
import type { ProviderPreset } from "@/config/claudeProviderPresets";
|
||||
import type { CodexProviderPreset } from "@/config/codexProviderPresets";
|
||||
import type { GeminiProviderPreset } from "@/config/geminiProviderPresets";
|
||||
import type { OpenCodeProviderPreset } from "@/config/opencodeProviderPresets";
|
||||
import type { ClaudeDesktopProviderPreset } from "@/config/claudeDesktopProviderPresets";
|
||||
|
||||
type PresetEntry = {
|
||||
id: string;
|
||||
preset:
|
||||
| ProviderPreset
|
||||
| CodexProviderPreset
|
||||
| GeminiProviderPreset
|
||||
| OpenCodeProviderPreset
|
||||
| ClaudeDesktopProviderPreset;
|
||||
};
|
||||
|
||||
interface UseApiKeyLinkProps {
|
||||
appId: AppId;
|
||||
category?: ProviderCategory;
|
||||
selectedPresetId: string | null;
|
||||
presetEntries: PresetEntry[];
|
||||
formWebsiteUrl: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理 API Key 获取链接的显示和 URL
|
||||
*/
|
||||
export function useApiKeyLink({
|
||||
appId,
|
||||
category,
|
||||
selectedPresetId,
|
||||
presetEntries,
|
||||
formWebsiteUrl,
|
||||
}: UseApiKeyLinkProps) {
|
||||
// 判断是否显示 API Key 获取链接
|
||||
const shouldShowApiKeyLink = useMemo(() => {
|
||||
return (
|
||||
category !== "official" &&
|
||||
(category === "cn_official" ||
|
||||
category === "aggregator" ||
|
||||
category === "third_party")
|
||||
);
|
||||
}, [category]);
|
||||
|
||||
// 获取当前预设条目
|
||||
const currentPresetEntry = useMemo(() => {
|
||||
if (selectedPresetId && selectedPresetId !== "custom") {
|
||||
return presetEntries.find((item) => item.id === selectedPresetId);
|
||||
}
|
||||
return undefined;
|
||||
}, [selectedPresetId, presetEntries]);
|
||||
|
||||
// 获取当前供应商的网址（用于 API Key 链接）
|
||||
const getWebsiteUrl = useMemo(() => {
|
||||
if (currentPresetEntry) {
|
||||
const preset = currentPresetEntry.preset;
|
||||
// 对于 cn_official、aggregator、third_party，优先使用 apiKeyUrl（可能包含推广参数）
|
||||
if (
|
||||
preset.category === "cn_official" ||
|
||||
preset.category === "aggregator" ||
|
||||
preset.category === "third_party"
|
||||
) {
|
||||
return preset.apiKeyUrl || preset.websiteUrl || "";
|
||||
}
|
||||
return preset.websiteUrl || "";
|
||||
}
|
||||
return formWebsiteUrl || "";
|
||||
}, [currentPresetEntry, formWebsiteUrl]);
|
||||
|
||||
// 提取合作伙伴信息
|
||||
const isPartner = useMemo(() => {
|
||||
return currentPresetEntry?.preset.isPartner ?? false;
|
||||
}, [currentPresetEntry]);
|
||||
|
||||
const partnerPromotionKey = useMemo(() => {
|
||||
return currentPresetEntry?.preset.partnerPromotionKey;
|
||||
}, [currentPresetEntry]);
|
||||
|
||||
return {
|
||||
shouldShowApiKeyLink:
|
||||
appId === "claude" ||
|
||||
appId === "claude-desktop" ||
|
||||
appId === "codex" ||
|
||||
appId === "gemini" ||
|
||||
appId === "opencode" ||
|
||||
appId === "openclaw" ||
|
||||
appId === "hermes"
|
||||
? shouldShowApiKeyLink
|
||||
: false,
|
||||
websiteUrl: getWebsiteUrl,
|
||||
isPartner,
|
||||
partnerPromotionKey,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import type { ProviderCategory } from "@/types";
|
||||
import {
|
||||
getApiKeyFromConfig,
|
||||
setApiKeyInConfig,
|
||||
hasApiKeyField,
|
||||
} from "@/utils/providerConfigUtils";
|
||||
|
||||
interface UseApiKeyStateProps {
|
||||
initialConfig?: string;
|
||||
onConfigChange: (config: string) => void;
|
||||
selectedPresetId: string | null;
|
||||
category?: ProviderCategory;
|
||||
appType?: string;
|
||||
apiKeyField?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理 API Key 输入状态
|
||||
* 自动同步 API Key 和 JSON 配置
|
||||
*/
|
||||
export function useApiKeyState({
|
||||
initialConfig,
|
||||
onConfigChange,
|
||||
selectedPresetId,
|
||||
category,
|
||||
appType,
|
||||
apiKeyField,
|
||||
}: UseApiKeyStateProps) {
|
||||
const [apiKey, setApiKey] = useState(() => {
|
||||
if (initialConfig) {
|
||||
return getApiKeyFromConfig(initialConfig, appType);
|
||||
}
|
||||
return "";
|
||||
});
|
||||
|
||||
// 当外部通过 form.reset / 读取 live 等方式更新配置时，同步回 API Key 状态
|
||||
// - 仅在 JSON 可解析时同步，避免用户编辑 JSON 过程中因临时无效导致输入框闪烁
|
||||
useEffect(() => {
|
||||
if (!initialConfig) return;
|
||||
|
||||
try {
|
||||
JSON.parse(initialConfig);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
// 从配置中提取 API Key（如果不存在则返回空字符串）
|
||||
const extracted = getApiKeyFromConfig(initialConfig, appType);
|
||||
if (extracted !== apiKey) {
|
||||
setApiKey(extracted);
|
||||
}
|
||||
}, [initialConfig, appType, apiKey]);
|
||||
|
||||
const handleApiKeyChange = useCallback(
|
||||
(key: string) => {
|
||||
setApiKey(key);
|
||||
|
||||
const configString = setApiKeyInConfig(
|
||||
initialConfig || "{}",
|
||||
key.trim(),
|
||||
{
|
||||
// 最佳实践：仅在"非官方/非云厂商类别"时补齐缺失字段
|
||||
// - 官方类别：不创建字段（UI 也会禁用输入框）
|
||||
// - 云厂商类别：通常使用专用鉴权字段，不自动创建 Anthropic key
|
||||
// - 未传入 category：按历史导入/自定义 provider 处理，允许补齐
|
||||
createIfMissing:
|
||||
category !== "official" && category !== "cloud_provider",
|
||||
appType,
|
||||
apiKeyField,
|
||||
},
|
||||
);
|
||||
|
||||
onConfigChange(configString);
|
||||
},
|
||||
[
|
||||
initialConfig,
|
||||
selectedPresetId,
|
||||
category,
|
||||
appType,
|
||||
apiKeyField,
|
||||
onConfigChange,
|
||||
],
|
||||
);
|
||||
|
||||
const showApiKey = useCallback(
|
||||
(config: string, isEditMode: boolean) => {
|
||||
return (
|
||||
selectedPresetId !== null ||
|
||||
(isEditMode &&
|
||||
category !== "official" &&
|
||||
category !== "cloud_provider") ||
|
||||
(isEditMode && hasApiKeyField(config, appType))
|
||||
);
|
||||
},
|
||||
[selectedPresetId, category, appType],
|
||||
);
|
||||
|
||||
return {
|
||||
apiKey,
|
||||
setApiKey,
|
||||
handleApiKeyChange,
|
||||
showApiKey,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
import {
|
||||
extractCodexBaseUrl,
|
||||
setCodexBaseUrl as setCodexBaseUrlInConfig,
|
||||
} from "@/utils/providerConfigUtils";
|
||||
import type { ProviderCategory } from "@/types";
|
||||
import type { AppId } from "@/lib/api";
|
||||
|
||||
interface UseBaseUrlStateProps {
|
||||
appType: AppId;
|
||||
category: ProviderCategory | undefined;
|
||||
settingsConfig: string;
|
||||
codexConfig?: string;
|
||||
onSettingsConfigChange: (config: string) => void;
|
||||
onCodexConfigChange?: (config: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理 Base URL 状态
|
||||
* 支持 Claude (JSON) 和 Codex (TOML) 两种格式
|
||||
*/
|
||||
export function useBaseUrlState({
|
||||
appType,
|
||||
category,
|
||||
settingsConfig,
|
||||
codexConfig,
|
||||
onSettingsConfigChange,
|
||||
onCodexConfigChange,
|
||||
}: UseBaseUrlStateProps) {
|
||||
const [baseUrl, setBaseUrl] = useState("");
|
||||
const [codexBaseUrl, setCodexBaseUrl] = useState("");
|
||||
const [geminiBaseUrl, setGeminiBaseUrl] = useState("");
|
||||
const isUpdatingRef = useRef(false);
|
||||
|
||||
// 从配置同步到 state（Claude / Claude Desktop）
|
||||
useEffect(() => {
|
||||
if (appType !== "claude" && appType !== "claude-desktop") return;
|
||||
// 只有 official 类别不显示 Base URL 输入框，其他类别都需要回填
|
||||
if (category === "official") return;
|
||||
if (isUpdatingRef.current) return;
|
||||
|
||||
try {
|
||||
const config = JSON.parse(settingsConfig || "{}");
|
||||
const envUrl: unknown = config?.env?.ANTHROPIC_BASE_URL;
|
||||
const nextUrl = typeof envUrl === "string" ? envUrl.trim() : "";
|
||||
if (nextUrl !== baseUrl) {
|
||||
setBaseUrl(nextUrl);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, [appType, category, settingsConfig, baseUrl]);
|
||||
|
||||
// 从配置同步到 state（Codex）
|
||||
useEffect(() => {
|
||||
if (appType !== "codex") return;
|
||||
// 只有 official 类别不显示 Base URL 输入框，其他类别都需要回填
|
||||
if (category === "official") return;
|
||||
if (isUpdatingRef.current) return;
|
||||
if (!codexConfig) return;
|
||||
|
||||
const extracted = extractCodexBaseUrl(codexConfig) || "";
|
||||
setCodexBaseUrl((prev) => (prev === extracted ? prev : extracted));
|
||||
}, [appType, category, codexConfig]);
|
||||
|
||||
// 从Claude配置同步到 state（Gemini）
|
||||
useEffect(() => {
|
||||
if (appType !== "gemini") return;
|
||||
// 只有 official 类别不显示 Base URL 输入框，其他类别都需要回填
|
||||
if (category === "official") return;
|
||||
if (isUpdatingRef.current) return;
|
||||
|
||||
try {
|
||||
const config = JSON.parse(settingsConfig || "{}");
|
||||
const envUrl: unknown = config?.env?.GOOGLE_GEMINI_BASE_URL;
|
||||
const nextUrl = typeof envUrl === "string" ? envUrl.trim() : "";
|
||||
if (nextUrl !== geminiBaseUrl) {
|
||||
setGeminiBaseUrl(nextUrl);
|
||||
setBaseUrl(nextUrl); // 也更新 baseUrl 用于 UI
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, [appType, category, settingsConfig, geminiBaseUrl]);
|
||||
|
||||
// 处理 Claude Base URL 变化
|
||||
const handleClaudeBaseUrlChange = useCallback(
|
||||
(url: string) => {
|
||||
const sanitized = url.trim();
|
||||
setBaseUrl(sanitized);
|
||||
isUpdatingRef.current = true;
|
||||
|
||||
try {
|
||||
const config = JSON.parse(settingsConfig || "{}");
|
||||
if (!config.env) {
|
||||
config.env = {};
|
||||
}
|
||||
config.env.ANTHROPIC_BASE_URL = sanitized;
|
||||
onSettingsConfigChange(JSON.stringify(config, null, 2));
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
isUpdatingRef.current = false;
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
[settingsConfig, onSettingsConfigChange],
|
||||
);
|
||||
|
||||
// 处理 Codex Base URL 变化
|
||||
const handleCodexBaseUrlChange = useCallback(
|
||||
(url: string) => {
|
||||
const sanitized = url.trim();
|
||||
setCodexBaseUrl(sanitized);
|
||||
|
||||
if (!onCodexConfigChange) {
|
||||
return;
|
||||
}
|
||||
|
||||
isUpdatingRef.current = true;
|
||||
const updatedConfig = setCodexBaseUrlInConfig(
|
||||
codexConfig || "",
|
||||
sanitized,
|
||||
);
|
||||
onCodexConfigChange(updatedConfig);
|
||||
|
||||
setTimeout(() => {
|
||||
isUpdatingRef.current = false;
|
||||
}, 0);
|
||||
},
|
||||
[codexConfig, onCodexConfigChange],
|
||||
);
|
||||
|
||||
// 处理 Gemini Base URL 变化
|
||||
const handleGeminiBaseUrlChange = useCallback(
|
||||
(url: string) => {
|
||||
const sanitized = url.trim();
|
||||
setGeminiBaseUrl(sanitized);
|
||||
setBaseUrl(sanitized); // 也更新 baseUrl 用于 UI
|
||||
isUpdatingRef.current = true;
|
||||
|
||||
try {
|
||||
const config = JSON.parse(settingsConfig || "{}");
|
||||
if (!config.env) {
|
||||
config.env = {};
|
||||
}
|
||||
config.env.GOOGLE_GEMINI_BASE_URL = sanitized;
|
||||
onSettingsConfigChange(JSON.stringify(config, null, 2));
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
isUpdatingRef.current = false;
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
[settingsConfig, onSettingsConfigChange],
|
||||
);
|
||||
|
||||
return {
|
||||
baseUrl,
|
||||
setBaseUrl,
|
||||
codexBaseUrl,
|
||||
setCodexBaseUrl,
|
||||
geminiBaseUrl,
|
||||
setGeminiBaseUrl,
|
||||
handleClaudeBaseUrlChange,
|
||||
handleCodexBaseUrlChange,
|
||||
handleGeminiBaseUrlChange,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,549 @@
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { parse as parseToml } from "smol-toml";
|
||||
import { hasTomlCommonConfigSnippet } from "@/utils/providerConfigUtils";
|
||||
import { configApi } from "@/lib/api";
|
||||
import { normalizeTomlText } from "@/utils/textNormalization";
|
||||
|
||||
/**
|
||||
* 合并/剥离通用配置片段（走后端 toml_edit，保注释、保键序）。
|
||||
* 失败时返回原文本 + error，调用方据此决定是否回退 UI 状态。
|
||||
*/
|
||||
const applyTomlSnippet = async (
|
||||
configToml: string,
|
||||
snippetToml: string,
|
||||
enabled: boolean,
|
||||
): Promise<{ updatedConfig: string; error?: string }> => {
|
||||
try {
|
||||
const updatedConfig = await configApi.updateTomlCommonConfigSnippet(
|
||||
configToml,
|
||||
snippetToml,
|
||||
enabled,
|
||||
);
|
||||
return { updatedConfig };
|
||||
} catch (e) {
|
||||
return { updatedConfig: configToml, error: String(e) };
|
||||
}
|
||||
};
|
||||
|
||||
const LEGACY_STORAGE_KEY = "cc-switch:codex-common-config-snippet";
|
||||
const DEFAULT_CODEX_COMMON_CONFIG_SNIPPET = `# Common Codex config
|
||||
# Add your common TOML configuration here`;
|
||||
|
||||
interface UseCodexCommonConfigProps {
|
||||
codexConfig: string;
|
||||
onConfigChange: (config: string) => void;
|
||||
initialData?: {
|
||||
settingsConfig?: Record<string, unknown>;
|
||||
};
|
||||
initialEnabled?: boolean;
|
||||
selectedPresetId?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理 Codex 通用配置片段 (TOML 格式)
|
||||
* 从 config.json 读取和保存，支持从 localStorage 平滑迁移
|
||||
*/
|
||||
export function useCodexCommonConfig({
|
||||
codexConfig,
|
||||
onConfigChange,
|
||||
initialData,
|
||||
initialEnabled,
|
||||
selectedPresetId,
|
||||
}: UseCodexCommonConfigProps) {
|
||||
const { t } = useTranslation();
|
||||
const [useCommonConfig, setUseCommonConfig] = useState(false);
|
||||
const [commonConfigSnippet, setCommonConfigSnippetState] = useState<string>(
|
||||
DEFAULT_CODEX_COMMON_CONFIG_SNIPPET,
|
||||
);
|
||||
const [commonConfigError, setCommonConfigError] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isExtracting, setIsExtracting] = useState(false);
|
||||
|
||||
// 用于跟踪是否正在通过通用配置更新
|
||||
const isUpdatingFromCommonConfig = useRef(false);
|
||||
// 用于跟踪新建模式是否已初始化默认勾选
|
||||
const hasInitializedNewMode = useRef(false);
|
||||
// 用于跟踪编辑模式是否已初始化显式开关/预览
|
||||
const hasInitializedEditMode = useRef(false);
|
||||
// 后端 TOML 合并是异步的：连续操作（快速点开关、连点保存）可能乱序
|
||||
// 返回。每个写 config 的异步操作在发起时领取递增序号，结果落地前
|
||||
// 校验自己仍是最新一次；过期结果直接丢弃，保证最后一次操作胜出。
|
||||
const tomlOpSeqRef = useRef(0);
|
||||
// 镜像最新的 codexConfig：用户在编辑器手动改动走父组件 onChange，
|
||||
// 不经过本 hook（序号不变）。异步结果落地前还要校验发起时的 config
|
||||
// 基线未被外部改写，否则会覆盖用户在请求在飞期间的手动编辑。
|
||||
const latestCodexConfigRef = useRef(codexConfig);
|
||||
useEffect(() => {
|
||||
latestCodexConfigRef.current = codexConfig;
|
||||
}, [codexConfig]);
|
||||
|
||||
// 结果落地前的过期判定：hook 内有更新的操作（序号变了），或发起时的
|
||||
// config 基线已被外部改写（用户手动编辑为准）。任一成立即丢弃结果。
|
||||
const isTomlOpStale = useCallback(
|
||||
(seq: number, baseConfig: string) =>
|
||||
seq !== tomlOpSeqRef.current ||
|
||||
baseConfig !== latestCodexConfigRef.current,
|
||||
[],
|
||||
);
|
||||
|
||||
// 当预设变化时，重置初始化标记，使新预设能够重新触发初始化逻辑
|
||||
useEffect(() => {
|
||||
hasInitializedNewMode.current = false;
|
||||
hasInitializedEditMode.current = false;
|
||||
}, [selectedPresetId, initialEnabled]);
|
||||
|
||||
const parseCommonConfigSnippet = useCallback((snippetString: string) => {
|
||||
const trimmed = snippetString.trim();
|
||||
if (!trimmed) {
|
||||
return {
|
||||
hasContent: false,
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = parseToml(normalizeTomlText(snippetString)) as Record<
|
||||
string,
|
||||
unknown
|
||||
>;
|
||||
return {
|
||||
hasContent: Object.keys(parsed).length > 0,
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
hasContent: false,
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 初始化：从 config.json 加载，支持从 localStorage 迁移
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
|
||||
const loadSnippet = async () => {
|
||||
try {
|
||||
// 使用统一 API 加载
|
||||
const snippet = await configApi.getCommonConfigSnippet("codex");
|
||||
|
||||
if (snippet && snippet.trim()) {
|
||||
if (mounted) {
|
||||
setCommonConfigSnippetState(snippet);
|
||||
}
|
||||
} else {
|
||||
// 如果 config.json 中没有，尝试从 localStorage 迁移
|
||||
if (typeof window !== "undefined") {
|
||||
try {
|
||||
const legacySnippet =
|
||||
window.localStorage.getItem(LEGACY_STORAGE_KEY);
|
||||
if (legacySnippet && legacySnippet.trim()) {
|
||||
// 迁移到 config.json
|
||||
await configApi.setCommonConfigSnippet("codex", legacySnippet);
|
||||
if (mounted) {
|
||||
setCommonConfigSnippetState(legacySnippet);
|
||||
}
|
||||
// 清理 localStorage
|
||||
window.localStorage.removeItem(LEGACY_STORAGE_KEY);
|
||||
console.log(
|
||||
"[迁移] Codex 通用配置已从 localStorage 迁移到 config.json",
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("[迁移] 从 localStorage 迁移失败:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载 Codex 通用配置失败:", error);
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadSnippet();
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 初始化时检查通用配置片段（编辑模式）
|
||||
useEffect(() => {
|
||||
if (
|
||||
!initialData?.settingsConfig ||
|
||||
isLoading ||
|
||||
hasInitializedEditMode.current
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
hasInitializedEditMode.current = true;
|
||||
|
||||
const parsedSnippet = parseCommonConfigSnippet(commonConfigSnippet);
|
||||
if (parsedSnippet.error) {
|
||||
if (commonConfigSnippet.trim()) {
|
||||
setCommonConfigError(parsedSnippet.error);
|
||||
}
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const config =
|
||||
typeof initialData.settingsConfig.config === "string"
|
||||
? initialData.settingsConfig.config
|
||||
: "";
|
||||
const inferredHasCommon = hasTomlCommonConfigSnippet(
|
||||
config,
|
||||
commonConfigSnippet,
|
||||
);
|
||||
|
||||
// 优先级：显式设置的 initialEnabled > 从配置推断的值
|
||||
// 如果 initialEnabled 为 undefined，使用推断值
|
||||
const hasCommon =
|
||||
initialEnabled !== undefined ? initialEnabled : inferredHasCommon;
|
||||
|
||||
// 如果应该启用通用配置但配置中还没有，则自动添加
|
||||
if (hasCommon && !inferredHasCommon && parsedSnippet.hasContent) {
|
||||
let cancelled = false;
|
||||
const seq = ++tomlOpSeqRef.current;
|
||||
(async () => {
|
||||
const { updatedConfig, error } = await applyTomlSnippet(
|
||||
codexConfig,
|
||||
commonConfigSnippet,
|
||||
true,
|
||||
);
|
||||
if (cancelled || isTomlOpStale(seq, codexConfig)) {
|
||||
return;
|
||||
}
|
||||
if (error) {
|
||||
setCommonConfigError(error);
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setCommonConfigError("");
|
||||
setUseCommonConfig(true);
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onConfigChange(updatedConfig);
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}
|
||||
|
||||
setCommonConfigError("");
|
||||
setUseCommonConfig(hasCommon);
|
||||
}, [
|
||||
codexConfig,
|
||||
commonConfigSnippet,
|
||||
initialData,
|
||||
initialEnabled,
|
||||
isLoading,
|
||||
isTomlOpStale,
|
||||
onConfigChange,
|
||||
parseCommonConfigSnippet,
|
||||
]);
|
||||
|
||||
// 新建模式：如果通用配置片段存在且有效，默认启用
|
||||
useEffect(() => {
|
||||
if (initialData || isLoading || hasInitializedNewMode.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
hasInitializedNewMode.current = true;
|
||||
|
||||
const parsedSnippet = parseCommonConfigSnippet(commonConfigSnippet);
|
||||
if (parsedSnippet.error) {
|
||||
if (commonConfigSnippet.trim()) {
|
||||
setCommonConfigError(parsedSnippet.error);
|
||||
}
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
if (!parsedSnippet.hasContent) {
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
const seq = ++tomlOpSeqRef.current;
|
||||
(async () => {
|
||||
const { updatedConfig, error } = await applyTomlSnippet(
|
||||
codexConfig,
|
||||
commonConfigSnippet,
|
||||
true,
|
||||
);
|
||||
if (cancelled || isTomlOpStale(seq, codexConfig)) {
|
||||
return;
|
||||
}
|
||||
if (error) {
|
||||
setCommonConfigError(error);
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setCommonConfigError("");
|
||||
setUseCommonConfig(true);
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onConfigChange(updatedConfig);
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [
|
||||
initialData,
|
||||
commonConfigSnippet,
|
||||
isLoading,
|
||||
isTomlOpStale,
|
||||
codexConfig,
|
||||
onConfigChange,
|
||||
parseCommonConfigSnippet,
|
||||
]);
|
||||
|
||||
// 处理通用配置开关
|
||||
const handleCommonConfigToggle = useCallback(
|
||||
async (checked: boolean) => {
|
||||
// 在同步校验之前领号：即使本次走同步早退分支，也要让更早发出、
|
||||
// 仍在飞的异步结果作废，避免它晚到后把开关翻回去。
|
||||
const seq = ++tomlOpSeqRef.current;
|
||||
const parsedSnippet = parseCommonConfigSnippet(commonConfigSnippet);
|
||||
if (parsedSnippet.error) {
|
||||
setCommonConfigError(parsedSnippet.error);
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
if (!parsedSnippet.hasContent) {
|
||||
setCommonConfigError(
|
||||
t("codexConfig.noCommonConfigToApply", {
|
||||
defaultValue: "通用配置片段为空或没有可写入的内容",
|
||||
}),
|
||||
);
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const { updatedConfig, error: snippetError } = await applyTomlSnippet(
|
||||
codexConfig,
|
||||
commonConfigSnippet,
|
||||
checked,
|
||||
);
|
||||
if (isTomlOpStale(seq, codexConfig)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (snippetError) {
|
||||
setCommonConfigError(snippetError);
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setCommonConfigError("");
|
||||
setUseCommonConfig(checked);
|
||||
// 标记正在通过通用配置更新
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onConfigChange(updatedConfig);
|
||||
// 在下一个事件循环中重置标记
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
},
|
||||
[
|
||||
codexConfig,
|
||||
commonConfigSnippet,
|
||||
isTomlOpStale,
|
||||
onConfigChange,
|
||||
parseCommonConfigSnippet,
|
||||
t,
|
||||
],
|
||||
);
|
||||
|
||||
// 处理通用配置片段变化
|
||||
const handleCommonConfigSnippetChange = useCallback(
|
||||
async (value: string): Promise<boolean> => {
|
||||
// 与 handleCommonConfigToggle 同一套序号：连续保存或保存与开关
|
||||
// 交错时，只允许最后一次操作的结果落地。
|
||||
const seq = ++tomlOpSeqRef.current;
|
||||
const previousSnippet = commonConfigSnippet;
|
||||
|
||||
if (!value.trim()) {
|
||||
setCommonConfigError("");
|
||||
|
||||
if (useCommonConfig) {
|
||||
const previousParsed = parseCommonConfigSnippet(previousSnippet);
|
||||
let updatedConfig = codexConfig;
|
||||
|
||||
if (!previousParsed.error && previousParsed.hasContent) {
|
||||
const removeResult = await applyTomlSnippet(
|
||||
codexConfig,
|
||||
previousSnippet,
|
||||
false,
|
||||
);
|
||||
if (isTomlOpStale(seq, codexConfig)) {
|
||||
return false;
|
||||
}
|
||||
if (removeResult.error) {
|
||||
setCommonConfigError(removeResult.error);
|
||||
return false;
|
||||
}
|
||||
updatedConfig = removeResult.updatedConfig;
|
||||
}
|
||||
|
||||
onConfigChange(updatedConfig);
|
||||
setUseCommonConfig(false);
|
||||
}
|
||||
|
||||
setCommonConfigSnippetState("");
|
||||
configApi
|
||||
.setCommonConfigSnippet("codex", "")
|
||||
.catch((error: unknown) => {
|
||||
console.error("保存 Codex 通用配置失败:", error);
|
||||
setCommonConfigError(
|
||||
t("codexConfig.saveFailed", { error: String(error) }),
|
||||
);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
const parsedNextSnippet = parseCommonConfigSnippet(value);
|
||||
if (parsedNextSnippet.error) {
|
||||
setCommonConfigError(parsedNextSnippet.error);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 若当前启用通用配置，需要替换为最新片段
|
||||
if (useCommonConfig) {
|
||||
let nextConfig = codexConfig;
|
||||
const previousParsed = parseCommonConfigSnippet(previousSnippet);
|
||||
|
||||
if (!previousParsed.error && previousParsed.hasContent) {
|
||||
const removeResult = await applyTomlSnippet(
|
||||
codexConfig,
|
||||
previousSnippet,
|
||||
false,
|
||||
);
|
||||
if (isTomlOpStale(seq, codexConfig)) {
|
||||
return false;
|
||||
}
|
||||
if (removeResult.error) {
|
||||
setCommonConfigError(removeResult.error);
|
||||
return false;
|
||||
}
|
||||
nextConfig = removeResult.updatedConfig;
|
||||
}
|
||||
|
||||
const addResult = await applyTomlSnippet(nextConfig, value, true);
|
||||
// nextConfig 派生自发起时的 codexConfig，基线校验仍对 codexConfig 做
|
||||
if (isTomlOpStale(seq, codexConfig)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (addResult.error) {
|
||||
setCommonConfigError(addResult.error);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 标记正在通过通用配置更新，避免触发状态检查
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onConfigChange(addResult.updatedConfig);
|
||||
// 在下一个事件循环中重置标记
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
setCommonConfigError("");
|
||||
setCommonConfigSnippetState(value);
|
||||
configApi
|
||||
.setCommonConfigSnippet("codex", value)
|
||||
.catch((error: unknown) => {
|
||||
console.error("保存 Codex 通用配置失败:", error);
|
||||
setCommonConfigError(
|
||||
t("codexConfig.saveFailed", { error: String(error) }),
|
||||
);
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
[
|
||||
commonConfigSnippet,
|
||||
codexConfig,
|
||||
isTomlOpStale,
|
||||
onConfigChange,
|
||||
parseCommonConfigSnippet,
|
||||
t,
|
||||
useCommonConfig,
|
||||
],
|
||||
);
|
||||
|
||||
// 当配置变化时检查是否包含通用配置（但避免在通过通用配置更新时检查）
|
||||
useEffect(() => {
|
||||
if (isUpdatingFromCommonConfig.current || isLoading) {
|
||||
return;
|
||||
}
|
||||
const parsedSnippet = parseCommonConfigSnippet(commonConfigSnippet);
|
||||
if (parsedSnippet.error) {
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
const hasCommon = hasTomlCommonConfigSnippet(
|
||||
codexConfig,
|
||||
commonConfigSnippet,
|
||||
);
|
||||
setUseCommonConfig(hasCommon);
|
||||
}, [codexConfig, commonConfigSnippet, isLoading, parseCommonConfigSnippet]);
|
||||
|
||||
// 从编辑器当前内容提取通用配置片段
|
||||
const handleExtract = useCallback(async () => {
|
||||
setIsExtracting(true);
|
||||
setCommonConfigError("");
|
||||
|
||||
try {
|
||||
const extracted = await configApi.extractCommonConfigSnippet("codex", {
|
||||
settingsConfig: JSON.stringify({
|
||||
config: codexConfig ?? "",
|
||||
}),
|
||||
});
|
||||
|
||||
if (!extracted || !extracted.trim()) {
|
||||
setCommonConfigError(t("codexConfig.extractNoCommonConfig"));
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新片段状态
|
||||
setCommonConfigSnippetState(extracted);
|
||||
|
||||
// 保存到后端
|
||||
await configApi.setCommonConfigSnippet("codex", extracted);
|
||||
} catch (error) {
|
||||
console.error("提取 Codex 通用配置失败:", error);
|
||||
setCommonConfigError(
|
||||
t("codexConfig.extractFailed", { error: String(error) }),
|
||||
);
|
||||
} finally {
|
||||
setIsExtracting(false);
|
||||
}
|
||||
}, [codexConfig, t]);
|
||||
|
||||
const clearCommonConfigError = useCallback(() => {
|
||||
setCommonConfigError("");
|
||||
}, []);
|
||||
|
||||
return {
|
||||
useCommonConfig,
|
||||
commonConfigSnippet,
|
||||
commonConfigError,
|
||||
isLoading,
|
||||
isExtracting,
|
||||
handleCommonConfigToggle,
|
||||
handleCommonConfigSnippetChange,
|
||||
handleExtract,
|
||||
clearCommonConfigError,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
import { useState, useCallback, useEffect, useRef } from "react";
|
||||
import {
|
||||
extractCodexBaseUrl,
|
||||
extractCodexExperimentalBearerToken,
|
||||
setCodexBaseUrl as setCodexBaseUrlInConfig,
|
||||
updateCodexExperimentalBearerToken,
|
||||
} from "@/utils/providerConfigUtils";
|
||||
import { normalizeTomlText } from "@/utils/textNormalization";
|
||||
import type { CodexCatalogModel } from "@/types";
|
||||
|
||||
interface UseCodexConfigStateProps {
|
||||
initialData?: {
|
||||
settingsConfig?: Record<string, unknown>;
|
||||
};
|
||||
}
|
||||
|
||||
// auth.json 缺 OPENAI_API_KEY 时回退到 config.toml 的 experimental_bearer_token
|
||||
// (Mobile 兼容形态：保留 ChatGPT 登录态但用第三方 token)
|
||||
function pickCodexApiKey(
|
||||
authObj: { OPENAI_API_KEY?: unknown } | null | undefined,
|
||||
configText: string,
|
||||
): string {
|
||||
if (authObj && typeof authObj.OPENAI_API_KEY === "string") {
|
||||
const key = authObj.OPENAI_API_KEY;
|
||||
if (key) return key;
|
||||
}
|
||||
return extractCodexExperimentalBearerToken(configText) || "";
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理 Codex 配置状态
|
||||
* Codex 配置包含两部分：auth.json (JSON) 和 config.toml (TOML 字符串)
|
||||
*/
|
||||
export function useCodexConfigState({ initialData }: UseCodexConfigStateProps) {
|
||||
const [codexAuth, setCodexAuthState] = useState("");
|
||||
const [codexConfig, setCodexConfigState] = useState("");
|
||||
const [codexApiKey, setCodexApiKey] = useState("");
|
||||
const [codexBaseUrl, setCodexBaseUrl] = useState("");
|
||||
const [codexCatalogModels, setCodexCatalogModels] = useState<
|
||||
CodexCatalogModel[]
|
||||
>([]);
|
||||
const [codexAuthError, setCodexAuthError] = useState("");
|
||||
|
||||
const isUpdatingCodexBaseUrlRef = useRef(false);
|
||||
|
||||
// 初始化 Codex 配置（编辑模式）
|
||||
useEffect(() => {
|
||||
if (!initialData) return;
|
||||
|
||||
const config = initialData.settingsConfig;
|
||||
if (typeof config === "object" && config !== null) {
|
||||
// 设置 auth.json
|
||||
const auth = (config as any).auth || {};
|
||||
setCodexAuthState(JSON.stringify(auth, null, 2));
|
||||
|
||||
// 设置 config.toml
|
||||
const configStr =
|
||||
typeof (config as any).config === "string"
|
||||
? (config as any).config
|
||||
: "";
|
||||
setCodexConfigState(configStr);
|
||||
|
||||
const modelCatalog = (config as any).modelCatalog;
|
||||
const rawCatalogModels = Array.isArray(modelCatalog?.models)
|
||||
? modelCatalog.models
|
||||
: [];
|
||||
setCodexCatalogModels(
|
||||
rawCatalogModels
|
||||
.map((item: any) => {
|
||||
// 隐藏字段（原生 Responses profile 用）不在行 UI 暴露，但必须 load→save
|
||||
// 原样保留，否则编辑保存 MiMo/MiniMax 等会丢官方 base_instructions、
|
||||
// 并行工具、图像模态。DB SSOT 为 camelCase、live 反解兜底可能为 snake_case，
|
||||
// 双格式兼容（与 displayName/contextWindow 一致）。
|
||||
const supportsParallelToolCalls =
|
||||
typeof item?.supportsParallelToolCalls === "boolean"
|
||||
? item.supportsParallelToolCalls
|
||||
: typeof item?.supports_parallel_tool_calls === "boolean"
|
||||
? item.supports_parallel_tool_calls
|
||||
: undefined;
|
||||
const inputModalities = Array.isArray(item?.inputModalities)
|
||||
? item.inputModalities
|
||||
: Array.isArray(item?.input_modalities)
|
||||
? item.input_modalities
|
||||
: undefined;
|
||||
const baseInstructions =
|
||||
typeof item?.baseInstructions === "string"
|
||||
? item.baseInstructions
|
||||
: typeof item?.base_instructions === "string"
|
||||
? item.base_instructions
|
||||
: undefined;
|
||||
return {
|
||||
model: typeof item?.model === "string" ? item.model : "",
|
||||
displayName:
|
||||
typeof item?.displayName === "string"
|
||||
? item.displayName
|
||||
: typeof item?.display_name === "string"
|
||||
? item.display_name
|
||||
: "",
|
||||
contextWindow:
|
||||
typeof item?.contextWindow === "string" ||
|
||||
typeof item?.contextWindow === "number"
|
||||
? item.contextWindow
|
||||
: typeof item?.context_window === "string" ||
|
||||
typeof item?.context_window === "number"
|
||||
? item.context_window
|
||||
: "",
|
||||
...(supportsParallelToolCalls !== undefined
|
||||
? { supportsParallelToolCalls }
|
||||
: {}),
|
||||
...(inputModalities ? { inputModalities } : {}),
|
||||
...(baseInstructions ? { baseInstructions } : {}),
|
||||
};
|
||||
})
|
||||
.filter((item: CodexCatalogModel) => item.model.trim()),
|
||||
);
|
||||
|
||||
// 提取 Base URL
|
||||
const initialBaseUrl = extractCodexBaseUrl(configStr);
|
||||
if (initialBaseUrl) {
|
||||
setCodexBaseUrl(initialBaseUrl);
|
||||
}
|
||||
|
||||
setCodexApiKey(pickCodexApiKey(auth, configStr));
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
// 与 TOML 配置保持基础 URL 同步
|
||||
useEffect(() => {
|
||||
if (isUpdatingCodexBaseUrlRef.current) {
|
||||
return;
|
||||
}
|
||||
const extracted = extractCodexBaseUrl(codexConfig) || "";
|
||||
setCodexBaseUrl((prev) => (prev === extracted ? prev : extracted));
|
||||
}, [codexConfig]);
|
||||
|
||||
// 获取 API Key（从 auth JSON）
|
||||
const getCodexAuthApiKey = useCallback((authString: string): string => {
|
||||
try {
|
||||
const auth = JSON.parse(authString || "{}");
|
||||
return typeof auth.OPENAI_API_KEY === "string" ? auth.OPENAI_API_KEY : "";
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 从 codexAuth 中提取并同步 API Key
|
||||
useEffect(() => {
|
||||
let parsed: { OPENAI_API_KEY?: unknown } | null = null;
|
||||
try {
|
||||
parsed = JSON.parse(codexAuth || "{}");
|
||||
} catch {
|
||||
parsed = null;
|
||||
}
|
||||
const extractedKey = pickCodexApiKey(parsed, codexConfig);
|
||||
setCodexApiKey((prev) => (prev === extractedKey ? prev : extractedKey));
|
||||
}, [codexAuth, codexConfig]);
|
||||
|
||||
// 验证 Codex Auth JSON
|
||||
const validateCodexAuth = useCallback((value: string): string => {
|
||||
if (!value.trim()) return "";
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
|
||||
return "Auth JSON must be an object";
|
||||
}
|
||||
return "";
|
||||
} catch {
|
||||
return "Invalid JSON format";
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 设置 auth 并验证
|
||||
const setCodexAuth = useCallback(
|
||||
(value: string) => {
|
||||
setCodexAuthState(value);
|
||||
setCodexAuthError(validateCodexAuth(value));
|
||||
},
|
||||
[validateCodexAuth],
|
||||
);
|
||||
|
||||
// 设置 config (支持函数更新)
|
||||
const setCodexConfig = useCallback(
|
||||
(value: string | ((prev: string) => string)) => {
|
||||
setCodexConfigState((prev) =>
|
||||
typeof value === "function"
|
||||
? (value as (input: string) => string)(prev)
|
||||
: value,
|
||||
);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// 处理 Codex API Key 输入并写回 auth.json
|
||||
// 同步: 若 config.toml 当前含 experimental_bearer_token (Mobile 兼容形态),
|
||||
// 也一并更新/清除——否则用户清空输入框会被 pickCodexApiKey 的 fallback 又填回去
|
||||
const handleCodexApiKeyChange = useCallback(
|
||||
(key: string) => {
|
||||
const trimmed = key.trim();
|
||||
setCodexApiKey(trimmed);
|
||||
try {
|
||||
const auth = JSON.parse(codexAuth || "{}");
|
||||
auth.OPENAI_API_KEY = trimmed;
|
||||
setCodexAuth(JSON.stringify(auth, null, 2));
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
setCodexConfig((prev) =>
|
||||
updateCodexExperimentalBearerToken(prev, trimmed),
|
||||
);
|
||||
},
|
||||
[codexAuth, setCodexAuth, setCodexConfig],
|
||||
);
|
||||
|
||||
// 处理 Codex Base URL 变化
|
||||
const handleCodexBaseUrlChange = useCallback(
|
||||
(url: string) => {
|
||||
const sanitized = url.trim();
|
||||
setCodexBaseUrl(sanitized);
|
||||
|
||||
isUpdatingCodexBaseUrlRef.current = true;
|
||||
setCodexConfig((prev) => setCodexBaseUrlInConfig(prev, sanitized));
|
||||
setTimeout(() => {
|
||||
isUpdatingCodexBaseUrlRef.current = false;
|
||||
}, 0);
|
||||
},
|
||||
[setCodexConfig],
|
||||
);
|
||||
|
||||
// 处理 config 变化（同步 Base URL）
|
||||
const handleCodexConfigChange = useCallback(
|
||||
(value: string) => {
|
||||
// 归一化中文/全角/弯引号，避免 TOML 解析报错
|
||||
const normalized = normalizeTomlText(value);
|
||||
setCodexConfig(normalized);
|
||||
|
||||
if (!isUpdatingCodexBaseUrlRef.current) {
|
||||
const extracted = extractCodexBaseUrl(normalized) || "";
|
||||
if (extracted !== codexBaseUrl) {
|
||||
setCodexBaseUrl(extracted);
|
||||
}
|
||||
}
|
||||
},
|
||||
[setCodexConfig, codexBaseUrl],
|
||||
);
|
||||
|
||||
// 重置配置（用于预设切换）
|
||||
const resetCodexConfig = useCallback(
|
||||
(
|
||||
auth: Record<string, unknown>,
|
||||
config: string,
|
||||
modelCatalogModels: CodexCatalogModel[] = [],
|
||||
) => {
|
||||
const authString = JSON.stringify(auth, null, 2);
|
||||
setCodexAuth(authString);
|
||||
setCodexConfig(config);
|
||||
setCodexCatalogModels(modelCatalogModels);
|
||||
|
||||
const baseUrl = extractCodexBaseUrl(config);
|
||||
setCodexBaseUrl(baseUrl || "");
|
||||
|
||||
setCodexApiKey(pickCodexApiKey(auth, config));
|
||||
},
|
||||
[setCodexAuth, setCodexConfig, setCodexCatalogModels],
|
||||
);
|
||||
|
||||
return {
|
||||
codexAuth,
|
||||
codexConfig,
|
||||
codexApiKey,
|
||||
codexBaseUrl,
|
||||
codexCatalogModels,
|
||||
codexAuthError,
|
||||
setCodexAuth,
|
||||
setCodexConfig,
|
||||
setCodexCatalogModels,
|
||||
handleCodexApiKeyChange,
|
||||
handleCodexBaseUrlChange,
|
||||
handleCodexConfigChange,
|
||||
resetCodexConfig,
|
||||
getCodexAuthApiKey,
|
||||
validateCodexAuth,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { useManagedAuth } from "./useManagedAuth";
|
||||
|
||||
/**
|
||||
* Codex OAuth (ChatGPT Plus/Pro) 认证 hook
|
||||
*
|
||||
* 复用通用 useManagedAuth，仅指定 provider 为 "codex_oauth"
|
||||
*/
|
||||
export function useCodexOauth() {
|
||||
return useManagedAuth("codex_oauth");
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { useState, useCallback, useEffect, useRef } from "react";
|
||||
import TOML from "smol-toml";
|
||||
|
||||
/**
|
||||
* Codex config.toml 格式校验 Hook
|
||||
* 使用 smol-toml 进行实时 TOML 语法校验（带 debounce）
|
||||
*/
|
||||
export function useCodexTomlValidation() {
|
||||
const [configError, setConfigError] = useState("");
|
||||
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
/**
|
||||
* 校验 TOML 格式
|
||||
* @param tomlText - 待校验的 TOML 文本
|
||||
* @returns 是否校验通过
|
||||
*/
|
||||
const validateToml = useCallback((tomlText: string): boolean => {
|
||||
// 空字符串视为合法（允许为空）
|
||||
if (!tomlText.trim()) {
|
||||
setConfigError("");
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
TOML.parse(tomlText);
|
||||
setConfigError("");
|
||||
return true;
|
||||
} catch (error) {
|
||||
const errorMessage =
|
||||
error instanceof Error ? error.message : "TOML 格式错误";
|
||||
setConfigError(errorMessage);
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 带 debounce 的校验函数（500ms 延迟）
|
||||
* @param tomlText - 待校验的 TOML 文本
|
||||
*/
|
||||
const debouncedValidate = useCallback(
|
||||
(tomlText: string) => {
|
||||
// 清除之前的定时器
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
}
|
||||
|
||||
// 设置新的定时器
|
||||
debounceTimerRef.current = setTimeout(() => {
|
||||
validateToml(tomlText);
|
||||
}, 500);
|
||||
},
|
||||
[validateToml],
|
||||
);
|
||||
|
||||
/**
|
||||
* 清空错误信息
|
||||
*/
|
||||
const clearError = useCallback(() => {
|
||||
setConfigError("");
|
||||
}, []);
|
||||
|
||||
// 清理定时器
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
configError,
|
||||
validateToml,
|
||||
debouncedValidate,
|
||||
clearError,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,371 @@
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
updateCommonConfigSnippet,
|
||||
hasCommonConfigSnippet,
|
||||
validateJsonConfig,
|
||||
} from "@/utils/providerConfigUtils";
|
||||
import { configApi } from "@/lib/api";
|
||||
|
||||
const LEGACY_STORAGE_KEY = "cc-switch:common-config-snippet";
|
||||
const DEFAULT_COMMON_CONFIG_SNIPPET = `{
|
||||
"includeCoAuthoredBy": false
|
||||
}`;
|
||||
|
||||
interface UseCommonConfigSnippetProps {
|
||||
settingsConfig: string;
|
||||
onConfigChange: (config: string) => void;
|
||||
initialData?: {
|
||||
settingsConfig?: Record<string, unknown>;
|
||||
};
|
||||
initialEnabled?: boolean;
|
||||
selectedPresetId?: string;
|
||||
/** When false, the hook skips all logic and returns disabled state. Default: true */
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理 Claude 通用配置片段
|
||||
* 从 config.json 读取和保存，支持从 localStorage 平滑迁移
|
||||
*/
|
||||
export function useCommonConfigSnippet({
|
||||
settingsConfig,
|
||||
onConfigChange,
|
||||
initialData,
|
||||
initialEnabled,
|
||||
selectedPresetId,
|
||||
enabled = true,
|
||||
}: UseCommonConfigSnippetProps) {
|
||||
const { t } = useTranslation();
|
||||
const [useCommonConfig, setUseCommonConfig] = useState(false);
|
||||
const [commonConfigSnippet, setCommonConfigSnippetState] = useState<string>(
|
||||
DEFAULT_COMMON_CONFIG_SNIPPET,
|
||||
);
|
||||
const [commonConfigError, setCommonConfigError] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isExtracting, setIsExtracting] = useState(false);
|
||||
|
||||
// 用于跟踪是否正在通过通用配置更新
|
||||
const isUpdatingFromCommonConfig = useRef(false);
|
||||
// 用于跟踪新建模式是否已初始化默认勾选
|
||||
const hasInitializedNewMode = useRef(false);
|
||||
// 用于跟踪编辑模式是否已初始化显式开关/预览
|
||||
const hasInitializedEditMode = useRef(false);
|
||||
|
||||
// 当预设变化时，重置初始化标记，使新预设能够重新触发初始化逻辑
|
||||
useEffect(() => {
|
||||
if (!enabled) return;
|
||||
hasInitializedNewMode.current = false;
|
||||
hasInitializedEditMode.current = false;
|
||||
}, [selectedPresetId, enabled, initialEnabled]);
|
||||
|
||||
// 初始化：从 config.json 加载，支持从 localStorage 迁移
|
||||
useEffect(() => {
|
||||
if (!enabled) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
let mounted = true;
|
||||
|
||||
const loadSnippet = async () => {
|
||||
try {
|
||||
// 使用统一 API 加载
|
||||
const snippet = await configApi.getCommonConfigSnippet("claude");
|
||||
|
||||
if (snippet && snippet.trim()) {
|
||||
if (mounted) {
|
||||
setCommonConfigSnippetState(snippet);
|
||||
}
|
||||
} else {
|
||||
// 如果 config.json 中没有，尝试从 localStorage 迁移
|
||||
if (typeof window !== "undefined") {
|
||||
try {
|
||||
const legacySnippet =
|
||||
window.localStorage.getItem(LEGACY_STORAGE_KEY);
|
||||
if (legacySnippet && legacySnippet.trim()) {
|
||||
// 迁移到 config.json
|
||||
await configApi.setCommonConfigSnippet("claude", legacySnippet);
|
||||
if (mounted) {
|
||||
setCommonConfigSnippetState(legacySnippet);
|
||||
}
|
||||
// 清理 localStorage
|
||||
window.localStorage.removeItem(LEGACY_STORAGE_KEY);
|
||||
console.log(
|
||||
"[迁移] Claude 通用配置已从 localStorage 迁移到 config.json",
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("[迁移] 从 localStorage 迁移失败:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载通用配置失败:", error);
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadSnippet();
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [enabled]);
|
||||
|
||||
// 初始化时检查通用配置片段（编辑模式）
|
||||
useEffect(() => {
|
||||
if (!enabled) return;
|
||||
if (initialData && !isLoading && !hasInitializedEditMode.current) {
|
||||
hasInitializedEditMode.current = true;
|
||||
|
||||
const configString = JSON.stringify(initialData.settingsConfig, null, 2);
|
||||
const inferredHasCommon = hasCommonConfigSnippet(
|
||||
configString,
|
||||
commonConfigSnippet,
|
||||
);
|
||||
|
||||
// 优先级：显式设置的 initialEnabled > 从配置推断的值
|
||||
// 如果 initialEnabled 为 undefined，使用推断值
|
||||
const hasCommon =
|
||||
initialEnabled !== undefined ? initialEnabled : inferredHasCommon;
|
||||
setUseCommonConfig(hasCommon);
|
||||
|
||||
// 如果应该启用通用配置但配置中还没有，则自动添加
|
||||
if (hasCommon && !inferredHasCommon) {
|
||||
const { updatedConfig, error } = updateCommonConfigSnippet(
|
||||
settingsConfig,
|
||||
commonConfigSnippet,
|
||||
true,
|
||||
);
|
||||
if (!error) {
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onConfigChange(updatedConfig);
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [
|
||||
enabled,
|
||||
initialData,
|
||||
initialEnabled,
|
||||
commonConfigSnippet,
|
||||
isLoading,
|
||||
onConfigChange,
|
||||
settingsConfig,
|
||||
]);
|
||||
|
||||
// 新建模式：如果通用配置片段存在且有效，默认启用
|
||||
useEffect(() => {
|
||||
if (!enabled) return;
|
||||
// 仅新建模式、加载完成、尚未初始化过
|
||||
if (!initialData && !isLoading && !hasInitializedNewMode.current) {
|
||||
hasInitializedNewMode.current = true;
|
||||
|
||||
// 检查片段是否有实质内容
|
||||
try {
|
||||
const snippetObj = JSON.parse(commonConfigSnippet);
|
||||
const hasContent = Object.keys(snippetObj).length > 0;
|
||||
if (hasContent) {
|
||||
setUseCommonConfig(true);
|
||||
// 合并通用配置到当前配置
|
||||
const { updatedConfig, error } = updateCommonConfigSnippet(
|
||||
settingsConfig,
|
||||
commonConfigSnippet,
|
||||
true,
|
||||
);
|
||||
if (!error) {
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onConfigChange(updatedConfig);
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore parse error
|
||||
}
|
||||
}
|
||||
}, [
|
||||
enabled,
|
||||
initialData,
|
||||
commonConfigSnippet,
|
||||
isLoading,
|
||||
settingsConfig,
|
||||
onConfigChange,
|
||||
]);
|
||||
|
||||
// 处理通用配置开关
|
||||
const handleCommonConfigToggle = useCallback(
|
||||
(checked: boolean) => {
|
||||
const { updatedConfig, error: snippetError } = updateCommonConfigSnippet(
|
||||
settingsConfig,
|
||||
commonConfigSnippet,
|
||||
checked,
|
||||
);
|
||||
|
||||
if (snippetError) {
|
||||
setCommonConfigError(snippetError);
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setCommonConfigError("");
|
||||
setUseCommonConfig(checked);
|
||||
// 标记正在通过通用配置更新
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onConfigChange(updatedConfig);
|
||||
// 在下一个事件循环中重置标记
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
},
|
||||
[settingsConfig, commonConfigSnippet, onConfigChange],
|
||||
);
|
||||
|
||||
// 处理通用配置片段变化
|
||||
const handleCommonConfigSnippetChange = useCallback(
|
||||
(value: string) => {
|
||||
const previousSnippet = commonConfigSnippet;
|
||||
setCommonConfigSnippetState(value);
|
||||
|
||||
if (!value.trim()) {
|
||||
setCommonConfigError("");
|
||||
// 保存到 config.json（清空）
|
||||
configApi
|
||||
.setCommonConfigSnippet("claude", "")
|
||||
.catch((error: unknown) => {
|
||||
console.error("保存通用配置失败:", error);
|
||||
setCommonConfigError(
|
||||
t("claudeConfig.saveFailed", { error: String(error) }),
|
||||
);
|
||||
});
|
||||
|
||||
if (useCommonConfig) {
|
||||
const { updatedConfig } = updateCommonConfigSnippet(
|
||||
settingsConfig,
|
||||
previousSnippet,
|
||||
false,
|
||||
);
|
||||
onConfigChange(updatedConfig);
|
||||
setUseCommonConfig(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证JSON格式
|
||||
const validationError = validateJsonConfig(value, "通用配置片段");
|
||||
if (validationError) {
|
||||
setCommonConfigError(validationError);
|
||||
} else {
|
||||
setCommonConfigError("");
|
||||
// 保存到 config.json
|
||||
configApi
|
||||
.setCommonConfigSnippet("claude", value)
|
||||
.catch((error: unknown) => {
|
||||
console.error("保存通用配置失败:", error);
|
||||
setCommonConfigError(
|
||||
t("claudeConfig.saveFailed", { error: String(error) }),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 若当前启用通用配置且格式正确，需要替换为最新片段
|
||||
if (useCommonConfig && !validationError) {
|
||||
const removeResult = updateCommonConfigSnippet(
|
||||
settingsConfig,
|
||||
previousSnippet,
|
||||
false,
|
||||
);
|
||||
if (removeResult.error) {
|
||||
setCommonConfigError(removeResult.error);
|
||||
return;
|
||||
}
|
||||
const addResult = updateCommonConfigSnippet(
|
||||
removeResult.updatedConfig,
|
||||
value,
|
||||
true,
|
||||
);
|
||||
|
||||
if (addResult.error) {
|
||||
setCommonConfigError(addResult.error);
|
||||
return;
|
||||
}
|
||||
|
||||
// 标记正在通过通用配置更新，避免触发状态检查
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onConfigChange(addResult.updatedConfig);
|
||||
// 在下一个事件循环中重置标记
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
[commonConfigSnippet, settingsConfig, useCommonConfig, onConfigChange],
|
||||
);
|
||||
|
||||
// 当配置变化时检查是否包含通用配置（但避免在通过通用配置更新时检查）
|
||||
useEffect(() => {
|
||||
if (!enabled) return;
|
||||
if (isUpdatingFromCommonConfig.current || isLoading) {
|
||||
return;
|
||||
}
|
||||
const hasCommon = hasCommonConfigSnippet(
|
||||
settingsConfig,
|
||||
commonConfigSnippet,
|
||||
);
|
||||
setUseCommonConfig(hasCommon);
|
||||
}, [enabled, settingsConfig, commonConfigSnippet, isLoading]);
|
||||
|
||||
// 从编辑器当前内容提取通用配置片段
|
||||
const handleExtract = useCallback(async () => {
|
||||
setIsExtracting(true);
|
||||
setCommonConfigError("");
|
||||
|
||||
try {
|
||||
const extracted = await configApi.extractCommonConfigSnippet("claude", {
|
||||
settingsConfig,
|
||||
});
|
||||
|
||||
if (!extracted || extracted === "{}") {
|
||||
setCommonConfigError(t("claudeConfig.extractNoCommonConfig"));
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证 JSON 格式
|
||||
const validationError = validateJsonConfig(extracted, "提取的配置");
|
||||
if (validationError) {
|
||||
setCommonConfigError(validationError);
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新片段状态
|
||||
setCommonConfigSnippetState(extracted);
|
||||
|
||||
// 保存到后端
|
||||
await configApi.setCommonConfigSnippet("claude", extracted);
|
||||
} catch (error) {
|
||||
console.error("提取通用配置失败:", error);
|
||||
setCommonConfigError(
|
||||
t("claudeConfig.extractFailed", { error: String(error) }),
|
||||
);
|
||||
} finally {
|
||||
setIsExtracting(false);
|
||||
}
|
||||
}, [settingsConfig, t]);
|
||||
|
||||
return {
|
||||
useCommonConfig,
|
||||
commonConfigSnippet,
|
||||
commonConfigError,
|
||||
isLoading,
|
||||
isExtracting,
|
||||
handleCommonConfigToggle,
|
||||
handleCommonConfigSnippetChange,
|
||||
handleExtract,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import type { GitHubAccount } from "@/lib/api";
|
||||
import { useManagedAuth } from "./useManagedAuth";
|
||||
|
||||
export function useCopilotAuth(githubDomain?: string) {
|
||||
const managedAuth = useManagedAuth("github_copilot", githubDomain);
|
||||
const defaultAccount =
|
||||
managedAuth.accounts.find(
|
||||
(account) => account.id === managedAuth.defaultAccountId,
|
||||
) ?? managedAuth.accounts[0];
|
||||
|
||||
return {
|
||||
...managedAuth,
|
||||
authStatus: managedAuth.authStatus
|
||||
? {
|
||||
authenticated: managedAuth.authStatus.authenticated,
|
||||
username: defaultAccount?.login ?? null,
|
||||
// Managed auth status does not expose a single provider-wide token expiry.
|
||||
expires_at: null,
|
||||
default_account_id: managedAuth.defaultAccountId,
|
||||
migration_error: managedAuth.migrationError,
|
||||
accounts: managedAuth.accounts as GitHubAccount[],
|
||||
}
|
||||
: undefined,
|
||||
// Managed auth status no longer exposes a single default token expiry.
|
||||
username: defaultAccount?.login ?? null,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { useMemo } from "react";
|
||||
import type { AppId } from "@/lib/api";
|
||||
import type { CustomEndpoint } from "@/types";
|
||||
import type { ProviderPreset } from "@/config/claudeProviderPresets";
|
||||
import type { CodexProviderPreset } from "@/config/codexProviderPresets";
|
||||
|
||||
type PresetEntry = {
|
||||
id: string;
|
||||
preset: ProviderPreset | CodexProviderPreset;
|
||||
};
|
||||
|
||||
interface UseCustomEndpointsProps {
|
||||
appId: AppId;
|
||||
selectedPresetId: string | null;
|
||||
presetEntries: PresetEntry[];
|
||||
draftCustomEndpoints: string[];
|
||||
baseUrl: string;
|
||||
codexBaseUrl: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 收集和管理自定义端点
|
||||
*
|
||||
* 收集来源：
|
||||
* 1. 用户在测速弹窗中新增的自定义端点
|
||||
* 2. 预设中的 endpointCandidates
|
||||
* 3. 当前选中的 Base URL
|
||||
*/
|
||||
export function useCustomEndpoints({
|
||||
appId,
|
||||
selectedPresetId,
|
||||
presetEntries,
|
||||
draftCustomEndpoints,
|
||||
baseUrl,
|
||||
codexBaseUrl,
|
||||
}: UseCustomEndpointsProps) {
|
||||
const customEndpointsMap = useMemo(() => {
|
||||
const urlSet = new Set<string>();
|
||||
|
||||
// 辅助函数：标准化并添加 URL
|
||||
const push = (raw?: string) => {
|
||||
const url = (raw || "").trim().replace(/\/+$/, "");
|
||||
if (url) urlSet.add(url);
|
||||
};
|
||||
|
||||
// 1. 自定义端点（来自用户新增）
|
||||
for (const u of draftCustomEndpoints) push(u);
|
||||
|
||||
// 2. 预设端点候选
|
||||
if (selectedPresetId && selectedPresetId !== "custom") {
|
||||
const entry = presetEntries.find((item) => item.id === selectedPresetId);
|
||||
if (entry) {
|
||||
const preset = entry.preset as any;
|
||||
if (Array.isArray(preset?.endpointCandidates)) {
|
||||
for (const u of preset.endpointCandidates as string[]) push(u);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 当前 Base URL
|
||||
if (appId === "codex") {
|
||||
push(codexBaseUrl);
|
||||
} else {
|
||||
push(baseUrl);
|
||||
}
|
||||
|
||||
// 构建 CustomEndpoint map
|
||||
const urls = Array.from(urlSet.values());
|
||||
if (urls.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
const customMap: Record<string, CustomEndpoint> = {};
|
||||
for (const url of urls) {
|
||||
if (!customMap[url]) {
|
||||
customMap[url] = { url, addedAt: now, lastUsed: undefined };
|
||||
}
|
||||
}
|
||||
|
||||
return customMap;
|
||||
}, [
|
||||
appId,
|
||||
selectedPresetId,
|
||||
presetEntries,
|
||||
draftCustomEndpoints,
|
||||
baseUrl,
|
||||
codexBaseUrl,
|
||||
]);
|
||||
|
||||
return customEndpointsMap;
|
||||
}
|
||||
@@ -0,0 +1,543 @@
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { configApi } from "@/lib/api";
|
||||
|
||||
const LEGACY_STORAGE_KEY = "cc-switch:gemini-common-config-snippet";
|
||||
const DEFAULT_GEMINI_COMMON_CONFIG_SNIPPET = "{}";
|
||||
|
||||
const GEMINI_COMMON_ENV_FORBIDDEN_KEYS = [
|
||||
"GOOGLE_GEMINI_BASE_URL",
|
||||
"GEMINI_API_KEY",
|
||||
] as const;
|
||||
type GeminiForbiddenEnvKey = (typeof GEMINI_COMMON_ENV_FORBIDDEN_KEYS)[number];
|
||||
|
||||
interface UseGeminiCommonConfigProps {
|
||||
envValue: string;
|
||||
onEnvChange: (env: string) => void;
|
||||
envStringToObj: (envString: string) => Record<string, string>;
|
||||
envObjToString: (envObj: Record<string, unknown>) => string;
|
||||
initialData?: {
|
||||
settingsConfig?: Record<string, unknown>;
|
||||
};
|
||||
initialEnabled?: boolean;
|
||||
selectedPresetId?: string;
|
||||
}
|
||||
|
||||
function isPlainObject(value: unknown): value is Record<string, unknown> {
|
||||
return (
|
||||
typeof value === "object" &&
|
||||
value !== null &&
|
||||
!Array.isArray(value) &&
|
||||
Object.prototype.toString.call(value) === "[object Object]"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理 Gemini 通用配置片段 (JSON 格式)
|
||||
* 写入 Gemini 的 .env，但会排除以下敏感字段：
|
||||
* - GOOGLE_GEMINI_BASE_URL
|
||||
* - GEMINI_API_KEY
|
||||
*/
|
||||
export function useGeminiCommonConfig({
|
||||
envValue,
|
||||
onEnvChange,
|
||||
envStringToObj,
|
||||
envObjToString,
|
||||
initialData,
|
||||
initialEnabled,
|
||||
selectedPresetId,
|
||||
}: UseGeminiCommonConfigProps) {
|
||||
const { t } = useTranslation();
|
||||
const [useCommonConfig, setUseCommonConfig] = useState(false);
|
||||
const [commonConfigSnippet, setCommonConfigSnippetState] = useState<string>(
|
||||
DEFAULT_GEMINI_COMMON_CONFIG_SNIPPET,
|
||||
);
|
||||
const [commonConfigError, setCommonConfigError] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isExtracting, setIsExtracting] = useState(false);
|
||||
|
||||
// 用于跟踪是否正在通过通用配置更新
|
||||
const isUpdatingFromCommonConfig = useRef(false);
|
||||
// 用于跟踪新建模式是否已初始化默认勾选
|
||||
const hasInitializedNewMode = useRef(false);
|
||||
// 用于跟踪编辑模式是否已初始化显式开关/预览
|
||||
const hasInitializedEditMode = useRef(false);
|
||||
|
||||
// 当预设变化时，重置初始化标记，使新预设能够重新触发初始化逻辑
|
||||
useEffect(() => {
|
||||
hasInitializedNewMode.current = false;
|
||||
hasInitializedEditMode.current = false;
|
||||
}, [selectedPresetId, initialEnabled]);
|
||||
|
||||
const parseSnippetEnv = useCallback(
|
||||
(
|
||||
snippetString: string,
|
||||
): { env: Record<string, string>; error?: string } => {
|
||||
const trimmed = snippetString.trim();
|
||||
if (!trimmed) {
|
||||
return { env: {} };
|
||||
}
|
||||
|
||||
let parsed: unknown;
|
||||
try {
|
||||
parsed = JSON.parse(trimmed);
|
||||
} catch {
|
||||
return { env: {}, error: t("geminiConfig.invalidJsonFormat") };
|
||||
}
|
||||
|
||||
if (!isPlainObject(parsed)) {
|
||||
return { env: {}, error: t("geminiConfig.invalidJsonFormat") };
|
||||
}
|
||||
|
||||
const keys = Object.keys(parsed);
|
||||
const forbiddenKeys = keys.filter((key) =>
|
||||
GEMINI_COMMON_ENV_FORBIDDEN_KEYS.includes(key as GeminiForbiddenEnvKey),
|
||||
);
|
||||
if (forbiddenKeys.length > 0) {
|
||||
return {
|
||||
env: {},
|
||||
error: t("geminiConfig.commonConfigInvalidKeys", {
|
||||
keys: forbiddenKeys.join(", "),
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
const env: Record<string, string> = {};
|
||||
for (const [key, value] of Object.entries(parsed)) {
|
||||
if (typeof value !== "string") {
|
||||
return {
|
||||
env: {},
|
||||
error: t("geminiConfig.commonConfigInvalidValues"),
|
||||
};
|
||||
}
|
||||
const normalized = value.trim();
|
||||
if (!normalized) continue;
|
||||
env[key] = normalized;
|
||||
}
|
||||
|
||||
return { env };
|
||||
},
|
||||
[t],
|
||||
);
|
||||
|
||||
const hasEnvCommonConfigSnippet = useCallback(
|
||||
(envObj: Record<string, string>, snippetEnv: Record<string, string>) => {
|
||||
const entries = Object.entries(snippetEnv);
|
||||
if (entries.length === 0) return false;
|
||||
return entries.every(([key, value]) => envObj[key] === value);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const applySnippetToEnv = useCallback(
|
||||
(envObj: Record<string, string>, snippetEnv: Record<string, string>) => {
|
||||
const updated = { ...envObj };
|
||||
for (const [key, value] of Object.entries(snippetEnv)) {
|
||||
if (typeof value === "string") {
|
||||
updated[key] = value;
|
||||
}
|
||||
}
|
||||
return updated;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const removeSnippetFromEnv = useCallback(
|
||||
(envObj: Record<string, string>, snippetEnv: Record<string, string>) => {
|
||||
const updated = { ...envObj };
|
||||
for (const [key, value] of Object.entries(snippetEnv)) {
|
||||
if (typeof value === "string" && updated[key] === value) {
|
||||
delete updated[key];
|
||||
}
|
||||
}
|
||||
return updated;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// 初始化：从 config.json 加载，支持从 localStorage 迁移
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
|
||||
const loadSnippet = async () => {
|
||||
try {
|
||||
// 使用统一 API 加载
|
||||
const snippet = await configApi.getCommonConfigSnippet("gemini");
|
||||
|
||||
if (snippet && snippet.trim()) {
|
||||
if (mounted) {
|
||||
setCommonConfigSnippetState(snippet);
|
||||
}
|
||||
} else {
|
||||
// 如果 config.json 中没有，尝试从 localStorage 迁移
|
||||
if (typeof window !== "undefined") {
|
||||
try {
|
||||
const legacySnippet =
|
||||
window.localStorage.getItem(LEGACY_STORAGE_KEY);
|
||||
if (legacySnippet && legacySnippet.trim()) {
|
||||
const parsed = parseSnippetEnv(legacySnippet);
|
||||
if (parsed.error) {
|
||||
console.warn(
|
||||
"[迁移] legacy Gemini 通用配置片段格式不符合当前规则，跳过迁移",
|
||||
);
|
||||
return;
|
||||
}
|
||||
// 迁移到 config.json
|
||||
await configApi.setCommonConfigSnippet("gemini", legacySnippet);
|
||||
if (mounted) {
|
||||
setCommonConfigSnippetState(legacySnippet);
|
||||
}
|
||||
// 清理 localStorage
|
||||
window.localStorage.removeItem(LEGACY_STORAGE_KEY);
|
||||
console.log(
|
||||
"[迁移] Gemini 通用配置已从 localStorage 迁移到 config.json",
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("[迁移] 从 localStorage 迁移失败:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载 Gemini 通用配置失败:", error);
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadSnippet();
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [parseSnippetEnv]);
|
||||
|
||||
// 初始化时检查通用配置片段（编辑模式）
|
||||
useEffect(() => {
|
||||
if (
|
||||
!initialData?.settingsConfig ||
|
||||
isLoading ||
|
||||
hasInitializedEditMode.current
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
hasInitializedEditMode.current = true;
|
||||
|
||||
try {
|
||||
const env =
|
||||
isPlainObject(initialData.settingsConfig.env) &&
|
||||
Object.keys(initialData.settingsConfig.env).length > 0
|
||||
? (initialData.settingsConfig.env as Record<string, string>)
|
||||
: {};
|
||||
const parsed = parseSnippetEnv(commonConfigSnippet);
|
||||
if (parsed.error) {
|
||||
if (commonConfigSnippet.trim()) {
|
||||
setCommonConfigError(parsed.error);
|
||||
}
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
const inferredHasCommon = hasEnvCommonConfigSnippet(
|
||||
env,
|
||||
parsed.env as Record<string, string>,
|
||||
);
|
||||
|
||||
// 优先级：显式设置的 initialEnabled > 从配置推断的值
|
||||
// 如果 initialEnabled 为 undefined，使用推断值
|
||||
const hasCommon =
|
||||
initialEnabled !== undefined ? initialEnabled : inferredHasCommon;
|
||||
|
||||
// 如果应该启用通用配置但配置中还没有，则自动添加
|
||||
if (
|
||||
hasCommon &&
|
||||
!inferredHasCommon &&
|
||||
Object.keys(parsed.env).length > 0
|
||||
) {
|
||||
const currentEnv = envStringToObj(envValue);
|
||||
const merged = applySnippetToEnv(currentEnv, parsed.env);
|
||||
const nextEnvString = envObjToString(merged);
|
||||
|
||||
setCommonConfigError("");
|
||||
setUseCommonConfig(true);
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onEnvChange(nextEnvString);
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
return;
|
||||
}
|
||||
|
||||
setCommonConfigError("");
|
||||
setUseCommonConfig(hasCommon);
|
||||
} catch {
|
||||
// ignore parse error
|
||||
}
|
||||
}, [
|
||||
applySnippetToEnv,
|
||||
commonConfigSnippet,
|
||||
envObjToString,
|
||||
envStringToObj,
|
||||
envValue,
|
||||
hasEnvCommonConfigSnippet,
|
||||
initialData,
|
||||
initialEnabled,
|
||||
isLoading,
|
||||
onEnvChange,
|
||||
parseSnippetEnv,
|
||||
]);
|
||||
|
||||
// 新建模式：如果通用配置片段存在且有效，默认启用
|
||||
useEffect(() => {
|
||||
if (initialData || isLoading || hasInitializedNewMode.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
hasInitializedNewMode.current = true;
|
||||
|
||||
const parsed = parseSnippetEnv(commonConfigSnippet);
|
||||
if (parsed.error) {
|
||||
if (commonConfigSnippet.trim()) {
|
||||
setCommonConfigError(parsed.error);
|
||||
}
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
const hasContent = Object.keys(parsed.env).length > 0;
|
||||
if (!hasContent) return;
|
||||
|
||||
setCommonConfigError("");
|
||||
setUseCommonConfig(true);
|
||||
const currentEnv = envStringToObj(envValue);
|
||||
const merged = applySnippetToEnv(currentEnv, parsed.env);
|
||||
const nextEnvString = envObjToString(merged);
|
||||
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onEnvChange(nextEnvString);
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
}, [
|
||||
initialData,
|
||||
isLoading,
|
||||
commonConfigSnippet,
|
||||
envValue,
|
||||
envStringToObj,
|
||||
envObjToString,
|
||||
applySnippetToEnv,
|
||||
onEnvChange,
|
||||
parseSnippetEnv,
|
||||
]);
|
||||
|
||||
// 处理通用配置开关
|
||||
const handleCommonConfigToggle = useCallback(
|
||||
(checked: boolean) => {
|
||||
const parsed = parseSnippetEnv(commonConfigSnippet);
|
||||
if (parsed.error) {
|
||||
setCommonConfigError(parsed.error);
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
if (Object.keys(parsed.env).length === 0) {
|
||||
setCommonConfigError(t("geminiConfig.noCommonConfigToApply"));
|
||||
setUseCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const currentEnv = envStringToObj(envValue);
|
||||
const updatedEnvObj = checked
|
||||
? applySnippetToEnv(currentEnv, parsed.env)
|
||||
: removeSnippetFromEnv(currentEnv, parsed.env);
|
||||
|
||||
setCommonConfigError("");
|
||||
setUseCommonConfig(checked);
|
||||
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onEnvChange(envObjToString(updatedEnvObj));
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
},
|
||||
[
|
||||
applySnippetToEnv,
|
||||
commonConfigSnippet,
|
||||
envObjToString,
|
||||
envStringToObj,
|
||||
envValue,
|
||||
onEnvChange,
|
||||
parseSnippetEnv,
|
||||
removeSnippetFromEnv,
|
||||
t,
|
||||
],
|
||||
);
|
||||
|
||||
// 处理通用配置片段变化
|
||||
const handleCommonConfigSnippetChange = useCallback(
|
||||
(value: string): boolean => {
|
||||
const previousSnippet = commonConfigSnippet;
|
||||
|
||||
if (!value.trim()) {
|
||||
setCommonConfigError("");
|
||||
|
||||
if (useCommonConfig) {
|
||||
const parsedPrevious = parseSnippetEnv(previousSnippet);
|
||||
if (
|
||||
!parsedPrevious.error &&
|
||||
Object.keys(parsedPrevious.env).length > 0
|
||||
) {
|
||||
const currentEnv = envStringToObj(envValue);
|
||||
const updatedEnv = removeSnippetFromEnv(
|
||||
currentEnv,
|
||||
parsedPrevious.env,
|
||||
);
|
||||
onEnvChange(envObjToString(updatedEnv));
|
||||
}
|
||||
setUseCommonConfig(false);
|
||||
}
|
||||
|
||||
setCommonConfigSnippetState("");
|
||||
configApi
|
||||
.setCommonConfigSnippet("gemini", "")
|
||||
.catch((error: unknown) => {
|
||||
console.error("保存 Gemini 通用配置失败:", error);
|
||||
setCommonConfigError(
|
||||
t("geminiConfig.saveFailed", { error: String(error) }),
|
||||
);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
// 校验 JSON 格式
|
||||
const parsed = parseSnippetEnv(value);
|
||||
if (parsed.error) {
|
||||
setCommonConfigError(parsed.error);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 若当前启用通用配置，需要替换为最新片段
|
||||
if (useCommonConfig) {
|
||||
const prevParsed = parseSnippetEnv(previousSnippet);
|
||||
const prevEnv = prevParsed.error ? {} : prevParsed.env;
|
||||
const nextEnv = parsed.env;
|
||||
const currentEnv = envStringToObj(envValue);
|
||||
|
||||
const withoutOld =
|
||||
Object.keys(prevEnv).length > 0
|
||||
? removeSnippetFromEnv(currentEnv, prevEnv)
|
||||
: currentEnv;
|
||||
const withNew =
|
||||
Object.keys(nextEnv).length > 0
|
||||
? applySnippetToEnv(withoutOld, nextEnv)
|
||||
: withoutOld;
|
||||
|
||||
isUpdatingFromCommonConfig.current = true;
|
||||
onEnvChange(envObjToString(withNew));
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCommonConfig.current = false;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
setCommonConfigError("");
|
||||
setCommonConfigSnippetState(value);
|
||||
configApi
|
||||
.setCommonConfigSnippet("gemini", value)
|
||||
.catch((error: unknown) => {
|
||||
console.error("保存 Gemini 通用配置失败:", error);
|
||||
setCommonConfigError(
|
||||
t("geminiConfig.saveFailed", { error: String(error) }),
|
||||
);
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
[
|
||||
applySnippetToEnv,
|
||||
commonConfigSnippet,
|
||||
envObjToString,
|
||||
envStringToObj,
|
||||
envValue,
|
||||
onEnvChange,
|
||||
parseSnippetEnv,
|
||||
removeSnippetFromEnv,
|
||||
t,
|
||||
useCommonConfig,
|
||||
],
|
||||
);
|
||||
|
||||
// 当 env 变化时检查是否包含通用配置（但避免在通过通用配置更新时检查）
|
||||
useEffect(() => {
|
||||
if (isUpdatingFromCommonConfig.current || isLoading) {
|
||||
return;
|
||||
}
|
||||
const parsed = parseSnippetEnv(commonConfigSnippet);
|
||||
if (parsed.error) return;
|
||||
const envObj = envStringToObj(envValue);
|
||||
setUseCommonConfig(
|
||||
hasEnvCommonConfigSnippet(envObj, parsed.env as Record<string, string>),
|
||||
);
|
||||
}, [
|
||||
envValue,
|
||||
commonConfigSnippet,
|
||||
envStringToObj,
|
||||
hasEnvCommonConfigSnippet,
|
||||
isLoading,
|
||||
parseSnippetEnv,
|
||||
]);
|
||||
|
||||
// 从编辑器当前内容提取通用配置片段
|
||||
const handleExtract = useCallback(async () => {
|
||||
setIsExtracting(true);
|
||||
setCommonConfigError("");
|
||||
|
||||
try {
|
||||
const extracted = await configApi.extractCommonConfigSnippet("gemini", {
|
||||
settingsConfig: JSON.stringify({
|
||||
env: envStringToObj(envValue),
|
||||
}),
|
||||
});
|
||||
|
||||
if (!extracted || extracted === "{}") {
|
||||
setCommonConfigError(t("geminiConfig.extractNoCommonConfig"));
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证 JSON 格式
|
||||
const parsed = parseSnippetEnv(extracted);
|
||||
if (parsed.error) {
|
||||
setCommonConfigError(t("geminiConfig.extractedConfigInvalid"));
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新片段状态
|
||||
setCommonConfigSnippetState(extracted);
|
||||
|
||||
// 保存到后端
|
||||
await configApi.setCommonConfigSnippet("gemini", extracted);
|
||||
} catch (error) {
|
||||
console.error("提取 Gemini 通用配置失败:", error);
|
||||
setCommonConfigError(
|
||||
t("geminiConfig.extractFailed", { error: String(error) }),
|
||||
);
|
||||
} finally {
|
||||
setIsExtracting(false);
|
||||
}
|
||||
}, [envStringToObj, envValue, parseSnippetEnv, t]);
|
||||
|
||||
const clearCommonConfigError = useCallback(() => {
|
||||
setCommonConfigError("");
|
||||
}, []);
|
||||
|
||||
return {
|
||||
useCommonConfig,
|
||||
commonConfigSnippet,
|
||||
commonConfigError,
|
||||
isLoading,
|
||||
isExtracting,
|
||||
handleCommonConfigToggle,
|
||||
handleCommonConfigSnippetChange,
|
||||
handleExtract,
|
||||
clearCommonConfigError,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,261 @@
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
|
||||
interface UseGeminiConfigStateProps {
|
||||
initialData?: {
|
||||
settingsConfig?: Record<string, unknown>;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理 Gemini 配置状态
|
||||
* Gemini 配置包含两部分：env (环境变量) 和 config (扩展配置 JSON)
|
||||
*/
|
||||
export function useGeminiConfigState({
|
||||
initialData,
|
||||
}: UseGeminiConfigStateProps) {
|
||||
const [geminiEnv, setGeminiEnvState] = useState("");
|
||||
const [geminiConfig, setGeminiConfigState] = useState("");
|
||||
const [geminiApiKey, setGeminiApiKey] = useState("");
|
||||
const [geminiBaseUrl, setGeminiBaseUrl] = useState("");
|
||||
const [geminiModel, setGeminiModel] = useState("");
|
||||
const [envError, setEnvError] = useState("");
|
||||
const [configError, setConfigError] = useState("");
|
||||
|
||||
// 将 JSON env 对象转换为 .env 格式字符串
|
||||
// 保留所有环境变量，已知 key 优先显示
|
||||
const envObjToString = useCallback(
|
||||
(envObj: Record<string, unknown>): string => {
|
||||
const priorityKeys = [
|
||||
"GOOGLE_GEMINI_BASE_URL",
|
||||
"GEMINI_API_KEY",
|
||||
"GEMINI_MODEL",
|
||||
];
|
||||
const lines: string[] = [];
|
||||
const addedKeys = new Set<string>();
|
||||
|
||||
// 先添加已知 key（按顺序）
|
||||
for (const key of priorityKeys) {
|
||||
if (typeof envObj[key] === "string" && envObj[key]) {
|
||||
lines.push(`${key}=${envObj[key]}`);
|
||||
addedKeys.add(key);
|
||||
}
|
||||
}
|
||||
|
||||
// 再添加其他自定义 key（保留用户添加的环境变量）
|
||||
for (const [key, value] of Object.entries(envObj)) {
|
||||
if (!addedKeys.has(key) && typeof value === "string") {
|
||||
lines.push(`${key}=${value}`);
|
||||
}
|
||||
}
|
||||
|
||||
return lines.join("\n");
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// 将 .env 格式字符串转换为 JSON env 对象
|
||||
const envStringToObj = useCallback(
|
||||
(envString: string): Record<string, string> => {
|
||||
const env: Record<string, string> = {};
|
||||
const lines = envString.split("\n");
|
||||
lines.forEach((line) => {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed || trimmed.startsWith("#")) return;
|
||||
const equalIndex = trimmed.indexOf("=");
|
||||
if (equalIndex > 0) {
|
||||
const key = trimmed.substring(0, equalIndex).trim();
|
||||
const value = trimmed.substring(equalIndex + 1).trim();
|
||||
env[key] = value;
|
||||
}
|
||||
});
|
||||
return env;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// 初始化 Gemini 配置（编辑模式）
|
||||
useEffect(() => {
|
||||
if (!initialData) return;
|
||||
|
||||
const config = initialData.settingsConfig;
|
||||
if (typeof config === "object" && config !== null) {
|
||||
// 设置 env
|
||||
const env = (config as any).env || {};
|
||||
setGeminiEnvState(envObjToString(env));
|
||||
|
||||
// 设置 config
|
||||
const configObj = (config as any).config || {};
|
||||
setGeminiConfigState(JSON.stringify(configObj, null, 2));
|
||||
|
||||
// 提取 API Key、Base URL 和 Model
|
||||
if (typeof env.GEMINI_API_KEY === "string") {
|
||||
setGeminiApiKey(env.GEMINI_API_KEY);
|
||||
}
|
||||
if (typeof env.GOOGLE_GEMINI_BASE_URL === "string") {
|
||||
setGeminiBaseUrl(env.GOOGLE_GEMINI_BASE_URL);
|
||||
}
|
||||
if (typeof env.GEMINI_MODEL === "string") {
|
||||
setGeminiModel(env.GEMINI_MODEL);
|
||||
}
|
||||
}
|
||||
}, [initialData, envObjToString]);
|
||||
|
||||
// 从 geminiEnv 中提取并同步 API Key、Base URL 和 Model
|
||||
useEffect(() => {
|
||||
const envObj = envStringToObj(geminiEnv);
|
||||
const extractedKey = envObj.GEMINI_API_KEY || "";
|
||||
const extractedBaseUrl = envObj.GOOGLE_GEMINI_BASE_URL || "";
|
||||
const extractedModel = envObj.GEMINI_MODEL || "";
|
||||
|
||||
if (extractedKey !== geminiApiKey) {
|
||||
setGeminiApiKey(extractedKey);
|
||||
}
|
||||
if (extractedBaseUrl !== geminiBaseUrl) {
|
||||
setGeminiBaseUrl(extractedBaseUrl);
|
||||
}
|
||||
if (extractedModel !== geminiModel) {
|
||||
setGeminiModel(extractedModel);
|
||||
}
|
||||
}, [geminiEnv, envStringToObj, geminiApiKey, geminiBaseUrl, geminiModel]);
|
||||
|
||||
// 验证 Gemini Config JSON
|
||||
const validateGeminiConfig = useCallback((value: string): string => {
|
||||
if (!value.trim()) return ""; // 空值允许
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
|
||||
return "";
|
||||
}
|
||||
return "Config must be a JSON object";
|
||||
} catch {
|
||||
return "Invalid JSON format";
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 设置 env
|
||||
const setGeminiEnv = useCallback((value: string) => {
|
||||
setGeminiEnvState(value);
|
||||
// .env 格式较宽松，不做严格校验
|
||||
setEnvError("");
|
||||
}, []);
|
||||
|
||||
// 设置 config (支持函数更新)
|
||||
const setGeminiConfig = useCallback(
|
||||
(value: string | ((prev: string) => string)) => {
|
||||
const newValue =
|
||||
typeof value === "function" ? value(geminiConfig) : value;
|
||||
setGeminiConfigState(newValue);
|
||||
setConfigError(validateGeminiConfig(newValue));
|
||||
},
|
||||
[geminiConfig, validateGeminiConfig],
|
||||
);
|
||||
|
||||
// 处理 Gemini API Key 输入并写回 env
|
||||
const handleGeminiApiKeyChange = useCallback(
|
||||
(key: string) => {
|
||||
const trimmed = key.trim();
|
||||
setGeminiApiKey(trimmed);
|
||||
|
||||
const envObj = envStringToObj(geminiEnv);
|
||||
envObj.GEMINI_API_KEY = trimmed;
|
||||
const newEnv = envObjToString(envObj);
|
||||
setGeminiEnv(newEnv);
|
||||
},
|
||||
[geminiEnv, envStringToObj, envObjToString, setGeminiEnv],
|
||||
);
|
||||
|
||||
// 处理 Gemini Base URL 变化
|
||||
const handleGeminiBaseUrlChange = useCallback(
|
||||
(url: string) => {
|
||||
const sanitized = url.trim().replace(/\/+$/, "");
|
||||
setGeminiBaseUrl(sanitized);
|
||||
|
||||
const envObj = envStringToObj(geminiEnv);
|
||||
envObj.GOOGLE_GEMINI_BASE_URL = sanitized;
|
||||
const newEnv = envObjToString(envObj);
|
||||
setGeminiEnv(newEnv);
|
||||
},
|
||||
[geminiEnv, envStringToObj, envObjToString, setGeminiEnv],
|
||||
);
|
||||
|
||||
// 处理 Gemini Model 变化
|
||||
const handleGeminiModelChange = useCallback(
|
||||
(model: string) => {
|
||||
const trimmed = model.trim();
|
||||
setGeminiModel(trimmed);
|
||||
|
||||
const envObj = envStringToObj(geminiEnv);
|
||||
envObj.GEMINI_MODEL = trimmed;
|
||||
const newEnv = envObjToString(envObj);
|
||||
setGeminiEnv(newEnv);
|
||||
},
|
||||
[geminiEnv, envStringToObj, envObjToString, setGeminiEnv],
|
||||
);
|
||||
|
||||
// 处理 env 变化
|
||||
const handleGeminiEnvChange = useCallback(
|
||||
(value: string) => {
|
||||
setGeminiEnv(value);
|
||||
},
|
||||
[setGeminiEnv],
|
||||
);
|
||||
|
||||
// 处理 config 变化
|
||||
const handleGeminiConfigChange = useCallback(
|
||||
(value: string) => {
|
||||
setGeminiConfig(value);
|
||||
},
|
||||
[setGeminiConfig],
|
||||
);
|
||||
|
||||
// 重置配置（用于预设切换）
|
||||
const resetGeminiConfig = useCallback(
|
||||
(env: Record<string, unknown>, config: Record<string, unknown>) => {
|
||||
const envString = envObjToString(env);
|
||||
const configString = JSON.stringify(config, null, 2);
|
||||
|
||||
setGeminiEnv(envString);
|
||||
setGeminiConfig(configString);
|
||||
|
||||
// 提取 API Key、Base URL 和 Model
|
||||
if (typeof env.GEMINI_API_KEY === "string") {
|
||||
setGeminiApiKey(env.GEMINI_API_KEY);
|
||||
} else {
|
||||
setGeminiApiKey("");
|
||||
}
|
||||
|
||||
if (typeof env.GOOGLE_GEMINI_BASE_URL === "string") {
|
||||
setGeminiBaseUrl(env.GOOGLE_GEMINI_BASE_URL);
|
||||
} else {
|
||||
setGeminiBaseUrl("");
|
||||
}
|
||||
|
||||
if (typeof env.GEMINI_MODEL === "string") {
|
||||
setGeminiModel(env.GEMINI_MODEL);
|
||||
} else {
|
||||
setGeminiModel("");
|
||||
}
|
||||
},
|
||||
[envObjToString, setGeminiEnv, setGeminiConfig],
|
||||
);
|
||||
|
||||
return {
|
||||
geminiEnv,
|
||||
geminiConfig,
|
||||
geminiApiKey,
|
||||
geminiBaseUrl,
|
||||
geminiModel,
|
||||
envError,
|
||||
configError,
|
||||
setGeminiEnv,
|
||||
setGeminiConfig,
|
||||
handleGeminiApiKeyChange,
|
||||
handleGeminiBaseUrlChange,
|
||||
handleGeminiModelChange,
|
||||
handleGeminiEnvChange,
|
||||
handleGeminiConfigChange,
|
||||
resetGeminiConfig,
|
||||
envStringToObj,
|
||||
envObjToString,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
import { useState, useCallback, useMemo } from "react";
|
||||
import type { AppId } from "@/lib/api";
|
||||
import { useProvidersQuery } from "@/lib/query/queries";
|
||||
import {
|
||||
HERMES_DEFAULT_API_MODE,
|
||||
type HermesApiMode,
|
||||
type HermesModel,
|
||||
type HermesProviderSettingsConfig,
|
||||
} from "@/config/hermesProviderPresets";
|
||||
|
||||
interface UseHermesFormStateParams {
|
||||
initialData?: {
|
||||
settingsConfig?: Record<string, unknown>;
|
||||
};
|
||||
appId: AppId;
|
||||
providerId?: string;
|
||||
onSettingsConfigChange: (config: string) => void;
|
||||
getSettingsConfig: () => string;
|
||||
}
|
||||
|
||||
const HERMES_DEFAULT_CONFIG_OBJ = {
|
||||
name: "",
|
||||
base_url: "",
|
||||
api_key: "",
|
||||
} as const;
|
||||
|
||||
export const HERMES_DEFAULT_CONFIG = JSON.stringify(
|
||||
HERMES_DEFAULT_CONFIG_OBJ,
|
||||
null,
|
||||
2,
|
||||
);
|
||||
|
||||
export interface HermesFormState {
|
||||
hermesProviderKey: string;
|
||||
setHermesProviderKey: (key: string) => void;
|
||||
hermesBaseUrl: string;
|
||||
hermesApiKey: string;
|
||||
hermesApiMode: HermesApiMode;
|
||||
hermesModels: HermesModel[];
|
||||
hermesRateLimitDelay: number | undefined;
|
||||
existingHermesKeys: string[];
|
||||
handleHermesBaseUrlChange: (baseUrl: string) => void;
|
||||
handleHermesApiKeyChange: (apiKey: string) => void;
|
||||
handleHermesApiModeChange: (mode: HermesApiMode) => void;
|
||||
handleHermesModelsChange: (models: HermesModel[]) => void;
|
||||
handleHermesRateLimitDelayChange: (delay: number | undefined) => void;
|
||||
resetHermesState: (config?: Partial<HermesProviderSettingsConfig>) => void;
|
||||
}
|
||||
|
||||
function parseHermesField<T>(
|
||||
initialData: UseHermesFormStateParams["initialData"],
|
||||
field: string,
|
||||
fallback: T,
|
||||
): T {
|
||||
try {
|
||||
if (initialData?.settingsConfig) {
|
||||
return (initialData.settingsConfig[field] as T) || fallback;
|
||||
}
|
||||
return (
|
||||
((HERMES_DEFAULT_CONFIG_OBJ as Record<string, unknown>)[field] as T) ||
|
||||
fallback
|
||||
);
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
function parseRateLimitDelay(raw: unknown): number | undefined {
|
||||
return typeof raw === "number" && Number.isFinite(raw) && raw >= 0
|
||||
? raw
|
||||
: undefined;
|
||||
}
|
||||
|
||||
export function useHermesFormState({
|
||||
initialData,
|
||||
appId,
|
||||
providerId,
|
||||
onSettingsConfigChange,
|
||||
getSettingsConfig,
|
||||
}: UseHermesFormStateParams): HermesFormState {
|
||||
const { data: hermesProvidersData } = useProvidersQuery("hermes");
|
||||
const existingHermesKeys = useMemo(() => {
|
||||
if (!hermesProvidersData?.providers) return [];
|
||||
return Object.keys(hermesProvidersData.providers).filter(
|
||||
(k) => k !== providerId,
|
||||
);
|
||||
}, [hermesProvidersData?.providers, providerId]);
|
||||
|
||||
const [hermesProviderKey, setHermesProviderKey] = useState<string>(() => {
|
||||
if (appId !== "hermes") return "";
|
||||
return providerId || "";
|
||||
});
|
||||
|
||||
const [hermesBaseUrl, setHermesBaseUrl] = useState<string>(() => {
|
||||
if (appId !== "hermes") return "";
|
||||
return parseHermesField(initialData, "base_url", "");
|
||||
});
|
||||
|
||||
const [hermesApiKey, setHermesApiKey] = useState<string>(() => {
|
||||
if (appId !== "hermes") return "";
|
||||
return parseHermesField(initialData, "api_key", "");
|
||||
});
|
||||
|
||||
const [hermesApiMode, setHermesApiMode] = useState<HermesApiMode>(() => {
|
||||
if (appId !== "hermes") return HERMES_DEFAULT_API_MODE;
|
||||
const stored = parseHermesField<HermesApiMode | "">(
|
||||
initialData,
|
||||
"api_mode",
|
||||
"",
|
||||
);
|
||||
return stored || HERMES_DEFAULT_API_MODE;
|
||||
});
|
||||
|
||||
const [hermesModels, setHermesModels] = useState<HermesModel[]>(() => {
|
||||
if (appId !== "hermes") return [];
|
||||
return parseHermesField<HermesModel[]>(initialData, "models", []);
|
||||
});
|
||||
|
||||
const [hermesRateLimitDelay, setHermesRateLimitDelay] = useState<
|
||||
number | undefined
|
||||
>(() => {
|
||||
if (appId !== "hermes") return undefined;
|
||||
return parseRateLimitDelay(initialData?.settingsConfig?.rate_limit_delay);
|
||||
});
|
||||
|
||||
const updateHermesConfig = useCallback(
|
||||
(updater: (config: Record<string, unknown>) => void) => {
|
||||
try {
|
||||
const config = JSON.parse(getSettingsConfig() || HERMES_DEFAULT_CONFIG);
|
||||
updater(config);
|
||||
onSettingsConfigChange(JSON.stringify(config, null, 2));
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
},
|
||||
[getSettingsConfig, onSettingsConfigChange],
|
||||
);
|
||||
|
||||
const handleHermesBaseUrlChange = useCallback(
|
||||
(baseUrl: string) => {
|
||||
setHermesBaseUrl(baseUrl);
|
||||
updateHermesConfig((config) => {
|
||||
config.base_url = baseUrl.trim().replace(/\/+$/, "");
|
||||
});
|
||||
},
|
||||
[updateHermesConfig],
|
||||
);
|
||||
|
||||
const handleHermesApiKeyChange = useCallback(
|
||||
(apiKey: string) => {
|
||||
setHermesApiKey(apiKey);
|
||||
updateHermesConfig((config) => {
|
||||
config.api_key = apiKey;
|
||||
});
|
||||
},
|
||||
[updateHermesConfig],
|
||||
);
|
||||
|
||||
const handleHermesApiModeChange = useCallback(
|
||||
(mode: HermesApiMode) => {
|
||||
setHermesApiMode(mode);
|
||||
updateHermesConfig((config) => {
|
||||
config.api_mode = mode;
|
||||
});
|
||||
},
|
||||
[updateHermesConfig],
|
||||
);
|
||||
|
||||
const handleHermesModelsChange = useCallback(
|
||||
(models: HermesModel[]) => {
|
||||
setHermesModels(models);
|
||||
updateHermesConfig((config) => {
|
||||
if (models.length === 0) {
|
||||
delete config.models;
|
||||
} else {
|
||||
config.models = models;
|
||||
}
|
||||
});
|
||||
},
|
||||
[updateHermesConfig],
|
||||
);
|
||||
|
||||
const handleHermesRateLimitDelayChange = useCallback(
|
||||
(delay: number | undefined) => {
|
||||
setHermesRateLimitDelay(delay);
|
||||
updateHermesConfig((config) => {
|
||||
if (delay === undefined) {
|
||||
delete config.rate_limit_delay;
|
||||
} else {
|
||||
config.rate_limit_delay = delay;
|
||||
}
|
||||
});
|
||||
},
|
||||
[updateHermesConfig],
|
||||
);
|
||||
|
||||
const resetHermesState = useCallback(
|
||||
(config?: Partial<HermesProviderSettingsConfig>) => {
|
||||
setHermesProviderKey("");
|
||||
setHermesBaseUrl(config?.base_url || "");
|
||||
setHermesApiKey(config?.api_key || "");
|
||||
setHermesApiMode(config?.api_mode ?? HERMES_DEFAULT_API_MODE);
|
||||
setHermesModels(config?.models ?? []);
|
||||
setHermesRateLimitDelay(parseRateLimitDelay(config?.rate_limit_delay));
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
return {
|
||||
hermesProviderKey,
|
||||
setHermesProviderKey,
|
||||
hermesBaseUrl,
|
||||
hermesApiKey,
|
||||
hermesApiMode,
|
||||
hermesModels,
|
||||
hermesRateLimitDelay,
|
||||
existingHermesKeys,
|
||||
handleHermesBaseUrlChange,
|
||||
handleHermesApiKeyChange,
|
||||
handleHermesApiModeChange,
|
||||
handleHermesModelsChange,
|
||||
handleHermesRateLimitDelayChange,
|
||||
resetHermesState,
|
||||
};
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user