kunthawat/moreminimore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add edit functionality for custom AI providers (#1232) (#1171) (#1250)

Browse Source 
## Summary
Adds the ability to edit existing custom AI providers through the
settings UI.

## Changes Made
- **UI Changes:**
  - Added "Edit Provider" button to custom provider dropdown menu
  - Modified `CreateCustomProviderDialog` to support edit mode


- **Backend Changes:**
- Implemented `editCustomLanguageModelProvider` handler in
`language_model_handlers.ts`
  - Added corresponding IPC client method
- Database transaction ensures atomicity when updating provider and
associated models


- **Testing:**
  - Added comprehensive e2e test covering edit functionality
  - Tests verify form pre-population, field updates, and UI persistence
  
  


https://github.com/user-attachments/assets/e8c8600e-4fb7-4816-be95-993ede1224d4



## Closes
Fixes #1232 and #1171
    
<!-- This is an auto-generated description by cubic. -->
---

## Summary by cubic
Adds edit support for custom language model providers in Settings. Users
can update provider ID, name, API base URL, and API key env var, with
safe backend updates that also retarget associated models if the ID
changes.

- New Features
  - Added “Edit Provider” option in the custom provider menu.
- Dialog supports edit mode with pre-filled fields, unified loading
state, and update button text.
- New IPC handler to edit providers with validation and a transaction;
updates linked models when IDs change.
- IPC client and preload channel updated; React hook exposes
editProvider mutation with cache invalidation.
  - Added e2e test covering the full edit flow.

<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Adeniji Adekunle James
2025-09-17 06:58:46 +01:00
committed by GitHub
parent decd05e764
commit 8c3fdb0ad0
7 changed files with 229 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/CreateCustomProviderDialog.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import {
Dialog,
DialogContent,
@@ -11,38 +11,73 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Loader2 } from "lucide-react";
import { useCustomLanguageModelProvider } from "@/hooks/useCustomLanguageModelProvider";
import type { LanguageModelProvider } from "@/ipc/ipc_types";
interface CreateCustomProviderDialogProps {
isOpen: boolean;
onClose: () => void;
onSuccess: () => void;
editingProvider?: LanguageModelProvider | null;
}
export function CreateCustomProviderDialog({
isOpen,
onClose,
onSuccess,
editingProvider = null,
}: CreateCustomProviderDialogProps) {
const [id, setId] = useState("");
const [name, setName] = useState("");
const [apiBaseUrl, setApiBaseUrl] = useState("");
const [envVarName, setEnvVarName] = useState("");
const [errorMessage, setErrorMessage] = useState("");
const isEditMode = Boolean(editingProvider);
const { createProvider, isCreating, error } =
const { createProvider, editProvider, isCreating, isEditing, error } =
useCustomLanguageModelProvider();
// Load provider data when editing
useEffect(() => {
if (editingProvider && isOpen) {
const cleanId = editingProvider.id?.startsWith("custom::")
? editingProvider.id.replace("custom::", "")
: editingProvider.id || "";
setId(cleanId);
setName(editingProvider.name || "");
setApiBaseUrl(editingProvider.apiBaseUrl || "");
setEnvVarName(editingProvider.envVarName || "");
} else if (!isOpen) {
// Reset form when dialog closes
setId("");
setName("");
setApiBaseUrl("");
setEnvVarName("");
setErrorMessage("");
}
}, [editingProvider, isOpen]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setErrorMessage("");
try {
await createProvider({
id: id.trim(),
name: name.trim(),
apiBaseUrl: apiBaseUrl.trim(),
envVarName: envVarName.trim() || undefined,
});
if (isEditMode && editingProvider) {
const cleanId = editingProvider.id?.startsWith("custom::")
? editingProvider.id.replace("custom::", "")
: editingProvider.id || "";
await editProvider({
id: cleanId,
name: name.trim(),
apiBaseUrl: apiBaseUrl.trim(),
envVarName: envVarName.trim() || undefined,
});
} else {
await createProvider({
id: id.trim(),
name: name.trim(),
apiBaseUrl: apiBaseUrl.trim(),
envVarName: envVarName.trim() || undefined,
});
}
// Reset form
setId("");
@@ -55,25 +90,30 @@ export function CreateCustomProviderDialog({
setErrorMessage(
error instanceof Error
? error.message
: "Failed to create custom provider",
: `Failed to ${isEditMode ? "edit" : "create"} custom provider`,
);
}
};
const handleClose = () => {
if (!isCreating) {
if (!isCreating && !isEditing) {
setErrorMessage("");
onClose();
}
};
const isLoading = isCreating || isEditing;
return (
<Dialog open={isOpen} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Add Custom Provider</DialogTitle>
<DialogTitle>
{isEditMode ? "Edit Custom Provider" : "Add Custom Provider"}
</DialogTitle>
<DialogDescription>
Connect to a custom language model provider API
{isEditMode
? "Update your custom language model provider configuration."
: "Connect to a custom language model provider API."}
</DialogDescription>
</DialogHeader>
@@ -86,7 +126,7 @@ export function CreateCustomProviderDialog({
onChange={(e) => setId(e.target.value)}
placeholder="E.g., my-provider"
required
disabled={isCreating}
disabled={isLoading || isEditMode}
/>
<p className="text-xs text-muted-foreground">
A unique identifier for this provider (no spaces).
@@ -101,7 +141,7 @@ export function CreateCustomProviderDialog({
onChange={(e) => setName(e.target.value)}
placeholder="E.g., My Provider"
required
disabled={isCreating}
disabled={isLoading}
/>
<p className="text-xs text-muted-foreground">
The name that will be displayed in the UI.
@@ -116,7 +156,7 @@ export function CreateCustomProviderDialog({
onChange={(e) => setApiBaseUrl(e.target.value)}
placeholder="E.g., https://api.example.com/v1"
required
disabled={isCreating}
disabled={isLoading}
/>
<p className="text-xs text-muted-foreground">
The base URL for the API endpoint.
@@ -130,7 +170,7 @@ export function CreateCustomProviderDialog({
value={envVarName}
onChange={(e) => setEnvVarName(e.target.value)}
placeholder="E.g., MY_PROVIDER_API_KEY"
disabled={isCreating}
disabled={isLoading}
/>
<p className="text-xs text-muted-foreground">
Environment variable name for the API key.
@@ -151,13 +191,19 @@ export function CreateCustomProviderDialog({
type="button"
variant="outline"
onClick={handleClose}
disabled={isCreating}
disabled={isLoading}
>
Cancel
</Button>
<Button type="submit" disabled={isCreating}>
{isCreating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{isCreating ? "Adding..." : "Add Provider"}
<Button type="submit" disabled={isLoading}>
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{isLoading
? isEditMode
? "Updating..."
: "Adding..."
: isEditMode
? "Update Provider"
: "Add Provider"}
</Button>
</div>
</form>

29
src/components/ProviderSettings.tsx
View File

@@ -10,7 +10,7 @@ import type { LanguageModelProvider } from "@/ipc/ipc_types";
import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
import { useCustomLanguageModelProvider } from "@/hooks/useCustomLanguageModelProvider";
import { GiftIcon, PlusIcon, MoreVertical, Trash2 } from "lucide-react";
import { GiftIcon, PlusIcon, MoreVertical, Trash2, Edit } from "lucide-react";
import { Skeleton } from "./ui/skeleton";
import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
import { AlertTriangle } from "lucide-react";
@@ -38,6 +38,8 @@ import { CreateCustomProviderDialog } from "./CreateCustomProviderDialog";
export function ProviderSettingsGrid() {
const navigate = useNavigate();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [editingProvider, setEditingProvider] =
useState<LanguageModelProvider | null>(null);
const [providerToDelete, setProviderToDelete] = useState<string | null>(null);
const {
@@ -65,6 +67,11 @@ export function ProviderSettingsGrid() {
}
};
const handleEditProvider = (provider: LanguageModelProvider) => {
setEditingProvider(provider);
setIsDialogOpen(true);
};
if (isLoading) {
return (
<div className="p-6">
@@ -116,7 +123,7 @@ export function ProviderSettingsGrid() {
className="p-4 cursor-pointer"
onClick={() => handleProviderClick(provider.id)}
>
<CardTitle className="text-lg font-medium flex items-center justify-between">
<CardTitle className="text-lg font-medium flex items-center justify-between mr-5">
{provider.name}
{isProviderSetup(provider.id) ? (
<span className="ml-3 text-sm font-medium text-green-500 bg-green-50 dark:bg-green-900/30 border border-green-500/50 dark:border-green-500/50 px-2 py-1 rounded-full">
@@ -140,7 +147,7 @@ export function ProviderSettingsGrid() {
{isCustom && (
<div
className="absolute top-2 right-2"
className="absolute top-2 right-0"
onClick={(e) => e.stopPropagation()}
>
<Popover>
@@ -155,6 +162,15 @@ export function ProviderSettingsGrid() {
</Button>
</PopoverTrigger>
<PopoverContent align="end" className="w-48 p-2">
<Button
variant="ghost"
size="sm"
className="w-full justify-start mb-1"
onClick={() => handleEditProvider(provider)}
>
<Edit className="h-4 w-4 mr-2" />
Edit Provider
</Button>
<Button
variant="ghost"
size="sm"
@@ -191,11 +207,16 @@ export function ProviderSettingsGrid() {
<CreateCustomProviderDialog
isOpen={isDialogOpen}
onClose={() => setIsDialogOpen(false)}
onClose={() => {
setIsDialogOpen(false);
setEditingProvider(null);
}}
onSuccess={() => {
setIsDialogOpen(false);
refetch();
setEditingProvider(null);
}}
editingProvider={editingProvider}
/>
<AlertDialog

43
src/hooks/useCustomLanguageModelProvider.ts
View File

@@ -40,6 +40,36 @@ export function useCustomLanguageModelProvider() {
},
});
const editProviderMutation = useMutation({
mutationFn: async (
params: CreateCustomLanguageModelProviderParams,
): Promise<LanguageModelProvider> => {
if (!params.id.trim()) {
throw new Error("Provider ID is required");
}
if (!params.name.trim()) {
throw new Error("Provider name is required");
}
if (!params.apiBaseUrl.trim()) {
throw new Error("API base URL is required");
}
return ipcClient.editCustomLanguageModelProvider({
id: params.id.trim(),
name: params.name.trim(),
apiBaseUrl: params.apiBaseUrl.trim(),
envVarName: params.envVarName?.trim() || undefined,
});
},
onSuccess: () => {
// Invalidate and refetch
queryClient.invalidateQueries({ queryKey: ["languageModelProviders"] });
},
onError: (error) => {
showError(error);
},
});
const deleteProviderMutation = useMutation({
mutationFn: async (providerId: string): Promise<void> => {
if (!providerId) {
@@ -63,15 +93,26 @@ export function useCustomLanguageModelProvider() {
return createProviderMutation.mutateAsync(params);
};
const editProvider = async (
params: CreateCustomLanguageModelProviderParams,
): Promise<LanguageModelProvider> => {
return editProviderMutation.mutateAsync(params);
};
const deleteProvider = async (providerId: string): Promise<void> => {
return deleteProviderMutation.mutateAsync(providerId);
};
return {
createProvider,
editProvider,
deleteProvider,
isCreating: createProviderMutation.isPending,
isEditing: editProviderMutation.isPending,
isDeleting: deleteProviderMutation.isPending,
error: createProviderMutation.error || deleteProviderMutation.error,
error:
createProviderMutation.error ||
editProviderMutation.error ||
deleteProviderMutation.error,
};
}

61
src/ipc/handlers/language_model_handlers.ts
View File

@@ -129,6 +129,67 @@ export function registerLanguageModelHandlers() {
});
},
);
handle(
"edit-custom-language-model-provider",
async (
event: IpcMainInvokeEvent,
params: CreateCustomLanguageModelProviderParams,
): Promise<LanguageModelProvider> => {
const { id, name, apiBaseUrl, envVarName } = params;
if (!id) {
throw new Error("Provider ID is required");
}
if (!name) {
throw new Error("Provider name is required");
}
if (!apiBaseUrl) {
throw new Error("API base URL is required");
}
// Check if the provider being edited exists
const existingProvider = db
.select()
.from(languageModelProvidersSchema)
.where(eq(languageModelProvidersSchema.id, CUSTOM_PROVIDER_PREFIX + id))
.get();
if (!existingProvider) {
throw new Error(`Provider with ID "${id}" not found`);
}
// Use transaction to ensure atomicity when updating provider and potentially its models
const result = db.transaction((tx) => {
// Update the provider
const updateResult = tx
.update(languageModelProvidersSchema)
.set({
id: CUSTOM_PROVIDER_PREFIX + id,
name,
api_base_url: apiBaseUrl,
env_var_name: envVarName || null,
})
.where(
eq(languageModelProvidersSchema.id, CUSTOM_PROVIDER_PREFIX + id),
)
.run();
if (updateResult.changes === 0) {
throw new Error(`Failed to update provider with ID "${id}"`);
}
return {
id,
name,
apiBaseUrl,
envVarName,
type: "custom" as const,
};
});
logger.info(`Successfully updated provider`);
return result;
},
);
handle(
"delete-custom-language-model",

8
src/ipc/ipc_client.ts
View File

@@ -1032,6 +1032,14 @@ export class IpcClient {
envVarName,
});
}
public async editCustomLanguageModelProvider(
params: CreateCustomLanguageModelProviderParams,
): Promise<LanguageModelProvider> {
return this.ipcRenderer.invoke(
"edit-custom-language-model-provider",
params,
);
}
public async createCustomLanguageModel(
params: CreateCustomLanguageModelParams,

1
src/preload.ts
View File

@@ -11,6 +11,7 @@ const validInvokeChannels = [
"get-language-model-providers",
"delete-custom-language-model-provider",
"create-custom-language-model-provider",
"edit-custom-language-model-provider",
"delete-custom-language-model",
"delete-custom-model",
"chat:add-dep",