let first model be selected on init

frontend/realtime/src/components/features/ModelSelection/ModelSelectionDialog.tsx

@@ -3,6 +3,7 @@ import { useSignalEffect } from "@preact/signals-react";
 import { ModelCard } from "./ModelCard";
 import { models } from "~/data/models";
 import { selectedModel, dispatchers } from "~/signals/uiEvents/modelSelection";
+import { useEffect } from "react";
 
 interface ModelSelectionDialogProps {
   onClose: () => void;
@@ -16,6 +17,13 @@ export const ModelSelectionDialog = ({
     selectedModel.value;
   });
 
+  // Ensure a model is selected when the dialog opens
+  useEffect(() => {
+    if (selectedModel.value === null && models.length > 0) {
+      dispatchers.setSelectedModel(models[0].id);
+    }
+  }, []);
+
   const handleSelectModel = (modelId: string) => {
     dispatchers.setSelectedModel(modelId);
     onClose(); // Close the dialog after selection

frontend/realtime/src/signals/uiEvents/modelSelection.ts

@@ -1,7 +1,10 @@
 import { effect, signal } from "@preact/signals-react";
+import { models } from "~/data/models";
 
 // Define the signals for selected models and download states
-export const selectedModel = signal<string | null>(null);
+export const selectedModel = signal<string | null>(
+  models.length > 0 ? models[0].id : null,
+);
 export const selectedLora = signal<string | null>(null);
 
 // Replace single download tracking with a map to track multiple downloads