Support delete custom model (#136)
This commit is contained in:
Will Chen
@@ -1,10 +1,21 @@
|
||||
import { useState } from "react";
|
||||
import { AlertTriangle, PlusIcon } from "lucide-react";
|
||||
import { AlertTriangle, PlusIcon, TrashIcon } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { CreateCustomModelDialog } from "@/components/CreateCustomModelDialog";
|
||||
import { useLanguageModelsForProvider } from "@/hooks/useLanguageModelsForProvider"; // Use the hook directly here
|
||||
import { useDeleteCustomModel } from "@/hooks/useDeleteCustomModel"; // Import the new hook
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
|
||||
interface ModelsSectionProps {
|
||||
providerId: string;
|
||||
@@ -12,6 +23,9 @@ interface ModelsSectionProps {
|
||||
|
||||
export function ModelsSection({ providerId }: ModelsSectionProps) {
|
||||
const [isCustomModelDialogOpen, setIsCustomModelDialogOpen] = useState(false);
|
||||
const [isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen] =
|
||||
useState(false);
|
||||
const [modelToDelete, setModelToDelete] = useState<string | null>(null);
|
||||
|
||||
// Fetch custom models within this component now
|
||||
const {
|
||||
@@ -21,6 +35,30 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
|
||||
refetch: refetchModels,
|
||||
} = useLanguageModelsForProvider(providerId);
|
||||
|
||||
const { mutate: deleteModel, isPending: isDeleting } = useDeleteCustomModel({
|
||||
onSuccess: () => {
|
||||
refetchModels(); // Refetch models list after successful deletion
|
||||
// Optionally show a success toast here
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
// Optionally show an error toast here
|
||||
console.error("Failed to delete model:", error);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDeleteClick = (modelApiName: string) => {
|
||||
setModelToDelete(modelApiName);
|
||||
setIsConfirmDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirmDelete = () => {
|
||||
if (modelToDelete) {
|
||||
deleteModel({ providerId, modelApiName: modelToDelete });
|
||||
setModelToDelete(null);
|
||||
}
|
||||
setIsConfirmDeleteDialogOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-8 border-t pt-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">Models</h2>
|
||||
@@ -53,7 +91,17 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
|
||||
<h4 className="text-lg font-semibold text-gray-800 dark:text-gray-100">
|
||||
{model.displayName}
|
||||
</h4>
|
||||
{/* Optional: Add an edit/delete button here later */}
|
||||
{model.type === "custom" && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteClick(model.apiName)}
|
||||
disabled={isDeleting}
|
||||
className="text-red-500 hover:text-red-700 hover:bg-red-100 dark:hover:bg-red-900/50 h-8 w-8"
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 italic">
|
||||
{model.apiName}
|
||||
@@ -75,11 +123,17 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{model.tag && (
|
||||
<div className="flex flex-wrap gap-x-2">
|
||||
<span className="mt-2 inline-block bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300">
|
||||
{model.tag}
|
||||
{model.type === "cloud" ? "Built-in" : "Custom"}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{model.tag && (
|
||||
<span className="mt-2 inline-block bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300">
|
||||
{model.tag}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -109,6 +163,39 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
|
||||
}}
|
||||
providerId={providerId}
|
||||
/>
|
||||
|
||||
<AlertDialog
|
||||
open={isConfirmDeleteDialogOpen}
|
||||
onOpenChange={setIsConfirmDeleteDialogOpen}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
Are you sure you want to delete this model?
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This action cannot be undone. This will permanently delete the
|
||||
custom model "
|
||||
{modelToDelete
|
||||
? models?.find((m) => m.apiName === modelToDelete)
|
||||
?.displayName || modelToDelete
|
||||
: ""}
|
||||
" (API Name: {modelToDelete}).
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setModelToDelete(null)}>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleConfirmDelete}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
>
|
||||
{isDeleting ? "Deleting..." : "Yes, delete it"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
155
src/components/ui/alert-dialog.tsx
Normal file
155
src/components/ui/alert-dialog.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
import * as React from "react";
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
|
||||
function AlertDialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
|
||||
}
|
||||
|
||||
function AlertDialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
data-slot="alert-dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
||||
return (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
data-slot="alert-dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogFooter({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Title
|
||||
data-slot="alert-dialog-title"
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Description
|
||||
data-slot="alert-dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogAction({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Action
|
||||
className={cn(buttonVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogCancel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
className={cn(buttonVariants({ variant: "outline" }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
};
|
||||
49
src/hooks/useDeleteCustomModel.ts
Normal file
49
src/hooks/useDeleteCustomModel.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { IpcClient } from "@/ipc/ipc_client";
|
||||
|
||||
interface DeleteCustomModelParams {
|
||||
providerId: string;
|
||||
modelApiName: string;
|
||||
}
|
||||
|
||||
export function useDeleteCustomModel({
|
||||
onSuccess,
|
||||
onError,
|
||||
}: {
|
||||
onSuccess?: () => void;
|
||||
onError?: (error: Error) => void;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mutation = useMutation<void, Error, DeleteCustomModelParams>({
|
||||
mutationFn: async (params: DeleteCustomModelParams) => {
|
||||
if (!params.providerId || !params.modelApiName) {
|
||||
throw new Error(
|
||||
"Provider ID and Model API Name are required for deletion.",
|
||||
);
|
||||
}
|
||||
const ipcClient = IpcClient.getInstance();
|
||||
// This method will be added to IpcClient next
|
||||
await ipcClient.deleteCustomModel(params);
|
||||
},
|
||||
onSuccess: (data, params: DeleteCustomModelParams) => {
|
||||
// Invalidate queries related to language models for the specific provider
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["language-models", params.providerId],
|
||||
});
|
||||
// Invalidate general model list if needed
|
||||
queryClient.invalidateQueries({ queryKey: ["languageModels"] });
|
||||
onSuccess?.();
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error("Error deleting custom model:", error);
|
||||
onError?.(error);
|
||||
},
|
||||
meta: {
|
||||
// Optional: for global error handling like toasts
|
||||
showErrorToast: true,
|
||||
},
|
||||
});
|
||||
|
||||
return mutation;
|
||||
}
|
||||
@@ -12,10 +12,11 @@ import {
|
||||
} from "../shared/language_model_helpers";
|
||||
import { db } from "@/db";
|
||||
import {
|
||||
language_models,
|
||||
language_model_providers as languageModelProvidersSchema,
|
||||
language_models as languageModelsSchema,
|
||||
} from "@/db/schema";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { and, eq } from "drizzle-orm";
|
||||
import { IpcMainInvokeEvent } from "electron";
|
||||
|
||||
const logger = log.scope("language_model_handlers");
|
||||
@@ -129,6 +130,80 @@ export function registerLanguageModelHandlers() {
|
||||
},
|
||||
);
|
||||
|
||||
handle(
|
||||
"delete-custom-language-model",
|
||||
async (
|
||||
event: IpcMainInvokeEvent,
|
||||
params: { modelId: string },
|
||||
): Promise<void> => {
|
||||
const { modelId: apiName } = params;
|
||||
|
||||
// Validation
|
||||
if (!apiName) {
|
||||
throw new Error("Model API name (modelId) is required");
|
||||
}
|
||||
|
||||
logger.info(
|
||||
`Handling delete-custom-language-model for apiName: ${apiName}`,
|
||||
);
|
||||
|
||||
const existingModel = await db
|
||||
.select()
|
||||
.from(languageModelsSchema)
|
||||
.where(eq(languageModelsSchema.apiName, apiName))
|
||||
.get();
|
||||
|
||||
if (!existingModel) {
|
||||
throw new Error(
|
||||
`A model with API name (modelId) "${apiName}" was not found`,
|
||||
);
|
||||
}
|
||||
|
||||
await db
|
||||
.delete(languageModelsSchema)
|
||||
.where(eq(languageModelsSchema.apiName, apiName));
|
||||
},
|
||||
);
|
||||
|
||||
handle(
|
||||
"delete-custom-model",
|
||||
async (
|
||||
_event: IpcMainInvokeEvent,
|
||||
params: { providerId: string; modelApiName: string },
|
||||
): Promise<void> => {
|
||||
const { providerId, modelApiName } = params;
|
||||
logger.info(
|
||||
`Handling delete-custom-model for ${providerId} / ${modelApiName}`,
|
||||
);
|
||||
if (!providerId || !modelApiName) {
|
||||
throw new Error("Provider ID and Model API Name are required.");
|
||||
}
|
||||
logger.info(
|
||||
`Attempting to delete custom model ${modelApiName} for provider ${providerId}`,
|
||||
);
|
||||
|
||||
const result = db
|
||||
.delete(language_models)
|
||||
.where(
|
||||
and(
|
||||
eq(language_models.provider_id, providerId),
|
||||
eq(language_models.apiName, modelApiName),
|
||||
),
|
||||
)
|
||||
.run();
|
||||
|
||||
if (result.changes === 0) {
|
||||
logger.warn(
|
||||
`No custom model found matching providerId=${providerId} and apiName=${modelApiName} for deletion.`,
|
||||
);
|
||||
} else {
|
||||
logger.info(
|
||||
`Successfully deleted ${result.changes} custom model(s) with apiName=${modelApiName} for provider=${providerId}`,
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
handle(
|
||||
"get-language-models",
|
||||
async (
|
||||
|
||||
@@ -58,6 +58,11 @@ export interface DeepLinkData {
|
||||
url?: string;
|
||||
}
|
||||
|
||||
interface DeleteCustomModelParams {
|
||||
providerId: string;
|
||||
modelApiName: string;
|
||||
}
|
||||
|
||||
export class IpcClient {
|
||||
private static instance: IpcClient;
|
||||
private ipcRenderer: IpcRenderer;
|
||||
@@ -761,5 +766,17 @@ export class IpcClient {
|
||||
await this.ipcRenderer.invoke("create-custom-language-model", params);
|
||||
}
|
||||
|
||||
public async deleteCustomLanguageModel(modelId: string): Promise<void> {
|
||||
return this.ipcRenderer.invoke("delete-custom-language-model", modelId);
|
||||
}
|
||||
|
||||
async deleteCustomModel(params: DeleteCustomModelParams): Promise<void> {
|
||||
return this.ipcRenderer.invoke("delete-custom-model", params);
|
||||
}
|
||||
|
||||
// --- End window control methods ---
|
||||
|
||||
// --- Language Model Operations ---
|
||||
|
||||
// --- App Operations ---
|
||||
}
|
||||
|
||||
@@ -9,6 +9,8 @@ const validInvokeChannels = [
|
||||
"create-custom-language-model",
|
||||
"get-language-model-providers",
|
||||
"create-custom-language-model-provider",
|
||||
"delete-custom-language-model",
|
||||
"delete-custom-model",
|
||||
"chat:add-dep",
|
||||
"chat:message",
|
||||
"chat:cancel",
|
||||
|
||||
Reference in New Issue
Block a user