feat: auto-detect ollama models

src/components/Chat.tsx

@@ -9,8 +9,24 @@ export function Chat() {
   const [loading, setLoading] = useState(false);
   const [model, setModel] = useState("llama3.1"); // Default local model
   const [enableTools, setEnableTools] = useState(true);
+  const [availableModels, setAvailableModels] = useState<string[]>([]);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    invoke<string[]>("get_ollama_models")
+      .then((models) => {
+        if (models.length > 0) {
+          setAvailableModels(models);
+          // If we have models and current one isn't valid, switch to first
+          if (!models.includes(model)) {
+            setModel(models[0]);
+          }
+        }
+      })
+      .catch((err) => console.error(err));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
@@ -76,12 +92,26 @@ export function Chat() {
         }}
       >
         <label>Ollama Model:</label>
-        <input
-          value={model}
-          onChange={(e) => setModel(e.target.value)}
-          placeholder="e.g. llama3, mistral"
-          style={{ padding: "5px" }}
-        />
+        {availableModels.length > 0 ? (
+          <select
+            value={model}
+            onChange={(e) => setModel(e.target.value)}
+            style={{ padding: "5px" }}
+          >
+            {availableModels.map((m) => (
+              <option key={m} value={m}>
+                {m}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <input
+            value={model}
+            onChange={(e) => setModel(e.target.value)}
+            placeholder="e.g. llama3, mistral"
+            style={{ padding: "5px" }}
+          />
+        )}
         <label
           style={{
             display: "flex",