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

add editable custom model (#794)

Browse Source 
Now users can free to edit their custom models by double clicking any
custom models created in each provider.
Before this, they have to delete -> create a new one.
I simply add an edit panel (which looks the same as 'Add Custom Model')
and integrate that process into the "update" button.

There is one more issue that if a user deletes a model that he was using
in chat, then back to chat, that model would still appear (and work)
unless user chooses a new one.
Tried to modify "delete-custom-model" in language_model_handlers.ts by
the logic that if the name of that model matches the latest using one ->
switch to auto (or default) model. Yet I failed, maybe need more
explanation for this :)
This commit is contained in:
BlueRaw
2025-08-13 12:53:44 +08:00
committed by GitHub
parent ac948412dc
commit 2c208e3ace
3 changed files with 353 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/settings/ModelsSection.tsx
View File

@@ -4,6 +4,7 @@ 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 { EditCustomModelDialog } from "@/components/EditCustomModelDialog";
import { useLanguageModelsForProvider } from "@/hooks/useLanguageModelsForProvider"; // Use the hook directly here
import { useDeleteCustomModel } from "@/hooks/useDeleteCustomModel"; // Import the new hook
import {
@@ -23,9 +24,12 @@ interface ModelsSectionProps {
export function ModelsSection({ providerId }: ModelsSectionProps) {
const [isCustomModelDialogOpen, setIsCustomModelDialogOpen] = useState(false);
const [isEditModelDialogOpen, setIsEditModelDialogOpen] = useState(false);
const [isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen] =
useState(false);
const [modelToDelete, setModelToDelete] = useState<string | null>(null);
const [modelToEdit, setModelToEdit] = useState<any | null>(null);
const [selectedModel, setSelectedModel] = useState<string | null>(null);
// Fetch custom models within this component now
const {
@@ -51,6 +55,21 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
setIsConfirmDeleteDialogOpen(true);
};
const handleEditClick = (model: any) => {
setModelToEdit(model);
setIsEditModelDialogOpen(true);
};
const handleModelClick = (modelApiName: string) => {
setSelectedModel(selectedModel === modelApiName ? null : modelApiName);
};
const handleModelDoubleClick = (model: any) => {
if (model.type === "custom") {
handleEditClick(model);
}
};
const handleConfirmDelete = () => {
if (modelToDelete) {
deleteModel({ providerId, modelApiName: modelToDelete });
@@ -85,22 +104,56 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
{models.map((model) => (
<div
key={model.apiName + model.displayName}
className="p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm"
className={`p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm cursor-pointer hover:shadow-md transition-shadow ${
selectedModel === model.apiName
? "ring-2 ring-blue-500 dark:ring-blue-400"
: ""
}`}
onClick={() => handleModelClick(model.apiName)}
onDoubleClick={() => handleModelDoubleClick(model)}
>
<div className="flex justify-between items-center">
<h4 className="text-lg font-semibold text-gray-800 dark:text-gray-100">
{model.displayName}
</h4>
{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 className="flex gap-2">
<Button
variant="ghost"
size="icon"
onClick={(e) => {
e.stopPropagation();
handleEditClick(model);
}}
className="text-blue-500 hover:text-blue-700 hover:bg-blue-100 dark:hover:bg-blue-900/50 h-8 w-8"
>
<svg
className="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
</Button>
<Button
variant="ghost"
size="icon"
onClick={(e) => {
e.stopPropagation();
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>
)}
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 italic">
@@ -155,7 +208,7 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
</Button>
)}
{/* Render the dialog */}
{/* Render the dialogs */}
<CreateCustomModelDialog
isOpen={isCustomModelDialogOpen}
onClose={() => setIsCustomModelDialogOpen(false)}
@@ -166,6 +219,17 @@ export function ModelsSection({ providerId }: ModelsSectionProps) {
providerId={providerId}
/>
<EditCustomModelDialog
isOpen={isEditModelDialogOpen}
onClose={() => setIsEditModelDialogOpen(false)}
onSuccess={() => {
setIsEditModelDialogOpen(false);
refetchModels(); // Refetch models on success
}}
providerId={providerId}
model={modelToEdit}
/>
<AlertDialog
open={isConfirmDeleteDialogOpen}
onOpenChange={setIsConfirmDeleteDialogOpen}