Add removal confirmation to Model Hub for Installed Models

Author: embium

CHANGES.txt

@@ -100,4 +100,9 @@
 - Some changes with how configurations for notes directory and neo4j are saved and retrieved (Uses PouchDB instead of a file now)
 - Adjust the Similarity Thresholds for Smart Hubs to be more acceptable (Low: 0.5, Medium: 0.65, High: 0.8, Highest: 0.9)
 - Removed Knowledge Graph for Smart Hubs until further notice, I'm going to rework it and make sure it is polished before releasing it again
-- Fix notice under Default Prompts for File Attachments Prompt and set the placeholder to [FILE_ATTACHMENTS] rather than [DOCUMENTS_ATTACHED]
+- Fix notice under Default Prompts for File Attachments Prompt and set the placeholder to [FILE_ATTACHMENTS] rather than [DOCUMENTS_ATTACHED]
+
+## 0.3.0
+
+- Complete implementation of Knowledge Graph using Neo4j for Smart Hub document retrieval
+- Add removal confirmation to Model Hub for Installed Models

package.json

@@ -1,7 +1,7 @@
 {
   "name": "notebit",
   "description": "Notebit is a cross-platform desktop note-taking application built with Electron, React, and TypeScript.",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "author": {
     "email": "mikeymooney1991@gmail.com",
     "name": "Michael Mooney"
@@ -80,6 +80,7 @@
     "eventsource-parser": "^3.0.1",
     "highlight.js": "^11.11.1",
     "jotai": "^2.12.3",
+    "jsonrepair": "^3.12.0",
     "katex": "^0.16.22",
     "level": "^10.0.0",
     "loadash": "^1.0.0",

src/web/features/model-hub/components/ModelCard.tsx

@@ -35,6 +35,16 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Progress } from '@/components/ui/progress';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 
 // Types
 import { ModelInfo } from '@shared/types/ai';
@@ -341,7 +351,7 @@ export const AvailableModelCardComponent: React.FC<ModelCardProps> = ({
                         variant="default"
                         size="sm"
                         onClick={handlePullModel}
-                        disabled={isPulling || model.installed === true}
+                        disabled={isPulling || model.installed}
                         className="w-full"
                       >
                         <Download className="h-4 w-4 mr-2" />
@@ -353,7 +363,7 @@ export const AvailableModelCardComponent: React.FC<ModelCardProps> = ({
                     <p>
                       {isPulling
                         ? 'Cancel the current download'
-                        : model.installed === true
+                        : model.installed
                           ? 'This model is already installed'
                           : 'Download and install this model to your local Ollama'}
                     </p>
@@ -375,9 +385,15 @@ export const InstalledModelCardComponent: React.FC<ModelCardProps> = ({
   model,
 }) => {
   const isDeleting = modelHubState$.deletingModels[model.id]?.get() || false;
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
   const handleDeleteModel = async () => {
     await deleteModel(model.id);
+    setShowDeleteDialog(false);
+  };
+
+  const openDeleteDialog = () => {
+    setShowDeleteDialog(true);
   };
 
   return (
@@ -427,7 +443,7 @@ export const InstalledModelCardComponent: React.FC<ModelCardProps> = ({
                 <Button
                   variant="destructive"
                   size="sm"
-                  onClick={handleDeleteModel}
+                  onClick={openDeleteDialog}
                   disabled={isDeleting}
                   className="w-full"
                 >
@@ -446,6 +462,33 @@ export const InstalledModelCardComponent: React.FC<ModelCardProps> = ({
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
+
+          {/* Delete Confirmation Dialog */}
+          <AlertDialog
+            open={showDeleteDialog}
+            onOpenChange={setShowDeleteDialog}
+          >
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Remove Model</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Are you sure you want to remove the model "{model.name}"? This
+                  action cannot be undone.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel onClick={() => setShowDeleteDialog(false)}>
+                  Cancel
+                </AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleDeleteModel}
+                  className="bg-red-500 hover:bg-red-600"
+                >
+                  Remove
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
         </div>
       </CardFooter>
     </Card>