AdministratorandClaude Opus 4.8
44c0f6189b
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1272 lines
44 KiB
TypeScript
1272 lines
44 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
AlertCircle,
|
|
ArchiveIcon,
|
|
ArrowDownUpIcon,
|
|
BookmarkIcon,
|
|
CheckCircle2,
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
ClockIcon,
|
|
CopyIcon,
|
|
FileArchive,
|
|
GlobeIcon,
|
|
InfoIcon,
|
|
Loader2,
|
|
LockIcon,
|
|
PinIcon,
|
|
RefreshCwIcon,
|
|
SparklesIcon,
|
|
TagsIcon,
|
|
Trash2Icon,
|
|
TrendingUpIcon,
|
|
Upload,
|
|
UserIcon,
|
|
XIcon,
|
|
} from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
Empty,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyMedia,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty";
|
|
|
|
import {
|
|
Item,
|
|
ItemActions,
|
|
ItemTitle,
|
|
ItemContent,
|
|
ItemDescription,
|
|
} from "@/components/ui/item";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-dialog";
|
|
import { TagChipList } from "@/components/workspace/tags/tag-chip";
|
|
import { TagPickerDialog } from "@/components/workspace/tags/tag-picker-dialog";
|
|
import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
|
|
import { ViewModeToggle } from "@/components/workspace/view-mode-toggle";
|
|
import { useTheme } from "@/contexts/ThemeContext";
|
|
import { getStoredAuth } from "@/core/auth";
|
|
import { useI18n } from "@/core/i18n/hooks";
|
|
import type { ValidateSkillUploadResponse } from "@/core/skills/api";
|
|
import {
|
|
useDeleteCustomSkill,
|
|
useDuplicateSkill,
|
|
useGenerateMissingSkillNameZh,
|
|
useInstallSkillUpload,
|
|
useReconcileCustomSkills,
|
|
useSetSkillFeatured,
|
|
useSetSkillPinned,
|
|
useSetSkillPublished,
|
|
useSkills,
|
|
useValidateSkillUpload,
|
|
} from "@/core/skills/hooks";
|
|
import { useViewMode } from "@/core/system-settings/hooks";
|
|
import type { Skill } from "@/core/skills/type";
|
|
import { env } from "@/env";
|
|
import { desensitize } from "@/lib/desensitize";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { SettingsSection } from "./settings-section";
|
|
import { SkillStateSheet } from "./skill-state-sheet";
|
|
|
|
export function SkillSettingsPage({ onClose }: { onClose?: () => void } = {}) {
|
|
const { t } = useI18n();
|
|
return (
|
|
<SettingsSection
|
|
title={t.settings.skills.title}
|
|
description={t.settings.skills.description}
|
|
>
|
|
<SkillSettingsList onClose={onClose} />
|
|
</SettingsSection>
|
|
);
|
|
}
|
|
|
|
const PAGE_SIZE = 10;
|
|
type SkillSort =
|
|
| "time_desc"
|
|
| "time_asc"
|
|
| "activity_desc"
|
|
| "activity_asc"
|
|
| "usage_desc"
|
|
| "usage_asc"
|
|
| "name_asc"
|
|
| "name_desc";
|
|
|
|
/** 重新扫描成功 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
|
|
const rescanSuccessToastDarkOptions = {
|
|
classNames: {
|
|
toast:
|
|
"!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
|
|
title: "!text-[#FFFFFF]",
|
|
description: "!text-[#FFFFFF]",
|
|
},
|
|
icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
|
|
} as const;
|
|
|
|
/** 重新扫描无变更 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
|
|
const rescanInfoToastDarkOptions = {
|
|
classNames: {
|
|
toast:
|
|
"!rounded-[2px] !border !border-[#704812] !bg-[#202222] !text-[#FFFFFF] shadow-md",
|
|
title: "!text-[#FFFFFF]",
|
|
description: "!text-[#FFFFFF]",
|
|
},
|
|
icon: <InfoIcon className="size-4 shrink-0 text-[#FF9900]" />,
|
|
} as const;
|
|
|
|
/** 重新扫描失败 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
|
|
const rescanErrorToastDarkOptions = {
|
|
classNames: {
|
|
toast:
|
|
"!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
|
|
title: "!text-[#FFFFFF]",
|
|
description: "!text-[#FFFFFF]",
|
|
},
|
|
icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
|
|
} as const;
|
|
|
|
function SkillSettingsList({ onClose }: { onClose?: () => void }) {
|
|
const { t } = useI18n();
|
|
const { theme } = useTheme();
|
|
const router = useRouter();
|
|
const [filter, setFilter] = useState<string>("mine");
|
|
const [installOpen, setInstallOpen] = useState(false);
|
|
const [staleSheetOpen, setStaleSheetOpen] = useState(false);
|
|
const [archiveSheetOpen, setArchiveSheetOpen] = useState(false);
|
|
const [search, setSearch] = useState("");
|
|
const [tagIds, setTagIds] = useState<string[]>([]);
|
|
const [sort, setSort] = useState<SkillSort>("time_desc");
|
|
const [page, setPage] = useState(1);
|
|
// Publisher filter: click a skill's 发布者 to keep only that user's skills.
|
|
// {id} is owner_user_id; {label} the desensitized display name.
|
|
const [publisher, setPublisher] = useState<{ id: string; label: string } | null>(
|
|
null,
|
|
);
|
|
const [viewMode, setViewMode] = useViewMode("skill");
|
|
const reconcileMutation = useReconcileCustomSkills();
|
|
const fillNamesMutation = useGenerateMissingSkillNameZh();
|
|
// Name + tag filtering is resolved server-side via the /api/skills query.
|
|
const { skills, isLoading, error } = useSkills({ search, tagIds, sort });
|
|
|
|
const storedAuth = useMemo(() => getStoredAuth(), []);
|
|
const currentUserId = storedAuth?.user_id ?? null;
|
|
const isAdmin = storedAuth?.system_role === "admin";
|
|
|
|
// 把可见技能分类成 UI 关心的几个桶。
|
|
// "All" = 内置 + 已发布的技能（仅 active 状态);自己的技能也要自己发布了才出现。
|
|
// "Mine" = 严格属于我自己的自定义技能（仅 active 状态)。
|
|
const { activeAll, activeMine, staleVisible, archivedVisible } = useMemo(() => {
|
|
const all: Skill[] = [];
|
|
const mine: Skill[] = [];
|
|
const stale: Skill[] = [];
|
|
const archived: Skill[] = [];
|
|
for (const skill of skills) {
|
|
const state = skill.state ?? "active";
|
|
const isCustom = skill.category === "custom";
|
|
const isOwnedByMe =
|
|
isCustom && !!skill.owner_user_id && skill.owner_user_id === currentUserId;
|
|
const isBuiltin = skill.builtin ?? !skill.owner_user_id;
|
|
|
|
if (state === "stale") {
|
|
stale.push(skill);
|
|
continue;
|
|
}
|
|
if (state === "archived") {
|
|
archived.push(skill);
|
|
continue;
|
|
}
|
|
// state === active
|
|
if (isBuiltin || !!skill.published) {
|
|
all.push(skill);
|
|
}
|
|
if (isOwnedByMe) {
|
|
mine.push(skill);
|
|
}
|
|
}
|
|
return {
|
|
activeAll: all,
|
|
activeMine: mine,
|
|
staleVisible: stale,
|
|
archivedVisible: archived,
|
|
};
|
|
}, [skills, currentUserId]);
|
|
|
|
const scopedSkills = filter === "mine" ? activeMine : activeAll;
|
|
const filteredSkills = useMemo(
|
|
() =>
|
|
publisher
|
|
? scopedSkills.filter((s) => s.owner_user_id === publisher.id)
|
|
: scopedSkills,
|
|
[scopedSkills, publisher],
|
|
);
|
|
const orderedSkills = useMemo(
|
|
() =>
|
|
filteredSkills
|
|
.map((skill, index) => ({ skill, index }))
|
|
.sort((a, b) => {
|
|
// 置顶(featured)决定排序;钉选(pinned)只管防归档,不影响顺序。
|
|
const featuredDelta =
|
|
Number(!!b.skill.featured) - Number(!!a.skill.featured);
|
|
return featuredDelta || a.index - b.index;
|
|
})
|
|
.map(({ skill }) => skill),
|
|
[filteredSkills],
|
|
);
|
|
const staleCount = staleVisible.length;
|
|
const archivedCount = archivedVisible.length;
|
|
|
|
const totalPages = Math.max(1, Math.ceil(orderedSkills.length / PAGE_SIZE));
|
|
// Filter / search / tag changes may shrink the result set — pull the page
|
|
// back into range without forcing a reset on every keystroke.
|
|
useEffect(() => {
|
|
if (page > totalPages) setPage(totalPages);
|
|
}, [page, totalPages]);
|
|
useEffect(() => {
|
|
setPage(1);
|
|
}, [search, tagIds, sort, publisher?.id, filter]);
|
|
const pagedSkills = useMemo(
|
|
() => orderedSkills.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
|
|
[orderedSkills, page],
|
|
);
|
|
|
|
const handleFillNames = async () => {
|
|
try {
|
|
const result = await fillNamesMutation.mutateAsync();
|
|
const okCount = result.generated.length;
|
|
const failCount = result.failed.length;
|
|
if (okCount === 0 && failCount === 0) {
|
|
toast.info("所有技能均已配置中文名称");
|
|
} else if (failCount === 0) {
|
|
toast.success(`已为 ${okCount} 个技能补充中文名称`);
|
|
} else {
|
|
toast.warning(`已补充 ${okCount} 个,${failCount} 个生成失败,可稍后重试或手动填写`);
|
|
}
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
};
|
|
|
|
const handleRescan = async () => {
|
|
try {
|
|
const result = await reconcileMutation.mutateAsync();
|
|
if (result.adopted.length > 0) {
|
|
toast.success(
|
|
t.settings.skills.rescanSkillsAdopted.replace(
|
|
"{count}",
|
|
String(result.adopted.length),
|
|
),
|
|
theme === "dark" ? rescanSuccessToastDarkOptions : undefined,
|
|
);
|
|
} else {
|
|
toast.info(
|
|
t.settings.skills.rescanSkillsNoop,
|
|
theme === "dark" ? rescanInfoToastDarkOptions : undefined,
|
|
);
|
|
}
|
|
} catch (err) {
|
|
toast.error(
|
|
err instanceof Error ? err.message : String(err),
|
|
theme === "dark" ? rescanErrorToastDarkOptions : undefined,
|
|
);
|
|
}
|
|
|
|
};
|
|
return (
|
|
<div className="flex w-full flex-col gap-4">
|
|
<header className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Tabs value={filter} onValueChange={setFilter}>
|
|
<TabsList variant="line">
|
|
<TabsTrigger value="mine">{t.settings.skills.tabMine}</TabsTrigger>
|
|
<TabsTrigger value="all">{t.settings.skills.tabAll}</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={staleCount === 0}
|
|
onClick={() => setStaleSheetOpen(true)}
|
|
title={t.settings.skills.badgeStaleTitle}
|
|
>
|
|
<ClockIcon className="size-4" />
|
|
{t.settings.skills.entryStale.replace("{count}", String(staleCount))}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={archivedCount === 0}
|
|
onClick={() => setArchiveSheetOpen(true)}
|
|
title={t.settings.skills.badgeArchivedTitle}
|
|
>
|
|
<ArchiveIcon className="size-4" />
|
|
{t.settings.skills.entryArchived.replace(
|
|
"{count}",
|
|
String(archivedCount),
|
|
)}
|
|
</Button>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => {
|
|
onClose?.();
|
|
router.push("/page/workspace/skills/evolution");
|
|
}}
|
|
>
|
|
<TrendingUpIcon className="size-4" />
|
|
{t.settings.skills.goToEvolution}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => void handleRescan()}
|
|
disabled={
|
|
reconcileMutation.isPending ||
|
|
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
|
|
}
|
|
title={t.settings.skills.rescanSkills}
|
|
>
|
|
{reconcileMutation.isPending ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<RefreshCwIcon className="size-4" />
|
|
)}
|
|
{reconcileMutation.isPending
|
|
? t.settings.skills.rescanSkillsRunning
|
|
: t.settings.skills.rescanSkills}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="gap-1.5 border-violet-300 bg-violet-50 font-medium text-violet-700 hover:bg-violet-100 hover:text-violet-800 dark:border-violet-500/40 dark:bg-violet-500/15 dark:text-violet-300 dark:hover:bg-violet-500/25"
|
|
onClick={() => void handleFillNames()}
|
|
disabled={
|
|
fillNamesMutation.isPending ||
|
|
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
|
|
}
|
|
title="用大模型为所有尚未配置中文名称的技能自动生成中文名"
|
|
>
|
|
{fillNamesMutation.isPending ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<SparklesIcon className="size-4" />
|
|
)}
|
|
{fillNamesMutation.isPending ? "补充中…" : "一键补充中文名"}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setInstallOpen(true)}
|
|
disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"}
|
|
>
|
|
<Upload className="size-4" />
|
|
{t.settings.skills.installSkill}
|
|
</Button>
|
|
</div>
|
|
</header>
|
|
<TagSearchBar
|
|
targetType="skill"
|
|
onSearchChange={setSearch}
|
|
tagIds={tagIds}
|
|
onTagIdsChange={setTagIds}
|
|
actions={
|
|
<div className="flex items-center gap-2">
|
|
<ViewModeToggle value={viewMode} onChange={setViewMode} />
|
|
<Select value={sort} onValueChange={(v) => setSort(v as SkillSort)}>
|
|
<SelectTrigger
|
|
className="h-9 w-full gap-2 px-3 text-xs sm:w-[148px]"
|
|
title="排序"
|
|
>
|
|
<ArrowDownUpIcon className="text-muted-foreground size-3.5" />
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent position="popper" side="bottom" sideOffset={4}>
|
|
<SelectItem value="time_desc">最新创建</SelectItem>
|
|
<SelectItem value="time_asc">最早创建</SelectItem>
|
|
<SelectItem value="activity_desc">最近使用</SelectItem>
|
|
<SelectItem value="activity_asc">最早使用</SelectItem>
|
|
<SelectItem value="usage_desc">使用最多</SelectItem>
|
|
<SelectItem value="usage_asc">使用最少</SelectItem>
|
|
<SelectItem value="name_asc">名称 A-Z</SelectItem>
|
|
<SelectItem value="name_desc">名称 Z-A</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
}
|
|
/>
|
|
{publisher && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground text-xs">筛选发布者：</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPublisher(null)}
|
|
className="bg-primary/10 text-primary hover:bg-primary/20 inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-colors"
|
|
title="点击清除发布者筛选"
|
|
>
|
|
{publisher.label}
|
|
<XIcon className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
{isLoading && (
|
|
<div className="text-muted-foreground text-sm">{t.common.loading}</div>
|
|
)}
|
|
{error && <div className="text-destructive text-sm">Error: {error.message}</div>}
|
|
{!isLoading && !error && filteredSkills.length === 0 && (
|
|
<EmptySkill />
|
|
)}
|
|
{!isLoading && !error && filteredSkills.length > 0 && (
|
|
<div
|
|
className={cn(
|
|
viewMode === "card"
|
|
? "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3"
|
|
: "flex flex-col gap-3",
|
|
)}
|
|
>
|
|
{pagedSkills.map((skill) => (
|
|
<SkillRow
|
|
key={skill.name}
|
|
skill={skill}
|
|
currentUserId={currentUserId}
|
|
isAdmin={isAdmin}
|
|
layout={viewMode === "card" ? "card" : "row"}
|
|
onPublisherClick={setPublisher}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
{!isLoading && !error && totalPages > 1 && (
|
|
<div className="flex items-center justify-end gap-2 pt-1">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={page <= 1}
|
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
|
>
|
|
<ChevronLeftIcon className="size-4" />
|
|
{t.settings.skills.paginationPrev}
|
|
</Button>
|
|
<span className="text-muted-foreground text-xs">
|
|
{t.settings.skills.paginationPageOf
|
|
.replace("{page}", String(page))
|
|
.replace("{total}", String(totalPages))}
|
|
</span>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={page >= totalPages}
|
|
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
|
>
|
|
{t.settings.skills.paginationNext}
|
|
<ChevronRightIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
<InstallSkillDialog
|
|
open={installOpen}
|
|
onClose={() => setInstallOpen(false)}
|
|
isAdmin={isAdmin}
|
|
/>
|
|
<SkillStateSheet
|
|
kind="stale"
|
|
open={staleSheetOpen}
|
|
onOpenChange={setStaleSheetOpen}
|
|
skills={staleVisible}
|
|
/>
|
|
<SkillStateSheet
|
|
kind="archived"
|
|
open={archiveSheetOpen}
|
|
onOpenChange={setArchiveSheetOpen}
|
|
skills={archivedVisible}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SkillRow({
|
|
skill,
|
|
currentUserId,
|
|
isAdmin,
|
|
layout = "row",
|
|
onPublisherClick,
|
|
}: {
|
|
skill: Skill;
|
|
currentUserId: string | null;
|
|
isAdmin: boolean;
|
|
/** "row" = full-width horizontal item (default); "card" = grid card cell. */
|
|
layout?: "row" | "card";
|
|
/** Click the 发布者 line to filter the list to that publisher. Receives the
|
|
* owner_user_id + its desensitized display label. */
|
|
onPublisherClick?: (publisher: { id: string; label: string }) => void;
|
|
}) {
|
|
const isCard = layout === "card";
|
|
const { t } = useI18n();
|
|
const setPublished = useSetSkillPublished();
|
|
const setPinned = useSetSkillPinned();
|
|
const setFeatured = useSetSkillFeatured();
|
|
const deleteSkill = useDeleteCustomSkill();
|
|
const duplicateSkillMutation = useDuplicateSkill();
|
|
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
|
|
const [tagPickerOpen, setTagPickerOpen] = useState(false);
|
|
const [detailOpen, setDetailOpen] = useState(false);
|
|
const [duplicateOpen, setDuplicateOpen] = useState(false);
|
|
const [duplicateName, setDuplicateName] = useState("");
|
|
|
|
const isCustom = skill.category === "custom";
|
|
// Built-in flag falls back to "no DB owner" so legacy responses without
|
|
// the multitenancy fields still classify public skills correctly.
|
|
const isBuiltin = skill.builtin ?? !skill.owner_user_id;
|
|
const isOwned =
|
|
isCustom && !isBuiltin && !!skill.owner_user_id && skill.owner_user_id === currentUserId;
|
|
const isFromOthers = isCustom && !isBuiltin && !isOwned;
|
|
// Admin can edit/delete/unpublish anyone's skill; non-admin only their own.
|
|
const canManage = isCustom && (isOwned || isAdmin);
|
|
const canTogglePublish = canManage && !isBuiltin;
|
|
|
|
async function handleTogglePublished(next: boolean) {
|
|
try {
|
|
await setPublished.mutateAsync({ skillName: skill.name, published: next });
|
|
toast.success(
|
|
next
|
|
? t.settings.skills.publishSuccess
|
|
: t.settings.skills.unpublishSuccess,
|
|
);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
async function handleDelete() {
|
|
try {
|
|
await deleteSkill.mutateAsync(skill.name);
|
|
toast.success(t.settings.skills.deleteSuccess);
|
|
setConfirmDeleteOpen(false);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
function handleOpenDuplicate() {
|
|
// Suggest a "<name>-copy" default that already satisfies the backend's
|
|
// lowercase/digit/-/_ skill-name rule. The user can edit it before saving.
|
|
setDuplicateName(`${skill.name}-copy`);
|
|
setDuplicateOpen(true);
|
|
}
|
|
|
|
async function handleDuplicate() {
|
|
const target = duplicateName.trim();
|
|
if (!target) {
|
|
toast.error("请输入新技能名称");
|
|
return;
|
|
}
|
|
try {
|
|
const result = await duplicateSkillMutation.mutateAsync({
|
|
sourceName: skill.name,
|
|
newName: target,
|
|
});
|
|
toast.success(`已复制为「${result.skill_name}」`);
|
|
setDuplicateOpen(false);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
async function handleTogglePinned() {
|
|
const next = !skill.pinned;
|
|
try {
|
|
await setPinned.mutateAsync({ skillName: skill.name, pinned: next });
|
|
toast.success(
|
|
next ? t.settings.skills.pinSuccess : t.settings.skills.unpinSuccess,
|
|
);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
async function handleToggleFeatured() {
|
|
const next = !skill.featured;
|
|
try {
|
|
await setFeatured.mutateAsync({ skillName: skill.name, featured: next });
|
|
toast.success(
|
|
next
|
|
? t.settings.skills.featureSuccess
|
|
: t.settings.skills.unfeatureSuccess,
|
|
);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
const badgeGroup = (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className={cn(isCard && "truncate font-medium")}>
|
|
{skill.name_zh?.trim() ? skill.name_zh : desensitize(skill.name)}
|
|
</span>
|
|
{skill.name_zh?.trim() && (
|
|
<span className="text-muted-foreground truncate text-xs font-normal">
|
|
{desensitize(skill.name)}
|
|
</span>
|
|
)}
|
|
{isBuiltin && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
{t.settings.skills.badgeBuiltin}
|
|
</Badge>
|
|
)}
|
|
{isOwned && (
|
|
<Badge
|
|
variant="default"
|
|
className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
|
|
>
|
|
{t.settings.skills.badgeMine}
|
|
</Badge>
|
|
)}
|
|
{isFromOthers && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
|
|
title={
|
|
skill.owner_user_id
|
|
? t.settings.skills.badgeFromOthersTitle.replace(
|
|
"{user_id}",
|
|
skill.owner_user_id,
|
|
)
|
|
: undefined
|
|
}
|
|
>
|
|
{t.settings.skills.badgeFromOthers}
|
|
</Badge>
|
|
)}
|
|
{isOwned && skill.published && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
|
|
title={t.settings.skills.badgePublishedTitle}
|
|
>
|
|
<GlobeIcon className="size-3" />
|
|
{t.settings.skills.badgePublished}
|
|
</Badge>
|
|
)}
|
|
{isCustom && !isBuiltin && skill.source === "agent" && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-cyan-500/30 text-cyan-700 dark:text-cyan-300 text-xs"
|
|
title={t.settings.skills.badgeSourceAgentTitle}
|
|
>
|
|
{t.settings.skills.badgeSourceAgent}
|
|
</Badge>
|
|
)}
|
|
{isCustom && !isBuiltin && skill.source === "upload" && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-zinc-400/40 text-zinc-600 dark:text-zinc-400 text-xs"
|
|
title={t.settings.skills.badgeSourceUploadTitle}
|
|
>
|
|
{t.settings.skills.badgeSourceUpload}
|
|
</Badge>
|
|
)}
|
|
{skill.featured && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-amber-500/30 text-amber-700 dark:text-amber-300 text-xs"
|
|
title={t.settings.skills.badgeFeaturedTitle}
|
|
>
|
|
{t.settings.skills.badgeFeatured}
|
|
</Badge>
|
|
)}
|
|
{skill.pinned && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-purple-500/30 text-purple-700 dark:text-purple-300 text-xs"
|
|
title={t.settings.skills.badgePinnedTitle}
|
|
>
|
|
{t.settings.skills.badgePinned}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
const metaNodes = (
|
|
<>
|
|
{!isBuiltin && skill.owner_username && (
|
|
<button
|
|
type="button"
|
|
disabled={!skill.owner_user_id || !onPublisherClick}
|
|
onClick={(e) => {
|
|
if (!skill.owner_user_id || !onPublisherClick) return;
|
|
e.stopPropagation();
|
|
onPublisherClick({
|
|
id: skill.owner_user_id,
|
|
label: desensitize(skill.owner_username!),
|
|
});
|
|
}}
|
|
className={cn(
|
|
"text-muted-foreground mt-1 flex max-w-full items-center gap-1 text-sm font-medium",
|
|
skill.owner_user_id && onPublisherClick &&
|
|
"hover:text-primary cursor-pointer transition-colors hover:underline",
|
|
)}
|
|
title={
|
|
skill.owner_user_id && onPublisherClick
|
|
? `点击筛选发布者：${desensitize(skill.owner_username)}`
|
|
: `发布者：${desensitize(skill.owner_username)}`
|
|
}
|
|
>
|
|
<UserIcon className="size-3.5 shrink-0" />
|
|
<span className="truncate">发布者：{desensitize(skill.owner_username)}</span>
|
|
</button>
|
|
)}
|
|
{skill.use_count !== undefined && (
|
|
<div className="text-muted-foreground mt-1 text-xs">
|
|
{skill.use_count > 0
|
|
? t.settings.skills.useCountInline.replace(
|
|
"{count}",
|
|
String(skill.use_count),
|
|
)
|
|
: t.settings.skills.useCountInlineZero}
|
|
</div>
|
|
)}
|
|
{(skill.tags?.length ?? 0) > 0 && (
|
|
<TagChipList tags={skill.tags!} className="mt-2" />
|
|
)}
|
|
</>
|
|
);
|
|
|
|
const actionButtons = (
|
|
<>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-8 w-8 shrink-0"
|
|
onClick={() => setTagPickerOpen(true)}
|
|
title={t.adminTags.manageTags}
|
|
>
|
|
<TagsIcon className="size-3.5" />
|
|
</Button>
|
|
{canManage && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className={cn(
|
|
"h-8 w-8 shrink-0",
|
|
skill.featured && "text-amber-600 hover:text-amber-700",
|
|
)}
|
|
disabled={setFeatured.isPending}
|
|
onClick={() => void handleToggleFeatured()}
|
|
title={
|
|
skill.featured
|
|
? t.settings.skills.unfeatureAction
|
|
: t.settings.skills.featureAction
|
|
}
|
|
>
|
|
<PinIcon
|
|
className={cn("size-3.5", skill.featured && "fill-current")}
|
|
/>
|
|
</Button>
|
|
)}
|
|
{canManage && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className={cn(
|
|
"h-8 w-8 shrink-0",
|
|
skill.pinned && "text-emerald-600 hover:text-emerald-700",
|
|
)}
|
|
disabled={setPinned.isPending}
|
|
onClick={() => void handleTogglePinned()}
|
|
title={
|
|
skill.pinned
|
|
? t.settings.skills.unpinAction
|
|
: t.settings.skills.pinAction
|
|
}
|
|
>
|
|
<BookmarkIcon
|
|
className={cn("size-3.5", skill.pinned && "fill-current")}
|
|
/>
|
|
</Button>
|
|
)}
|
|
{canTogglePublish && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-8 w-8 shrink-0"
|
|
disabled={setPublished.isPending}
|
|
onClick={() => void handleTogglePublished(!skill.published)}
|
|
title={
|
|
skill.published
|
|
? t.settings.skills.unpublishAction
|
|
: t.settings.skills.publishAction
|
|
}
|
|
>
|
|
{skill.published ? (
|
|
<LockIcon className="size-3.5" />
|
|
) : (
|
|
<GlobeIcon className="size-3.5" />
|
|
)}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-8 w-8 shrink-0"
|
|
disabled={duplicateSkillMutation.isPending}
|
|
onClick={handleOpenDuplicate}
|
|
title="复制为新技能"
|
|
>
|
|
<CopyIcon className="size-3.5" />
|
|
</Button>
|
|
{canManage && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
|
|
onClick={() => setConfirmDeleteOpen(true)}
|
|
title={t.settings.skills.deleteAction}
|
|
>
|
|
<Trash2Icon className="size-3.5" />
|
|
</Button>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{isCard ? (
|
|
<div className="flex h-full min-w-0 flex-col rounded-lg border p-3 transition-shadow hover:shadow-sm dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
|
|
<div
|
|
className="min-w-0 flex-1 cursor-pointer"
|
|
onClick={() => setDetailOpen(true)}
|
|
>
|
|
{badgeGroup}
|
|
<p className="text-muted-foreground mt-1 line-clamp-3 text-sm">
|
|
{desensitize(skill.description ?? "")}
|
|
</p>
|
|
{metaNodes}
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap items-center justify-end gap-1 border-t pt-2 dark:border-[#213D5E]">
|
|
{actionButtons}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Item className="w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white" variant="outline">
|
|
<ItemContent
|
|
className="cursor-pointer"
|
|
onClick={() => setDetailOpen(true)}
|
|
>
|
|
<ItemTitle>{badgeGroup}</ItemTitle>
|
|
<ItemDescription className="line-clamp-4">
|
|
{desensitize(skill.description ?? "")}
|
|
</ItemDescription>
|
|
{metaNodes}
|
|
</ItemContent>
|
|
<ItemActions>{actionButtons}</ItemActions>
|
|
</Item>
|
|
)}
|
|
<Dialog open={duplicateOpen} onOpenChange={setDuplicateOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>复制技能</DialogTitle>
|
|
<DialogDescription>
|
|
将「{desensitize(skill.name)}」复制为一个属于你的新技能。请输入新名称（仅小写字母、数字、- 或 _）。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<Input
|
|
value={duplicateName}
|
|
onChange={(e) => setDuplicateName(e.currentTarget.value)}
|
|
placeholder="new-skill-name"
|
|
autoFocus
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
void handleDuplicate();
|
|
}
|
|
}}
|
|
/>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setDuplicateOpen(false)}
|
|
disabled={duplicateSkillMutation.isPending}
|
|
>
|
|
{t.common.cancel}
|
|
</Button>
|
|
<Button
|
|
onClick={() => void handleDuplicate()}
|
|
disabled={duplicateSkillMutation.isPending}
|
|
>
|
|
{duplicateSkillMutation.isPending ? t.common.loading : "复制"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<Dialog open={confirmDeleteOpen} onOpenChange={setConfirmDeleteOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{t.settings.skills.deleteAction}</DialogTitle>
|
|
<DialogDescription>
|
|
{desensitize(
|
|
t.settings.skills.deleteConfirm.replace("{name}", skill.name),
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setConfirmDeleteOpen(false)}
|
|
disabled={deleteSkill.isPending}
|
|
>
|
|
{t.common.cancel}
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => void handleDelete()}
|
|
disabled={deleteSkill.isPending}
|
|
>
|
|
{deleteSkill.isPending ? t.common.loading : t.common.delete}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<TagPickerDialog
|
|
open={tagPickerOpen}
|
|
onOpenChange={setTagPickerOpen}
|
|
targetType="skill"
|
|
targetId={skill.name}
|
|
currentTags={skill.tags ?? []}
|
|
/>
|
|
<SkillDetailDialog
|
|
skillName={skill.name}
|
|
open={detailOpen}
|
|
onOpenChange={setDetailOpen}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function EmptySkill() {
|
|
const { t } = useI18n();
|
|
return (
|
|
<Empty>
|
|
<EmptyHeader>
|
|
<EmptyMedia variant="icon">
|
|
<SparklesIcon />
|
|
</EmptyMedia>
|
|
<EmptyTitle>{t.settings.skills.emptyTitle}</EmptyTitle>
|
|
<EmptyDescription>
|
|
{t.settings.skills.emptyDescription}
|
|
</EmptyDescription>
|
|
</EmptyHeader>
|
|
</Empty>
|
|
);
|
|
}
|
|
|
|
function InstallSkillDialog({
|
|
open,
|
|
onClose,
|
|
isAdmin,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
isAdmin: boolean;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const dialog = t.settings.skills.installDialog;
|
|
const inputRef = useRef<HTMLInputElement | null>(null);
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [validation, setValidation] = useState<ValidateSkillUploadResponse | null>(null);
|
|
const [validationError, setValidationError] = useState<string | null>(null);
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [targetCategory, setTargetCategory] = useState<"custom" | "public">("custom");
|
|
const validateMutation = useValidateSkillUpload();
|
|
const installMutation = useInstallSkillUpload();
|
|
|
|
const reset = useCallback(() => {
|
|
setFile(null);
|
|
setValidation(null);
|
|
setValidationError(null);
|
|
setIsDragging(false);
|
|
setTargetCategory("custom");
|
|
if (inputRef.current) inputRef.current.value = "";
|
|
}, []);
|
|
|
|
const handleClose = useCallback(() => {
|
|
if (validateMutation.isPending || installMutation.isPending) return;
|
|
reset();
|
|
onClose();
|
|
}, [installMutation.isPending, onClose, reset, validateMutation.isPending]);
|
|
|
|
const acceptFile = useCallback(
|
|
async (selected: File) => {
|
|
const lower = selected.name.toLowerCase();
|
|
if (!lower.endsWith(".zip") && !lower.endsWith(".skill")) {
|
|
toast.error(dialog.rejectInvalidExt);
|
|
return;
|
|
}
|
|
setFile(selected);
|
|
setValidation(null);
|
|
setValidationError(null);
|
|
try {
|
|
const result = await validateMutation.mutateAsync(selected);
|
|
setValidation(result);
|
|
} catch (err) {
|
|
setValidationError(err instanceof Error ? err.message : String(err));
|
|
}
|
|
},
|
|
[dialog.rejectInvalidExt, validateMutation],
|
|
);
|
|
|
|
const onDrop = useCallback(
|
|
(e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
// Stop the global chat-upload listener on `document` from also receiving this drop.
|
|
// React's stopPropagation alone doesn't reach native document listeners — we need to
|
|
// halt the underlying DOM event too.
|
|
e.stopPropagation();
|
|
e.nativeEvent.stopImmediatePropagation();
|
|
setIsDragging(false);
|
|
const dropped = e.dataTransfer.files?.[0];
|
|
if (dropped) void acceptFile(dropped);
|
|
},
|
|
[acceptFile],
|
|
);
|
|
|
|
const onPick = useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const picked = e.target.files?.[0];
|
|
if (picked) void acceptFile(picked);
|
|
},
|
|
[acceptFile],
|
|
);
|
|
|
|
const handleInstall = useCallback(
|
|
async (overwrite: boolean) => {
|
|
if (!file) return;
|
|
try {
|
|
const result = await installMutation.mutateAsync({ file, overwrite, targetCategory });
|
|
toast.success(
|
|
(result.overwritten ? dialog.installSuccessReplaced : dialog.installSuccess).replace(
|
|
"{name}",
|
|
result.skill_name,
|
|
),
|
|
);
|
|
reset();
|
|
onClose();
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
},
|
|
[dialog.installSuccess, dialog.installSuccessReplaced, file, installMutation, onClose, reset, targetCategory],
|
|
);
|
|
|
|
const isPublicConflict = validation?.conflict && validation.conflict_kind === "public";
|
|
const isCustomConflict = validation?.conflict && validation.conflict_kind === "custom";
|
|
// Admin targeting public directory can overwrite an existing public skill.
|
|
const adminCanOverwritePublic = isAdmin && targetCategory === "public" && !!isPublicConflict;
|
|
const canInstall = !!validation && !validationError && !isCustomConflict && (adminCanOverwritePublic ? false : !isPublicConflict);
|
|
const canOverwrite = !!validation && !validationError && (!!isCustomConflict || adminCanOverwritePublic);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(o) => !o && handleClose()}>
|
|
<DialogContent className="max-w-xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{dialog.title}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="flex flex-col gap-4">
|
|
<div
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.nativeEvent.stopImmediatePropagation();
|
|
setIsDragging(true);
|
|
}}
|
|
onDragLeave={() => setIsDragging(false)}
|
|
onDrop={onDrop}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 text-center transition-colors",
|
|
isDragging ? "border-primary bg-accent/40" : "border-muted-foreground/30",
|
|
)}
|
|
>
|
|
<FileArchive className="text-muted-foreground size-8" />
|
|
<div className="text-muted-foreground text-sm">
|
|
{dialog.dropHint}
|
|
<button
|
|
type="button"
|
|
className="text-primary ml-1 underline underline-offset-4"
|
|
onClick={() => inputRef.current?.click()}
|
|
>
|
|
{dialog.chooseFile}
|
|
</button>
|
|
</div>
|
|
{file && (
|
|
<div className="text-muted-foreground mt-1 text-xs">
|
|
{file.name} · {(file.size / 1024).toFixed(1)} KB
|
|
</div>
|
|
)}
|
|
<input
|
|
ref={inputRef}
|
|
type="file"
|
|
accept=".zip,.skill,application/zip"
|
|
hidden
|
|
onChange={onPick}
|
|
/>
|
|
</div>
|
|
|
|
{isAdmin && (
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<span className="text-muted-foreground shrink-0">{dialog.targetCategoryLabel}</span>
|
|
<div className="flex gap-4">
|
|
{(["custom", "public"] as const).map((cat) => (
|
|
<label key={cat} className="flex cursor-pointer items-center gap-1.5">
|
|
<input
|
|
type="radio"
|
|
name="targetCategory"
|
|
value={cat}
|
|
checked={targetCategory === cat}
|
|
onChange={() => setTargetCategory(cat)}
|
|
className="accent-primary"
|
|
/>
|
|
<span>{cat === "custom" ? dialog.categoryCustom : dialog.categoryPublic}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{validateMutation.isPending && (
|
|
<div className="text-muted-foreground flex items-center gap-2 text-sm">
|
|
<Loader2 className="size-4 animate-spin" />
|
|
{dialog.validating}
|
|
</div>
|
|
)}
|
|
|
|
{validationError && (
|
|
<div className="text-destructive flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm">
|
|
<AlertCircle className="mt-0.5 size-4 shrink-0" />
|
|
<span>{validationError}</span>
|
|
</div>
|
|
)}
|
|
|
|
{validation && !validationError && (
|
|
<div className="flex flex-col gap-2 rounded-md border p-3 text-sm">
|
|
<div className="flex items-center gap-2 text-emerald-600">
|
|
<CheckCircle2 className="size-4" />
|
|
<span className="font-medium">{desensitize(validation.skill_name)}</span>
|
|
</div>
|
|
<Field label={dialog.descriptionLabel}>
|
|
<span className="line-clamp-3 whitespace-pre-wrap">
|
|
{validation.description ? desensitize(validation.description) : "—"}
|
|
</span>
|
|
</Field>
|
|
{validation.license && (
|
|
<Field label={dialog.licenseLabel}>{desensitize(validation.license)}</Field>
|
|
)}
|
|
{validation.allowed_tools.length > 0 && (
|
|
<Field label={dialog.toolsLabel}>
|
|
<div className="flex flex-wrap gap-1">
|
|
{validation.allowed_tools.map((tool) => (
|
|
<Badge key={tool} variant="secondary" className="text-xs">
|
|
{desensitize(tool)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</Field>
|
|
)}
|
|
{validation.warnings.length > 0 && (
|
|
<Field label={dialog.warningsLabel}>
|
|
<ul className="list-disc pl-4 text-xs">
|
|
{validation.warnings.map((w, idx) => (
|
|
<li key={idx}>{desensitize(w)}</li>
|
|
))}
|
|
</ul>
|
|
</Field>
|
|
)}
|
|
{isCustomConflict && (
|
|
<div className="text-amber-600 mt-1 flex items-start gap-2 text-xs">
|
|
<AlertCircle className="mt-0.5 size-3.5 shrink-0" />
|
|
<span>
|
|
{desensitize(
|
|
dialog.conflictCustom.replace("{name}", validation.skill_name),
|
|
)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{isPublicConflict && (
|
|
<div className={cn("mt-1 flex items-start gap-2 text-xs", adminCanOverwritePublic ? "text-amber-600" : "text-destructive")}>
|
|
<AlertCircle className="mt-0.5 size-3.5 shrink-0" />
|
|
<span>
|
|
{desensitize(
|
|
(adminCanOverwritePublic ? dialog.conflictPublicAdminHint : dialog.conflictPublic).replace("{name}", validation.skill_name),
|
|
)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleClose}
|
|
disabled={installMutation.isPending}
|
|
>
|
|
{dialog.cancel}
|
|
</Button>
|
|
{canOverwrite && (
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => handleInstall(true)}
|
|
disabled={installMutation.isPending}
|
|
>
|
|
{installMutation.isPending && (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
)}
|
|
{dialog.replace}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
onClick={() => handleInstall(false)}
|
|
disabled={!canInstall || installMutation.isPending}
|
|
>
|
|
{installMutation.isPending && (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
)}
|
|
{installMutation.isPending ? dialog.installing : dialog.install}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function Field({
|
|
label,
|
|
children,
|
|
}: {
|
|
label: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="grid grid-cols-[80px_1fr] gap-2">
|
|
<span className="text-muted-foreground shrink-0 text-xs">{label}</span>
|
|
<div className="min-w-0">{children}</div>
|
|
</div>
|
|
);
|
|
}
|