refactor(provider): replace startup auto-import with manual import button

Remove the startup loop in lib.rs that auto-imported default providers
for Claude/Codex/Gemini. Move config snippet extraction logic into the
import_default_config command so it works when triggered manually.

Add an "Import Current Config" button to ProviderEmptyState, wired via
useMutation in ProviderList (shown only for standard apps). Update i18n
keys (zh/en/ja) with new button labels and revised empty state text.
This commit is contained in:
Jason
2026-02-20 22:01:18 +08:00
parent 5a72888852
commit 4c88174cb0
7 changed files with 81 additions and 59 deletions
@@ -1,12 +1,16 @@
import { Users } from "lucide-react";
import { Download, Users } from "lucide-react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
interface ProviderEmptyStateProps {
onCreate?: () => void;
onImport?: () => void;
}
export function ProviderEmptyState({ onCreate }: ProviderEmptyStateProps) {
export function ProviderEmptyState({
onCreate,
onImport,
}: ProviderEmptyStateProps) {
const { t } = useTranslation();
return (
@@ -18,11 +22,19 @@ export function ProviderEmptyState({ onCreate }: ProviderEmptyStateProps) {
<p className="mt-2 max-w-sm text-sm text-muted-foreground">
{t("provider.noProvidersDescription")}
</p>
{onCreate && (
<Button className="mt-6" onClick={onCreate}>
{t("provider.addProvider")}
</Button>
)}
<div className="mt-6 flex flex-col gap-2">
{onImport && (
<Button onClick={onImport}>
<Download className="mr-2 h-4 w-4" />
{t("provider.importCurrent")}
</Button>
)}
{onCreate && (
<Button variant={onImport ? "outline" : "default"} onClick={onCreate}>
{t("provider.addProvider")}
</Button>
)}
</div>
</div>
);
}
+29 -2
View File
@@ -15,7 +15,8 @@ import {
import { AnimatePresence, motion } from "framer-motion";
import { Search, X } from "lucide-react";
import { useTranslation } from "react-i18next";
import { useQuery } from "@tanstack/react-query";
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";
@@ -179,6 +180,23 @@ export function ProviderList({
const [isSearchOpen, setIsSearchOpen] = useState(false);
const searchInputRef = useRef<HTMLInputElement>(null);
// Import current live config as default provider
const queryClient = useQueryClient();
const importMutation = useMutation({
mutationFn: () => providersApi.importDefault(appId),
onSuccess: (imported) => {
if (imported) {
queryClient.invalidateQueries({ queryKey: ["providers", appId] });
toast.success(t("provider.importCurrentDescription"));
} else {
toast.info(t("provider.noProviders"));
}
},
onError: (error: Error) => {
toast.error(error.message);
},
});
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
const key = event.key.toLowerCase();
@@ -231,8 +249,17 @@ export function ProviderList({
);
}
// Only show import button for standard apps (not additive-mode apps like OpenCode/OpenClaw)
const showImportButton =
appId === "claude" || appId === "codex" || appId === "gemini";
if (sortedProviders.length === 0) {
return <ProviderEmptyState onCreate={onCreate} />;
return (
<ProviderEmptyState
onCreate={onCreate}
onImport={showImportButton ? () => importMutation.mutate() : undefined}
/>
);
}
const renderProviderList = () => (