feat: add model deselection functionality in ComboFormModal and ComboDetailPage (#889)

- Implemented handleDeselectModel function to allow users to deselect models in both ComboFormModal and ComboDetailPage.
- Updated ModelSelectModal to handle deselection and visually indicate selected models.
- Enhanced user experience by allowing models to be removed from the selection without closing the modal.

src/app/(dashboard)/dashboard/media-providers/combo/[id]/page.js

@@ -126,6 +126,14 @@ export default function ComboDetailPage() {
     await saveCombo({ models: next });
   };
 
+  const handleDeselectModel = async (model) => {
+    const value = model?.value || model;
+    if (!value || !providers.includes(value)) return;
+    const next = providers.filter((p) => p !== value);
+    setProviders(next);
+    await saveCombo({ models: next });
+  };
+
   const handleRemoveProvider = async (idx) => {
     const next = providers.filter((_, i) => i !== idx);
     setProviders(next);
@@ -389,10 +397,13 @@ export default function ComboDetailPage() {
         isOpen={showPicker}
         onClose={() => setShowPicker(false)}
         onSelect={handleAddModel}
+        onDeselect={handleDeselectModel}
         activeProviders={connections}
         modelAliases={modelAliases}
         title={`Add ${kindLabel} Model`}
         kindFilter={combo.kind}
+        addedModelValues={providers}
+        closeOnSelect={false}
       />
     </div>
   );