Update frontend/src/components/ModelSelector.tsx

frontend/src/components/ModelSelector.tsx

@@ -1,21 +1,22 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
-const ModelSelector: React.FC = () => {
-  const [models, setModels] = useState([]);
-  const [selected, setSelected] = useState('groq-mixtral-8x7b-32768');
+const ModelSelector: React.FC<{ selectedModel: string; onModelChange: (model: string) => void }> = ({ selectedModel, onModelChange }) => {
+  const [models, setModels] = useState<any[]>([]);
 
   useEffect(() => {
-    axios.get('/api/models').then(res => setModels(res.data));
+    axios.get('/api/models')
+      .then(res => setModels(res.data))
+      .catch(() => setModels([]));
   }, []);
 
   return (
     <select
-      style={{ width: '100%', marginBottom: 8 }}
-      value={selected}
-      onChange={e => setSelected(e.target.value)}
+      style={{ width: '100%', marginBottom: 8, background: '#2d2d2d', color: 'white', border: '1px solid #444', padding: '4px 8px', borderRadius: 4 }}
+      value={selectedModel}
+      onChange={e => onModelChange(e.target.value)}
     >
-      {models.map(m => (
+      {models.map((m: any) => (
         <option key={m.id} value={m.id}>{m.name}</option>
       ))}
     </select>