e.stopPropagation()}
- >
-
{title}
-
{message}
-
-
-
-
+
+
+
{title}
+
{message}
+
+
+
+
+
-
+
);
}
diff --git a/frontend/src/components/FileTree.tsx b/frontend/src/components/FileTree.tsx
index df49f94..7b6aa93 100644
--- a/frontend/src/components/FileTree.tsx
+++ b/frontend/src/components/FileTree.tsx
@@ -164,7 +164,7 @@ export function FileTree({ projectUuid, refreshKey, onFileSelect }: Props) {
return (data.entries || []).map((entry: FileNode) => ({
...entry,
expanded: false,
- children: entry.is_dir ? undefined : undefined,
+ children: undefined,
}));
} catch (err: any) {
setError(err.message);
diff --git a/frontend/src/components/ModelModal.tsx b/frontend/src/components/ModelModal.tsx
index a13581b..9aa6378 100644
--- a/frontend/src/components/ModelModal.tsx
+++ b/frontend/src/components/ModelModal.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
import { Search, ChevronDown, Check, X, Filter, Save } from 'lucide-react';
import { api } from '../api';
import { useNavigate } from 'react-router-dom';
@@ -89,6 +89,7 @@ function LoadingSkeleton() {
export function ModelModal({ currentModel, onModelChange }: Props) {
const navigate = useNavigate();
+ const dialogRef = useRef
(null);
const [open, setOpen] = useState(false);
const [tab, setTab] = useState('models');
const [providers, setProviders] = useState([]);
@@ -123,6 +124,26 @@ export function ModelModal({ currentModel, onModelChange }: Props) {
loadData();
}, [open, loadData]);
+ // Handle dialog open/close
+ useEffect(() => {
+ const dialog = dialogRef.current;
+ if (!dialog) return;
+
+ if (open && !dialog.open) {
+ dialog.showModal();
+ } else if (!open && dialog.open) {
+ dialog.close();
+ }
+
+ const handleCancel = (e: Event) => {
+ e.preventDefault();
+ setOpen(false);
+ };
+
+ dialog.addEventListener('cancel', handleCancel);
+ return () => dialog.removeEventListener('cancel', handleCancel);
+ }, [open]);
+
// Get only configured providers that are in the models category
const configuredModelProviders = useMemo(() => {
return providers.filter((p) => p.configured && p.categories?.includes('models'));
@@ -248,20 +269,24 @@ export function ModelModal({ currentModel, onModelChange }: Props) {
- {open && (
- setOpen(false)}
- >
+